
@font-face {
  font-family: "Titles";
  src: url(../fonts/TradeWinds-Regular.ttf);
  }
  @font-face {
      font-family: "Titles 02";
      src: url(../fonts/ArchitectsDaughter-Regular.ttf);
      }

      body, html {
        overflow-x: hidden !important;
      }
      /* html{
        overflow: hidden;
      } */
body{
  z-index: 1;
  background: #fff;
  font-family: "Titles 02";
}

ul{
  list-style: none;
}
a{
  text-decoration: none;
  color: #f9f8f8;
}


::-webkit-scrollbar-thumb:horizontal{
display: none;
}
/*___________________Estilos generales_____________________*/
/*Carrusel de fotos*/

.row{
  justify-content: center;
}
 .item  img {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;

}


.title-2{
  font-size: 2.5em;
  font-family: "Titles 02";
}
.title {
  /* color:#f7b9be; */
  color:#FF7E8E;
  font-family: Titles;
  font-size: 36px;
  }

.font-22 {
 font-size: 22px;
 }
.sombra-texto { 
text-shadow: #0000001f 0.1em 0.1em 0.2em;
 } 
 .sombra-texto2 { 
  text-shadow: #ffffff 0.1em 0.1em 0.2em;
   } 
  

.m-0 {
  margin-bottom:0;
  }
  .m-10 {
  margin-bottom: 10px;
  }
  .m-20 {
  margin-bottom: 20px;
  }
  .m-40 {
  margin-bottom: 40px;
  }
  .mt-20{
    margin-top: 20px;
  }

  /*_________________________AUDIO___________________________________*/
  .audio {
    position: fixed;
    z-index:99999;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    opacity: 0;
    }
    .aparecer-audio {
    position: fixed;
    z-index:99999;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    opacity: 1;
    }
    .desaparecer-audio {
    visibility: hidden;
    opacity: 0;
    transition: all 3s;
    position: fixed;
    right: 20px;
    bottom: 20px;
    }
    .pausa01 {
    opacity: 0;
    position: fixed;
    z-index:99999;
    right: 20px;
    bottom: 20px;
    }
    .aparecer-pausa {
    position: fixed;
    z-index:99999;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    opacity: 1;
    }
    /*_________________________________SOBRE__________________________*/
    
#carta {

width: 100vw;

height: 100vh;

background: #f7b9be;

z-index:9999;

position: absolute;

display: flex;

justify-content: center;

align-content: center;

flex-direction: column;
margin-top: 0!important;


}

.sobre-superior {
  position: absolute;
  z-index: 10;
  right: 0;
  left: -4px;
  margin: 0 auto;


}



.con-scroll {

overflow-y: scroll;

}

.arriba{

-moz-transform: translate(0px, -1500px);

-webkit-transform: translate(0px, -1500px);

-o-transform: translate(0px, -1500px);

-ms-transform: translate(0px, -1500px);

transform: translate(0px, -1500px);

transition: all 3s;

}



.abajo {

-moz-transform: translate(0px, 1000px);

-webkit-transform: translate(0px, 1000px);

-o-transform: translate(0px, 1000px);

-ms-transform: translate(0px, 1000px);

transform: translate(0px, 1000px);

transition: all 3s;

}



.desaparecer {

visibility: hidden;

opacity: 0;

transition: all 3s;

}





@media (max-width: 991px) {

.titulo-sobre {

font-family: "Titles";

margin: 0;

color: #000;

position: absolute;

z-index:11;

right: 0;

left: 0;

margin: 0 auto;

margin-top: 10px;
font-size: 28px;

}

.titulo-sobre-02 {

font-family: "Titles";

margin: 0;

color: #000;

position: absolute;

z-index:11;

right: 0;

left: 0;

margin: 0 auto;

top: 20px;

font-size: 22px;
width:80%;
}

.boton-sobre {

  font-family: "Titles";

color: #000;

position: absolute;

z-index:12;

right: 0;

left: 0;

margin: 0 auto;

top: 48%;

font-size: 25px;

background-color: #f7b9be74;

width: 150px;

height: 35px;

border-radius: 20px;

display: flex;

justify-content: center;

align-content: center;

flex-direction: column;

}

#sobre img {

width: 103.6%;

}

  }

