/* 
    body, h2, h3, h4, h5, h6, p{
      font-family: 'TTNormsPro'!important;
  }
   */
  img{
      max-width: 100%;
  }

.titulo{
    font-family: 'steelfish'!important;
    font-size: 50px;
    font-weight: 800;
    color: #010101;
}

.subtitulo{
    font-family: 'sarpanch'!important;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0px;
    text-transform: uppercase;
    letter-spacing: -0.3px;
}
a{
    font-family: 'sarpanch'!important;
    font-weight: 700;}

    body{          
        overflow-x: hidden;
     }
  ul li{
   list-style: none;
}
  /*-----------------------------------BARRA DE NAVEGACION------------------------------------*/
  .navbar{
    width: calc(100% - 50px);
      position: fixed;
      background: #0000005e;
      margin: 15px 25px;
      z-index: 3;
  }
  .div-nav-redes{
    display: flex;

}
  .container-fluid{
      padding-left: 20px;
      padding-right: 20px;
  }
  .navbar-brand img{
  padding: 0px 10px;
  }
  .navbar-nav .nav-item{
      padding: 0px 10px;
      font-weight: 500;
      color: #fff;
      font-size: 16px;
      margin: 10px 0px;
  }
  .nav-link{
    font-weight: bold;
    text-decoration: none;
    padding: 10px 0px!important;
    margin: 0px 20px;
    display: inline-block;
    position: relative;
    opacity: 0.75;
    color: #fff!important;
    font-family: 'sarpanch'!important;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px!important;
}


