html,body,
h1,h2,h3,h4,h5,h6,
ul,ol,p,figure,
form,fieldset,input,textarea{
	margin:0;
	padding:0;
}

header,nav,main,article,section,aside,footer,figure{
	display:block;
}

*{box-sizing: border-box; -webkit-tap-highlight-color: transparent;}

.cl:before,
.cl:after,
.row:before,
.row:after,
.container:before,
.container:after,
fieldset:before,
fieldset:after {
  display: table;
  content: " ";
}
.cl:after,
.row:after,
.container:after,
fieldset:after{
	clear:both;
}

/* ----- */

html,body{
	width:100%;
	height:100%;
}

nav ul,.nav ul{list-style:none;}
a img,fieldset{border:0;}

.logo img,
.img img,
.thumb img,
figure img{
	display:block;
	max-width:100%;
}

button,
input[type=button],
input[type=submit]{
	cursor:pointer;
	outline:none;
}

a,a:hover,a:focus{text-decoration:none;}
a.active,.active a{cursor:default;}

/* ----- */

.lock,
.lock body{
	height:100% !important;
	overflow:hidden;
}
.fix {position:fixed !important;}

.hidden{display:none !important;}
.fade{opacity:0; visibility:hidden; -webkit-transition:opacity 0.3s linear; transition:opacity 0.3s linear; z-index: -1;}
.fade.in{opacity:1; visibility:visible; z-index: 1;}

.no-margin{margin:0 !important;}

/* ----- */

.left{float:left !important;}
.right{float:right !important;}
.center{margin:0 auto !important;}

.text-l{text-align:left !important;}
.text-r{text-align:right !important;}
.text-c{text-align:center !important;}

.lowercase{text-transform:lowercase !important;}
.uppercase{text-transform:uppercase !important;}
.nocase{text-transform:none !important;}


/* ----- */

body{
	background: #fff;
	font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}


/* ==================== main styles ==================== */


body,input,textarea,button{
	font-family:'Roboto', sans-serif;
}


/* ----------- container ----------- */
.container{
	width:100%;
	max-width:1210px;
	padding-left:20px;
	padding-right:20px;
	margin:0 auto;
}
.container.sm{
	max-width: 760px;
}
.container.xs{
	max-width: 711px;
}
@media (max-width: 991px) {
	.container{
		
	}
}


/* ----------- grid ----------- */
.row {
	margin-left: -20px;
	margin-right: -20px;
}	
.row [class*=col-] {
	float: left;
	padding-left: 20px;
	padding-right: 20px;
}

@media (max-width: 991px) {
	
}
/* ----------- /grid ----------- */


/* ---------- flex row ---------- */
.flex-row{
	width:100%;
	display: flex;
	align-items: center;	
	justify-content: space-between;
}
.flex-start{
	justify-content: flex-start;
}
.flex-end{
	justify-content: flex-end;
}
/* ---------- /flex row ---------- */


/* ----------- icons ----------- */
.icon{
	display:inline-block;
	width:20px;
	height:20px;
	background-position:center;
	background-repeat:no-repeat;
}
/* ----------- /icons ----------- */


/* ---------- title ---------- */
.title{
	display:block;
	color:#333;
	font-family:'Gotham', sans-serif;
	font-size:26px;
	font-weight:bold;
	line-height:30px;
}

@media (max-width: 767px) {
	
}
/* ---------- /title ---------- */


/* ---------- text ---------- */
.text{
	color:#6d6e71;
	font-size:14px;
}
.text > *{margin-bottom:20px;}
.text > *:last-child{margin-bottom:0;}
.text ul,.text ol{padding-left:40px;}
.text li + li{margin-top:10px;}

.link,
.text a{
	text-decoration:underline;
}
.link:hover,
.text a:hover{
	text-decoration:none;
}
/* ---------- /text ---------- */


/* ---------- buttons ---------- */
.btn {
    display: inline-block;
    height: 41px;
    background-color: transparent;
    border: 0;
    border-radius: 20px;
    outline: none;
    padding: 12px 22px;
	
    color: #6d6e71;
	font-family:'Gotham', sans-serif;
    font-size: 13px;
	line-height: 17px;
	text-transform: uppercase;
}
.btn-primary{
	background-color: #0db04b !important;
	color: #fff;
}
.btn-primary:hover{
	background-color: #0b9e43 !important;
}
.btn-block{
	max-width: 194px;
	margin: 0 auto;
}
/* ---------- /buttons ---------- */


/* ----------- colors ----------- */
.color-white{
	color:#fff !important;
}
.color-primary{
	color:#393939 !important;
}

