/**
 * @package    MediaElement
 * @author     Daniel Sevcik <sevcik@webdevelopers.cz>
 * @version    $Revision: 1.0 $
 * @copyright  2014 Daniel Sevcik
 * @since      2014-07-03 23:11:01 UTC
 * @access     public
 */

/* Logo on hover */
/*
.mediaelement-player .mejs-inner:after {
    transition: 1s opacity;
    opacity: 0.8;
    background-image: url("../data/i/player-logo.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    content:"";
    position: absolute;
    top: 5%;
    left: 5%;
    width: 20%;
    height: 50%;
}
.mediaelement-player.mediaelement-playing .mejs-inner:after {
    opacity: 0;
}
*/

/* Interaction - hide panel while playing */
.mejs-controls {
    transition: opacity 1s;
}

/* For IE8 and bellow we don't use background-image but real <img> that is stretch-able as <=IE8 does not support background-size CSS */
.mejs-layers .mejs-poster img { /* When incorrect aspect ratio then bg's poster is visible under default <img> poster tag */
    /* display: none; */
    height: 100% !important;
    width: 100%;
    display: block !important\9; /* IE8 and bellow: CSS from mediaelementjs hides it */
}
.mejs-poster {
    background-position: center center;
    background-image: none !important\9; /* IE8 and bellow */
    background-color: black;
}

.mediaelement-player.mediaelement-playing .mejs-controls {
    opacity: 0.7;
}
.mejs-controls:hover, .mejs-controls:active {
    opacity: 1 !important;
}
.mediaelement-player {
    margin: 0px !important; /* Problem with video player in sys:cms-tabs on Olympus */
}
.mediaelement-player.mediaelement-playing:not(.mediaelement-interaction) {
    cursor: none;
}
.mediaelement-player.mediaelement-playing:not(.mediaelement-interaction) .mejs-controls {
    opacity: 0;
}
/* Animations */
.mediaelement-list {
    transition: height 0.5s, width 0.5s;
}
.mediaelement-player {
    transition: width 0.5s;
}
.mediaelement-aspect {
    transition: padding-top 0.5s;
}

/* Floating */
.mediaelement.list-count-1.left .mediaelement-player {
    float: left;
    margin: 1em 2em;
}

.mediaelement.list-count-1.right .mediaelement-player {
    float: right;
    margin: 1em 2em;
}

.mediaelement.list-count-1.center .mediaelement-player {
    display: block;
    margin: 1em auto;
}

/* Common Design */
.mediaelement-item {
    cursor: pointer;
}

.mediaelement-initializing .mediaelement-item {
    opacity: 0.3;
}

.mediaelement .message-loading {
    background-image: url(loading.gif);
    background-color: black;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}
.mediaelement .message-loading i {
    display: none;
}
.mediaelement-clear {
    clear: both;
}
/* .mejs-controls .mejs-captions-button button { */
/*	opacity: 0.8; */
/* } */
/* .mejs-controls .mejs-captions-enabled button { */
/*	opacity: 1; */
/* } */

/* Apple iPad Hacks */
/* .mejs-ios.mejs-video.mejs-container-fullscreen */
/* .mejs-ipad.mejs-video.mejs-container-fullscreen .mejs-captions-button { */
/*	display: none; */
/* } */
/* .mejs-ipad.mejs-captions-layer { */
/*	border: 2px solid red; */
/* } */
/* .mejs-ipad .mejs-captions-layer { */
/*	border: 2px solid red; */
/* } */
/* .mejs-ipad .mejs-captions-position { */
/*	top: 15px !important; */
/* } */

/* jQuery iPop Hacks */
.mediaelement-ipop .mediaelement-player {
    width: 640px !important;
    max-width: 100%;
}

/* Detect widget resizing */
.mediaelement-resize-detector {
    display: absolute;
    width: 0px;
    height: 100%;
    overflow: scroll;
    visibility: hidden;
    width: 20px;
    border: 2px solid red;
    position: absolute;
    top: 0px;
    z-index: 10000;
}
.mediaelement-resize-detector div {
    height: 200%;
}

/* To achieve fixed aspect ratio - height adjusts according to width */
.mediaelement-player {
    display: block;
    position: relative;
    min-width: 250px;
}
.mediaelement-player .mediaelement-aspect {
    padding-top: 56.25%; /*16:9 ratio - padding-top in % is relative to the width! */
    display: block;
}
.mediaelement-player .mediaelement-player-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}
.mediaelement-meta {
    display: none;
}
/* IE9: initial width / height '100%' is interpreted in IE9 as '100px' */
.mejs-container,
.mejs-layer,
.mejs-video video {
    width: 100% !important;
    height: 100% !important;
}

/* Responsive Tweaks */
.me-plugin, .me-plugin object, /* Flash container IE8 */
.mejs-container
{
    /* We control the width/height using outer responsive elements */
    width: 100% !important;
    height: 100% !important;
}
.mejs-controls .mejs-captions-button .mejs-captions-selector {
    height: auto !important;
}
/* workaround for video being as tall as video content and height:100% being ignored: taskId.16815003 */
.mejs-mediaelement {
    overflow: hidden;
}
.mejs-mediaelement video {
    object-fit: contain;
    object-position: top;
}