@charset 'UTF-8';
@import url('rtve.play.grids.basics.css');
@import url('rtve.play.radio.basics.css');

/*** MARCA RADIO ***/
.container.newRtveplayradioBox {position:relative;margin-top:4rem;}
.container.newRtveplayradioBox:before {content:'';
	background-repeat:no-repeat;background-size:100%;background-position:50%;
	background-image:url('https://css2.rtve.es/css/rtve.2021/i/rtve-logos/logos_cabeceras/logo_rneaudio-completo_color.svg');width:14.8rem;height:4rem;display:block;position:absolute;top:0.8rem;right:1.2rem;}
.bodier .newRtveplayradioBox .container .gridBox {padding:0;}

/* aspectos comunes */
.wariaType .controlBox, 
.goto_media .progressBar em,
.monoBox .icon-label.extra strong, 
.noticia .progressBar {display:none;}
.monoBox .mainBox {border-width:0.9rem;}
.trailerControls {position:absolute;right:0.3rem;}
.monoBox:not(.comp_nH) .cellBox .ima,.comp_xC .txtBox {border-radius:0.4rem;}
.monoBox:not(.comp_nH) .ima .i_back {transform:scale(1);opacity:1;transition:all 1s;}
.monoBox:not(.comp_nH) .active .ima .i_back {transform:scale(1.2);opacity:0.67;}
 
/** ICONOS CANALES ***********************/
/*****************************************/
.auxBox .canal {position:absolute;top:0;right:0.8rem;}
.auxBox .canal .rtve-icons {width:4rem;height:4rem;}
.active .auxBox .canal {opacity:0;} 

/** AJUSTES TIPOGRAFICOS ************************/
/************************************************/
.monoBox .txtBox .pretitle {font-weight:300;}
.monoBox .txtBox .pretitle,.monoBox .txtBox .pubBox * {font-size:1.3rem;letter-spacing:normal;text-transform:none;padding-top:0.4rem;}
.comp_xC .txtBox .maintitle,.monoBox .txtBox .pubBox .duration {font-weight:bold;}
.monoBox:not(.comp_nH,.comp_xH) .txtBox > strong {display:flex;flex-direction:column;}
	.monoBox:not(.comp_nH,.comp_xH) .maintitle {order:1;}
	.monoBox:not(.comp_nH,.comp_xH) .pretitle {order:2;}

/* carruseles finitos */
.collSet,.collSet .slideH > ul,.collSet .slideH li .mod {position:relative;}
.collSet .slideH {overflow-x:scroll;display:inline-block;width:100%;}
.collSet .slideH,.collSet .slideH > ul {display:inline-block;}
.JSfree .slideH {overflow-x:auto;overflow-y:hidden;}
.wariaType .controlBox span[role="button"] {width:4.6rem;}
.collSet .slideH > ul > li {float:left;}
.slideH > ul {left:0;transition:left 1s;}

/** LAYER OPCIONES ******************************/
/************************************************/
.icon-label.extra {width:3.6rem;height:3.6rem;cursor:pointer;opacity:0;}
.icon-label .rtve-icons {background-image:url('https://img2.rtve.es/css/rtve.2021/i/rtve-icons.svg/rtve-icon_options.svg');}
.icon-label strong {position:absolute;clip:rect(0,0,0,0);}
.active .icon-label.extra {opacity:1;}

/* capa opciones extra */
.monoBox .toolBox.be_on {width:calc(100% - 1.6rem);left:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 -0.4rem 0.8rem rgb(0,0,0,0.25);border-radius:0.4rem;}
	.monoBox .elem_xC .toolBox.be_on {height:100%;top:calc(50% + 0.8rem);transform:translate(-50%, -50%);}
	.monoBox .elem_nC .toolBox.be_on {height:auto;top:0.9rem;padding-top:calc(100% - 1.6rem);transform:translateX(-50%);}
		.monoBox .elem_nC .toolBox ul {position:absolute;left:0;top:0;width:100%;height:100%;padding:1.6rem 0.8rem;}
	
	.monoBox .elem_nH .toolBox.be_on {width:calc(120% - 2rem);height:calc(116% - 2rem);top:-0.8rem;left:-2.7rem;}
.mainSlide .pubBox,.mainSlide .auxBox {float:left;}
.monoBox .active ._info {left:1.6rem;top:50%;margin-top:-1.8rem;}

/* sombreado */
.monoBox .active .mod:not(.live) .ima:after {content:'';position:absolute;left:0;top:0;right:0;bottom:0;
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.67) 100%);
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.67) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.67) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 );
}

/* posicionamiento por capas */
.monoBox .active .mod:not(.live) .ima:after {z-index:1;}
.monoBox .content {z-index:1;}
.monoBox .active .ima {z-index:0;}
.monoBox .active .trailerContent {z-index:2;}
.collSet .slideH li {z-index:0;position:relative;}
.collSet .slideH .active {z-index:1;z-index:2;/*para no pisar las flechas del slide*/}

/** LAYER OPCIONES ******************************/
/*** END ****************************************/

/** EFECTOS COMUNES *****************************/
/************************************************/
/* estado reposo */
.monoBox .trailerControls,
.monoBox .icon-label.extra,
.monoBox .active .maintag,
.monoBox .goto_media:before {opacity:0;}
.monoBox .txtBox p:not(.legend) {overflow:hidden;height:0;opacity:0;padding:0;}

