@import url('https://fonts.googleapis.com/css?family=Staatliches');

html {background:url("/css/rtve.2019.radio/rtve.programas/cliffhanger-TE_RCLFF29/i/fondo.jpg") #f6f6f6;}

/*portada apertura al 100%*/
.specialTopBox.striplayer{background:transparent;}
.wrapper .specialTopBox .grid{width:100%;padding:0;box-shadow:0rem 0rem 2.1rem #1c1c1c;display:inline-block;}
.specialTopBox .gridBox .cell, .specialTopBox .gridBox .cell .mediaBox{padding:0;}
.specialTopBox .gridBox .cell .mediaBox .ima{outline:0;box-shadow:none;display:block;height:100vh;height:50vw;padding:0;}
.specialTopBox .gridBox .cell .overBox{position:absolute;bottom:0;width:100%;padding:2% 15%;min-height:15vh;top: auto;display: block;height: auto;}
.specialTopBox .g1 .txtBox .maintitle {font-size:4.4rem;padding:1rem 0 0;line-height:4.8rem;}
.specialTopBox .txtBox span.pretitle {font-size:2.4rem;text-transform:uppercase;}
.specialTopBox span.author.name em {font-size:1.6rem;text-transform:capitalize;font-weight:600;line-height:3.2rem;}

/*cabecera*/
.mainheader .tab_first .logo, .navBox.spechead .container ~ .slidB.ico img {filter:invert(40%)}
.mainheader .tab_first .logo:hover {opacity:.5}
.subheader .navBox.spechead {background:#ffffff;position:relative}
.wrapper.subheader .spechead .logoima {width:14em;max-width: inherit;top: 0;}
.wrapper.subheader .spechead .hostima {display: block!important;width: 14em;height: 6.6rem;left: 36rem;}
.wrapper.subheader .spechead .hostima img {width: 90%;top:0;margin-top:0;left:0;right:auto}
.wrapper.subheader .spechead .emisBox .cell .maintitle {font-weight:400;color: #2b2b2b;}

/*apertura*/
.specialTopBox .g1 .txtBox .maintitle, .specialTopBox .auxBox, .specialTopBox .auxBox li {color:#ffffff;}
.specialTopBox .overBox {background:rgba(255, 177, 0, 0.85);padding: 2% 16%;}
.specialTopBox span.pretitle, span.author.name em, .subheader nav li .ico span{color:#2b2b2b;font-weight:700}
.specialTopBox .mediaBox .ico.play {left:50%}

/*catalogo*/
.arrays .secBox + .slideH + .controlBox, .arrays .secBox + .slideH + .spinnBox + .controlBox {top:9.4rem}
.arrays .slideH + .controlBox, .arrays .slideH + .spinnBox + .controlBox {top: 0!important;}
.container:not(.striplayer) .arrays .secBox + .slideH + .controlBox,
.container:not(.striplayer) .arrays .secBox + .slideH + .spinnBox + .controlBox {top: 5.4rem!important;}


/*ico*/
.specialTopBox  span.ico.play, .auxheader .ico.share {box-shadow:none;}
.grid .controlBox span.ico, .mediaBox .ima, .mediaBox span.ico.play, .ico.share{outline-color:#FEB100;}
.grid .controlBox span.ico:hover img, .mediaBox .ima:hover img, .mediaBox span.ico.play:hover img, .ico.share:hover img {opacity:.6}
.container:not(.striplayer) .secBox:before, .sliderBox h1:before, .grid .controlBox span.ico {background:#292469;}

/* .grid:not(.g1) .mainBox .txtBox {padding: .5em 2rem;} */
.mainBox .txtBox .maintitle {color:#292469}
.grid:not(.g1) .mainBox .auxBox {color:#333;padding: 0 2rem;}
.mainBox .auxBox li, .mainBox .auxBox p ,.mainBox .auxBox strong,.mainBox .auxBox em{font-size:1.8rem;}
.mainBox .auxBox a {font-size:1.8rem;color:#d1bb94;text-decoration:none;transition:all .2s;}
.mainBox .auxBox a:hover {color:#fff;}

section > h1 > span, section.grid > .secBox > span .sliderBox h1 span {font-size: 3rem;font-weight: 300;line-height:1.1;margin: 0;padding: 0;color: #333;}
section.grid > .secBox > span {font-family:'Staatliches', cursive;font-size:3.2rem;line-height:1.2;color:#292469;}

/* fondo con striplayer */
.container.striplayer:not(.specialTopBox):not(.inside) {background: rgba(164, 164, 163,0.27);padding: 2rem 0;margin: 3rem 0;}

/** playlist **/
/* positioing */
.musicBox .mainBox, .musicBox .gridBox .mediaBox.audioBox, .musicBox .gridBox .txtBox {display:flex;display: -webkit-box;display: -moz-flex; display: -ms-flexbox;display: -webkit-flex;}
.musicBox .mainBox {overflow:hidden;align-items:center;background:#404041;}
.musicBox .gridBox .mediaBox.audioBox {height:100%;margin-bottom:0;float:left;width:18rem;}
.musicBox .gridBox .txtBox {width:100%;border-left:7rem solid transparent;position:relative;padding:0 0 .5rem 4rem;flex-direction:column;-webkit-flex-direction: column;-moz-flex-direction: column;-ms-flex-direction: column;	flex-direction: column;}
.musicBox.container .grid .gridBox .mainBox .maintitle {font-size:1.4rem;line-height:2rem;color:#fff;padding-top:0.5rem;order:1;-webkit-box-ordinal-group: 1;-moz-box-ordinal-group: 1;-ms-flex-order: 1;-webkit-order: 1;}
.musicBox.container .grid .gridBox .mainBox .pretitle {font-size:1.4rem;color:#a8a89e;padding-top:0;text-transform:none;order:2;-webkit-box-ordinal-group: 2;-moz-box-ordinal-group: 2;-ms-flex-order: 2;-webkit-order: 2;}

/*caja sonido*/
.musicBox .mediaBox .ima {outline-color:transparent;}
.musicBox .mediaBox span.ico.play.audio{border-radius:0;border:none;height:100%;padding:0.6em;}
.wrapper.bodier .musicBox.container:not(.bestClips) .grid .mediaBox .ico.play:not(.vjs-control){height:100%;width:8rem;top:0;left:100%;margin:0;bottom:auto;outline:none;background:#FEB100;}
.musicBox .mediaBox .ico.play:not(.vjs-control) img{left:50%;margin-left:-2em;width:4em;height:4em;background-color:transparent;}
.musicBox.container .gridBox .mediaBox .ico.play:not(.vjs-control) .duration{font-size:1.2rem !important;width:100%;top:4.6rem;left:0;clip:auto;text-align:center;line-height:1.2;color:#ffffff;}

/*ocultar sociales*/
.musicBox .socialBox{display:none;}
.wrapper.bodier .container ~ .botlayer {display:block}

/*atlantis*/
.wrapper.bodier .specialTopBox .grid > .gridBox .m100 span.ima {height: auto;padding-top: 56.25%;}
.wrapper.bodier .notory > .gridBox > .m100:first-child .play {width:auto;height:auto}


@media all and (max-width:1440px){
 .subheader nav li .ico span {color:#ffffff;}
 .subheader .spechead h1, .subheader .spechead .falseH1 {left: 10rem;}

 .specialTopBox + .container.striplayer,
 .specialTopBox + .striplayer.beoff + .container.striplayer {background:none;box-shadow:none;}
 /* .specialTopBox .g1 .mediaBox .ico.play {top:30%;} */
 .specialTopBox .overBox {padding:1% 5%;}
 .specialTopBox.striplayer.inside .txtBox .maintitle{font-size:4rem;}

 .musicBox .gridBox .cell:nth-child(2n+1) {clear:both}
 .musicBox .mediaBox .ima {padding-top:70%}
 .musicBox .mediaBox .ima img {width:auto;height:100%}

 .musicBox.container .gridBox .mediaBox .ico.play:not(.vjs-control) .duration {top: 5.6rem;}
 .musicBox .mediaBox .ico.play:not(.vjs-control) img {margin-top: 1rem;}

}

@media only screen and (max-width:1023px){
.specialTopBox.striplayer.inside .notory .cell .overBox {position:relative;}
.striplayer.inside .notory .cell .overBox {padding:2rem 4rem 4rem 4rem;}
.striplayer.inside .txtBox, .striplayer.inside .auxBox,
.striplayer.inside:nth-child(even) .txtBox, .striplayer.inside:nth-child(even) .auxBox {padding:1rem;}

.striplayer.inside.container .notory .cell .mediaBox, .striplayer.inside .notory .cell .overBox {display:block;width:100%;}
.striplayer.inside:not(.specialTopBox) .mainBox:before {content:none;}
.striplayer.inside:not(.specialTopBox) .grid .mainBox .mediaBox .ico.play {left:50%;right:auto;}
.wrapper .wrapper.bodier .container.striplayer.inside:not(.specialTopBox) .gridBox .mediaBox .ima:before {content:"";display:block;width:200%;height:110%;position:absolute;top:-9%;left:-50%;z-index:2;box-shadow:inset 0 -1rem 5rem 4rem #fbf2d8;}
.container .g5 .audio_mod .txtBox .maintitle {font-size:2rem;}

.specialTopBox.striplayer.inside .txtBox .maintitle{font-size:3.4rem;}
.g1 .auxBox *{font-size:1.8rem;}

.musicBox .gridBox .cell:nth-child(2n+1){clear:both}
.musicBox .mediaBox .ima {padding-top:90%}
.musicBox .mediaBox .ima img {width:auto;height:100%}
/* .wrapper.bodier .musicBox.container:not(.bestClips) .grid .mediaBox .ico.play:not(.vjs-control) {top:50%;margin-top:-4em;} */
}