@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400,600,700,800&subset=latin,latin-ext);

html, body{height: 100%; margin: 0; padding: 0;}
body{margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; position: relative;}

*{box-sizing: border-box;}
a{color: #000000; text-decoration: none;}
strong{font-weight: 600}

.cleaner{clear: both}
.responsive-cleaner{}
.center{text-align: center;}

#wrapper{position: relative; min-height: 100%; margin: 0 auto; background: #ffffff; padding: 60px 0 0 0;}

header{height: 60px; line-height: 60px; box-shadow: 0px 0px 10px #aaaaaa; text-align: center; position: fixed; width: 100%; top: 0; z-index: 200; background: rgba(255, 255, 255, 0.95); transition: 200ms all ease;}
header .menu{margin: 0; padding: 0; list-style: none; display: block; position: absolute; top: 0; bottom: 60px; line-height: 60px; z-index: 100; transition: 200ms all ease;}
header .menu.left{right: calc(50% + 141px)}
header .menu.right{left: calc(50% + 141px)}
header .menu li{float: left; padding: 0 30px; margin: 0}
header .menu li a{color: #2c3e50; font-size: 18px; text-transform: uppercase}
header .menu li a.active{font-weight: 300; border-bottom: 1px solid #2c3e50;}
header .logo{display: inline-block; margin: 0; padding: 10px 30px;}
header .logo img{height: 40px; display: block; transition: 200ms all ease;}

header.small{height: 100px; line-height: 100px; }
header.small .menu{line-height: 100px;}
header.small .logo{padding: 10px 30px;}
header.small .logo img{width: auto; height: 40px;}

#responsive-menu-switcher{display: none;}
.menu.responsive{display: none;}

section#slider{margin: 0}
section#slider .slide{background: url('../img/slide2.jpg') no-repeat top center; background-size: cover; height: calc(100vh - 60px); width: 100%; position: relative;}
section#slider .slide .claim{background: rgba(0, 175, 236, 0.78); color: #ffffff; font-size: 28px; letter-spacing: 0; padding: 20px 50px; position: absolute; z-index: 100; left: 66%; top: 45%; max-width: 34%; text-transform: uppercase}
section#slider .slide .claim p{margin: 0; padding: 6px 0; }

section#who-we-are{text-align: center; padding: 190px 0 170px 0; position: relative;}
section#who-we-are .top-graphics{position: absolute; top: -14px; left: calc(50% - 41px); z-index: 100; height: 181px; width: 82px; background: url('../img/who-weare-top-graphics.png') no-repeat top center;}
section#who-we-are .bottom-graphics{position: absolute; bottom: -50px; left: calc(50% - 50px); z-index: 100; height: 193px; width: 100px; background: url('../img/who-weare-bottom-graphics.png') no-repeat top center;}
section#who-we-are .container{}
section#who-we-are h2{font-weight: 300; font-size: 28px; color: #2c3e50; text-transform: uppercase; margin: 0; padding: 0 0 20px 0; letter-spacing: 1px; }
section#who-we-are .photos{text-align: center}
section#who-we-are .photos .photo{width: 220px; height: 220px; display: inline-block; margin: 45px 45px; padding: 10px 10px; border-radius: 220px; background: #ecf0f1;}
section#who-we-are .photos .photo img{width: 200px; height: 200px; border-radius: 220px; padding: 0; display: block; margin: 0;}
section#who-we-are .text{max-width: 1170px; margin: 0 auto; }
section#who-we-are .text h3{font-weight: 600; color: #2c3e50; font-size: 20px; text-align: center; margin: 0; padding: 0; letter-spacing: 1px;}
section#who-we-are .text .left{float: left; padding: 0 0 0 160px; width: 80%;}
section#who-we-are .text .left p{color: #043d5d; font-size: 14px; line-height: 28px; text-align: justify; letter-spacing: 1px;}
section#who-we-are .text .right{float: left; padding: 0 0 0 40px; width: 20%;}
section#who-we-are .text .right img{width: 100%; position: relative; top: -40px; opacity: 0;}

section#advances{background: #043d5d; width: 100%; padding: 60px 0 100px 0;}
section#advances .container{max-width: 1200px; margin: 0 auto;}
section#advances h2{font-size: 28px; font-weight: 600; color: #ffffff; text-align: center; text-transform: uppercase; letter-spacing: 1px; margin: 0; padding: 25px 0 50px 0;}
section#advances .columns{}
section#advances .columns .column{float: left; width: 33.33333%; padding: 0; margin: 0;}
section#advances .columns .column h3{font-size: 22px; font-weight: 600; color: #ffffff; text-align: left; text-transform: uppercase; margin: 0; padding: 15px 0 25px 0; letter-spacing: 1px;}
section#advances .columns .column ul{margin: 0; padding: 0; list-style: none;}
section#advances .columns .column li{margin: 0; padding: 10px 0; color: #ffffff; font-size: 17px; line-height: 25px; letter-spacing: 1px;}
section#advances .columns .column li a{color: #ffffff; font-weight: bolder}
section#advances .columns .column.first{width:37%; padding: 0 50px 0 100px;}
section#advances .columns .column.second{width:37%; padding: 0 60px 0 0px;}
section#advances .columns .column.third{width:26%}

section#ask{position: relative; padding: 150px 0 100px 0;}
section#ask .top-graphics{position: absolute; top: -47px; left: calc(50% - 51px); z-index: 100; height: 80px; width: 102px; background: url('../img/ask-top-graphics.png') no-repeat top center;}
section#ask .container{max-width: 1200px; margin: 0 auto;}
section#ask .screen{float: left; width: 50%; padding: 0 40px 110px; text-align: right;}
section#ask .screen img{width: 100%; box-shadow: 5px 5px 10px #eeeeee; max-width: 400px;}
section#ask .text{float: left; width: 50%; padding: 0 30px 0 20px;}
section#ask h2{font-size: 26px; line-height: 36px; font-weight: 600; color: #2c3e50; text-align: left; text-transform: uppercase; margin: 0; padding: 0 0 15px 0; letter-spacing: 1px;}
section#ask p{margin: 0; padding: 0 0 20px 0; color: #043d5d; font-size: 14px; line-height: 25px; letter-spacing: 1px;}
section#ask ul{ margin: 0; padding: 0px 0 20px 40px;  color: #043d5d; font-size: 14px; line-height: 25px; letter-spacing: 1px;}


section#form{background: #f0f4da; padding: 100px 0 25px 0;}
section#form .container{max-width: 970px; margin: 0 auto}
section#form h2{font-size: 26px; line-height: 36px; font-weight: 600; color: #2c3e50; text-align: center; text-transform: uppercase; margin: 0; padding: 0 0 25px 0; letter-spacing: 1px;}
section#form p{margin: 0; padding: 0 0 30px 0; color: #043d5d; font-size: 14px; line-height: 25px; letter-spacing: 1px; text-align: center; margin: 0 15%;}
section#form .form label{display: block; width: 50%; float: left; color: #2c3e50; font-size: 14px; text-transform: uppercase}
section#form .form label.big{width: 100%;}
section#form .form label input{width: 100%; display: block; margin: 5px 0 0 0; padding: 0 15px; border-radius: 6px; border: 1px solid #d6dde2; background: #ffffff; height: 50px; line-height: 50px; color: #2c3e50; font-size: 14px; text-transform: none;}
section#form .form label textarea{width: 100%; display: block; margin: 5px 0 0 0; padding:10px 15px; height: 160px; border-radius: 6px; border: 1px solid #d6dde2; background: #ffffff; line-height: 22px; color: #2c3e50; font-size: 14px; text-transform: none; font-family: 'Open Sans', sans-serif; font-weight: 300; resize: none }
section#form .form label:nth-child(2n){padding: 8px 0 8px 15px}
section#form .form label:nth-child(2n-1){padding: 8px 15px 8px 0px}
section#form .form label.big{padding: 8px 0;}
section#form .form a{display: block; max-width: 230px; width: 100%; margin: 25px auto; border-radius: 6px; border: 2px solid #2c3e50; color: #043d5d; font-size: 14px; text-transform: uppercase; background: #ffffff; text-align: center; height: 39px; line-height: 37px; letter-spacing: 1px; font-weight: 600;}
section#form .form img{display: block; width: 100; max-width: 200px; margin: 30px auto 0 auto; }
section#form #send{color: #3c763d; background: #DFF0D8; width: 100%; padding: 15px 15px; border: 1px solid #D6E9C6; border-radius: 6px; display: none; margin: 0 0 25px 0;}

footer{height: 80px; line-height: 80px; background: #333333; text-align: center;}
footer p{color: #ffffff; font-size: 14px; margin: 0; padding: 0;}

/* Responsive design */
@media (max-width: 1600px){
    header .menu li{padding: 0 12px;}
    header .menu li a{font-size: 17px;}
}
@media (max-width: 1366px){
    header .menu{display: block; position: static; top: auto; bottom: auto; display: inline-block}
    section#slider .slide .claim{font-size: 26px;}

}

/* Responsive design */
@media (max-width: 1280px){
    header .menu li a{}

    section#slider .slide .claim{font-size: 22px;}
}

@media (max-width: 1152px){
    header .menu.left{position: static; left: auto; right: auto;}
    header .menu.right{position: static; left: auto; right: auto;}
    header .menu li{padding: 0 10px;}
    header .menu li a{font-size: 15px;}

    section#slider .slide .claim{font-size: 20px; }

    section#who-we-are{padding: 140px 0 120px 0; }
    section#who-we-are .top-graphics{height: 131px;}
    section#who-we-are .bottom-graphics{height: 143px; background: url('../img/who-weare-bottom-graphics.png') no-repeat bottom center;}
    section#who-we-are .photos .photo{width: 180px; height: 180px; margin: 25px 45px; padding: 10px 10px;}
    section#who-we-are .photos .photo img{width: 160px; height: 160px; padding: 0;}
    section#who-we-are h2{padding: 0;}
    section#who-we-are .text{width: 100%; padding: 0 40px;}
    section#who-we-are .text .left{padding: 0; width: 100%;}
    section#who-we-are .text .right img{top: -10px;}

    section#advances h2{padding: 25px 0 35px 0;}
    section#advances .columns .column{width: 33.33333%; padding: 0; margin: 0;}
    section#advances .columns .column h3{padding: 15px 0 20px 0; font-size: 18px;}
    section#advances .columns .column li{padding: 8px 0; font-size: 16px; line-height: 23px;}
    section#advances .columns .column.first{width:33.333%; padding: 0 25px 0 40px;}
    section#advances .columns .column.second{width:33.333%; padding: 0 25px;}
    section#advances .columns .column.third{width:33.333%; padding: 0 40px 0 25px;}

    section#ask{ padding: 100px 0 50px 0;}
    section#ask .screen{width: 50%; padding: 0 45px 0 60px;}
    section#ask .text{ padding: 0 40px 0 20px;}
    section#ask h2{font-size: 24px; line-height: 34px; padding: 0 0 15px 0; }
    section#ask p{padding: 0 0 30px 0;  line-height: 23px;}

    section#form{padding: 50px 40px 25px 40px;}

}

@media (max-width: 1024px){ /* iPads landscape */
}

@media (max-width: 1023px){
    header .logo{padding: 10px 15px}
    header .menu li{padding: 0 5px; }
    header .menu li a{font-size: 13px; padding: 0;}

    section#who-we-are .photos .photo{width: 180px; height: 180px; margin: 25px 25px; padding: 10px 10px;}
    section#who-we-are .photos .photo img{width: 160px; height: 160px; padding: 0;}
    section#who-we-are .text .left{width: 100%; margin: 0 auto;}
    section#who-we-are .text .right{width: 30%;}
    section#who-we-are .text .right img{top: 0px; padding: 14px 0 0 0;}

    section#advances .columns{text-align: center;}
    section#advances .columns .column h3{font-size: 16px; text-align: center;}
    section#advances .columns .column.first{padding: 0 20px 0 40px;}
    section#advances .columns .column.second{padding: 0 20px;}
    section#advances .columns .column.third{padding: 0 40px 0 20px;}

    section#ask .screen{padding: 0 20px 0 40px;}
    section#ask .text{ padding: 0 40px 0 10px;}
    section#ask h2{font-size: 18px; line-height: 28px; padding: 0 0 10px 0; }
}

@media (max-width: 768px){ /* iPads portrait */
}

@media (max-width: 767px){
    section#slider .slide{height: calc(100vh - 80px); background: url('/img/slide2.jpg') 43% center no-repeat; background-size: cover;}
    .responsive-cleaner{clear: both; display: block;}

    #wrapper{padding: 80px 0 0 0;}
    .menu.responsive{display: none;}

    header, header.small{height: 80px; line-height: 80px;}
    header .menu{display: none}
    header.small .menu{display: none}
    header .logo, header.small .logo{display: inline-block; margin: 0; padding: 15px 0 0 10px}
    header .logo img, header.small .logo img{width: auto; height: 50px; display: block;}

    #responsive-menu-switcher{display: block; float: right; color: #2C3E50; font-size: 40px; padding: 0 20px;}
    #responsive-menu{position: absolute; z-index: 300; top: 80px; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 1); margin: 0; padding: 35px 30px; list-style: none;}
    #responsive-menu li{display: block; float: none; width: 100%; padding: 15px 0; text-align: center;}
    #responsive-menu li a{color: #2C3E50; padding: 0; margin: 0; text-transform: uppercase; font-size: 20px;}

    section#slider .slide .claim{font-size: 20px; padding: 20px 25px; right: 30px; left: 30px; max-width: 100%; text-align: center}
    section#slider .slide .claim p{white-space: normal; font-size: 20px; line-height: 32px;}

    section#who-we-are .photos .photo{width: 70px; height: 70px; margin: 15px 15px; padding: 5px 5px;}
    section#who-we-are .photos .photo img{width: 60px; height: 60px; padding: 0;}
    section#who-we-are .text{padding: 0 30px;}
    section#who-we-are .text .left p{line-height: 23px;}
    section#who-we-are .text .left{width: 100%}
    section#who-we-are .text .right{width: 100%; text-align: center; padding: 0;}
    section#who-we-are .text .right img{width: 80%; top: 0; max-width: 110px; padding: 0;}

    section#advances h2{padding: 25px 0 20px 0;}
    section#advances .columns .column h3{font-size: 20px; }
    section#advances .columns .column.first{width:100%; padding: 0 30px 0 30px;}
    section#advances .columns .column.second{width:100%; padding: 0 30px 0 30px;;}
    section#advances .columns .column.third{width:100%; padding: 0 30px 0 30px;}

    section#ask{ padding: 50px 0 50px 0;}
    section#ask .screen{padding: 15px 30px 30px 30px; width: 100%; text-align: center;}
    section#ask .text{ padding: 0 30px; width: 100%;}
    section#ask .text h2{text-align: center}
    section#ask .text p{text-align: justify}

    section#form{padding: 45px 30px 20px;}
    section#form h2{font-size: 24px; line-height: 32px; padding: 0 0 35px 0; }
    section#form .form label{width: 100%;}
    section#form .form label:nth-child(2n){padding: 8px 0}
    section#form .form label:nth-child(2n-1){padding: 8px 0}
    section#form .form a{width: 100%; max-width: 100%;}
    section#form .form img{width: 100; max-width: 150px;}

    footer{height:auto; line-height: 24px; padding: 25px 30px}

}

@media (max-width: 480px){ /* iPhones landscape */
    section#form p{margin: 0 5%;}
}

@media (max-width: 479px){
}

@media (max-width: 320px){ /* iPhones portrait */
}