*{font-family: 'Gotham Light', sans-serif; list-style:none; margin:0; padding:0; font-style:normal; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align:top; color:#30424a; font-weight:normal; letter-spacing: 1px;}
html, body {width:100%; height:100%; margin:0; padding:0; font-size:15px; line-height:30px; color:#000; text-align: left;}
a {cursor:pointer; text-decoration:none; z-index:1; color:#30424a; font-weight: 500; transition: .3s ease;}
a:hover {color:#46bfe0;}
h1, h2, h3, h4{font-family:'Gotham Bold', sans-serif;}
h1{text-transform: uppercase; font-size:35px; margin-bottom: 20px; letter-spacing: 2px;}
.section {position: relative; float: left; width: 100%; z-index: 1;}
.container {position: relative; margin: auto; width:1440px;}
.linkbtn{text-transform:uppercase;}
.linkbtn::after {position:absolute; content:""; bottom:0; left:0; width:100%; height:2px; background:#46bfe0; z-index:-1; transition: .3s ease;}
.linkbtn:hover::after{bottom:0px; height:30px;}
.linkbtn:hover{color: #fff !important;}

#cookiebar{position:fixed; bottom:0; left:0; width:100%; padding:8px 5%; line-height:20px; background-color:#ddd; color:#777; font-size:13px; text-align:center; z-index:97; letter-spacing:0px;}
#cookiebar a{color:#777; text-decoration:underline;}
#cookiebar a:hover{color:#444; text-decoration:underline;}
#cookiebar span{display:inline-block; margin-left:20px; cursor:pointer;}
#cookiebar span:hover{opacity:0.5;}

.header{margin:60px 0 54px;}
.navbar{text-align: center;}
.navbar .logo {background: url(/img/logo.png) no-repeat center / 286px 50px; width:286px; height:50px; display: inline-block; margin-bottom: 56px;}
.navbar nav ul li {display: inline-block; margin: 0; padding: 0 15px; text-transform: uppercase;}
.navbar nav ul li a {font-family:'Gotham Bold', sans-serif; letter-spacing: 2px; position: relative; transition:0.3s ease;}
.navbar nav ul li a::after{position:absolute; content:""; bottom:-8px; left:50%; width:0%; height:3px; background:#46bfe0; z-index:-1; transition:0.3s ease;}
.navbar nav ul li a:hover::after, .navbar nav ul li a.active::after{width:100%; left:0;}
.navbar p {position: absolute; top:0; right:0; padding:30px 26px 0 0;}
.navbar p a{margin-right:20px; font-size:13px;}

.serviceshome .wrapper, .serviceshome .owl-carousel {float:left; width:100%;}
.serviceshome .item {position:relative; float:left; width:100%; height: 700px;}
.serviceshome .item .image{position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center / cover; z-index:1;}
.serviceshome .item .overlay {position: absolute; top: 0; left:0; background: #30424a; height: 100%; width:100%; opacity: 0.8; transition: .3s ease; z-index:2;}
.serviceshome .item .title {position: absolute; bottom: 0; left:0; padding: 0 50px 40px 50px; width:100%; z-index:3;}
.serviceshome .item .title .line {height:4px; background: #46bfe0; position: relative; width: 20%; transition: .3s ease;}
.serviceshome .item .title p {font-family:'Gotham Bold', sans-serif; font-size: 17px; line-height:26px; color: #FFF; margin:0 0 14px;}
.serviceshome .item:hover .overlay{opacity: 0.2;}
.serviceshome .item:hover .title .line {width: 40%;}
.serviceshome .arrows {position: relative; height: 700px;}
.serviceshome .arrows .image {position: absolute; top: 50%;}
.serviceshome .arrows .image:nth-of-type(1) {background: url(/img/icons/car-left.png) no-repeat center / 59px 11px; width: 59px; height: 11px; left: -200px;}
.serviceshome .arrows .image:nth-of-type(2) {background: url(/img/icons/car-right.png) no-repeat center / 59px 11px; width: 59px; height: 11px; right: -200px;}
.serviceshome .arrows:hover .image{opacity:0.6;}

.abouthome {padding:200px 0 0;}
.abouthome .wrapper {display: table;}
.abouthome .wrapper h1 {position: relative; display: inline-block; margin:0 0 30px;}
.abouthome .wrapper h1::after {position: absolute; content: ""; left: 0; width: 100%; height:4px; background: #46bfe0; top:-20px;}
.abouthome .wrapper div {display: table-cell; width: 50%;}
.abouthome .wrapper .content {padding:100px 100px 100px 0;}
.abouthome .wrapper .content p{text-align:justify;}
.abouthome .wrapper .content .title .line {position: absolute; width: 204px; height: 3px; background: #46bfe0; margin-top: -14px;}
.abouthome .wrapper .content .linkbtn {float: right; margin-top: 70px; width: 150px; text-align: center; position: relative;}
.abouthome .wrapper .image {background:no-repeat center / cover;}

.projects{padding:150px 0 50px 0;}
.projects .wrapper {display:table; width: 100%; margin-bottom:150px;}
.projects .wrapper .content {padding:140px 40px; width: 40%;}
.projects .wrapper .content .line {position: absolute; left: 56%; width: 400px !important; height: 3px; background: #46bfe0; z-index: 2; margin-top: -14px;}
.projects .wrapper .content h1 {font-size:22px; margin-bottom:30px; width:70%; line-height:30px; position: relative; display: inline-block;}
.projects .wrapper .content h1::after {position: absolute; content: ""; right: 0; width:140%; height: 3px; background: #46bfe0; top:-40px;}
.projects .wrapper .content h3 {margin:20px 0 50px; text-transform: uppercase; font-size: 30px; font-weight: 400;}
.projects .wrapper .content span {height: 15px; width: 15px; background-color: #bbb; border-radius: 50%; display: inline-block; margin: 0 3px; cursor: pointer;}
.projects .wrapper .content .previous {background: url(/img/icons/arrow.png) no-repeat center / 18px 8px; width: 18px; height: 8px; margin-right: 5px; margin-top: 3.5px; transform: rotate(180deg); }
.projects .wrapper .content .next {background: url(/img/icons/arrow.png) no-repeat center / 18px 8px; width: 18px; height: 8px; margin-left: 5px; margin-top: 3.5px;}
.projects .wrapper .content .active {background-color: #46bfe0;}
.projects .wrapper .content p {text-align: justify;}
.projects .wrapper .content .linkbtn {float: left; margin-top:40px; width: 150px; text-align: center; position: relative;}
.projects .wrapper div {display: table-cell;}
.projects .wrapper .image {background:no-repeat center / cover; width: 60%;}
.projects .wrapper .image:nth-of-type(2) {background:no-repeat center / cover;}
.projects .wrapper .content.right h1 {float: right; text-align:right}
.projects .wrapper .content.right p {float: right;}
.projects .wrapper .content.right .linkbtn {float: right; margin-top:40px;}
.projects .wrapper .content.right h1::after {right: inherit; left: 0;}
.projects.page {padding:100px 0 50px;}

.footer .wrapper {display:table; width: 100%; padding:0 100px 100px; border-bottom:solid 4px #46bfe0;}
.footer .wrapper div {display: table-cell; width:32%; font-size:14px; line-height:32px; text-transform: uppercase; font-family:'Gotham Bold', sans-serif;}
.footer .wrapper div:nth-of-type(1){padding-right: 2%;}
.footer .wrapper div:nth-of-type(3){padding-left: 2%;}
.footer .wrapper div h4{margin-bottom:40px; font-size:23px; line-height:28px; letter-spacing: 2px;}
.footer .wrapper div a{font-family:'Gotham Bold', sans-serif;}
.footer .wrapper div a.active{color:#46bfe0;}
.footer .footerlogo {background: url(/img/logo.png) no-repeat right center / 200px 35px; width:200px; height:35px; display: inline-block;}

.bottom {padding: 30px 0 34px; text-transform: uppercase;}
.bottom p {display: inline-block; font-size:12px; font-family:'Gotham Bold', sans-serif;}
.bottom p:nth-of-type(1){float: left;}
.bottom p:nth-of-type(2){float: right;}
.bottom a {font-family:'Gotham Bold', sans-serif;}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
.navbar .logo {background-image:url(/img/logo@2x.png);}
.projects .wrapper .content span:last-of-type {background-image:url(/img/icons/arrow@2x.png);}
.carousel span:first-of-type{background-image:url(/img/icons/arrow@2x.png);}
.carousel span:last-of-type{background-image:url(/img/icons/arrow@2x.png);}
.serviceshome .arrows .image:nth-of-type(1){background-image:url(/img/icons/car-left@2x.png);}
.serviceshome .arrows .image:nth-of-type(2){background-image:url(/img/icons/car-right@2x.png);}
.footer .footerlogo {background-image:url(/img/logo@2x.png);}
}

/*responsive*/
@media screen and (max-width:1600px){
.container{width:85%;}
.projects .wrapper .content {padding: 100px 40px;}	
.serviceshome .arrows .image:nth-of-type(1) {left: -80px;}
.serviceshome .arrows .image:nth-of-type(2) {right: -80px;}
}
@media screen and (max-width:1300px){
.serviceshome .item{height:600px;}
.abouthome {padding: 150px 0 0;}
.abouthome .wrapper .content {padding: 70px 70px 70px 0px;}
.projects {padding: 100px 0 0;}
}
@media screen and (max-width:1200px){
}
@media screen and (max-width:1100px){
.navbar p{padding:12px 0 0 0;}
.abouthome {padding: 100px 0;}
.serviceshome .item .title h1 {font-size: 17px; line-height: 25px;}
.serviceshome .item .title {padding: 0 20px 40px 20px;}
.serviceshome .item {height: 550px;}
.serviceshome .arrows {height: 580px;}
.serviceshome .arrows .image {bottom: 0; top: inherit;}
.serviceshome .arrows .image:nth-of-type(1) {left: 38%;}
.serviceshome .arrows .image:nth-of-type(2) {right: 38%;}	
.projects {padding: 0 0 120px 0;}
.projects .wrapper{margin-bottom:80px;}
.projects .wrapper .content {padding: 100px 0 60px 40px;}	
.projects .wrapper .content.right {padding: 100px 40px 60px 0;}
.footer .wrapper{padding:0 40px 50px;}
.footer .footerlogo {background-size:143px 25px;}
}
@media screen and (max-width:950px){
.container{width:80%;}
.navbar nav ul li{padding:0 10px;}
.navbar nav ul li a{letter-spacing:1px;}
.header{margin:80px 0 30px;}
.navbar .logo{margin-bottom:30px;}
.projects.page {padding:30px 0 50px;}
.projects {padding: 0 0 50px 0;}
.projects .wrapper .content {padding: 80px 20px;}
.footer .wrapper div {width: 48%;}
.footer .wrapper div:nth-of-type(2) {float: right;}
.footer .footerlogo {display: none !important;}
}
@media screen and (max-width:750px){
.navbar nav {display:none;}
.navbar p{padding: 10px 0 0 0; width:100%; text-align:left;}
.navbar p a{margin:0 0 0 20px;}
.navbar p a:nth-of-type(2){display:none;}
.header{margin:70px 0 20px;}
.navbar .logo {margin-bottom: 0px;}
.serviceshome .container{width:100%; margin-bottom:20px;}
.serviceshome .item {height: 400px;}
.serviceshome .arrows {height: 430px;}
.serviceshome .arrows .image:nth-of-type(1) {left: 30%;}
.serviceshome .arrows .image:nth-of-type(2) {right: 30%;}
.abouthome {padding:0 0 40px;}
.abouthome .wrapper div {display: table; width: 100%;}
.abouthome .wrapper .image {height: 350px;}
.abouthome .wrapper .content {padding: 70px 0px;}
.projects .container {width: 100%;}
.projects .wrapper{float:left; display:block; width:100%; margin-bottom:20px;}
.projects .wrapper .image {float:left; display:block; width:100%; height:220px;}
.projects .wrapper .content {float:left; display:block; width:100%;}
.projects .wrapper .content {padding:60px 40px 40px;}
.projects .wrapper .content h1::after {width: 100%; top:-20px;}
.projects .wrapper .content h3{margin-bottom:0;}
}
@media screen and (max-width:650px){
.abouthome .wrapper .content {padding:80px 0 50px;}
.abouthome .wrapper .content .linkbtn {margin-top: 40px;}
.footer .wrapper {padding: 0 0 30px;}
.footer .wrapper div {width: 100%; display: block;}	
.footer .wrapper div:nth-of-type(1) {padding-right: 0; margin-bottom:30px;}
.footer .wrapper div h2 {margin-bottom: 10px;}
.footer .wrapper div h4{margin-bottom:20px;}
.footer{line-height:26px;}
.bottom {text-align: center;}
.bottom p{line-height:22px;}
.bottom p:nth-of-type(1){width:100%; text-align:center;}
.bottom p:nth-of-type(2){width:100%; text-align:center;}
}