/* General */ * {margin: 0; padding: 0;} BODY {color: #125559; background: #fff; font-size: 100%; font-family: Open Sans, Arial, sans-serif; text-align: center;} H2 {color: #125559; background: url(../images/dot.gif) 0 42% repeat-x; font-size: 210%; text-transform: uppercase; text-align: center; margin: 0; padding: 20px 0 40px 0;} H2 SPAN {background: #fff; padding: 0 40px;} H3 {color: #125559; font-size: 120%; margin: 0; padding: 15px 0;} H4 {color: #57a5aa; font-size: 110%; margin: 0 0 10px 0;} H5 {color: #125559; font-size: 100%; margin: 0 0 10px 0;} UL {list-style-type: none;} INPUT[type="text"], TEXTAREA {width: 92%;} INPUT, SELECT, TEXTAREA {color: #125559; background: #ecf8f8; border: 1px #a3d8da solid; font-size: 100%; font-family: Open Sans, Arial, sans-serif; padding: 10px 15px; border-radius: 10px; -moz-border-radius: 10px;} .submit {color: #fff; background: #125559; font-weight: bold; border: 1px #125559 solid; cursor: pointer; text-transform: uppercase; text-decoration: none; transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; -webkit-transition: .3s; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .submit:hover {color: #125559; background: #f4eedb; border-color: #f4eedb;} P {line-height: 1.5em; margin: 0 0 20px 0;} IMG {border: 0; vertical-align: middle;} A, A:visited {color: #125559;} A:active, A:hover {color: #000;} /* Header */ #page {width: 100%; margin: 0 auto; text-align: left; position: relative;} #header {width: 100%; height: 129px; background: #fff; box-shadow: 0 0 30px #5d9fa3; position: fixed; left: 0; top: 0; z-index: 20;} #header H1 {width: 300px; height: 80px; overflow: hidden; position: absolute; left: 4.9%; top: 24px; z-index: 1; margin: 0; text-align: center; font-size: 140%;} #header H1 SPAN {width: 300px; height: 80px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 2; background: url(../images/logo.gif) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display: block; cursor: pointer;} #header H1 A {color: #fff; font-weight: bold; display: block;} #mobilelinks {font-size: 240%; position: absolute; right: 5%; top: 21px; display: none;} #langs {font-size: 80%; position: absolute; right: 5%; top: 50px;} #langs A {color: #76b9bd;} #langs A:hover {color: #125559;} #langs SPAN {background: #f4eedb; display: inline-block; padding: 4px 7px; border-radius: 15px; -moz-border-radius: 15px; margin: 0 3px;} #menu {position: absolute; right: 12%; top: 42px; z-index: 10;} #menu LI {float: left; margin-left: 30px; position: relative;} #menu A {color: #125559; display: block; padding: 10px 17px; border: 1px #a3d8da solid; border-radius: 10px; -moz-border-radius: 10px; text-decoration: none;} #menu A:hover {color: #125559; background: #f4eedb; border-color: #f4eedb;} #menu #home, #menu .active SPAN {color: #125559; background: #f4eedb; padding: 10px 17px; border: 1px #f4eedb solid; border-radius: 10px; -moz-border-radius: 10px; font-weight: bold; display: block;} #menu UL {width: 280px; height: auto; background: #fff; border: 1px #a3d8da solid; border-radius: 10px; -moz-border-radius: 10px; padding: 0 0 18px 0; position: absolute; left: 0; top: 40px; z-index: 20;} #menu UL LI {width: 280px; height: auto; text-align: left; margin: 0; padding: 20px 18px 0 20px;} #menu UL A, #menu UL A:visited {color: #125559 !important; font-weight: normal; border: 0; padding: 0; text-decoration: underline;} #menu UL A:hover {background: transparent; font-weight: bold; text-decoration: none;} #menu UL .active {background: transparent; font-weight: bold; border: 0; padding: 20px 18px 0 20px;} #menu UL, #menu LI:hover UL UL {display: none;} #menu LI:hover UL {display: block;} /* Carousel */ .carousel {width: 100%; height: 188px; margin: 129px auto 30px auto; clear: both;} .carousel #slides {position: relative;} .carousel #slide1 {background: url(../images/slide1.jpg) 10% 50% no-repeat #125559;} .carousel #slide2 {background: url(../images/slide2.jpg) 90% 50% no-repeat #125559;} .carousel #slide3 {background: url(../images/slide3.jpg) 10% 50% no-repeat #125559;} .carousel #slide4 {background: url(../images/slide4.jpg) 90% 50% no-repeat #125559;} .carousel #slide5 {background: url(../images/slide5.jpg) 10% 50% no-repeat #125559;} .carousel .slide {width: 100%; height: 188px; background: #125559; position: absolute; left: 0; top: 0; overflow: hidden; -webkit-background-size: contain !important; -moz-background-size: contain !important; -o-background-size: contain !important; background-size: contain !important;} .carousel #slide1 H2, .carousel #slide3 H2, .carousel #slide5 H2 {color: #125559; background: url(../images/slideh2.png) 0 50% no-repeat transparent; background-size: 150%; font-size: 200%; padding: 80px 5% 80px 9%; margin: 0; text-transform: uppercase; text-align: left; position: absolute; right: 0; top: 0; white-space: nowrap;} .carousel #slide2 H2, .carousel #slide4 H2 {color: #125559; background: url(../images/slideh2left.png) 100% 50% no-repeat transparent; background-size: 150%; font-size: 200%; padding: 80px 9% 80px 5%; margin: 0; text-transform: uppercase; text-align: left; position: absolute; left: 0; top: 0; white-space: nowrap;} .carousel .slide A {width: 100%; height: 100%; text-decoration: none; display: block;} #carousel_home, #carousel_home .slide {height: 350px !important;} #carousel_home #slide1 {background-position: 0 50%;} #carousel_home #slide2 {background-position: 100% 50%;} #carousel_home #slide3 {background-position: 0 50%;} #carousel_home #slide4 {background-position: 100% 50%;} #carousel_home #slide5 {background-position: 15% 50%;} #carousel_home H2 {top: 70px !important;} /* Content */ #container {padding: 0 5%;} #container UL {margin: 0 0 20px 10px;} #container LI {padding-left: 20px; line-height: 1.7em; position: relative;} #container UL LI:before {color: #a3d8da; font-family: FontAwesome; font-size: 70%; content: "\f04d"; position: absolute; left: 0; top: 1px;} #container TABLE {width: 100%; background: #fff; clear: both; margin-bottom: 20px;} #container TH, #container TD {font-weight: normal; border: 1px #a3d8da solid; padding: 8px 10px;} #container TD {font-weight: bold;} #container TR:hover {background: #d4eced;} /* Boxy */ #products LI {width: 23.2%; line-height: 1.2em; float: left; padding: 0; background: transparent; border: 1px #a3d8da solid; border-radius: 10px; -moz-border-radius: 10px; text-align: center; margin: 0 2% 2% 0; overflow: hidden;} #products LI:before {content: "" !important;} #products LI:hover {background: #125559; border-color: #125559; cursor: pointer;} #products LI:hover H3 A {color: #f4eedb;} #products LI:hover H3 SPAN {color: #fff;} #products H3 {height: 100px; font-size: 100%; text-transform: uppercase; margin: 0; padding: 0;} #products H3 A {text-decoration: none; display: block; padding: 30px 10px;} #products H3 SPAN {font-size: 90%; font-weight: normal; display: block; text-transform: none;} #products LI:nth-child(4n+0) {margin-right: 0;} #products .img {background: #fff; border-bottom: 1px #a3d8da solid; display: block; padding: 30px;} #products IMG {width: 100%;} #services LI {width: 31.61%; line-height: 1.2em; float: left; padding: 0; background: transparent; border: 1px #a3d8da solid; border-radius: 10px; -moz-border-radius: 10px; text-align: center; margin: 0 2% 2% 0; overflow: hidden;} #services LI:before {content: "" !important;} #services LI:hover {background: #125559; border-color: #125559; cursor: pointer;} #services LI:hover H3 A {color: #f4eedb;} #services LI:hover H3 SPAN {color: #fff;} #services H3 {height: 100px; font-size: 100%; text-transform: uppercase; margin: 0; padding: 0;} #services H3 A {text-decoration: none; display: block; padding: 30px 10px;} #services H3 SPAN {font-size: 90%; font-weight: normal; display: block; text-transform: none;} #services LI:nth-child(3n+0) {margin-right: 0;} #services .img {background: #fff; border-bottom: 1px #a3d8da solid; display: block; padding: 30px;} #services IMG {width: 100%;} .about {width: 30%; height: 480px; float: left; border-right: 1px #a3d8da solid; padding-right: 2.4%; margin-right: 2.4%;} .about IMG {width: 35%; float: right; margin: 0 0 20px 20px;} .lastabout {padding: 0; margin: 0; border: 0;} /* Footer */ #footer {clear: both; padding-top: 20px;} #footer #content {background: #f4eedb; height: 123px; padding: 0 5%;} #footer #content H2 {width: 45%; background: transparent; float: left; text-align: left; padding: 20px 0;} #footer #content H2 SPAN {background: transparent; font-size: 150%; padding: 0 0 0 25%; position: relative; top: 5px;} #footer #content UL {width: 55%; float: left; font-size: 120%; margin: 30px 0 0 0;} #footer #content LI {float: left;} #footer #content I {font-size: 140%; background: #fff; padding: 17px; margin-right: 40px; text-align: center; border-radius: 50%; -moz-border-radius: 50%;} #footer #content #mail {float: right;} #footer #copy {float: left; font-size: 85%; padding: 20px 0 0 5%;} #footer #author {float: right; font-size: 85%; padding: 20px 5% 0 0;} /* Optional */ .box1 {width: 48%; float: left; margin-right: 5%; clear: both;} .box2 {width: 47%; float: left;} .box1 IMG, .box2 IMG {width: 100%;} .anchor {display: block; position: relative; top: 350px; visibility: hidden;} .anchorhome {display: block; position: relative; top: -155px; visibility: hidden;} .number {color: #125559; background: #f4eedb; margin-right: 8px; padding: 8px 16px; text-align: center; border-radius: 10px; -moz-border-radius: 10px;} .warning {color: #125559; background: #f4eedb; width: 90%; font-weight: bold; padding: 10px 15px; border-radius: 10px; -moz-border-radius: 10px;} .right {width: 40% !important; float: right; margin: 0 0 20px 20px;} .small {width: 22% !important;} .pdf {width: auto !important;} .alt_row {background: #eaf8f8;} .cleaner {clear: both;} /* Responsive */ @media screen and (max-width: 1600px) { #menu {right: 12.5%;} .about {height: 500px;} .anchor {top: 370px;} #footer #content I {margin-right: 30px;} } @media screen and (max-width: 1500px) { #menu {right: 13%;} .about {height: 560px;} .anchor {top: 440px;} #footer #content I {margin-right: 20px;} } @media screen and (max-width: 1400px) { #menu {right: 13.5%;} #carousel_home, {height: 300px !important;} #carousel_home .slide {height: 300px !important;} #carousel_home H2 {top: 45px !important;} #footer #content I {margin-right: 10px;} } @media screen and (max-width: 1300px) { #menu {right: 14%;} #menu LI {margin-left: 25px;} .carousel .slide H2 {font-size: 170% !important; top: 5px !important;} #carousel_home #slide1 H2, #carousel_home #slide3 H2, #carousel_home #slide5 H2 {font-size: 170% !important; top: 60px !important; padding: 80px 5% 80px 9% !important;} #carousel_home #slide2 H2, #carousel_home #slide4 H2 {font-size: 170% !important; top: 60px !important; padding: 80px 9% 80px 5% !important;} #products H3, #services H3 {height: 120px;} .about {height: 580px;} .anchor {top: 460px;} #footer #content {font-size: 90%;} #footer #content H2 {width: 40%; padding: 25px 0;} #footer #content H2 SPAN {padding-left: 10%; top: 3px;} #footer #content UL {width: 60%;} #footer #content I {margin-right: 20px;} } @media screen and (max-width: 1200px) { #menu {right: 14.5%;} #menu LI {margin-left: 20px;} .carousel, .carousel .slide {height: 188px !important;} .carousel #slide1 {background-position: 0 50%;} .carousel #slide2 {background-position: 100% 50%;} .carousel #slide3 {background-position: 0 50%;} .carousel #slide4 {background-position: 100% 50%;} .carousel #slide5 {background-position: 0 50%;} .carousel #slide1 H2, .carousel #slide3 H2, .carousel #slide5 H2 {font-size: 150% !important; top: 25px !important; padding: 60px 5% 60px 9% !important;} .carousel #slide2 H2, .carousel #slide4 H2 {font-size: 150% !important; top: 25px !important; padding: 60px 9% 60px 5% !important;} #carousel_home {height: 300px !important;} #carousel_home .slide {height: 300px !important;} #products H3, #services H3 {height: 140px;} #footer #content I {margin-right: 15px;} .about {height: 670px;} .anchor {top: 540px;} } @media screen and (max-width: 1100px) { H2 {font-size: 160%; background-position: 0 40%;} H2 SPAN {padding: 0 30px;} #header {height: 110px;} #header H1 {width: 230px; height: 61px; top: 22px;} #header H1 SPAN {width: 230px; height: 61px;} #menu {font-size: 90%; right: 16%; top: 33px;} #menu LI {margin-left: 10px;} #menu A, #menu .active SPAN {padding: 10px;} #langs {top: 40px;} .carousel {margin-top: 110px;} .about {width: 100%; height: auto; border: 0; border-bottom: 1px #a3d8da solid; padding: 0 0 30px 0; margin: 0 0 30px 0;} .about IMG {width: 20%;} .lastabout {padding: 0; border: 0;} .anchor {top: 820px;} #products LI {width: 48.4%;} #products LI:nth-child(2n+0) {margin-right: 0;} #products H3, #services H3 {height: 100px;} #footer #content {font-size: 80%; height: 80px;} #footer #content H2 {width: 36%; padding: 15px 0;} #footer #content H2 SPAN {top: 2px;} #footer #content UL {width: 64%; margin-top: 18px;} #footer #content I {font-size: 120%; padding: 13px; margin-right: 10px;} } @media screen and (max-width: 850px) { #header {height: 100px;} #header H1 {width: 200px; height: 53px; top: 23px;} #header H1 SPAN {width: 200px; height: 53px;} #menu {font-size: 90%; right: 17%; top: 30px;} #menu A, #menu .active SPAN {padding: 10px 5px;} #langs {top: 36px;} .carousel {margin-top: 100px;} .box1, .box2 {width: 100%; float: none;} .anchor {top: 880px;} #footer #content H2 {width: 33%; font-size: 140%;} #footer #content H2 SPAN {padding-left: 5%;} #footer #content UL {width: 67%; margin-top: 22px;} #footer #content I {font-size: 100%; padding: 10px; margin-right: 5px;} #footer #copy, #footer #author {font-size: 80%;} } @media screen and (max-width: 768px) { #header {height: 288px; position: static;} #container {padding-top: 20px;} #mobilelinks {display: block;} #menu {font-size: 100%; background: #fff; left: 0; right: 0; top: 100px; padding: 15px 0 25px 0; box-shadow: 0 30px 30px -25px #5d9fa3; display: none;} #menu LI {float: none; margin: 10px 5% 0 5%;} #menu A, #menu .active SPAN {padding: 10px 20px;} #menu UL {width: auto; height: auto; background: #e5f4f5; position: static; margin: -1px 0 0 0; display: block;} #menu UL A {padding: 0 !important;} #menu UL A:hover {font-weight: bold;} #langs {right: 25%;} .anchor {top: 980px;} .carousel {position: absolute; left: 0; top: 100px; margin: 0;} .carousel #slide1 H2, .carousel #slide3 H2, .carousel #slide5 H2 {font-size: 100% !important; top: 35px !important; padding: 60px 5% 60px 11% !important;} .carousel #slide2 H2, .carousel #slide4 H2 {font-size: 100% !important; top: 35px !important; padding: 60px 11% 60px 5% !important;} #carousel_home {height: 188px !important; position: absolute; left: 0; top: 100px; margin: 0;} #carousel_home .slide {height: 188px !important;} #carousel_home #slide1 H2, #carousel_home #slide3 H2, #carousel_home #slide5 H2 {font-size: 100% !important; top: 35px !important; padding: 60px 5% 60px 11% !important;} #carousel_home #slide2 H2, #carousel_home #slide4 H2 {font-size: 100% !important; top: 35px !important; padding: 60px 11% 60px 5% !important;} #products H3, #services H3 {height: 120px;} #footer #content {height: auto; font-size: 90%;} #footer #content H2 {width: 100%; float: none; padding: 20px 0 0 0;} #footer #content H2 SPAN {display: none;} #footer #content UL {width: 100%; float: none;} #footer #content LI {float: none !important; padding-bottom: 20px;} #footer #copy {padding: 15px 0 0 15px; float: none;} #footer #author {padding: 0 0 15px 15px; float: none;} } @media screen and (max-width: 600px) and (orientation: portrait) { #products LI, #services LI {width: 100%; height: auto; float: none; margin: 0 0 20px 0;} #products H3, #services H3 {height: auto;} .anchor {top: 1200px;} } @media screen and (max-width: 450px) and (orientation: portrait) { H2 {font-size: 120%; background-position: 0 39%;} H2 SPAN {padding: 0 20px;} #header {height: 250px;} #container {font-size: 90%;} #mobilelinks {top: 40px;} #langs {right: 5%; top: 12px;} .about IMG {width: 30%; margin: 0 0 10px 10px;} .anchor {top: 1300px;} .carousel, .carousel .slide {height: 150px !important;} .carousel #slide1 H2, .carousel #slide3 H2, .carousel #slide5 H2 {font-size: 80% !important; top: 20px !important; padding: 50px 5% 50px 10% !important;} .carousel #slide2 H2, .carousel #slide4 H2 {font-size: 80% !important; top: 20px !important; padding: 50px 10% 50px 5% !important;} #carousel_home, #carousel_home .slide {height: 150px !important;} #carousel_home #slide1 H2, #carousel_home #slide3 H2, #carousel_home #slide5 H2 {font-size: 80% !important; top: 20px !important; padding: 50px 5% 50px 10% !important;} #carousel_home #slide2 H2, #carousel_home #slide4 H2 {font-size: 80% !important; top: 20px !important; padding: 50px 10% 50px 5% !important;} #footer #copy, #footer #author {font-size: 70%;} .right {width: 100% !important; float: none; margin: 0 0 20px 0;} } @media screen and (max-width: 360px) and (orientation: portrait) { #header {height: 230px;} .carousel, .carousel .slide, #carousel_home, #carousel_home .slide {height: 130px !important;} }