#video-container { width: 250px; top: 150px; overflow: hidden; overflow-y: auto; z-index: 996; position: fixed; right: 60px; margin: auto; max-height: calc(100vh - 380px);
	-ms-overflow-style: none; 
	scrollbar-width: none;
}
#video-container li { display: block; cursor: pointer; position: relative; width: 100%; height: auto; overflow: hidden; border-radius: 12px; margin: 15px 0; z-index: 1; }
#video-container li .box { background: #898989; overflow: hidden; position: relative; height: 142px; border-radius: 12px; -webkit-border-radius: 12px; }
#video-container li video { width: 100%; height: 100%; border-radius: 12px; -webkit-border-radius: 12px;
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	transform: scaleX(-1);
}
#video-container li.screen { cursor: pointer; }
#video-container li.screen video { 
	-webkit-transform: scaleX(1) !important;
	-ms-transform: scaleX(1) !important;
	transform: scaleX(1) !important;
}
#video-container li.hide { display: none !important; }

#video-container li .icon { display: none; }

#video-container li.detach { border-radius: 0; position: fixed; z-index: 0; margin: auto; left: 0; right: 0; top: 140px; width: 88%; height: 80%; }
#video-container li.detach .box { height: 100%; max-height: inherit; border-radius: 0; }
#video-container li.detach .icon { z-index: 1; width: 25px; height: 25px; position: absolute; bottom: 10px; cursor: pointer; }
#video-container li.detach .icon.min { right: 35px; background: url(../images/common/icn_minimize.svg) no-repeat center center; background-size: cover; }
#video-container li.detach .icon.max { right: 5px; background: url(../images/common/icn_maximize.svg) no-repeat center center; background-size: cover; }

#video-container li.med { width: 88%; max-width: 580px; height: 326px; }
#video-container li.big { width: 88%; max-width: 1190px; max-height: 670px; height: 50vw; }

#video-container li .name { z-index: 1; width: 100%; height: 45px; padding: 20px 15px 10px; color: #fff; overflow: hidden; position: absolute; bottom: 0;  box-sizing: border-box; text-align: left;  
	background: url(../images/common/overlay.png) repeat-x center center;
	background-size: auto 100%;
}

#videos { width: 100%; }

#video-sizes { text-align: center; display: none; color: #fff; z-index: 999; width: 270px; height: 70px; padding: 10px 30px; box-sizing: border-box; border-radius: 50px; background: #000; position: fixed; top: 40px; left: 0; right: 0; margin: auto; }
#video-sizes.show { display: flex; }
#video-sizes label { width: 21%; position: relative; overflow: hidden; }
#video-sizes label p { height: 100%; opacity: 0.5; font-size: 16px; display: flex; align-items: flex-end; align-content: flex-end; flex-wrap: wrap; justify-content: center; }
#video-sizes label input[type="radio"] { position: absolute; opacity: 0; left: -20px; }
#video-sizes label input[type="radio"]:checked+p { opacity: 1; }
#video-sizes label span { display: block; width: 100% ; height: 15px; font-size: 14px; }
#video-sizes label .icon { box-sizing: border-box; margin: 0 0 5px; }

#video-sizes .small .icon { width: 15px; border-bottom: 2px solid #fff; }
#video-sizes .med .icon { width: 17px; height: 17px; border: 2px solid #fff; }
#video-sizes .big .icon { width: 25px; height: 25px; border: 2px solid #fff; }

#video-sizes .full { width: 37%; }
#video-sizes .full .icon { width: 25px; height: 25px; border: 2px solid #fff; position: relative; }
#video-sizes .full .icon:before,
#video-sizes .full .icon:after { position: absolute; content: ''; display: block; background: #000; left: 0; top: 0; bottom: 0; right: 0; margin: auto; }
#video-sizes .full .icon:before { width: calc(100% + 4px); height: 10px; left: -2px; }
#video-sizes .full .icon:after { height: calc(100% + 4px); width: 10px; left: -2px; }


.full_overlay { display: none; background: #171717; position: fixed; z-index: 991; width: 100%; height: 100%; left: 0; top: 0; }

body.full .full_overlay { display: block; }
body.full #video-sizes { top: 10px; }
body.full #video-container { width: 208px; right: 10px; }
body.full #video-container li .box { height: 117px; }
body.full #video-container li.detach.full { width: calc(100% - 252px); height: calc(100% - 200px); right: auto; left: 15px; top: 90px; }
body.full #video-container li.detach.full .box { height: 100%; }


@media only screen and (min-device-width: 375px) and (max-device-width: 1000px) and (orientation: landscape) {
	#video-container li .box { position: relative;}
	#video-container { width: 165px; top: 50%; max-height: 100%; left: auto; right: 20px; margin: 0; transform: translateY(-50%);}
	#video-container li .box { height: 92px;}
}
/* ------------------------------------------------------------ responsive */

@media only screen and (max-width:720px) {
	#video-sizes { display: none !important; } 

	#video-container { overflow-x: auto; display: flex; width: 100%; height: auto; padding: 0; background: #171717; left: 0; right: 0; top: 0; }
	#video-container li .icon { display: block; }
	#videos { margin: auto; width: auto; display: flex; flex-wrap: nowrap; box-sizing: border-box; padding: 0 10px; }
	#video-container li { margin: 10px 5px; width: 180px; display: inline-block; order-radius: 8px; -webkit-border-radius: 8px; }
	#video-container li .box { height: 120px; border-radius: 8px; -webkit-border-radius: 8px; }

	#video-container li.med,
	#video-container li.big { top: 140px;  width: 100%; }

	body.full .full_overlay { z-index: 996; }
	body.full #video-container li { display: none; } 
	body.full #video-container li.detach.full { width: 100%; height: 56vw; top: 0; bottom: 0; left: 0; display: block; }

	body.full #video-container li .icon.min { right: 5px; }
	body.full #video-container li .icon.max { display: none; }
}