File: /var/www/html/wppartneramazingsecret/wp-content/themes/themify-ultra/themify/css/modules/video.css
.tf_video_wrap{
position:absolute;
top:100%;
left:0;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
font-family:Helvetica,Arial;
padding:7px 20px;
transform:translateY(-100%);
transition:.3s .5s;
transition-property:transform,opacity;
background:linear-gradient(transparent,rgba(0,0,0,.35));
z-index:999;
color:#fff
}
.tf_video_lazy.tf_video_touched .tf_video_wrap,
.tf_video_lazy:hover .tf_video_wrap{
transition-delay:.2s;
opacity:1;
transform:translateY(-100%)
}
.tf_video_lazy{
font-size:13px;
color:#fff;
display:flex
}
.tf_video_lazy:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:500;
pointer-events:none
}
.tf_video_lazy button,
.tf_video_wrap button,
.tf_video_download{
background:none;
border:none;
padding:0;
color:#fff;
margin:0;
outline:0;
font-size:inherit;
font-weight:400;
transform:none;
box-shadow:none;
letter-spacing:normal;
text-decoration:none;
border-radius:0;
transition:none
}
.tf_is_pip button.tf_video_pip,
.tf_video_wrap button:hover,
.tf_video_download:hover{
background:none;
color:#0073aa;
transform:none;
box-shadow:none
}
.tf_video_controls{
display:flex;
font-size:1.5em;
align-items:center
}
.tf_video_wrap button.tf_video_mute,
.tf_video_lazy button.tf_video_pip,
.tf_video_lazy button.tf_video_airplay,
.tf_video_lazy button.tf_video_fullscreen{
width:1em;
height:1em;
display:flex;
align-items:center
}
.tf_video_lazy button.tf_video_pip,
.tf_video_lazy button.tf_video_airplay,
.tf_video_volumn_wrap,
.tf_video_download{
margin-right:15px
}
button.tf_video_pip .tf_fa{
width:1em
}
.tf_video_progress_wrap{
background:rgba(255,255,255,.8);
flex-grow:1;
height:10px;
border-radius:3px
}
.tf_video_waiting .tf_video_progress_wrap{
background:linear-gradient(-45deg,rgba(255,255,255,.4) 25%,transparent 0,transparent 50%,rgba(255,255,255,.4) 0,rgba(255,255,255,.4) 75%,transparent 0,transparent);
background-size:15px 15px;
animation:tf-buffering-stripes 2s linear infinite
}
@keyframes tf-buffering-stripes{
0%{background-position:0 0}
to{background-position:30px 0}
}
.tf_video_progress_wrap div{
transform-origin:0 0;
transform:scaleX(0);
contain:strict;
transition:transform .2s linear;
border-radius:inherit
}
.tf_video_progress_loaded{
background:#fff;
z-index:1
}
.tf_video_progress_current{
background:#0073aa;
z-index:2
}
.tf_video_wrap input.tf_video_volumn_range,
.tf_video_wrap input.tf_video_progress_range{
cursor:pointer;
opacity:0;
z-index:3;
margin:0;
padding:0;
border:0;
outline:0;
display:block;
border-radius:0;
background:none;
transition:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
transform:none
}
.tf_video_progress_range::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:10px;
background:transparent
}
.tf_video_progress_range::-moz-range-thumb{
-moz-appearance:none;
appearance:none;
width:10px;
background:transparent
}
.tf_video_wrap input.tf_video_volumn_range{
background:transparent;
opacity:1;
overflow:hidden;
width:100%;
height:100%;
cursor:s-resize
}
.tf_video_volumn_range::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:0;
box-shadow:-100vw 0 0 100vw #fff;
height:8px
}
.tf_video_volumn_range::-moz-range-thumb{
-webkit-appearance:none;
-moz-appearance:none;
width:0;
box-shadow:-100vw 0 0 100vw #fff;
height:8px
}
.tf_video_progress_wrap .tf_video_hover{
transition:none;
color:#111;
font-size:10px;
line-height:1;
z-index:4;
background:#eee;
border:1px solid #333;
bottom:100%;
top:auto;
left:auto;
right:auto;
line-height:normal;
padding:0 3px 2px;
display:inline-table;
contain:style layout;
margin:0 0 7px 2px
}
.tf_video_hover.tf_abs:after{
content:'';
position:relative;
left:50%;
transform:translateX(-50%);
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#333 transparent transparent transparent;
display:block;
margin-bottom:-7px
}
.tf_video_play:before{
display:inline-block;
content:"";
width:0;
height:0;
border:0 solid transparent;
border-width:.7em 0 .7em 1.4em;
border-left-color:currentColor;
vertical-align:middle;
margin-top:-4px;
transition:.1s height linear,.1s border-width linear
}
.tf_video_total_time,
.tf_video_current_time{
margin:0 12px
}
.tf_video_is_playing .tf_video_play:before{
border-style:double;
border-width:0 0 0 1.4em;
height:14px
}
.tf_video_mute svg.tf_fa{
transition:transform .1s,visibility .1s;
width:100%;
height:100%;
position:absolute;
top:0;
left:0
}
.tf_muted .tf-fas-volume-up,
.tf_video_mute .tf-fas-volume-mute{
visibility:hidden;
transform:translateX(-100%)
}
.tf_muted .tf-fas-volume-mute{
visibility:visible;
transform:translateX(0)
}
.tf_video_lazy .tf_big_video_play{
position:absolute;
top:50%;
left:50%;
opacity:1;
transform:translate(-50%,-50%);
transition:opacity .3s;
z-index:502;
border-radius:100%;
padding:1.2em 1.05em;
background:#fff;
color:#000
}
.tf_video_lazy .tf_big_video_play:before{
margin:0 0 0 4px;
font-size:1.3em
}
.tf_video_is_playing .tf_big_video_play:before{
margin:0;
height:23px
}
.tf_video_is_playing .tf_big_video_play{
opacity:0
}
.tf_play_disabled{
opacity:.5
}
.tf_video_volumn_inner{
width:115px;
flex-grow:1;
background:rgba(255,255,255,.33);
height:8px;
position:absolute;
transform:rotate(-90deg) scaleX(0);
transition:transform .3s .5s;
top:-18px;
left:5px;
transform-origin:8px 8px;
z-index:502
}
.tf_video_volumn_wrap:hover .tf_video_volumn_inner{
transition-delay:.1s;
transform:rotate(-90deg) scaleX(1)
}
.tf_video_volumn_inner:after,
.tf_video_volumn_inner:before{
content:'';
width:100%;
height:8px;
position:absolute;
top:0;
left:0;
transform:translateY(-100%)
}
.tf_video_volumn_inner:after{
transform:translateY(100%)
}
.tf_hide_controls{
cursor:none
}
.tf_video_lazy.tf_is_fullscreen video{
height:100%;
object-fit:contain
}
.tf_hide_controls.tf_is_fullscreen .tf_video_wrap,
.tf_video_is_playing .tf_video_wrap{
transition-delay:1.5s;
opacity:0;
transform:translateY(100%)
}
.tf_video_lazy .tf_loader{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:502;
display:none;
font-size:5em
}
.tf_video_lazy .tf_loader:before{
border:.1em solid rgba(255,255,255,.5);
border-left-color:rgba(255,255,255,.9)
}
.tf_video_waiting .tf_loader{
display:block
}
.tf_video_lazy input:active,
.tf_video_lazy input:active+div,
.tf_video_lazy button:active{
outline:none!important
}
.tf_video_lazy button.tf_video_seek{
background:rgba(0,0,0,.6);
border-radius:50%;
opacity:0;
top:50%;
left:15px;
width:6em;
height:6em;
transform:translateY(-50%);
transition:opacity .3s;
z-index:502;
font-size:.7em
}
.tf_video_touched .tf_big_video_play,
.tf_video_touched .tf_video_seek{
opacity:1
}
.tf_video_lazy button.tf_video_seek_right{
left:auto;
right:15px
}
.tf_video_seek span{
display:block;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:.8em
}
.tf_video_seek .tf_fa{
font-size:3.2em;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.tf_hide.tf_video_hover,
.tf_video_ended .tf_video_play:before{
display:none
}
.tf_video_ended .tf_hide.tf-fas-undo-alt{
display:inline-block;
font-size:1.3em
}
.tf_video_ended .tf_big_video_play .tf-fas-undo-alt{
font-size:1.33em
}
@media (pointer:coarse){
.tf_video_wrap{
padding:7px
}
.tf_video_mute:focus+.tf_video_volumn_inner{
transition-delay:.1s;
transform:rotate(-90deg) scaleX(1)
}
.tf_video_wrap input.tf_video_progress_range{
padding-bottom:20px
}
}