.nav-link:hover, .nav-link.active  {
    opacity: 1;

  }
  
  .nav-link::before, .nav-link.active::before {
    transition: 300ms;
    height: 2px;
    content: "";
    position: absolute;
    background-color: #fff;
  }
  
  .nav-link-ltr::before,  .nav-link-ltr.active::before{
    width: 0%;
    bottom: 8px;
  }
  
  .nav-link-ltr:hover::before, .nav-link-ltr.active::before {
    width: 100%;
  }
  
  .nav-redes{
    margin: 0px 2px!important;
}
.navbar-toggler-icon{
    background-image: url(../img/menu.png)!important;

}
.navbar-toggler{
    border: 1px solid #fff;
}
.navbar-toggler:focus{
box-shadow: none;
}
.nav-item.dropdown{
display: block!important;} 
.dropdown-menu{
    background: transparent;
    box-shadow: none !important;
    padding: 2px;
}
.dropdown-item.idioma{
background: #0000005e;
padding: 2px
}
.dropdown-item.idioma{
    color: #fff;
    padding-left: 20px;

}
.btn-idioma{
border:none;
}
.btn-idioma li{
    padding-top: 8px;
    width: 60px;}

  @media (max-width: 989px) {
      .navbar-collapse{
          text-align: center!important;
          border: 2px solid var(--color-principal)!important;
          border-top: transparent !important;
          padding: 30px;
      }
      .navbar {
    background-color: #010101c9;
    }

    .div-nav-redes{
        align-self: center;
    }
    .nav-link{
      margin: 0px 5px;
    }
  }
  
  @media (max-width: 768px) {
    .nav-link{    
      padding: 5px 0px !important;
    }
    .dropdown-item.idioma{
      padding-left: 0px;
      margin-top: -5px;
      background: transparent;
    }
      .btn-idioma li{
      padding-top: 0px;}
      .dropdown-menu.btn-idioma{
        text-align: -webkit-center;
      }
  }
  @media (max-width: 576px){
      .container-fluid{
          padding-left: 10px;
          padding-right: 10px;
      }


  }
  
  
  /*---------------------------------------- HOME----------------------------------------------*/
  
  .home{
      background-image: url(../img/fondo-home.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100vh;
  }
  
@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

  .nombre-home{
    margin-top: 14vh;

	
    }

    .nombre-home img { width: 100%; height: auto; }

.subtitulo-home{
    margin-top: -40px;
    color: #ffffffcd;
    font-family: 'sarpanch' !important;
    position: absolute;
    margin-left: 10px;
}
  .redes-home{
    display: flex;
    margin-top: -90px;
    position: relative;
    z-index: 10;
}

    .redes-home li{
    list-style: none;
    margin: 0px 10px;
    opacity: .8;
  }
  .redes-home li:hover{
    opacity: 1;
  }  

.div-flecha-home{
    margin-top: calc(100vh - 130px);;
    overflow: hidden;
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;


}
  /*------------HOME------REPRODUCTOR */
  .fa.fa-play{
    color: #fff;
    background: #aa0000;
    padding: 15px 15px;
    border-radius: 30px;
    background: url(../../img/play.png) no-repeat center center;
    background-size: 10px;
    width: 25px;
    height: 25px;
    margin: 2.5px 20px;
    margin-right: 14px;
    margin-left: 0px;
    background-color: #AA0000;}
  
    .fa.fa-pause{
        color: #fff;
        background: #aa0000;
        padding: 15px 15px;
        border-radius: 30px;
        background: url(../../img/pause.png) no-repeat center center;
        background-size: 10px;
        width: 25px;
        height: 25px;
        margin: 2.5px 20px;
        margin-right: 14px;
	margin-left: 0px;
        background-color: #AA0000;
    }

.reproductor{
    display: inline-flex;
    background: #2d0101;
    width: 420px;
    border-radius: 20px;
    margin-top: 10vh;
}
.reproductor img {
    margin: 15px;
}
.player-controls {
    margin: 10px 20px ;
    width: 100%;
    margin-left: 0px!important;
}

.reproductor .title{
   font-family: 'sarpanch'!important; 
    color: #fff;
    margin-left: 44px;
    margin-bottom: 0px;
    font-size: 12px;
}

.reproductor .img-reproductor-home{
max-width: 58px;
}

.reproductor .time {
font-family: 'sarpanch'!important; 
color: #fff;
font-size: 10px;
float: right;
margin-top: -10px; }
.reproductor .range{
    display: flex;
}

input[type=range] {
    height: 12px;
    -webkit-appearance: none;
    margin: 10px 0px;
    width: 100%;
    background: transparent;
  }
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px #AA0000;
    background: #A90000;
    border-radius: 0px;
    border: 0px solid #AA0000;
  }
  input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #AA0000;
    border: 0px solid #AA0000;
    height: 12px;
    width: 12px;
    border-radius: 22px;
    background: #AA0000;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -4.5px;
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: #A90000;
  }
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px #AA0000;
    background: #A90000;
    border-radius: 0px;
    border: 0px solid #AA0000;
  }
  input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #FF3030;
    border: 0px solid #AA0000;
    height: 16px;
    width: 16px;
    border-radius: 22px;
    background: #AA0000;
    cursor: pointer;
  }
  input[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
  input[type=range]::-ms-fill-lower {
    background: #A90000;
    border: 0px solid #AA0000;
    border-radius: 0px;
    box-shadow: 0px 0px 0px #AA0000;
  }
  input[type=range]::-ms-fill-upper {
    background: #A90000;
    border: 0px solid #AA0000;
    border-radius: 0px;
    box-shadow: 0px 0px 0px #AA0000;
  }
  input[type=range]::-ms-thumb {
    margin-top: 1px;
    box-shadow: 0px 0px 0px #FF3030;
    border: 0px solid #AA0000;
    height: 16px;
    width: 16px;
    border-radius: 22px;
    background: #AA0000;
    cursor: pointer;
  }
  input[type=range]:focus::-ms-fill-lower {
    background: #A90000;
  }
  input[type=range]:focus::-ms-fill-upper {
    background: #A90000;
  }

  
  @media (max-width: 1600px) {
    .nombre-home{
        margin-top: 10vh;
    }
    .reproductor{
        display: inline-flex;
        background: #2d0101;
        width: 400px;
        border-radius: 20px;
        margin-top: 50px;
    } 
  }
  @media (max-width: 999px) {
    .nombre-home{
        margin-top: 20vh;
    }
    .reproductor{
        margin-top:50px
    } 
    .redes-home{
        margin-top: -30px;
    }
  }
  
  @media (max-width: 768px) {
  .home{
    height: auto;
 }  
 .nombre-home{    
    max-width: 330px;}
    .reproductor{
    margin-bottom: 30px;
    }
  }
  @media (max-width: 576px){
    .home{
        background-image: url(../img/fondo-home-mobile.png);
     }  
     .nombre-home {
        margin-top: 500PX;
        max-width: 100%;
    }
    .reproductor{
    width: 100%;}
 .div-flecha-home{
	display:none
  }
}
  /*-----------------------------------GIF SHOWS------------------------------------*/
   #shows{
    background: rgb(27,1,1);
    background: linear-gradient(90deg, rgba(27,1,1,1) 0%, rgba(74,0,0,1) 100%);
}
    #shows .container{
    width: 95%;
    margin: auto !important;
}
    #shows img{
    max-width: 500px;
}
    #shows .col-lg-12{
    margin: 50px 0px;
    text-align: center;
    background-image: url(../img/despierto-text.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.text-despierto{
    background: rgb(25,1,1);
    background: linear-gradient(90deg, rgba(25,1,1,1) 0%, rgba(58,1,1,1) 100%);
}

.text-despierto .row{
    background-image: url(../img/flecha.png);
    background-repeat: no-repeat;
    background-size:auto;
    background-position: right;
}

.text-despierto p{
    max-width: 700px;
    margin: auto;
    text-align: center;
    color: #7A5656;
    margin-top: 30px;
    margin-bottom: 60px;
}


.flecha-descripciones{
    display: none
}
  @media (max-width: 999px) {
    .text-despierto .row{
        background-image: none;
  }
  .flecha-descripciones{
    display: block;
    margin: auto;
    margin-top: -40px;
    max-width: 50px;
    margin-bottom: 30px;
}
}
  
  @media (max-width: 768px) {
    #shows img{
    max-width: 100%;
    }

  }
  @media (max-width: 576px){
    #shows img{
        max-width: 260px;
        }
    
  }


  /*-----------------------------------BIOO------------------------------------*/
