*{margin: 0; padding: 0; outline: 0; border: 0}
img{max-width: 100%; width: 100%; height: auto}
html{height: 100%}
body{-webkit-text-size-adjust: 100%; height: 100%; font-family: 'DINPro-Light'}

h1{color:#676b74; font:24px/30px 'DINPro-Light'; margin-bottom: 20px}
h1 span{font-family: 'DINPro-Bold'}
h3{font: 22px/22px 'DINPro-Bold'}
h5{color:#a4a9b3; font:14px 'DINPro-Light'; margin: 0 0 20px}
h6{font:16px 'DINPro-Bold'; margin: 0 0 20px}
p{color: #676b74; font:16px/20px 'DINPro-Light'; margin-bottom: 20px}

strong, .fp-viewing-home .home-link a, .fp-viewing-about .about-link a, .fp-viewing-services .services-link a ,.fp-viewing-faqs .faqs-link a, .fp-viewing-contact-us .contact-us-link a{font-family: 'DINPro-Bold'; font-weight: normal}

.container{max-width: 1140px; margin: 0 auto; padding: 0 40px}

.fp-viewing-home .menu{background: rgba(255,255,255, 0); transition: 1s ease}
.menu {min-height: 90px; padding: 20px 0 0; position: fixed; width: 100%; z-index: 1; background: rgba(255,255,255, 1); transition: 1s ease}

.menu .logo{float: left; width: 100%; max-width: 320px}

.menu ul{list-style: none; float: right; margin: 10px 0 0}
.menu ul li{display: inline-block; text-align: center}
.menu ul li a{color: #2e2f33; line-height: 40px; padding:8px 12px; text-decoration: none; text-transform: uppercase}

.menu ul li:last-child a{border: 1px solid #2e2f33; border-radius: 3px; transition: .5s ease}
.menu ul li:last-child a:hover{border: 1px solid #2e2f33; background: #2e2f33; color: #fff; transition: .5s ease}

#section1{background: url(images/feature.jpg) center center no-repeat; background-size: cover}

#section2 .container {max-width: 650px; text-align: center; margin: 50px auto 0}
#section2 .container img{max-width: 80px; margin: 0 0 10px}
#section2 .container .btn{text-decoration: none; text-transform: uppercase; font-family: 'DINPro-Bold'; color:#2e2f33; border:1px solid #2e2f33; padding: 0 20px; margin:0 10px 20px 0; display: inline-block; height: 40px; line-height: 40px; border-radius: 3px; transition: .5s ease}
#section2 .container .btn:hover{border: 1px solid #2e2f33; background: #2e2f33; color: #fff; transition: .5s ease; text-decoration: none}

#section2 .container a{color:#1bb3e8; text-decoration: none; font-size: 14px}
#section2 .container a:hover{text-decoration: underline}

#section3{background: url(images/services.jpg) center center no-repeat; background-size: cover}

#section3 .container .content{float: left; width:100%; max-width: 450px; margin: 100px 0 0}
#section3 .container .content p, #section3 .container .content h1, #section3 .container .content ul{color: #fff}

#section3 .container .content ul{list-style: none}
#section3 .container .content ul li{background: url(images/tick.svg) top left no-repeat; margin: 0 0 0 30px; padding: 0 0 0 30px}

#section3 .container .content .btn{text-decoration: none; text-transform: uppercase; font-family: 'DINPro-Bold'; color:#fff; border:1px solid #fff; padding: 0 20px; margin:0 10px 20px 0; display: inline-block; height: 40px; line-height: 40px; border-radius: 3px; transition: .5s ease}
#section3 .container .content .btn:hover{border: 1px solid #fff; background: #fff; color: #BAAA9D; transition: .5s ease; text-decoration: none}

#section3 .container .content a{color:#fff; text-decoration: none; font-size: 14px}
#section3 .container .content a:hover{text-decoration: underline}

/*#section4 .fp-tableCell{vertical-align: top}*/
/*#section4 .container {margin: 120px auto 0}*/
#section4 .container {margin: 80px auto 0}
#section4 .quote{float: left; width: 40%; margin: 50px 0 0}
#section4 .faqs{float: right; width: 60%}

#section4 .quote .quote-holder {background: #1bb3e8; border-radius: 50%; height: 400px; width: 400px; color:#fff}
#section4 .quote .quote-holder p{color: #fff; font-size: 20px; line-height: 24px}
#section4 .quote .quote-holder blockquote {padding: 120px 60px 0}
#section4 .quote .quote-holder blockquote cite{font-style: normal; font-family: 'DINPro-Bold'}
#section4 .quote .quote-holder blockquote cite .title{font:12px 'DINPro-Light'}

#section4 .container p, #section4 .container h1, #section4 .container ul{color: #fff}

#section4 .container .accordion {border: 1px solid #fff; border-radius: 3px; margin: 0 0 5px}
#section4 .container .accordion h4{color: #fff; font:16px/20px 'DINPro-Light'; padding: 10px 30px 14px 10px; transition: .5s ease; background: #2E2F33 url(images/icon-expand.svg) right center no-repeat; background-size: 40px; cursor: pointer}

#section4 .container .accordion h4.ui-state-hover {background: #fff url(images/icon-expand-hover.svg) right center no-repeat; background-size: 40px; color:#2E2F33; transition: .5s ease}

#section4 .container .accordion h4.ui-state-active{background: #fff url(images/icon-close.svg) right center no-repeat; background-size: 40px; color:#2E2F33; transition: .5s ease}

#section4 .container .accordion p {color: #fff; margin: 0; padding: 0 10px 20px; font-size: 14px}

#section4 .container .accordion p.ui-accordion-content-active{background: #fff; color:#2e2f33}

#section4 .container a{color:#1BB3E8; text-decoration: none}
#section4 .container a:hover{text-decoration: underline}

#section5 .map-desktop{height: 100%; width: 100%}
#section5 .container{position: relative; z-index: 1; width:100%}
#section5 .footer .container{position: relative; width:auto}
#section5 .footer{background: #2E2F33; bottom: 0; min-height: 80px; position: absolute; width: 100%; z-index: 1}

#section5 .footer .left{float: left; max-width: 320px; padding: 20px 0 0}
#section5 .footer .left p{color: #ccc; font-size: 12px; line-height: 16px}
#section5 .footer .left a{color: #fff; font-size: 12px; line-height: 16px; text-decoration: none}
#section5 .footer .left a:hover{text-decoration: underline}

#section5 .footer .right{float: right}
#section5 .footer .right ul{list-style: none; margin: 15px 0 0}

#section5 .footer .right ul li{float: left; width:210px; margin: 0 5px 10px}
#section5 .footer .right ul li:first-child{width: 68px}
#section5 .footer .right ul li:nth-child(2){margin: 0 10px 10px;width: 125px}
#section5 .footer .right ul li:last-child{width: 160px}

#section5 .contact-wrapper{position: relative}
#section5 .contact {background: #fff; padding: 40px; position: absolute; right: 80px; top: 140px}

#section5 .contact a{color:#1BB3E8; text-decoration: none}
#section5 .contact a:hover{text-decoration: underline}

/* Font replacements */


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


@font-face {
  font-family: 'DINPro-Regular';
  src: url('fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype'),  url('fonts/DINPro-Regular.otf')  format('opentype'),
	     url('fonts/DINPro-Regular.woff') format('woff'), url('fonts/DINPro-Regular.ttf')  format('truetype'), url('fonts/DINPro-Regular.svg#DINPro-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}


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

/* Width based media queries */

@media(max-width:1100px){
    .menu ul li, #section4 .quote{display: none}
    .menu ul li:last-child{display: block}
    #section4 .faqs{width: 100%; float: none; max-width: 800px; margin: 0 auto}
}
@media(max-width:1023px){
#section5 .footer .right, #section5 .footer .left{float: none}
}
@media(max-width:801px) /* and (min-height:701px) */{
    #section1{background: url(images/feature-tablet.jpg) center center no-repeat; background-size: cover}
    .fp-viewing-home .menu{background: rgba(255, 255, 255, 1)}
}
@media(max-width:767px){
    .menu ul li:last-child{display: none}
    #section4 .container{margin: 50px auto}
    #section5 .container{padding: 0}
    #section5 .footer .container{padding: 0 40px}
    #section2 .container, #section3 .container .content{margin: 50px auto}
    #section5 .fp-tableCell{vertical-align: bottom}
    #section5 .map-desktop{height: 600px}
}
@media(max-width:700px){   
    #section5 .container .contact-wrapper .contact{position: relative; right: 0; top:0}
    #section5 .footer .right ul li:nth-child(3), #section5 .footer .right ul li:nth-child(4){clear: both}
}
    
@media(max-width:601px){
    #section2 .container .btn, #section3 .container .content .btn{margin: 0 auto 20px; max-width: 250px; display: block}
    #section2 .container .more,  #section3 .container .more{display: none} 
    #section3 .container .content, #section4 .faqs .intro{text-align: center}
    #section3 .container .content ul li{margin: 0; padding: 0; background: none}
    #section4 .faqs .intro{padding: 0 20px}
    #section4 .container{padding: 0 20px}
    #section5 .footer .container{padding: 0 20px}
}
@media(max-width:501px){
    #section3{background: none #1bb3e8 !important}
}
@media(max-width:340px){
    .menu{min-height: 70px}
}

/* Height based media queries */

@media(min-height:801px){
    #section5 .contact{top:250px}
}
@media(min-height:1099px){
    #section5 .contact{top:350px}
}