/* ======================================================================================================================================================
Video
====================================================================================================================================================== */
.avia-video,
.avia-iframe-wrap{
clear:both;
position: relative;
margin-bottom:20px;
}
.avia-video,
.avia-video iframe,
.avia-video video{
background-color: #000;
}
/*responsive iframe trick*/
.avia-video iframe,
.js_active .avia-iframe-wrap iframe,
div .avia-video .avia-iframe-wrap{
position: absolute;
width:100%;
height:100%;
left:0;
top:0;
padding:0;
}
.avia-video-custom{
height:0;
}
.avia-video-16-9,
.js_active .avia-iframe-wrap{
padding-bottom: 56.25%;
height: 0;
}
.avia-video-9-16,
.js_active .avia-iframe-wrap{
padding-bottom: 178%;
height: 0;
}
.avia-video-4-3{
padding-bottom: 75%;
height: 0;
}
.avia-video-3-4{
padding-bottom: 133.5%;
height: 0;
}
/*html 5 video - always has 100 width and natural height. behaves like image when it comes to aspect ratio*/
video{
width: 100%;
height: auto;
}
.mejs-layer{
z-index: 1;
width: 100% !important;
}
.mejs-layer.mejs-overlay-play{
height: 100% !important;
}
#top .avia-video .mejs-container,
#top .avia-video .mejs-container video{
height: 100% !important;
width: 100% !important;
position: absolute;
}
#top .avia-video .av-click-to-play-overlay{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 1000;
}
#top .avia-video .av-click-to-play-overlay .avia_playpause_icon{
display: block;
transition: opacity 0.4s ease-out;
}
#top .avia-video .av-click-to-play-overlay:hover .avia_playpause_icon{
opacity: 0.7;
}
.avia-video .mejs-poster,
.avia-video{
background-position: center center;
background-size: cover;
}
.avia-video .mejs-poster{
position: absolute;
height: 100% !important;
width: 100% !important;
top: 0;
left: 0;
}