/*--------------------
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
========================*/

html,body {height:100%;}

body {
    font:100%/1.4 'Rokkitt',sans-serif;
    color:#403835;
    font-weight:300;
    -webkit-overflow-scrolling: touch;
    background:#009ee2;
}

img {max-width:100%;}

.container {
    width:95%;
    margin:0 auto;
    max-width:1100px;
    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 #97e2f7;
    margin-bottom:10px;
    border-radius:8px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;

}

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

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

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

.center {text-align:center;}

hr {
    border:2px dashed #97e2f7;
    border-style: none none dashed;
    margin-bottom:20px;
}

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

h1,h2,h3,h4,h5,h6 {
    font-weight:normal;
    padding-bottom:0;
    line-height:1.1em;
}

h1,h3,h5 {
    color:#a2b710;
}

h2,h4,h6 {
    color:#1d5b80;
}

h1 {
    font-size:3.5em;
    border-bottom:2px dashed #1d5b80;
    border-style: none none dashed;
    line-height:1em;
    margin-bottom:20px;
}

h2 {font-size:2.3em;}
h3 {font-size:1.9em;}
h4 {font-size:1.7em;}
h5 {font-size:1.5em;}
h6 {font-size:0.3em;}

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

a:hover {text-decoration:none;}

a.button {
    background:#009EE2;
    color:#FFEA59;
    text-align:center;
    display:inline-block;
    text-decoration:none;
    padding:5px 20px;
    font-weight:400;
    margin-bottom:15px;
    line-height:1em;
}

a.button:hover {
    background:#0078BA;
    color:#FFEA59;    

}

a.large {
    padding:4px 0;
    padding-left:2%;
    text-align:left;
    text-transform:none;
    position:relative;
    float:left;
    width:200px;
    margin-right:2%;

}

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

span.highlight {
    font-size:1.8em;
    line-height:1em;
}

blockquote {
    color:#A2B710;
    font-size:1.6em;
    margin-bottom:20px;
    margin-left:30px;
    border-left:2px dashed #97E2F7;
    padding-left:10px;
}

#welcome p, #content p, #content ul, #content ol {
    font-size:1.2em;
}

#welcome {
	margin-bottom:30px;
	background:#fff;
	padding:15px 45px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

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

header {
    width:100%;
    z-index:40;
}

#logo {
    margin-top:30px;
	position:relative;
	z-index:60;
}

#social {
    position:absolute;
	z-index:50;
    top:0;
    right:1%;
    background:#97e2f7;
    padding:6px 15px 3px;
    border-bottom-left-radius:8px;
    -moz-border-bottom-left-radius:8px;
    -webkit-border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
    -moz-border-bottom-right-radius:8px;
    -webkit-border-bottom-right-radius:8px;
}

#social img {
    margin:0 2px;
    width:35px;
}

#address {
    text-align:right;
    font-size:1.8em;
    color:#fff;
    margin-top:70px;
    line-height:0.8em;
	position:relative;
	z-index:60;
	
}

#address .separator {
	width:65%;
	height:1px;
	background:#fff;
	margin:10px 0 10px auto;
}

span.green {color: #ffea59;}

address {
    font-style:normal;
    font-size:0.7em;
    padding:0;
}

.featherlight .featherlight-content {
    background:#009EE2;
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    text-align:center;
}

#socialbox {display:none;
            text-align:center;
}

.featherlight-content #socialbox {display:inline;}

#reviewbox {display:none;
            text-align:center;
}

.featherlight-content #reviewbox {display:inline;}
/*======================
04. NAVIGATION STYLES
========================*/

#menu-btn {display:none;}

nav {
    margin:20px auto;
    position:relative;
    background: #63493f;
    background: -moz-linear-gradient(top, #63493f 0%, #403530 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #63493f), color-stop(100%, #403530));
    background: -webkit-linear-gradient(top, #63493f 0%, #403530 100%);
    background: -ms-linear-gradient(top, #63493f 0%, #403530 100%);
    background: linear-gradient(to bottom, #63493f 0%, #403530 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63493f', endColorstr='#403530', GradientType=0 );
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-top: 2px solid #a18175;
    margin-bottom:40px;
}
nav ul{
    list-style-type:none;
    text-align:center;
    padding:5px 0;
}

nav li {
    display:inline-block;
    margin:0;
    position:relative;
}

nav li a {
    display:block;
    text-decoration:none;
    margin:0;
    padding:8px 20px;
    color:#97E2F7;
    font-size:1.4em;
    text-transform:uppercase;
}

nav li:hover a {
    color:#ffffff;
    background:#A2B710;
}

/* DROPDOWN */

nav li ul {
    display: none;
}
nav li:hover ul {
    display: block;
    margin-left: 0;
    position: absolute;
    top: 41px;
    left:0;
    z-index: 9999;
}
nav li:hover li {
    float: none;
    white-space: nowrap;
    width: 100%;
    background:none;
}
nav li:hover li a {
    background:#A2B710;
    display: block;
    margin:0;
    height: auto;
    text-align: left;
    font-size:1em;
    padding:10px 40px 10px 20px;
    border:0;
    color:#fff;
    border-top:#cbe328 solid 1px;
}

nav li:hover li a:hover {
    background: #bdd420;
}

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

#content {
    margin-bottom:30px;
	background:#fff;
	padding:15px 45px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#callout {
    background:#e8e8c3;
    margin-top:20px;
    overflow:auto;
}

.padding {
    padding:10px 10px;
    overflow:auto;
}

#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;
}

.office-tour{
	margin: 20px 0;
}
.office-tour:after{
	clear: both;
	content: '';
	display: block;
}
.office-tour .item{
	width: 50%;
	float: left;
}
.office-tour .item img{
	display: block;
	max-width: 100%;
	padding: 20px;
}

#bamboo { 
	position: fixed; 
	z-index: 20; 
	height: 100%; 
	left: -20px; 
	width: 106px; 
	overflow: visible; 
	background: url(/assets/img/bamboo-3.png) no-repeat; 
}

#monkey { 
	position: absolute; 
	z-index: 30; 
	top: 0; 
	right: 0; 
	width: 275px; 
	height: 185px; 
	background: url(/assets/img/monkey.png) no-repeat; 
}

