/*
Blue: #0f8dcb

width breakpoints:
1280 - android tablet landscape, desktop
1024 - ipad landscape, desktop
992 - desktop

960 - next 7, switch menu type

800 - android tablet portrait
768 - ipad portrait
736 - iphone 6 plus landscape
667 - iphone 6 landscape
640 - android phone - landscape
568 - iphone 5/5s landscape
414 - iphone 6 plus portrait
375 - iphone 6 portrait
360 - android phone - portrait
320 - iphone 5/52 portrait
*/
body {
    font: normal normal 16px "Lato",arial,helvetica,clean,sans-serif;
}

@media screen and (max-width: 1280px) {
    body {
        font-size: 15px;
    }
}

@media screen and (max-width: 1024px) {
    body {
        font-size: 13px;
    }
}

header {
    background-color: #444;
    color: #fff;
    height: 2.5em;
    line-height: 2.5em;
}

header ul {
    float: right;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

header ul li {
    display: inline-block;
    margin-right: 3em;
}

header ul li:last-child {
    margin-right: 5em;
}

header ul li.focus {
    background-color: #888;
    padding: 0 1.5em;
    -ms-transform: skewX(-15deg);
    -webkit-transform: skewX(-15deg);
    transform: skewX(-15deg);
}

header ul li.focus div {
    text-decoration: underline;
    -ms-transform: skewX(15deg);
    -webkit-transform: skewX(15deg);
    transform: skewX(15deg);
}

header ul li.focus a {
    color: #fff;
}

header ul li.focus a:visited {
    color: #fff;
}

nav {
    height: 6em;
    line-height: 6em;
    width: 100%;
}

nav img {
    height: 3.5em;
    margin-left: 5em;
    margin-top: 1.25em;
}

nav #topmenu-small-icon img {
    height: 1.125em;
    margin: 1.25em 0 0 1em;
}

nav ul {
    float: right;
    list-style-type: none;
    margin: 0 4em 0 0;
    padding: 0;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    display: inline-block;
    color: #444;
    font-family: "Roboto";
    font-size: 0.938em;
    font-weight: bold;
    padding: 0 2em 0 2em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
}

nav ul li a.selected,
nav ul li a:hover {
    border-bottom: 3px solid #0f8dcb;
}

nav ul li a.selected,
nav ul li a:hover {
    color: #0f8dcb;
}

footer {
    background-color: #444;
    color: #d0d0d0;
    padding: 3em 5em;
}

footer div:last-child {
    clear: both;
}

footer h3 {
    color: #e0e0e0;
    font-weight: normal;
    margin-bottom: 1em;
    text-transform: uppercase;
}

footer a {
    color: #d0d0d0;
    text-decoration: none;
}

footer ul {
    list-style-type: none;
}

footer ul li {
    margin-top: 1em;
}

footer p {
    margin-top: 1em;
}

footer.copyright {
    background-color: #ddd;
    color: #666;
    clear: both;
    padding: 1em 5em;
}

footer .left-column {
    float: left;
    width: 49%;
}

footer .right-column {
    float: left;
    width: 49%;
}

