/** Fullscreen **/ div:-webkit-full-screen { width: 100% !important; } div:-moz-full-screen { width: 100% !important; } div:-ms-fullscreen { width: 100% !important; } div:fullscreen { width: 100% !important; } /* Controles */ #video-container.affix, #video-containerMiddle.affix {position:fixed!important; width: 420px; bottom: 20px; right: 20px; top:inherit !important; box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3); padding: 2px; transition: bottom .30s ease,left .30s ease,width .30s ease,height .30s ease; background:#000; z-index:1010;} #video-containerLive.affix {position:fixed!important; width: 390px; bottom: 20px; right: 20px; top:inherit !important; box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3); padding: 2px; transition: bottom .30s ease,left .30s ease,width .30s ease,height .30s ease; background:#4E5661; z-index:1010;} #video-container.affix-bottom, #video-containerMiddle.affix-bottom {position:fixed!important; width: 420px; bottom: 20px; right: 20px; top:inherit !important; box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3); padding: 2px; transition: bottom .30s ease,left .30s ease,width .30s ease,height .30s ease; background:#000; z-index:1010;} #video-containerLive.affix-bottom {position:fixed!important; width: 390px; bottom: 20px; right: 20px; top:inherit !important; box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3); padding: 2px; transition: bottom .30s ease,left .30s ease,width .30s ease,height .30s ease; background:#4E5661; z-index:1010;} #video-container .controles, #video-containerLive .controles, #video-containerMiddle .controles, #video-container .adpage, #video-containerLive .adpage, #video-containerMiddle .adpage {display:none;} #video-container.affix .controles, #video-containerLive.affix .controles, #video-containerMiddle.affix .controles {display:block; float:right; height:220px; width:32px} #video-container.affix .adpage, #video-containerLive.affix .adpage, #video-containerMiddle.affix .adpage {display:block;} #video-container.affix .controles span, #video-containerLive.affix .controles span, #video-containerMiddle.affix .controles span {color:rgba(256,256,256,1); font-size:2rem;} #video-container.affix .controles button, #video-containerLive.affix .controles button, #video-containerMiddle.affix .controles button {padding:5px 4px 0 0} #video-container.affix .controles button:focus, #video-containerLive.affix .controles button:focus, #video-containerMiddle.affix .controles button:focus {outline:none} #video-container.affix-bottom .controles, #video-containerLive.affix-bottom .controles, #video-containerMiddle.affix-bottom .controles {display:block;float:right; height:220px; width:32px} #video-container.affix-bottom .adpage, #video-containerLive.affix-bottom .adpage, #video-containerMiddle.affix-bottom .adpage {display:block;} #video-container.affix-bottom .controles span, #video-containerLive.affix-bottom .controles span, #video-containerMiddle.affix-bottom .controles span {color:rgba(256,256,256,1); font-size:2rem;} #video-container.affix-bottom .controles button:focus, #video-containerLive.affix-bottom .controles button:focus, #video-containerMiddle.affix-bottom .controles button:focus {outline:none} #video-container.affix-bottom .controles button, #video-containerLive.affix-bottom .controles button, #video-containerMiddle.affix-bottom .controles button {padding:5px 4px 0 0} #video-container .controles button#logo24Hvideos, #video-containerLive .controles button#logo24Hvideos, #video-containerMiddle .controles button#logo24Hvideos {padding:0;} #video-container .controles button#logo24Hvideos:hover, #video-containerLive .controles button#logo24Hvideos:hover, #video-containerMiddle .controles button#logo24Hvideos:hover{opacity: 0.7;filter: alpha(opacity=70);} /* controles top scroll */ #video-container .controlesTop, #video-containerLive .controlesTop, #video-containerMiddle .controlesTop {display:none;!important;} #video-container.affix-top .controlesTop, #video-containerLive.affix-top .controlesTop, #video-containerMiddle.affix-top .controlesTop {display:none;} #video-container.affix .controlesTop, #video-containerLive.affix .controlesTop, #video-containerMiddle.affix .controlesTop {display:block;} #video-container.affix .controlesTop span, #video-containerLive.affix .controlesTop span, #video-containerMiddle.affix .controlesTop span {color:rgba(256,256,256,1); font-size:2rem;} #video-container.affix .controlesTop button, #video-containerLive.affix .controlesTop button, #video-containerMiddle.affix .controlesTop button {padding:5px 4px 0 0} #video-container.affix .controlesTop button:focus, #video-containerLive.affix .controlesTop button:focus, #video-containerMiddle.affix .controlesTop button:focus {outline:none} #video-container.affix-bottom .controlesTop, #video-containerLive.affix-bottom .controlesTop, #video-containerMiddle.affix-bottom .controlesTop {display:block;} #video-container.affix-bottom .controlesTop span, #video-containerLive.affix-bottom .controlesTop span, #video-containerMiddle.affix-bottom .controlesTop span {color:rgba(256,256,256,1); font-size:2rem;} #video-container.affix-bottom .controlesTop button:focus, #video-containerLive.affix-bottom .controlesTop button:focus, #video-containerMiddle.affix-bottom .controlesTop button:focus {outline:none} #video-container.affix-bottom .controlesTop button, #video-containerLive.affix-bottom .controlesTop button, #video-containerMiddle.affix-bottom .controlesTop button {padding:5px 4px 0 0} #video-container .controlesTop button#logo24Hvideos, #video-containerLive .controlesTop button#logo24Hvideos, #video-containerMiddle .controlesTop button#logo24Hvideos {padding:0;} #video-container .controlesTop button#logo24Hvideos:hover, #video-containerLive .controlesTop button#logo24Hvideos:hover, #video-containerMiddle .controlesTop button#logo24Hvideos:hover{opacity: 0.7;filter: alpha(opacity=70);} #video-title, #video-titleLive, #video-titleMiddle {display:none; color: rgba(256,256,256,1); font-weight: 300; line-height: 3.2rem; font-size: 1.8em !important; letter-spacing: 0.5px; position: absolute; left: 210px; width:170px; top:0; flex-flow: row wrap; -webkit-flex-flow: row wrap; padding: 10% 6px 0; z-index: 9999px;} #video-header *:focus, #video-controls *:focus, #video-headerLive *:focus, #video-controlsLive *:focus, #video-headerMiddle *:focus, #video-controlsMiddle *:focus {outline:none;} .controlesTop h6 {color:#fff;} .controlesTop button, .controlesTop button span {color:#fff !important;} .controlesTop button:hover, .controlesTop button span:hover {color:#f66600 !important;} .controlesTop button svg:hover {fill:#f66600;} /* BOTONES SVG */ button#play-pause, button#play-pauseLive, button#play-pauseMiddle, button#play-pause-stop, button#play-pause-stopLive, button#play-pause-stopMiddle, button#full-screen, button#full-screenLive, button#full-screenMiddle, button#mute, button#muteLive, button#muteMiddle, button#hd, button#hdLive, button#hdMiddle, .box-share button, .box-logo24 button.logo24 {border:none;text-indent:-9999px} button#play-pause, button#play-pause.pause, button#play-pauseLive, button#play-pause.pauseLive, button#play-pauseMiddle, button#play-pauseMiddle.pause {width:35px; height:35px;background-size:33px!important} button#play-pause, button#play-pauseLive, button#play-pauseMiddle {background:url('../img/svg/play.svg') no-repeat top left; margin-top:5px} button#play-pause.pause, button#play-pauseLive.pause, button#play-pauseMiddle.pause {background:url('../img/svg/pausa.svg') no-repeat top left} button#play-pause-stop, button#play-pause-stopLive, button#play-pause-stopMiddle {width:28px; height:28px;background-size:26px!important} button#play-pause-stop, button#play-pause-stopLive, button#play-pause-stopMiddle {background:url('../img/svg/play.svg') no-repeat top left; margin-top:5px} button#mute, button#mute.mute, button#muteLive, button#muteLive.mute, button#muteMiddle, button#muteMiddle.mute {width:20px; height:20px;background-size:18px!important} button#mute, button#muteLive, button#muteMiddle {background:url('../img/svg/volume.svg') no-repeat top left} button#mute.mute, button#muteLive.mute, button#muteMiddle.mute{background:url('../img/svg/volume-mute.svg') no-repeat top left} button#hd, button#hd.hd, button#hdLive, button#hdLive.hd, button#hdMiddle, button#hdMiddle.hd{width:28px; height:28px;background-size:26px!important} button#hd, button#hdLive, button#hdMiddle {background:url('../img/svg/hd-transparent.svg') no-repeat top left} button#hd.hd, button#hd:hover, button#hdLive.hd, button#hdLive:hover, button#hdMiddle.hd, button#hdMiddle:hover {background:url('../img/svg/hd.svg') no-repeat top left} button#full-screen, button#full-screenLive, button#full-screenMiddle { margin-left:5px; background:url('../img/svg/fullscreen.svg') no-repeat top left; background-size:16px!important; width:18px; height:18px; } .box-share button {width:28px; height:28px;background-size:26px!important} .box-share button.fb {background:url('../img/svg/facebook-transparent.svg') no-repeat top left} .box-share button.fb:hover {background:url('../img/svg/facebook.svg') no-repeat top left} .box-share button.tw {background:url('../img/svg/twitter-transparent.svg') no-repeat top left} .box-share button.tw:hover {background:url('../img/svg/twitter.svg') no-repeat top left} .box-share button.ws {background:url('../img/svg/whatsapp-transparent.svg') no-repeat top left} .box-share button.ws:hover {background:url('../img/svg/whatsapp.svg') no-repeat top left} .box-logo24 button.logo24 {width:42px; height:42px;background-size:40px!important; margin-top:-3px} .box-logo24 button.logo24 {background:url('../img/svg/24horas-transparent.svg') no-repeat top left} /*columnaje*/ .videoWrapper {position:relative; width:calc(100% - 32px)} #video-container .videoWrapper, #video-containerMiddle .videoWrapper, #video-containerLive .videoWrapper {position:relative; width:100%} #video-container.affix .videoWrapper, #video-container.affix-bottom .videoWrapper {position:relative; width:calc(100% - 32px)!important;} #video-containerLive.affix .videoWrapper {position:relative; width:100%!important;} #video-containerLive.affix-bottom .videoWrapper {position:relative; width:100%;} /* == CONTROL HEADER == */ #video-header, #video-headerLive, #video-headerMiddle { position:absolute; top:0;left:0; right:0; display: flex; display: -webkit-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; padding: 0 6px 10%; z-index:9999px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ visibility:hidden; } .box-logo24, .box-share { position:absolute; } .box-logo24 { top:8px; left:6px; } .box-logo24 h1, .box-logo24 h1 a {margin:0 0 0 3px; color:rgba(256,256,256,1); font-weight:300; line-height:3.2rem; font-size:1.5rem!important;} .box-share { top:11px; right:6px; } .box-share .btn {padding:0} /* == VIDEO CONTROL == */ #video-controls, #video-controls-stop, #video-controlsLive, #video-controls-stopLive, #video-controlsMiddle, #video-controls-stopMiddle{ position:absolute; bottom:0;left:0; right:0; display: flex; display: -webkit-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; padding: 10% 6px 0; z-index:9999px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ visibility:hidden; } .flex-item { display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; align-items: center; margin:0 5px; height:38px; /*background:cyan;*/ } .flex-item.playbox { order: 1; -webkit-order: 1; flex:0; margin-bottom: 10px; } .flex-item.timeline { order: 2; -webkit-order: 2; -webkit-box-flex:1; flex:3; } .flex-item.volume { order: 3; -webkit-order: 3; -webkit-box-flex:1; flex:1; } .flex-item.ultimos { order: 4; -webkit-order: 4; } /*estrucutra interior en fila*/ .timeline, .volume, .ultimos { display: flex; display: -webkit-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; } .tiempoActual, .lineaDeTiempo, .tiempoTranscurrido { display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column} /*elasticidad de la barra de progreso*/ .lineaDeTiempo, .volume input[type=range] { position: relative; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; align-items: center; display: block; box-sizing: border-box; } .timeline label {color:#ffffff; font-weight:300; margin-bottom:0; font-size:1.4rem} .tiempoActual {margin-right:10px} .tiempoTranscurrido {margin-left:10px} /* == VIDEO CONTROL EN STOP == */ #video-controls-stop, #video-controls-stopLive, #video-controls-stopMiddle {top:0;visibility:visible;} #video-controls-stop h1, #video-controls-stopLive h1, #video-controls-stopMiddle h1, .presentacion {position:absolute; left:12px} #video-controls-stop h1, video-controls-stopLive h1, #video-controls-stopMiddle h1 {bottom:34px; margin:0 0 2rem 3px; color:rgba(256,256,256,1); font-weight:400; line-height:3.2rem; font-size:2.6rem !important; letter-spacing:0.5px} .presentacion {bottom:6px} .presentacion button#ver-video, .presentacion button#ver-videoLive, .presentacion button#ver-videoMiddle {padding:0; color:rgba(256,256,256,1); font-size:1.6rem; text-transform:uppercase} /*.presentacion button#ver-video:after, .presentacion button#ver-videoLive:after, .presentacion button#ver-videoMiddle:after {content:"|"; color:rgba(256,256,256,.7);margin-left:5px}*/ .presentacion button#ver-video:hover, .presentacion button#ver-videoLive:hover, .presentacion button#ver-videoMiddle:hover {text-decoration:none} .presentacion #totalDurationStop, .presentacion #totalDurationStopLive, .presentacion #totalDurationStopMiddle {color:rgba(256,256,256,1); font-weight:300; font-size:1.6rem} .videoWrapperFS{width:100% !important;} @media (max-width: 767px) { .videoWrapper {position:relative; width:100%;} } #maximizarLive { display: none; } input[type=range] { display: block; width: 100%; -webkit-appearance: none; height: 6px; border-radius: 6px; background-image:-webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 1)); background-image:-o-linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 1)); background-image:-moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 1)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 1)); }