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

    /* Pantalla de carga */
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #fcf0d0;
      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(93, 78, 67, 0.6);
}
/*Fin estilo cancion*/
@font-face {
  font-family: 'DM Serif Text';
  src: url('font/DMSerifText-Regular.ttf') format('truetype');
}

@font-face {
  font-family: "Parisienne";
  src: url('font/Parisienne.ttf') format('truetype');
}

/*Cuerpo*/
body{
   font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;
   font-size: 20px;
   text-align: justify;
   text-align-last: center;
   background: #F9EBD7;
   background: radial-gradient(circle, rgba(249, 235, 215, 1) 0%, rgba(227, 205, 164, 1) 100%);
   color: #3a2f27;
}

lord-icon{
   width: 70px;
   height: 70px;
   margin: auto;
}

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

#portada{
   background-image: linear-gradient(rgba(249, 235, 215, 1), rgba(249, 235, 215, 0.0)),
                  url("glitter3.webp");
   background-size: cover;
   background-attachment: fixed;
   padding: 200px 20px 200px 20px;
   text-shadow: 1px 1px 0.5px rgba(255,255,255,0.6);
}

.portadatexto h1{
   font-family: "Parisienne", cursive;
   font-size: 80px;
}

#imagen{
   padding: 0;
}
#imagen img{
   width: 100%;
   height: 100%;
}

/*Cuenta regresiva*/

.countdown{
   padding: 75px 5px 75px 5px;
   background-color: #ac8d6e;
   text-shadow: 0.5px 0.5px 0.5px rgba(255,255,255,0.6);
   box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

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

span{
   font-size: 45px;
}

.date, .countdown{
   padding: 25px 15px 25px 15px;
}

/*Boton*/

.boton{
   width: 60%;
   height: auto;
   margin: auto;
   background-color: #635040;
   border: 1px solid #3f3329;
   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: #ffffff;
}

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


/*Card*/

.card.info{
   margin: 20px;
   border-radius: 60px;
   padding: 20px;
   border: 1px solid #ac8d6e;
   background: #f5ecdc;
   background: radial-gradient(circle, rgba(245, 236, 220, 1) 0%, rgba(255, 255, 255, 1) 100%);
   box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

/*Asistencia*/

.asistencia{
   width: 65%;
   margin: auto;
}

.card.asistencia{
   border-radius: 20px;
   padding: 20px;
   background-color: rgba(160, 40, 40, 0.0);
   box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
   }

/*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: 25%;
   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: #f0e1d3;
}


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

/*Footer*/
footer{
   margin-top: 30px;
   padding: 35px 15px 35px 15px;
   border-top: 1px solid #635040;
   background-color: #ac8d6e;
}

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, #timer, .carousel, .asistencia{
    width: 100%;
  }

  #portada{
    padding: 220px 20px 220px 20px;
  }


   .card.info{
      text-align: center;
      margin: 25px 0px 25px 0px;
   }

   div.scroll-container img {
   width: 50%;
   }

  .boton{
   width: 85%;
  }

}


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


   .portadatexto{
      padding-top: 100px;
      padding-bottom: 100px;
   }

   div.scroll-container img {
   width: 80%;
   }

}

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

   #portada{
      padding: 120px 20px 120px 20px;
   }


   .portadatexto{
      padding-top: 50px;
      padding-bottom: 50px;
   }


}