@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import url(//fonts.googleapis.com/css?family=Open+Sans:700,400,300);
@import url(//fonts.googleapis.com/css?family=Dorsa);
@import url(http://fonts.googleapis.com/css?family=Dosis:400,600);
@import "variables.less";
/*========================================================
										Main layout styles
=========================================================*/
body {
	background: #f6f6f7;
	font: 14px/24px Georgia, 'Times New Roman', Times, serif;
}
a {
	text-decoration: none;
	cursor: pointer;
	.transition(.3s all ease);
}
a:hover {
	.transition(.3s all ease);
}
a[href^="tel:"] {
	color: inherit;
	text-decoration: none;
}
h2 a, h3 a, h4 a, h5 a { 
	color: inherit;
	font: inherit;
}
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover { color: @mn-color; }
* {
	-webkit-text-size-adjust: none;
}
::-moz-selection { /* Code for Firefox */
    color: #ffffff;
    background: #666666;
}

::selection {
    color: #ffffff; 
    background: #666666;
}
/*========================================================
										HEADER styles
=========================================================*/
#header {
	padding: 20px 0;
	background: url(../images/header_bg.jpg) no-repeat;
	background-size: cover;
	text-align: center;
	height: 556px;
	.social {
		text-align: center;
		.fa {
			width: 69px;
			height: 69px;
			background: #fff;
			line-height: 69px;
			margin: 0 35px 50px 35px;
			font-size: 38px;
			color: #423e3e;
			text-align: center;
			.transition(.3s);
			&:hover {
				background: @mn-color;
			}
		}
	}
	h1 {
		color: @wh-color;
		margin-top: 15px;
		a {
			font: 400 150px/115px @lg-font;
			color: @wh-color;
			text-transform: uppercase;
			display: inline-block;
			height: 177px;
			span {
				display: block;
				font: 30px/30px @slogan-font;
				margin-top: 28px;
				text-transform: none;
			}
		}
	}
	nav {
		margin-top: 53px;
	}
}
.index #header {
	position: relative;
	background: none;
	height: 0;
	padding: 0;
	#stuck_container {
		position: absolute;
		z-index: 9;
		left: 0;
		right: 0;
		top: 20px;
	}
}
@media only screen and (max-width: 767px) {
	#header {
		text-align: center;
		h1, nav {
			float: none;
			display: inline-block;
		}
		nav { display: block; }
		.social .fa {
			margin: 0 25px 50px 25px;
		}
	}
}
@media only screen and (max-width: 480px) {
	#header {
		.social .fa {
			margin: 0 5px 50px 5px;
		}
	}
}
@import "superfish-menu.less";
@import "stuck-menu.less";

