@font-face {
    font-family: Poppins;
    src: local("Poppins"),
    local("Poppins"),
    url(../fonts/Poppins-Regular.ttf);
    font-weight: bold;
}
@font-face {
    font-family: Poppins-Light;
    src: local("Poppins-Light"),
    local("Poppins-Light"),
    url(../fonts/Poppins-Light.ttf);
    font-weight: bold; 
}
@font-face {
    font-family: Poppins-Bold;
    src: local("Poppins-Bold"),
    local("Poppins-Bold"),
    url(../fonts/Poppins-Bold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: Poppins-Medium;
    src: local("Poppins-Medium"),
    local("Poppins-Medium"),
    url(../fonts/Poppins-Medium.ttf);
    font-weight: bold;
}

.splide__pagination {
    width: 19% !important;
}
.fpregular{
    font-family: Poppins;
}
.fpbold{
    font-family: Poppins-Bold;
}
.fpmedium{
    font-family: Poppins-Medium;
}
.fplight{
    font-family: Poppins-Light;
}

body{
    color: white;
    background: #000;
    font-family: Poppins-Light;
}


.dfblock{display: block;}
.dfnone{display: none;}
  

.listaMenu{  list-style-type: none;}
.listaMenu li{
    border-right: 1px solid white;
    display: inline-block;
    padding-right: 19px;
    padding-left: 19px;
    font-size: 17px;
}
.listaMenu a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: inherit;
    opacity: 0.7;
  }

  .listaMenu a:hover {

    opacity: 1;
  }
  .listaMenu a::after {
    /* position: absolute;
    left: 0;
    content: "";
    width: 100%;
    height: 2px;
    background: #fff;
    bottom: -4px;
    transform: scale(0, 1);
    transition: transform 0.3s;
    transform-origin: center top; */
  }
  .listaMenu a:hover::after {
    /* transform: scale(1, 1); */
  }

.listaMenu li:last-child{
    border-right: 0px;
  
}

.inputBlanco:focus{
    outline: none;
}

.galeTitulo{
    line-height: 25px;
    font-size: 36px;
}

.splide__arrows{ 
    width: 100%;
    position: absolute;
    bottom: -24px;
}
.splideAbajo .splide__pagination{ 
    bottom: -32px;
}

.splideContentMedio{
    top: 40%;
    left: 50%;
    background-color: #000;
    opacity: 0.8;
    padding: 65px 142px;
}
.splideSinFlecha .splide__arrow{
    display: none;
}

.colorVerde1{
    color:#1DB954;
}

