/** ========== New HTML5 Autoplay Video ========== */

/* ===========================
    Video AutoPlay
    Update: 11/04/2019
    Version: 4.6.4
====================================== */

.preview-canvas {width:100%;min-width:80px;margin:auto;position:absolute;left:0;right:0;top:0;bottom:0;}

/** HTML Video tag style. */
.preview-video {width:100%;height:auto;min-width:80px;margin:auto;position:relative;left:0;right:0;top:0;bottom:0;object-fit:contain;}

/** Play button container */
.preview-ui-container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;right: 0;
    top: 0;bottom: 0;
    margin:auto;
    overflow:hidden;
}
.preview-ui-container > .icon {
    position: absolute;
    left:0;right:0;top:0;bottom:0;
    margin:auto;
}
.preview-ui-container > .backupimage {
    width:100%;
    position: absolute;
    left:0;right:0;top:0;bottom:0;
    margin:auto;
}

/* ===== Advertisement ===== */

.advertisement-label-container {
    position:absolute;
    margin:0px;
    padding:0px;
    width:auto;
    left:0;
    top:0;
}
.advertisement {
    background-color:rgba(102,102,102,0.5);
    position:relative;
    margin: 10px;
    padding:5px 8px;
    font:10px/12px Arial, STXihei, Microsoft Yahei, Helvetica, sans-serif !important;
    color:#fff !important;
    width:auto !important;
    height:12px !important;
    -webkit-border-radius:5px;
    border-radius:5px;
    float:left;
    cursor:default;
    opacity:0.5;
    -webkit-transition: opacity 0.3s cubic-bezier(0.0,0.0,0.2,1);
    transition: opacity 0.3s cubic-bezier(0.0,0.0,0.2,1);
}

/* ===== Top Call to Action ===== */

.top-vidcta-container {
    position:absolute;
    width:100%;
    height:auto;
    min-height:30px;
    max-height:100px;
    top:0;
    text-align:center;
    cursor:pointer;
    background: rgba(255,255,255,0) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0))) !important;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%) !important;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%) !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ) !important;
		
    -webkit-transition: opacity 0.3s cubic-bezier(0.0,0.0,0.2,1);
    transition: opacity 0.3s cubic-bezi5er(0.0,0.0,0.2,1);
    opacity:0;
}
.top-vidcta-container.full-video-height {
    height:100%;
    max-height:100%;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(10%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))) !important;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.0) 10%, rgba(0,0,0,0) 100%) !important;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 100%) !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ) !important;
}
.top-vidcta-container.show-controller {opacity:1;display:block;}
.top-vidcta-container .text-vidcta-wrapper {position:relative;display:inline-block;height:14px;margin:8px auto 0;font-family: Helvetica, Arial, sans-serif;text-align:center;color:white;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.top-vidcta-container .text-vidcta-wrapper span {display:block;width:auto;min-width:14px;height:14px;font-size:12px;line-height:12px;float:left;margin:0;padding:0 2px;-webkit-user-select:none;user-select:none;}
.top-vidcta-container .text-vidcta-wrapper .icon-cta {width:12px;height:12px;fill:#fff;padding:1px;}
.top-vidcta-container:hover .text-vidcta-wrapper .cta-text {text-decoration:underline;}

/* ===== Progress Bar ===== */

.progress-container {
    background-color:#666;
    position:absolute;
    width:100%;
    height:3px;
    bottom:0;
    border-bottom: 0px solid #000;
}
.timebar {
    background-color:#fff;
    position:absolute;
    height:inherit;
    border-bottom: 1px solid inherit;
}

/* ===== Controllers ===== */

.controllers-container {
    position:absolute;
    bottom:0px;
    width:100%;
    height:19.4%;
    min-height:38px;
    max-height:70px;
    padding:10px 15px 0;
    background: transparent !important;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%) !important;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%) !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ) !important;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-size:12px;
    opacity:0;

    -webkit-transition: opacity 0.3s cubic-bezier(0.0,0.0,0.2,1), bottom 0.3s cubic-bezier(0.0,0.0,0.2,1) 0.3s;
    transition: opacity 0.3s cubic-bezi5er(0.0,0.0,0.2,1), bottom 0.3s cubic-bezier(0.0,0.0,0.2,1) 0.3s;
}
.controllers-container.show-controller {
    opacity:1;
    display:block;
}
.controllers-container > div, .controllers-container span {
    height:38px;
    line-height:38px;
    font-weight:bold;
    color: #ccc;
}
.controls_wrapper {bottom:0px;position:absolute;}
.controls_wrapper.float-to-right {right:0;width:auto;overflow:hidden;}
.controls_wrapper.float-to-left {left:0;width:50%;overflow:hidden;}
.controls_wrapper.float-to-right > div {float:left;margin:0;}
.controls_wrapper.float-to-left > div {float:left;margin:0;}

