@import url('https://fonts.cdnfonts.com/css/photograph-signature');

:root {
  --primary: #36618a;
  --secondary: #606060;
  --third: #194A79;
  --four: #567A9D;
  --white: #fff;
  --input: #606060;
  --phone: 480px;
  --tablet: 720px;
  --desktop: 1024px;
}

/***** IMPORTAR LAS FUENTES *****/
@font-face {
  font-family: Georgia;
  src: url(../fonts/Georgia.ttf);
}

@font-face {
  font-family: Poppins;
  src: url(../fonts/POPPINS-REGULAR.TTF);
}

@font-face {
  font-family: Harmony;
  src: url(../fonts/HARMONY\ PERSONAL\ USE.OTF);
}

html, body{
    font-family: 'Poppins', serif !important;
    color: #333333;
    font-size: 15px;
}

a {
  text-decoration: none !important;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Photograph Signature', sans-serif;
  color: var(--primary);
}

/* h1.font-harmony, h2.font-harmony, h3.font-harmony {
  font-size: 8rem;
} */

.font-harmony {
  font-family: 'Harmony', serif !important;
  /* font-size: 6rem; */
}

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

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

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

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

textarea.materialize-textarea:focus:not([readonly]) { 
  border-bottom: 1px solid var(--input); 
  -webkit-box-shadow: 0 1px 0 0 var(--input); 
  box-shadow: 0 1px 0 0 var(--input);
}
.input-field-color label {
  color: var(--input);
}
.input-field-color input,.input-field-color textarea /* label input text underline focus color */{
  border-bottom: 1px solid var(--input)!important;
}
.input-field-color input:focus + label, .input-field-color textarea:focus + label /* label titulo focus color */{
  color: var(--input)!important;
}
.input-field-color input:focus, .input-field-color textarea:focus/* label input text underline focus color */{
  border-bottom: 1px solid var(--input)!important;
  box-shadow: 0 1px 0 0 var(--input)!important;
}
.input-field-color input:focus,.input-field-color textarea:focus /* label input text underline focus color */{
  border-bottom: 1px solid var(--input)!important;
  box-shadow: 0 1px 0 0 var(--input)!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(--input);
}
.select-wrapper input.select-dropdown {
    color: var(--input);
}
/*´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: 'Georgia';
}


/***** PARA EL PARALLAX PRINCIPAL *****/
#parallax-container-principal {
  height: 100vh;
}
.parallax-container #img_parallax_principal_movil img {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translateX(-47%) !important;
    transform: translateX(-47%) !important;
}
/* Contiene el emblema y el contador */
.seccionportada{
    width: 80%!important;
    margin-top: 5%;
}

/***** EN CASO DE HABER NOMBRE DE PADRES O PADRINOS *****/
/*.text-padres{
    font-family: 'Georgia', 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: 'Georgia', 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: var(--primary);
    position: fixed;
    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: 1000;
  cursor: pointer;
}
#overlay .video_invitacion {
  width: 100%; /*55*/
  max-width: 100%; /*80*/
  max-height: 100%;
}

#video{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: auto;
  max-width: 80%;
  max-height: 100%;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

#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: 'Georgia', 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-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;
}

.section_portada{
      background: url(../img/portada.png) no-repeat center center; 
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.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: 'Georgia', sans-serif;
    font-size: 18px;
    background-color:var(--primary);
    opacity: .8;
    color: var(--white);
    margin-top: -20px;
}

/*****  PARA LAS CARDS *****/

.title_cards{
    font-family: Caroline, sans-serif;
    color: #3a938f;
}

.mycard{
    /*border: 10px double #258eb8;*/
    

}



/***** PARA LOS MODALES *****/
.modal{
    height: 100%!important;
    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;
}

/***** EN CASO DE HABER GALERIA REVUELTA GRID *****/

/* ---- isotope ---- *//*.grid {
  background: var(--white)ff9;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}



.grid-sizer,.grid-item {
  width: 33.333%;
}
.grid-item {
  float: left;
}
.grid-item img {
  display: block;
  max-width: 100%;
}*/

/***** PARA EL MENSAJE DE LOS DRESS CODE *****/
.dress-code-msj{
    font-size: 18px;
    
    z-index: 99999999;
}

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

.border-parents {
  border-top: 0px;
  border-bottom: 0px;
  border-right: 3px solid #60606085;
  border-left: 0px;
}

.img-invitacion {
  max-height: 90vh;
}

@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;
}


}   

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

  .fecha_boda{

  }
  #timerCont{
    font-size: 19px;
    font-weight: 400;
  }
  .sidenav li>a{
  font-size: 20px;
  padding: 0 15px;
  font-family: 'Georgia', 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%;
  }

  .section_portada{
    background: url(../img/portada.png) no-repeat center center; 
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
  }

  .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;
  }

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

  }

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


}   

/* Móviles en vertical
------------------------------------------------------------------------- */
@media (max-width: 480px) { 

  body {
    font-size: 14px;
  }

  .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: 16px;
  padding: 0 15px;
  font-family: 'Georgia', 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: 15%;
    /*-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%;
    height: 100%
  }
  .section_portada{
    background: url(../img/portada-vertical.png) no-repeat center center; 
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
  }

  .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;
  }

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

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

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

  .border-parents {
    border: 0px;
    margin-bottom: 1.5rem;
  }

  .border-parents.py-5, .border-parents-2.py-5 {
    padding: 0px !important;
  }

  .invitation h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
  }

  .img-invitacion {
    width: 100%;
  }
}

/* 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-four{
  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);
}

.letter-spacing-3 {
  letter-spacing: 3px;
}

.letter-spacing-5 {
  letter-spacing: 5px;
}

.py-10 {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.input-field > label {
  left: 15px !important;
}

.img-render {
  image-rendering: -webkit-optimize-contrast;
}

.border-ceremony {
  border-top: 3px solid #606060;
  border-bottom: 3px solid #606060;
  border-right: 0px;
  border-left: 0px;
  padding: 0.5rem;
  border-style: solid;
  border-image: linear-gradient(to right, white, #606060) 1;
}