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

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

@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-image: url('discobg.webp');
   background-size: contain;
   background-attachment: fixed;
   color: #ffffff;
}

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

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

#portada{
   background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1)),
                  url("discobg1.webp");
   background-size: cover;
   padding: 200px 20px 200px 20px;
}

.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: rgba(0, 23, 85, 0.25);
}

#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: rgba(0, 0, 0, 0.8);
   border: 1px solid #ffffff;
   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;
   color: #f0e1d3;
   background-color:rgba(0, 23, 85, 0.25);
   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.5);
   color: #ffffff;
}

/*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 #110202;
   background-color: rgba(30, 3, 3, 0.95);
}

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


}