.f9{font-size:9px}
.f10{font-size:10px}
.f11{font-size:11px}
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f15{font-size:15px}
.f16{font-size:16px}
.f17{font-size:17px}
.f18{font-size:18px}
.f19{font-size:19px}
.f20{font-size:20px}
.f21{font-size:21px}
.f22{font-size:22px}
.f23{font-size:23px}
.f24{font-size:24px}
.f25{font-size:25px}
.f26{font-size:26px}
.f27{font-size:27px}
.f28{font-size:28px}
.f29{font-size:29px}
.f30{font-size:30px}
.f31{font-size:31px}
.f32{font-size:32px}
.f33{font-size:33px}
.f34{font-size:34px}
.f35{font-size:35px}
.f36{font-size:36px}
.f37{font-size:37px}
.f38{font-size:38px}
.f39{font-size:39px}
.f40{font-size:40px}
.f41{font-size:41px}
.f42{font-size:42px}
.f43{font-size:43px}
.f44{font-size:44px}
.f45{font-size:45px}
.f46{font-size:46px}
.f47{font-size:47px}
.f48{font-size:48px}
.f49{font-size:49px}
.f50{font-size:50px}
.f51{font-size:51px}
.f52{font-size:52px}
.f53{font-size:53px}
.f54{font-size:54px}
.f55{font-size:55px}
.f56{font-size:56px}
.f57{font-size:57px}
.f58{font-size:58px}
.f59{font-size:59px}
.f60{font-size:60px}
.f61{font-size:61px}
.f62{font-size:62px}
.f63{font-size:63px}
.f64{font-size:64px}
.f65{font-size:65px}
.f66{font-size:66px}
.f67{font-size:67px}
.f68{font-size:68px}
.f69{font-size:69px}
.f70{font-size:70px}
.f71{font-size:71px}
.f72{font-size:72px}
.f73{font-size:73px}
.f74{font-size:74px}
.f75{font-size:75px}
.f76{font-size:76px}
.f77{font-size:77px}
.f78{font-size:78px}
.f79{font-size:79px}
.f80{font-size:80px}
.f81{font-size:81px}
.f82{font-size:82px}
.f83{font-size:83px}
.f84{font-size:84px}
.f85{font-size:85px}
.f86{font-size:86px}
.f87{font-size:87px}
.f88{font-size:88px}
.f89{font-size:89px}
.f90{font-size:90px}
.f91{font-size:91px}
.f92{font-size:92px}
.f93{font-size:93px}
.f94{font-size:94px}
.f95{font-size:95px}
.f96{font-size:96px}
.f97{font-size:97px}
.f98{font-size:98px}
.f99{font-size:99px}
.f100{font-size:100px}
.f101{font-size:101px}
.f102{font-size:102px}
.f103{font-size:103px}
.f104{font-size:104px}
.f105{font-size:105px}
.f106{font-size:106px}
.f107{font-size:107px}
.f108{font-size:108px}
.f109{font-size:109px}
.f110{font-size:110px}
.f111{font-size:111px}
.f112{font-size:112px}
.f113{font-size:113px}
.f114{font-size:114px}
.f115{font-size:115px}
.f116{font-size:116px}
.f117{font-size:117px}
.f118{font-size:118px}
.f119{font-size:119px}
.f120{font-size:120px}
.f121{font-size:121px}
.f122{font-size:122px}
.f123{font-size:123px}
.f124{font-size:124px}
.f125{font-size:125px}
.f126{font-size:126px}
.f127{font-size:127px}
.f128{font-size:128px}
.f129{font-size:129px}
.f130{font-size:130px}
.f131{font-size:131px}
.f132{font-size:132px}
.f133{font-size:133px}
.f134{font-size:134px}
.f135{font-size:135px}
.f136{font-size:136px}
.f137{font-size:137px}
.f138{font-size:138px}
.f139{font-size:139px}
.f140{font-size:140px}
.f141{font-size:141px}
.f142{font-size:142px}
.f143{font-size:143px}
.f144{font-size:144px}
.f145{font-size:145px}
.f146{font-size:146px}
.f147{font-size:147px}
.f148{font-size:148px}
.f149{font-size:149px}
.f150{font-size:150px}

.opa08{opacity: 0.8;}
.opa09{opacity: 0.9;}

.efecto1{
    opacity: 0.8;
}
.efecto1:hover{
    opacity: 1;
}

.oculto{position: relative;}
.ocultoListo{position: relative;}
.oculto span{
    opacity: 0;
    position: relative;
}
.ocultoIzq span{left: -70px;}
.ocultoCen span{left:0px}
.ocultoDer span{left: 70px;}
.ocultoArr span{top: -30px;}
.ocultoAba span{top: 30px;}