.player-time {font-family: Helvetica, Arial, sans-serif;left:0px;bottom:0px;color:#fff;position:relative;cursor:default;float:left;}
.mid-cta {position:absolute;width:100%;height:18px;margin:auto !important;left:0;bottom:0px;cursor:pointer;font-family: Helvetica, Arial, sans-serif;text-align:center;color:#ccc;
/* When hide audio button
text-align:right;*/}
.mid-cta:hover {text-decoration:underline;}
.controls_wrapper > .audio,
.controls_wrapper > .fs {position:relative;background-color:rgba(0,0,0,0);width:18px;height:18px;border:0;
/* When hide audio button
display:none !important;*/}

.video-round-btn {-webkit-border-radius:50%;border-radius:50%;-webkit-transition:scale 0.5s ease-out,opacity 0.2s ease-out,background 0.2s ease-out;transition:scale 0.2s ease-out,opacity 0.2s ease-out,background 0.2s ease-out;padding:10px;display:block;line-height:0;z-index:10;}
.video-round-btn:hover, .video-round-btn:active, .video-round-btn:focus {opacity:1;cursor:pointer;}
.video-round-btn path, .video-round-btn polygon {fill:#fff;}

.audio .speaker {fill:white;-webkit-transition: fill 0.5s;transition: fill 0.5s;}
.audio .wave1 {opacity:0;-webkit-animation:anim-wave1 1s infinite;animation:anim-wave1 1s infinite;}
.audio .wave2 {opacity:0;-webkit-animation:anim-wave2 1s infinite;animation:anim-wave2 1s infinite;}
.audio .cross {opacity:0;fill:white;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
@-webkit-keyframes anim-wave1 {0%{opacity:0;}50%,100%{opacity:1;}}@keyframes anim-wave1 {0%{opacity:0;}50%,100%{opacity:1;}}
@-webkit-keyframes anim-wave2 {0%,50%{opacity:0;}100%{opacity:1;}}@keyframes anim-wave2 {0%,50%{opacity:0;}100%{opacity:1;}}

.is-muted {right:0;}
.is-muted > span {opacity:1;}
.audio.is-muted .wave1 {opacity:0;-webkit-animation:none;animation:none;}
.audio.is-muted .wave2 {opacity:0;-webkit-animation:none;animation:none;}
.audio.is-muted .cross {opacity:1;}

.video-no-sound > span {opacity:1;}
.audio.video-no-sound .speaker, 
.audio.video-no-sound .wave1, .audio.video-no-sound .wave2,
.audio.video-no-sound .cross 
{fill:#777;}

/* ====================
CSS for Fullscreen Icon
======================= */
.fs .openfs, .fs .closefs {fill:white;}
.fs .closefs, .exit-fs .openfs {display:none;}
.exit-fs .closefs {display:block;}

/* ===== Player State  ===== */

.status-container {
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    vertical-align:middle;
    top:0;
    cursor:pointer;
    text-align:center;
    table-layout: fixed;
}
.is-youtube {display:none !important;}
.status-container.paused-state, .status-container.ended-state {background-color:rgba(0,0,0,.5);}

.status-container .btn-wrapper {position:absolute;vertical-align:middle;text-align:center;width:50px;height:50px;z-index:98;margin:auto;left:0;right:0;top:0;bottom:0;}

.status-container .video-round-btn {position:relative;background-color:rgba(0,0,0,0);margin:auto;padding:10px;width:30px;height:30px;z-index:98;/*border:3px solid #fff;*/}
.no-mp4 .video-round-btn {background-color:rgba(0,0,0,0);padding:10px;width:20px;height:20px;z-index:98;}

.invisible-tap-area {position:absolute;left:0;top:0;width:100%;height:100%;}
.pause,.replay,.status-cta {display:none;-webkit-tap-highlight-color:rgba(0,0,0,0);font-family: Helvetica, Arial, sans-serif;}
.icon-cta {display:inline-block;width:12px;height:1em;padding:0 0 0 8px;fill:#ccc;}

.status-container .video-player-icons {position:absolute;left:0;right:0;top:0;bottom:0;width:30px;height:30px;margin:auto;}
.status-container .buffer {position:absolute;left:0;right:0;top:0;bottom:0;width:50px;height:50px;margin:auto;}
.no-mp4 .status-container .buffer {width:20px;height:20px;}

.loader-base {fill:rgba(0,0,0,0.3);stroke:#999;stroke-width:5;}
.no-mp4 .loader-base {fill:rgba(0,0,0,0);opacity:0.5;}

.preload-state .buffer {-webkit-animation: none;animation: none;}
.loader-dot {fill:none;stroke:#fff;stroke-width:5;stroke-dasharray: 0;stroke-dashoffset: 0;stroke-linecap: round;-webkit-animation: none;animation: none;}

.status-container svg, .controllers-container svg {pointer-events:none;}

/* ===== Player Logic ===== */

@-webkit-keyframes rotate {
  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes rotate {
  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-webkit-keyframes spin-loader {
    30% {stroke-dasharray: 100 1006;stroke-dashoffset: 0;}
    89.999%,100% {stroke-dasharray: 755 1006;stroke-dashoffset: -251;-webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);}
}
@keyframes spin-loader {
    30% {stroke-dasharray: 100 1006;stroke-dashoffset: 0;}
    89.999%,100% {stroke-dasharray: 755 1006;stroke-dashoffset: -251;animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);}
}
@-webkit-keyframes complete-loader {
    100% {stroke-dasharray: 755 1006;stroke-dashoffset: 0;}
}
@keyframes complete-loader {
    100% {stroke-dasharray: 755 1006;stroke-dashoffset: 0;}
}
@-webkit-keyframes show-paused-anim {0%{opacity:0;-webkit-transform:scale(0.8);}60%{opacity:1;-webkit-transform:scale(1.1);}100%{opacity:1;-webkit-transform:scale(1);}}
@keyframes show-paused-anim {0%{opacity:0;transform:scale(0.8);}60%{opacity:1;transform:scale(1.1);}100%{opacity:1;transform:scale(1);}}
@-webkit-keyframes bounce-videoicon {
    50% {-webkit-transform:scale(0.9)}
}
@keyframes bounce-videoicon {
    50% {transform:scale(0.9)}
}

.paused-state .status-cta:hover, .paused-state .status-cta:hover path, .ended-state .status-cta:hover, .ended-state .status-cta:hover path {color:#fff;fill:#fff;}
.status-container.paused-state .video-round-btn, .status-container.ended-state .video-round-btn {opacity:1 !important;-webkit-animation: show-paused-anim 0.5s ease-in-out forwards;animation: show-paused-anim 0.5s ease-in-out forwards;}
.paused-state .status-cta, .ended-state .status-cta {display:block;position:relative;width:auto;min-width:80px;padding:15px 0 0 0;font-weight:normal;font-size:0.8em;color:#ccc;position:relative;margin:auto -45px;z-index:5;}
.hidden-player-icon {opacity:0;-webkit-transition: opacity 0.3s ease-in;transition: opacity 0.3s ease-in;}
.status-container.playing-state, .playing-state .buffer, .preload-state~.progress-container, .preload-state~.progress-container, .nosound-state~.progress-container, .previewend-state~.progress-container, .paused-state .mid-cta.hidden-player-icon, .ended-state .mid-cta.hidden-player-icon {opacity:0;}
.playing-state .hidden-player-icon, .paused-state .hidden-player-icon, .ended-state .hidden-player-icon, previewend-state, .paused-state {opacity:1;}
.nosound-state .play, .nosound-state .pause, .nosound-state .replay, .paused-state .pause, .ended-state .play, .ended-state .pause, .nosound-state .player-time, .nosound-state .player-time, .status-container .speaker, .status-container .cross, .controllers-container.preload-state, .controllers-container.nosound-state, .controllers-container.previewend-state, .controllers-container.ended-state, .playing-state .play {display:none;}
.paused-state .play, .ended-state .replay, .nosound-state .speaker, .nosound-state .cross, .controllers-container.playing-state,  .controllers-container.paused-state, .paused-state .play {display:block;}
.preload-state .buffer .loader-dot {stroke-dasharray: 0 1006;stroke-dashoffset: 0;-webkit-animation: spin-loader 2s infinite;animation: spin-loader 2s infinite;}
.nosound-state .buffer .loader-dot {stroke-dasharray: 0 1006;stroke-dashoffset: 0;
/*Looping Animation Time Video 8s = 26s Looping time */
-webkit-animation: complete-loader 26s forwards linear 0.1s;
animation: complete-loader 26s forwards linear 0.1s;

-webkit-animation-play-state: running;
animation-play-state: running;}
.previewend-state .video-round-btn {-webkit-animation: bounce-videoicon 1s infinite;animation: bounce-videoicon 1s infinite;}
.nosound-state.pause-preloader-animation .buffer .loader-dot {-webkit-animation-play-state: paused !important;animation-play-state: paused !important;}

/* For Youtube Embed */
.other-player-controls .previewend-state, .other-player-controls .ended-state,
.other-player-controls .paused-state .video-round-btn
{display:none;}
.other-player-controls .playing-state, .other-player-controls .paused-state {
    display:none;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.54) 10%, rgba(0,0,0,0) 96%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.54) 10%,rgba(0,0,0,0) 96%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.54) 10%,rgba(0,0,0,0) 96%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#00000000',GradientType=0 );
    background:rgba(0,0,0,0);
    height:80%;
}
.other-player-controls .paused-state .status-cta {display:none;margin-top:10%;text-shadow: 0px 0px 10px #000000;}


/* ===== No Ad Label ===== */

.no-ad-label .advertisement-label-container {display:none !important;}
.no-ad-label .player-time {left:0px;}


/* =========================== IE10 Compatible ====================================== */

html[data-useragent*='MSIE 10.0'] .additional-controllers .btn_play > img,
html[data-useragent*='MSIE 10.0'] .additional-controllers .btn_audio > img ,
html[data-useragent*='MSIE 10.0'] .additional-controllers .btn_findmore_icon_img
{height:200% !important;}

html[data-useragent*='MSIE 10.0'] #innityAppsPlayBtn-video1,
html[data-useragent*='MSIE 10.0'] #innityAppsLoadIcon-video1 {height:auto !important;}
html[data-useragent*='MSIE 10.0'] .fs {display:none !important;}

@media (max-width:414px) {
    .paused .status-cta {padding:10px 0 0 0;}
    .mid-cta {opacity:0 !important;height:30px !important;margin-top:15px !important;}
}
@media (max-width:375px) {
    .paused-state .status-cta, .ended-state .status-cta {padding-top:8px;}
    .player-time {opacity:0;}
}

/** ========== New HTML5 Autoplay Video ========== */
/** ========== Version: 4.4.0 (Update: 23/05/2018) ========== */
.apps-video-wrapper {
    width: 100%;
    height: 100%;
    min-width:80px;
    position: relative;
    overflow: hidden;
}
.apps-creative-video {
    width: 100%;
    position: absolute;
    vertical-align: middle;
    left: 0;
    top: -999px;
    bottom: -999px;
    margin: auto;
		object-fit:contain;
}
.apps-video-control-wrapper, .apps-video-ended-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.apps-video-control-wrapper .player-time {opacity:1;}

.apps-video-poster-container img {
    width: 100%;
		position:relative;
		display:block;
}
.apps-video-poster-container {
		position:relative; width: 100%; height: 100%;
		display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;
		-webkit-align-items: center;
		align-items: center;
}
.apps-video-poster-play-container, .apps-video-ended-wrapper {
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    vertical-align:middle;
    top:0;
    cursor:pointer;
    text-align:center;
    table-layout: fixed;
}
.apps-video-ended-wrapper {
    background-color:rgba(0,0,0,0.5);
}
.apps-video-poster-play-container .video-player-icons, .apps-video-ended-wrapper .video-player-icons {position:absolute;left:0;right:0;top:0;bottom:0;width:30px;height:30px;margin:auto;}
.apps-video-poster-play-container .buffer, .apps-video-ended-wrapper .buffer {position:absolute;left:0;right:0;top:0;bottom:0;width:50px;height:50px;margin:auto;}
.apps-video-poster-play-container path, .apps-video-poster-play-container polygon, .apps-video-ended-wrapper path, .apps-video-ended-wrapper polygon {fill:#fff;}
.apps-video-ended-wrapper .video-fssvg {position:absolute;width:18px;height:18px;right:0;bottom:0;border:0;margin:10px;}
.apps-video-ended-wrapper .replay, .apps-video-ended-wrapper .openfs {display:block !important;}
.apps-video-ended-wrapper .closefs {display:none !important;}
/** ========== New HTML5 Autoplay Video ========== */