@media (min-width: 992px) {

.titulo-sobre {

  font-family: "Titles";

margin: 0;

color: #000;

position: absolute;

z-index:11;

right: 0;

left: 0;

margin: 0 auto;


font-size: 40px;

}

.titulo-sobre-02 {

  font-family: "Titles";

margin: 0;

color: #000;

position: absolute;

z-index:11;

right: 0;

left: 0;

margin: 0 auto;

top: 20px;

font-size: 34px;

width:80%;

}

.boton-sobre {

  font-family: "Titles";

color: #000;

position: absolute;

z-index:12;

right: 0;

left: 0;

margin: 0 auto;

top: 48%;

font-size: 40px;

background-color: rgba(255,255,255,0.5);

width: 200px;

height: 60px;

border-radius: 20px;

display: flex;

justify-content: center;

align-content: center;

flex-direction: column;

}

#sobre img {

width: 100.5%;

}
}

/*_________________________HEADER__________________________________*/


.swiper-slide{
  min-height: 100vh;
}

.informacionHeader{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
min-height: 200px;
width: 100%;
position: absolute;
bottom: 0;
z-index: 999;
}
img.estrella-header{
  margin: 0 10px;
}
.cuadro-top{
  background-color: #FFB1BF;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0px;
  margin-bottom: 40px;

}
.cuadro-festejada{
  padding: 40px 20px;
  position: relative;
  background-image: url(../img/bg-mob2.png);
  background-size: cover;
  background-position-y: bottom;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}


.cuadro-festejada::before{
  position: absolute;
  content: "";
  inset: 0;
  background-color: rgba(255, 255, 255, 0.5);
}

.cuadroInfo{
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
}

.cuadro-instagram {
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
padding: 40px 20px;
overflow:hidden;
border-radius: 20px;
margin-bottom: 40px;
}

.cuadro-liverpool {
  background-color: #DF0096;
  padding: 40px 20px;
  margin-top: 20px;
  overflow:hidden;
  border-radius: 20px;
  width: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  }

img.image{
  border-radius: 20px;
  box-shadow: 3px 5px 9px 0px #271e1e47;
  position: relative;
}

.img-estrella{
  position: relative;
}
/*________________________TIMER__________________________________________*/
section.timer{
  display: flex;
  align-items: center;
  height: 500px;
  background-image: url(../img/principal-04.jpg);
  background-size: cover;
  background-position: right;
  display: flex;
  margin-bottom: 40px;
}
.container-title{
  height: 100px;
  width: 100%;
  background-color: #f7b9be;
  border-radius: 20px;
  box-shadow: 3px 5px 9px 0px #271e1e47;
  display: flex;
  justify-content: center;
  align-items: center;
}




ul.tiempo {
  margin: 0;
  padding: 0;
  text-align: center;
  
}
.tiempo li {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  color: #ffffff;
  padding: 0 10px;
  font-size: 2em;
  
}

.tiempo li span {
  display: block;
  
}
/*________________MISA Y RECEPCION________________*/
.cuadro-mapa,
.cuadro-celebracion{
  padding: 40px 20px;
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 20px;
  box-shadow: 3px 5px 9px 0px #271e1e47;
  margin-bottom: 40px;
 
}
.cuadro-mapa{
  background-image: url(../img/bg-mob2.png);
}
.cuadro-celebracion{
  background-image: url(../img/bg-mob2.png);
}
.cuadro-hospedaje{
  background-image: url(../img/bg-mob2.png);
  position: relative;
  background-size: cover;
  background-position-y: bottom;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  border-radius: 20px;
  box-shadow: 3px 5px 9px 0px #271e1e47;
 
}
.cuadroAsistencia{
  padding: 40px 20px;
  background-image: url(../img/bg-mob.png);
  background-size: cover;
  background-position-y: bottom;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 40px;
  position: relative;
 
}

