html {
  scroll-behavior: smooth;
}

.blackbg{ background: #000;}

/*  Fonts */
.altehaas   {font-family: 'Alte Haas Grotesk'; }
.opensans   {font-family: 'Open Sans';         }
.neuehaas   {font-family: 'Neue Haas Grotesk Display Pro';}
.bebas { font-family: 'Bebas Neue';}


/* Elementos*/

body { background: #fcfcff; color:#333;}



/* menu */
.menunav
{
      width: 39px;
    position: fixed;
    top: 25px;
    right: 13px;
    margin: 0px;
    z-index: 1000;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bars__menu span {
    display: block;
    width: 39px;
    height: 5px;
    background: #9a949b;
    margin-top: 6px;
    transform-origin: 0px 100%;
    transition: all 300ms;
    border-radius: 10px;
}

a:hover, a:focus {
    color: #000;
    text-decoration: none;
}


.activeline1__bars-menu{
    transform: rotate(45deg) translate(-2px, 1px); 
}

.activeline2__bars-menu{
    opacity: 0;
    margin-left: -13px; 
}

.activeline3__bars-menu{
    transform: rotate(-45deg) translate(-4px, 2px);
}

.oculto {
    display: none;
      transition: all 300ms;
}

.visible {  
    display: block;    
    min-height: 300px;
    z-index: 999;    
    background: white;
    position: sticky;
    top: 20px;
    width: 100%;}


#logo-box {
   width: 90%;
   padding: 70px 10px 10px 35px;
   border-bottom: 2px solid #1f1e1e;
   margin: auto;
    
}


.logo-min {
    width: 100%;
    padding: 0px 10px 10px 35px;
    border-bottom: 2px solid #1f1e1e;
    position: fixed;
  background: #fcfcff;
    z-index: 999;   
    transition-duration: .9s;
    transition: ease;
     -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
}

.logorp30 {
    max-width: 600px;   
    padding-bottom: 10px;
   
}

.logorp30-min {
    max-width: 100%;   
    padding-bottom: 10px;
   
}

.logorp30 {
    max-width: 600px;   
    padding-bottom: 10px;
   
}


.sociales {
    width: 100%;
    text-align: end;
    padding: 10px 0px;

}

.sociales a:hover {  
    opacity:.7;
    transform: translateY(15px);
}

.sociales ul { display: inline-flex; margin-bottom: 0;}
.sociales li { list-style-type: none;}
.tik {height: 37px; width: auto; margin-top: -3px; padding: 0px 3px;}
.insta {height: 34px;width: auto; margin-top: 0px; padding: 0px 3px;}
.face {height: 33px;width: auto;margin-top: 1px; padding: 0px 3px;}
.tw { height: 32px;width: auto;margin-top: 2px;padding: 0px 3px;}
.you {height: 38px;width: auto; margin-top: 0px; padding: 0px 9px;}
.spoti {    height: 33px;width: auto;margin-top: 1px;padding: 0px 3px;}
.whats {height: 34px; width: auto;margin-top: 0px; padding: 0px 0px 0px 7px;}

.menu {
    min-height: 145px;
    margin-top: 35px;
}

.container-menu {
   
   width: 90%;
   padding: 0;
  min-height: 450px;
   margin: auto;
    
}


.container-menu ul {
  
    margin: 0;
    padding: 0;
}

.container-menu ul li {
    float: left; 
    list-style-type: none;  
    padding: 0px 15px;
}

.container-menu ul li a {
    display: block;
    font-size: 4.8vw;
   font-family: 'Neue Haas Grotesk Display Pro';
    color: #1c1c1c;
    text-transform: uppercase;
    line-height: 0.95;
    overflow: hidden;
    text-decoration: none;
    background: -webkit-linear-gradient(transparent, transparent), url('img/fondo_menu2.jpg') left center;
    background: -o-linear-gradient(transparent, transparent);
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 900;
}

.container-menu-min {
   
   width: 90%;
   padding: 0;
 
   margin: auto;
    
}
.container-menu-min ul {
  
    margin: 0;
    padding: 0;
}

.container-menu-min ul li {
    float: left; 
    list-style-type: none;
}

.container-menu-min ul li a {
    display: block;
    padding-right: 15px;
    font-size: 45px;
    
   font-family: 'Neue Haas Grotesk Display Pro';
    color: #1c1c1c;
    text-transform: uppercase;
    line-height: 0.87;
    overflow: hidden;
    text-decoration: none;
    background: -webkit-linear-gradient(transparent, transparent), url('img/fondo_menu2.jpg') left center;
    background: -o-linear-gradient(transparent, transparent);
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 900;
}

.container-menu-min ul li a:hover {
    text-decoration: none;
    background-size: auto 100%;
    -webkit-text-fill-color: transparent;
    animation: play 0.6s steps(10) infinite;
}




.container-menu ul li a:hover {
    text-decoration: none;
    background-size: auto 100%;
    -webkit-text-fill-color: transparent;
    animation: play 0.6s steps(10) infinite;
}

@keyframes play {
    100%{ background-position: -1500px}
}

/* menu*/

/*  revistas*/

#revistas
{
  margin-top: 15px;  
}

.detalle-revista {
    background-color: #FF111C;
    padding: 320px 0px 65px;
    color: white;
    margin-top: -317px;
}

a {cursor: pointer;}

   .img-overlay {
    position: relative;
}   
         
  .img-overlay:hover .img-hover, .img-overlay:hover .img-text {
    opacity: 1;
}       
   .img-overlay:hover .img-text {
    transform: translateY(0);
}      
         
  .img-overlay .img-hover {
    background-color: rgba(0,0,0,.8);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
}       

  .img-overlay .img-text {
    color: #fff;
    font-size: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transform: translateY(10px);
    transition: opacity .5s ease-in-out,transform .5s ease-in-out;
     
}   


.block-drive {
  
    position: absolute;
    width: 58px;
    height: 48px;
    background: #d1d1d1;
    right: 0px;
    text-align: right;
    padding-right: 15px;
    border-radius: 5px;


}
         
@media (min-width: 576px){
    
 

    #que-es {
        
    }

    
  #revistas
{
  margin-top: 15px;  
}  
    
    
.modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: 0 0.5rem 1remrgb(221 0 0);
    background: rgb(0 0 0 / 80%);
}}

