/* ====================================== 
yellow: #F3DC45 previously F3DC45
====================================== */

/* ====================================== 
Body / Typography
====================================== */
body{
    background-color: #003462;
    font-family: 'Droid Sans', sans-serif;
    font-size: 16px;
    color: #003462;
}
a{
    color: #fff;
}
a:hover{
    color: inherit;
}
h1,h2,h3,h4,h5,h6{
    color: #303030;
    font-weight: 100; /* All headings are a thin font weight */
    line-height: 100%;
    text-transform: uppercase;
}
h1{
    font-size: 2.4em;
}
h2{
    font-size: 1.8em;
}
h3{
    font-size: 1.6em;
}
h4{
    font-size: 1.2em;
}
h5{
    font-size: .8em;
}
h6{
    font-size: .5em;
}
blockquote{
    padding: 1% 2%;
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    overflow: hidden;
    margin: 5px 30px 15px 0;
    text-align: center;
    position: relative;
    border: 1px solid #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: #fff;
    width: 30%;
    float: left;
}

/* ====================================== 
Text Color
====================================== */
.blue{
    color: #003462;
}
.orange{
    color: #3bb9b1;
}
.green{
    color: #e9c01b;
}
.white{
    color: #fff;
}

/* ====================================== 
Buttons
====================================== */
a.button {
    background: none;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size:.9em;
    padding: 8px 20px;
    display: inline-block;
    margin: 10px 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #fff;
    font-weight: bold;
    /* The rules below provide a transition for all elements
    that have :hover states, and position changes */
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
a.button:hover, a.button.rounded:hover{
    background: #eaeaea;
    color: #303030;
}

/* ====================================== 
Logo
====================================== */
.logo{
    text-align: center;
}
.logo a{
    font-size: 5.3em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
    padding: 0 20px;
}
.logo img{
    max-width: 300px;
    width: 100%;
    margin: 10% 0;
}

/* ====================================== 
Sidebar
====================================== */
#sidebar{
    background: #003462;
    border-right: 10px solid #df6743;
    color: #fff;
}
#sidebar .social{
    text-align: center;
    margin-top: 10%;
}
#sidebar .social ul{
    list-style-type: none;
    padding: 0;
}
#sidebar .social li{
    display: inline-block;
}

/* ====================================== 
Menu
====================================== */
.main-navigation a{
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    padding-left: 12%;
    font-size: 18px;
}
.main-navigation a:hover{
    color: #fff;
}
.main-navigation li:hover{
    background-color: #df6743;
}
.main-navigation li li{ /* Dropdown menu item styling */
    color: #fff;
}
.main-navigation li li a{ /* Dropdown menu item a styling */
    color: #fff;
    font-size: 1em;
}
.main-navigation li li:hover{
    background: #003462;
}
.main-navigation li li:hover a{
    color: #fff;
}

