/*! yBox - v1.0 - 2020-08-07
* By Yuval Ashkenazi and Yoav Leshem
* https://github.com/Leshemiko/Ybox */

.yBoxOverlay *{
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.yBoxOverlay{
	background:rgba(0,0,0,0.5);
	display:flex;
	justify-content:center;
	align-items:center;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:10000;
	visibility:hidden;
	filter:alpha(opacity=0);
	opacity:0;
	-khtml-opacity:0;
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
.yBoxOverlay.active{
	visibility:visible;
	filter:alpha(opacity=100);
	opacity:1;
	-khtml-opacity:1;
}
.yBoxImgZoom{
	width:100%;
	max-height:100%;
	overflow:hidden;
}
.yBoxFrame{
	background:#fff;
	max-width:-webkit-calc(100% - 10px);
	max-width:calc(100% - 10px);
	max-height:-webkit-calc(100vh - 10px);
	max-height:calc(100vh - 10px);
	z-index:10001;
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
	-webkit-transform:translate(0,30px);
	transform:translate(0,30px);
}
.yBoxOverlay.active .yBoxFrame{
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
.closeYbox{
	background:#FFF;
	background-size:100% 100%;
	width:35px;
	height:35px;
	position:absolute;
	top:10px;
	right:10px;
	margin:0;
	padding:0;
	border:none;
	outline:none;
	cursor:pointer;
	z-index:3;
}
.closeYbox::before,
.closeYbox::after{
	content:'';
	background-color:#616161;
	width:71%;
	height:2px;
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform:translate(-50%,-50%) rotate(45deg);
	transform:translate(-50%,-50%) rotate(45deg);
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
	will-change:background-color,transform;
}
.closeYbox::after{
	-webkit-transform:translate(-50%,-50%) rotate(-45deg);
	transform:translate(-50%,-50%) rotate(-45deg);
}
.closeYbox:hover::before{
	background-color:#CC0033;
	-webkit-transform:translate(-50%,-50%) rotate(135deg);
	transform:translate(-50%,-50%) rotate(135deg);
}
.closeYbox:hover::after{
	background-color:#CC0033;
	-webkit-transform:translate(-50%,-50%) rotate(45deg);
	transform:translate(-50%,-50%) rotate(45deg);
}
.yBoxIframe{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
.yBoxFrame.yBoxIframeWrap{
	width:1200px;
	height:750px;
}
.yBoxFrame.yBoxIframeWrap .insertYboxAjaxHere{
	position:absolute;
	max-height:100%;
	left:10px;
	top:10px;
	right:10px;
	bottom:10px;
}
.insertYboxAjaxHere{
	min-width:150px;
	min-height:23px;
	max-height:-webkit-calc(100vh - 140px);
	max-height:calc(100vh - 140px);
	overflow:auto;
	padding:50px 19px 13px;
}
.yBoxFrame.yBoxImgWrap .insertYboxAjaxHere{
	padding:10px;
	max-height:-webkit-calc(100vh - 10px);
	max-height:calc(100vh - 10px);
}
.yBoxFrame.yBoxImgWrap img.yBoxImg{
	max-width:-webkit-calc(100vw - 50px);
	max-width:calc(100vw - 50px);
	max-height:-webkit-calc(100vh - 30px);
	max-height:calc(100vh - 30px);
	vertical-align:top;
}
.yBoxFrame.yBoxImgWrap .yBoxNextImg,
.yBoxFrame.yBoxImgWrap .yBoxPrevImg{
	background:none;
	width:30%;
	height:100%;
	position:absolute;
	top:0;
	border:none;
	outline:none;
	cursor:pointer;
	z-index:2;
}
.yBoxFrame.yBoxImgWrap .yBoxNextImg{left:0;}
.yBoxFrame.yBoxImgWrap .yBoxPrevImg{right:0;}
.yBoxFrame.yBoxImgWrap .yBoxNextImg::after,
.yBoxFrame.yBoxImgWrap .yBoxPrevImg::after{
	content:'';
	width:10px;
	height:10px;
	position:absolute;
	top:90%;
	border-bottom:3px solid rgba(255,255,255,0.7);
	border-left:3px solid rgba(255,255,255,0.7);
}
.yBoxFrame.yBoxImgWrap .yBoxPrevImg::after{
	right:30px;
	-webkit-transform:translate(0,-50%) rotate(-135deg);
	transform:translate(0,-50%) rotate(-135deg);
}
.yBoxFrame.yBoxImgWrap .yBoxNextImg::after{
	left:30px;
	-webkit-transform:translate(0,-50%) rotate(45deg);
	transform:translate(0,-50%) rotate(45deg);
}
.yBoxFrame.yBoxImgWrap .yBoxNextImg:hover::after,
.yBoxFrame.yBoxImgWrap .yBoxPrevImg:hover::after{
	border-bottom-color:#fff;
	border-left-color:#fff;
}
.yBoxLoaderWrap{
	text-align:center;
	position:absolute;
	right:0;
	left:0;
	top:0;
	bottom:0;
	height:100%;
	width:100%;
}
.yBoxLoader{
    width:16px;
    height:16px;
    border-radius:50%;
    position:relative;
    animation:loader-circles 1s linear infinite;
    top:50%;
    margin:-8px auto 0 auto;
	zoom:0.5;
}
@keyframes loader-circles{
  0% {
    box-shadow:0 -27px 0 0 rgba(0, 0, 0, 0.05), 19px -19px 0 0 rgba(0, 0, 0, 0.1), 27px 0 0 0 rgba(0, 0, 0, 0.2), 19px 19px 0 0 rgba(0, 0, 0, 0.3), 0 27px 0 0 rgba(0, 0, 0, 0.4), -19px 19px 0 0 rgba(0, 0, 0, 0.6), -27px 0 0 0 rgba(0, 0, 0, 0.8), -19px -19px 0 0 #ffffff; }
  12.5% {
    box-shadow:0 -27px 0 0 #ffffff, 19px -19px 0 0 rgba(0, 0, 0, 0.05), 27px 0 0 0 rgba(0, 0, 0, 0.1), 19px 19px 0 0 rgba(0, 0, 0, 0.2), 0 27px 0 0 rgba(0, 0, 0, 0.3), -19px 19px 0 0 rgba(0, 0, 0, 0.4), -27px 0 0 0 rgba(0, 0, 0, 0.6), -19px -19px 0 0 rgba(0, 0, 0, 0.8); }
  25% {
    box-shadow:0 -27px 0 0 rgba(0, 0, 0, 0.8), 19px -19px 0 0 #ffffff, 27px 0 0 0 rgba(0, 0, 0, 0.05), 19px 19px 0 0 rgba(0, 0, 0, 0.1), 0 27px 0 0 rgba(0, 0, 0, 0.2), -19px 19px 0 0 rgba(0, 0, 0, 0.3), -27px 0 0 0 rgba(0, 0, 0, 0.4), -19px -19px 0 0 rgba(0, 0, 0, 0.6); }
  37.5% {
    box-shadow:0 -27px 0 0 rgba(0, 0, 0, 0.6), 19px -19px 0 0 rgba(0, 0, 0, 0.8), 27px 0 0 0 #ffffff, 19px 19px 0 0 rgba(0, 0, 0, 0.05), 0 27px 0 0 rgba(0, 0, 0, 0.1), -19px 19px 0 0 rgba(0, 0, 0, 0.2), -27px 0 0 0 rgba(0, 0, 0, 0.3), -19px -19px 0 0 rgba(0, 0, 0, 0.4); }
  50% {
    box-shadow:0 -27px 0 0 rgba(0, 0, 0, 0.4), 19px -19px 0 0 rgba(0, 0, 0, 0.6), 27px 0 0 0 rgba(0, 0, 0, 0.8), 19px 19px 0 0 #ffffff, 0 27px 0 0 rgba(0, 0, 0, 0.05), -19px 19px 0 0 rgba(0, 0, 0, 0.1), -27px 0 0 0 rgba(0, 0, 0, 0.2), -19px -19px 0 0 rgba(0, 0, 0, 0.3); }
  62.5% {
    box-shadow:0 -27px 0 0 rgba(0, 0, 0, 0.3), 19px -19px 0 0 rgba(0, 0, 0, 0.4), 27px 0 0 0 rgba(0, 0, 0, 0.6), 19px 19px 0 0 rgba(0, 0, 0, 0.8), 0 27px 0 0 #ffffff, -19px 19px 0 0 rgba(0, 0, 0, 0.05), -27px 0 0 0 rgba(0, 0, 0, 0.1), -19px -19px 0 0 rgba(0, 0, 0, 0.2); }
  75% {
    box-shadow:0 -27px 0 0 rgba(0, 0, 0, 0.2), 19px -19px 0 0 rgba(0, 0, 0, 0.3), 27px 0 0 0 rgba(0, 0, 0, 0.4), 19px 19px 0 0 rgba(0, 0, 0, 0.6), 0 27px 0 0 rgba(0, 0, 0, 0.8), -19px 19px 0 0 #ffffff, -27px 0 0 0 rgba(0, 0, 0, 0.05), -19px -19px 0 0 rgba(0, 0, 0, 0.1); }
  87.5% {
    box-shadow:0 -27px 0 0 rgba(0, 0, 0, 0.1), 19px -19px 0 0 rgba(0, 0, 0, 0.2), 27px 0 0 0 rgba(0, 0, 0, 0.3), 19px 19px 0 0 rgba(0, 0, 0, 0.4), 0 27px 0 0 rgba(0, 0, 0, 0.6), -19px 19px 0 0 rgba(0, 0, 0, 0.8), -27px 0 0 0 #ffffff, -19px -19px 0 0 rgba(0, 0, 0, 0.05); }
  100% {
    box-shadow:0 -27px 0 0 rgba(0, 0, 0, 0.05), 19px -19px 0 0 rgba(0, 0, 0, 0.1), 27px 0 0 0 rgba(0, 0, 0, 0.2), 19px 19px 0 0 rgba(0, 0, 0, 0.3), 0 27px 0 0 rgba(0, 0, 0, 0.4), -19px 19px 0 0 rgba(0, 0, 0, 0.6), -27px 0 0 0 rgba(0, 0, 0, 0.8), -19px -19px 0 0 #ffffff; }
}
@media screen and (max-width:767px){
	.yBoxFrame.yBoxImgWrap .insertYboxAjaxHere{padding:5px;max-height:-webkit-calc(100vh - 10px);max-height:calc(100vh - 10px);}
	.closeYbox{top:5px;right:5px;}
	.yBoxFrame.yBoxImgWrap img.yBoxImg{max-width:-webkit-calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:-webkit-calc(100vh - 20px);max-height:calc(100vh - 20px);}
	.yBoxFrame.yBoxImgWrap .yBoxPrevImg::after{right:50%;width:10px;height:10px;}
	.yBoxFrame.yBoxImgWrap .yBoxNextImg::after{left:50%;width:10px;height:10px;}
	.yBoxFrame.yBoxIframeWrap .insertYboxAjaxHere{left:5px;right:5px;top:5px;bottom:5px;}
	.yBoxFrame.yBoxImgWrap .yBoxNextImg, .yBoxFrame.yBoxImgWrap .yBoxPrevImg{width:50px;max-width:30%;height:50%;top:80%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
	.yBoxFrame.yBoxImgWrap .insertYboxAjaxHere{height:-webkit-calc(100vh - 10px);height:calc(100vh - 10px);}
	.yBoxFrame.yBoxImgWrap{width:-webkit-calc(100vw - 10px);width:calc(100vw - 10px);height:-webkit-calc(100vh - 10px);height:calc(100vh - 10px);}
	.yBoxImgZoom{display:flex;justify-content:center;align-items:center;background:#000;height:100%;overflow:hidden;}
}
@media screen and (max-width:479px){
	.yBoxFrame.yBoxImgWrap, .yBoxFrame.yBoxIframeWrap{height:-webkit-calc(100vh - 80px);height:calc(100vh - 80px);}
	.yBoxFrame.yBoxImgWrap .insertYboxAjaxHere, .yBoxFrame.yBoxIframeWrap .insertYboxAjaxHere{height:-webkit-calc(100vh - 80px);height:calc(100vh - 80px);}
	.yBoxFrame.yBoxImgWrap img.yBoxImg, .yBoxIframe{max-height:-webkit-calc(100vh - 90px);max-height:calc(100vh - 90px);}
}