*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
  
}
body{
  font-family: poppins;
  min-width: 350px;
  overflow-x:hidden;
}
ul,nav{
  list-style: none;
}
a{
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  transition: all 0.5s ease-in-out;
}
a:hover{
 color: rgb(182, 182, 182);
}
/*****************************************HEADER****************************/
header{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 36px 100px 0;
}
header h2{
    text-transform: uppercase;
}
header nav{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
header nav li{
    margin: 0 15px;
}
header nav li:first-child{
    margin-left: 0;
}
header nav li:first-child{
    margin-right: 0;
}
@media (max-width:350px) {
    header{
    left: 35px;
    }
}
@media (max-width:700px) {
    header{
        flex-direction: column;
        transition: all 0.5s ease-in-out;
    }
    header h2{
        margin-bottom: 15px;
        transition: all 0.5s ease-in-out;

    }
    header nav li{
        margin: 0 7px;
    }
}
 /****************************************BOTONES ESTILO*************************************/

 .botones-estilo{
  position: relative;
  display: block;
  width: 200px;
  border: 1px solid rgb(255, 255, 255);
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-size: 20px;
  padding: 20px;
  transition: all 0.5s ease-in-out;
  list-style: none;
  text-align: center;
}
.botones-estilo:hover{
transform: scale(1.3);
box-shadow: 20px 15px 1px 1px white;
color: rgb(255, 255, 255);
text-decoration: none;
}


/***************************************************************************************************************/
/******************************************pag 1 HOME******************************************************/
/***************************************************************************************************************/

.caja-1{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    padding: 110px 100px;
}
/*  BOTON DEL HOME  */
.botones-estilo-home{
  position: relative;
  display: block;
  width: 200px;
  border: 1px solid rgb(255, 255, 255);
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-size: 20px;
  padding: 20px;
  transition: all 0.5s ease-in-out;
  list-style: none;
  text-align: center;
}
.botones-estilo-home:hover{
transform: scale(1.3);
box-shadow: 20px 15px 1px 1px white;
color: rgb(255, 255, 255);
text-decoration: none;
}

@media (max-width:1000px) {
  .caja-1{
        padding: 100px 50px;
    }
}
@media (max-width:900px) {
  .caja-1{
        padding: 125px 30px;
    }
}
.caja-1 p {
    max-width: 800px;
    text-align: center;
    margin-bottom: 35px;
    padding: 0 20px;
    line-height: 2;
}

.caja-1{
    position: relative;
    justify-content: center;
    min-height: 100vh;
    color: #fff;
    text-align: center;
}
.caja-1 .caja-1-img{
    background-image: url('https://images.pexels.com/photos/96380/pexels-photo-96380.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-background-size:cover;
    background-size: cover;
    z-index: -1;
    filter: brightness(20%);

}

.caja-1 h1{
    margin-bottom: 15px;
    font-size: 65px;
    font-family: merienda;
}
.caja-1 h3{
    margin-bottom: 48px;
    font-size: 25px;
}

@media (max-width:900px) {
    .caja-1 {
        min-height: 600px
    }
    .caja-1 h1{
        font-size: 32px;
        transition: all 0.5s ease-in-out;

    }
    .caja-1 h3{
        font-size: 20px;
        transition: all 0.5s ease-in-out;

    }
    .bcaja-1 a.caja-1-btn{
        padding: 15px 40px;
        transition: all 0.5s ease-in-out;

    }
}


.cajas{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  
  width: 100%;
  display: block;
  position: relative;
  
  height: 100vh;
}
/***************************************************************************************************************/
/******************************************pag 2 PRODUCTOS******************************************************/
/***************************************************************************************************************/
.cajasFondo-product{
  background:linear-gradient(to right,black 50%, transparent), url('https://images.pexels.com/photos/257904/pexels-photo-257904.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-background-size:cover;
  background-size: cover;
  z-index: -1;
  /*Filtro para opacar la imagen*/
  filter: brightness(25%);
}

 
 /****SECCIONES***/
 .titulo{
  display: inline-block;
  width: 60%;
  height: 50%;
  position: relative;

  transition: all 0.5s ease-in-out;

}
.titulo h2{
  letter-spacing: 5px;
  font-size: 80px;
  color: #fff;
  padding: 100px 0px 0px 50px;
  margin: 0px;
  position:absolute;
  /*DEGRADADO*/
  background: -webkit-linear-gradient(rgb(107, 107, 107),rgb(0, 0, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: -1;
     
}
.titulo h3{
/*  text-align: center;*/
  letter-spacing: 5px;
  font-size: 70px;
  color: #fff;
  padding: 180px 0px 0px 200px;
}
.descripcion{
  display: inline-block;
  width: 60%;
  height: 25%;
  position: relative;
  padding: 0px 0px 0px 100px;
  }
.descripcion p{
  text-align: left;
  color: #fff;
  font-size: 15px;
  letter-spacing: 3px;
  padding:0px 150px 0px 100px;
  

 }
.botones{
  display: inline-block;
  width: 60%;
  height: 20%;
  position: relative;
  padding: 0px 0px 0px 200px;
}

@media (max-width:1200px) {
  .descripcion p{
    text-align: left;
    color: #fff;
    font-size: 15px;
    letter-spacing: 3px;
    padding:0px 100px 0px 100px;
  
   }
}

  @media (max-width:1000px) {
    .cajasFondo-product{
      background:linear-gradient(to right,transparent, transparent), url('https://images.pexels.com/photos/257904/pexels-photo-257904.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
    }
    .titulo{
      min-width: 100%;
      height: 25%;
      margin-bottom: 50px;
      
     }
     .titulo h2{
       padding: 50px 0px 0px 20px;
       left: calc(20% - 10px);
       margin: 0px 0px 0px 0px;
       font-size: 50px;
       transition: all 0.5s ease-in-out;

      }
     .titulo h3{
        text-align: center;
        padding: 100px 0px 0px 0px;
        transition: all 0.5s ease-in-out;
     }
     .descripcion{
      min-width: 100%;
      height: 25%;
      padding:10px 100px 0px 150px;
      transition: all 0.5s ease-in-out;
      background: #00000059;

     }
     .descripcion p{
      margin-right: 0px;
      padding: 0px 0px 100px 0px;

     }
     .botones{
      min-width: 100%;
      padding-top: 20px;
      margin-left:calc(50% - 300px);
      height: 10%;
     }
  }
  @media (max-width:582px) {
    .descripcion{
      min-width: 100%;
      height: 25%;
      padding:10px 30px 0px 50px;
      transition: all 0.5s ease-in-out;
     }
    }
 /***************************************************************************************************************/
/******************************************pag 3 SERVICES******************************************************/
/***************************************************************************************************************/

.cajasFondoServices{

  background:linear-gradient(to left,black 50%, transparent), url('https://images.pexels.com/photos/159206/mixing-table-mixing-music-musician-159206.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-background-size:cover;
  background-size: cover;
  z-index: -1;
  /*Filtro para opacar la imagen*/
  filter: brightness(25%);
}

 /****SECCIONES***/
 .tituloServices{
  display: inline-block;
  position: relative;
  width: 60%;
  height: 50%;
  transition: all 0.5s ease-in-out;
  
  float: right;
 }
 .tituloServices h2{
   letter-spacing: 5px;
   font-size: 80px;
   color: #fff;
   padding: 100px 0px 0px 350px;
  margin: 0px;
  position:absolute;
  /*DEGRADADO*/
  background: -webkit-linear-gradient(rgb(107, 107, 107),rgb(0, 0, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: -1;
}

.tituloServices h3{
  letter-spacing: 5px;
  font-size: 70px;
  color: #fff;
  padding: 180px 0px 0px 200px;
}
.descripcionServices{
  display: inline-block;
  width: 60%;
  height: 25%;
  position: relative;
  padding: 0px 0px 0px 100px;
  float: right;
}
.descripcionServices p{
  text-align: left;
  color: #fff;
  font-size: 15px;
  letter-spacing: 3px;
  padding:0px 150px 0px 100px;
}
 
 .botonesServices{
   
  display: inline-block;
  width: 60%;
  height: 20%;
  position: relative;
  padding: 0px 0px 0px 200px;
  
  float: right;
 }
 .animacionServices{
   display: inline-block;
   width: 50%;
   height: 50%;
   position: relative;
   float: left;
   padding-left: 20%;
  }


  @media (max-width:1200px) {
    .descripcionServices p{
      text-align: left;
      color: #fff;
      font-size: 15px;
      letter-spacing: 3px;
      padding:0px 50px 0px 50px;
    
     }
    }
@media (max-width:1000px) {
  .cajasFondoServices{
    background:linear-gradient(to left,transparent, transparent), url('https://images.pexels.com/photos/159206/mixing-table-mixing-music-musician-159206.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
    filter: brightness(10%);
  }
  .tituloServices{
    min-width: 100%;
    height: 25%;
    margin-bottom: 50px;
   }
   .tituloServices h2{
    padding: 50px 0px 0px 0px;
    left: calc(50% - 50px);
    margin: 0px 0px 0px 0px;
    font-size: 50px;
    transition: all 0.5s ease-in-out;
   }
   .tituloServices h3{
    text-align: center;
    padding: 100px 0px 0px 0px;
    transition: all 0.5s ease-in-out;
   }
   .descripcionServices{
    min-width: 100%;
    height: 25%;
    padding:10px 100px 0px 150px;
    transition: all 0.5s ease-in-out;
    background: #00000059;

   }
   .descripcionServices p{
    margin-right: 0px;
    padding: 0px 0px 100px 0px;
   }
   .botonesServices{
    min-width: 100%;
    padding-top: 20px;
     left: calc(50% - 300px);
    height: 10%;
   }
}
@media (max-width:582px) {
  .descripcionServices{
    min-width: 100%;
    height: 25%;
    padding:10px 30px 0px 50px;
    transition: all 0.5s ease-in-out;
   }
  }

/***************************************************************************************************************/
/******************************************pag 4 CONTACT******************************************************/
/***************************************************************************************************************/

.caja-contact{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
 
  width: 100%;
  display: block;
  position: relative;
  
  height: 100vh;
}
.cajasFondo-contact{
  
  background-image: url('https://images.pexels.com/photos/33999/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  /*background-image: url('https://images.pexels.com/photos/833337/pexels-photo-833337.png?auto=compress&cs=tinysrgb&dpr=1&w=500');
  */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-background-size:cover;
  background-size: cover;
  z-index: -1;

  filter: brightness(5%);
}

.titulo-contact{
  text-align: center;
  width: 100%;
  height: 30%;
  position: relative;
  padding-top: 100px;
}
.titulo-contact h3{
  letter-spacing: 5px;
  font-size: 70px;
  color: #fff;
}

.descripcion-contact{
  display: inline-block;
  width: 100%;
  height: 30%;
  position: relative;
  float: left;
  padding-top: 20px;
}
.descripcion-contact p{
  padding: 30px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  letter-spacing: 3px;
  background: rgba(0, 0, 0, 0.479);
  margin:0px 80px 0px 80px;
}

.botones-contact{
  display: inline-block;
  width: 100%;
  height: 20%;
  position: relative;
  padding: 0px 0px 0px calc(50% - 100px);
}

.redesSocialesPagina{
  position: relative;
  width: 100%;
  height: 10%;
  padding-left: calc(50% - 120px);
  filter: brightness(0%);

  filter: invert(2) sepia(01) hue-rotate(1deg) saturate(100%);

}
.redesLogos-pagina a img{
  position: relative;
  width: 40px;
  height: 40px;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  float: left;
  
  margin: 10px 10px 0px 10px;
}

.redesLogos-pagina a img{
  box-shadow: none;
}
.redesLogos-pagina a svg{
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-block;
  float: left;
  margin: 10px 10px 0px 10px;

  transition: all 0.5s ease-in-out;
}
.redesLogos-pagina a svg:hover{
  transform: scale(1.1);
   transform: rotate(180deg);
   
}
 
.redesLogos-pagina a img:hover{
    transform: translateY(-5px);
}

@media (max-width:900px) {
  .caja-contact{
    height: 100vh;
    min-height: 100vh;
  }
  .descripcion-contact p{
    margin:0px 40px 0px 40px;
  }
  .botones-contact{

   }
  .descripcion-contact{
    height: 150px;
    width:100%;
    padding-left:20px;
  }
}
/***************************************************************************************************************/
/******************************************pag 5 NETWORKS******************************************************/
/***************************************************************************************************************/
.artistasTitulo{
  text-align: center;
  padding-top: 50px;
  font-size: 50px;
}
.artistasTituloLinea{
  width: 200px;
  height: 1px;
   position: relative;
  border-bottom: solid 2px #666666;
  left: calc(50% - 100px);  
}
 .fondoArtistas{
  width: 100%;
  height: 100%;
 }
.cajaArtistas{
  width: 50%;
  height: 100%;
  position: relative;
  display: inline-block;
  float: left;
}
.caja-fotoArtista{
  position: relative;
  width: 100%;
  height: 60%;
  text-align: center;
  padding-top: 80px;
  overflow: hidden;
}
 
.caja-fotoArtista img{
  width: 250px;
  height: 250px;
  border-radius: 150px;
  position: relative;
  box-shadow:0px 0px 3px 1px #000000;
  transition: all 0.5s ease-in-out;
  
  
 }
.caja-fotoArtista img:hover{
  transform: scale(1.1);
  
}
/*
.caja-fotoArtista svg{
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 150px;
}
*/
.nombreArtista{
  position: relative;
  width: 100%;
  height: 20%;
  text-align: center;
  
 }
.redesSocialesArtistas{
  position: relative;
  background: rgb(255, 255, 255);
  width: 100%;
  height: 10%;
  padding-left: calc(50% - 100px);

}
.redesLogos a img{
  position: relative;
  width: 30px;
  height: 30px;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  float: left;
  margin: 10px 10px 0px 10px;
}
.redesLogos a{
  box-shadow: none;
}
.redesLogos a svg{
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-block;
  float: left;
  margin: 10px 10px 0px 10px;
  color: #000000;
  
  transition: all 0.5s ease-in-out;
}
.redesLogos a svg:hover{
  transform: scale(1.1);
  color: #000000;
  transform: rotate(180deg);
}
 
.redesLogos a img:hover{
    transform: translateY(-5px);

}
 @media (max-width: 900px) {
   .cajaArtistas{
     width: 100%;
   }
 
 }
/***************************************************************************************************************/
/******************************************pag 6 FOOTER******************************************************/
/***************************************************************************************************************/

footer{

  width: 100%;
  height: 25vh;
  background: #000000;
  position: relative;
  top: 90px;
}
footer p{
  color: wheat;
  text-align: center;
  letter-spacing: 5px;
  padding: 11vh 0 0 0;
}
footer img{
  filter: invert(2) sepia(01) hue-rotate(1deg) saturate(100%);
  width: 20px;
  height: 20px;
  animation: heart 1s infinite ease-in-out;
}
@keyframes heart {
  0% {transform: scale(1);}
  50% {transform: scale(1);}
  75% {transform: scale(1.5);}
  100% {transform: scale(1);}
}
@media (min-width: 800px) {
  .cajaFooter{
    width: 200%;
    float: right;
  }
  footer{
    width: 200%;
     background: #000000;
    position: relative;
   }
}