/*------------------------------------------------------



------------------------------------------------------*/
#top-page #page-title { margin-bottom: 0;}

@media (min-width: 768px) {

}

@media (max-width: 767px) {

}



/*------------------------------------------------------



------------------------------------------------------*/
#movie { position: relative; margin-bottom: 0; background-color: #000;}

#videoWrap { line-height: 1; transition: all 0.4s; padding: 0;}
#videoWrap * { transition: all 0.4s;}




#videoWrap video {
    width: 100%;
    height: calc(100% - 100px);
    /* border-top: 30px solid #000;
    border-bottom: 30px solid #000; */
}

#videoWrap video[poster]{
    object-fit: cover
}

#videoWrap button {

    cursor: pointer;
    padding: 0;
    color: #fff;
    background-color: transparent;
    border: 0;
    line-height: 1;
	border-radius: 50%;
	margin-right: 10px;
}

#controller-box {
    padding: 25px 10px 25px;
    position: relative;
    text-align: center;
	display:-webkit-box; display:-ms-flexbox; display:flex; justify-content: center; align-items: center;
}

#video-file {
    display: none;
}

#video-play.hide ,
#video-pause.hide ,
#video-vol .hide { display: none;}

#full-screen {}

#videoWrap.full { max-width: 100vw; z-index: 100; padding: 0; }
#videoWrap.full video {}


#progress-wrap {

    width: calc(100% - 40px);
    height: 2px;
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 1;
}

#progress-out {
    width: 100%;
    height: 100%;
    background-color: rgba(68, 68, 68, 1);
    transform: scaleY(1.0);
    transition: 0.3s;
}

#progress-out:hover {
    transform: scaleY(1.0);
    cursor: pointer;
}

#progress-in {
    margin: 0 auto 0 0;
    width: 100%;
    height: 100%;
    background-color: #f00;
    transform-origin: top left;
    transition: 0.1s;
    transform: scaleX(0);
}

#progress-buff {
    margin: 0 auto 0 0;
    width: 100%;
	height: 100%;
    background-color: #FFFFFF;
    transform-origin: top left;
    transition: 0.1s;
    transform: scaleX(0);
    top: -2px;
    position: relative;
    z-index: -1;
}

/* Loading overlay displayed over the video while waiting to be playable */
#videoWrap .loading-overlay{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 2.4rem;
    z-index: 150;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    opacity: 1;
    visibility: visible;
}
#videoWrap .loading-overlay.hidden{
    opacity: 0;
    visibility: hidden;
}
#videoWrap .loading-overlay .percent{
    background: rgba(0,0,0,0.35);
    padding: 12px 18px;
    border-radius: 6px;
}


#skip { position: absolute; right: 20px; bottom: 15px; font-size: 1.2rem; font-weight: 700; }
#skip a { color: #fff; text-decoration: none;}

@media (min-width: 768px) {
	/* #movie { height: 85vw; max-height: 840px; background-position: left 200px;} */
	#videoWrap { position: relative;}

	#full-screen { width: 44px; height: 44px;}
	#video-play { width: 44px; height: 44px;}
	#video-pause { width: 44px; height: 44px;}
	#video-vol { width: 44px; height: 44px;}

	#videoWrap.full { width: auto; /*max-width: calc(((100vh - 130px) / 0.5625) + 40px);*/  }
	#videoWrap.full video {}
}


@media (max-width: 767px) {
	/* #movie { padding-bottom: 30px;} */

	#videoWrap { margin-left: 0; margin-right: 0;}

	#full-screen { width: 40px; height: 40px;}
	#video-play { width: 40px; height: 40px;}
	#video-pause { width: 40px; height: 40px;}
	#video-vol { width: 44px; height: 44px;}

	/* #videoWrap.full { width: 100%; margin-left: 0; margin-right: 0;} */
	#controller-box { padding-top: 20px;}
}