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

}

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

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

@mainWidth: 1020px;
@color: #d31d24;

.clear{
	content: ".";
	clear: both;
	display: block;
	width: 100%;
	height: 0px;
	overflow: hidden
}
 html, body {height:100%;overflow:auto}
body{
	background: #fff;
	font-family: 'PT Sans', sans-serif;
	color: #3f3f3f;
	.fs(14px, 20px)
}

a{
	text-decoration: none;
	color: #3f3f3f;
	&:hover{ color: @color }
	&.active { color: @color }
}
a:focus, a:link, a:visited {
	-moz-outline: none;
	outline: none; 
}

.in{
	width: @mainWidth;
	margin: 0 auto;
	position: relative;
	top:0;
	left: 0
}
.background-resize{	
	webkit-background-size: 100% !important;
	moz-background-size:  100% !important;
	o-background-size:  100% !important;
	background-size:  100% !important;
}
.bgBox{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0
}

.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%\9 !important;
}
.fullscreen {
    width:100%;
    min-height:100%;
}
.not-fullscreen{
    height:370px;
    overflow:hidden;
}

#menu{
	.fs(17px, 20px);
	color: #424242;
	text-transform: uppercase;
	padding: 35px 0;
	position: fixed;
	background: #fff;
	width: 100%;
	z-index: 100;
	overflow: hidden;
	.logo{
		float: left;
		margin-top: -10px
	}
	ul{
		float: right;
		&:after{ .clear }
		li{
			list-style: none;
			float: left;
			margin: 10px 40px 0 0
		}
	}
}
#container{
	position: absolute;
	top: 110px;
	left: 0;
	width: 100%;
}
section{
	position: relative;
	h2{
		text-transform: uppercase;
		font-weight: normal;
		font-family: 'dax';
		float: left;
		width: 540px;
		.fs(25px, 60px);
		color: #b9b9b9;
		strong{
			color: #262626;
			.fs(70px, 70px);
			display: block;
		}
	}
	.info{
		text-transform: uppercase;
		float: left;
		width: 480px;
		margin: 65px 0 0;
		color: #3f3f3f;
		.fs(14px, 20px)
	}
	.navi{
		&:before{ .clear; }
		div{
			background: url(../img/navi-bg.png) no-repeat -15px 0;
			width: 11px;
			height: 11px;
			overflow: hidden;
			float: left;
			margin: 35px 5px 60px 0;
			&.active{ background-position: 0 0;}
		}
		&:after{ .clear; }
	}
	.list{
		li{
			float: left;
			list-style: none;
		}
		&:after{ .clear; }
		&.c3{
			margin-bottom: -40px;
			li{ 
				margin: 15px 0 55px 0;
				width: 33%;
				text-align: center;
				.fs(20px, 22px);
				font-weight: bold;
				text-transform: uppercase;
				.name{
					color: #b9b9b9;
					display: block;
					margin: 13px 0;
				}
				img{ width: 168px;}
				&:nth-child(1){ .more{ color: #d31d24}}
				&:nth-child(2){ .more{ color: #ee5b1b}}
				&:nth-child(3){ .more{ color: #43b7cc}}
				&:nth-child(4){ .more{ color: #efdd43}}
				&:nth-child(5){ .more{ color: #9334b5}}
				&:nth-child(6){ .more{ color: #50bb22}}
			}
		}
		&.c4{
			li{ 
				margin: 0 0 30px 0;
				width: 25%;
				text-align: center;
				.fs(16px, 20px);
				text-transform: uppercase;
				.name{
					color: #989898;
					display: block;
					margin: 5px 0 0;
				}
				img{
					border: 1px solid #e5e5e5;
					padding: 3px;
				}
				a:hover{
					.name{ color: @color;}
				}
			}
		}
	}
	&#p0, &#p1, &#p3, &#p4, &#p6{
		padding:25px 0 110px;
	}
	&#p2, &#p5{ height: 370px}
	.b3{
		&:after{ .clear; }
		.b{
			width: 33%;
			float: left;
			.txt{ margin: 0 10px}
		}
	}
	.content-a {
		display:table;
		width:100%;
		min-height:100%;
	}
	.content-b {
		display:table-cell;
		position:relative;
		vertical-align:middle;
		text-align:center;
	}
	.separator{
		position: absolute;
		bottom: 0;
		left: 50%;
		background: url(../img/section-separator.gif) no-repeat;
		width: 150px;
		height: 6px;
		margin-left: -75px;
	}
	&#p0{
		padding-bottom:0;
		.bgBox{
			/*background: url(../img/p0-bg.jpg) no-repeat top center;
			.background-resize;*/
			img{ width: 100%}
			.desc{ display: block; }
			.tablet{ display:none ; }
			.mobile{ display:none ; }
		}
		.bg{ 
			background: url(../img/pattern_kv.png) repeat;
			height: 0;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
		.arrow-next{
			cursor: pointer;
		}
		h2{ 
			float: none;
			.fs(70px,70px);
			color: #fff;
			margin: 10px 0 40px;
			span{ 
				background: #2a61ac;
				padding: 5px 15px;
			}
		}
		.txt{
			width: 400px;
			text-transform: uppercase;
			color: #555556;
			.fs(18px, 24px)
		}
	}
	&#p1{
		color: #999999;
		.fs(16px, 20px);
		h3{
			color: @color;
			font-family: 'dax';
			text-transform: uppercase;
			font-weight: normal;
			.fs(25px, 30px);
			margin: 0 0 25px;
		}
	}
	&#p3{
		h2{ width: 260px}
	}
	&#p3a{
		height: 375px;
		text-align: center;
		padding-top: 165px;
		color: #72797f;
		.fs(16px, 20px);
		.bgBox{
			background: url(../img/pattern.png) repeat top center;
			top: 65px;
			height: 390px;
			&.left{
				background: url(../img/black-bg-left.png) no-repeat top center;
				top: 2px;
				width: 254px;
				height: 159px
			}
			&.right{
				background: url(../img/black-bg-right.png) no-repeat top center;
				bottom: 2px;
				top: auto;
				left: auto;
				right: 0;
				width: 275px;
				height: 118px
			}
		}
		h2{
			float: none;
			width: auto;
			.fs(35px, 35px);
			color: #fff;
			margin: 0 0 20px;
			font-family: 'Titillium Web', sans-serif;
		}
		.btn{
			.fs(22px, 22px);
			color: #353d44;
			text-transform: uppercase;
			background: #fff;
			padding: 20px 30px;
			width: 250px;
			border-radius: 35px;
			margin: 50px auto 0;
			cursor: pointer;
		}
		.in{ width: 750px}
	}
	&#p6{
		margin-top:-50px;
		padding-top:90px;
		padding-bottom:0;
		height: 598px;
		color: #5d666e;
		a{
			color: #5d666e;
			&:hover{ color: #e7e7e7}
		}
		text-transform: uppercase;
		.fs(14px, 18px);
		.bgBox{
			&.pattern{
				background: url(../img/pattern.png) repeat top center;
				top: 38px;
				height: 650px;
			}
			&.right{
				background: url(../img/contact-bg-right.png) no-repeat top center;
				top: -4px;
				left: auto;
				right: 0;
				width: 257px;
				height: 150px
			}
		}
		h2{
			color: #5d666e;
			width: 400px;
			strong{ color: #e7e7e7}
		}
		h3{
			color: #cacaca;
			margin:0;
			font-weight: normal;
		}
		.info{ color: #cacaca;}
	}
}

footer{
	background: url(../img/footer-bg.png) no-repeat top center;
	height: 113px;
	width: 100%;
	position: absolute;
	bottom:0;
	.in{ 
		padding-top: 60px;
	}
}
.parallax-window {
    min-height: 370px;
    background: transparent;
}


#layer1a,#layer1b,#layer1c{
	width: 172px;
	height: 180px;
	position: absolute;
	bottom:0;
	right: 0;
}
#layer1a{ background: url(../img/layer-1a.png) no-repeat;}
#layer1b{ background: url(../img/layer-1b.png) no-repeat;}
#layer1c{ background: url(../img/p2-bg.png) no-repeat; width: 82px; height:160px; bottom:-71px}
#layer2a,#layer2b{
	width: 92px;
	height: 52px;
	position: absolute;
	top: 300px;
	left: 0
}
#layer2a{ background: url(../img/layer-2a.png) no-repeat; width: 112px; height:67px}
#layer2b{ background: url(../img/layer-2b.png) no-repeat;}
#layer3a,#layer3b{
	width: 106px;
	height: 79px;
	position: absolute;
	bottom:0;
	left: 0
}
#layer3a { background: url(../img/layer-3a.png) no-repeat;}
#layer3b { background: url(../img/layer-3b.png) no-repeat;}
#layer4a,#layer4b{
	width: 68px;
	height: 75px;
	position: absolute;
	top:0;
	right: 40px
}
#layer4a { background: url(../img/layer-4a.png) no-repeat; width: 69px; 	height: 115px;}
#layer4b { background: url(../img/layer-4b.png) no-repeat;}
#layer5a,#layer5b{
	width: 144px;
	height: 218px;
	position: absolute;
	top:0;
	left: 0;
	z-index: 10
}
#layer5a { background: url(../img/layer-5a.png) no-repeat;}
#layer5b { background: url(../img/layer-5b.png) no-repeat;}
#layer6a,#layer6b{
	width: 152px;
	height: 223px;
	position: absolute;
	top:0;
	right: 0
}
#layer6a { background: url(../img/layer-6a.png) no-repeat;}
#layer6b { background: url(../img/layer-6b.png) no-repeat;}
#layer7a,#layer7b,#layer7c{
	width: 108px;
	height: 187px;
	position: absolute;
	top:0;
	right: 0
}
#layer7a { background: url(../img/layer-7a.png) no-repeat;}
#layer7b { background: url(../img/layer-7b.png) no-repeat;}
#layer7c { background: url(../img/layer-7c.png) no-repeat;}
#arrow-next{
	background: url(../img/arrow-blue.png) no-repeat;
	width: 52px;
	height: 52px;
	position: absolute;
	bottom:0;
	left: 50%;
	margin-left: -26px;
	cursor: pointer;
}

.menu-mobile{
	background: url(../img/menu-mobile.gif) no-repeat;
	width:45px;
	height: 33px;
	float: right;
	display: none;
	margin-right: 10px
}
.slider-next, .slider-prev, .slider-navi { display: none;}

.f{
	background: url(../img/f-bg.jpg) no-repeat top center;
	padding: 63px 0 70px;
	a{
		 margin:0 58px 0 0;
		 &:nth-child(3){ margin:0 }
	}
}

@media (max-width: 1035px) {
	.menu-mobile{ display: block; cursor: pointer}
	
	#menu ul{ display: none; }
	#menu ul li { margin-right: 30px}
	section#p0 .bg { display: none}
	section#p0 .bgBox .desc{ display: none; }
	section#p0 .bgBox .tablet{ display: block; }
	.in{ width: 730px !important;}
	
	section#p0 h2{ .fs(63px, 63px)}
	section#p0 .txt{ .fs(16px, 22px); width: 350px}
	section h2 strong{ .fs(60px, 60px)}
	section .info { width: 100%; margin-top: 25px}
	section#p1  {padding-top:20px; padding-bottom: 80px}
	
	section .navi div {margin-bottom: 35px}
	section .b3 .b:first-child .txt {margin-left: 0}
	section#p1 { .fs(14px, 18px)}
	
	section#p3  {padding-top:35px; padding-bottom: 40px}
	#layer2a, #layer2b, #layer4a, #layer4b, #layer3a, #layer3b, #layer5a, #layer5b, #layer6a, #layer6b, #layer1a, #layer1b, #layer7a, #layer7b, #layer7c{ display: none}
	section#p3a{ height: 375px;}
	
	section#p4  {padding-top:0; padding-bottom: 40px}
	
	section .list.c4 li { width: 50%; text-align: left;}
	section .list.c4 li img { width: 90%}
	
	section#p6 { height: 480px}
	section#p6 .bgBox.pattern{ height: 530px}
	.f img{ 
		width: 220px; 
		margin-right: 30px;
		&:last-child{ margin:0}
	}
}
@media (max-width: 760px) {
	#menu{
		height: 30px;
		overflow: visible;
		.in{
			position: static
		}
		ul{
			position: absolute;
			right: 0;
			top: 0;			
			padding: 70px 70px 0 20px;
			background: #fff;
			-webkit-box-shadow: -3px 3px 3px 0px rgba(211,211,211,1);
			-moz-box-shadow: -3px 3px 3px 0px rgba(211,211,211,1);
			box-shadow: -3px 3px 3px 0px rgba(211,211,211,1);
			li{
				float: none;
				padding: 5px 0;
				margin:0
			}
		}
	}
	.menu-mobile{ 
		position: absolute;
		top: 35px;
		right: 0;
		z-index: 10
	}
	section#p0 h2{ .fs(56px, 56px); }
	section#p0 .txt { margin: 0 auto; text-align: center}
	
	section#p0 .bgBox .tablet{ display: none; }
	section#p0 .bgBox .mobile{ display: block; }
	
	.in{ width: 440px !important;}
	section h2, section .info { text-align: center; width: 100% !important; float: none}
	
	section .navi { display: none}
	
	section#p3a .bgBox.left, section#p3a .bgBox.right, section#p6 .bgBox.right { display: none;}
	
	section#p3a h2 { .fs(32px, 32px)}
	section#p3a { height: 320px}
	
	section .b3 .b{
		width: 100%;
		text-align: center;
	}
	section#p6 .b3 .b{
		&:nth-child(1) { margin-top:20px }
		&:nth-child(2) {
			h3 { display: none}
		}
	}
	section#p3 .separator { display: none}
	
	section#p1 .b3{
		.b{
			width: 360px;
			height: 170px
		}
	}
	.b3-container{
		position:relative;
		padding: 20px 45px;
		&:before{
			content: " ";
			clear: both;
			display: block;
			width: 150px;
			height: 8px;
			margin: 20px auto 40px;
			background: #b9b9b9;
			overflow: hidden
		}
	}
	#p4 .list-container{ padding: 20px 55px}
	.list-container{
		position:relative;
		padding: 20px 45px;
		&:before{
			content: " ";
			clear: both;
			display: block;
			width: 150px;
			height: 8px;
			margin: 20px auto 40px;
			background: #b9b9b9;
			overflow: hidden
		}
		
		.list.c3 li{
			width: 360px;
			height: 500px;
			.fs(36px, 38px);
			margin: 0;
			img{
				width: 305px;
			}
		}
		.list.c4 li{
			width: 330px;
			height: 300px;
			.fs(30px, 32px);
			text-align: center;
			margin: 0;
			img{
				width: 305px;
			}
		}
	}
	
	.slider-next, .slider-prev, .slider-navi { display: block;}
	.slider-prev{
		background: url(../img/slider-arrow-prev.gif) no-repeat;
		width: 18px !important;
		height: 29px;
		position: absolute;
		top: 45%;
		left: 0
	}
	.slider-next{
		background: url(../img/slider-arrow-next.gif) no-repeat;
		width: 18px !important;
		height: 29px;
		position: absolute;
		top: 45%;
		right: 0
	}
	.slider-navi{
		z-index: 100;
		li{ 
			background: url(../img/slider-navi.gif) no-repeat -40px 0;
			width: 17px;
			height: 17px;
			list-style: none;
			float: left;
			margin: 0 10px;
			&.selected { background-position: 0 0}
			&:last-child{ margin-right:0}
		}
	}
	.slider-navi-1{
		width: 115px;
		margin: 0 auto
	}
	.slider-navi-2{
		width: 220px;
		margin: 0 auto
	}
	.slider-navi-3{
		width: 300px;
		margin: 0 auto
	}
	
	.f {
		text-align: center;
		img{
			width: 250px;
			margin: 0 0 10px;
		}
	}
}