/* ====================================== 
Main Content Area
====================================== */
header{
    position: relative;
    z-index: -1;
}
header img{
    width: 100%;
    display: block;
}
header .page-title{
    position: absolute;
    top: 30%;
    text-align: center;
    width: 100%;
    padding-bottom: 10px;
}
header .page-title h1{
    color: #fff;
    font-size: 5em;
}
.sub header{
    background-image: url(../img/kids-orange-sub.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 468px;
}
.content-main{
    position: relative;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 80px;
}
.content-main:before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/triangles-top-left.png) no-repeat;
    width: 423px;
    height: 553px;
    z-index: -1;
}
.content-main:after{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../img/triangles-bottom-right.png) no-repeat;
    width: 379px;
    height: 396px;
    z-index: -1;
}
.content-main a{
    color: #000;
}
.content-main hr{
    margin-top: 50px;
    margin-bottom: 50px;
    color: #dcdcdc;
    border: 1px solid;
}
.quick-link-set{
    background: #df6743; 
    margin: 10px; 
    padding: 10px 20px;
}
.quick-link-set h3{
    margin-top: 0;
    margin-bottom: 10px;
    color: #fff;
}
.slogan{
	background-color:#fff;
    position: relative;
    font-size: 2em;
    padding: 2% 0 3% 0;
    text-transform: uppercase;
}
.slogan:after{
    background: linear-gradient(-45deg, #e9c01b 16px, transparent 0), linear-gradient(45deg, #e9c01b 16px, transparent 0);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: -10px;
    left: 0px;
    width: 100%;
    height: 32px;
}
.slogan span{
    font-weight: bold;
}
header:after{
    background: linear-gradient(-45deg, #e9c01b 16px, transparent 0), linear-gradient(45deg, #e9c01b 16px, transparent 0);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}
.welcome{
    background-color: #e9c01b;
    overflow: hidden;
    position: relative;
}
.sub .welcome:after{
    background: linear-gradient(-45deg, #fff 16px, transparent 0), linear-gradient(45deg, #fff 16px, transparent 0);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}
.who-we-are{
    background-image: url(../img/kids-orange.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    overflow: hidden;
    position: relative;
    padding: 3% 0 40px 0;
}
.who-we-are:after{
    background: linear-gradient(-45deg, #fff 16px, transparent 0), linear-gradient(45deg, #fff 16px, transparent 0);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}
.who-we-are h2{
    color: #fff;
    margin-top: 0;
}
.pre-footer {
	background-color:#fff;
}
.pre-footer .third{
    padding: 0;
}
.community-involvment{
    background: #eaf4ff;
    overflow: hidden;
}

.emergency-poster {
	float:left;
	width:225px;
	background:#003462;
	text-align:center;
	padding:5px 5px;
	margin:0 10px 0 0;
	color:#fff;
}
.emergency-poster img {
	text-align:center;
	margin:0 auto;
}
.emergency-poster h4 {
	color:#fff;
	font-size:1.5em;
	font-weight:bold;
}

/* ====================================== 
Quick Links
====================================== */
.quick-links{
    background-color: #003462;
    color: #fff;
}
.quick-links.section{
    padding: 0;
}
.quick-links:after{
    content: '';
    clear: both;
    display: block;
}
.quick-links a{
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 33px;
}
.quick-links .bg a{
    padding: 30px 50px;
    display: block;
}
.quick-links .bg a:hover{
    text-decoration: underline;
}
.quick-links .third{
    padding: 0;
}
.bg{
    position: relative;
}
.bg img{
    position: absolute;
    height: 100%;
    display: block;
    top: 0;
    z-index: 1;
}
.bg:hover img{
    opacity: .7;
}
.bg a{
    position: relative;
    z-index: 2;
    white-space: nowrap;
}
.bg1{
    background: url(../img/quick-links-bg1.png);
    background-size: cover;
}
.bg1:hover{
    background: url(../img/quick-links-bg1-hover.png);
    background-size: cover;
}
.bg2{
    background: url(../img/quick-links-bg2.png);
    background-size: cover;
}
.bg2:hover{
    background: url(../img/quick-links-bg2-hover.png);
    background-size: cover;
}
.bg3{
    background: url(../img/quick-links-bg3.png);
    background-size: cover;
}
.bg3:hover{
    background: url(../img/quick-links-bg3-hover.png);
    background-size: cover;
}
.bg1 a:before{
    content: '';
    background: url(../img/calendar-icon.png) no-repeat;
    width: 34px;
    height: 36px;
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
}
.bg2 a:before{
    content: '';
    background: url(../img/papers-icon.png) no-repeat;
    width: 26px;
    height: 33px;
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
}
.bg3 a:before{
    content: '';
    background: url(../img/talk-bubble-icon.png) no-repeat;
    width: 38px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
}

/*====================================== 
Footer
======================================*/
footer{
    background-color: #003462;
    color: #fff;
    font-size: .8em;
    max-height: 213px;
    overflow: hidden;
}
footer .box.middle a{
    text-transform: uppercase;
}

/* ====================================== 
Back to Top
====================================== */
.back-to-top{
    background-image: url(../img/back-to-top.jpg);
    background-repeat: no-repeat;
    height: 41px;
    width: 48px;
    text-indent: -9999px; /* Hides text from human view */
    position:fixed;
    bottom:62px;
    right:40px;
    display:none;
    z-index: 999;
}
.back-to-top:hover{
    /* background-image: url(../../images/back-to-top-rollover.jpg); */
    text-decoration:none;
}

/*====================================== 
Media Queries
======================================*/
/* Tablet range */
@media only screen and (max-width: 1000px) {
    .desktop{
        display: none !important; /* Applying this hides element on "mobile" */
    }
    .mobile{
        display: block;
    }
    .half, .third, .two-thirds, .quarter, .three-quarters{
        margin:0 auto;
        width:100%;
    }
    .left, .right{
        float: none;
    }
    img.right{
        margin: 10px 0;
        width: auto !important;
    }
    img.left{
        margin: 10px 0;
        width: auto !important;
    }
    .top-bar{
        height: auto;
        top: 15px;
    }
    h1, h2, h3, h4, h5, h6{
        text-align: center;
    }
    a.button{
        text-align: center;
    }
    .top-bar:after{
        display: block;
        content: '';
        clear: both;
    }
    .top-bar .half{
        width: 50%;
    }
    .top-bar .left{
        float: left;
    }
    .top-bar .right{
        float: right;
    }
    .top-bar .social{
        padding-top: 0;
    }
    .top-bar .social li img{
        width: 70%;
        display: inline-block;
    }
    .nav-logo-holder{
        padding-top: 31px;
    }
    .social a{
        color: #fff;
        text-decoration: none;
    }
    .social ul{
        margin-top: 20px;
    }
    #menu-btn{
        cursor: pointer;
        display: block;
        left: 20px;
        position: absolute;
        top: 10px;
        z-index: 999;
    }
    .mobile-button{
        display: block;
        width: 33px;
        height: 22px;
        background: url(../img/mobile-toggle.png) no-repeat 0px 0px;
        background-size: contain;
        position: absolute;
        margin: 0px 0px 0px 0px;
        z-index: 950;
        cursor: pointer;
        top: 20px;
        left: 10px;
    }
    .main-navigation .mobile-button{
        position: absolute;
        top: 10px;
        right: 10px;
        width: 33px;
        height: 22px;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 0;
    }
    .main-navigation{
        float: none;
        display: block;
        text-align: center;
        margin-top: -35px;
    }
    .main-navigation{
        display: block !important;
        background: #df6743;
        position: fixed;
        top: 35px;
        left: -225px;
        bottom: 0px;
        width: 225px;
        padding: 41px 0 0 0;
        border: none;
        z-index: 99999;
        overflow-y: auto;
        -webkit-transition: all 0.1s ease-in-out;
        -moz-transition: all 0.1s ease-in-out;
        -ms-transition: all 0.1s ease-in-out;
        -o-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
    }
    .main-navigation.mobile-menu{
        left: 0;
    }
    .main-navigation > ul{
        width: auto;
        margin: 0;
        padding: 0;
    }
    .main-navigation > ul > li {
        height: auto;
        min-height: 20px;
        overflow: hidden;
        opacity: .9;
        display: block;
        margin: 0;
    }
    .main-navigation > ul li{
        float: none;
    }
    .main-navigation > ul li a:after{
        display: none;
    }
    .main-navigation > ul li:hover{
        background: #fff;
    }
    .main-navigation > ul > li a {
        display: block;
        float: none;
        font-size: 1.2em;
        border-bottom: 1px solid #fff;
        width: 100%;
        text-align: left;
        height: 45px;
        overflow: hidden;
        line-height: 45px;
        padding: 0px 0px 0px 15px;
        color: #000;
    }
    .main-navigation > ul > li a:hover{
        color: #000;
    }
    .main-navigation li ul li > a:after {
        display: none;
    }
    .main-navigation > ul > li a:first-child {width: 100%;}
    .main-navigation > ul li > ul {
        margin: 0px 0px 0px 0px;
        position: static;
        height: auto;
        min-height: 20px;
        overflow: hidden;
        background-color: #fffaf1;
    }
    .main-navigation > ul li > ul li a {
        height: 35px;
        line-height: 35px;
        font-size: 1.05em;
        letter-spacing:0.01em;
    }
    .main-navigation > ul li > ul li:hover a {
        color: #000 !important;
    }
    .main-navigation > ul li.visit > ul {margin-left: 0px;}
    .main-navigation > ul li.faq > ul {margin-left: 0px;}
    .main-navigation > ul li.kids > ul {margin-left: 0px;}
    .main-navigation > ul li.faq > ul > li a {
        width:100%;
        padding:5px 0;
    }
    .mobile-menu ul li:hover ul{
        display: none;
    }
    .table{
        display: inline;
    }
    #sidebar{
        height: auto;
    }
    #sidebar .social{
        margin-top: 0;
        color: #df6743;
        font-weight: bold;
    }
    .social ul{
        position: absolute;
        top: 0;
        right: 10px;
    }
    .content-main img{
        margin: auto;
    }
    .flash {
        display:none;
    }
    .table-cell{
        display: block;
    }
    #sidebar{
        display: block;
        width: 100%;
        max-width: 100%;
        border-right: 0px !important;
        position: static;
        overflow: hidden;
    }
    header .page-title{
        position: static;
        padding: 10% 0;
    }
    header .page-title h1{
        margin-top: 0;
        font-size: 3em;
    }
    .sub header{
        min-height: 0;
    }
    #content{
        width: 100%;
    }
    .logo{
        text-align: center;
        margin: auto;
        position: relative;
        z-index: 190;
        float: none !important;
    }
    .logo img{
        margin-top: 75px;
        margin-bottom: 0;
    }
    .content img{
        margin: auto;
    }
    .content-main img.circle{
        margin-bottom: 15px;
    }
    .bg{
        overflow: hidden;
    }
    .bg img{
        width: 100%;
        height: auto;
    }
    .quick-links .bg a{
        padding: 5% 8%;
    }
    .meet-the-doctor{
        overflow: auto;
    }
    .who-we-are img{
        margin: auto;
    }
    footer{
        max-height: none;
    }
    footer .social ul{
        text-align: center;
    }
    footer .box{
        margin-bottom: 20px;
    }
    footer .box.middle, footer .box.last{
        padding: 0 20px;
    }
    .back-to-top {
        bottom:20px;
        right:15px;
    }

    /* Forms */
    #form .column {
        float:none;
        margin:0;
    }
    #form .full, #form .half, #form .twothird, #form .onethird {
        width:100%;margin:0;
    }
}
@media only screen and (max-width: 600px) {
    .quick-links .circle{
        display: block;
        margin: 60px auto 0 auto;
    }
}
/* Desktop Range */
@media (min-width: 1000px) {
    .noflash {
        display:none;
    }
    .flash {
        width:550px;margin:0 auto;
    }
}