.credito{
   color: white;
    position: absolute;
    bottom: 76px;
    right: 15px;
    background: #00000087;
    padding: 5px;
    font-family: 'Alte Haas Grotesk'; 
    font-size: .85rem;
}
       
   .modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #d1d1d1;
    background-clip: padding-box;
    border: 0px solid rgb(0,0,0);
    border-radius: 0.3rem;
    outline: 0;
}      
   .close {
    float: right;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: #ff0707;
     text-shadow: 0 0px 0 #fff; 
    opacity: 1;
       border: 0;
}     
   .modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0rem 1rem;
    border-bottom: 0px solid #dee2e6;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}
.modal-footer {
    border-top: 0px;
}

@media (min-width: 1200px){
.modal-xl {
    --bs-modal-width: 90%;
}

}






.item img {
    transition: all 300ms;
    position: relative;
}
.item img:hover 
{
    transform: scale(1.3);
    cursor: pointer;
}

.owl-prev{ 
    font-size: 6em!important;
    color: white !important;
    position: absolute;
    top: 45px;
    left: 0px;
    width: 40px;
    height: 238px;
    margin:0; 
    font-size: 35px;
    background-color: rgba(160, 160, 160, 0.29);
    border: 2px solid #fff;
    border-radius: 50%;
    transition: all .3s;
    background: #00000080 !important;
}


.owl-next{ 
    font-size: 6em!important;
    color: white !important;
    position: absolute;
    top: 45px;
    right: 0px;
    width: 40px;
    height: 238px;
    margin:0; 
    font-size: 35px;
    background-color: rgba(160, 160, 160, 0.29);
    border: 2px solid #fff;
    border-radius: 50%;
    transition: all .3s;
    background: #00000080 !important;
}
.owl-theme .owl-nav [class*='owl-'] {
  
     margin: 0px;
  
}
.owl-theme .owl-dots .owl-dot {
    display: none;
  
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;   
    border-radius: 5px;
    background: #fefff9;
    padding: 20px 8px;
    height: auto;
}


.titulo-articulo
{
    font-size: 2em;
    text-align: left;
    padding:0 15px;
    color: white;
    font-family: 'Alte Haas Grotesk';
    font-weight: bold;
    margin-bottom: 0;

}
.fecha-publicacion {
    font-size: .85em;
    text-align: left;
    padding: 0 15px; 
     color: white;
    font-weight: bold;
     font-family: 'Alte Haas Grotesk';
}

.separador-blanco {
    border-top: 2px solid white;
    opacity: 1;
    margin: 0px 15px 25px 20px;
}


.upto {
   background: transparent;
   margin-top: -46px; 
}



#cajarevistas
{
    background-color: black;
    padding: 90px 0px;
    min-height: 100vh;
    
}


