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

    /* Pantalla de carga */
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #c8b2af;
      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(218, 160, 182, 0.7);
}
/*Fin estilo cancion*/
@font-face {
  font-family: 'Faculty Glyphic';
  src: url('font/FacultyGlyphic-Regular.ttf') format('truetype');
  font-weight: normal;
}


/*Cuerpo*/
body{
   overflow-x: hidden;
  font-family: "Faculty Glyphic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  text-align: justify;
  text-align-last: center;
  background-color: #eee9bd;
  color: #301f1f;
}


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

.main, #timer, .date, .infoextra, .textoplaylist, .carousel, .textoasistencia{
   width: 70%;
   margin: auto;
}

#portada{
   width: 50%;
   margin: auto;
   background-image: url('stripesbg2.webp');
   background-size: cover;
   color: #d9684c;
   padding-top: 50px;
   height: 95vh;
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.textoportada{
   border-image: url('wavyborder01.webp');
  border-image-repeat: stretch;
  border-image-slice: 20 20 20 20 fill;
  border-image-width: 20px;
  padding: 40px 20px 20px 20px;
  height: 70vh;
}

.textoportada h1{
   font-size: 80px;
}

.textoportada h2, #frase h3{
   font-size: 35px;
}

.animacion{
   animation: wave 2s ease-in-out infinite;
}

@keyframes wave {
}

#frase{
   padding: 100px 20px 100px 20px;
   background-color: #daa0b6;
   box-shadow: 1px 1px 28px -8px rgba(41,23,24,0.75) inset;
-webkit-box-shadow: 1px 1px 28px -8px rgba(41,23,24,0.75) inset;
-moz-box-shadow: 1px 1px 28px -8px rgba(41,23,24,0.75) inset;
}

.divider img{
   width: 90%;
   margin: auto;
}
/*Padding y margin*/
.countdown, .date, .playlist,.infoextra, .carousel, .asistencia{
   padding: 50px 10px 50px 10px;
}

/*Cuenta regresiva*/
.countdown{
   background-color: #daa0b6;
   box-shadow: 1px 1px 28px -8px rgba(41,23,24,0.75) inset;
-webkit-box-shadow: 1px 1px 28px -8px rgba(41,23,24,0.75) inset;
-moz-box-shadow: 1px 1px 28px -8px rgba(41,23,24,0.75) inset;
}


span{
   font-size: 45px;
}


/*Boton*/

.boton{
   width: 220px;
   height: 50px;
   padding: 5px;
   margin: auto;
   background-color: #daa0b6;
   border-radius: 20px;
   box-shadow: rgba(0, 0, 0, 0.65) 0px 5px 15px;
}
.boton:hover{
    transform: scale(1.05);
    transition: all .2s ease-in-out;
}

.boton a{
   text-decoration: none;
   color: #301f1f;
   font-weight: 500;
}

.boton a:hover{
   background-color: #ccb2b0;
   text-decoration: none;
}


/*Card*/

.card.info{
   margin: 20px;
   border-radius: 60px;
   padding: 20px;
   border: 10px solid #daa0b6;
   color: #301f1f;
   background-color:#d9684c;
   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;
}

/*Galería*/
.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: #d9684c;
}


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

/*Playlist y confirmacion de asistencia*/
.playlist, .asistencia{
   background-color: #efeddf;
   box-shadow: 1px 1px 28px -8px rgba(153, 151, 129, 0.75) inset;
-webkit-box-shadow: 1px 1px 28px -8px rgba(153, 151, 129, 0.75) inset;
-moz-box-shadow: 1px 1px 28px -8px rgba(153, 151, 129, 0.75) inset;
}
/*Footer*/
footer{
   padding: 35px 15px 35px 15px;
   background-color: #d9684c;
}

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

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



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

.main, #timer, .date, .infoextra, .textoplaylist, .carousel,.textoasistencia{
   width: 100%;
}

}

@media screen and (max-width: 768px){
   #portada{
      width: 80%;
   }

   #timer, .textoplaylist, .redes{
      width: 100%;
   }

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

}

@media screen and (max-width: 430px){
   #portada{
      width: 100%;
      padding-top: 75px;
   }

   .textoportada{
       padding: 90px 20px 50px 20px;
   }

   .textoportada h1{
   font-size: 65px;
}

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

}

@media screen and (max-width: 376px){
   body{
      font-size: 18px;
   }
   #portada{
      padding-top: 50px;
   }

   .textoportada{
      height: 75vh;
   }

   .textoportada h1{
   font-size: 55px;
}

.textoportada h2{
   font-size: 40px;
}

span{
   font-size: 35px;
}

.boton{
   width: 190px;
}
}


@media screen and (min-width: 1440px){
   #portada, #timer{
      width: 40%;
   }
}

}