/*--------------------
TABLE OF CONTENTS
01. Base Styles
02. Typography/Link Styles
03. Header Styles
04. Navigation Styles
05. Content Styles
06. Footer Styles

/*======================
01. BASE STYLES
========================*/

* {margin:0;}

html, body {height:100%;}

body {
    font:100%/1.4 'Source Sans Pro',sans-serif;
    color:#303030;
    /*background:#fff url('../img/bg-blurred.jpg') no-repeat center 100px;*/
    font-weight:300;
    -webkit-overflow-scrolling: touch;
}

#sb-site {
    background:#fff url('assets/img/bg-pattern.jpg') no-repeat center -175px;
}

body#home #sb-site {
    background:#fff url('assets/img/bg-pattern.jpg') no-repeat center -50px;
}

img {max-width:100%; height: auto;}

.wrapper {
    min-height:100%;
    height:auto !important;
    height:100%;
    margin: 0 auto -130px;
}

.containerlg {
    width:100%;
    margin:0 auto;
/*    max-width:1297px;*/
}

.container {
    width:95%;
    margin:0 auto;
    max-width:1000px;
    position:relative;
}
.column {
    float:left;
    margin:0 1%;
}

.grid12 {width:98%;}
.grid11 {width:89.6667%;}
.grid10 {width:81.3333%;}
.grid9 {width:73%;}
.grid8 {width:65%;}
.grid7 {width:56.3333%;}
.grid6 {width:48%;}
.grid5 {width:39.6667%;}
.grid4 {width:31%;}
.grid3 {width:23%;}
.grid2 {width:14.6667%;}
.grid1 {width:6.3333%;}

.clear {clear:both;}

.alignleft,.alignmid,.alignright {
    border:2px solid #6DC9C3;
    margin-bottom:10px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;

}

.alignleft {
    float:left;
    margin-right:15px;
}

.alignright {
    float:right;
    margin-left:15px;
}

.alignmid {
    display:block;
    margin:0 auto;
}

.center {text-align:center;}

/*======================
02. TYPOGRAPHY/LINK STYLES
========================*/

h1,h2,h3,h4,h5,h6 {
    font-family:'Oswald',sans-serif;
    font-weight:normal;
    padding-bottom:0;
    text-transform:uppercase;
}

h1,h2 {
    color:#6dc9c3;
}

h3,h4,h5,h6 {
    color:#54a9a3;
}

h1 {font-size:3.5em;}
h2 {font-size:2.5em;}
h3 {font-size:2.0em;}
h4 {font-size:1.5em;}
h5 {font-size:1.0em;}
h6 {font-size:0.8em;}

