@font-face {
    font-family: 'aller';
    src: url('../fonts/allerdisplay-webfont.eot');
    src: url('../fonts/allerdisplay-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/allerdisplay-webfont.woff2') format('woff2'),
         url('../fonts/allerdisplay-webfont.woff') format('woff'),
         url('../fonts/allerdisplay-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.fs(@size, @line){
	font-size: @size;
	line-height: @line;
}
.wh(@width, @height){
	width: @width;
	height: @height;
}

.background-resize{	
	webkit-background-size: 100% !important;
	moz-background-size:  100% !important;
	o-background-size:  100% !important;
	background-size:  100% !important;
}

.clear{
	content: ".";
	clear: both;
	display: block;
	width: 100%;
	height: 0px;
	overflow: hidden
}

@mainColor: #2f2f2f;
@mainWidth: 1200px;

*{
	margin: 0;
	padding: 0;
	border: 0
}

body {
    color: @mainColor;
    font-family: 'Open Sans', sans-serif;
    .fs (16px, 20px);
}


a{
	text-decoration: none;
	color: @mainColor;
}
.inner{
	width: @mainWidth;
	margin: 0 auto;
}
#header-slider, #main-img{
	width: 100%;
	img{
		width: 100%;
		float: left;
	}
	
	&:after{ .clear }
}

#header-slider{ margin-bottom:35px}
header{
	background: url(../images/menu-bg.png) repeat;
	
	border-bottom: 1px solid #bcbbbb;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	nav{
		.fs (14px, 14px);
		font-weight: bold;
		text-transform: uppercase;
		float: right;
		li{
			display: block;
			float: left;
			list-style: none;
			margin: 0 0 0 1px;
			padding: 42px 10px 14px;
			transition: all 0.5s ease 0s;
			&.current, &:hover { background: @mainColor; a { color: #fff;} }
		}
		&:after{ .clear;}
	}
	.inner > a{ 
		padding: 12px 0; 
		display: block;
		.wh(140px, 45px);
		float: left;
	}
}

footer{
	color: #6e6e6e;
	padding: 15px 0 65px;
	.fs(14px, 14px);
	background: #2f2f2f;
}

.main{
	h1, h2{
		font-family: 'aller';
		.fs(48px, 51px);
		font-weight: normal;
		margin: 0 0 30px;
		border-bottom: 1px solid #d5d5d5;
		span{
			background: url(../images/h2-bg.gif) no-repeat 0 5px;
			padding: 0 0 10px 45px;
		}
	}
	h1{
		margin-top: 35px;
	}
	#kontakt.box .txt .lead img{ float: left; margin: 0 10px 0 0}
	.box{
		width: 100%;
		h2{ margin-top: 10px;}
		.txt{
			width: 600px;
			float: right;
			text-align: right;
			.lead { 
				padding: 0 0 0 50px; 
				table{ width: 100%;}
				td{
					vertical-align: top;
					width: 50%;
					img{
						float: left;
						margin: 0 10px 0 0
					}
				}
			}
		}
		.img, #map-box{
			width: ~"calc(100% - 600px)";
			float: left;
			padding: 61px 0 0;
			img{ width: 100%; float: left}
		}
		#map-box {
			height: 500px;
			float: right;
			#map{
				width: 100%;
				height: 100%
			}
		}
		&:nth-child(2n+1), &.contact{
			.img, #map-box{
				float: right;
			}
			.txt{
				float: left;
				text-align: left;
				.lead{ padding: 0 50px 0 0;}
			}
		}
		
		.separator{
			clear: both;
			display: block;
			width: 100%;
			height: 55px;
			background: #f7f7f7;
			overflow: hidden
		}
		&:last-child{ .separator{ height:0}}
		
		&:after{ .clear;}
	}
	
	.gallery-list{
		.gallery-item{
			margin: 0 35px 35px 0;
			float: left;
			.wh(370px, 370px);
			overflow: hidden;
			transition: all 0.5s ease 0s;
			opacity: 0.9;
			&:hover{ opacity: 1}
			&:nth-child(3n) {margin-right: 0}
		}
		
		.separator{
			clear: both;
			display: block;
			width: 100%;
			height: 55px;
			background: #f7f7f7;
			overflow: hidden
		}
		
		&:after{.clear;}
	}
	
	.content{
		margin: 0 0 50px;
	}
}	


