body { overflow: hidden; font-family: "sofia-pro",sans-serif; font-style: normal; font-weight: 400; }
h1 {  font-family: 'Playfair Display', serif; font-size: 40px; color:#3f4d63; font-weight: 600; line-height: 1;}
h2 { font-size: 30px; color: #fff; font-weight: 600; line-height: 1; line-height: 1.4; }
h3 { font-family: 'Playfair Display', serif; font-size: 50px; font-weight: bold; margin-bottom: 10px;  }
h4 { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: bold; margin-bottom: 5px;  }
h5 { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: bold; text-transform: uppercase; font-family: "sofia-pro",sans-serif; letter-spacing: 0.06em; color:#45536b; }
p { font-weight: 100; font-size: 13px; line-height: 1.8; font-family: 'Playfair Display', serif; color:#45536b;}
a { outline: none; }
img { width: 100%; height: auto; display: block; }
header { position: absolute; top:0; right: 0; left:0; z-index: 9; width: 100%; }
header nav li { display: initial; margin-left: 70px; font-size: 15px; color:#fff; font-weight: 200; letter-spacing: 0.05em;}
header nav li a.current { font-weight: 600; }
header .col-7 { float: right; text-align: right; margin-top: 50px;}
header .logotype .inside-logo { display: none; }
header.inside-header .logotype .inside-logo { display: inline-block; }
header.inside-header .logotype .homepage-logo { display: none; }
header.inside-header .logotype {display: inline-block; }
header.inside-header nav li { color:#3f4d63; }
header.inside-header.sticky { position: fixed; top:0; left: 0; background: #fff; z-index: 9999;}
header.inside-header.sticky .logotype {margin: 20px 0 20px; max-width: 220px; transition: all 0.5s ease; }
header.inside-header.sticky .col-7 { margin-top: 43px; }
.logotype { max-width: 250px; top:0px; left:0px; display: inline-block; margin-top: 30px; }
.logotype.home { display: block; }

.wrapper { max-width: 1600px; margin:0 auto; }
.wrap { width: 90%; margin:50px auto; }
.home-slider { position: absolute; top:0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.swiper-pagination {text-align: right; left: initial; bottom: 40px; max-width: 1600px; width: 50%; right: 150px; margin: 0 auto; }
.swiper-container .wrapper { position: absolute; z-index: 999; left:0; right: 0; top:40px; }
.swiper-pagination-bullet, .swiper-pagination-bullet-active { background: #fff; margin: 0 7px;}
.wrapper.about-us { position: absolute; bottom: 30px; z-index: 99; left: 150px; right: inherit; width: 50%; } 
.btn { margin: 0; text-align: center; position: relative; width: 220px; height: 50px; padding: 0; transition: all ease .5s; color:#fff;  }
.btn:hover { color: #fff; }
.btn:before { content: ""; position: relative; border-bottom: 1px solid #fff; width: 50px; height: 1px; left: 0px; top: 15px; float: left; transition: all ease .5s; }
.btn:hover:before { left: 155px; border-bottom: 1px solid #fff; }  
.btn.btn-color { color: #45536b; }
.btn.btn-color:before { border-bottom: 1px solid #45536b; top: 12px;}

.header-center { text-align: center; margin-bottom: 100px; }
.about-container { background: #fff; height: 100%; position: absolute; top:0; left:-50%; z-index: 99; color: #3f4d63; padding: 15% 5%; box-sizing: border-box; transition:all 0.6s ease; }
.about-container > div { column-count: 2; }
.about-container.active { left:0; }
.about-us.active { left:50%; transition:all 0.6s ease;  }
.about-container h3 { display: inline-block; vertical-align: middle; margin-left: 0px; font-size: 60px; color:#3f4d63;}
.about-container p { font-weight: 100; font-size: 15px; line-height: 1.7; font-family: 'Playfair Display', serif; color:#3f4d63;}
 
.insidepage { padding: 10% 0 0; }
.content-project { position: absolute; z-index: 999; top: 0; width: 50%; height: 100%; right: -50%; padding: 20px; box-sizing: border-box; background: rgba(63,77,99,0.8); opacity: 0; }
.content-project h4, .content-project p { color:#fff; }
.content-project p { font-size: 12px; line-height: 1.6; }
.grid-item { width: 31%; margin: 10px 10px; box-sizing: border-box; overflow: hidden; }
.grid-item:hover .content-project { right: 0; transition:right 0.6s ease; opacity: 1; }
.grid-item a { display: block; position: relative; }
.grid-item a img { width: 100%; height: auto; }

.banner-project { max-width: 90%; margin: 0 auto; }
.banner-project .col-6 { vertical-align: middle; width: 49.5%; display: inline-block; float: initial; }
.banner-content { padding: 50px; box-sizing: border-box;  }
.banner-content h1 { margin-bottom: 15px; }
.banner-content p { max-width: 90%; }
.banner-content p a.btn { margin-top: 40px; display: block; font-weight: bold; }
.banner-content { float: initial; margin: 0 auto; display: block; }
.team { text-align: center; }
.team .col-3 { padding: 10px; box-sizing: border-box; width: 24.5%; float: initial; display: inline-block; overflow: hidden; }
.team .col-3:first-child { animation-delay: 1s; }
.team .col-3:nth-child(2) { animation-delay: 1.2s; }
.team .col-3:nth-child(3) { animation-delay: 1.4s; }
.content-team { position: absolute; width: 60%; height: 100%; background: rgba(63,77,99,0.8); text-align: left; top:0; right: -60%; color: #fff; padding: 35% 15px 10px; opacity: 0; box-sizing: border-box; }
.content-image { background-size: cover; background-position: center; height: 350px; width: 100%; overflow: hidden; position: relative; }
.team .col-3:hover .content-team { opacity: 1; transition: all 0.5s ease; right: 0%;}
.team .content-team p { color:#fff; }
.contact-details { background:#3f4d63; height: 100%; position: absolute; right: 0; padding: 70px; box-sizing: border-box; }
.contact-details h1 { color:#fff !important; margin-bottom: 30px;} 
.contact-details p { color:#fff !important; line-height: 1.9; } 
.contact-image { height: 750px; background-size: cover; background-position: center; overflow: hidden; }
.insidepage .wrapper { position: relative; }


.fancybox-slide .fancybox-image-wrap { position: absolute !important; transform: translate(0,0) !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; }
.fancybox-image { width: 100% !important; height: auto !important; display: block !important; position: absolute !important; margin: auto; min-width: 700px; left: 0; right: 0; top: 0; bottom: 0; max-width: 800px; }


form { margin-top: 6%; }
input, textarea { background: none; border:0; color:#45536b; padding: 10px 0; box-sizing: border-box; margin-bottom: 10px; border-bottom: 2px solid #536888; width: 100%; -webkit-appearance: none;  -moz-appearance: none;  appearance: none; font-family: 'Playfair Display', serif; letter-spacing: 0.07em;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #45536b; font-family: 'Playfair Display', serif; }
input::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */ color: #45536b; font-family: 'Playfair Display', serif; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */ color: #45536b; font-family: 'Playfair Display', serif; }
input:-moz-placeholder, textarea:-moz-placeholder  { /* Firefox 18- */ color: #45536b; font-family: 'Playfair Display', serif; }
form input[type="submit"] { width: 35%; float: right; border:0; background: #fff; color:#3f4d63; padding: 15px 0; font-weight: 800; letter-spacing: 0.05em; border-radius: 2px; text-align: right; font-size: 17px; }
.form-group.col-6:nth-child(odd) { padding-right: 20px; box-sizing: border-box; }
.g-recaptcha { display: inline-block; }
.highlight-form-field { border-bottom: 2px solid #EC644B;  }
#systemMessage { font-size: 16px; line-height: 28px; margin-bottom: 15px; color: #EC644B; }
.highlight-form-field::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #EC644B; }
.highlight-form-field::-moz-placeholder { /* Firefox 19+ */ color: #EC644B; }
.highlight-form-field:-ms-input-placeholder { /* IE 10+ */ color: #EC644B; }
.highlight-form-field:-moz-placeholder { /* Firefox 18- */ color: #EC644B; }
.gray-bg { background: rgba(63,77,99,0.1); padding: 30px 0; }
.banner-project h5 { margin:30px 0; }

.contact-page h3 { color: #45536b; margin-bottom: 15px; font-size: 25px; }
.copyright {  width: 100%; text-align: left;  margin-top: 10px; }
.copyright p { font-size: 10px !important; letter-spacing: 0.04em;opacity: 0.5;}
.copyright p a:hover { opacity: 1; }
.wrapper-services:nth-child(odd) {  background: rgba(63,77,99,0.1); padding: 30px 0; }
.wrapper-services:nth-child(odd) .banner-content { float: left; }
.wrapper-services:nth-child(odd) .image-banner { float: right; }
.banner-project.contact-page .banner-content { padding: 50px 0 50px 50px; }
.contact-image img { width: 150%; }

.mobile-menu { display: none; z-index: 99999999;}
.mobile-button { position: fixed; top: 64px; right: 22px; margin-left: -22px; margin-top: -22px; width: 44px; height: 33px; cursor: pointer; }
.mobile-button b { position: absolute; left: 0; width: 35px; height: 2px; background-color: #444; }
.mobile-button b:nth-child(1) { top: 0; }
.mobile-button b:nth-child(2) { top: 40%; }
.mobile-button b:nth-child(3) { top: 80%; }
.mobile-button.home-menu b { background-color: white; }
.mobile-button.home-menu.active b { background-color: #444; }

.mobile-nav-content { position: fixed; background: #fff; height: 100%; width: 100%; top:0; left: 0; padding: 30px; z-index: 8; display: none; box-sizing: border-box; overflow: scroll; }
.mobile-nav-content.active { display: block; }
.mobile-nav-content li { font-size: 18px; padding: 15px 0; }

#map { width: 100%; height: 500px; background: rgba(63,77,99,0.1); }




/* ==========================================================================
    Media Queries
   ========================================================================== */

@media all and (max-width: 1600px) { 
	.home-slider .swiper-slide img { width: 120%; } 
	.wrapper { max-width: 1300px; }
	.wrapper.about-us { left: 80px; }
	.wrapper.about-us.active{ left: 50%; }
	.swiper-pagination { right: 80px; }
	.about-container h3 { font-size: 50px; }
	.wrap { margin: 20px auto; }
	.header-center { margin-bottom: 0; }
	.banner-content h1 { margin-bottom: 15px; line-height: 1.1; }
	.banner-project h5 { margin: 15px 0; }
	.banner-content { padding: 40px; }
	h5 { font-size: 12px; }
	.banner-content p { max-width: 100%; }
	.wrapper-services { padding: 20px 0; }
	h1 { font-size: 35px; }
	header.inside-header.sticky .logotype { max-width: 195px;  margin: 12px 0; }
	header.inside-header.sticky .col-7 { margin-top: 31px; }
	.contact-image img { width: 180%; margin-left: -40%;}
	.contact-details { padding: 70px 60px; }
}

@media all and (max-width: 1280px) {  
	.wrapper { max-width: 1100px; }
	.logotype { max-width: 250px; }
	header nav li { margin-left: 45px; } 
	h1 { font-size: 28px; }
	h2 { font-size: 24px; } 
	.btn {width: 190px;}
	.about-container h3 { font-size: 42px; }
	.about-container p { font-size: 13px; }
	.home-slider .swiper-slide img { width: 133%; margin-left: -15%; } 
	.banner-project { max-width: 100%; }
	.banner-content { padding: 50px; }
	.wrapper-services { padding: 40px 0; }
	.contact-details { padding: 50px 50px; }
	.contact-image img { width: 208%; margin-left: -61%; }
	.contact-details input[type="submit"] { width: 28%; }
	.contact-image {  height: 650px; }
	.contact-details h1 { margin-bottom: 10px; } 
	.copyright { margin-top: 20px; }
	.copyright p { font-size: 9px !important; line-height: 1.6;} 
}

@media all and (max-width: 980px) { 
	.home-slider .swiper-slide img { width: 240%; margin-left: -70%; }
	.wrapper { max-width: 95%; margin: 0 auto; } 
	.logotype { max-width: 220px; }
	.about-container > div { column-count: 1; }
	.about-container { padding: 37% 5%; }
	.wrapper.about-us { left: 35px; }
	.banner-content { padding: 20px; } 
	h1 { font-size: 27px; }
	p { font-size: 12px; }
	.contact-image { height: 250px; width: 100%; }
	.contact-details { position: relative; width: 100%; }
	.insidepage { padding: 17% 0 0; }
	.contact-image img { width: 109%; margin-left: 0; margin-top: -22%; }
}

@media all and (max-width: 736px) { 
	.home-slider .swiper-slide img { width: 120%; margin-left: 0%; }
	.logotype { max-width: 200px; }
	header .col-7 { display: none; }
	.about-container { padding: 30px; }
	.about-container h3 { font-size: 25px; margin-bottom: 5px; }
	.about-container p { font-size: 12px; margin-bottom: 10px; }
	.wrapper.about-us { bottom: 10px; }
	.swiper-pagination { bottom: 30px; }
	.btn:hover:before { left: 5px; }
	.wrapper.about-us { left: 25px; }
	h1 { font-size: 22px; }
	.banner-content h1 { line-height: 1.2; } 
	h5 { font-size: 10px; }
	.banner-content p a.btn { margin-top: 15px; }
	.wrapper-services { padding: 0px 0; }
	.mobile-menu { display: block; }
}

@media all and (max-width: 680px) { 
	.about-container { width: 70%; left:-70%; overflow: scroll; } 
	.wrapper.about-us { bottom: 50px; }
	.wrapper.about-us.active { left:65%; }
	.swiper-pagination { bottom: 15px; text-align: center; left: 0; right: 0; }
	.about-container p { font-size: 11px; }
	.about-container h3 { font-size: 21px; margin-bottom: 5px; }
	.banner-project .col-6 { vertical-align: top; }
	.insidepage {padding: 18% 0 0;}
}

@media all and (max-width: 480px) { 
	.home-slider .swiper-slide img { width: 330%; margin-left: -100%; }
	.about-container { left: -100%; width: 100%;}
	.wrapper.about-us { left: 15px; bottom: 12%; }
	.about-container p { margin-bottom: 10px; }
	.wrapper.about-us.active { z-index: 9999;   left: 47%;}
	.wrapper.about-us.active h2 { color: #3f4d63; right: 34px;}
	.btn:hover:before { left: 5px;}
	.wrapper.about-us.active .btn:hover:before { border-bottom: 1px solid #3f4d63; left: 190px;}
	.swiper-pagination { text-align: center; left: 0; right: 0; bottom: 20px; }
	.banner-project .col-6 { width: 100%; }
	.wrapper-services { padding: 20px 0; }
	.banner-content { padding: 20px 0; }
	.insidepage { padding: 26% 0 0; }
	.banner-project .col-6 { vertical-align: middle; } 
	.contact-image { height: 140px; } 
	.contact-details { padding: 30px; }
	.contact-details input[type="submit"] { width: 100%; margin-top: 13px; }
	.form-group.col-6:nth-child(odd) { padding-right: 0; } 
	.mobile-menu { display: inline-block; }
	.team .col-3 { width: 100%; }
	.content-image { height: 250px; }
	.grid-item { width: 100%; margin: 0 0 10px;}
	header.inside-header .logotype { margin-top: 22px; display: inline-block; margin-left: 14px; max-width: 170px; }
	h4 { font-size: 13px; }
	.mobile-button { top: 54px; right: 15px; }
	.content-team { padding: 28% 15px 10px; }
	.content-project { width: 100%; height: auto; bottom:0; top: initial; opacity: 1; right: 0; padding: 10px; text-align:center; }
	.content-project p { display: none; }
}

@media all and (max-width: 320px) { 
	.wrapper.about-us.active { left: 38%; }
	.insidepage {padding: 32% 0 0;}
	.contact-details { padding: 20px; }
}

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px) {
	.btn:hover:before { left: 5px; }
}  

@media only screen  and (min-device-width : 1024px)  and (max-device-width : 1366px) {
	.home-slider .swiper-slide img { width: 240%; margin-left: -70%; }
	.wrapper { max-width: 95%; margin: 0 auto; } 
	.logotype { max-width: 220px; }
	.about-container > div { column-count: 1; }
	.about-container { padding: 37% 5%; }
	.wrapper.about-us { left: 35px; }
	.btn:hover:before { left: 5px; }
	.contact-image { height: 400px; width: 100%; }
	.contact-details { position: relative; width: 100%; }
	.insidepage { padding: 17% 0 0; }
	.contact-image img { width: 109%; margin-left: 0; margin-top: -22%; }
	input, textarea { max-height: 170px; }
} 

@media only screen  and (min-device-width : 1024px)  and (max-device-width : 1366px)  and (orientation : landscape) {
	.home-slider .swiper-slide img { width: 140%; margin-left: -10%; }
	.about-container { padding: 23% 5%; }
	.contact-image img { width: 180%; margin-left: -40%; margin-top: 0%; }
	.contact-image { height: 750px; width: 50%; }
	.contact-details { position: absolute; width:50%; }
	.insidepage { padding: 11% 0 0; }
} 

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (orientation : landscape) {
	.wrapper { max-width: 95%; margin: 0 auto; } 
	.about-container h3 { font-size: 35px; }
	.about-container p { font-size: 12px; line-height: 1.8; }
	.banner-content { padding: 20px; }
	h1 { font-size: 29px; }
	input, textarea { max-height: 120px; }
	.g-recaptcha { float: right; }
	.contact-details input[type="submit"] { width: 79%; margin-top: 9px; }
	header nav li { font-size: 14px; }
	header .col-7 { margin-top: 42px; }
	.contact-image { height: 636px; }
	.contact-image img { width: 199%; margin-left: -40%; margin-top: 0%; }
}