/* default */
*{margin:0;padding:0;border:0}
body{background-color:#9ba7ad;font-family:'Plus Jakarta Sans', sans-serif;font-weight:400;font-size:15px;color:#223149}
a{outline:none;text-decoration:none;color:#223149}


/* container */
div#container{margin:0 auto;width:100%;background-color:#fff}
div#container:before{content:'';position:absolute;left:0;width:calc(50% + 200px);height:500px;background-color:#eeeeee}


/* header */
div#header{position:relative;height:200px}
div#header a.logo{position:absolute;top:50px;right:75px;z-index:50;width:250px}
div#header a.logo img{display:block;width:100%}

div#header .main{display:none}

div#header ul.menu{position:absolute;top:0;right:500px;z-index:200;border-right:1px solid #ccc;list-style:none}
div#header ul.menu li{position:relative;display:inline-block;}
div#header ul.menu li a{position:relative;display:block;padding:80px 30px 0 30px;height:20px;line-height:20px;border-left:1px solid #ccc;color:#000;font-size:14px;font-weight:700;transition:all 0.5s ease}
div#header ul.menu li a:before{content:'';position:absolute;top:0;left:30px;width:0;height:5px;background-color:#0095da;transition:all 0.5s ease}
div#header ul.menu li a:hover,
div#header ul.menu li a.active{color:#0095da}
div#header ul.menu li a:hover:before,
div#header ul.menu li a.active:before{width:calc(100% - 60px)}


/* content */
div#content{position:relative}

div#content{margin-bottom:100px;position:relative}
div#content .slide{position:relative}
div#content .slide .image{position:relative}
div#content .slide .image:after{content:'';position:absolute;bottom:-20px;left:0;width:400px;height:20px;background-color:#0095da}
div#content .slide .image img{display:block;width:100%}
div#content .slide .description{position:absolute;left:300px;bottom:100px;max-width:600px}
div#content .slide .description .header{margin-bottom:20px}

div#content .about{margin-top:100px}
div#content .about .inner{max-width:900px}
div#content .about .description{float:left;width:400px}
div#content .about .description cite{display:block;margin-bottom:20px;font-family:'Noto Serif Display', sans-serif;font-size:1.5em;text-align:center}
div#content .about .description p{margin-top:20px}
div#content .about .image{float:left;margin-left:100px;margin-top:-200px;width:400px}
div#content .about .image img{}

div#content .offer .item{overflow:hidden;margin-top:100px}
div#content .offer .item .image{float:left;width:50%}
div#content .offer .item .image img{display:block;width:100%}
div#content .offer .item .description{position:relative;float:left;margin:20px;padding:50px;width:calc(50% - 160px);height:260px;background-color:#f5f5f5}
div#content .offer .item .description h2{margin-bottom:20px;font-size:40px}
div#content .offer .item .description ul{margin-top:20px;margin-left:20px}
div#content .offer .item .description .button{position:absolute;bottom:-20px}

div#content .text{margin:0 auto;margin-top:100px;max-width:800px;line-height:25px}
div#content .text h1{margin-bottom:50px;text-align:center}
div#content .text h1 span{color:#666}
div#content .text h2{color:#000}
div#content .text p{margin-bottom:20px}
div#content .text ul{margin-left:20px;margin-bottom:20px;}
div#content .text ul li{margin-bottom:10px}
div#content .text .contact{margin:0 auto;margin-bottom:50px;max-width:500px;padding:30px 0;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
div#content .text .contact b{display:block;color:#999}
div#content .text .contact a{display:block;margin-bottom:30px;font-size:30px}


/* contact */
div#contact{padding:100px 0;background-color:#223149}
div#contact .field{float:left;width:calc(33.333333% - 40px)}
div#contact .field +.field{margin-left:60px}
div#contact .field.text{margin-left:0;margin-top:50px;margin-bottom:50px;width:100%}
div#contact label.error{display:block;padding:0 10px;width:calc(100% - 20px);height:30px;line-height:30px;background-color:#0095da;color:#fff;font-size:12px}
div#contact input[type=text],
div#contact textarea{display:block;padding:5px 0;width:100%;height:30px;line-height:30px;border-bottom:1px solid rgba(255,255,255,.5);background-color:transparent;color:#fff;font-family:'Plus Jakarta Sans';font-size:14px}
div#contact textarea{height:150px}
div#contact input[type=submit]{margin:0 auto;width:200px;cursor:pointer;font-size:14px;background-color:#0095da;font-family:'Plus Jakarta Sans';}


/* footer */
div#footer{position:relative;padding:100px 0;background-color:#9ba7ad;color:#fff}
div#footer .inner{}

div#footer a.logo{display:block;margin:0 auto;width:250px}
div#footer a.logo img{display:block;width:100%}

div#footer .contact{overflow:hidden;padding:100px 0}
div#footer .contact .col{float:left;width:calc(33.333333% - 60px);color:#fff}
div#footer .contact .col +.col{margin-left:90px}
div#footer .contact .col .header{overflow:hidden;position:relative;color:rgba(255,255,255,.5);font-size:12px;font-weight:700;letter-spacing:5px;text-transform:uppercase}
div#footer .contact .col .header:after{content:'';position:absolute;top:30px;margin-left:20px;background-color:rgba(255,255,255,.3);width:100%;height:1px}
div#footer .contact .col .big{display:block;margin-bottom:10px;font-size:35px;font-weight:700}
div#footer .contact .col a{color:#fff}

div#footer .copyright{border-top:1px solid rgba(255,255,255,.2);padding:75px 0}

/* other */
.break{float:none;clear:left}
.break.mb50{margin-bottom:50px}
.break.mb100{margin-bottom:100px}
.header{font-size:50px;font-weight:300;color:#000;line-height:50px;letter-spacing:-1px}
.header b{display:block;font-weight:700}
.header span{display:block;font-weight:400;font-size:.4em}
.inner{position:relative;margin:0 auto;max-width:1200px}
.center{text-align:center !important}
.button{display:block;width:200px;height:40px;line-height:40px;background-color:#0095da;color:#fff;font-size:14px;text-align:center}
.button:hover{background-color:#000}
.more{display:inline-block;height:50px;line-height:50px;font-size:13px;letter-spacing:2px;color:#e11e23;font-weight:700;text-transform:uppercase}


/* max-width: 1000px */
@media screen and (max-width: 1000px) {
div#container:before{left:calc(100% - 100px);width:100px;height:150px}

div#header{height:150px}
div#header a.logo{top:25px;right:calc(50% - 50px);width:200px}

div#header .main{display:block;position:absolute;z-index:200;top:63px;right:40px}
div#header .main span{display:block;width:25px;height:2px;background-color:#000}
div#header .main span:nth-child(2){margin-left:10px;width:15px}
div#header .main span:nth-child(3){margin-left:5px;width:20px}
div#header .main span +span{margin-top:4px}
div#header .main:hover span{background-color:#000}

div#header ul.menu{display:none;right:0;top:150px;width:100%;height:auto;background-color:#eee}
div#header ul.menu li{display:block;text-align:left}
div#header ul.menu li a{display:block;padding:0 30px;height:50px;line-height:50px}

div#content .slide .image:after{width:70%}
div#content .slide .description{position:relative;left:0;bottom:0;padding:30px;width:calc(100% - 60px)}
div#content .slide .description .header{font-size:35px;line-height:30px}
}


/* max-width: 600px */
@media screen and (max-width: 600px) {
div#content .about{margin-top:50px}
div#content .about .description{float:none;padding:30px;width:calc(100% - 60px)}
div#content .about .image{display:none}

div#content .offer .item{overflow:hidden;margin-top:50px}
div#content .offer .item .image{float:none;width:100%}
div#content .offer .item .description{float:none;padding:30px;width:calc(100% - 100px);height:auto}
div#content .offer .item .description h2{font-size:30px}

div#content .text{margin:0 auto;margin-top:100px;max-width:800px;line-height:25px}
div#content .text h1{margin-bottom:50px;text-align:center}
div#content .text h1 span{color:#666}
div#content .text h2{color:#000}
div#content .text p{margin-bottom:20px}
div#content .text ul{margin-left:20px;margin-bottom:20px;}
div#content .text ul li{margin-bottom:10px}

div#contact{padding:20px}
div#contact .field{float:none;width:100%}
div#contact .field +.field{margin-left:0}

div#footer .contact{padding:50px 30px}
div#footer .contact .col{float:none;width:100%}
div#footer .contact .col +.col{margin-left:0;margin-top:50px}
div#footer .contact .col .big{font-size:25px}
}