@import 'less-font-face.less';
@import 'reset.less';
@import 'sprites.less';
@import 'form.less';

* {
  scroll-behavior: smooth;
}

html {
	min-width: 1240px;
	max-width: 1920px;
	margin: 0 auto;

    background: #fff;
}
body {
	//font-family: 'ralewaythin';
	font-family: 'ralewaylight';
    color: #333333;
    font-size: 16px;
    //.bg("bg_gray.jpg");
    margin-top: 60px;
}

div, span,  p, a, li, td { -webkit-text-size-adjust:none; }

.content {
	width: 1180px;
	margin: 0 auto;
    position: relative;
    //overflow: hidden;
}
// Buttons
.but {
    position: relative;
    display: inline-block;
    color: #fff;
    position: relative;
    cursor: pointer;
    border: 0;
    text-align: center;
    .bradius(6px);
    span {
        display: inline-block;
        vertical-align: middle;
    }
    &:active {
        top: 2px;
    }
}

.but1 {
    .bg("bg_but_g_1.png");
    .but;
    width: 236px;
    height: 47px;
    line-height: 42px;
    font-size: 23px;
}

.but2,.but4,.but5 {
    .bg("but_2.png", left, top);
    .but;
    width: 480px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-family: 'ralewaysemibold';
    background-position: 0px 0px;
    &:active {
        top: 0px !important;
        background-position: 0px -139px;
    }
    &:hover {
        top: 0px !important;
        background-position: 0px -70px;
    }
}

.but3 {
    .bg("bg_but_r.png");
    .but;
    width: 304px;
    height: 89px;
    line-height: 89px;
    font-size: 36px;
}

.but4 {
    .bg("but_4.png", left, top);
	width: 401px;
}
.but5 {
    .bg("but_5.png", left, top);
	width: 261px;
}
// h1,h2,h3
.h {
    text-align: center;
    font-family: 'ralewayextrabold';
    color: #000;
    font-size: 50px;
    line-height: 1.2;
    .span {
    	//font-family: 'ralewaythin';
    }
}

h1, h3, h2 {
    .h;
}

.logo {
	.bg("logo.jpg");
	width: 200px;
	height: 180px;
}

.minlogo {
	.bg("logo_min.png");
	width: 147px;
	height: 66px;
}

//////////////////////////////////////

#menu {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 60px;
	background: #363636;
	//position: relative;
	z-index: 1;
	&.fixed {
		z-index: 10;
		ul {
			padding-left: 0px !important;
			li {
				margin: 0px;
				.mleft(20px);

				&.hide {
					display: inline-block;
				}
			}
		}
	}
	ul {
		.ul;
		box-sizing: border-box;
	    -moz-box-sizing: border-box; /*Firefox 1-3*/
	    -webkit-box-sizing: border-box; /* Safari */
	    padding-left: 100px;
		li {
			vertical-align: middle;
			.mleft(20px);

			img {
				width: 80px;
			}
			&.hide {
				display: none;
			}
			a {
				color: #ffffff;
				font-family: 'ralewayregular';
				font-size: 14px;
				display: inline-block;
				height: 60px;
				line-height: 60px;
				&.active, &:hover {
					color: #f7941e;
				}
			}
		}
	}
}

#bg_main {
    .bg("bg_main.jpg", center, top);
    background-attachment: fixed;
}

#main {
	position: relative;
	z-index: 2;
	//.bg("bg_main.jpg", center, -30px);
	height: 640px;
	.info {
		position: relative;
		top: 170px;
		h3 {
			font-size: 26px;
			text-align: left;
			color: #fff;
			text-transform: uppercase;
			.fs20 {
				font-size: 20px;
				text-transform: none;
			}
			padding-left: 100px;
			min-height: 79px;
			&.h3_1 {
				.bg("ico_main_1.png", left, center);
			}
			&.h3_2 {
				.bg("ico_main_2.png", left, center);
			}
			&.h3_3 {
				.bg("ico_main_3.png", left, center);
			}
			margin-left: 60px;
			display: block;
			.mtop(30px);
			line-height: 80px;
			.mid {
				vertical-align: middle;
				line-height: normal;
				display: inline-block;
			}
		}
	}
	.button {
		position: relative;
		top: 173px;
		text-align: center;
		a {
			margin-left: -150px;
		}
	}
	.logo {
		position: absolute;
		left: 0px;
		top: -60px;
	}

}

