/* MAIN CSS */
.cbp-item {
    width: 200px;
}

#pantalla_contenedor_borde {
    position: relative;
    margin:20px;
    margin:0 auto;
    border:20px solid #2b3643 !important;
    border-radius:20px !important;
    box-shadow: 5px 5px 2px #888888;
    
    -webkit-transform : scale(1);
    -moz-transform    : scale(1);
    -ms-transform     : scale(1);
    -o-transform      : scale(1);
    transform         : scale(1);
}

#pantalla_contenedor {
    width: 100%;
    height: 100%;
    font-size: 100%;
    background-color:#E9EDEF !important;
}

#black_screen {
    background-color: black;
    position:absolute;
    margin:auto;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:3000;
}

.multiaccion {
    position:absolute;
    top:5px;
    left:5px;
    z-index:2000;
    display:none;
}


/* START QUICK-NAV-PANTALLA */
.quick-nav-pantalla {
  position: fixed;
  z-index: 10040;
}

.quick-nav-pantalla.qnherramientas {
  right: 20px;
}

.quick-nav-pantalla .quick-nav-pantalla-bg {
    /* this is the stretching navigation background */
    position: absolute;
    z-index: 10039;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border-radius: 30px !important;
    background: #36C6D3;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    webkit-transition: height .2s, box-shadow .2s;
    -moz-transition: height .2s, box-shadow .2s;
    -ms-transition: height .2s, box-shadow .2s;
    -o-transition: height .2s, box-shadow .2s;
    transition: height .2s, box-shadow .2s; 
}
.quick-nav-pantalla.nav-is-visible {
    pointer-events: auto; 
}
.quick-nav-pantalla.nav-is-visible .quick-nav-pantalla-bg {
    height: 100%;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); 
}
.quick-nav-pantalla ul {
  position: relative;
  z-index: 10103;
  padding: 10px 0 0;
  webkit-transition: visibility 0.3s;
  -moz-transition: visibility 0.3s;
  -ms-transition: visibility 0.3s;
  -o-transition: visibility 0.3s;
  transition: visibility 0.3s;
  text-align: right;
  list-style: none; 
}
.quick-nav-pantalla ul > li a {
    position: relative;
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 calc(1em + 60px) 0 1em;
    font-size: 1.4rem;
    webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    -ms-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s; 
    text-decoration: none; 
}
.quick-nav-pantalla ul > li a > i {
      /* navigation item icons */
      content: '';
      position: absolute;
      height: 16px;
      width: 16px;
      font-size: 18px;
      right: 24px;
      top: 16px;
      color: #ebebeb; 
}

.quick-nav-pantalla ul > li a > span {
      color: #36c6d3; 
      visibility: hidden;
}



.quick-nav-pantalla.nav-is-visible ul {
    visibility: visible; 
}
.quick-nav-pantalla.nav-is-visible ul a::after {
    /* navigation item icons */
    webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
    -webkit-animation: scaleIn 0.15s backwards;
    -o-animation: scaleIn 0.15s backwards;
    animation: scaleIn 0.15s backwards;
    webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s; 
}
.quick-nav-pantalla.nav-is-visible ul a:hover::after {
    opacity: 1; 
}
.quick-nav-pantalla.nav-is-visible ul a:hover::before {
    webkit-transform: translateX(3px) translateY(-50%) scaleY(2);
    -moz-transform: translateX(3px) translateY(-50%) scaleY(2);
    -ms-transform: translateX(3px) translateY(-50%) scaleY(2);
    -o-transform: translateX(3px) translateY(-50%) scaleY(2);
    transform: translateX(3px) translateY(-50%) scaleY(2);
    webkit-transition: transform 0.15s 0.3s;
    -moz-transition: transform 0.15s 0.3s;
    -ms-transition: transform 0.15s 0.3s;
    -o-transition: transform 0.15s 0.3s;
    transition: transform 0.15s 0.3s; 
}
.quick-nav-pantalla.nav-is-visible ul a:hover > i {
    color: #fafafa;
}

