@font-face {
	font-family: 'Gotham Pro';
	src: url('fonts/GothamPro-BoldItalic.eot');
	src: local('Gotham Pro Bold Italic'), local('GothamPro-BoldItalic'),
		url('fonts/GothamPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamPro-BoldItalic.woff') format('woff'),
		url('fonts/GothamPro-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Gotham Pro';
	src: url('fonts/GothamPro-Italic.eot');
	src: local('Gotham Pro Italic'), local('GothamPro-Italic'),
		url('fonts/GothamPro-Italic.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamPro-Italic.woff') format('woff'),
		url('fonts/GothamPro-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Gotham Pro';
	src: url('fonts/GothamPro-Medium.eot');
	src: local('Gotham Pro Medium'), local('GothamPro-Medium'),
		url('fonts/GothamPro-Medium.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamPro-Medium.woff') format('woff'),
		url('fonts/GothamPro-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Pro';
	src: url('fonts/GothamPro-BlackItalic.eot');
	src: local('Gotham Pro Black Italic'), local('GothamPro-BlackItalic'),
		url('fonts/GothamPro-BlackItalic.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamPro-BlackItalic.woff') format('woff'),
		url('fonts/GothamPro-BlackItalic.ttf') format('truetype');
	font-weight: 900;
	font-style: italic;
}

@font-face {
	font-family: 'Gotham Pro';
	src: url('fonts/GothamPro-Bold.eot');
	src: local('Gotham Pro Bold'), local('GothamPro-Bold'),
		url('fonts/GothamPro-Bold.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamPro-Bold.woff') format('woff'),
		url('fonts/GothamPro-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Pro Narrow';
	src: url('fonts/GothamProNarrow-Bold.eot');
	src: local('Gotham Pro Narrow Bold'), local('GothamProNarrow-Bold'),
		url('fonts/GothamProNarrow-Bold.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamProNarrow-Bold.woff') format('woff'),
		url('fonts/GothamProNarrow-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Pro Narrow';
	src: url('fonts/GothamProNarrow-Medium.eot');
	src: local('Gotham Pro Narrow Medium'), local('GothamProNarrow-Medium'),
		url('fonts/GothamProNarrow-Medium.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamProNarrow-Medium.woff') format('woff'),
		url('fonts/GothamProNarrow-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Pro';
	src: url('fonts/GothamPro-LightItalic.eot');
	src: local('Gotham Pro Light Italic'), local('GothamPro-LightItalic'),
		url('fonts/GothamPro-LightItalic.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamPro-LightItalic.woff') format('woff'),
		url('fonts/GothamPro-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'Gotham Pro';
	src: url('fonts/GothamPro-Light.eot');
	src: local('Gotham Pro Light'), local('GothamPro-Light'),
		url('fonts/GothamPro-Light.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamPro-Light.woff') format('woff'),
		url('fonts/GothamPro-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Pro';
	src: url('fonts/GothamPro-Black.eot');
	src: local('Gotham Pro Black'), local('GothamPro-Black'),
		url('fonts/GothamPro-Black.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamPro-Black.woff') format('woff'),
		url('fonts/GothamPro-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Pro';
	src: url('fonts/GothamPro.eot');
	src: local('Gotham Pro'), local('GothamPro'),
		url('fonts/GothamPro.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamPro.woff') format('woff'),
		url('fonts/GothamPro.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Pro';
	src: url('fonts/GothamPro-MediumItalic.eot');
	src: local('Gotham Pro Medium Italic'), local('GothamPro-MediumItalic'),
		url('fonts/GothamPro-MediumItalic.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamPro-MediumItalic.woff') format('woff'),
		url('fonts/GothamPro-MediumItalic.ttf') format('truetype');
	font-weight: 500;
	font-style: italic;
}

* {
	margin: 0;
	padding:0;
	outline:none !important;
}

*:focus {
	outline:none !important;
	box-shadow: none !important;
}

html, body {
	font-family: 'Gotham Pro', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 24px;
	color:var(--black);
    background-color: var(--white);
    height:100%;
}

:root {
	--yellow: #FDEB1A;
	--black: #000000;
	--white: #FFFFFF;
	--gray: #F4F4F4;
	--dark-gray: #666;
}

.accent-color {
	color:var(--yellow);
}

button, a.button {
	font-size: 18px;
	color:var(--white);
	line-height: 20px;
	background: var(--white);
    border-radius: 10px;
    border:none;
    padding:14px 30px;
    display:block;
	text-decoration: none;
	cursor:pointer;
	text-align: center;
}

button.action, a.button.action {
	font-size: 20px;
	color:var(--black);
	line-height: 38px;
	background-color:var(--yellow);
}

button.black, a.button.black {
	color:var(--white);
	background-color:var(--black);
}

a {
	color:var(--white);
}

a:hover {
	color:var(--yellow);
}

p, h1, h2, h3 {
	margin-bottom:25px;
}

h2 {
	font-size: 40px;
	line-height: 38px;
}

h3 {
	font-size: 24px;
	line-height: 30px;
}

.container-xl, .content {
    height:100%;
}

header {
    font-size: 16px;
    line-height: 15px;
	background-color: var(--black);
	color:var(--white);
}

.navbar-nav {
	background-color: var(--black);
	padding:25px 0px;
}

.navbar-brand {
    height:100%;
	padding: 18px 25px;
	margin:0px;
}

.navbar-toggler {
	border:none;
	margin:0px 15px;
}

header .navbar-brand {
    background-color:var(--yellow);
	text-align: center;
}

.navbar {
    padding:0;
}

header a {
	color:var(--white);
	text-decoration:none;
}

header a:hover,
footer a:hover,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover {
	color:var(--yellow);
}

.navbar .navbar-nav .nav-link {
    color:var(--white);
    padding:10px 25px;
	text-transform:uppercase
}

header .language-desktop {
	text-align:right;
}

header .language-desktop a, header .language-mobile a {
	margin-right:18px;
}

header .language-mobile {
	display: none;
	margin:0px 0px 35px 25px;
}

@media (max-width: 991px) {
    header .language-desktop {
		display: none;
    }
	
	header .language-mobile {
		display: block;
    }
}

main > div {
    padding: 70px 0px;
}






/*-------------------------------------------SLIDE------------------------------------------------*/

main .slide {
    color:var(--white);
    background:url(../img/background.jpg) no-repeat center 20%;
    background-size: cover;
    height:777px;
}

main .slide .text {
    width:50%;
}

main .slide img {
    margin-top:25px;
}

main .slide .button {
    width:320px;
    margin-top:70px;
}



/*-------------------------------------------PROJECT------------------------------------------------*/
main .project {
    color:var(--black);
    background-color:var(--gray);
}

main .project h3 {
    margin-top:40px;
}

main .project .text {
    width:50%;
}

main .project .image {
    height:320px;
    position:relative;
}

main .project .image img {
    width:100%;
    position:absolute;
	top:-40px;
}

main .project .button {
    width:320px;
    margin-top:60px;
}

main .project .one {
    
}

main .project .two {
    margin-top:60px;
}

main .project .tree {
    padding-left:100px;
	margin-top:220px;
}

main .project .tree h3 {
    font-size: 40px;
	line-height: 46px;
	font-weight: normal;
}

@media (max-width: 991px) {
	main .project .image {
		height:300px;
	}

	main .project .image img {
		width:auto;
		height:100%;
		top:0px;
	}

	main .project .two {
		margin-top:20px;
	}
}





/*-------------------------------------------PRODUCTION------------------------------------------------*/
main .production {
    color:var(--black);
}

main .production h3 {
    margin-top:40px;
}

main .production .image {
    background:url(../img/cistern.png) no-repeat center right;
    background-size: 530px auto;
    width:100%;
    height:300px;
    position:relative;
	overflow: visible;
	margin:25px 0px;
	
}

@media (min-width: 1024px) {
	main .production .image {
		position:absolute;
		right: 0px;
	}
}

@media (max-width: 1200px) {
	main .production .image {
	}
}




/*-------------------------------------------PROGRESS------------------------------------------------*/
main .progress-project {
    color:var(--black);
    padding: 40px 0px;
    background-color: var(--yellow);
}

main .progress-project .steps {
    margin-top:40px;
}

main .progress-project .steps > div {
	border-top:2px solid Transparent;
	margin-left:15px;
	padding-right:15px;
	height:180px;
	
}

main .progress-project .steps > div:not(:last-child) {
    border-top:2px solid #000;
}

main .progress-project .steps .year {
    font-size: 44px;
    line-height: 10px;
	text-transform: uppercase;
	width:130px;
	position: relative;
	background-color:var(--yellow);
	top:-6px;
}

main .progress-project .steps > div:not(:last-child) .year:after {
	content:'';
	width:10px;
	height:10px;
	background:url(../img/ellips.png) no-repeat center center;
	position:absolute;
	top:0;
	right:0;
}

main .progress-project .steps > div:not(:first-child) .year:before {
	content:'';
	width:10px;
	height:10px;
	background:url(../img/ellips.png) no-repeat center center;
	position:absolute;
	top:0;
	left:-16px;
}

main .progress-project .steps .month, main .progress-project .steps p{
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

main .progress-project .steps .month {
    margin-top:14px;
}

main .progress-project .steps p {
    margin:32px 0px;
}

main .progress-project div:first-child > button {
    color:var(--white);
    background-color:var(--black);
}

main .progress-project button {
    color:var(--black);
	width:100%;
	margin:10px 0px;
}

@media (max-width: 767px) {
	main .progress-project .steps > div:not(:last-child) {
		border:none;
		border-left:2px solid #000;
	}

	main .progress-project .steps > div {
		padding-left:36px;
	}

	main .progress-project .steps > div .year:before {
		content:'';
		width:10px;
		height:10px;
		background:url(../img/ellips.png) no-repeat center center;
		position:absolute;
		top:0;
		left:-42px !important;
	}

	main .progress-project .steps > div:not(:last-child) .year:after {
		background:none;
	}

	main .progress-project .process, main .progress-project .ready {
		height:170px;
	}

	main .progress-project .project {
		height:500px;
	}
}






/*-------------------------------------------NEWS------------------------------------------------*/
main .news {
    color:var(--black);
}

main .news .item {
    font-size: 12px;
    line-height: 22px;
	margin-top:25px;
}

main .news .item .image img {
    width:100%;
	border-radius:5px;
}

main .news .item .description {
    margin:35px 0px;
}

main .news .item .description p {
    margin-top:5px;
}

main .news .item .description a {
    font-weight: 800;
    color:var(--black);
    text-decoration: none;
}

main .news .more {
    text-align:center;
}

main .news .more a.button {
    width:320px;
    margin:20px auto 0px auto;
}




/*-------------------------------------------CONTACTS------------------------------------------------*/
main .contacts {
    background-color:var(--yellow);
}

main .contacts .maps {
	width:100%;
	margin-top:40px;
}

main .contacts .maps iframe {
	width:100%;
	border-radius:10px;
}

main .contacts .bottom {
    margin:80px 0px 40px 0px;
}

main .contacts .bottom .adress {
    font-size: 22px;
	line-height: 30px;
}

main .contacts .bottom > div {
    padding:11px;
}

main .contacts .button {
	color:var(--yellow);
	width:340px;
	font-size: 20px;
	line-height: 38px;
	background-color:var(--black);
}

@media (max-width: 991px) {
	main .contacts .email {
		padding-top:60px;
	}

	main .contacts .phone {
		padding-top:20px;
	}
}




/*-------------------------------------------FOOTER------------------------------------------------*/
footer {
    background-color:var(--black);
}

footer .navbar-collapse {
  transition: none !important;
}

@media (max-width: 1200px) {
	header .container-xl, footer .container-xl {
		padding:0px 0px;
	}
	
	header .navbar-brand {
		text-align:left;
	}
	
	.container-xl {
		padding:0px 25px;
	}
}