a {color:#FF8041;/*transition:0.5s all ease;*/}

a:hover {color:#d65d21;}

a.button {
    background:#79d7d1;
    background-image:linear-gradient(#79d7d1,#62beb8);
    font-family:'Oswald',sans-serif;
    color:#fff;
    text-align:center;
    display:inline-block;
    text-decoration:none;
    padding:7px 20px;
    font-size:1.3em;
    font-weight:400;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    text-transform:uppercase;
    margin-bottom:15px;
}

a.button:hover {
    background:#62beb8;
    background-image:linear-gradient(#62beb8,#79d7d1);
    color:#fff;
}

a.large {
    width:95%;
    padding:15px 0;
    padding-left:5%;
    text-align:left;
    text-transform:none;
    position:relative;
}

a.large strong {
    font-weight:400;
    text-transform:uppercase;
    font-size:1.1em;
}

a.large img {
    position:absolute;
    top:15%;
    right:5%;
}

span.highlight {
    color:#ff8041;
    font-size:1.5em;
    font-weight:400;
}

blockquote {
    font-family:'Oswald',san-serif;
    color:#FF8041;
    font-size:1.3em;
    margin-bottom:20px;
    margin-left:20px;
    border-left:2px solid #6DC9C3;
    padding-left:10px;
}

/*======================
03. HEADER STYLES
========================*/

header {
    background:url('assets/img/header-bg.png') center -10px;
    width:100%;
    height:172px;
    border-top:10px solid #ff8041;
    position:fixed;
    z-index:9999;
    -webkit-transform: translate3d(0,0,0);
}

#logo {
    color:#ff8c53;
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    font-size:4.8em;
    margin-top:20px;
}

#social {
    position:absolute;
    top:0;
    right:1%;
    background:#FF8041;
    padding:5px 10px;
    border-bottom-left-radius:10px;
    -moz-border-bottom-left-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    -moz-border-bottom-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}

#social a{
    color: #fff;
}

#social img {margin:0 2px;}

/*======================
04. NAVIGATION STYLES
========================*/

#menu-btn {display:none;}

nav {
    margin:85px auto 0 auto;
    position:relative;
    z-index:9999;
}

nav ul{
    list-style-type:none;
    text-align:right;
}

nav li {
    display:inline-block;
    margin:0;
    position:relative;
    padding-left:28px;
}

nav li a {
    display:block;
    text-decoration:none;
    margin:0;
    padding-bottom:5px;
    color:#6dc9c3;
    font-size:1.1em;
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
}

nav li:hover a {
    color:#FF8041;
    border-bottom:3px solid #FF8041;
}

/* DROPDOWN */

nav li ul {
    display: none;
}
nav li:hover ul {
    display: block;
    margin-left: 0;
    position: absolute;
    top: 33px;
    left:0;
    z-index: 9999;
}
nav li:hover li {
    float: none;
    white-space: nowrap;
    width: 100%;
    background:none;
}
nav li:hover li a {
    background:#6dc9c3;
    background: rgba(109,201,195,0.7);
    display: block;
    margin:0;
    height: auto;
    text-align: left;
    font-size:0.95em;
    padding:10px 30px 10px 20px;
    border:0;
    color:#fff;
}
nav li:hover li a:hover {
    background: #50a39e;
    background: rgba(80,163,158,0.8);
}

/*======================
05. CONTENT STYLES
========================*/

#feature {
    padding-top:116px;
    position:relative;
    margin-bottom:10px;
}

#feature li {margin:0;}

#slogan {
    position:absolute;
    right:13%;
    bottom:7%;
    z-index:10;
    color:#fff;
    font-family:'Oswald',sans-serif;
    background:#6dc9c3;
    background:rgba(109,201,195,0.8);
    text-transform:uppercase;
    font-size:1.4em;
    padding:5px 20px 5px 50px;
    line-height:1.2em;
    text-align:right;
}

#content {
    margin-bottom:30px;
}

#quicklinks {margin-top:15px;}

#quicklinks-supt a.large {
    float:left;
    width:43%;
    margin:0 1%;
}

#form .clear {clear:both;}
#form .center {text-align:center;}
#form h3 {margin:0 1%;}
#form small {font-style:italic;}
#form hr {width:98%;margin:10px 1% 15px 1%;}

/*GRID */
#form .column {
    float:left;
    margin:0 1%;
}

#form .full {width:98%;margin:0 1%;}
#form .half {width:48%;}
#form .twothird {width:65%;}
#form .onethird {width:31%;}

/*FORM STYLES*/

#form input:not([type=submit]):not([type=checkbox]) {
    width:96%;
    padding:10px 2%;
    border:1px solid #d6d6d6;
}

#form textarea {
    width:100%;
    resize:none;
}

#form select {
    width:101%;
    padding:10px 2%;
}

.predev {font-size:1.2em;}

a.anchor {
    display:block;
    position:relative;
    top:-200px;
    visibility:hidden;
}

/*======================
06. FOOTER STYLES
========================*/

footer, .push {
    height:130px;
}

footer {
    width:100%;
    font-size:0.75em;
    margin-top:60px;
    height:120px;
}

