/****************** WIDGET PANE ************/
.widgetPane{ padding-top:40px; font-family: 'Open Sans'; font-size: 14px; z-index: 1; text-align: left; overflow:hidden; background:rgba(40,40,40,.9)} 
.widgetPane .titles{ box-sizing: border-box; list-style: none; padding: 0; margin:0; position:absolute; top:0;right:17px; height:40px; z-index:2}
.widgetPane .titles li{ padding:5px; height:auto; line-height:inherit}
/*.widgetPane .titles li:hover{ opacity:.6}
.widgetPane .titles li.activeWidget{ opacity:.4}*/
.widgetPane .widgets{ box-sizing: border-box; overflow: hidden; width: 100%; height: auto; clear:both; padding-top:20px; padding-bottom: 20px;}
.widgetPane .widgets section{ box-sizing: border-box; display: none; /*overflow: auto; background-color: #222;*/ width: 100%; height: 100%;}
.widgetPane .widgetTitle{ top:0; left:0; width:100%; padding:15px; font-family: 'open_sansregular',Arial, Helvetica, sans-serif;font-weight: normal; font-size:15px; color:#FFF;  background-color:#1c1c1c}

::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background-color: #2d2c2c;} 
::-webkit-scrollbar-thumb {background-color: #6f6f6f;} 
.widgetPane .widgets section.activeWidget{ display:block; margin-top: 2%;}
.widgetPane .titles li.activeWidget { }
.widgetPane .titles li {box-sizing: border-box; margin: 0;font-size: .8em; height: auto; cursor: pointer; display:inline; float:left;min-width:0; padding:3px; text-align: center; line-height: 40px;}
/*.widgetPane .titles li:last-child{ display:none;}*/ /* --> PER TREURE SCENES */
.player-ejercicio .widgetPane .titles li:nth-child(3){ display: none;}

.widgetPane > ul {height: 12%; position: relative; /*background-color: #222;*/}
#image {position: absolute; bottom: 0; right:10px;}
.widgetTitle{position: absolute; top: 30px; right: 10px;font-size: 1.5em}

/****************** SLIDES WIDGET ************/
.widgetPane .slidesWidget{ position: relative; height: 100%;}
.widgetPane .slidesWidget ul{ list-style: none; margin: 0; padding: 0; height: 100%; overflow: auto;}
.widgetPane .slidesWidget .slidesHolder li{ margin:0; padding:0; height: 100%; line-height: 100%; text-align: center; display:none; cursor: pointer;}
.widgetPane .slidesWidget .slidesHolder li:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.001em;}
.widgetPane .slidesWidget .slidesHolder li img{ max-width: 100%; max-height: 100%; vertical-align: middle;}
.widgetPane .slidesWidget .slidesHolder li.active{}
.widgetPane .slidesWidget .previous, .widgetPane .slidesWidget .next{ box-sizing: border-box; line-height: 30px; position: absolute; border: 1px #666 solid; color: #DDD; font-weight: bold; padding: 0 5px; vertical-align: middle; background-color: #555; cursor: pointer; background-image: linear-gradient(to top, #333, #555); background-image: -webkit-linear-gradient(to top, #333, #555); background-image: -moz-linear-gradient(to top, #333, #555); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
.widgetPane .slidesWidget .previous{ left:-2px;}
.widgetPane .slidesWidget .next{ right:-2px;}

/****************** SLIDES INDEX WIDGET ************/
.widgetPane .slidesIndexWidget{ position: relative; height: 100%;}
.widgetPane .slidesIndexWidget ul{ text-align:center; list-style: none; margin: 0; padding: 0; height: 100%; overflow: auto;}
.widgetPane .slidesIndexWidget .slidesHolder li{ display: inline-block; margin:5px; padding:0; height: 140px; width: 100%; line-height: 140px;  cursor: pointer;}
.widgetPane .slidesIndexWidget .slidesHolder li:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.001em;}
.widgetPane .slidesIndexWidget .slidesHolder li img{ max-width: 100%; max-height: 100%; vertical-align: middle;}
.widgetPane .slidesIndexWidget .slidesHolder li.active{ background-color: #444;}

/****************** SCENES WIDGET ************/
.widgetPane .scenesWidget{ position: relative; height: 100%; overflow: auto;}
.widgetPane .scenesWidget .scenesHolder{ padding:0 0 0 10%}
.widgetPane .scenesWidget .scenesHolder .scene { text-align:left; list-style: none;  margin:2%; display:inline-table; width: 40%;padding:5px;  height:100%; overflow: auto; cursor: pointer; border:1px solid #b7b7b7; float:initial; }
.widgetPane .scenesWidget .scenesHolder .scene  img{ width: 100%; max-height: 100%;}
.widgetPane .scenesWidget .scenesHolder .scene .cubre { background-color: #282828; padding: 5px; height:45px; overflow:hidden;}
.widgetPane .scenesWidget .scenesHolder .scene .cubre span { max-width: 100%; max-height: 100%; font-size: 12px; font-family:'Open Sans'}
.widgetPane .scenesWidget .scenesHolder .scene.active { border-color:#cde315}
.widgetPane .scenesWidget .scenesHolder .scene.active .cubre{background-color: #181818;}
.widgetPane .scenesWidget .scenesHolder .scene.active .cubre span{color:#fff}

/****************** CHARACTERS WIDGET ************/
.widgetPane .charactersWidget{ position: relative; height: 100%; overflow: hidden;}
.widgetPane .charactersWidget .textHolder{ display:block; height:100%; overflow:auto;}
.widgetPane .charactersWidget .textHolder p{ line-height: 1.425em; padding: 8px; margin: 0; cursor:auto; color:#FFF}
.widgetPane .charactersWidget .textHolder p.name{ font-size: 1.1em;}
.widgetPane .charactersWidget .textHolder .presentation {display: inline-block;width:60px; height: 60px; margin: 0 1%; border-radius: 150px; -moz-border-radius: 150px; -webkit-border-radius: 150px; position: relative;border:2px solid #252626}
.widgetPane .charactersWidget .textHolder .presentation .image{ position:relative; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; overflow:hidden;}
.widgetPane .charactersWidget .textHolder .presentation .img-presentation {width: 100%; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; cursor:pointer;}
.widgetPane .charactersWidget .textHolder .presentation.activeItem { border: 2px solid #cbe215 }
.widgetPane .charactersWidget .textHolder .presentation.activeItem .name_img p{ color:#cbe215 }
.widgetPane .charactersWidget .textHolder .presentation .name_img  p {padding: 8px 2px; height: 40px; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: -moz-pre-wrap; white-space: -hp-pre-wrap; word-wrap: break-word; font-size:11px}
/* descomentamos de la siguiente linea   box-shadow: 0px 1px 0px rgba(255,255,255,.2);*/
/*.widgetPane .charactersWidget .textHolder .entry .characters{ min-height: 150px; box-shadow: 0px 1px 0px rgba(255,255,255,.2);} */
.widgetPane .charactersWidget .textHolder .entry .characters img{width: 100%; -webkit-border-radius:65px; -moz-border-radius:65px; -webkit-border-radius:65px; }
.widgetPane .charactersWidget .textHolder .entry .characters .name{font-size:17px; font-family:'Open Sans'; line-height:20px; padding:0; font-weight:400;}
.widgetPane .charactersWidget .textHolder .entry .characters .description{font-size:14px; line-height:17px; font-family:'Open Sans'; font-weight:100;  padding:0;}

#actors_list{position: relative; border-bottom: 1px solid #181818;}
#head_characters{overflow-x: hidden; overflow-y: hidden; white-space: nowrap; width: 80%; margin: 0 auto; margin-bottom: 3%; position: relative;padding-top: 1px; height: 100px;}
#flecha_izq {position: absolute; top: 22%; left: 3%; cursor:pointer;}
#flecha_dch {position: absolute; top: 22%; left: 93%; cursor:pointer;}
#head_characters .name_img{position: absolute; top: 100%; left: 0%;font-size: 0.75em; width: 100%; text-align: center;} 
.entry{margin-top: 5%;}

/****************** VOCABULARY WIDGET ************/
.widgetPane .vocabularyWidget{ position: relative; height: 100%; overflow: hidden;}
.widgetPane .vocabularyWidget .textHolder{ display:block; max-height: 400px; overflow-y: scroll;  padding: 0 15px; /*height: calc(100% - 40px);*/}
.word{ margin:0 2% ; padding:3% 0; border-bottom:1px solid #000; position: relative;}
.word .term{ font-weight:300; color:#cee414; font-size:17px; font-family:'Open Sans';}
.word .term span { color:#FFF;}
.word .def{ font-size:14px; line-height:17px;}

/****************** SINOPSIS WIDGET ************/
.widgetPane .sinopsisWidget{ position: relative; height: 100%; overflow: hidden;}
.widgetPane .sinopsisWidget .textHolder{ display:block; height:100%; overflow:auto; /*background-color: #000;*/}
.widgetPane .sinopsisWidget .textHolder p.name{ font-size: 1em;}
.widgetPane .sinopsisWidget .textHolder p {line-height:17px; font-size:14px; font-weight:100; margin: 0; cursor: auto; color:#FFF;}
.widgetPane .sinopsisWidget .textHolder .sinopsis-txt{ line-height: .9em; padding-left: 0px; color:#FFF;}
.widgetPane .sinopsisWidget .textHolder .sinopsis-txt h1{ font-size: 17px; margin-top: 2%; line-height: 20px;color:#FFF; font-weight:400}
.widgetPane .sinopsisWidget .textHolder .sinopsis-txt h3{ font-size: 1.125em; margin-bottom: 2%;font-family:'Open Sans'}
.widgetPane .sinopsisWidget .textHolder .sinopsis-txt h6{ font-size: 1em;}
.widgetPane .sinopsisWidget .textHolder .sinopsis-parrafo{ margin-top: 3%;}


/****************** TRANSCRIPTION WIDGET ************/
.widgetPane .transcriptionWidget{ position: relative; height: 100%; overflow: hidden;}
.widgetPane .transcriptionWidget .textHolder{ display:block; overflow-y:scroll; overflow-x:hidden; padding: 15px; height: 100%;}
.widgetPane .transcriptionWidget .textHolder div {display: inline-block; width: 100%; }
.widgetPane .transcriptionWidget .textHolder div .transc_image{display: inline;}
.widgetPane .transcriptionWidget .textHolder .left {float:right;display: inline;width: calc(100% - 129px); padding-right: 23px;}
.widgetPane .transcriptionWidget .textHolder .transc_image img{ width:70px; margin:0 10px 10px 10px; background-color: white;border: 1px solid black;border-radius: 150px; -moz-border-radius: 150px; -webkit-border-radius: 150px;}

.widgetPane .transcriptionWidget .textHolder .right {float:left;display: inline;width: calc(100% - 126px);}
.widgetPane .transcriptionWidget .textHolder .right img{ float:right; width:50px; margin-right:8px;}
.widgetPane .transcriptionWidget .textHolder p:after{ content:" "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}

.widgetPane .transcriptionWidget .textHolder .text {margin-bottom:35px}
.widgetPane .transcriptionWidget .textHolder .text .transc_paragraph{font-family: 'open_sansregular',Arial, Helvetica, sans-serif;font-weight: normal;color: #222222;font-size: 13px;line-height: 1.4;text-align: left;}
.widgetPane .transcriptionWidget .textHolder .text.left { background: url(img/globo-izq.png) no-repeat top left; padding-left:14px;}
.widgetPane .transcriptionWidget .textHolder .active .text.left{ background-image: url(img/globo-izq-on.png);}
.widgetPane .transcriptionWidget .textHolder .text.left .transc_paragraph{border-top:2px solid #6a6868;border-bottom:2px solid #6a6868;border-right:2px solid #6a6868; color:#FFF;padding:10px;}
.widgetPane .transcriptionWidget .textHolder .active .text.left .transc_paragraph{border-color:#cde315; color:#000; background-color: #FFF;}

.widgetPane .transcriptionWidget .textHolder .text.right { background: url(img/globo-der.png) no-repeat top right; padding-right:13px;}
.widgetPane .transcriptionWidget .textHolder .active .text.right{  background-image: url(img/globo-der-on.png); }
.widgetPane .transcriptionWidget .textHolder .text.right .transc_paragraph{border-top:2px solid #6a6868;border-bottom:2px solid #6a6868;border-left:2px solid #6a6868; color:#FFF; padding:10px;}
.widgetPane .transcriptionWidget .textHolder .active .text.right .transc_paragraph{border-color:#cde315; color:#000; background-color: #FFF;}

.widgetPane .transcriptionWidget .textHolder .found{ box-shadow: 0 0 10px #ff0; background-color: #ff0; font-weight: bold; color: #333;}
.widgetPane .transcriptionWidget .controlBar{ display: none;}

/****************** TOPICS WIDGET ************/
.widgetPane .topicWidget{ position: relative; height: 100%; overflow: hidden;}
.widgetPane .topicWidget .textHolder{ display:block; height:100%; overflow:auto;}
.widgetPane .topicWidget .textHolder p{ font-size: 0.8em; padding: 8px; border: 1px #444 solid; margin: 0; cursor: pointer;}
.widgetPane .topicWidget .textHolder p:hover{ background-color: #444;}
.widgetPane .topicWidget .textHolder p .text{}
.widgetPane .topicWidget .textHolder p .time{ float:right;}
.widgetPane .topicWidget .textHolder p.active{ background-color: #444;}

/****************** CHARACTERS WIDGET ************/
.characters .topicWidget{ position: relative; height: 100%; overflow: hidden;}
.widgetPane .topicWidget .textHolder{ display:block; height:100%; overflow:auto;}
.widgetPane .topicWidget .textHolder p{ font-size: 0.8em; padding: 8px; border: 1px #444 solid; margin: 0; cursor: pointer;}
.widgetPane .topicWidget .textHolder p:hover{ background-color: #444;}
.widgetPane .topicWidget .textHolder p .text{}
.widgetPane .topicWidget .textHolder p .time{ float:right;}
.widgetPane .topicWidget .textHolder p.active{ background-color: #444;}

/****************** WIDGET GENERIC CONTROL BAR ************/

/* Comentamos esto para que no salga el buscador que no sabemos quien lo ha puesto
.widgetPane .controlBar{ position: absolute; bottom: 0; height: 30px; width: 100%; padding: 0; box-sizing: border-box; border-right: 1px #333 double; border-left: 1px #333 double; background-color: #444; background-image: linear-gradient(to top, #333, #555); background-image: -webkit-linear-gradient(to top, #333, #555); background-image: -moz-linear-gradient(to top, #333, #555);}
.widgetPane .controlBar button{ background-color: none; font-size: 15px; color: #FFF; border: none; display: inline-block; border-right: 1px #333 double; border-left: 1px #333 double; cursor:pointer; margin: 0; width: 30px; height: 100%; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none;}
.widgetPane .controlBar button.search{ border-radius: 10px; height: 20px; margin: 5px 4px 0 0; background-color: #757575; }
.widgetPane .controlBar .link{ background-color: #400; font-size: 19px; color: #DDD; background: linear-gradient(to top, #300, #500); background: -webkit-linear-gradient(to top, #300, #500); background: -moz-linear-gradient(to top, #300, #500);}
.widgetPane .controlBar .link.linked{ background-color: #040; background: linear-gradient(to top, #030, #050); background: -webkit-linear-gradient(to top, #030, #050); background: -moz-linear-gradient(to top, #030, #050);}
.widgetPane .controlBar .searchField{ margin: 5px;}
.widgetPane .controlBar .search{ width: auto;}
*/

@media only screen and (max-width: 1200px) {

	

}

@media only screen and (max-width: 1024px) {
	.widgetPane .transcriptionWidget{ position: relative; height: 423px; overflow: hidden;}
	.widgetPane .vocabularyWidget{ position: relative; height: 423px; overflow: hidden;}
	.widgetPane .scenesWidget{ position: relative; height: 423px; overflow: hidden;}
	.widgetPane .sinopsisWidget{ position: relative; height: 423px; overflow: hidden;}
	.widgetPane .charactersWidget{ position: relative; height: 423px; overflow: hidden;}
	.widgetPane {height: 460px};
}

@media only screen and (max-width: 992px) {

	#intro-light {
		 padding: 0%; 
	}

	/* Redimensionar el player y las pestañas del player */
	#player{
		width: 100%!important;
		display: inline !important;
		float: left!important;
	}
	.widgetPane {
		width: 100% !important;
		float: left!important;
		position: relative!important;
		left: 0 !important;
		margin-top: 90px;
		top: 100% !important;
		height: auto !important;
		padding-bottom: 15px;
	}

	.widgetPane .titles {
		margin: 0;
	}
	.widgetPane .titles li {
		padding: 15px;
	}

	.widgetPane .sinopsisWidget .textHolder .sinopsis-txt {
		padding-top: 0;
	}

	.widgetPane .sinopsisWidget .textHolder .sinopsis-img{
		padding-top: 0;
	}

	.widgetPane .sinopsisWidget .textHolder .sinopsis-txt h1{
		font-size: 2.5em;
		margin-top: 5%;
		line-height: 50px
	}
	.widgetPane .titles li{padding:5px !important}
}


@media only screen and (max-width: 768px) {

	#player{
		width: 100%!important;
		display: inline !important;
		float: left!important;
	}
	.widgetPane {
		width: 100% !important;
		display: inline !important;
		float: left!important;
		top: 100% !important;
		position: relative!important;
		left: 0 !important;
		height: 300px;
		margin-top: 120px;
	}
	
	.widgetPane .transcriptionWidget{ position: relative; height: 300px; overflow: hidden;}
	.widgetPane .vocabularyWidget{ position: relative; height: 300px; overflow: hidden;}
	.widgetPane .scenesWidget{ position: relative; height: 300px; overflow: hidden;}
	.widgetPane .sinopsisWidget{ position: relative; height: 300px; overflow: hidden;}
	.widgetPane .charactersWidget{ position: relative; height: 300px; overflow: hidden;}
	
	.widgetPane .titles {
		margin-left:0px;
	}

	.player-inner{
		padding-left: 0;
		padding-right: 0;
	}
	


}	

@media only screen and (max-width: 640px) {

	#player{
		width: 100%!important;
		display: inline !important;
		float: left!important;
	}
	.widgetPane {
		width: 100% !important;
		display: inline !important;
		float: left!important;
		position: relative!important;
		top: 100% !important;
		left: 0 !important;
		height: auto !important;
	}

	.widgetPane .transcriptionWidget{ position: relative; height: 300px; overflow: hidden;}
	.widgetPane .vocabularyWidget{ position: relative; height: 300px; overflow: hidden;}
	.widgetPane .scenesWidget{ position: relative; height: 300px; overflow: hidden;}
	.widgetPane .sinopsisWidget{ position: relative; height: 300px; overflow: hidden;}
	.widgetPane .charactersWidget{ position: relative; height: 300px; overflow: hidden;}

	
	.widgetPane .sinopsisWidget .textHolder .sinopsis-img {
		padding-top: 0%;
		
	}

	.widgetPane .sinopsisWidget .textHolder .sinopsis-txt {
		padding-left: 14px;
		padding-top: 5%;
	}

	#player-wrp {
		padding-bottom: 10px !important;
	}

	.widgetPane .sinopsisWidget .textHolder .sinopsis-txt h1{
		font-size: 1.75em;
		margin-top: 0;
		line-height: 30px
	}
	
}	

@media only screen and (max-width: 480px) {

	#player{
		width: 100%!important;
		display: inline !important;
		float: left!important;
	}
	.widgetPane {
		width: 100% !important;
		display: inline !important;
		float: left!important;
		top: 100% !important;
		position: relative!important;
		left: 0 !important;
		height: 300px;
	}
	.widgetPane .transcriptionWidget{ position: relative; height: 300px; overflow: hidden;}
	.widgetPane .vocabularyWidget{ position: relative; height: 300px; overflow: hidden;}
	.widgetPane .scenesWidget{ position: relative; height: 300px; overflow: hidden;}
	.widgetPane .sinopsisWidget{ position: relative; height: 300px; overflow: hidden;}
	.widgetPane .charactersWidget{ position: relative; height: 300px; overflow: hidden;}


	.widgetsPane .widgets{
		font-size: 90%;
	}

	.widgetPane .sinopsisWidget .textHolder .sinopsis-img {
		width:100%;
		display: none;
		
	}

	.widgetPane .sinopsisWidget .textHolder .sinopsis-img img {
		width:100%;
		
	}

	.widgetPane .sinopsisWidget .textHolder .sinopsis-txt{
		width:100%;
		padding-left: 15px;
		padding-top: 0;
		margin-top: 0;
	}

	.widgetPane .transcriptionWidget .textHolder .left , .widgetPane .transcriptionWidget .textHolder .right{
		width: calc(100% - 85px);
	}

	.widgetPane .transcriptionWidget .textHolder .transc_image img{
		width: 60px;
	}
	  .widgetPane .titles li{ padding:3px !important;}
}	



@media only screen and (max-width: 320px) {

	#player{
		width: 100%!important;
		display: inline !important;
		float: left!important;
	}
	.widgetPane {
		width: 100% !important;
		display: inline !important;
		float: left!important;
		position: relative!important;
		left: 0 !important;
		top: 100% !important;
	}

	.txt-personaje{
		width: 100%;
	}

	.widgetPane .charactersWidget .textHolder p.name {
		text-align: center;
	}

	.img-personaje{
		width: 75%;
	}

	.widgetPane .charactersWidget .textHolder p {
		padding: 8px 0px;
	}

	.widgetPane .transcriptionWidget .textHolder .left , .widgetPane .transcriptionWidget .textHolder .right{
		width: calc(100% - 75px);
	}

	.widgetPane .transcriptionWidget .textHolder .transc_image img{
		width: 50px;
	}	
}