@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@300;600&display=swap');

:root {
  --primary: #640F14;
  --secondary: #606060;
  --third: #E3779B;
  --four: #fff;
  --white: #fff;
  --phone: 480px;
  --tablet: 720px;
  --desktop: 1024px;
}

/***** IMPORTAR LAS FUENTES *****/


html, body{
    font-family: 'Montserrat', sans-serif;
    color: #333333;
    font-size: 16px;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Great Vibes', cursive;
  color: var(--primary);
}

a {
  text-decoration: none !important;
}

a:hover {
  background-color: opacity(.8) !important;
}

.font20{
    font-size: 20px;
}
.btn-floating i{
    line-height: inherit!important;
}

.date-text {
  font-size: 1.3rem;
}

/***** PARA EL FORMULARIO *****/

[type="checkbox"].filled-in:checked+span:not(.lever):after {
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary)!important;
    background-color: var(--primary)!important;
    z-index: 0;
}

[type="checkbox"].filled-in:not(:checked)+span:not(.lever):after {
  border: 2px solid var(--secondary);
}

textarea.materialize-textarea:focus:not([readonly]) { 
  border-bottom: 1px solid var(--secondary); 
  -webkit-box-shadow: 0 1px 0 0 var(--secondary); 
  box-shadow: 0 1px 0 0 var(--secondary);
}
.input-field-color label {
  color: var(--secondary);
}
.input-field-color input,.input-field-color textarea /* label input text underline focus color */{
  border-bottom: 1px solid var(--secondary)!important;
}
.input-field-color input:focus + label, .input-field-color textarea:focus + label /* label titulo focus color */{
  color: var(--secondary)!important;
}
.input-field-color input:focus, .input-field-color textarea:focus/* label input text underline focus color */{
  border-bottom: 1px solid var(--secondary)!important;
  box-shadow: 0 1px 0 0 var(--secondary)!important;
}
.input-field-color input:focus,.input-field-color textarea:focus /* label input text underline focus color */{
  border-bottom: 1px solid var(--secondary)!important;
  box-shadow: 0 1px 0 0 var(--secondary)!important;
}

.input-field-color-2 label {
  color: var(--primary);
}
.input-field-color-2 input,.input-field-color-2 textarea /* label input text underline focus color */{
  border-bottom: 1px solid var(--primary)!important;
}
.input-field-color-2 input:focus + label, .input-field-color-2 textarea:focus + label /* label titulo focus color */{
  color: var(--primary)!important;
}
.input-field-color-2 input:focus, .input-field-color-2 textarea:focus/* label input text underline focus color */{
  border-bottom: 1px solid var(--primary)!important;
  box-shadow: 0 1px 0 0 var(--primary)!important;
}
.input-field-color-2 input:focus,.input-field-color-2 textarea:focus /* label input text underline focus color */{
  border-bottom: 1px solid var(--primary)!important;
  box-shadow: 0 1px 0 0 var(--primary)!important;
}
.dropdown-content li>a, .dropdown-content li>span {
    font-size: 16px;
    color: var(--primary);
    display: block;
    line-height: 22px;
    padding: 14px 16px;
}
.select-wrapper .caret {
    fill: var(--primary);
}
.select-wrapper input.select-dropdown {
    color: var(--white);
}
/*´Para el alert del form */
#alert_questions{
    font-size:10px;
    padding: 8px;
    border-radius: 3%;
}

/***** PARA LOS BOTONES *****/
.bg-buttons,.bg-buttons:hover,.bg-buttons:focus{
    font-family: 'Wigrum-light';
}


/***** PARA EL PARALLAX PRINCIPAL *****/
#parallax-container-principal {
  height: 100vh;
}
.parallax-container #img_parallax_principal img {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translateX(-50%) translateY(25%) scale(.8) !important;
    transform: translateX(-50%) translateY(25%) scale(.8) !important;
}
.parallax-container #img_parallax_principal_movil img {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translateX(-50%) translateY(17%) scale(.7) !important;
    transform: translateX(-50%) translateY(17%) scale(.7) !important;
}
/* Contiene el emblema y el contador */
.seccionportada{
    width: 80%;
    margin-top: 10%;
}