.cambioIzq{
    animation-name: izq;
    animation-duration: 1s;
    animation-fill-mode: both;
}
.cambioCen{
    animation-name: cen;
    animation-duration: 1s;
    animation-fill-mode: both;
}
.cambioDer{
    animation-name: der;
    animation-duration: 1s;
    animation-fill-mode: both;
}
.cambioArr{
    animation-name: arr;
    animation-duration: 1s;
    animation-fill-mode: both;
}
.cambioAba{
    animation-name: aba;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes izq {
    0%   {opacity: 0;left: -70px;}
    100% {opacity: 1;left: 0px; }
}
@keyframes cen {
    0%   {opacity: 0;}
    100% {opacity: 1; }
}
@keyframes der {
    0%   {opacity: 0;left: 70px;}
    100% {opacity: 1;left: 0px; }
}
@keyframes arr {
    0%   {opacity: 0;top: -30px;}
    100% {opacity: 1;top: 0px; }
}
@keyframes aba {
    0%   {opacity: 0;top: 30px;}
    100% {opacity: 1;top: 0px; }
}

@keyframes pulseo {
    0%   {height: 54px;right: 36px;top: 35px;}
    100% {height: 58px;right: 34px;top: 34px; }
}

@keyframes creceFont {
    0%   {margin-right: 10px;}
    100% {margin-right: 25px;}
}



@media (min-width: 1px) {
    .titulo1{
        font-size: 28px;
    }
    .divLogo{
        top: 1px;
    }
    .listaMenu li{font-size: 12px;}
    .divSpotify{ position: relative; bottom: -250px;}
    .logo{height: 90px;}
    .logoNav{height: 60px;}
    .soloMobil{display: block;}
    .noMobil{display: none;}

}

@media (min-width: 576px) {
    .titulo1{
        font-size: 30px;
    }
    .divLogo{
        top: 10px;
    }
    .listaMenu li{font-size: 12px;}
    .divSpotify{ position: relative; }
    .logo{height: 120px;}
    .logoNav{height: 80px;}
    .soloMobil{display: none;}
    .noMobil{display: inherit;}
   
}


@media (min-width: 768px) { 
    .titulo1{
        font-size: 43px;
    }
    .divLogo{
        top: 20px;
    }
    .listaMenu li{font-size: 14px;}
    .divSpotify{ position: relative; }
    .logo{height: 180px;}
    .logoNav{height: 120px;}
    .soloMobil{display: none;}
    .noMobil{display: block;}
    .noMobil.dfnone{display: none;}
    .noMobil.dfnone.dfblock{display: block;}
}


@media (min-width: 992px) { 
    .titulo1{
        font-size: 43px;
    }
    .divLogo{
        top: 100px;
    }
    .listaMenu li{font-size: 16px;}
    .divSpotify{ position: absolute; }
    .logo{height: 180px;}
    .logoNav{height: 120px;}
    .soloMobil{display: none;}
    .noMobil{display: block;}
    .noMobil.dfnone{display: none;}
    .noMobil.dfnone.dfblock{display: block;}
 }


@media (min-width: 1200px) { 
    .titulo1{
        font-size: 43px;
    }
    .divLogo{
        top: 200px;
    }
    .listaMenu li{font-size: 16px;}
    .divSpotify{ position: absolute; }
    .logo{height: 180px;}
    .logoNav{height: 120px;}
    .soloMobil{display: none;}
    .noMobil{display: block;}
    .noMobil.dfnone{display: none;}
    .noMobil.dfnone.dfblock{display: block;}
 }


@media (min-width: 1400px) { 
    .titulo1{
        font-size: 43px;
    }
    .divLogo{
        top: 200px;
    }
    .listaMenu li{font-size: 16px;}
    .divSpotify{ position: absolute; }
    .logo{height: 180px;}
    .logoNav{height: 120px;}
    .soloMobil{display: none;}
    .noMobil{display: block;}

    .noMobil.dfnone{display: none;}
    .noMobil.dfnone.dfblock{display: block;}
 }

 .linkCategoriaMobil{display: none;}
 .linkCategoriaMobil img.imgCate{opacity: 0.8;}
 .slideAtriMobil{display: none;}
 .slideAtri{display: block;}
 .noMobilBlock{display: flex;}

 @media (max-width: 576px) {
     .splide__pagination{width: 20% !important;}
    #linkNosotros {text-align: center;}
    #linkCategoria{display: none;}
    .linkCategoriaMobil{display: block;}
    .slideAtriMobil{display: block;}
    .slideAtri{display: none;}
    .divLogo{top:200px}
    .divSpotify{bottom: 0;}
    .noMobilBlock{display: none;}
    .textfooter{
        padding: 36px;
        text-align: center;
        font-size: 14px;
    }

    .tituloNosotros{font-size: 25px;}
    .tituloTexto{font-size: 14px;}
    .linkCategoriaMobil .galeTitulo{font-size: 30px;}
    .linkCategoriaMobil p{font-size: 15px;}

    .mobilTitulo{font-size: 18px;}
    .mobilTexto{font-size: 14px;}

    .soloMobil.dfnone{display: none;}
    .soloMobil.dfnone.dfblock{display: block;}


}