.fotoAsistencia{
display: flex;
flex-wrap: wrap;
justify-content: center;

}

.cuadro-mapa::before,
.cuadro-celebracion::before,
.cuadro-hospedaje::before,
.cuadroAsistencia::before{
  position: absolute;
  content: "";
  inset: 0;
  background-color: rgba(255, 255, 255, 0.5);
}
/*______________________SCROLLBAR_______________________________*/
::-webkit-scrollbar{
  width: 10px;
  background-color: #000;
}
::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
  border-radius: 10px;
  background-color: #000;
}
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-color: #f7b9be;
  background-image: -webkit-linear-gradient(90deg,transparent,rgba(0, 0, 0, 0.4) 50%,transparent,transparent)
}



/*_______________________________fotografias_____________________-*/
.cuadro-carousel,
.cuadro-video{
  background-color: #f7b9be;
padding: 40px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  margin-bottom: 40px;
} 

.btn-primary{
  background-color: #FF7E8E;
  border-color: #FF7E8E;
  box-shadow: 3px 5px 9px 0px #271e1e47;
  color: #f9f8f8;
}
.btn-primary:hover{
  background-color: #f9f8f8;
  color: #000;
}




/*----------------------------------
Form
------------------------------------*/
.cuadro-form {
  background: #f7b9be;
  padding: 40px 20px;
  margin-top: 20px;
  overflow:hidden;

  }
.form-campo {
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  border: 1px solid transparent;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  color:#fff;

  }
  
  .form-campo::-webkit-input-placeholder {
    color: #fff;
  }
  
  .form-campo::-moz-placeholder {
    color: #fff;
  }
  
  .form-campo:-ms-input-placeholder {
    color: #fff;
  }
  
  .form-campo::placeholder {
    color: #fff;
  }
  
  .form-campo:focus {
    font-weight: 400;
    color: #fff;
  }
  
  .form-campo:focus::-webkit-input-placeholder {
    color: #fff;
  }
  
  .form-campo:focus::-moz-placeholder {
    color: #fff;
  }
  
  .form-campo:focus:-ms-input-placeholder {
    color: #fff;
  }
  
  .form-campo:focus::placeholder {
    color: #fff;
  }
  
  .btn-form {
  background: rgba(0, 0, 0, 0.1);
  padding: 10px 60px 7px 60px;
  border: 1px solid transparent;
  color:#fff;
  transition-duration: .2s;
  border-radius:20px;
  }
  .btn-form:hover {
  background: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  color:#000;
  transition-duration: .2s;
  }

  
  /*----------------------------------
Selección
------------------------------------*/
::selection {
  color: #080808;
  background: #000;
  text-shadow: none;
}

::-webkit-selection {
  color: #080808;
  background: #000;
  text-shadow: none;
}

:active,
:focus {
  outline: none;
}

/*FOTOGRAFIA FOOTER*/
.fotografia-footer{
  min-height: 700px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  
}

.fotografia-footer::before{
  position: absolute;
  content: "";
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.cuadro-bottom{
  background-color: #FFB1BF;
  width: 100%;
  padding: 0 10px;
}

/*___________________________________FOOTER____________________________________*/
.cuadro-footer {
background-color: rgba(0, 0, 0, 0.4);
padding: 20px 0;
margin: 0 0;
overflow:hidden;
}

/*____________________________MEDIA QUERIES PC_____________________________*/
@media screen and (min-width:1024px) {

img.estrella-header{
  width: 500px;
}

  .cuadroAsistencia{
    justify-content: center;
  }
  .cuadro-form{
    width: 100%;
  }
  .imageAsistencia{
    width: 100%;

  }


}



