#video-container {/*  width: 250px; */ top: 150px; overflow: hidden; overflow-y: auto; z-index: 996; position: fixed; right: 0px; margin: auto; /* max-height: calc(100vh - 380px); */max-height: 400px; -ms-overflow-style: none;scrollbar-width: none;right: 30px;
}
/* for mac or ios when width not set it not so the aspect widht so do this */
#video-container:has(#videos li:only-child) {
	width: 250px;
}
#video-container li { display: block; cursor: pointer; position: relative; width: 100%; height: auto; overflow: hidden;  z-index: 1; max-width: 170px;max-height: 100px;min-width: 170px;}
#video-container li .box { background: #898989; overflow: hidden; position: relative; height: 98px;  }
#video-container li video { width: 100%; height: 100%; 
	-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; max-height: 326px;}
#video-container li.big { width: 88%; max-width: 1190px; max-height: 670px; height: 50vw;margin-left: 70px; }

#video-container li .name { z-index: 1; width: 100%; height: 45px; padding: 20px 10px 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%;max-width: 423px;display: grid;grid-template-columns: repeat(2, 1fr); direction: rtl;}

#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: 400px; right: 10px; }
body.full #video-container li .box { height: 113px; }
body.full #video-container li.detach.full { width: calc(100% - 425px); height: calc(100% - 200px); right: auto; left: 15px; top: 90px; max-width:calc(100% - 252px); max-height: calc(100% - 0px);  }
body.full #video-container li.detach.full .box { height: 100%; }









#videos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;  /* 2 columns: col 1 = left, col 2 = right */
	grid-auto-rows: minmax(100px, auto);
	direction: ltr;
	                 /* space between tiles */
}



@media (max-width: 900px) {
	#video-container { overflow-x: auto; display: flex; width: 100%; height: auto; padding: 0; background: #171717; left: 0; right: 0; top: 0; }

	#videos {
		display: grid;
		/* 2 rows, columns expand horizontally */
		grid-auto-flow: column;
		grid-template-rows: repeat(2, auto);
		grid-auto-columns: 150px;    /* each column width */
		grid-template-columns: unset;/* let auto-columns create new columns */
		max-width: 100%;
		direction: ltr;              /* important for consistent col numbers */
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: auto;
	}
	#video-container:has(#videos li:only-child) {
		width: auto;
	}
}


@media only screen and (min-device-width: 375px) and (max-device-width: 1000px) and (orientation: landscape) {
	#video-container li .box { position: relative;}
	#video-container li {width: 150px;min-width: 150px;height: 85px;min-height: 85px;}
	#video-container { width: 304px; top: 130px; max-height: 100%; left: auto; right: 20px; margin: 0; /* transform: translateY(-40%); */ height: 330px;  overflow-y: scroll;}
	#video-container li .box { height: 85px;}
	
	#video-container li.med{width: 80% !important;} 
	#video-container li.med {left: -210px;}
	#video-container li.big{width: 72%;max-width: 875px; max-height: 670px;height: 41vw;margin-left: 0;top: 130px;}
	body.full #video-container li.detach.full {max-height: calc(100vh - 200px);}
	#videos {grid-auto-rows: minmax(80px, auto);}
}
/* ------------------------------------------------------------ responsive */

@media only screen and (max-width:900px) {
	#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 {
		display: grid;
		grid-auto-flow: column;                  
		grid-template-rows: repeat(2, auto);    
		  
		grid-auto-columns: 150px;  
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: auto;
		grid-template-columns: unset;
		max-width: 100%;
		direction: ltr;
	}
	
	body.full #video-container li.detach.full {max-width: 100% !important;max-height: 100% !important;}
	


	/* Make media fit the cell even if width/height attributes exist */
	#videos .box,
	#videos video{
		width: 100% !important;
		height: auto;
		display: block;
		
	}

	
	#video-container li {  width: 150px;  }
	#video-container li .box { height: 85px; }

	#video-container li.med,
	#video-container li.big { top: 170px;  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; }
	#video-container li.big{margin-left: 0px;}
}