#box_1 {
	height: 200px;
	background: #f7941e;
	.content {
		line-height: 200px;
		.info {
			font-family: 'ralewaylight';
			font-size: 29px;
			color: #fff;
			text-align: center;
			line-height: 40px;
			vertical-align: middle;
			display: inline-block;
			span {
				color: #000;
				font-family: Geneva, Arial, Helvetica, sans-serif;
			}
		}
	}

}

#keys {
	background: #ebebeb;
	padding: 40px 0px;
	h3 {
		font-size: 56px;
		text-align: left;
		padding-bottom: 10px;
		border-bottom: solid #d3d3d3 1px;
		margin-bottom: 20px;
	}
	.ul {
		width: 100%;
		text-align: left;
		.li {
			width: 380px;
			//vertical-align: top;
			display: block;
			margin-bottom: 20px;
			padding: 0px 10px;
			box-sizing: border-box;
		    -moz-box-sizing: border-box; /*Firefox 1-3*/
		    -webkit-box-sizing: border-box; /* Safari */
			.title {
				font-family: 'ralewaymedium';
				font-size: 26px;
				color: #f7941e;
				margin-bottom: 30px;
				vertical-align: top;
				line-height: 46px;
        display: flex;
        align-items: center;
				em {
					display: inline-block;
					width: 60px;
					height: 55px;
					.bg("ico_keys.png", left, top);
					margin-right: 10px;
					&.e1 { background-position: 0px 0px; }
					&.e2 { background-position: -88px 0px; }
					&.e3 { background-position: -183px 0px; }
					&.e4 { background-position: -267px 0px; }
					&.e5 { background-position: -344px 0px; }
					&.e6 { background-position: -423px 0px; }
					&.e7 { background-position: -490px 0px; }
					&.e8 { background-position: -562px 0px; }
				}
			}
			p {
				.mtop(10px);
				line-height: 20px;
			}
			ol {
				list-style-type: disc;
				list-style-position: inside;
				padding-left: 0px;
				li {
					list-style-type: disc;
					list-style-position: inside;
					padding-left: 10px;
					display: list-item;
					color: #f7941e;
					span {
						color: #333333;
						line-height: 20px;
					}
				}
			}
		}
	}
}

#footer {
	padding: 40px 0px;
	background: #ebebeb;
	table {
		width: 100%;
		color: #212121;
		td {
			&:first-child, &:last-child {
				width: 20%;
			}
			text-align: center;
			&:last-child {
				text-align: left;
			}
			font-size: 14px;
			.tel {
				font-size: 22px;
				font-family: Geneva, Arial, Helvetica, sans-serif;
				color: #2f2f2f;
				margin: 5px 0px;
				display: inline-block;
				&:first-child {
					margin-top: 10px;
				}
			}
			.cal {
				color: #f49000;
				border-bottom: dotted #f49000 1px;
				display: inline-block;
			}
			.info {
				font-size: 14px;
				display: block;
			}
			.copy {
				font-size: 14px;
				margin-top: 20px;
				a {
					color: inherit;
					text-decoration: underline;
				}
			}
		}
	}
}

#map {
	height: 600px;
	.conmap {
		font-size: 14px;
		font-family: 'ralewayextralight';
		width: 350px;
		margin: 10px;
		line-height: 16px;

		.span {
			color: #f5785f;
		}
		p {
			line-height: 20px;
			font-weight: bold;
		}
		.tel, .email {
			font-family: Geneva, Arial, Helvetica, sans-serif;
		}
		.email, .face {
			color: #f49000;
			text-decoration: underline;
			a {
				color: inherit;
			}
		}
		.tel {
			color: #2f2f2f;
		}
	}
}