.bio{
    background: rgb(29,1,0);
    background: linear-gradient(90deg, rgba(29,1,0,1) 0%, rgba(129,1,1,1) 30%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 100%);
   
}
.bio .container .row{
padding-top: 100px;
padding-bottom: 100px;}

.bio .titulo{
margin-bottom: 30px;
}

.bio p{
    font-family: 'helvatica'!important;
    font-size: 16px;
    font-weight: 500;
    color: #1E1C22;
    max-width: 600px;
}
.div-logo-grammys{
max-width: 600px;}
.logo-grammys{
max-width: 250px;
float: right;
}

.div-logo-grammys ul li{
display: flex!important;
}

.div-logo-grammys ul{
  padding-left:0px!important;

}

.bio-mobile{
display: none;}

.text-latin-premios{
  font-family: 'georgia' !important;
  margin-top: 20px;
  align-self: center;
  margin-left: 30px;
  margin-right: 30px;
  
  }
@media (max-width: 999px) {
    .logo-grammys{
        max-width: 140px
        }
}
  
  @media (max-width: 768px) {
    .bio .col-md-7{
    display: none;}
    .bio-mobile{
    display: block;}
    .bio-mobile .titulo{
    margin-top: 40px;}
    .logo-grammys{
    max-width: 100px;
    margin-bottom: 40px;
}
.text-latin-premios{
  margin-top: 0px;
  margin-right: 10px;
  margin-left: 10px;
}
    .bio .container .row{
    padding-top: 30px;
    padding-bottom: 30px;
    }
  }

  /* lineup class and keyframes */




  .reveal {
    position: relative;
    opacity: 0;
  }
  
  .reveal.active {
    opacity: 1;
  }

  .active.fade-left {
    animation: fade-left 1s ease-in;
  }
  .active.fade-right {
    animation: fade-right 1s ease-in;
  }
 
  @keyframes fade-left {
    0% {
      transform: translateX(-100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  

  

  .reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
  }
  
  .reveal.active{
    transform: translateY(0);
    opacity: 1;
  }

  
.reveal2 {
  position: relative;
  opacity: 0;
}

.reveal2.active {
  opacity: 1;
}
.active.fade-right {
  animation: fade-right 1s ease-in;
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


  /*----------------------------------GALERYYY-----------------------------------*/

.galeria{
    border-top: 0.3px solid #0000001c;
    padding-top: 100px;
    padding-bottom: 100px;
}

.owl-stage{
margin-top: 60px;}
.owl-nav{
    top: 0;
    position: absolute;
    text-align: end;
    right: 0;
  }

  .owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span{
    font-size: 50px;
    line-height: 5px;
    background: transparent;
    padding: 10px;
    width: 40px;
    display: flex;
    height: 40px;
    justify-content: center;
    margin-right: 10px;
    border: 1PX solid #0000006b;
    color:#DD2C28
} 


.galeria .card img{
    border-radius: 5px;
}
.galeria .card .galeria-titulo{
    font-family: 'flashback'!important;
    font-size: 52px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;
}

.galeria .card .galeria-titulo span{
    font-size: 38px;
}
  .galeria .item{
    margin: 0PX;
    margin-bottom: 30px;
    margin-right: 30px;
    box-shadow: 11px 11px 26px -12px rgba(0,0,0,0.75);
    -webkit-box-shadow: 11px 11px 26px -12px rgba(0,0,0,0.75);
    -moz-box-shadow: 11px 11px 26px -12px rgba(0,0,0,0.75);
}
@media (max-width: 576px){
    .galeria .item{
        margin: 30px;
        margin-top: 10px;
    }
        .owl-item{
        margin-right: 0px;}
        .galeria{
            padding-top: 50px;
            padding-bottom: 50px;
        }
}


  /*----------------------------------VIDEOS-----------------------------------*/

#videos{
    background-color: #000;
    padding-top: 100px;
    padding-bottom: 100px;
}

#videos .titulo, #videos .subtitulo{
    color: #fff;
    font-weight: 500;
}

.bnt-youtube a{
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    border: 1px solid #AA0000;
    padding: 10px 20px;

}
.col-titulos-galery{
    display: inline-flex;
    align-items: center;
    margin-bottom: 50px;
}

.bnt-youtube{
float: right;}

video{
padding: 0px 10px;
}


.btn-4 {

    transition: all .3s;
    position: relative;
    overflow: hidden;
    z-index: 1;

  }
  

 
  .btn-4:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;

    z-index: -2;
  }
  .btn-4:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: red;
    transition: all .3s;
    z-index: -1;
  }

