@font-face {
	font-family: 'FS Elliot Pro';
	src: url('../fonts/fep-regular.ttf') format('truetype');
}
@font-face {
	font-family: 'FS Elliot Pro';
	src: url('../fonts/fep-bold.ttf') format('truetype');
	font-weight: 700;
}
@font-face {
	font-family: 'FS Elliot Pro';
	src: url('../fonts/fep-light.ttf') format('truetype');
	font-weight: 300;
}

/*	-------------------------------------------------
	Базовые стили сайта | Base site styles
	------------------------------------------------- */
body {
	font: normal normal 18px/20px 'FS Elliot Pro', sans-serif;
	background: #ffffff;
	color: #000000;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

a { color: #03f; text-decoration: underline; }
a:hover { text-decoration: none; }
a.ajax-link {
	text-decoration: none;
	border-bottom: 1px dashed;
}

p { margin-bottom: 15px; }

input[type=text], input[type=password] {
	font:normal normal 12px/15px 'FS Elliot Pro', sans-serif;
}
textarea {
	font:normal normal 12px/15px 'FS Elliot Pro', sans-serif;
}
input[type=submit], input[type=button] {
	font:normal normal 12px/15px 'FS Elliot Pro', sans-serif;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:focus {
    outline: 0;
}
.clearfix:before, .clearfix:after {
	display: table;
	content: " ";
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}
.left { float: left; }
.right { float: right; }

.wrapper {
	width: 940px;
	margin: 0 auto;
}

header {
	background: #000000;
	height: 60px;
	position: fixed;
	bottom: 0; right: 0; left: 0;
	z-index: 1;
}
	header .logo {
		display: block;
		margin: 10px 0 0;
	}
	header nav ul {
		list-style: none;
		margin: 0;
	}
		header nav ul li {
			display: block;
			float: left;
			margin: 0 0 0 30px;
		}
		header nav ul li:first-of-type { margin: 0; }
			header nav ul li a {
				display: block;
				color: #ffffff;
				text-decoration: none;
				font-size: 16px;
				line-height: 60px;
				font-weight: 700;
				text-transform: uppercase;
			}
			header nav ul li:hover a {
				color: #ff0000;
			}
			header nav ul li.active a {
				color: #ffffff;
				cursor: default;
				padding: 4px 0 0;
				line-height: 52px;
				border-bottom: 4px solid #ff0000;
			}

section { position: relative; overflow: hidden; }
section:nth-child(2n) { background: #f6f6f6; }
section .half { width: 50%; }
section .title {
	font-size: 48px;
	line-height: 51px;
	font-weight: 700;
	position: relative;
}
	section .title .left {
		margin: 92px 0 52px;
	}
	section .title i {
		position: absolute;
		top: 50%; right: 0;
		margin: -24px 0 0;
		width: 129px; height: 100px;
		background: url(../images/title_i@x2.png) no-repeat;
		background-size: 100% auto;
	}
	section .title i.icon-1 { background-position: 0 0; }
	section .title i.icon-2 { background-position: 0 -100px; }
	section .title i.icon-3 { background-position: 0 -200px; }
	section .title i.icon-4 { background-position: 0 -300px; }
	section .title i.icon-5 { background-position: 0 -400px; }
	section .title i.icon-6 { background-position: 0 -500px; }
section .sub-title {
	font-size: 32px;
	margin: 0 0 40px;
}
section ul {
	margin: 0;
	list-style: none;
}
	section ul li {
		padding: 0 0 0 20px;
		font-size: 16px;
		line-height: 30px;
		position: relative;
	}
	section ul li:before {
		position: absolute;
		top: 10px; left: 0;
		content: "";
		width: 0; height: 0;
		border-top: 5px solid transparent;
		border-left: 8px solid #ff0000;
		border-bottom: 5px solid transparent;
	}

html,
body { height: 100%; }
section.main {
	height: calc( 100% - 60px );
	margin: 0 0 60px;
}

section.main {
	background: url(../images/main_bg.jpg) center center repeat;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
	section.main .inner {
		height: 100%;
		background-image: url(../images/main_inner_bg@x2.png);
		background-position: center center;
		background-size: auto 100%;
		background-repeat: repeat-x;
		position: relative;
	}

	section.main .logo {
		position: absolute;
		top: 33.333333%; bottom: 33.333333%;
		left: 50%;
		display: none;
	}
		section.main .logo span {
			position: absolute;
			top: 20%; right: 20%; bottom: 0; left: 20%;
			background: url(../images/logo.svg) center no-repeat;
			background-size: contain;
			z-index: 2;
		}
		section.main .logo i {
			position: absolute;
			top: 0; right: 0; bottom: 0; left: 0;
			width: 0; height: 0;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 100px solid red;
			z-index: 1;
		}

	section.main .scroll-arrow {
		position: absolute;
		bottom: 54px; left: 50%;
		margin: 0 0 0 -14px;
		display: block;
		width: 28px; height: 37px;
	}
		section.main .scroll-arrow:before,
		section.main .scroll-arrow:after {
			position: absolute;
			left: 0;
			width: 0; height: 0;
			border-left: 14px solid transparent;
			border-right: 14px solid transparent;
			border-top: 23px solid #030304;
			content: "";
		}
		section.main .scroll-arrow:before {
			top: 0;
			z-index: 3;
		}
		section.main .scroll-arrow:after {
			bottom: 0;
			border-top-color: #ff0000;
			z-index: 1;
		}
		section.main .scroll-arrow:hover:before {
			border-top-color: #ff0000;
		}
		section.main .scroll-arrow:hover:after {
			border-top-color: #000000;
		}

section.services {
	padding: 0 0 80px;
}
	section.services .tabs-box .tabs-list .tab {
		display: block;
		width: 380px;
		line-height: 25px;
		font-weight: 700;
		text-decoration: none;
		color: #000000;
		padding: 10px 20px;
		margin: 0 0 10px;
		position: relative;
	}
		section.services .tabs-box .tabs-list .tab i {
			display: none;
			position: absolute;
			top: 50%; right: 20px;
			width: 17px; height: 28px;
			margin: -14px 0 0;
			background: url(../images/tab_i.png) no-repeat;
		}
	section.services .tabs-box .tabs-list .tab:hover {
		background: #f6f6f6;
	}
	section.services .tabs-box .tabs-list .tab:active,
	section.services .tabs-box .tabs-list .tab.active {
		background: #ff0000;
		color: #ffffff;
	}
		section.services .tabs-box .tabs-list .tab:active i,
		section.services .tabs-box .tabs-list .tab.active i {
			display: block;
		}
	section.services .tabs-box .tabs-content .tab-cont {
		display: none;
	}
	section.services .tabs-box .tabs-content .tab-cont.shown {
		display: block;
	}

section.clients { padding: 0 0 90px; }
	section.clients ul li { font-size: 18px; }

section.works { padding: 0 0 100px; }
	section.works table {
		width: 100%;
		margin: 0 0 100px;
	}
		section.works table thead tr {
			background: #000000;
			color: #ffffff;
		}
			section.works table thead tr th {
				text-align: left;
				vertical-align: bottom;
				font-size: 19px;
				line-height: 20px;
				padding: 15px 20px;
			}
		section.works table tbody tr { background: #f8f8f8; }
		section.works table tbody tr:nth-child(2n) { background: #f1f2f2; }
			section.works table tbody tr td {
				padding: 15px 20px;
				vertical-align: middle;
			}
	section.works .tiles .tile {
		width: 300px;
		margin: 0 0 0 20px;
		background: #f1f2f2;
		display: block;
		height: 480px;
		text-decoration: none;
		color: #000000;
		padding: 30px;
		position: relative;
	}
	section.works .tiles .tile:first-of-type { margin: 0; }
	section.works .tiles .tile:hover { background: #e2e3e4; }
		section.works .tiles .tile i {
			display: block;
			width: 101px; height: 50px;
			background: url(../images/tile_i.png) no-repeat;
			margin: 0 0 19px;
		}
		section.works .tiles .tile i.tile-icon-1 { background-position: -20px -20px; }
		section.works .tiles .tile i.tile-icon-2 { background-position: -20px -90px; }
		section.works .tiles .tile i.tile-icon-3 { background-position: -20px -160px; }
		
		section.works .tiles .tile:hover i.tile-icon-1 { background-position: -141px -20px; }
		section.works .tiles .tile:hover i.tile-icon-2 { background-position: -141px -90px; }
		section.works .tiles .tile:hover i.tile-icon-3 { background-position: -141px -160px; }
		
		section.works .tiles .tile span { display: block; }
		section.works .tiles .tile .tile-title {
			font-size: 24px;
			line-height: 30px;
			font-weight: 700;
		}
		section.works .tiles .tile .medium {
			font-size: 20px;
			line-height: 30px;
			margin: 32px 0 0;
		}
		section.works .tiles .tile .number {
			font-size: 160px;
			line-height: 118px;
			color: #ff0000;
			margin: 40px 0;
		}
		section.works .tiles .tile .big {
			font-size: 40px;
			line-height: 30px;
		}
		section.works .tiles .tile .small.first { margin: 40px 0 0; }
		section.works .tiles .tile .small { margin: 20px 0 0; }

section.mtbase { padding: 0 0 90px; }

section.gallery {
	padding: 0 0 70px;
}
	section.gallery .column {
		width: 300px;
		margin: 0 0 0 20px;
	}
	section.gallery .column:first-of-type { margin: 0; }
		section.gallery .column a {
			display: block;
			margin: 0 0 20px 0;
		}
			section.gallery .column a img { display: block; }

section.contacts .info-field {
	font-size: 20px;
	line-height: 30px;
	padding: 0 0 0 35px;
	position: relative;
}
	section.contacts .info-field i {
		position: absolute;
		top: 4px; left: 0;
		background: url('../images/contacts_i@x2.png');
		width: 20px; height: 22px;
		background-size: 100% auto;
	}
	section.contacts .info-field i.icon-1 { background-position: 0 0; }
	section.contacts .info-field i.icon-2 { background-position: 0 -22px; }
	section.contacts .info-field i.icon-3 { background-position: 0 -44px; }
section.contacts #map {
	height: 370px;
	position: relative;
	margin: 90px 0 0;
}
	section.contacts #map .overlay {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 2;
	}

footer {
	height: 120px;
	position: relative;
}
	footer img {
		display: block;
		position: absolute;
		top: 50%; left: 50%;
		margin: -30px 0 0 -35px;
	}

.will-animate {
	/*opacity: 0;*/
}