#our_team {
	padding: 40px 0px;
	background: #fff;
	h3 {
		text-align: left;
		font-size: 56px;
	}
	ul {
		margin-top: 30px;
		.ul;
		text-align: center;
		li {
			width: 230px;
			.mleft(60px);
			em {
				width: 162px;
				height: 170px;
				display: block;
				margin: 0 auto;
				img {
					filter: grayscale(100%);
					-webkit-filter: grayscale(100%);
					-moz-filter: grayscale(100%);
					-ms-filter: grayscale(100%);
					-o-filter: grayscale(100%);
				}
			}
			font-size: 16px;
			text-align: center;
			.name {
				font-family: 'ralewaysemibold';
			}
			.tel {
				font-family: Geneva, Arial, Helvetica, sans-serif;
				a {
					color: inherit;
				}
			}
			.email {
				a {
					color: #f49000;
				}
			}
			.pos {
				//font-family: 'ralewaythin';
			}
			span {
				.mtop(3px);
				display: block;
				text-align: center;
			}
		}
	}
	.info {
		margin-top: 40px;
		table {
			width: 100%;
			td {
				text-align: center;
				&:first-child {
					width: 60%;
					text-align: left;
				}
				//font-family: 'ralewaythin';
				font-size: 16px;

				p {
					display: block;
					padding-left: 50px;
				}
			}
		}
	}
}

#slider_obstacles, #slider_projects {
	padding: 40px 0px;
	background: #ebebeb;
	h3 {
		text-align: left;
		font-size: 56px;
		margin-bottom: 30px;
		text-transform: uppercase;
	}
	h4 {
		margin: 20px 0px;
		table {
			width: 100%;
			td {
				width: 50%;
				font-size: 20px;
				line-height: normal;
				b {
					font-family: 'ralewaysemibold';
				}
				&:last-child {
					text-align: right;
				}
			}
		}
	}
	.info {
		position: absolute;
		display: block;
		background: rgba(0,0,0,0.6);
		bottom: 20px;
		left: 20px;
		color: #fff;
		width: 600px;
		padding: 30px;
		h4 {
			font-family: 'ralewayextrabold';
			font-size: 26px;
			margin-bottom: 20px;
		}
		p {
			//font-family: 'ralewaythin';
			font-size: 14px;
			line-height: 20px;
		}
	}
}

#clients {
	padding: 40px 0px;
	h3 {
		text-align: left;
		font-size: 56px;
		padding-bottom: 10px;
		border-bottom: solid #d3d3d3 1px;
		margin-bottom: 20px;
	}
}

#big_slider {
	h4	{
		font-family: 'ralewayextrabold';
		font-size: 56px;
		margin-bottom: 20px;
	}
	p {
		//font-family: 'ralewaythin';
		font-size: 26px;
	}
	.info {
		position: relative;
		left: 50px;
		top: 50px;
	}
	.sl_1 {
		.bg("big_slider/slide_1.jpg");
		height: 500px;

	}
	.sl_2 {
		.bg("big_slider/slide_2.jpg");
		height: 500px;
		.info {
			left: 220px;
			h4 {
				font-size: 26px;
				color: #fff;
			}
		}
	}
	.sl_3 {
		.bg("big_slider/slide_3.jpg");
		height: 500px;
		h4 {
			font-size: 36px;
			color: #fff;
		}
	}
	.flex-direction-nav {
		width: 1180px;
		margin: 0 auto;
	}
	.flex-control-nav {
		width: 100%;
		right: none;
	}
}

#obstacles_do, #projects_do {
	background: #ebebeb;
	h3 {
		font-size: 56px;
		text-align: left;
		margin-bottom: 30px;
	}
	.photocont {
		width: 100%;
		position: relative;
		overflow: hidden;
		height: 270px;
		.photos {
			position: absolute;
			left: 50%;
			margin-left: -960px;
			text-align: center;
			top: 0px;
			width: 1920px;
			height: 260px;
			overflow: hidden;
			a {
				width: 25%;
				height: 260px;
				display: block;
				float: left;
				position: relative;
				overflow: hidden;
				img {
					position: absolute;
					z-index: 1;
					left: 0px;
					top: 0px;
					width: 100%;
					display: block;
				}
				.hover {
					position: absolute;
					left: 0px;
					top: 0px;
					width: 100%;
					height: 100%;
					background: rgba(0,0,0, 0.6);
					z-index: 0;
					.zoom {
						position: absolute;
						left: 0px;
						top: 0px;
						width: 100%;
						height: 100%;
						.bg("zoom.png", center,center);
					}
				}
				&:hover {
					.hover {
						z-index: 3;
					}
				}
			}
		}
	}
}
#projects_do {
	padding: 0px 0px 20px 0px;
}

