/*Pantalla de carga*/
    body.loading {
      overflow: hidden;
    }

    /* Pantalla de carga */
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #c2c88d;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    } 
    
/*Estilo del icono cancion*/

#cancion{
   position:fixed;
    right:0;
    bottom:0;
    margin-right: 2px;
    margin-bottom: 2px;
    border-radius: 50%;
    border-style: none;
    background-color: rgba(240, 225, 211, 0.6);
}

/*Fin estilo cancion*/

@font-face {
  font-family: 'Dancing Script';
  src: url('font/DancingScript.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/*Cuerpo*/
body{
   font-family: 'Dancing Script';
   text-align: justify;
   text-align-last: center;
   font-size: 25px;
   background-color: #f9f2f2;
   color: #7d1c13;
}


lord-icon, .icono img{
   width: 70px;
   height: 70px;
   margin: auto;
}

.icono{
   box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 8px;
   background-color: #f0e1d3;
   width: 90px;
   height: 90px;
   margin: auto;
   margin-bottom: 20px;
   border-radius: 50%;
   padding: 10px;
}


.main{
   width: 75%;
   margin: auto;
}

#portada{
   padding: 0px;
}
.deco img{
   width: 100%;
   margin: 0px;
}

.portadatexto h1{
   font-size: 50px;
   line-height: 0.9;
   margin-top: 25px;
}

.portadatexto img{
   box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
   border-radius: 30px;
   width: 75%;
   height: auto;
   margin:auto;
}

#frase{
   border-radius: 80px;
   background-color: #7d1c13;
   color: #f9f2f2;
   padding: 150px 20px 150px 20px;
}

.texto{
   padding: 30px 10px 30px 10px;
}

.divider img{
   width: 75%;
   margin: auto;
}

/*Cuenta regresiva*/

.countdown{
   padding: 75px 5px 75px 5px;
}

#timer{
   width: 50%;
   margin: auto;
}

#num{
   background-color: #7d1c13;
   color: #f9f2f2;
   margin:5px;
   border-radius: 15px;
}

span{
   font-size: 40px;
}

.date{
   padding: 50px 0px 50px 0px;
}

/*Card*/
.card.info{
   padding: 25px;
   border: 2px solid #ac3c33;
   color: #f0e1d3;
   border-radius: 30px;
   background-color: #7d1c13;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


/*Boton*/

.boton{
   width: 60%;
   height: auto;
   margin: auto;
   background-color: #ac3c33;
   border: 1px solid #771813;
   border-radius: 20px;
   box-shadow: rgba(14, 9, 79, 0.5) 0px 1px 4px;
}
.boton:hover{
    transform: scale(1.05);
    transition: all .2s ease-in-out;
}

.boton a{
   text-decoration: none;
   color: #f0e1d3;
}

.boton a:hover{
   text-decoration: none;
}


/*Asistencia*/

 /*Timeline*/
   table{
   margin: auto;
  }

  .timeline{
   margin: 40px;
  }

  .timeline img{
      height: 70px;
      width: auto;
      padding-right: 15px;
      margin-right: 15px;
      border-right: solid;
      border-color: #373829;
   }

/*Galeria de imagenes*/
.carousel{
   width: 70%;
   margin: auto;
 }

 .scroll-container {
  background-color: rgba(0, 0, 0, 0);
  overflow: auto;
  white-space: nowrap;
}

div.scroll-container img {
   width: 60%;
   height: auto;
   margin: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 20px;
}

/*Scrollbar*/
::-webkit-scrollbar {
  height: 10px;
}


::-webkit-scrollbar-track {
  background: none;
}


::-webkit-scrollbar-thumb {
  background: #ce2c50;
  background-color: #771813;
}


::-webkit-scrollbar-thumb:hover {
  background: #771813;
}

/*Info extra*/

.infoextra{
   padding: 50px 0px 50px 0px;
}

/*Asistencia*/

.asistencia{
   padding: 50px 20px 50px 20px;
   margin-top: 50px;
   border-top: solid;
   border-color: #33110f;
   border-width: 3px;
}

.textoasistencia{
   width: 65%;
   margin: auto;
}
/*Footer*/
footer{
   margin-top: 30px;
   padding: 35px 15px 35px 15px;
   border-top: 1px solid #33110f;
   background-color: #771813;
}

footer a{
   font-family: fisterra-fora, sans-serif;
   font-weight: 700;
   font-style: normal;
   color: white;
   text-decoration: none;
   font-size: 55px;
}

.redes{
   width: 40%;
   margin: auto;
}


@media screen and (max-width: 1024px){

   .main, .countdown, #timer, .carousel{
      width: 100%
   }

   .card.info{
      margin: 30px 0px 30px 0px;
   }

   .timeline{
   margin: 10px;
  }

  #timer{
   width: 80%;
}

}


@media screen and (max-width: 430px){

   #frase{
   padding: 150px 5px 150px 5px;
   }

   .portadatexto img{
      width: 90%;
   }

   .divider img{
      width: 100%;
   }

   .portadatexto{
      padding: 40px 0px 40px 0px;
   }

   div.scroll-container img {
      margin: 5px;
      width: 75%;
   }

   .asistencia{
      padding: 50px 10px 50px 10px;
   }
   .textoasistencia{
      width: 100%;
   }

   #timer{
   width: 100%;
   }

   .icono{
      margin-top: 35px;
   }

   .boton{
   width: 85%;
  }

}

@media screen and (max-width: 376px){

   .portadatexto{
      padding: 25px 0px 25px 0px;
   }

   .portadatexto img{
      width: 60%;
   }

}