@charset "UTF-8";

.player {width:100%; height:100%; background:#000; position: absolute; overflow: hidden;}

/*#PlayArea {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
    margin: 0px;
    padding: 0px;
    background: #FFF;
    filter: alpha(opacity=15);
    opacity: 0.15;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
}*/

.player .main-button { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width:70px; height: 60px; -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; overflow: hidden; opacity: .7;
    filter: alpha(opacity=70);}
.player .main-button img {padding: 10px 15px; background: #000000; text-align: center; display: inline-block;}

.player .video-screen {width:100%; height: auto;}
.player .video-screen img {width:100%; height: auto; display: block;}

.player .time-box {position: absolute; top:3%; right:2%; width:90%; padding:10px; background:rgba(00, 00, 00, .7); height: 20px; max-width:200px; min-width:200px; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; text-align: center;}
    .player .time-box span {color:#FFFFFF; font-size: 12px; margin: 0 4px;}

/* Share Nuevo */
 
.player .share-layer {width: 100%; height: 100%; background: rgba(00, 00, 00, .7); position: absolute; top:0; left: 0; z-index: 100;}
.player .share-layer .auxi-box {position: absolute; top:35%; left: 0%; right: 0%; width:100%;}
.player .share-layer .social-box { margin: 0 auto; width: 40%; max-width: 400px; min-width: 320px; overflow: hidden; height: auto; position: initial;}
.player .share-layer .social-box .social-item {clear: both; display: block; color:#FFF; margin: 10px 0 10px; overflow: hidden;}
.player .share-layer .social-box .social-item label{float: left;  width: 8%; margin: 6px 4% 0 0; font-size: 12px;}
.player .share-layer .social-box .social-item input {float: right;  width: 65%; padding:  5px 5px 5px 10px;}
.player .share-layer .social-box .social-item .copy {float: right;  width: 10%; padding: 6px 10px 6px 5px;}
.player .share-layer .social-box .social-item form {width:100%;}
.player .close-box {position: absolute; top:3%; right:2%; padding:10px; background:rgba(00, 00, 00, .7); height: 20px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
    /*-webkit-backface-visibility: hidden;*/}
.player .close-box a { -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/}
.player .close-box a:hover { opacity: 0.5;
    filter: alpha(opacity=50); -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/}

.player .share-box {cursor:pointer;position: absolute; top:3%; left:2%; padding:10px; background:rgba(00, 00, 00, .7); height: 20px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
    /*-webkit-backface-visibility: hidden;*/}
    .player .share-box a { -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/}
.player .share-box a:hover { opacity: 0.5;
    filter: alpha(opacity=50); -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/}
    
  /* Fin Share Nuevo */   

.player .social-box {position: absolute; top:3%; left:2%; width:90%; padding:10px; background:rgba(00, 00, 00, .7); height: 20px; max-width:290px; min-width: 280px; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.player .social-box .fb-ico {float: left; margin: 0 8px 0 0;}
.player .social-box .tw-ico {float: left; margin: 0 8px 0 0;}
.player .social-box .gp-ico {float: left; margin: 0 8px 0 0;}
.player .social-box input {background:#999999; color:#333333; border: none; padding: 3px 5px 3px 10px; -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px; font-size: 10px; width:140px; float: left;}
.player .social-box .copy {background: #3e3e3e; padding: 4px 10px 4px 5px; -webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px; color:#cccccc; font-size: 11px; text-decoration: none; float: left;}
.player .social-box .copy:hover {background: #666666; color:#cccccc;}

.player .controls {position: absolute; bottom: 3%; left:2%; width:96%; height: 60px; padding:0;  min-width: 300px;}

.player .controls .total-progressbar {width:100%; background:#cccccc; height: 10px; z-index:1;}
.player .controls .total-progressbar .charge-progressbar {width:80%; background:#666666; height: 10px; z-index:2;  cursor: pointer;}
.player .controls .total-progressbar .charge-progressbar .playing-progressbar {width:60%; background:#ce2027; height: 10px; z-index:3; cursor: pointer;}

.player .buttons-auxi {position: relative; width:100%; height: 50px; background:rgba(00, 00, 00, .7); -webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; }
.player .buttons-auxi .back-button {position: absolute; top:18px; left:15px;cursor: pointer;}
.player .buttons-auxi .play-button {position: absolute; top:13px; left:50px;cursor: pointer;}
.player .buttons-auxi .pause-button  {position: absolute; top:13px; left:50px; display:none;cursor: pointer;}
.player .buttons-auxi .forward-button {position: absolute; top:18px; left:80px;cursor: pointer;}
.player .buttons-auxi .live-button {position: absolute; top:12px; left:125px; color:#FFFFFF; padding: 5px; border:1px solid #FFF; text-decoration: none; display: block; -webkit-border-radius: 3px;cursor: pointer;
-moz-border-radius: 3px;
border-radius: 3px; opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */ font-size: 14px; -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/}
.player .buttons-auxi .live-button:hover {opacity: 1;cursor: pointer;
    filter: alpha(opacity=100); -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/}
.player .buttons-auxi .live-button.active {opacity: 1;
    filter: alpha(opacity=100); -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/ background:#FFFFFF; color:#333333;}
    
    
.player .buttons-auxi .volume-button {position: absolute; top:15px; left:187px;cursor: pointer;}
.player .controls .volume-progressbar {width:100%; background:#cccccc; height: 6px; z-index:1; max-width:45px;  -webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px; opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */ font-size: 14px; -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/ overflow: hidden;  cursor: pointer; position: absolute; top:23px; left: 220px;}
.player .controls .volume-progressbar:hover {opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */ font-size: 14px; -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/}
.player .controls .volume-progressbar .level-progressbar {width:40%; background:#ce2027; height: 6px; z-index:2; cursor: pointer; }


.player .buttons-auxi .config-button {position: absolute; top:15px; right:122px; cursor: pointer;opacity: 0.5;cursor: pointer;
    filter: alpha(opacity=50); /* For IE8 and earlier */-webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/}
.player .buttons-auxi .config-button:hover {opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */-webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/}

.box-controles .thumbnails { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width:120px; height: 85px; -webkit-border-radius: 10px;
                       -moz-border-radius: 3px;
                       background: #000000;
                       border-radius: 3px; overflow: hidden; /*opacity: .7;*/
                       /*filter: alpha(opacity=70);*/}
.box-controles .thumbnails img {/*padding: 10px 20px;*/ text-align: center; 
                    -moz-border-radius: 10px;}

.box-player .central-thumbnails {position: absolute; bottom: 3%; left:0;right: 0;margin:auto; padding:0; width:20%; height:20%;-webkit-border-radius: 10px;
                       -moz-border-radius: 3px;
                       border-radius: 3px; overflow: hidden;}
.box-player .central-thumbnails img {cursor:pointer; text-align: center; 
                    -moz-border-radius: 10px;}
.box-controles .dateThumb {font-family: open_sans_lightregular, Arial, Helvetica, sans-serif;font-size:13px;line-height:100%;color: #FFF;display: block;margin: 0 auto;text-align: center}
.box-controles .thumbIndicator {z-index:200;position: absolute;bottom: 94px;width: 0; height: 0; border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 8px solid #FFF;}

.player .buttons-auxi .config-button .config-auxi {position: relative;}
.player .buttons-auxi .config-button .config-auxi .res-menu {position: absolute; top:-75px; right:-14px; width:50px; font-family: 'open_sans_lightregular'; font-size:12px; background:#999999;}
/*.player .buttons-auxi .config-button .config-auxi:hover .res-menu {text-align: center; display: block;}*/
.player .buttons-auxi .config-button .config-auxi .res-menu:hover {text-align: center; display: block;}
.player .buttons-auxi .config-button .config-auxi .res-menu {text-align: center; display: none;}
.player .buttons-auxi .config-button .config-auxi .res-menu a {background:#999999; color:#333333; width:50px; padding: 2px 0; display: block; text-decoration: none;}
.player .buttons-auxi .config-button .config-auxi .res-menu a:hover {background: #cccccc;}
.player .buttons-auxi .config-button .config-auxi .res-menu a.active {background: #cccccc;}
.player .buttons-auxi .fullscreen-button {position: absolute; top:15px; right:77px;cursor:pointer;}
.player .buttons-auxi .janus-logo {position: absolute; top:12px; right:15px;}
.player .buttons-auxi a img {opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/}
.player .buttons-auxi a:hover img {opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/}



/*--------------- animaciones  ---------------*/
.transition {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /*-webkit-backface-visibility: hidden;*/
}
.transition-off-bottom {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
    bottom: -100px !important;
}

.transition-on-bottom {
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear;
    bottom: 3% !important;
}
.transition-off-bottom-thumb {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
    bottom: 3% !important;
}
.transition-on-bottom-thumb {
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear;
    bottom: calc(3% + 70px) !important;
        /* Firefox */
    bottom: -moz-calc(3% + 70px) !important;
    /* WebKit */
    bottom: -webkit-calc(3% + 70px) !important;
    /* Opera */
    bottom: -o-calc(3% + 70px) !important;
    /* Standard */
    bottom: calc(3% + 70px) !important;
}

.transition-off-top {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
    top: -100px !important;
}

.transition-on-top {
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear;
    top: 3% !important;
}

/*--------------- Font Face ---------------*/

@font-face {
    font-family: 'open_sans_regular';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular-webfont.woff') format('woff'),
         url('fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('fonts/opensans-regular-webfont.svg#open_sans_regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sans_lightregular';
    src: url('fonts/opensans-light-webfont.eot');
    src: url('fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-light-webfont.woff') format('woff'),
         url('fonts/opensans-light-webfont.ttf') format('truetype'),
         url('fonts/opensans-light-webfont.svg#open_sans_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sans_semibold';
    src: url('fonts/opensans-semibold-webfont.eot');
    src: url('fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-semibold-webfont.woff') format('woff'),
         url('fonts/opensans-semibold-webfont.ttf') format('truetype'),
         url('fonts/opensans-semibold-webfont.svg#open_sans_semibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media all and (max-width: 450px) {
    
.player .buttons-auxi {text-align: center;}
.player .buttons-auxi .play-button {margin-top:13px; margin-left:15px; float: left;}
.player .buttons-auxi .live-button {margin-top:13px; margin-left:15px; float: left;}
.player .buttons-auxi .pause-button  {margin-top:13px; margin-left:15px; float: left; display:none;}
.player .buttons-auxi .volume-button {margin-top:15px; margin-left:15px; float: left;}
.player .buttons-auxi .config-button {margin-top:15px; margin-right:15px; float: right; }
.player .buttons-auxi .fullscreen-button {margin-top:15px; margin-right:15px; float: right;}
.player .buttons-auxi .janus-logo {margin-top:15px; margin-right:15px; float: right;}
    
.player .buttons-auxi a {position: unset !important; display: inline-block;}
.player .buttons-auxi .config-button {position: unset !important; display: inline-block;}
.player .buttons-auxi .janus-logo {position: unset !important; display: inline-block;}
.player .buttons-auxi .back-button {display:none;}
.player .buttons-auxi .forward-button {display:none;}
.player .controls .volume-progressbar {display:none;}
.player .social-box {height: auto; max-width: 20px; min-width: 20px; width: 20px;}
.player .share-layer  .social-box .fb-ico {float: left; margin:0 4px;}
.player .share-layer  .social-box .tw-ico {float: left; margin:0 4px;}
.player .share-layer  .social-box .gp-ico {float: left; margin:0 4px;}
.player .social-box .fb-ico {float: left; margin:4px 0;}
.player .social-box .tw-ico {float: left; margin:4px 0;}
.player .social-box .gp-ico {float: left; margin:4px 0;}
.player .share-layer .social-box input {display:block;}
.player .share-layer .social-box .copy {display:block;}
.player .social-box input {display:none;}
.player .social-box .copy {display:none;}
}

@media all and (max-width: 420px) {
.player .main-button {top:-50px; bottom: 0;}
.player .social-box .fb-ico {float: left; margin:2px 0;}
.player .social-box .tw-ico {float: left; margin:2px 0;}
.player .social-box .gp-ico {float: left; margin:2px 0;}
.player .time-box {text-align: right; background: none; top:1%; right:1%;}
.player .time-box span {margin: 0 2px;}
.player .share-layer .social-box {min-width:300px;}
.player .share-layer .auxi-box {top:20%;}
}


/* FIN  */