@charset 'UTF-8';
@import url('rtve.player.ccttSel.basics.css');

/*posicion inicial*/
.ccttSel {z-index:1;}
.ccttSel.active {z-index:3;}
.vjs-error-display + .ccttSel {z-index:-1;}/*???*/
.ccttSel {position:absolute;left:0;bottom:0;opacity:0;}
.videoPlayer:hover .ccttSel,.ccttSel:hover,
.vjs-has-started.vjs-paused .ccttSel,.vjs-has-started.vjs-user-active .ccttSel {opacity:1;}


.ccttSel .open_close:after {content:'';background:#c80808;border:0.3rem solid #fff;width:0.8rem;height:0.8rem;border-radius:100%;
	position:absolute;left:1.4rem;top:calc(50% - 0.6rem);}
.ccttSel .open_close .rtve-icons {margin-left:-1.2rem;transform:rotate(90deg);}

.ccttSel {border-style:solid;border-color:transparent;border-width:1.2rem 4.8rem;}
.ccttSel:not(.active) {padding:0.4rem 4.8rem 0.4rem 6rem;height:7.2rem;}    


.ccttSel .open_close {cursor:pointer;}




.ccttSel:not(.active) [role="label"],.ccttSel:not(.active) [role="listbox"] {width:0;overflow:hidden;opacity:0;}
.ccttSel:not(.active):hover [role="label"],.ccttSel:not(.active):hover [role="listbox"],
.ccttSel:not(.active) [role="listbox"] > .active {width:20rem;opacity:1;}
.ccttSel:not(.active):hover .open_close .rtve-icons {left:calc(100% - 2.8rem);transform:rotate(0);}


/*posicion abierta*/

.ccttSel.active .open_close:before {bottom:0;top:auto;}
.ccttSel.active [role="label"] {width:26.4rem;bottom:2.4rem;bottom:1.5rem;left:6rem;position:absolute;}

.ccttSel.active [role="listbox"] {display:inline-block;padding:2.4rem;position:absolute;left:0;bottom:6.8rem;
	background:rgba(0,0,0,0.85);border:0.1rem solid #fff;}

@media only screen and (min-width:480px){
	
}
@media only screen and (min-width:768px){
	.ccttSel.active [role="listbox"] {columns:3;width:calc(100vw - 0.8rem);left:50%;transform:translateX(-50%);}
	.ccttSel.active [role="listbox"]:after,.ccttSel.active [role="listbox"]:before {left:50%;}
}
@media only screen and (min-width:1024px){
	.ccttSel.active [role="listbox"] {width:calc(100% + 9.6rem);}
	.ccttSel.active [role="listbox"]:after,.ccttSel.active [role="listbox"]:before {left:32rem;}
}
@media only screen and (min-width:1280px){
	.ccttSel.active [role="listbox"] {columns:4;}
}
@media only screen and (min-width:1440px){
	.ccttSel.active [role="listbox"] {columns:5;}
}
@media only screen and (min-width:1920px){
}	
	
.ccttSel.active [role="listbox"] > li {}
.ccttSel.active [role="listbox"] > li:hover {background-color:rgba(255,255,255,0.33);cursor:pointer;}
.ccttSel.active [role="listbox"] > li:hover strong {color:#fff;}
.ccttSel.active [role="listbox"] > li:hover:before {border:0.3rem solid #fff;margin:0;}

.ccttSel.active .open_close .rtve-icons {position:absolute;bottom:0.8rem;left:26.8rem;opacity:1;/*transform:rotate(0);*/}
.ccttSel.active .open_close .rtve-icons:hover {background-image:url('https://img2.rtve.es/css/rtve.2021/i/rtve-icons.svg/rtve-icon_close_circulo_FFFFFF.svg');
	background-size:100%;}


/*flechas*/
.ccttSel.active [role="listbox"]:after,
.ccttSel.active [role="listbox"]:before {position:absolute;bottom:0;border:0 solid transparent;content:'';height:0;width:0;}
.ccttSel.active [role="listbox"]:before {border-top-color:#fff;border-width:1.6rem 1.6rem 0 1.6rem;margin-left:-1.6rem;bottom:-1.6rem;}
.ccttSel.active [role="listbox"]:after {border-top-color:#000;border-width:1.4rem 1.4rem 0 1.4rem;margin-left:-1.4rem;bottom:-1.4rem;}





.ccttSel.minify {}

.ccttSel {transition:opacity 1s ease-in-out;}
.ccttSel .open_close .rtve-icons  {transition:transform 0.3s ease-in-out, left 1.3s ease-in-out;}
.ccttSel:not(.active),.ccttSel:not(.active) [role="label"],.ccttSel:not(.active) [role="listbox"] {transition:all 1s ease-in-out;}

.ccttSel:not(.active):hover .open_close:after,
.ccttSel.active .open_close:after {display:none;}
.ccttSel .open_close:after {animation-name:pulso_directo;animation-duration:2s;animation-iteration-count:infinite;}