#vines { 
	position: absolute; 
	left:0px;
	z-index: 10;
	height: 120px; 
	width: 100%; 
	background: url(/assets/img/vines.png) 25% 0 repeat-x; 
}

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

footer {
    width:100%;
    font-size:0.9em;
    height:220px;
    color: #1d5b80;
    text-align:center;
}

footer a {color:#a2b710;}

footer a:hover {
    color:#a2b710;
    text-decoration:none;
}
.footer-content {
    width:95%;
    margin:0 auto;
    max-width:1100px;
    position:relative;
}

ul.subnav {
    list-style-type:none;
    text-align:center;
    margin-top:20px;
    padding:0;
}

ul.subnav li {
    display:inline-block;
    margin:0;
    position:relative;
    padding-left:30px;
}

ul.subnav li:before {
    content:"|";
    position:absolute;
    left:12px;
    top:2px;
}

ul.subnav li.first:before {
    content:"";
}

ul.subnav li a {
    display:block;
    margin:0;
    font-size:1.4em;
}

ul.subnav li:hover a {
    text-decoration:none;
}

p.address {font-size:1.4em;}

#bottom {
    background:#1d5b80;
    text-align:center;
    color:#fff;
    padding:10px 20px;
    width:50%;
    border-radius:8px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
}

#bar {
    height:30px;
    background:#1d5b80;
    width:100%;
    margin-top:-20px;
}

/*======================
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;}

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

    nav li:hover ul {top:33px;}

    #bottom {width:80%;}
}

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

    h1 {
        border-bottom:0;
        text-align:center;
    }
	
	#address .separator {
	width:45%;
	margin:10px auto 10px;
}

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

    header {margin-bottom:30px;}

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

    #social {
        position:absolute;
        top:0px;
    }

    #social img {width:30px;}

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

    #address {
        text-align:center;
        margin-top:20px;
    }

    #desktop {display:none;}

    nav {
        background: #63493f;
        border-radius: 0px;
        -webkit-border-radius:0px;
        -moz-border-radius:0px;
        border:none;
        top:-20px;
    }

    nav ul {padding:0;}
    /*Removes random brown space at bottom of mobile nav */

    nav li a {
        display:block;
        text-decoration:none;
        margin:0;
        padding:8px 20px;
        color:#97E2F7;
        font-size:1.1em;
        text-transform:uppercase;
    }

    nav li:hover a {
        color:#ffffff;
        background:#A2B710;
        border:0;
    }

    .sidr ul li {
        border-bottom: 1px solid #82655a;
        display: block;
        line-height: 48px;
        margin: 0;
        text-align: left;
    }

    .sb-slidebar {
        background:#433731;
    }
    /*Creates background color for mobile nav bar*/

    nav li:hover ul {
        padding-bottom:0;
        position:relative;
        top:0;
    }
    /*REQUIRED TO MAKE SUBNAV ON MOBILE FULL WIDTH*/

    /*DROPDOWN */

    nav li:hover li a {
        background:#A2B710;
        display: block;
        margin:0;
        height: auto;
        text-align: left;
        font-size:1.1em;
        padding:10px 40px 10px 20px;
        border:0;
        color:#fff;
        border-top:none;
    }

    nav li:hover li a:hover {
        background: #bdd420;
    }

    #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:650px) {
    .alignleft, .alignright {
        float:none;
        display:block;
        margin:0 auto 20px auto;
    }

    footer {font-size:0.8em;}

    h1 {
        font-size:2.8em;
    }

    h2 {font-size:1.8em;}
    h3 {font-size:1.6em;}
    h4 {font-size:1.4em;}
    h5 {font-size:1.2em;}
    h6 {font-size:1em;}
    span.highlight {font-size:1.6em;}

    ul.subnav li {
        display:block;
        padding-left:0px;
    }

    ul.subnav li:before {
        content:"";
    }
	
	.office-tour .item{
		width: 100%;
		float: none;
    }
	#logo {
        padding-top:40px;
    }
	#bamboo {
		display:none;
	}
}