.bg-white{
	background-color:#fff !important;
}
.bg-primary{
	background-color:#f2f2f2 !important;
}
/* ----------- /colors ----------- */



/* ==================== layout ==================== */


/* ---------- header ---------- */
header{
	width: 100%;
	padding: 34px 160px 24px;
	
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
header .container{
	max-width: 1184px;
	padding: 0;
}
header::after{
	content: "";
	height: 1px;
	background-color: rgba(255,255,255,0.5);
	position: absolute;
	bottom: 0;
	left: 80px;
	right: 80px;
	z-index: 1;
}
header .logo{
	float: left;
}
header .logo img{
	height: 50px;
}

header .nav-wrap{
	float: right;
	padding-top: 20px;
	position: relative;
}

header nav,
header nav li,
header .lang{
	float: left;
}
header nav li{
	margin: 0 14px;
}
header nav a,
header .lang > span,
header .lang a{
	display: block;
	padding: 5px;
	color: #fff !important;
	font-family:'Gotham', sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 20px;
	text-transform: uppercase;
}
header .lang{
	margin-left: 14px;
}
header .lang > span,
header .lang a{
	padding: 5px 14px 5px 11px;
}

header nav a:hover,
header nav a.active,
header .lang:hover > span,
header .lang a:hover {
	color: #0db04b !important;
}

header .lang{
	position: relative;
	z-index: 2;
	cursor: pointer;
	-ms-touch-action: manipulation;
    touch-action: manipulation;
}
header .lang > span{
	position: relative;
}
header .lang > span::after{
	content: "";
	border-right: 3px solid transparent;
	border-left: 3px solid transparent;
	border-top: 4px solid #fff;
	position: absolute;
	top: 50%;
	right: 5px;
	margin-top: -2px;
}
header .lang:hover > span{
	background-color: #414042;
}
header .lang:hover > span:after{
	border-top-color: #414042;
}
header .lang .dropdown{
	display: none;
	width: 100%;
	padding-top: 30px;
	position: absolute;
	top: 0;
	left: 0;
}
header .lang .dropdown ul{
	list-style: none;
	background-color: #414042;
}
header .lang .dropdown a{
	padding-right: 0;
}
header .lang:hover .dropdown{
	display: block;
}

header .phone{
	background: url(/content/images/icons/phone.svg) left no-repeat;
	background-size: 14px 18px;
	padding: 0 0 0 16px;
	position: absolute;
	top: -24px;
	right: 5px;
	
	color: #fff !important;
	font-size: 12px;
	line-height: 18px;
}
header .mail{
	background: url(/content/images/icons/mail.svg) left no-repeat;
	background-size: 16px 18px;
	padding: 0 0 0 20px;
	position: absolute;
	top: -24px;
	right: 5px;
	
	color: #fff !important;
	font-size: 12px;
	line-height: 18px;
}

header.dark-header{
	background-color: #58595b;
	padding-top: 15px;
	padding-bottom: 15px;
}
header.dark-header::after{
	opacity: 0;
}

header.dark-header .phone,
header.dark-header .mail{
	top: -5px;
}


/* hamburger */
.hamburger{
	float: left;
	width: 18px;
	height: 14px;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	overflow: visible;
	position:relative;
	top: 8px;
	z-index: 150;
	margin-left: 20px;
}
.hamburger:before{
	content: "";
	position: absolute;
	top: -12px;
	bottom: -12px;
	left: -12px;
	right: -12px;
}
.hamburger span,
.hamburger span::before,
.hamburger span::after {
	display: block;
	width: 18px;
	height: 1px;
	background-color: #fff;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}
.hamburger span{
	top:0;
}
.hamburger span::before,
.hamburger span::after {
	content: "";
	display: block;
}
.hamburger span::before {
	width: 100%;
	top: 6px;
	transition-property: transform, opacity;
	transition-timing-function: ease;
	transition-duration: 0.15s;
}
.hamburger span::after {
	top: 12px;
}

.hamburger.is-active span,
header.nav-opened .hamburger span{
	transform: translate3d(-1px, 7px, 0) rotate(45deg);
}
.hamburger.is-active span::before,
header.nav-opened .hamburger span::before {
	transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
	opacity: 0;
}
.hamburger.is-active span::after,
header.nav-opened .hamburger span::after {
	transform: translate3d(0, -12px, 0) rotate(-90deg);
}
.hamburger.is-active span,
.hamburger.is-active span::before,
.hamburger.is-active span::after,
header.nav-opened .hamburger span,
header.nav-opened .hamburger span::before,
header.nav-opened .hamburger span::after{
	width: 21px;
}

@media (min-width:992px){
	.hamburger{
		display:none;
	}
}
@media (max-width:1300px){
	header{
		padding-left: 60px;
		padding-right: 60px;
	}
	header::after{
		left: 40px;
		right: 40px;
	}
}
@media (max-width:991px){
	header .phone,
	header .mail{
		display: none;
	}
	.hamburger{
		display:block;
	}
	header{
		padding-left: 20px;
		padding-right: 20px;
	}
	header::after{
		left: 0;
		right: 0;
	}
	header .nav-wrap{
		padding-top: 10px;
	}
	header nav {
		display: none;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.7);
		padding: 40px 0;
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
	header.nav-opened nav{
		display: flex;
	}
	header nav li{
		float: none;
		padding: 20px 0;
		text-align: center;
	}
	header nav a{
		display: inline-block;
		font-size: 18px;
	}
}
/* ---------- /header ---------- */


/* ---------- page ---------- */
.page{
	width:100%;
	text-align: center;
}
/* ---------- /page ---------- */


/* ---------- footer ---------- */
footer{
	width: 100%;
	background-color: #58595b;
	padding: 20px 0;
}
footer .logo{
	float: left;
}
footer .logo img{
	height: 40px;
}
footer p{
	float: right;
	padding-top: 12px;
	
	color: #929497;
	font-family:'Gotham', sans-serif;
	font-size: 10px;
	line-height: 16px;
}
/* ---------- /footer ---------- */



/* ==================== content ==================== */


/* ---------- intro ---------- */
.intro{
	display: flex;
	align-items: center;
	justify-content: center;
	
	width: 100%;
	min-height: 702px;
	/*background: url(/content/images/intro_bg.jpg) center 0 no-repeat;
	background-size: cover;*/
	padding: 108px 20px 0;
	position: relative;
	z-index: 1;
}
.intro .wrap{
	width: 100%;
	max-width: 820px;
	position: relative;
	z-index: 5;
}
.intro .text{
	height: 300px;
	position: relative;
}
.intro .text p{
	color: #fff;
	font-family:'Gotham', sans-serif;
	font-size: 30px;
	line-height: 36px;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 1;
	
	opacity: 0;
	
	-webkit-transform: translate(30px,-50%);
	transform: translate(30px,-50%);
	
	-webkit-transition: all 1.2s ease;
	transition: all 1.2s ease;
}
.intro .text p.show{
	opacity: 1;
	
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
	z-index: 3;
}

.intro .parallax,
.intro .parallax > span{
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.intro .parallax > span{
	background-position: center 0;
	background-repeat: no-repeat;
	background-size: cover;
}
.intro .parallax .layer1{
	background-image: url(/content/images/intro/bg.jpg);
	z-index: 1;
}
.intro .parallax .layer2{
	background-image: url(/content/images/intro/01.png);
	z-index: 2;
}
.intro .parallax .layer3{
	background-image: url(/content/images/intro/02.png);
	z-index: 3;
}
.intro .parallax .layer2,
.intro .parallax .layer3{
	max-width: 1523px;
}
/* ---------- /intro ---------- */


/* ---------- about ---------- */
.about{
	background: url(/content/images/about_bg.jpg) left bottom repeat-x;
	padding: 112px 0 186px;
}
.about .title{
	margin-bottom: 22px;
}
.about .description{
	color: #58595b;
	font-size: 20px;
	line-height: 24px;
	margin-bottom: 30px;
}

@media (max-width:767px){
	.about{
		padding: 80px 0;
	}
}
/* ---------- /about ---------- */


/* ---------- services ---------- */
.services{
	background: url(/content/images/service_bg.png) left bottom no-repeat;
	padding: 112px 0 50px;
}
.services .title{
	margin-bottom: 11px;
}
.service-list{
	margin-top: 120px;
}
.service-list .item{
	min-height: 470px;
	padding: 0 20px;
	position: relative;
	margin-bottom: 25px;
}
.service-list .item::after{
	content: "";
	width: 1px;
	height: 292px;
	background-color: #c7c8c9;
	position: absolute;
	top: 40px;
	right: -20px;
}
.service-list .item i{
	display: block;
	margin-bottom: 70px;
}
.service-list .item i img{
	display: block;
	height: 104px;
	margin: 0 auto;
}
.service-list .item .title{
	color: #414042;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.service-list .item .more-btn{
	display: inline-block;
	border: 1px solid #0db04b;
	border-radius: 8px;
	padding: 0 10px;
	outline: none;
	
	color: #0db04b;
	font-size: 9px;
	font-weight: bold;
	line-height: 18px;
	text-decoration: none;
	text-transform: uppercase;
}

.service-list .item > i,
.service-list .item .title,
.service-list .item .text{
	opacity: 0;
	
	-webkit-transition: opacity 0.8s ease;
	transition: opacity 0.8s ease;
}
.show-items .service-list .item > i,
.show-items .service-list .item .title,
.show-items .service-list .item .text{
	opacity: 1;
}

.service-popup article{
	width: 100%;
    background: #fff url(/content/images/popup_bg.jpg) left bottom repeat-x;
	padding:40px 65px 57px;
}
.service-popup .title{
	color: #0db04b;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 35px;
	text-align: center;
}
.service-popup .text{
	color: #6d6e71;
	text-align: left;
}


@media (min-width:992px){
	.service-list [class*=col-]:nth-child(3n) .item::after{
		display: none;
	}
}

@media (min-width:992px) and (max-width:1100px){
	.service-list .item{
		padding: 0;
	}
}
@media (max-width:991px){
	.service-list [class*=col-]:nth-child(2n) .item::after{
		display: none;
	}
}
@media (max-width:767px){
	.services{
		padding: 80px 0 40px;
	}
	.service-list {
		margin-top: 50px;
	}
	.service-list .item{
		min-height: 0;
		margin-bottom: 50px;
	}
	.service-list .item::after{
		display: none;
	}
	.service-list .item i{
		margin-bottom: 30px;
	}
	.service-popup article{
		padding:40px 20px 57px;
	}
}

/* ---------- /services ---------- */


/* ---------- projects ---------- */
.projects{
	background-color: #f7f7f7;
	padding: 112px 0 87px;
}
.projects .title{
	margin-bottom: 40px;
}

.projects .filter-button-group{
	text-align: left;
	margin-bottom: 52px;
}
.projects .filter-button-group button{
	display: inline-block;
	height: 35px;
	background-color: transparent;
	border: 0;
	border-radius: 17px;
	outline: none;
	padding: 0 22px;
	
	color: #6d6e71;
	font-size: 12px;
}
.projects .filter-button-group button.selected{
	background-color: #0db04b;
	color: #fff;
}

.projects-list{
	margin: 0 -18px;
	position: relative;
}
.projects-list .item{
	background-color: #fff;
	padding: 37px 30px 0;
	margin-bottom: 40px;
}
.projects-list .item figure,
.projects-list .item figure img{
	display: block;
	width: 100%;
}
.projects-list .item figure{
	padding-top: 72.85%;
	position: relative;
	overflow: hidden;
	margin-bottom: 37px;
	cursor: pointer;
}
.projects-list .item figure img{
	position: absolute;
	top: 0;
	left: 0;
}
.projects-list .item > div{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 86px;
	border-top: 1px solid #dbdcdd;
	padding: 10px 0;
}
.projects-list .item .title{
	color: #414042;
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 5px;
}
.projects-list .item p{
	color: #6d6e71;
	font-size: 14px;
	line-height: 18px;
}

@media (max-width:767px){
	.projects{
		padding: 80px 0 40px;
	}
}
/* ---------- /projects ---------- */


/* ---------- gallery ---------- */
.gallery{
	padding: 112px 0 87px;
}
.gallery .title{
	margin-bottom: 40px;
}

.gallery-list .item{
    display: block;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 73.215%;
	margin-bottom: 40px;
    outline: none !important;
}
@media (max-width:767px){
	.gallery{
		padding: 80px 0 40px;
	}
}
/* ---------- /gallery ---------- */


/* ---------- contact ---------- */
.contact{
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	background-color: #f7f7f7;
	text-align: left;
}
.contact .img,
.contact .info{
	width: 50%;
}
.contact .img{
	background: url(/content/images/contact.jpg) center no-repeat;
	background-size: cover;
}

.contact .info{
	min-height: 400px;
	padding: 53px 40px 70px;
	font-size: 13px;
}
.contact .info,
.contact .info a{
	color: #6d6e71 !important;
}
.contact .info a{
	text-decoration: none;
}
.contact .info > div{
	width: 100%;
	max-width: 438px;
	margin: 0 auto;
}
.contact .info section:not(:last-child){
	margin-bottom: 71px;
}
.contact .info .title{
	border-bottom: 1px solid #d3d4d5;
	padding-bottom: 17px;
	margin-bottom: 36px;
}
.contact .info p:not(:last-child){
	margin-bottom: 27px;
}

@media (max-width:767px){
	.contact{
		display: block;
	}
	.contact .img{
		display: none;
	}
	.contact .info{
		width: 100%;
		min-height: 10px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.contact .info > div{
		max-width: 100%;
	}
}
/* ---------- /contact ---------- */


/* ---------- section ---------- */
/* ---------- /section ---------- */