address {
    background:#FF8041;
    border-top-left-radius:15px;
    -webkit-border-top-left-radius:15px;
    -moz-border-top-left-radius:15px;
    border-top-right-radius:15px;
    -webkit-border-top-right-radius:15px;
    -moz-border-top-right-radius:15px;
    font-family:'Oswald',sans-serif;
    font-size:1.7em;
    text-transform:uppercase;
    text-align:center;
    font-style:normal;
    color:#fff;
    padding:8px 0;
}

#bottom {
    background:#FF8041;
    height:100%;
    text-align:center;
    color:#54240c;
    padding-top:10px;
}

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

/*======================
MEDIA QUERIES
========================*/
/* LARGE SCREENS */
@media (min-width:1950px) {
    #sb-site {
        background:none;
    }
}
/*DESKTOP COMPUTERS FOR FLASH */
@media (min-width: 1024px) {
    .noflash {
        display:none;
    }
    .flash {
        width:550px;margin:0 auto;
    }
}

/*TABLETS AND SMALL SCREENS */

@media (max-width: 1140px) {
    .flash {
        display:none;
    }

    nav li a {font-size:1em;}
    nav li {padding-left:15px;}

    #slogan {right:4%;}
    a.button {font-size:1.1em;}

    #sb-site, body#home #sb-site {
        background:#fff;
    }
}

/*PORTRAIT TABLET AND SMALLER */
@media screen and (max-width:790px){
    .grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12 {
        width:100%;
    }

    .column {float:none;margin:0;}

    #logo {
        text-align:center;
        padding-top:10px;
    }

    #social {
        position:absolute;
        top:-20px;
    }

    #social img {width:30px;}

    #menu-btn {
        display:block;
        position:absolute;
        top:-20px;
        left:1%;
        background:#FF8041;
        padding:3px 10px;
        border-bottom-left-radius:10px;
        -moz-border-bottom-left-radius:10px;
        -webkit-border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
        -moz-border-bottom-right-radius:10px;
        -webkit-border-bottom-right-radius:10px;
        z-index:20;
        cursor:pointer;
    }

    #desktop {display:none;}

    nav {
        margin:0 auto;
    }

    nav li {padding-left:0;}

    nav li:hover a {
        color:#fff;
        border:0;
    }

    nav li:hover ul {
        position: relative;
        top:0;
        padding-bottom: 0;
    }

    nav li:hover li a {
        background:#62BEB8;
        color:#fff;
    }

    #feature {
        padding-top:150px;
    }

    #quicklinks a.large {
        float:left;
        width:43%;
        margin:0 1%;
    }

    a.button {font-size:1.3em;}

    #form .column {
        float:none;
        margin:0;
    }
    #form .full, #form .half, #form .twothird, #form .onethird {
        width:100%;margin:0;
    }

}

/*MOBILE PHONES PORTRAIT/LANDSCAPE */
@media screen and (max-width:600px) {
    .alignleft, .alignright {
        float:none;
        display:block;
        margin:0 auto 20px auto;
    }

    header {
        background:url('assets/img/header-bg.png') center -30px;
        height:152px;
    }

    #logo {
        font-size:4em;
        padding-top:20px;
    }

    footer {
        height:160px;
    }

    address {
        border-top-left-radius:0;
        -webkit-border-top-left-radius:0;
        -moz-border-top-left-radius:0;
        border-top-right-radius:0;
        -webkit-border-top-right-radius:0;
        -moz-border-top-right-radius:0;
        font-size:1.2em;
        padding:8px 10px;
    }

    #feature {padding-top:140px;}

    #slogan {
        font-size:1em;
        padding:5px 20px 5px 30px;
        line-height:1.2em;
    }
}

@media screen and (max-width:550px) {
    #quicklinks a.large, #quicklinks-supt a.large {
        float:none;
        width:93%;
        margin-bottom:10px;
    }
}

@media screen and (max-width:400px) {
    #slogan {display:none;}
}