.btn-4:hover {
    color: #fff;}
  .btn-4:hover:before {
    width: 100%;
  }

@media (max-width: 768px){
video{
max-width: 100%;
height: auto;
margin-bottom: 20px;}
}

@media (max-width: 576px){

        .video{
            padding-top: 40px;
            padding-bottom: 40px;
        }
        .col-titulos-galery{
        display: block;}
        .bnt-youtube {
            margin-top: 20px;
            float: none;
        }
}


  /*----------------------------------DISCOS-----------------------------------*/

  .discos{
    padding-top: 100px;
    padding-bottom: 100px;
} 
.discos .titulo{
text-align: center;
font-size: 72px;}

.discos .subtitulo{
max-width: 300px;
margin: auto;
text-align: center;
}
.discos .img-discos{
    text-align: center;
    margin-top: -70px;
    z-index: -20;
 }

 .discos .img-discos img{
    padding-left: 130px;
}

.discos .bnt-discos{
    display: -webkit-box;
    
    -webkit-box-pack: center;

   
}
.discos .bnt-discos img{
    margin-right: 10px;
    margin-bottom: 5px;

}

    .discos .bnt-discos h4{
        font-family: 'sarpanch'!important;
        text-transform: uppercase;
        font-size: 16px;
        margin-bottom: 0px!important;
        font-weight: 600;
        line-height: 22px;
        
    }

.col-botones-discos{
    max-width: 700px;
    margin: auto;
    margin-top: -120px;
}

.btn-5 {
    transition: all .3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: inline-flex;
    text-decoration: none;
    color: #010101;
    padding-top: 3px;
    border: 1px solid #AA0000;
    padding: 10px;
    margin: 10px 5px;
    justify-content:center;
    border-radius: 30px;
    width: 300px;
  }
  

 
  .btn-5:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;

    z-index: -2;
  }
  .btn-5:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #0101015b;
    transition: all .3s;
    z-index: -1;
  }