#form, #form-contact, #MemberLoginForm_LoginForm, #MemberLoginForm_LostPasswordForm{
	width: 470px;
	margin: 30px 0 45px;
	h2{
		.fs(14px, 18px);
		margin: 0 0 20px;
		text-transform: uppercase;
	}
	input{
		color: @mainColor;
		font-family: 'Open Sans', sans-serif;
		.fs (12px, 18px);
		padding: 5px 15px;
		width: ~"calc(100% - 30px)";
		border: 1px solid #b2b2b2;
		background: #f7f7f7;
	}
	textarea{
		color: @mainColor;
		font-family: 'Open Sans', sans-serif;
		.fs (12px, 18px);
		padding: 5px 15px;
		width: ~"calc(100% - 30px)";
		height: 60px;
		border: 1px solid #b2b2b2;
		background: #f7f7f7;
		resize: none;
	}
	.field{
		margin: 0 0 10px;
		position: relative;
		label{
			position: absolute;
			top: 6px;
			left: 15px;
			color: #838585
		}
	}
	.action{
		width: 100px;
		background: #ffffff;
		cursor: pointer;
		font-family: 'aller';
		.fs(18px, 22px);
		font-weight: normal;
		text-transform: uppercase;
		float: right;
		padding: 10px 10px;
		transition: all 0.5s ease 0s;
		&:hover { background: @mainColor; color: #fff; }
	}
	&:after{ .clear }
}
#MemberLoginForm_LostPasswordForm .action{ width: 400px; float: none; margin: 0 0 10px 40px }

#MemberLoginForm_LoginForm,
#MemberLoginForm_LostPasswordForm
{
	float: none;
	.checkbox {
		label{ display: block !important; top:0}
	}
}


.popup{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/menu-bg.png) repeat;
	z-index: 1000;
}
.popup-inner{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 340px;
	height: 150px;
	margin: -100px 0 0 -170px;
	padding: 25px 0;
	background: #fff;
	border: 1px solid #b2b2b2; 
	font-family: "aller";
    font-size: 17px;
	text-align: center;
	z-index: 100;
	-webkit-box-shadow: -3px 3px 3px 0px rgba(1,30,32,0.31);
	-moz-box-shadow: -3px 3px 3px 0px rgba(1,30,32,0.31);
	box-shadow: -3px 3px 3px 0px rgba(1,30,32,0.31);
	
	img{ cursor: pointer}
	.popup-ok{ float: right; margin: 0 20px 20px}
}


@media (max-width: 1300px) {
	.inner { width: 90%}
	.main .box .img, #map-box { width: ~"calc(100% - 600px)" !important;}
	.main .box .txt{ margin-bottom: 20px;}
	
	.main .gallery-list{
		.gallery-item{
			margin-right: 34px !important;
			width: ~"calc(50% - 17px)";
			img{ width: 100%} 
			&:nth-child(2n) {margin-right: 0 !important;}
		}
	}
}

@media (max-width: 1100px) {
	.main .box .img,  .main .box #map-box { width: 100% !important; float: none !important; margin: 0 auto 10px !important; &:after{.clear; }}
	.main .box .txt { width: 100% !important; float: none !important;}
	.main .box .txt .lead{ padding:0 !important}
	
	#form { width: 100%}
}

@media (max-width: 880px) {
	.main .gallery-list{
		width: 370px;
		margin: 0 auto;
		.gallery-item{
			margin-right: 0 !important;
			width: 370px;
			float: none;
			img{ width: 100%} 
		}
	}
}

@media (max-width: 600px) {
	.menu-mobile{
		background: url(../images/menu-mobile.png) no-repeat;
		.wh(44px, 36px);
		float: right;
		margin: 20px 0 0 0;
	}
	header nav ul{
		position: absolute;
		left: 0;
		top: 70px;
		width:100%;
		display: none;
		background: url(../images/menu-bg.png) repeat;
		li{ width:100%; float:none; padding: 20px 0; border-bottom: 1px solid #bcbbbb; text-align:center; margin:0} 
	}
	#header-slider, #main-img{
		height: 680px;
		img{ height: 100%; width: auto !important}
	}
	#main-img{ height: 380px; overflow:hidden}
	
}


@media (max-width: 520px) {
	#kontakt.box .txt .lead div:first-child { margin: 0 0 20px;}
}