.owl-carousel .owl-stage-outer {
   
    padding: 45px 0px;
}


.ico {
    color: white;
    font-size: 1.5em;
    padding: 10px;
}

.btn-black {
    color: white ;
    background: black;
    font-size: 2em;
    border-radius: 0;
    width: 100%;
    padding: 8px;
     font-family: 'Alte Haas Grotesk';
    font-weight: bold;
}

.btn-black:hover {
    color: #FF111C!important;
    background: black!important;
    font-size: 2em;
    border-radius: 0;
    width: 100%;
    padding: 8px;
    font-weight: 500;
}


/* concursos */

#concursos { 
    padding: 35px 0px;
    background: black;
    min-height: 100vh;
}
.titulo-concursos {
   color:white;
    font-size: 5em;
    font-weight: bold;
    letter-spacing: -4px;
   font-family: 'Alte Haas Grotesk';
    
}


/*  que es*/

 #que-es {
      padding: 100px 15px;
     background: #333;
     
    }

.titulo {
 
    color: white;
    font-size: 5em;
    font-weight: bold;
    letter-spacing: -3px;
    font-family: 'Alte Haas Grotesk';
    text-transform: uppercase;
    
}

.texto { 
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.4;
    font-family: 'Alte Haas Grotesk';
    
    text-align: justify;
}

/* libros */





.titulo-libros {
 
   color: black;
    font-size: 5em;
    font-weight: bold;
    letter-spacing: -3px;
    font-family: 'Alte Haas Grotesk';
    
}

.nover {display: none;}
/* ------------------------------------------------------------------ */

/* la ruta del vinilo */


#la-ruta-del-vinilo{
    
    max-width: 100%;
}
.titulo-vinilos {
  
   color: white;
    font-size: 5em;
    font-weight: bold;
    letter-spacing: -3px;
    font-family: 'Alte Haas Grotesk';
    
}


.nombre-tienda
{
    font-size: 1.2em;
    color: white;
    text-shadow: 1px 2px black;
    opacity: .5;
}

#la-ruta-del-vinilo { 
    padding: 35px 0px;
    background: #383838;
    min-height: 60vh;
}


.vinilo-box
   {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
    width: 100% ;

}

.vinilo-box {
  position: relative;
  margin-top: 0px;
  width: 300px;
  height: 300px;
  
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3);
  transition: background 0.5s ease;
}

.vinilo-box:hover  {
  transform: scale(1.2);
   transition: all 0.5s;
  
}
.vinilo-box:hover .overlay {
  display: block;
  background: rgba(0, 0, 0, .75);
}

.vinilo-box img {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 0;
}

 .vinilo-box .title {
    position: absolute;
    left: 0;
    top: 122px;
    font-weight: 700;
    font-size: 25px;
    text-align: center;
    text-transform: uppercase;
    color: white;
    z-index: 1;
    width: 300px;
    transition: top .5s ease;
}

.vinilo-box:hover .title {
  top: 90px;
}

.vinilo-box .button {
  position: absolute;
  width: 300px;
  left:0;
  top: 160px;
  text-align: center;
  opacity: 0;
  transition: opacity .75s ease;
}

.vinilo-box .button a {
  width: 172px;
  padding: 12px 48px;
  text-align: center;
  color: white;
  border: solid 2px white;
  z-index: 1;
    text-decoration: none;
    font-family: 'Alte Haas Grotesk';
}

.vinilo-box:hover .button {
  opacity: 1;
}

.vinilo-box img {
   
    background: none !important;
    padding: 0!important;
   
}




/* ------------------------------------------------------------------ */


/* footer*/

footer {
    background-color: #1f1e20;
    color: white;
    padding: 35px 15px;
}

.footer-title {
    font-weight: 600;
    font-family: 'Neue Haas Grotesk Display Pro';
}

.footer-text {
    font-size: 14px;
    font-weight: 300;
    font-family: 'Open Sans';
    text-align: left;
}

.ico-footer { color: white; padding: 4px;}
.bajada-footer {font-weight: 600;}


#libros {
    background: white;
    padding: 35px 0px;
    width: 100%;
    min-height: 100vh;
   
}


#tus30 {
    background: #201F21;
    padding: 35px 0px;
    width: 100%;
  
   
}

#tus30 span {
    color: white;
    font-family: 'Alte Haas Grotesk';
    font-weight: normal;
    font-size: 1.3rem;
    text-transform: uppercase;
}

#generacion94
{
    background: #201F21;
    padding: 35px 0px;
    width: 100%;
    min-height: 100vh;
    color: white;
    
}

