/*** Overlays / .page-overlay, .overlay-window ***/
.page-overlay{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	.transition(~"all 0.5s ease-in-out");
	opacity: 0;
	z-index: 1030;
	visibility: hidden;
	&.show{
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		opacity: 1;
		visibility: visible;
	}
}
.overlay-window{
	visibility: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000000;
	.transform(~"translateY(100%)");
	.transition(~"all 0.5s");
	opacity: 0;
	&.show{
		opacity: 1;
		visibility: visible;
		.transform(~"translateY(0%)");
	}
	.loaded-content{
		opacity: 0;
		.transition(~"opacity 0.5s");
		&.show{
			opacity: 1;
		}
	}
	.content-container{
		overflow: auto;
		position: absolute;
		top: 90px;
		bottom: 25px;
		left: 0;
		width: 100%;
		padding-top: 40px;
		padding-bottom: 20px;
		.field{
			text-transform: uppercase;
			font-weight: @fw-600;
		}
	}
	.overlay-content{
		opacity: 0;
		&.show{
			opacity: 1;
			.transition(~"opacity 0.5s ease-in-out");
		}
	}
	.overlay-view{
		overflow: auto;
		position: absolute;
		top: 90px;
		bottom: 25px;
		left: 0;
		width: 100%;
		padding-top: 40px;
		padding-bottom: 20px;
	}
	iframe{
		visibility: hidden;
		&.show{
			visibility: visible;
		}
	}
}
.overlay-zoom{
	.transform(~"translateY(200px)");
	.ie9 &, .ie10 &, .ie11 &, .edge &{
		.transform(~"none");
	}
}
.cross{
	display: block;
	float: right;
	position: relative;
	.transition(~"all 0.6s");
	width: 40px;
	height: 40px;
	.transition(~"all .3s");
	margin: 25px;
	&:before, &:after{
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #fff;
		.transform(~"translateZ(0)");
		backface-visibility: hidden;
		left: 0%;
		top: 50%;
		margin-top: -1px;
		bottom: auto;
		right: auto;
		height: 2px;
		.transform(~"translateY(-50%)");
		.transition(~"all .3s");
	}
	&:after{
		.transform(~"translateY(0px) rotate(45deg)");
	}
	&:before{
		.transform(~"translateY(0px) rotate(-45deg)");
	}
}
.overlay-window .next{
	display: block;
	float: left;
	position: relative;
	.transition(~"all 0.6s");
	width: 20px;
	height: 40px;
	.transition(~"all .3s");
	margin: 25px;
	&:before, &:after{
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #fff;
		.transform(~"translateZ(0)");
		backface-visibility: hidden;
		left: 0%;
		bottom: auto;
		right: auto;
		height: 2px;
		.transform(~"translateY(-50%)");
		.transition(~"all .3s");
	}
	&:before{
		top: 12px;
		.transform(~"rotate(45deg)");
	}
	&:after{
		top: 26px;
		.transform(~"rotate(-45deg)");
	}
}
.previos{
	display: block;
	float: left;
	position: relative;
	.transition(~"all 0.6s");
	width: 20px;
	height: 40px;
	.transition(~"all .3s");
	margin: 25px;
	&:before, &:after{
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #fff;
		.transform(~"translateZ(0)");
		backface-visibility: hidden;
		left: 0%;
		bottom: auto;
		right: auto;
		height: 2px;
		.transform(~"translateY(-50%)");
		.transition(~"all .3s");
	}
	&:before{
		top: 12px;
		.transform(~"rotate(-45deg)");
	}
	&:after{
		top: 26px;
		.transform(~"rotate(45deg)");
	}
}
.overlay-control{
	height: 90px;
}
#fancybox-close{
	display: inline-block !important;
    font: normal normal normal 17px/1 FontAwesome !important;
	top: -18px !important;
    right: -18px !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
	background: transparent none repeat scroll 0% 0% !important;
	width: auto !important;
	&:before{
		content: "\f057" !important;
		color: #fff !important;
		.transition(~"color 0.3s");
	}
	&:hover:before{
		color: #f3f3f3 !important;
	}
}
#fancybox-content{
	-webkit-box-shadow: 0px 0px 0px 25px rgba(255,255,255,0.09);
	-moz-box-shadow: 0px 0px 0px 25px rgba(255,255,255,0.09);
	box-shadow: 0px 0px 0px 25px rgba(255,255,255,0.09);
}
.play-button{
	font-size: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	.transform(~"translate(-50%, -50%)");
	&.style-big{
		font-size: 100px;
	}
	&.style-dark{
		color: rgba(4,0,0,0.7);
		text-shadow: 2px 2px 2px rgba(105, 105, 105, 0.8);
		
	}
	&.style-light{
		color: rgba(255,255,255,0.8);
		text-shadow: 2px 2px 2px rgba(150, 150, 150, 0.8);
	}
}
.preview-cell{
	display: block;
	position: relative;
	margin-bottom: 0px;
	font-size: 0px;
}
.image-overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	&.pattern-1-dark{ background: url(../overlays/pattern-1-dark.png); }
	&.pattern-1-light{ background: url(../overlays/pattern-1-light.png); }
	&.pattern-2-dark{ background: url(../overlays/pattern-2-dark.png); }
	&.pattern-2-light{ background: url(../overlays/pattern-2-light.png); }
	&.pattern-3-dark{ background: url(../overlays/pattern-3-dark.png); }	
	&.pattern-3-light{ background: url(../overlays/pattern-3-light.png); }	
	&.pattern-4-dark{
		background: url(../overlays/pattern-4-dark.png) center left;
		background-size: 1.25%;
		opacity: 0.7;
	}
	&.pattern-4-light{
		background: url(../overlays/pattern-4-light.png) center left;
		background-size: 1.25%;
		opacity: 0.7;
	}
	&.overlay-2-dark{
		background: url(../overlays/overlay-2-dark.svg);
		background-size: cover;
		background-position: center center;
	}
	&.overlay-2-light{
		background: url(../overlays/overlay-2-light.svg);
		background-size: cover;
		background-position: center center;
	}
}
#svg-1-dark{
	.stroke {
		stroke: fadeout(#ffffff, 70%);
		stroke-width: 0.5px;
	}
	.shape-1 {
		fill: fadeout(#69645c, 95%);
	}
	.shape-2 {
		fill: fadeout(#69645c, 90%);
	}
	.shape-3 {
		fill: fadeout(#69645c, 95%);
	}
}
#svg-1-light{
	.stroke {
		stroke: fadeout(#ffffff, 55%);
		stroke-width: 0.5px;
	}
	.shape-1 {
		fill: fadeout(#ffffff, 95%);
	}
	.shape-2 {
		fill: fadeout(#ffffff, 90%);
	}
	.shape-3 {
		fill: fadeout(#ffffff, 95%);
	}
}
#svg-2-dark{
	.stroke {
		stroke: fadeout(#ffffff, 60%);
		stroke-width: 0.5px;
	}
	.shape-1 {
		fill: fadeout(#69645c, 78%);
	}
	.shape-2 {
		fill: fadeout(#69645c, 85%);
	}
}
#svg-2-light{
	.stroke {
		stroke: fadeout(#ffffff, 55%);
		stroke-width: 0.5px;
	}
	.shape-1 {
		fill: fadeout(#ffffff, 80%);
	}
	.shape-2 {
		fill: fadeout(#ffffff, 90%);
	}
}
.flask-scene-visibility{
	@media (max-width: 1400px) {
		display: none;
	}
	@media (max-height: 715px) {
		display: none;
	}
}
.flask.bubles-only{
	margin: 0 0 20px 120px;
}
.lamp-scene-visibility{
	@media (max-width: 1023px) {
		display: none;
	}
}

.item-table-center{
	margin-left: -100px;
}
.item-table-left{
	margin-left: 50px;
}