/* estado activo */
.monoBox .active .txtBox p:not(.legend) {height:6.3rem;opacity:1;}
.monoBox .active .trailerControls,
.monoBox .active .icon-label.extra,
.monoBox .active .goto_media:before {opacity:1;}
.monoBox .active:not(.relColl) .mainBox > *:not(.trailerControls) {transition-property:width,height,transform;transition-duration:0.3s;transition-delay:0.5s;}

/* solapamiento de capas */
.monoBox .mod > a:not(.goto_media) {z-index:0;}
.monoBox .content,.monoBox .goto_media {z-index:1;}
.monoBox .icon-label.extra,.monoBox .trailerControls {z-index:2;}

/** EFECTOS COMUNES *****************************/
/*** END ****************************************/
/** TIRAS CUADRADOS xC **************************/
/************************************************/
/*.comp_xC {width:2800%;}
.elem_xC {width:calc(100% / 42);}*/
.comp_xC {width:4133%;}
.elem_xC {width:calc(100% / 62);}
.elem_xC .mainBox {padding-top:100%;border-width:0;}
.elem_xC .content {position:absolute;z-index:1;width:100%;height:100%;}
.elem_xC .cellBox {padding:0.5rem;}
.elem_xC .cellBox .txtBox {padding:1.6rem;}
.elem_xC .icon-label.extra {bottom:2rem;right:2rem;}

/* barra de estado */
.elem_xC .goto_media {position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:calc(100% - 0.4rem);width:calc(100% - 1.8rem);}
.elem_xC .goto_media .rtve-icons {width:25%;padding-top:25%;;right:0.4rem;top:0.8rem;}
.elem_xC .goto_media .progressBar,
.elem_xC .goto_media .progressBar span {border-radius:0.3rem;height:0.6rem;display:inline-block;position:absolute;}
.elem_xC .goto_media .progressBar {bottom:-0.9rem;width:calc(100% - 2.4rem);left:50%;transform:translateX(-50%);overflow:hidden;background:#b9b9b9;opacity:1;z-index:2;}
.elem_xC .goto_media .progressBar span {left:0;background:rgba(0,0,0,0.5);box-shadow:0.4rem 0 1.2rem rgba(0,0,0,0.5);float:left;}
.elem_xC .goto_media .progressBar em {display:none;}

/* order */
.elem_xC .cellBox .txtBox strong {display:flex;flex-direction:column;}
	.elem_xC .cellBox .txtBox .character {order:2;}
	.elem_xC .cellBox .txtBox strong .maintitle {order:1;}

/* textos */
.elem_xC .cellBox .txtBox {display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;padding:1.6rem;line-height:2.2rem;color:#fff;}
.elem_xC .txtBox .character, .mainBox .txtBox .pubBox * {font-size:1.3rem;line-height:2.1rem;letter-spacing:normal;text-transform:none;padding-top:0.4rem;}
.elem_xC .txtBox .pretitle {position:absolute;clip:rect(0,0,0,0);}
.elem_xC .txtBox .character {font-weight:300;}
.elem_xC .txtBox .maintitle {font-size:1.8rem;line-height:2.2rem;font-weight:400;}
.elem_xC .txtBox .maintitle,.now_next .elem_xC .txtBox .pubBox .duration {font-weight:500;}

/** TIRAS CUADRADOS xC **************************/
/*** END ****************************************/


/** TIRAS CUADRADOS nC **************************/
/************************************************/
/*.comp_nC {width:2100%;}
.elem_nC {width:calc(100% / 42);}*/
.comp_nC {width:3100%;}
.elem_nC {width:calc(100% / 62);}
.elem_nC .txtBox p:not(.legend) {display:none;}
.comp_nC .mainBox .ima,.elem_nC .content {left:0;transform:none;}
.elem_nC .mainBox {display:flex;flex-direction:column;padding-top:0;}
.elem_nC .mainBox .ima {position:relative;padding-top:100%;order:1;top:0;}
.elem_nC .content {position:static;order:2;padding:1.2rem 0 1.2rem 0.8rem;}

/* texto */
.comp_nC .elem_nC .mod .txtBox {color:#302c2b;background:transparent;}
.elem_nC .txtBox .maintitle {font-size:1.6rem;line-height:2rem;font-weight:bold;}
.elem_nC .mainBox .content .txtBox .character {display:block;font-size:1.3rem;font-weight:bold;line-height:2rem;margin-top:0.5rem;}
.elem_nC .mainBox .content .pubBox {display:block;font-size:1.2rem;line-height:1.8rem;}
.elem_nC .serie_mod .mainBox .content .txtBox .pretitle,
.elem_nC .icon-label strong {position:absolute;clip:rect(0,0,0,0);}

.elem_nC .goto_media {position:absolute;top:0.9rem;left:0.9rem;width:calc(100% - 1.8rem);height:calc(100% - 1.8rem);}
.elem_nC .goto_media .progressBar {bottom:auto;top:0;margin-top:calc(100% - 1.6rem);width:calc(100% - 2.4rem);opacity:0;}
.elem_nC .goto_media .rtve-icons {width:34%;padding-top:34%;left:50%;top:0;margin-top:50%;transform:translate(-50%,-50%);}

/* estado activo */
.elem_nC.active .icon-label.extra {right:2rem;top:0.9rem;margin-top:calc(100% - 7.8rem);}
.collSet .slideH .elem_nC.active .icon-label.extra {bottom:39%;}
.collSet .elem_nC.active .cellBox .ima img {transform:scale(1.1);transition:all 0.5s;}
.elem_nC.active .goto_media .progressBar {opacity:1;}

/** TIRAS CUADRADOS nC **************************/
/*** END ****************************************/