/*========================================================
										CONTENT styles
=========================================================*/
h2,
h3,
h4 { 
	font-family: @he-font;
	color: @he-color;
}
h2 {
	font: 400 60px/60px @font;
	text-align: center;
	margin-bottom: 50px;
	border-bottom: 3px solid @he-color;
	display: inline-block;
}
h3 {
	font-size: 50px;
	font-family: @he-font;
	text-align: center;
	line-height: 50px;
}
h4 {
	font-size: 28px;
	line-height: 28px;
	font-family: @font;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 20px;
}
h5 {
	font-size: 16px;
	line-height: 16px;
	font-family: @font;
	text-align: left;
	margin-bottom: 10px;
	color: @he-color;
}
.h5__mod {color: @mn-color;}
p {
	font: 16px/20px @font;
	color: @te-color;
}
.full-width-container { width: 100%; }
.img_block {
	overflow: hidden;
	margin-bottom: 15px;
	position: relative;
	img { width: 100%; }
}
.btn {
	width: 228px;
	border: 1px solid #5d5959;
	background: none;
	display: block;
	font: 36px/76px @font;
	text-align: center;
	color: #5d5959;
	margin-top: 20px;
	margin: 20px auto;
	&:hover {
		background: @he-color;
		color: @wh-color;
	}
}
.bd-ra {
	border-radius: 50%;
}
.sub_head {
	font-size: 24px;
	font-style: italic;
	line-height: 36px;
	text-align: center;
	margin: 0 auto;
}
@media only screen and (max-width: 979px) {
	h2 {
	font: 300 62px/62px @font;
	text-align: center;
	margin-bottom: 40px;
	span:before {display: none;}
	}
	h3 {
		font: 45px/45px @he-font;
		text-align: center;
	}
	h4 {
		font: 30px/30px @he-font;
		text-align: center;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	h5 {
		font: 20px/20px @he-font;
		text-align: center;
		margin-bottom: 20px;
		color: @he-color;
	}
}
@media only screen and (max-width: 767px) { 
	h2 {
	font: 300 52px/52px @font;
	text-align: center;
	margin-bottom: 40px;
	span:before {display: none;}
	}
	h3 {
		font: 45px/45px @he-font;
		text-align: center;
	}
	h4 {
		font: 25px/25px @he-font;
		text-align: center;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	h5 {
		font: 20px/20px @he-font;
		text-align: center;
		margin-bottom: 20px;
		color: @he-color;
	}
	.img_block { margin-bottom: 20px;}
}
@media only screen and (max-width: 479px) { 
	h2 {
	font: 300 42px/42px @font;
	text-align: center;
	margin-bottom: 40px;
	span:before {display: none;}
	}
	h3 {
		font: 35px/35px @he-font;
		text-align: center;
	}
	h4 {
		font: 20px/20px @he-font;
		text-align: center;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	h5 {
		font: 16px/16px @he-font;
		text-align: center;
		margin-bottom: 20px;
		color: @he-color;
	}
	.img_block { margin-bottom: 20px;}
}
.index {
	.block-1 {
		position: relative;
	}
	.block-2 {
		position: relative;
		margin-top: -333px;
		h2 {
			color: @wh-color;
			font-size: 48px;
			font-family: @font;
			text-decoration: none;
			border-bottom: none;
			display: block;
			text-align: center;
		}
		.isotope {
			a {
				float: left;
				height: 284px;
				overflow: hidden;
				border: 1px solid #3f3d3d;
				position: relative;
				i {
					width:100%;
					height:100%;
					position:absolute;
					padding:0;
					top:0;
					left:0;
					display:block;
					background:url(../images/filler-1.png) repeat;
					.opacity(0);
					.transition(.3s);
					font-size: 100px;
					color: #fff;
					line-height: 260px;
					text-align: center;
				}
				&:hover {
					i {
						.opacity(1)
					}
				}
			}
			.item-1 {border-bottom: none;}
			.item-2, .item-3 {
				border-bottom: none;
				border-left: none;
			}
			.item-5, .item-6 {
				border-left: none;
			}
		}
		.btn {
			margin-top: 77px;
			margin-bottom: 140px;
		}
	}
	.block-3 {
		padding-bottom: 70px;
		.first {
			font-size: 18px;
			margin-bottom: 40px;
		}
		.btn {
			margin: 50px 0 20px 0;
		}
		.img_block {
			float: left;
			margin-right: 30px;
		}
	}
	.block-4 {
		background: url(../images/index_img_par.jpg);
		background-attachment: fixed;
		background-position: center 0%;
		position: relative;
		background-repeat: no-repeat;
		padding: 80px 0;
		overflow: hidden;
		
		span {
			font-size: 92px;
			font-weight: 700;
			text-transform: uppercase;
			line-height: 100px;
			display: block;
			position: relative;
			color: @wh-color;
			font-family: @font;
		}
		.el-1 {
			left: 300px;
		}
		.el-2 {
			left: 585px;
		}
		.btn {
			border-color: @wh-color;
			color: @wh-color;
			margin-top: 40px;
		}
	}
	.block-5 {
		padding: 80px 0;
		.text {
			border: 1px solid #fff;
			font: 14px/20px @font;
			color: #727070;
			margin-bottom: 30px;
		}
		.item-1 .text {
			margin-left: 30px;
			padding: 30px 40px 28px 100px;
			position: relative;
			&:before {
				content: "";
				width: 21px;
				height: 38px;
				background: url(../images/left-arrow.png) no-repeat;
				position: absolute;
				top: 60px;
				left: -20px;
			}
		}
		.item-2 .text {
			margin-right: 30px;
			padding: 30px 100px 28px 40px;
			position: relative;
			&:before {
				content: "";
				width: 21px;
				height: 38px;
				background: url(../images/right-arrow.png) no-repeat;
				position: absolute;
				top: 60px;
				right: -20px;
			}
		}
	}
	.block-6 {
		#map-canvas {
			height: 680px;
		}
	}
}
@media only screen and (max-width: 1399px) {
	.index {
		.block-2 {
			margin-top: -270px;
		}
	}
}
@media only screen and (max-width: 1199px) {
	.index {
		.w-1 {
			width: 27.5%;
		}
		.w-2 {
			width: 44%;
		}
		.block-2 {
			margin-top: -270px;
			.img_block {
				height: 100%;
				img {
					width: auto;
					height: 100%;
				}
			}
			.isotope {
				a { height: 265px;}
				i {line-height: 265px;}
			}
		}
		.block-4 {
			.el-1,
			.el-2 {
				position: static;
				margin-left: 100px;
			}
		}
		.block-5 {
			.item-1 {
				.text {
					padding-left: 40px;
				}
			}
			.item-2 .text {padding-right: 40px;}
		}
	}
}
@media only screen and (max-width: 979px) {
	.index {
		.block-2 {
			margin-top: -270px;
			.isotope {
				a { height: 211px;}
				i {line-height: 211px !important;}
			}
		}
		.block-3 {
			h3 {height: 100px;}
		}
	}
}
@media only screen and (max-width: 767px) {
	.index {
		.block-2 {
			.isotope {
				a {
					width: 100%;
					height: auto;
					border: 1px solid #000 !important;
					margin-top: -1px;
					.img_block {
						width: 100%;
						margin-bottom: 0;
						img {
							width: 100%;
						}
					}
				}
			}
		}
		.block-3 {
			.element {padding: 0;}
			.grid_7 {
				h2 {
					margin-top: 50px;
				}
			}
		}
		.block-5 {
			article {
				margin-bottom: 60px;
			}
			.img_block {
				width: 60%;
				margin: 30px auto;
			}
		}
		.item-1 {
				.text {
					margin: 30px 0 !important;
					&:before {
						display: none;
					}
					&:after {
						content: "";
						position: absolute;
						top: -22px;
						left: calc(~'50% - 10px');
						width: 0;
						height: 0;
						border-left: 15px solid transparent;
						border-right: 15px solid transparent;
						border-bottom: 22px solid @wh-color;
					}
				}
			}
			.item-2 .text {
				margin: 0 0 30px 0 !important;
				&:before {
					display: none;
				}
				&:after {
					content: "";
					position: absolute;
					bottom: -22px;
					left: calc(~'50% - 10px');
					width: 0;
					height: 0;
					border-left: 15px solid transparent;
					border-right: 15px solid transparent;
					border-top: 22px solid @wh-color;
				}
			}
	}
}
@media only screen and (max-width: 640px) {
	.index .block-4 .el-1, 
	.index .block-4 .el-2 {
		font-size: 70px;
		line-height: 75px;
		margin-left: 0;
		text-align: center;
	}
}
@media only screen and (max-width: 480px) {
	.index .block-4 .el-1, 
	.index .block-4 .el-2 {
		font-size: 40px;
		line-height: 45px;
	}
	.index .block-5 .img_block {
			width: 100%;
		}
}

.index-1 {
	.block-1 {
		padding: 120px 0 70px;
		header {
			text-align: center;
		}
		h2 {
			margin-bottom: 64px;
		}
		article {
			border: 1px solid #000;
			border-top: none;
			padding-top: 5px;
			margin-bottom: 95px;
		}
		h4 {
			background: #323045;
			color: @wh-color;
			line-height: 52px;
			margin-top: 0;
			margin-bottom: 20px;
		}
		p {
			padding: 0 32px 25px;
		}
		.img_block { 
			margin-bottom: 0 !important;
				i {
					width:100%;
					height:100%;
					position:absolute;
					padding:0;
					top:0;
					left:0;
					display:block;
					background:url(../images/filler-1.png) repeat;
					.opacity(0);
					.transition(.3s);
					font-size: 100px;
					color: #fff;
					line-height: 234px;
					text-align: center;
				}
				&:hover {
					i {
						.opacity(1)
					}
				}

		}
	}
}
@media only screen and (max-width: 1199px) {
	.index-1 {
		.block-1 .img_block i {
			line-height: 190px;
		}
	}
}
@media only screen and (max-width: 979px) and (min-width: 768px){
	.index-1 {
		.block-1 .img_block i {
			line-height: 149px;
		}
		.block-3 .bd-ra {
			width: 50px;
			height: 50px;
			line-height: 50px;
		}
	}
}
@media only screen and (max-width: 767px) {
	.index-1 {
		.block-1 .img_block i {
			line-height: 266px;
		}
		.block-3 {
			.bd-ra { margin: 10px auto; }
			p {margin-bottom: 50px;}
		}
	}
}
@media only screen and (max-width: 480px) {
	.index-1 {
		.block-1 .img_block i {
			line-height: 171px;
		}
	}
}
.index-2 {
	.block-1 {
		padding: 120px 0 70px;
		header {
			text-align: center;
		}
		#touch_gallery {
			.grid_4 {
				position: relative;
				overflow: hidden;
				margin-bottom: 33px;
			}
		}
		h2 {
			margin-bottom: 64px;
		}
		article {
			border: 1px solid rgba(50,48,69,.5);
			background: #323045;
			padding-top: 6px;
			position: absolute;
			top: 207px;
			left: 0;
			height: 100%;
			.transition(.3s);
			&:hover {
				top: 0;
				padding-top: 41px;
 			}
		}
		h4 {
			background: none;
			color: @wh-color;
			line-height: 52px;
			margin-top: 0;
			margin-bottom: 20px;
		}
		p {
			padding: 0 25px 25px;
			color: #efeded;
		}
		.img_block {
			margin-bottom: 0 !important;
			i {
				width:100%;
				height:100%;
				position:absolute;
				padding:0;
				top:0;
				left:0;
				display:block;
				background:url(../images/filler.png) no-repeat;
				background-size: 100%;
				.opacity(0);
				.transition(.3s);
			}
			&:hover {
				i {
					.opacity(1)
				}
			}
		}
		.pagination {
			text-align: center;
			margin-top: 43px;
			a {
				display: inline-block;
				width: 53px;
				height: 36px;
				font: 24px/36px @slogan-font;
				color: #5d5959;
				border: 1px solid #7b7878;
				margin-left: -1px;
				.transition(.3s);
				&.active {
					background: @wh-color;
				}
				&:hover {
					background: @wh-color;
				}
			}
		}
	}
}
@media only screen and (max-width: 1199px) {
	.index-2 {
		.block-1 {
			article {
				top: 165px;
				&:hover {
					padding-top: 10px;
				}
				h4 {
					line-height: 35px;
				}
			}
		}
	}
}
@media only screen and (max-width: 979px) {
	.index-2 {
		.block-1 {
			article {
				top: 130px;
				&:hover {
					padding-top: 10px;
				}
				h4 {
					line-height: 35px;
					font-size: 20px;
					margin-bottom: 5px;
				}
				p {
					font-size: 12px;
					padding: 0 5px;
				}
			}
		}
	}
}
@media only screen and (max-width: 767px) {
	.index-2 {
		.block-1 {
			article {
				top: 234px;
				&:hover {
					padding-top: 10px;
				}
				h4 {
					line-height: 35px;
					font-size: 30px;
					margin-bottom: 20px;
					margin-top: 15px;
				}
				p {
					font-size: 14px;
					padding: 0 30px;
				}
			}
		}
	}
}
@media only screen and (max-width: 480px) {
	.index-2 {
		.block-1 {
			article {
				top: 150px;
				&:hover {
					padding-top: 10px;
				}
				h4 {
					line-height: 35px;
					font-size: 20px;
					margin-bottom: 5px;
					margin-top: 5px;
				}
				p {
					font-size: 14px;
					padding: 0 10px;
				}
			}
		}
	}
}

.index-3 {
	.block-1 {
		padding: 80px 0;
		h4 {
			text-align: left;
			color: @he-color;
			margin-bottom: 35px;
		}
		article {
			margin-bottom: 100px;
		}
		.first {
			margin-bottom: 25px;
			margin-top: 20px;
		}
		.attributes {
			margin-top: 25px;
			> div {
				border-bottom: 1px solid #d1d1d2;
				height: 40px;
				line-height: 40px;
				> div {
					display: inline-block;
					font-size: 14px;
					color: #737272;
					a {
						color: #737272;
						font-family: @font;
						&:hover {
							color: #000;
						}
					}
				}
				.fa {
					line-height: 40px;
					color: #adacac;
					font-size: 20px;
					margin-right: 25px;
				}
			}
			.attr {
				width: 236px;
			}
			.attr-2 {
				float: right;
			}
			.attr-3 > div {
				display: inline-block;
				span {
					margin-right: 5px;
				}
			}
			.el-2 .fa,
			.el-3 .fa {
				&:hover {
					color: @mn-color;
				}
			}
		}
		.line-1 {
			border-top: 1px solid #d1d1d2;
		}
	}
	.item-1 {
		margin-bottom: 100px;
		li {
			padding-left: 23px;
			background: url(../images/bullet.png) 1px 9px no-repeat;
			margin-bottom: 5px;
			a {
				color: #535151;
				font-size: 16px;
				font-family: @font;
				&:hover {
					color: @mn-color;
				}
			}
		}
	}
	.item-2 {
		.img_block {
			float: left;
			margin-right: 20px;
		}
		h5 {
			margin-bottom: 5px;
		}
		p {
			margin-top: 25px;
		}
		article {
			margin-bottom: 45px;
		}
	}
}
@media only screen and (max-width: 1199px) { 
	.index-3 {
		.block-1 {
			.attributes {
				.attr {width: 200px;}
			}
		}
	}
}
@media only screen and (max-width: 979px) { 
	.index-3 {
		.block-1 {
			.attributes {
				.attr {width: 155px;}
			}
		}
		.item-2 .img_block {
			float: none;
		}
	}
}
@media only screen and (max-width: 767px) { 
	.index-3 {
		.block-1 {
			.attributes {
				> div {
					height: auto;
				}
				.attr {
					width: 49%;
				}
				.attr-2 {
					float: none;
				}
			}
		}
		.item-2 {
			.img_block {
				float: left;
			}
			h5 {
				text-align: left;
			}
		}
	}
}
@media only screen and (max-width: 480px) { 
	.index-3 {
		.block-1 {
			.attributes {
				> div {
					height: auto;
				}
				.attr {
					width: 100%;
				}
				.attr-2 {
					float: none;
				}
			}
		}
		.item-2 .img_block {
			float: none;
		}
	}
}
.index-4 {
	.block-1 {
		header {
			text-align: center;
		}
		padding: 80px 0;
		#map-canvas {
			height: 428px;
		}
	}
	.block-2 {
		padding: 80px 0;
		.cont_btn {
			a {
				display: inline-block;
				font-size: 26px;
				width: 172px;
				height: 57px;
				line-height: 57px;
			}
		}
		.address {
			a {
				color: inherit;
				&:hover {
					color: @mn-color;
				}
			}
		}
	}
}
@media only screen and (max-width: 767px) {
	.index-4 {
	 	h2 {margin-top: 30px;}
	 	.address {
	 		margin-top: 20px;
	 	}
	 	.block-2 {
	 		.cont_btn {
	 			margin-bottom: 70px;
	 			.btn {
	 				margin-right: 30px !important;
	 			}
	 		}
	 	}
	}
}
.index-5 {}
/*========================================================
										FOOTER styles
=========================================================*/
#footer {
	background: #f6f6f7;
	padding: 10px 0 0;
	color: @he-color;
	a { 
		color: inherit;
		&:hover {text-decoration: underline;}
	}
	.copyright {
		text-align: center;
		.btn {
			width: 94px;
			height: 94px;
			line-height: 94px;
			font-size: 60px;
			color: #423e3e;
			background: #fff;
			border: none;
			margin: 30px 50px;
			span {
				line-height: 94px;
			}
			&:hover {
				background: #423e3e;
				color: #fff;
			}
		}
		pre {
			color: #000;
			font-family: @font;
			font-size: 14px;
			margin-bottom: 10px;
			text-align: center;
		}
	}
	.footer_bottom {
		height: 35px;
		text-align: center;
		background: #423e3e;
	}
}
@media only screen and (max-width: 767px) {
	#footer {
		.copyright .btn {
			width: 80px;
			height: 80px;
			line-height: 80px;
			margin: 30px 25px;
		}
	}
}
@media only screen and (max-width: 479px) {
	#footer {
		.copyright .btn {
			display: block;
			margin: 20px auto;
		}
	}
}

/*========================================================
										Widget styles
=========================================================*/
@import "ui.totop.less";

/*========================================================
								RESPONSIVE LAYOUTS STYLES 
=========================================================*/
@media only screen and (max-width: 1199px) {
	.sample{
		height: auto;/*delete this class*/
	}
}
@media only screen and (max-width: 979px) {
	.sample{
		height: auto;/*delete this class*/
	}
}
@media only screen and (max-width: 767px) {
	.sample{
		height: auto;/*delete this class*/
	} 
}
@media only screen and (max-width: 480px) {
	.sample{
		height: auto;/*delete this class*/
	}
}
@media only screen and (max-width: 320px) {
	.sample{
		height: auto;/*delete this class*/
	} 
}
/*Core variables and mixins*/
@import "mixins.less";