/*  GENERACION 94.1 */

#generacion-94 { 
    padding: 35px 0px;
    background: black;
   
}
.titulo-generacion-94 {
   color:white;
    font-size: 5em;
    font-weight: bold;
    letter-spacing: -4px;
   font-family: 'Alte Haas Grotesk';
    
}

#masrp { 
    padding: 35px 0px;
    background: #0f0f0f;
   
}
.titulo-masrp {
   color:white;
    font-size: 5em;
    font-weight: bold;
    letter-spacing: -4px;
   font-family: 'Alte Haas Grotesk';
    
}








.nombre-libro {
    font-family: 'Alte Haas Grotesk';
    font-weight: bold;
    font-size: 1.2rem;
    color: black;
    padding-bottom: 0;
    margin-bottom: 0;
    line-height: 1;
    padding-bottom: 4px;
    
}

#libros span {
    color: black;
}

.btn-libro {
    border: 1px solid black;
    background: white;
    border-radius: 0;
    padding: 3px 7px;
    color: black;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 500;
}

.btn-libro:hover {
    border: 1px solid #dc3545;
    background: #dc3545;
    color: white;
    text-decoration: none;
}


#raras-tocatas-pencas
{
  
  background: white;
  padding: 45px 0px;
    
    
}

.titulo-tocatas {
    color: black;
    font-size: 3.7em;
    font-weight: bold;
    letter-spacing: -4px;
    font-family: 'Alte Haas Grotesk';
    
}





/* player experimental */




/* Global Styles
================================================== */


.player {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;

color:#000;
font-size:1rem;
font-family: 'Alte Haas Grotesk';
font-weight:normal;
/*letter-spacing:.025rem;*/
line-height:1.618;
padding:1rem 0;
}

*,::before,::after {
box-sizing:border-box;
}

* {
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-webkit-tap-highlight-color:transparent;
}


/* Setup
================================================== */

.container-player { position:relative; margin:0 auto;background-color:#c3c3c3;  }
.column { width:inherit; }


/* Typography / Links
================================================== */

p { color:#fff; display:block; font-size:.9rem; font-weight:400; margin:0 0 2px; }

/*a,a:visited { color:#000; outline:0; text-decoration:underline; }*/
a:hover,a:focus { color:#606060; }
/*p a,p a:visited { line-height:inherit; }*/

a {
    color: white;
    text-decoration: none;
}
/* Misc.
================================================== */

.add-bottom { margin-bottom:2rem !important; }
.left { float:left; }
.right { float:right; }
.center { text-align:center; }
.hidden { display:none; }

.no-support {
margin:2rem auto;
text-align:center;
width:90%;
}


/* Audio Player Styles
================================================== */

#raras-tocatas-pencas audio {
display:none;
}

#audiowrap,
#plwrap {
margin:0 auto;
}

#tracks {
font-size:0;
position:relative;
text-align:center;
}

#nowPlay {
display:block;
font-size:0;
}

#nowPlay span {
display:inline-block;
font-size:1.05rem;
vertical-align:top;
}

#nowPlay span#npAction {
    padding: 36px;
    width:30%;
    height: 92px;
}

#nowPlay span#npTitle {
padding: 20px 15px 10px 0px;
    text-align: left;
    width: 70%;
    margin-top: 9px;
    font-weight: 600;
    font-size: 1.5rem;
}

.bggray {
    background: #c3c3c3;
}

.bgpodcast {
    min-height: 440px;
    background: url('img/podcast_inside_raras.jpg');
    background-position: center top;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 0px;
}

.bgcaratula{
    min-height: 400px;
    background: url('img/RPencas_800x800.jpg');
    background-position: center top;
    background-size: 100%;
    background-repeat: no-repeat;
     margin-top: 0px;
}



@media(max-width:1366px)
{
    .vinilo-box .title {  
    font-size: 18px;   
}
    .vinilo-box:hover {
    transform: scale(1.1);
    transition: all 0.5s;
}
    
}

