*, body, h1, h2, h3, h4, p {
    font-family: "Open Sans",Helvetica,Arial,sans-serif;  
    font-weight: 300;   
}
html { 
	width: 1280px;
    height: 720px;
	overflow: hidden; 
}
/* body { background:#141414; } */
body { background:#000000; }
a, a:hover { cursor: pointer !important }

.viewport_not_player{
	width:1280px;
	height: 670px;
	overflow: hidden !important;
	/* position: relative; QUITADO PARA EVITAR EL MOVIMIENTO DE LA VENTANA DE VIDEO CON EL CP*/
}

/*********************************************/
/*********************************************/
/**** ELEMENTOS PERSONALIZADOS OPENSPORT *****/
/*********************************************/
/*********************************************/
.os-color { color: #ffdb00; text-transform: uppercase; }
.h1, .h2, .h3, h1, h2, h3 { margin-top: 10px; }
h1 { color: #ffffff; font-size: 3.5em; }
h2 { color: #fff; font-size: 3em; }
h3 { color: #c7c7c7; font-size: 2.4em; }
h4 { color: #c7c7c7; font-size: 1.5em; }
p { color: #c7c7c7; font-size: 1.1em; }

a {
  color: #ffdb00;
  text-decoration: none;
  font-weight: 300;
  font-size: 1.1em;
}
a:hover, a:focus {
  color: #fff;
  text-decoration: none;
}

hr {
  border-top: 1px solid #ffdb00;
  width: 40%;
}

.btn-opensport, .btn-opensport-inverse:hover,.btn-opensport-inverse:focus,.btn-opensport-inverse.focus {
    background-color: #ffee80;
    color: #000000;
}
.btn-opensport-inverse, .btn-opensport:hover, .btn-opensport.focus {
    background-color: transparent;
    border: 1px solid #ffdb00;
    color: #ffdb00;
}

.btn-lg {
    font-size: 20px;
    min-width: 112px;
    min-height: 44px;
    margin-top: 5px;
}

.btn-season {
	margin-left: 4em;
	display: block; 
	font-weight: 600; 
	background-color: transparent;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: none;
}

.btn-season:focus {
    background-color: transparent;
    border: 1px solid #ffdb00;
    color: #ffdb00;
}

.btn-chapter {
	margin-left: 4em;
	margin-right: 1em;
	display: block; 
	font-weight: 600; 
	background-color: transparent;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: none;
}

.btn-chapter:focus {
    background-color: transparent;
    border: 1px solid #ffdb00;
    color: #ffdb00;
}

.btn-epg, .btn-epg-inverse:hover, .btn-epg-inverse:focus, .btn-epg-inverse.focus {
    background-color: #ffee80;
    color: #000000;
}
.btn-epg-inverse, .btn-epg:hover, .btn-epg.focus {
    background-color: transparent;
    border: 1px solid #ffdb00;
    color: #ffdb00;
}
.btn-epg1-inverse {
    background-color: transparent;
    /* border: 1px solid #ffdb00; */
    color: #ffdb00;
}
.btn-epg1-inverse:focus, .btn-epg1-inverse.focus {
    background-color: transparent;
    border: 2px solid #ffdb00;
	outline: none;
    color: #ffdb00;
}

.chapter-list {
    display: block;
    overflow: hidden;
	height: auto;
}

.fixed {
    position: fixed;
	top: 50px;
	width: 38%;
	height: auto;
	display: block;
	padding-left: 50px;
	padding-right: 10px;
}

h4.chapter_tit {
	white-space: pre;
	float: left;
	text-align: left;  
}

p.chap {
  font-size: 1.15em;
  text-align: left;
  height: auto;
  margin-right: 3em;  
}

@media (max-width: 767px) {
    h1 { font-size: 2.25em; }
    h4 { font-size: 1em; }
    .btn-lg { font-size: 1.15em; }
}

input, .btn { border-radius: 2px; } 
input {
    max-width: 350px;   
    border-radius: 2px;
    color: #c7c7c7;
}

.form-control {
    background: #000;
    border: 1px solid #c7c7c7;
    font-size: 1.25em;
    padding: 0.5em;
    height: auto;
    color: #c7c7c7;
}

.text-error {
    color: #ffa100;
    font-size: 14px;
    margin-top: 10px;
 }

.text-error a {
  color: #fff;
  text-decoration: none;
}
.text-error a:hover { color: #c7c7c7; }

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    width: 100%;
}

.form-control:focus {
    border-color: #ffdb00;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 240, 128, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 240, 128, 0.6);
}

/*PLACEHOLDERS BOOTSTRAP*/
.form-control::-webkit-input-placeholder { color: #c7c7c7; }
.form-control:-moz-placeholder { color: #c7c7c7; }
.form-control::-moz-placeholder {color: #c7c7c7; }
.form-control:-ms-input-placeholder { color: #c7c7c7; }


/*********************************************/
/*********************************************/
/**** HEADER VESTEL **************************/
/*********************************************/
/*********************************************/
header { 
    height: 50px; 
    width: 100%; 
    background: rgba(0,0,0,0.75);
    display: none;
}
header img {
    height: 40px;
}
.navbar {
    padding: 4px 4%;   
    margin-bottom: 0px;
}

#snippet-menu{
	display: inline;
	top: 0px;
    right: 40px;
    position: absolute;
    font-weight: 300;
    margin-top: 10px;
}

#snippet-menu > i {
	padding: 5px;
    text-align: center;
    cursor: pointer;
    border: 3px solid transparent;
    color:#fff;
}

#snippet-menu > i.focus{
	color:#ffdb00;
}

#snippet-menu > i > span{
	padding-left: 10px;
	color: #FFF;
}


/*********************************************/
/*********************************************/
/**** FOOTER VESTEL **************************/
/*********************************************/
/*********************************************/
footer {
    background: #2d2d2d;
    color: #c7c7c7;
    font-size: 1.75em;
    height: 45px;  
    font-size: 1.5em;
    position: absolute !important;
    left: 0px !important;
    top: 675px !important; /*720-70 (altura de la pantalla y altura del footer)*/
    display: none;
}
footer > div  {
    -ms-display: flex;
    display: -webkit-flex;
    display: flex;
    /*justify-content: center;*/
    align-items: center;  
    margin-top: 5px;
}
footer > div > div { display: inline; margin-right: 40px; } 
footer > div > div > * { display: inline; }
footer img { width: 30px; }
footer span { 
	font-weight: 400;
	vertical-align:bottom; 
}





/*********************************************/
/*********************************************/
/**** LOADER VESSTEL *************************/
/*********************************************/
/*********************************************/
.loader {
  font-size: 0.25em;
  margin: 15px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #00ed81;
  background: -moz-linear-gradient(left, #00ed81 10%, rgba(0,237,129, 0) 42%);
  background: -webkit-linear-gradient(left, #00ed81 10%, rgba(0,237,129, 0) 42%);
  background: -o-linear-gradient(left, #00ed81 10%, rgba(0,237,129, 0) 42%);
  background: -ms-linear-gradient(left, #00ed81 10%, rgba(0,237,129, 0) 42%);
  background: linear-gradient(to right, #00ed81 10%, rgba(0,237,129, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #00ed81;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #000000;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*********************************************/
/*********************************************/
/**** FORMULARIOS PERSONALIZADOS *************/
/*********************************************/
/*********************************************/
.formulario {
    cursor: pointer;
    position: relative;
    display: block;
    padding-left: 25px;
    font-size: 1em !important;
}
.formulario input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
.formulario-opensport {
    position: absolute;
    top: 3px;
    left: 0;
    width: 15px;
    height: 15px;
    border: solid 1px #ffdb00;
    -webkit-border-radius: 20%;
    border-radius: 20%;
}
.formulario input:checked ~ .formulario-opensport,
.formulario:hover input:not([disabled]):checked ~ .formulario-opensport,
.formulario input:checked:focus ~ .formulario-opensport,
.formulario input.checked:focus ~ .formulario-opensport,
.formulario input.checked ~ .formulario-opensport {
    background: #ffdb00;
}
.formulario-opensport:after {
    position: absolute;
    display: none;
    content: '';
}
.formulario input:checked ~ .formulario-opensport:after,
.formulario input.checked ~ .formulario-opensport:after {
    display: block;
}
.formulario-check .formulario-opensport:after {
    top: 0px;
    left: 3px;
    width: 6px;
    height: 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border: solid #000;
    border-width: 0 2px 2px 0;
}


/*********************************************/
/**** MODAL OPENSPORT ************************/
/*********************************************/
.modal {background: rgba(20,20,20,.85); }    
.modal-container {
	position: absolute;
	top: 50%;  
	left: 50%;  
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.modal-content { background-color: rgba(45, 45, 45, 0.95); }    
.modal-header { border-bottom: 1px solid #c7c7c7; }

.modal-title {
    text-align: center;  
    font-size: 2em; 
    color: #fff;
    font-weight: 400;
}
.modal-body { padding: 3em; padding-bottom: 2em; }
.modal-form-group { margin-bottom: 20px; }

.modal-body label, .modal-body p, .modal-body .form-control, 
.modal-body span, .modal-body ul { font-size: 1.15em; }

.modal-body label { color: #fff; font-weight: 400; }
.modal-body span, .modal-body ul { color: #c7c7c7; }

.modal-body .form-control {
    background: #000;
    height: 2.5em;    
    border: 1px solid transparent;
    margin-bottom: 10px;    
    color: #c7c7c7;
}
.modal-body .text-error {
    color: #ffa100;
    font-weight: 300;
}
.modal-body button { 
	outline: none;
	width: 100%; 
}
.modal-body .btn-opensport.focus, 
.modal-body .btn-opensport-inverse,
.modal-body .loader:after { 
	background-color: #2d2d2d; 
	outline: none;	
}
.modal-body .btn-opensport-inverse.focus { background-color: #ffdb00;  }
.modal-body input { max-width: initial; }
.modal-backdrop { background-color: rgba(0, 0, 0, 0.5); }



.modal_canales .modal-body {
    padding: 3em 6em;
}
.modal_canales ul {
    list-style: none;
    margin-bottom: 1em;
    color: #fff;
    font-size: 2em;
    padding-left: 0;
}
.modal_canales ul > li  { 
 	padding: 0.15em 0.5em;
    border: 3px solid transparent;
    margin: 0.15em 0;
    cursor: pointer;
}
.modal_canales .modal-body button {
    outline: none;
}

.throbber1 {
	position: absolute;
	z-index: 988;
	top: 380px;
	left: 640px;
	width: 71px;
	height: 71px;
	margin: -35px 0 0 -35px;
	background: transparent url('../img/throbber.png') no-repeat 0 0;
}

.throbber {
	position: absolute;
	z-index: 98;
	top: 420px;
	left: 640px;
	width: 71px;
	height: 71px;
	margin: -35px 0 0 -35px;
	background: transparent url('../img/throbber.png') no-repeat 0 0;
}
/* prueba */
.focus:not(.key) {
    border: 3px solid #ffdb00 !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

div.vestel-login  button.focus {
    color: #ffdb00 !important;
    outline: none;
    border: 3px solid #ffdb00 !important;
}

.kbinput {
    height: 50px;
    font-size: 25px;
    padding: 5px 10px 6px;
    cursor: pointer;
    overflow: hidden;
}

.cursor{
	border-color: #fff !important;
}


/*********************************************/
/*********************************************/
/******************* LANDING *****************/
/*********************************************/
/*********************************************/
div.logo-carga {
	width:100%;
	height:100%;
	overflow:none;
}
div.logo-carga > img {
	margin-top:168px;
	margin-left:322px;
}		
@keyframes animacionCarga {
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
@-o-keyframes animacionCarga{
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
@-moz-keyframes animacionCarga{
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
@-webkit-keyframes animacionCarga{
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
div.logo-carga > img {
	-webkit-animation: animacionCarga 3s infinite;
	-moz-animation: animacionCarga 3s infinite;
	-o-animation: animacionCarga 3s infinite;
	animation: animacionCarga 3s infinite;
}


/*********************************************/
/*********************************************/
/******************* LANDING *****************/
/*********************************************/
/*********************************************/
div.logo-nonetwork {
	width:100%;
	height:100%;
	overflow:none;
}
div.logo-nonetwork > img {
	margin-top:125px;
	margin-left:322px;
}		
@keyframes animacionNonetwork {
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
@-o-keyframes animacionNonetwork{
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
@-moz-keyframes animacionNonetwork{
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
@-webkit-keyframes animacionNonetwork{
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
div.logo-nonetwork > img {
	-webkit-animation: animacionNonetwork 3s infinite;
	-moz-animation: animacionNonetwork 3s infinite;
	-o-animation: animacionNonetwork 3s infinite;
	animation: animacionNonetwork 3s infinite;
}

/*************************************************/
/*************************************************/
/*********** Subgenres dropdown ******************/
/*************************************************/
/*************************************************/

.dropdown {
  float: left;
  /* overflow: hidden; */
}

.dropdown {
  cursor: pointer;
  /* font-size: 16px;   */
  border: none;
  outline: none;
  color: #ffdb00;
  /* padding: 14px 16px; */
  padding: 4px 16px;
  background-color: inherit;
  font-family: inherit;
  margin-top: 8px;
}

.dropbtn {
  /* font-size: 16px;   */
  font-size: 1.5em;
  border: none;
  outline: none;
  color: #ffdb00;
  /* padding: 14px 16px; */
  padding: 6px 16px;
  background-color: inherit;
  font-family: inherit;
  font-weight: 400 !important;
  margin: 0;
}

.dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: red;
}

.dropdown-menu {
  display: none;
  position: absolute;
  /* background-color: #f9f9f9; */
  margin-top:8px !important;
  min-width: 160px;
  background-color: #222;
  /* background: rgba(0,0,0,0.75); */
  opacity: 0.9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100001;
}

.dropdown-menu a {
  float: none;
  font-size: 1.25em;
  /* color: black; */
  color: #ffdb00;  
  font-weight: 400 !important;
  padding: 6px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-menu a:hover {
  /* background-color: #ddd; */
  background-color: #282c34;
}

.show {
  display: block;
}