button.cta {
    background-color: #75b734;
    background: linear-gradient(top, #75b734, #47951e 100%);
    background: -o-linear-gradient(top, #75b734, #47951e 100%);
    background: -ms-linear-gradient(top, #75b734, #47951e 100%);
    background: -moz-linear-gradient(top, #75b734, #47951e 100%);
    background: -webkit-linear-gradient(top, #75b734, #47951e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#75b734", endColorstr="#47951E", GradientType=0);
    border: 0;
    border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    color: #fff;
    cursor: pointer;
    font-family: "Roboto";
    font-size: 1.250em;
    font-weight: bold;
    padding: 0.750em 1.500em;
}

button.cta:hover {
    background: #47951e;
}

.clear-both {
    clear: both;
}

.contact-form input {
    border: 1px solid #bbb;
    border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    font-size: 1em;
    margin: 0.5em 0.5em 0.5em 0;
    padding: 0.5em;
    width: 20em;
}

.contact-form textarea {
    border: 1px solid #bbb;
    border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    font-size: 1em;
    margin: 0.5em 0.5em 0.5em 0;
    padding: 0.5em;
    width: 41.75em;
}

.contact-form button {
    display: block;
}

.contact-form .error {
    color: #b00;
}


/* **************************** */
/*          home page           */
/* **************************** */

.hero-image {
    clear: both;
    color: #444;
    background-color: #f4f4f4;
    background: linear-gradient(top, #f0eeef, #f4f4f4 50%, #e3e1e2 100%);
    background: -o-linear-gradient(top, #f0eeef, #f4f4f4 50%, #e3e1e2 100%);
    background: -ms-linear-gradient(top, #f0eeef, #f4f4f4 50%, #e3e1e2 100%);
    background: -moz-linear-gradient(top, #f0eeef, #f4f4f4 50%, #e3e1e2 100%);
    background: -webkit-linear-gradient(top, #f0eeef, #f4f4f4 50%, #e3e1e2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0eeef", endColorstr="#e3e1e2", GradientType=0);
    height: 27.875em;
    margin: 3px 0 0 0;
    padding: 0;
    width: 100%;
}

.hero-image div {
    overflow: hidden;
    width: auto;
    height: 100%;
}

.hero-image img {
    border: 0;
    float: right;
    height: 100%;
}

.hero-image h1 {
    font-size: 3.000em;
    font-weight: normal;
    line-height: 1em;
    margin: 1em 0 0 1.667em;
}

.hero-image p {
    font-size: 1.250em;
    line-height: 1.250em;
    margin: 1.250em 0 0 4em;
    max-width: 43em;
}

.hero-image button {
    margin: 1.500em 0 0 4em;
}

.home section {
    background-color: #fff;
    color: #444;
    clear: both;
    padding: 3em 10em;
    text-align: center;
}

.home section h2 a {
    color: #444;
    font-size: 2em;
    text-decoration: none;
}

.home section h3 {
    margin-bottom: 0.5em;
}

.home section h3 a {
    color: #444;
    font-size: 1.250em;
    text-decoration: none;
}

.home section h2 a:hover,
.home section h3 a:hover {
    text-decoration: underline;
}

.home section article {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
    padding: 0 3em;
    vertical-align: top;
    width: 33%;
}

.home section img {
    height: 6em;
    margin: 2em 0;
}

.home section.second {
    background-color: #0f8dcb;
    color: #fff;
}

.home section.second a {
    color: #fff;
}

.home section.third {
    text-align: left;
}

.home .contact-form {
    margin-top: 1em;
}

.home .contact-form input {
    width: 20em;
}

.home .contact-form textarea {
    width: 41.75em;
}

.home .contact-form .error {
    color: #b00;
    margin-top: 0.5em;
}


/* **************************** */
/*          page1 layout        */
/* **************************** */

.page1 h1 {
    background-color: #ddd;
    color: #222;
    font-size: 1.875em;
    margin: 3px 0 2.667em;
    padding: 1.250em 2.667em;
}

.contact-submit p {
    font-size: 1.538em;
}

.page1 img.main {
    float: left;
    width: 40%;
    margin: 0 2em 2em 5em;
}

.page1 section {
    margin: 0 5em 4em 5em;
}

.page1 section.second {
    clear: both;
}

.page1 section h2 {
    font-size: 1.538em;
}

.page1 section p {
    margin-top: 1em;
}

.page1 section ul {
    list-style-position: outside;
    margin-top: 0.333em;
}

.page1 section ul li {
    margin-left: 1.5em;
}

.page1 .cta-container {
    margin-top: 2em;
}

.page1 .contact-form {
    margin-top: 1em;
}

.page1 .contact-form label {
    display: block;
    font-size: 1.250em;
    margin-top: 1em;
    width: 20em;
}

.page1 .contact-form input {
    display: block;
    width: 40em;
}

.page1 .contact-form textarea {
    display: block;
    width: 40em;
}

.page1 .contact-form button {
    margin-top: 1em;
}

.page1 .contact-form .error {
    font-size: 1.250em;
}

.page1 section.contact-submitted {
    min-height: 20em;
}

.page1 section.contact-submitted h3 {
    font-size: 1.375em;
    margin-top: 1em;
}