.mark {
	position: absolute;
	bottom: 0px;
	left: 0px;
	text-align: left;
	background: rgba(255,255, 255, 0.7);
	padding: 10px;
	line-height: 50px;
	.minlogo {
		display: inline-block;
		zoom: 0.5;
		vertical-align: middle;
		line-height: normal;
		margin-right: 10px;
	}
	a {
		display: inline-block;
		font-weight: bold;
		color: #000;
		line-height: normal;
		vertical-align: middle;
		font-family: Geneva, Arial, Helvetica, sans-serif;
	}
}

.column {
	display: inline-block;
	vertical-align: top;
}




/* Callback from */
.callback_form{
    display: none ;
    background: #f9f9f9 !important;
    color: #13378e;
    border-radius: 4px;
    width: 500px !important;
    padding: 15px 20px;
    position: relative;
    font-size: 24px;
    float: none;
}

.callback_form form {
	float: none !important;
}

.callback_form.form {
    border: 0;
}

.callback_form div {
    text-align: center;
}

.callback_form .close{
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
    background: url(../images/fancybox_sprite.png)
}
.callback_form h2{
    font-size: 24px;
    margin-bottom: 30px;
    text-align: center;
}
.callback_form label{
    display: inline-block;
    margin-bottom: 10px;
    width: 130px;
    float: left;
    text-align: right;
    line-height: 30px;
}
.callback_form label.required:after{
    content: '*';
    color: rgb(250, 104, 104);
    position: absolute;
    padding-left: 3px;
    font-size: 24px;
}
.callback_form textarea{
    box-sizing: border-box;
    margin: 0;
    font-size: 24px;
    min-width: 200px;
    max-width: 200px;
    box-sizing: border-box;
    display: inline-block;
    float: right;
    margin: 0 0 10px;
    min-height: 80px;
    padding: 5px 10px;
    border: 1px solid #CCC;
    border-radius: 4px;
    font: 13px 'Noto Sans', sans-serif;

}
.callback_form input[type="text"]{
    font-size: 24px;
    width: 300px;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 7px 10px;
    border: 1px solid #CCC;
    border-radius: 4px;
}
.callback_form input[type="submit"]{
	width: 298px !important;
}
.callback_form label.error{
    display: none!important;
}
.callback_form input.error{
    border-color: rgb(255, 144, 144);
}
.callback_form input.valid{
    border-color: #5FD37F;
}

// placeholder
.form ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #888888;
}
.form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #888888;
    opacity:  1;
}
.form ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #888888;
    opacity:  1;
}
.form :-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #888888;
}
::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}


// error form
.form div {
	position: relative;
}
.form div label.error{
    position: absolute;
    top: 50%;
    right: 298px;
    color: #C43A3A;
    background: #FFA6A6;
    white-space: nowrap;
    padding: 15px 30px;
    border-radius: 5px;
    height: 20px;
    line-height: 20px;
    margin: -32px 0 0;
    color: #000 !important;
    font-size: 16px;
}
.form div label.error:after{
    content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    border: 5px solid transparent;
    margin-top: -5px;
    border-left-color: #FFA6A6;
}
////////////
.form.middle div label.error{
	top: 40px;
	left: 18px;
	width: 116px;
	margin: 0;
	z-index: 10;
}
.form.middle div label.error:after{
    top: -5px;
    right: 50%;
    border: 5px solid transparent;
    border-bottom-color: #FFA6A6;
    margin-right: -5px;
}