/* Generales */



:root {

  --color-primario: #0a2573;

  --color-secundario: #f9fafb;

}



body{

  font-family: 'Montserrat', sans-serif;

  font-size: 17px;

}



p{

  font-family: 'Montserrat', sans-serif;

  font-weight: 300;

  font-size: 17px;

}


.sub_title_nosotros {
  text-align: center;
}


h4

{

  font-family: 'Montserrat', sans-serif;

  letter-spacing: 3px;

  text-transform: uppercase;

  font-size: 25px;

  font-weight: 400;

}



.btn{

  font-family: 'Montserrat', sans-serif;

  color: white;

  background-color: var(--color-primario);

  border-radius: 30px;

  padding: 10px 40px;

  border: 1px solid var(--color-primario);

  text-transform: uppercase;

}



.btn:hover{

  color:var(--color-primario);

  background-color: white;

}



.btn-alt{

  font-family: 'Montserrat', sans-serif;

  color: var(--color-primario);

  background-color: rgb(255, 250, 250);

}



.btn-alt:hover{

  color: rgb(252, 249, 249);

  background-color: var(--color-primario);

  border: 1px solid white;

}



.btn:focus{

  box-shadow:none;

}





.fancybox-bg{

  background-color: var(--color-primario) !important;

}



ul{

  list-style: none;

  margin: 0;

  padding: 0;

}



a:hover{

  text-decoration: none;

}





/* Animacion fade in */

.fade-in{

  animation: fadeIn ease 4s;

  -webkit-animation: fadeIn ease 4s;

  -moz-animation: fadeIn ease 4s;

  -o-animation: fadeIn ease 4s;

  -ms-animation: fadeIn ease 4s;

}





@keyframes fadeIn{

  0% {

    opacity:0;

  }

  100% {

    opacity:1;

  }

}



@-moz-keyframes fadeIn {

  0% {

    opacity:0;

  }

  100% {

    opacity:1;

  }

}



@-webkit-keyframes fadeIn {

  0% {

    opacity:0;

  }

  100% {

    opacity:1;

  }

}



@-o-keyframes fadeIn {

  0% {

    opacity:0;

  }

  100% {

    opacity:1;

  }

}



@-ms-keyframes fadeIn {

  0% {

    opacity:0;

  }

  100% {

    opacity:1;

  }

}







/* Flecha para scroll de portada */

.scroll-down {

	position: absolute;

	bottom: 50px;

	display: block;

	text-align: center;

	font-size: 20px;

	z-index: 100;

	text-decoration: none;

	text-shadow: 0;

  width: 30px;

  height: 30px;

  border-bottom: 4px solid #ffffff;

  border-right: 4px solid #ffffff;

  z-index: 9;

  left: calc(50% - 15px);

  -webkit-transform: translate(-50%, 0%) rotate(45deg);

  -moz-transform: translate(-50%, 0%) rotate(45deg);

  transform: translate(-50%, 0%) rotate(45deg);

	-webkit-animation: fade_move_down 2s ease-in-out infinite;

	-moz-animation:    fade_move_down 2s ease-in-out infinite;

	animation:         fade_move_down 2s ease-in-out infinite;

}





/*animated scroll arrow animation*/

@-webkit-keyframes fade_move_down {

  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }

  50%  { opacity: 1;  }

  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }

}

@-moz-keyframes fade_move_down {

  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }

  50%  { opacity: 1;  }

  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }

}

@keyframes fade_move_down {

  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }

  50%  { opacity: 1;  }

  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }

}



/*ANIMACION ICONOS*/



.bounce-in {

  animation: bounce-in 2s ease infinite;

  width: 150px;

}

@keyframes bounce-in {

  0% {

    opacity: 0;

    transform: scale(.3);

  }

  50% {

    opacity: 1;

    transform: scale(1.05);

  }

  70% { transform: scale(.9); }

  100% { transform: scale(1); }

}



/* ---------- */





/* Portada */

section.portada{

  height: 100vh;

}



/* ---------- */







/* Cuenta Regresiva */



section.cuenta-regresiva{

  text-align: center;

  padding-top: 25px;


background-image:linear-gradient(to right, #fbf9fa, #398bc9, #f9f7f8, #398bc9);
  height: 130px;

}



section.cuenta-regresiva p{

  color: rgb(47, 8, 173);

}





#reloj{

  text-align: center;

  font-size: 25px;

  margin-bottom: 0;

}



/* ---------- */









/* Ceremonia y Fiesta */



section.ceremonia-fiesta{

  padding: 80px 0px 100px 0px;

}





section.ceremonia-fiesta .columna{

  text-align: center;

  padding: 0 30px;

}



section.ceremonia-fiesta .columna h4{

  margin-top: 15px;

  margin-bottom: 20px;

}



section.ceremonia-fiesta .columna p{

  margin-bottom: 25px;

}



    







/* ---------- */





/* Galeria /Historia */

section.galeria{

  padding-bottom: 50px;

}



section.galeria h4{

  text-align: center;

  margin-bottom: 60px;

}

section.galeria .item-galeria{

  padding: 0 3px;

  margin-bottom: 5px;

}



section.galeria .item-galeria a img{

  transition: all 0.3s ease-out;

  border-radius: 10px;

}





section.galeria .item-galeria a:hover img{

  transform: scale(1.1);

  position: relative;

  z-index: 999;

}







/* ---------- */





/* REGALO */



section.cbu{

  text-align: center;

  padding: 40px 0 70px;


background-image:linear-gradient(to right, #0b2674, #5722eb, #9b9b9b, rgba(67, 7, 186, 0.667));
}





section.cbu p{

  color: white;

}



#hidden-cbu{

  padding: 25px;

  border-radius: 10px;

}