/***** EN CASO DE HABER NOMBRE DE PADRES O PADRINOS *****/
/*.text-padres{
    font-family: 'Wigrum-light', sans-serif;
    font-size: 20px;
    color: var(--white)fff;
}*/

/***** PARA EL LOADER *****/

.preloader-background {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white)fff;
  opacity: 0.8;
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}.lds-heart {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  transform-origin: 40px 40px;
}.lds-heart div {
  top: 32px;
  left: 32px;
  position: absolute;
  width: 32px;
  height: 32px;
  background: var(--primary);
  animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lds-heart div:after,.lds-heart div:before {
  content: " ";
  position: absolute;
  display: block;
  width: 32px;
  height: 32px;
  background: var(--primary);
}.lds-heart div:before {
  left: -24px;
  border-radius: 50% 0 0 50%;
}.lds-heart div:after {
  top: -24px;
  border-radius: 50% 50% 0 0;
}@keyframes lds-heart {0% {
    transform: scale(0.95);
  }5% {
    transform: scale(1.1);
  }39% {
    transform: scale(0.85);
  }45% {
    transform: scale(1);
  }60% {
    transform: scale(0.95);
  }100% {
    transform: scale(0.9);
  }
}

/***** PARA EL MENU *****/

/***** Para el menu *****/
#mobile-demo{
    background-color: var(--primary);
    opacity: .8;
    width: 275px; 
}

/***** Para las letras del menu  *****/
.sidenav li>a{
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    font-size: 18px;
    color: var(--white);
    font-weight: 400;
    display: block;
    padding: 0 15px;
    cursor: pointer;
    font-family: 'Wigrum-light', sans-serif;
}

/***** Para el hover de las letras del menu *****/
.sidenav li>a:hover{
    background-color: var(--white);
    color: var(--primary) !important;
}

/***** Para los li del sidenav left *****/
.li_inicio{
    margin-top: 40%;
}
.li_cont{
    margin-top: 8%;
}

#iconArrow{
    height: 56px;
    line-height: 56px;
    position: fixed;
    z-index: 9;
    left: 20px;
    font-size: 20px;
    color: var(--white);
    top:50%;
    background-color: var(--primary);
}
.close_icon_sidenav{
    color: var(--white);
    font-size: 20px;
    padding: 0 170px;

}

#iconHamburguer{
    height: 56px;
    line-height: 56px;
    color: white;
    position: absolute;
    z-index: 9;
    left: 20px;
    font-size: 20px;
}


/***** PARA EL BUTTON TOP PAGE *****/
.btn-floating{
    background-color: var(--primary);

}

.btn-floating:hover{
    opacity: .8;
}

/***** PARA EL FOOTER *****/

.page-footer{
    background-color: rgb(255,255,255);
}
.page-footer .footer-copyright{
    color: #333;
    background-color: rgb(255,255,255);
}

/***** EN CASO DE EXISTIR CAROUSELES PARA DRESS CODE O FIRMAS/DESEOS *****/
/* .carousel .carousel-item {
    background-color: var(--secondary); 
    color:var(--white); 
    opacity: 1;
    overflow-y: auto;
    padding: 80px 50px 80px 50px;
}
.carousel .indicators .indicator-item.active{
    background-color: var(--white);
}
.carousel .indicators .indicator-item{
    background-color: var(--white);
} */

/***** PARA LA INVITACION *****/

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  z-index: 99999;
  cursor: pointer;
}
#overlay .video_invitacion {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: auto; /*55*/
  max-width: 80%; /*80*/
  max-height: 80%;
}

#video{
  position: absolute;
  top: 52%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  outline: none;
  border: 0;
}

#text{
  position: absolute;
  font-size: 20px;
  color: white;
  right: 0;
  padding:20px!important;
  
}