.quick-nav-pantalla.nav-is-visible ul a:hover > span {
    visibility: visible;
}

.quick-nav-pantalla.nav-is-visible ul span {
    opacity: 1;
    webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: slideIn 0.15s backwards;
    -o-animation: slideIn 0.15s backwards;
    animation: slideIn 0.15s backwards;
    webkit-transition: transform 0.2s;
    -moz-transition: transform 0.2s;
    -ms-transition: transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s; 
}
.no-touch .quick-nav-pantalla.nav-is-visible ul a:hover::after {
    opacity: 1; 
}
.no-touch .quick-nav-pantalla.nav-is-visible ul a:hover span {
    webkit-transform: translateX(-5px);
    -moz-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    -o-transform: translateX(-5px);
    transform: translateX(-5px); 
}
/* END QUICK-NAV-PANTALLA */

.portlet-pantalla::before {
}

/* START HERRAMIENTAS */

.objeto_cuadro{
    width: 180px;
    height: 100px;
    font-size: 35px;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 100%;
    position:absolute;
}

.objeto_over{
    opacity: 0.5;
}

/* END HERRAMIENTAS */

.objeto_texto_div{
    word-wrap:break-word;
    text-align: left;
    text-size: 3vw;
    font-family: Arial, Helvetica, sans-serif;
}

.objeto_web_iframe{
    display: block !important;
}

.centrado_absoluto{
    position: absolute; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    top: 0;
    bottom: 0;
    margin-top: auto; 
    margin-bottom: auto; 
}

.video-responsive {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.ayuda-youtube{
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
  width: 720px;
  height: 405px;
  
}

/* HOTEL IPTV */
.HPcontainer { 
	margin: 0 auto;
	float: left;
        width: 100%;
        height: 100%;
}

.HPwrap {
	position: relative;
	float: left;
	width: 100%;
        height: 100%;
	margin: 0 0 0 0;
	float:left;
}
.HPwrap:nth-child(2n) { margin-right: 0; }

.HPframe {
	width: 30%;
	height: 100%;
	overflow: hidden;
}

.HPframe ul.items {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
        height: 100%;
	font-size: 24px;
}
.HPframe ul.items li {
	float: left;
	width: 100%;
	height: 20%;
	margin: 0 0 1px;
	padding: 0;
	background: #333;
	color: #ddd;
	text-align: center;
	cursor: pointer;
}
.HPframe ul.items li.active {
	color: #fff;
	background: #a03232;
}
/* HOTEL IPTV END */

/* BASE TIMER START */
.base-timer {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  display: grid;
  place-items: center;
}

.base-timer__svg {
  transform: scaleX(-1);
}

.base-timer__svg2 {
  position: absolute;
}

.base-timer__circle {
  fill: none;
  stroke: none;
}

.base-timer__path-elapsed {
  stroke-width: 7px;
  stroke: grey;
}

.base-timer__path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor;
}

.base-timer__path-remaining.green {
  color: rgb(65, 184, 131);
}

.base-timer__path-remaining.orange {
  color: orange;
}

.base-timer__path-remaining.red {
  color: red;
}

.base-timer__label {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  top: -400%;
}
/* BASE TIMER END */

.objeto_reloj_div {
    font-family: Open Sans, sans-serif;
    font-weight: 600;
}
.objeto_reloj_fecha{
    font-size:0.5em;
}
.objeto_reloj_hora{
    line-height: 1em;
}
.objeto_reloj_linea,
.objeto_reloj_linea2{
     margin-top: -1em;
     font-weight: 200;
}
.objeto_reloj_temp{
    font-size:0.8em;
    margin-top:-0.3em;
}

.objeto_twitch,
.objeto_twitch_div {
    width: 100%;
    height: 100%;
}