@media(max-width:640px)
{
    
  .container-menu {
   
   width: 90%;
   padding: 0;
  min-height: 330px;
   margin: auto;
    
}
    
    
   .container-menu {   
   width: 100%; }
   
    
    
    #logo-box {
    width: 95%;
    padding: 20px 10px 10px 6px;
    border-bottom: 2px solid #1f1e1e;
    margin: auto;
}
    
    
   ol, ul {
     padding-left: 0rem; 
} 
    
    .player {
 
    padding: 0;
}
    #raras-tocatas-pencas {
   
    padding:  0px;
}
    
  .bgcaratula{
   min-height: 250px;
    background: url(img/RPencas_640x300.jpg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0px;
   
} 
    
    .titulo-tocatas {
    color: black;
    font-size: 2.7em;
    font-weight: bold;
    letter-spacing: -3px;
    font-family: 'Alte Haas Grotesk';
        text-align: center;
}
    
    .titulo-vinilos {
    color: white;
    font-size: 3.7em;
    font-weight: bold;
    letter-spacing: -2px;
    font-family: 'Alte Haas Grotesk';
        text-align: center;
}
    
    
   .bgpodcast {
    min-height: 316px;
    background: url(img/podcast_inside_raras.jpg);
    background-position: center top;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 30px;
} 
    
}


#plList li {
cursor:pointer;
display:block;
margin:0;
padding:1px 0;
background: #c3c3c3;
}

#plList li:nth-child(odd) {
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 8px 0;
    background: #999999;
}

#plList li:hover {
background-color:rgba(185, 6, 6, 0.8);
}

.plItem {
position:relative;
}

.plTitle {
left:50px;
overflow:hidden;
position:absolute;
right:65px;
text-overflow:ellipsis;
top:0;
white-space:nowrap;
}

.plNum {
padding-left:21px;
width:25px;
}

.plLength {
padding-left:21px;
position:absolute;
right:21px;
top:0;
}

.plSel,
.plSel:hover {
/*background-color:rgba(0, 0, 0, .1);*/
color:#fff;
cursor:default !important;
background: black !important;

}

#tracks a {
border-radius:3px;
color:#fff;
cursor:pointer;
display:inline-block;
font-size:2.3rem;
height:40px;
line-height:.2;
margin:0 5px 30px;
padding:12px;
text-decoration:none;
transition:background .3s ease;
}

#tracks a:hover,
#tracks a:active {
background-color:rgba(0, 0, 0, .1);
color:#fff;
}

#tracks a::-moz-focus-inner {
border:0;
padding:0;
}




/* Plyr Overrides
================================================== */

.plyr--audio .plyr__controls {
background-color:transparent;
border:none;
color:#000;
font-family: 'Alte Haas Grotesk';
padding:20px 20px 20px 13px;
width:100%;
}

a.plyr__controls__item.plyr__control:hover,
.plyr--audio .plyr__controls button:hover,
.plyr--audio .plyr__controls button.tab-focus:focus,
.plyr__play-large {
background-color:rgba(0, 0, 0, .1);
}

.plyr__progress--played,
.plyr__volume--display {
color:rgba(0, 0, 0, .1);
}

.plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display {
background-color:rgba(0, 0, 0, .1);
}

.plyr--audio .plyr__progress--buffer {
color:rgba(0, 0, 0, .1);
}

.plyr__controls .plyr__controls__item.plyr__time {
font-size:14px;
margin-left:7px;
}

.plyr__progress input[type=range] {
  
    color: #fe0000;
}

.plyr__volume input[type=range] {
     color: #fe0000;
  
}


/***************************************************************************/


.desktop {display: block;}
.mobile {display: none;}


/* Media Queries
================================================== */

@media only screen and (max-width:600px) {
    #nowPlay span#npAction { display:none; }
    #nowPlay span#npTitle { display:block; text-align:center; width:100%; }
}

/*************************************************************************************************/

@media(max-width:680px)
{
    
    .logo-min {
    width: 100%;   
}
    
    .container-menu-min {
    width: 100%;   
}
    
    .container-menu-min ul li a {
     font-size: 29px;
    padding-right: 10px; } 
    .logorp30 { max-width: 75%;}
    .logorp30-min {   max-width:75%; }
    .titulo-concursos {font-size: 3em;}
     
    .titulo-libros {    font-size: 3.7em; text-align: center;}
    .container-menu ul li a { font-size: 36px;}
    .tik {height: 30px; margin-top: -3px; padding: 0px 3px;}
.insta {height:28px; margin-top: 0px; padding: 0px 3px;}
.face {height: 28px;margin-top: 1px; padding: 0px 3px;}
.tw { height: 27px;margin-top: 2px;padding: 0px 3px;}
.you {height: 30px; margin-top: 0px; padding: 0px 9px;}
.spoti {    height: 28px;margin-top: 1px;padding: 0px 3px;}
.whats {height: 28px; margin-top: 0px; padding: 0px 0px 0px 7px;}
    
.desktop {display: none;}
.mobile {display: block;}
}