/***** EN CASO DE QUE NO EXISTA EMBLEMA DE NOMBRE DE LOS NOVIOS Y EMBLEMA *****/

.nombre_novios{
    font-family: 'Wigrum-light', sans-serif;
    color: #f8f8f5;
    margin-top: 55%; /*Quitar si se va a poner una imagen encima del parallax, por debajo del nombre*/
}
.logoemblema{
    width:350px;
    /*-o-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.4));;
    -ms-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.4));;
    -webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.4));;
    filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.4));*/
    
}
.logofecha{
    margin-top: -50px;
}

/***** PARA LAS SECCIONES DE LA´PÁGINA *****/

.section_invitacion{
    color: var(--white)fff;
}

#section_dresscode{
    color: var(--white)fff!important;
}
#section_savedate{
    background-color: var(--white); 
    color: #333333;
}

.bg-five{
      background: url(../img/Fondo5.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

.bg-four{
      background: url(../img/Fondo4.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

.bg-three{
      background: url(../img/Fondo3.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

.bg-two{
      background: url(../img/Fondo2.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.bg-one{
      background: url(../img/Fondo1.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#modal_sobre {
  width: 25% !important;
}

.section_title{
    font-family: 'Photograph Signature', sans-serif;
    /* font-size: 13vh; */
    text-transform: capitalize;
    color: rgba(69,79,130, 1.0);
}

/***** PARA EL CONTADOR *****/

#timerCont{
    font-family: 'Wigrum-light', sans-serif;
    font-size: 20px;
    background-color:var(--primary);
    opacity: .8;
    color: var(--white);
    /* margin-top: -20px; */
}

/***** PARA LOS MODALES *****/
.modal{
    width: 80%!important;
    height: auto;
    max-height: 75%!important;
}
#modal_mensaje{
    width: 80%!important;
    font-size: 24px;
    height: auto!important;
}

/***** EN CASO DE HABER UN VIDEO O MENSAJE DE INTRO A LA PÁGINA *****/
.myintroiframe{
    width: 100%;
    height: 100%;
}


/***** PARA EL IFRAME DE MAPS ****/
.maps{
    width: 100%;
    height: 300px;
}

.img-cover {
  max-width: 350px;
  max-height: 200px;
  object-fit: cover;
  overflow: hidden;
}

@media (min-width: 1500px){ 
  #img_parallax_principal{
    height: 100vh;
  }
}  
/* Escritorios muy grandes
------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1499px){ 


}   

/* Tablets en horizonal y escritorios normales
------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) { 

.li_inicio{
margin-top: 75%;
}
.card .card-title{
font-size: 22px!important;
}

}   

.parallaxlast2{
  transform: translatex(0%) translateY(-10%) scale(1) !important;
}

/* Móviles en horizontal o tablets en vertical
------------------------------------------------------------------------- */
@media (max-width: 767px) {

  #modal_sobre {
    width: 90% !important;
  }

  .fecha_boda{

  }
  #timerCont{
    font-size: 19px;
    font-weight: 400;
  }
  .sidenav li>a{
  font-size: 20px;
  padding: 0 15px;
  font-family: 'Wigrum-light', sans-serif;
  }
  .nombre_novios{

  margin-top: 55%; /*Quitar si se va a poner una imagen encima del parallax, por debajo del nombre*/
  }
  .section_title{
  font-size: 7vh;
  }
  .li_inicio{
  margin-top: 10%;
  }
  .li_cont{
  margin-top: 0;
  }



  .card .card-title{
  font-size: 20px!important;
  }
  .seccionportada{
  margin-top: 85%;
  }
  .logoemblema{
  width:300px;
  margin-top: 30%;

  /*-o-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.4));;
      -ms-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.4));;
      -webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.4));;
      filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.4));*/
  }
  .parallaxlast{
  transform: scale(0.8);
  }

  #overlay .video_invitacion {
    width: 100%;
    max-width: 100%;
    max-height: 90%;
  }
  #video{
  width: 100%;
  }

  .bg-one	{
    background: url(../img/Fondo1.png) no-repeat center center ; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .bg-two	{
    background: url(../img/Fondo2.png) no-repeat center center ; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .bg-three	{
    background: url(../img/Fondo3.png) no-repeat center center ; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .bg-four{
      background: url(../img/Fondo4.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

  }

  .bg-five{
    background: url(../img/Fondo5.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .parallaxlast2{
    transform: translatex(5%) translateY(-10%) scale(0.8) !important;
  }

  .mi-container-mesa{
  width: 100%!important;
  }


}   

/* Móviles en vertical
------------------------------------------------------------------------- */
@media (max-width: 480px) { 
  html, body{
    font-size: 18px;
  } 
  
  .date-text{
    font-size: 18px;
  }

  .parallaxlast2{
    transform: translatex(0%) translateY(0%) scale(0.7) !important;
  }

  .parallaxlast3{
    transform: translatex(10%) translateY(5%) scale(0.4) !important;
  }

  .mb-max {
    margin-bottom: 220px
  }

  .carousel {
    height: 200px;
  }

  .carousel.carousel-slider .carousel-item {
    min-height: 200px;
  }  

  h3 {
    font-size: 2.5rem;
  }

  #timerCont{
    font-size: 15px;
    font-weight: 400;
  }

  .sidenav li>a{

  font-size: 18px;
  padding: 0 15px;
  font-family: 'Wigrum-light', sans-serif;

  }
  .nombre_novios{

  margin-top: 55%; /*Quitar si se va a poner una imagen encima del parallax, por debajo del nombre*/
  }
  .section_title{
  font-size: 7vh;
  }
  .li_inicio		{
  margin-top: 10%;
  }
  .li_cont{
  margin-top: 0;
  }

  .card .card-title{
  font-size: 20px!important;
  }

  .seccionportada{
    width: 85%;
    margin-top: 75%;
  }
  .logoemblema{
    width: 250px;
    margin-top: 50%;
  -o-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.4));;
      -ms-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.4));;
      -webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.4));;
      filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.4));
  }
  .parallaxlast{
    transform: scale(0.5);
  }

  #overlay .video_invitacion {
    width: 100%;
    max-width: 100%;
    max-height: 90%;
  }
  #video{
    width: 100%;
  }

  .bg-one	{
    background: url(../img/Fondo1-vertical.png) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .bg-two	{
    background: url(../img/Fondo2-vertical.png) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .bg-three	{
    background: url(../img/Fondo3-vertical.png) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .bg-four{
      background: url(../img/Fondo4-vertical.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .bg-five{
      background: url(../img/Fondo5-vertical.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .dress-code-msj{
  /*margin-top: -220px;*/
  }

  .mi-container-mesa{
  width: 100%!important;
  }

  .img-cover {
    max-width: 350px;
    max-height: 100px;
    object-fit: cover;
  }
}

/* CUSTOM */

.text-primary{
  color: var(--primary) !important;
}

.text-secondary{
  color: var(--secondary) !important;
}

.text-third{
  color: var(--third) !important;
}

.text-four{
  color: var(--four) !important;
}

.bg-primary{
  background-color: var(--primary) !important;
}

.bg-secondary{
  background-color: var(--secondary) !important;
}

.bg-third{
  background-color: var(--third) !important;
}

.bg-last{
  background-color: var(--four) !important;
}

.section_ur{
  background-color: var(--four) !important;
}

.bg-custom{
  background-color: #84c7d3;
}

.text-white{
  color: var(--white);
}

.m-0 {
  margin: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 1rem;
}

.text-shadow {
  text-shadow: -3px 5px black;
}

.img-shadow {
  -webkit-filter: drop-shadow(5px 5px 5px black);
  filter: drop-shadow(5px 5px 5px black);
}

.object-cover {
  object-fit: cover;
}

.py-10 {
  padding: 12rem 0;
}