#hidden-cbu span.title{

  font-family: 'Montserrat', sans-serif;

  display: inline-block;

  text-align: center;

  width: 100%;

  font-size: 25px;

  color: var(--color-primario);

}





#hidden-cbu ul{

  list-style: none;

  text-align: center;

  margin: 0;

  padding: 0;

  margin-bottom: 15px;

}





#hidden-cbu ul li a{

  color: var(--color-primario);

  text-decoration: underline;



}



/* ---------- */





/* CONFIRMAR ASISTENCIA */



section.confirmar-asistencia{

  text-align: center;

  padding: 50px 0 100px;

}



section.confirmar-asistencia h4 {

    text-align: center;

    margin-bottom: 25px;

}



section.confirmar-asistencia p{

  margin-bottom: 20px;

}



section.confirmar-asistencia .btn-alt{

  margin: 10px;

}



section.confirmar-asistencia img.iconLink{

  width: 1.7rem;

}





/* ---------- */



/* DRESS CODE */



section.dresscode{

  text-align: center;

  padding: 50px 0 70px;


background-image:linear-gradient(to right, #a3a3a3, #16089a, #9b9b9b, #280aeb);
}



section.dresscode h4 {

    text-align: center;

    margin-bottom: 20px;

    color: rgb(255, 252, 252);

}



section.dresscode p{

  color: white;

}



/* ---------- */





/* INSTAGRAM */



section.instagram{

  text-align: center;

  height: 550px;

  color:white;

  z-index: 999;

  overflow-x: hidden;

}



section.instagram .contenido{

  padding: 50px 0px;

}



section.instagram span.hashtag{

  font-family: 'Montserrat', sans-serif;

  font-size: 25px;

  margin-top: 100px;

  color:white;

}





section.instagram p{

  margin: 30px;

  color:white;

}







/* ---------- */





/* CANCIONES */



section.canciones{

  text-align: center;

  padding: 70px 0 100px;

}



section.canciones h4 {

    text-align: center;

    margin-bottom: 25px;

}



section.canciones p{

  margin-bottom: 20px;

}



/* ---------- */



/* ALOJAMIENTOS */



section.alojamientos{

  text-align: center;

  padding: 80px 0 80px;

}



section.alojamientos .contenido{

  padding: 50px 10px;

}



section.alojamientos h4 {

    text-align: center;

    margin-bottom: 25px;

}



section.alojamientos p{

  margin-top: 20px;

  margin-bottom:30px;

}



/* ---------- */



/* PROTOCOLO */



section.protocolo{

  text-align: center;

  padding: 90px 0 90px;

  background-color:var(--color-primario);

}



section.protocolo h4 {

    text-align: center;

    margin-bottom: 25px;

    color: white;

}



section.protocolo img.icon{

  width: 150px;

}



section.protocolo p{

  color: rgb(16, 16, 16);

}



/* ---------- */



/* GRACIAS */



section.gracias{

  text-align: center;

  padding: 50px 0;

  background-color:var(--color-secundario);

}



section.gracias p{

  color: rgb(4, 4, 4);

}





/* ---------- */





/* FOOTER */



section.menu-footer{

  background: #a6a4a4;

  padding: 30px 0;

}



section.menu-footer ul li{

  margin: 0 20px;

}



section.menu-footer ul a{

  text-decoration: underline;

  color: #999;

  font-size: 13px;

}



section.menu-footer ul a:hover{

  color: #35aa7f

}







section.footer{

  text-align: center;

  padding: 20px 0;

  background-color: #666;

}



section.footer p{

  text-align: center;

  color: white;

  font-size: 12px;

  font-weight: 300;

  margin: 0;

  padding: 0;

}



section.footer a{

  color: white;

}





/* ---------- */



/* CONTACTO */



section.contacto{

  padding: 100px 0;

}



section.contacto h4{

  font-weight: 400;

  font-size: 25px;

}



section.contacto p{

  font-weight: 300;

}



section.contacto a{

  color: #35aa7f;

}



section.contacto a:hover{

  color: black;

}



section.contacto ul li{

  margin-bottom: 5px;

}



section.contacto ul li i{

  font-size: 18px;

  margin-right: 3px;

}















/* ---------- */









/* Audio */

.botonAudio-container {

  text-align: center;

}



.botonAudio {

  width: 6rem;

  padding: 10px 20px;

  margin: 10px;

  border: none;

  border-radius: 5px;

  cursor: pointer;

  position: fixed;

  display: flex;

  right: 1rem;

}



.hidden {

  display: none;

}



.pulse {

  animation: pulse-animation 2s infinite;

}



@keyframes pulse-animation {

  0% {

      transform: scale(1);

  }



  50% {

      transform: scale(1.1);

  }



  100% {

      transform: scale(1);

  }

}

.vertical_shake {

  animation: vertical-shaking 0.7s infinite;

}





@keyframes vertical-shaking {

  0% { transform: translateY(0) }

  25% { transform: translateY(4px) }

  50% { transform: translateY(-4px) }

  75% { transform: translateY(4px) }

  100% { transform: translateY(0) }

}





/* ---------- */





/* Medias queries */



@media (max-width: 760px) {





  .logo-portada img{

    max-width: 85%;
    margin-top: 30%;

  }



  .logo-portada{

    text-align: center;

  }



  section.ceremonia-fiesta .row .columna:nth-child(2){

    margin-top: 50px;

  }



  section.ceremonia-fiesta .row .columna.no-margin-top{

    margin-top: 0;

  }



  section.menu-footer ul li{

    margin-top: 10px;

  }





}