.btn-5:hover {
    color: #fff;}
  .btn-5:hover:before {
    width: 100%;
  }
@media (max-width: 999px) {
    .col-botones-discos{
        margin-top: -80px;
    }
}
@media (max-width: 768px){
.discos .img-discos img{
    display: none;
}
.col-botones-discos{
    margin-top: 10px;
}
}
@media (max-width: 576px){

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

    
}
@media (max-width: 330px){
.btn-5 {
  width: 250px;
}
}
  /*----------------------------------FORMULARIO-----------------------------------*/
    .formulario{
    padding-top: 100px;
    padding-bottom: 60px;
    background: #0c0c0c;

    }


    .formulario .titulo{
    color: #E70001;
    font-size: 82px;
    text-align: center;
    letter-spacing: -2px;
    }

    
    .formulario .subtitulo{
    color: #fff;
    text-align: center;
    font-weight: 300;
    margin-bottom: 40px;
    }

    form{
        max-width: 450px;
    margin: auto;}

   form input, textarea{
        width: 100%;
        border: 0px transparent!important;
        margin-bottom: 30px;
        height: 30px;
        background: transparent;
        border-bottom: 1px solid #474747!important;
        color: #fff;
    }

    form textarea{
        resize: none;
        border: none;
    }

    form textarea:focus, input:focus{
        outline: none;
    }

    .enviar{
    border: 1px solid #DD2C28!important;
    padding: 10px;
    height: auto !important;
    border-radius: 20px;
    }

    .enviar:hover{
        background-color:  #DD2C28;
        transition: all .3s;
        }



    

   form input::placeholder,  form textarea::placeholder, form input:-ms-input-placeholder, form textarea:-ms-input-placeholder,  form  input::-ms-input-placeholder, form textarea::-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        font-family: 'sarpanch'!important;
        opacity: 1; /* Firefox */
      }
      

  @media (max-width: 989px) {
      
          
  }
  
  @media (max-width: 768px){
   
  
  }
  
  @media (max-width: 576px){

    .formulario{
        padding-top: 50px;
        padding-bottom: 30px;
    }
}
  
  
  
  /* FOOTER */
  footer{
      background-color: #010101;
    padding-top: 30px;
    padding-bottom: 20px;
  }
  
  
  
  footer .col-12{
      display: inline-flex;
      justify-content: center;
  
  }
  
footer .col-12:last-child{
     margin-bottom: 0px;
  } 
  footer li{
      list-style: none;
      display: inline-flex;
      margin-left: 20px;
      border: none;
      padding-bottom: 20px;
  
  }
  
    footer .iconos-footer{
        text-align: center;

    }
  
  footer li a{
  color: #494949!important;
  text-decoration: none;
  text-align: center;  
  }
  
  .img-footer img{
    max-width: 60px;
    margin-bottom: 20px;
  }
/*   @media (max-width: 989px) {
      
  } */

    @media (max-width: 576px){
        footer .col-12:last-child{
        margin-top: 10px;
    }
    footer li{
    padding-bottom: 10px;}
        footer li a{
        text-align: left;
        }
        

  }
  
.img-clasea{
  align-items: center;
}  
.img-clasea p{
  font-family: 'sarpanch' !important;
  font-weight: 700;
  color:#767676 !important;
  text-transform: uppercase;
  font-size: 10px;
    margin-bottom: 0px;
}
  .img-clasea img{
    max-width: 70px;
    margin-bottom: 2px;

}