@import url('rtve.play.radio.grids_directos.basics.css');

/** DIRECTOS CIRCULARES *************************/
/************************************************/
@media only screen and (min-width:480px) {.comp_circle.elem_06 {width:calc(6/3*100%);}}	
@media only screen and (min-width:768px) {.comp_circle.elem_06 {width:calc(6/4*100%);}}
@media only screen and (min-width:1024px){.comp_circle.elem_06 {width:calc(6/5*100%);}}
@media only screen and (min-width:1280px){.comp_circle.elem_06 {width:calc(6/6*100%);}}
@media only screen and (min-width:1440px){.comp_circle.elem_06 {width:calc(6/7*100%);}}
@media only screen and (min-width:1920px){.comp_circle.elem_06 {width:calc(6/8*100%);}}
/* textos */
.liveBox .elem_circle .txtBox {padding-top:1.2rem;width:120%;transform:translateX(-10%);}
.liveBox .elem_circle .nowLive .maintitle {font-size:1.7rem;line-height:2.1rem;font-weight:500;min-height:4.4rem;display:inline-block;}
.liveBox .elem_circle .nexLive {line-height:1.6rem;}
.liveBox .elem_circle .nexLive .maintitle {font-size:1.3rem;}
.liveBox .elem_circle .nexLive .datemi,.liveBox .elem_circle .nexLive .datemi:before {font-weight:500;}
.liveBox .elem_circle .nexLive .datemi {font-size:1.2rem;padding-right:0.4rem;}
.liveBox .elem_circle .nexLive .datemi:before {color:#a30950;content:"A continuaci\00F3n";clear:both;display:block;font-size:1.1rem;letter-spacing:0.5pt;text-transform:uppercase;}
/* iconos */
/*.elem_circle .auxBox:after {content:'';width:100%;height:100%;display:inline-block;position:absolute;left:0;top:0;background:red;}*/
.elem_circle .auxBox .canal {bottom:0.4rem;top:auto;right:50%;transform:translateX(50%);}
.elem_circle .auxBox .canal .rtve-icons {opacity:1;width:4.8rem;height:4.8rem;transition:all 0.3s;}
.elem_circle .auxBox:hover .canal .rtve-icons {width:3.6rem;height:3.6rem;margin-bottom:0.4rem;}
	.elem_circle .auxBox button {bottom:-2.4rem;width:4.8rem;height:4.8rem;opacity:0;
		background-repeat:no-repeat;background-position:50%;background-size:112%;}
	.elem_circle .auxBox:hover button {opacity:1;}
	.elem_circle button[name='audio_player'] {left:2.4rem;background-image:url('https://img2.rtve.es/css/rtve.2021/i/rtve-icons.svg/rtve-icon_playAudio_circulo.svg');}
	.elem_circle button[name='video_player'] {left:calc(100% - 2.4rem);background-image:url('https://img2.rtve.es/css/rtve.2021/i/rtve-icons.svg/rtve-icon_playVideo_circulo.svg');}
	.elem_circle .auxBox button:hover {background-color:#000;box-shadow:0 0.2rem 0.8rem 0.2rem rgba(0,0,0,0.34);cursor:pointer;}
	.elem_circle button[name='audio_player']:hover {background-image:url('https://img2.rtve.es/css/rtve.2021/i/rtve-icons.svg/rtve-icon_playAudio_circulo_masa.svg')}
	.elem_circle button[name='video_player']:hover {background-image:url('https://img2.rtve.es/css/rtve.2021/i/rtve-icons.svg/rtve-icon_playVideo_circulo_masa.svg')}
/*los circulares no tienen flechas*/
.liveBox .controlBox {display:none;}
.liveBox .slideH > .comp_circle {overflow-x:auto;display:inline-flex;min-width:100%;}
.liveBox .elem_circle {width:20rem;}
.liveBox .comp_circle .cellBox {width:16rem;}
@media all and (min-width:1280px){
	.liveBox .comp_circle {justify-content:center;}
}
/** DIRECTOS CIRCULARES *************************/
/*** END ****************************************/



/** NUEVA FORMULACION DE DIRECTOS UNITARIOS *****/
/************************************************/

[data-tipo*='live-grid'] .grid .collSet {padding:0 4rem;}

/*estructura*/
[data-tipo*='live-grid'] .monoBox[class*='elem'] .txtBox {width:calc(50% + 0.8rem);padding:1.2rem 1.6rem 0.8rem 1.6rem;}
[data-tipo*='live-grid'] .monoBox[class*='elem'] .ima {width:calc(50% - 0.8rem);padding-top:calc((56.25% - 0.8rem) / 2);min-height:16rem;}
[data-tipo*='live-grid'] .monoBox[class*='elem'] .next_live .butt {left:0.8rem;top:0.8rem;width:calc(100% - 1.6rem);height:calc(100% - 1.6rem);}
[data-tipo*='live-grid'] .monoBox[class*='elem'] .next_live .butt > a {cursor:pointer;}

/*limites verticales*/
[data-tipo*='live-grid'] .monoBox:not(.elem1) .maintitle {max-height:calc(7.8rem + 0.4rem);overflow:hidden;}

@media all and (max-width:1024px){
	[data-tipo*='live-grid'] .monoBox[class*='elem'] {flex-direction:column;align-items:center;}
	[data-tipo*='live-grid'] .monoBox[class*='elem'] .elem_nH {width:100%;}
	[data-tipo*='live-grid'] .monoBox[class*='elem'] .txtBox {padding-top:4rem;}
	[data-tipo*='live-grid'] .monoBox[class*='elem'] .iplay_video strong {left:0.8rem;top:0.8rem;}
	}
@media all and (min-width:1025px){
	[data-tipo*='live-grid'] .monoBox.elem1 .txtBox {padding-top:4rem;}
	[data-tipo*='live-grid'] .monoBox.elem1 .iplay_video strong {left:0.8rem;top:0.8rem;}
	[data-tipo*='live-grid'] .monoBox:not(.elem1) .next_live .maintag,
	[data-tipo*='live-grid'] .monoBox:not(.elem1) .iplay_video strong {left:calc(50% + 1.2rem);top:0.6rem;}
	[data-tipo*='live-grid'] .monoBox.elem1 .elem_nH {width:100%;max-width:120rem;}
	[data-tipo*='live-grid'] .monoBox.elem1 .elem_nH .mainBox .ima {width:calc(25% - 1.2rem);padding-top:calc(56.25% / 4);}
	[data-tipo*='live-grid'] .monoBox.elem1 .auxBox {width:calc(25% + 0.4rem);height:100%;
		background:linear-gradient(-90deg,rgba(0,0,0,0.34),rgba(0,0,0,0) 90%);
		position:absolute;top:0;left:calc(50% + 0.8rem);}
	[data-tipo*='live-grid'] .monoBox.elem1 .elem_nH .canal {width:100%;height:100%;left:0;}
	[data-tipo*='live-grid'] .monoBox.elem1 .elem_nH .canal .rtve-icons {top:auto;right:0;top:50%;transform:translateY(-50%);}
	}

/*solo Qatar2022*/
[data-tipo*='live-grid'] .monoBox:not(.elem1) .elem_nH .rne-qatar2022 .txtBox {padding-top:1.2rem;}
[data-tipo*='live-grid'] .monoBox:not(.elem1) .elem_nH .rne-qatar2022 .txtBox p {opacity:1;position:inherit;background:inherit;padding:inherit;color:inherit;text-align:inherit;width:inherit;}
[data-tipo*='live-grid'] .monoBox:not(.elem1) .elem_nH .rne-qatar2022 .canal {background:none;overflow:hidden;z-index:2;width:12.5%;height:auto;padding-top:12.5%;top:50%;left:calc(75% + 0.4rem);transform:translate(-50%,-50%);}
[data-tipo*='live-grid'] .monoBox[class*='elem'] .elem_nH .rne-qatar2022 .canal .rtve-icons {background-image:url('https://css2.rtve.es/css/rtve.directos/logos_cadenas/rne-qatar2022.svg');}
[data-tipo*='live-grid'] .monoBox:not(.elem1) .elem_nH .rne-qatar2022 .canal .rtve-icons {width:100%;height:100%;transform:translate(-50%,-50%);}
[data-tipo*='live-grid'] .monoBox:not(.elem1) .rne-qatar2022.next_live .maintag,
[data-tipo*='live-grid'] .monoBox:not(.elem1) .rne-qatar2022 .iplay_video strong {left:calc(75% + 0.4rem);transform:translateX(-50%);}
@media all and (max-width:1024px){
[data-tipo*='live-grid'] .monoBox.elem1 .elem_nH .rne-qatar2022 .txtBox {padding-top:1.2rem;}
[data-tipo*='live-grid'] .monoBox.elem1 .elem_nH .rne-qatar2022 .txtBox p {position:inherit;background:inherit;padding:inherit;color:inherit;text-align:inherit;width:inherit;}
[data-tipo*='live-grid'] .monoBox.elem1 .elem_nH .rne-qatar2022 .canal {background:none;overflow:hidden;z-index:2;width:12.5%;height:auto;padding-top:12.5%;top:50%;left:calc(75% + 0.4rem);transform:translate(-50%,-50%);}	
[data-tipo*='live-grid'] .monoBox.elem1 .elem_nH .rne-qatar2022 .canal .rtve-icons {width:100%;height:100%;transform:translate(-50%,-50%);}
[data-tipo*='live-grid'] .monoBox.elem1 .rne-qatar2022.next_live .maintag,
[data-tipo*='live-grid'] .monoBox.elem1 .rne-qatar2022 .iplay_video strong {left:calc(75% + 0.4rem);transform:translateX(-50%);}
}


/** NUEVA FORMULACION DE DIRECTOS UNITARIOS *****/
/** END *****************************************/


/** DIRECTOS RADIO / VERSION CIRCULAR UNITARIOS */
/************************************************/
/*general*/
.nextLive .comp_circle [class*='elem_'] {display:inline-block;}
.nextLive .comp_circle .mainBox {display:flex;flex-direction:row;align-items:center;}
.nextLive .comp_circle .mainBox .content {display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:60%;padding:0 1.5rem;}
.nextLive .comp_circle .mainBox .txtBox .pretitle {display:block;padding:0.8rem 0;font-size:1.2rem;line-height:1.6rem;font-weight:bold;text-transform:uppercase;opacity:0.67;}
.nextLive .comp_circle .mainBox .txtBox .maintitle {font-size:2rem;line-height:2.4rem;}
.nextLive .comp_circle .mainBox .txtBox p {font-size:1.4rem;font-weight:300;line-height:1.8rem;padding-top:0.8rem;}
.nextLive .comp_circle .ima {width:40%;padding-top:40%;}
.nextLive .comp_circle .mainBox .auxBox {display:none;}
/*order*/
.nextLive .comp_circle .mainBox .content {order:2;}
.nextLive .comp_circle .mainBox .content .txtBox {order:2;}
.nextLive .comp_circle .mainBox .content .ima {order:1;} 
/*now live*/
.nextLive .comp_circle .elem_circle .ima {border-radius:100%;border:1rem solid #F61606;padding-top:calc(40% - 2rem)}
/*future live*/
.nextLive .comp_circle .elem_future .ima {border-radius:100% 0 0 100%;}
/*maintag*/
.nextLive .comp_circle .maintag {position:relative;height:2.6rem;}
.nextLive .comp_circle .elem_future .maintag {position:relative;background:#fff;border-radius:0.2rem;border:0.1rem solid #111;}
.nextLive .comp_circle .elem_future .maintag > * {font-size:1.2rem;font-weight:500;text-transform:uppercase;letter-spacing:0.5pt;line-height:1.8rem;
	    padding: 0.3rem 0.8rem;color:#111;}
.nextLive .comp_circle .elem_future .maintag > strong {color:#a30950;padding-left:2.3rem;}
.nextLive .comp_circle .elem_future .maintag > span {border-left:0.1rem solid #efe9e6;background-color:#DCDDDE;}
.nextLive .comp_circle .maintag > strong:after, 
.nextLive .comp_circle strong.maintag:after  {content:'';position:absolute;display:block;width:1rem;height:1rem;font-size:0;top:50%;left:0.8rem;transform:translateY(-50%);
	background-color:#F61606;border-radius:100%;}
.nextLive .comp_circle strong.maintag:after {border:0.1rem solid #fff;}
.nextLive .comp_circle strong.maintag span {padding-left:2.4rem;}
/*numero elementos*/
.nextLive .hiveBox.slideH {padding:0;overflow-x:scroll;}
.nextLive .comp_circle.elem_06 .cellBox {max-width:none;}
@media all and (min-width:450px){
	.nextLive .comp_circle.elem_01 {width:100%;}
	.nextLive .comp_circle.elem_01 li {width:calc(100% / 1);}
	.nextLive .comp_circle.elem_02 {width:200%;}
	.nextLive .comp_circle.elem_02 li {width:calc(100% / 2);}
	.nextLive .comp_circle.elem_03 {width:250%;}
	.nextLive .comp_circle.elem_03 li {width:calc(100% / 3);} 
	.nextLive .comp_circle.elem_04 {width:300%;} 
	.nextLive .comp_circle.elem_04 li {width:calc(100% / 4);}
	.nextLive .comp_circle.elem_05 {width:350%;} 
	.nextLive .comp_circle.elem_05 li {width:calc(100% / 5);}
	.nextLive .comp_circle.elem_06 {width:400%;} 
	.nextLive .comp_circle.elem_06 li {width:calc(100% / 6);}
	.nextLive .comp_circle.elem_07 {width:450%;}
	.nextLive .comp_circle.elem_07 li {width:calc(100% / 7);} 
	.nextLive .comp_circle.elem_08 {width:500%;} 
	.nextLive .comp_circle.elem_08 li {width:calc(100% / 8);}
}
@media all and (min-width:700px){
	.nextLive .comp_circle.elem_01 {width:100%;}
	.nextLive .comp_circle.elem_01 li {width:calc(100% / 2);}
	.nextLive .comp_circle.elem_02 {width:100%;}
	.nextLive .comp_circle.elem_02 li {width:calc(100% / 2);}
	.nextLive .comp_circle.elem_03 {width:150%;}
	.nextLive .comp_circle.elem_03 li {width:calc(100% / 3);} 
	.nextLive .comp_circle.elem_04 {width:200%;} 
	.nextLive .comp_circle.elem_04 li {width:calc(100% / 4);}
	.nextLive .comp_circle.elem_05 {width:250%;} 
	.nextLive .comp_circle.elem_05 li {width:calc(100% / 5);}
	.nextLive .comp_circle.elem_06 {width:300%;} 
	.nextLive .comp_circle.elem_06 li {width:calc(100% / 6);}
	.nextLive .comp_circle.elem_07 {width:350%;}
	.nextLive .comp_circle.elem_07 li {width:calc(100% / 7);} 
	.nextLive .comp_circle.elem_08 {width:400%;} 
	.nextLive .comp_circle.elem_08 li {width:calc(100% / 8);}
}
@media all and (min-width:960px){
	.nextLive .comp_circle.elem_01 {width:100%;}
	.nextLive .comp_circle.elem_01 li {width:calc(100% / 2.5);}
	.nextLive .comp_circle.elem_02 {width:100%;}
	.nextLive .comp_circle.elem_02 li {width:calc(100% / 2.5);}
	.nextLive .comp_circle.elem_03 {width:120%;}
	.nextLive .comp_circle.elem_03 li {width:calc(100% / 3);} 
	.nextLive .comp_circle.elem_04 {width:160%;} 
	.nextLive .comp_circle.elem_04 li {width:calc(100% / 4);}
	.nextLive .comp_circle.elem_05 {width:200%;} 
	.nextLive .comp_circle.elem_05 li {width:calc(100% / 5);}
	.nextLive .comp_circle.elem_06 {width:240%;} 
	.nextLive .comp_circle.elem_06 li {width:calc(100% / 6);}
	.nextLive .comp_circle.elem_07 {width:280%;}
	.nextLive .comp_circle.elem_07 li {width:calc(100% / 7);} 
	.nextLive .comp_circle.elem_08 {width:320%;} 
	.nextLive .comp_circle.elem_08 li {width:calc(100% / 8);}
}
@media all and (min-width:1350px){
	.nextLive .comp_circle.elem_01 {width:100%;}
	.nextLive .comp_circle.elem_01 li {width:calc(100% / 3);}
	.nextLive .comp_circle.elem_02 {width:100%;}
	.nextLive .comp_circle.elem_02 li {width:calc(100% / 3);}
	.nextLive .comp_circle.elem_03 {width:100%;}
	.nextLive .comp_circle.elem_03 li {width:calc(100% / 3);} 
	.nextLive .comp_circle.elem_04 {width:133%;} 
	.nextLive .comp_circle.elem_04 li {width:calc(100% / 4);}
	.nextLive .comp_circle.elem_05 {width:166%;} 
	.nextLive .comp_circle.elem_05 li {width:calc(100% / 5);}
	.nextLive .comp_circle.elem_06 {width:200%;} 
	.nextLive .comp_circle.elem_06 li {width:calc(100% / 6);}
	.nextLive .comp_circle.elem_07 {width:233%;}
	.nextLive .comp_circle.elem_07 li {width:calc(100% / 7);} 
	.nextLive .comp_circle.elem_08 {width:266%;} 
	.nextLive .comp_circle.elem_08 li {width:calc(100% / 8);}
}
@media all and (min-width:1650px){
	.nextLive .comp_circle.elem_01 {width:100%;}
	.nextLive .comp_circle.elem_01 li {width:calc(100% / 4);}
	.nextLive .comp_circle.elem_02 {width:100%;}
	.nextLive .comp_circle.elem_02 li {width:calc(100% / 4);}
	.nextLive .comp_circle.elem_03 {width:100%;}
	.nextLive .comp_circle.elem_03 li {width:calc(100% / 4);} 
	.nextLive .comp_circle.elem_04 {width:100%;} 
	.nextLive .comp_circle.elem_04 li {width:calc(100% / 4);}
	.nextLive .comp_circle.elem_05 {width:125%;} 
	.nextLive .comp_circle.elem_05 li {width:calc(100% / 5);}
	.nextLive .comp_circle.elem_06 {width:150%;} 
	.nextLive .comp_circle.elem_06 li {width:calc(100% / 6);}
	.nextLive .comp_circle.elem_07 {width:175%;}
	.nextLive .comp_circle.elem_07 li {width:calc(100% / 7);} 
	.nextLive .comp_circle.elem_08 {width:200%;} 
	.nextLive .comp_circle.elem_08 li {width:calc(100% / 8);}
}
/** DIRECTOS RADIO ******************************/
/*** END ****************************************/