@media (max-width: 630px) {
	section#p0 .txt { width: 100%}
}

@media (max-width: 500px) {
	.in{ width: 90% !important}
	
	section#p0 h2 { .fs(45px, 48px)}
	
	section h2 { .fs(25px, 45px)}
	section h2 strong{ .fs(45px, 45px)}
	
	section#p1 .b3 .b{ width: 260px; height:220px}
	.b3-container, .list-container, #p4 .list-container { padding: 20px 30px; width: 250px; margin: 0 auto}
	.slider-next-1, .slider-prev-1 {top: 55%}
	
	.list-container .list.c3 li{ width: 250px; height: 300px; .fs(20px, 22px)}
	.list-container .list.c3 li img { width: 145px}
	section#p3a .in { width: 90%}
	
	section#p3a h2{ .fs(25px, 25px)}
	section#p3a .btn{ width: 150px; .fs(20px, 20px)}
	
	.list-container .list.c4 li { width: 250px; height: 200px; .fs(25px, 27px)}
	.list-container .list.c4 li img{ width: 145px}
	.slider-navi-3{ width: 200px;}
	.slider-navi li{ margin-bottom: 5px}
	
	#menu .logo { width: 270px; img{ width: 100%}}
}

@media (max-width: 400px) {
	section#p0 h2 { .fs(35px, 38px); margin-bottom: 20px}
	section#p0 .txt { .fs(14px, 18px); text-align: center}
	#menu .logo { width: 200px; margin-top:0}
}

@media (max-width: 350px) {
	.b3-container, .list-container, #p4 .list-container { width: 240px; padding: 20px 25px}
	section#p1 .b3 .b { width: 250px}
	section#p6 { height: 520px}
}