/* ------------------------------------------------------------ *\
    New Styles
\* ------------------------------------------------------------ */


/* ------------------------------------------------------------ *\
    Media Queries
\* ------------------------------------------------------------ */

@media only screen and (max-width: 979px){
    .shell { width: auto; }

    #middle { height: auto; margin: 0; }
    #left { left: 0; float: none; width: auto; margin-left: 0; }
    #right { left: 0; float: none; width: auto; padding-bottom: 10px; margin: 10px 0 0; }
    
    #container { height: auto; }
    
    #header #left img { max-width: 100%; height: auto; }

    #footer .footer-line,
    #footer,
    .bg,
    .bg-bottom,
    #navigation { min-width: 0; }

    #navigation ul li { padding: 0 15px; }

    #associations { position: relative; float: none; width: 100%; }

    #main { background: none; }

    #content { float: none; width: auto; padding: 0; }

    .slider { margin: 0 auto; margin-bottom: 10px; }
    .cta { text-align: center; }
    .cta ul { float: none; display: inline-block; }

    #sidebar { float: none; display: block; width: auto; padding: 0; text-align: center; }
    #sidebar .box { width: auto; text-align: left; }
    #sidebar .box-content { margin: 0 auto; }

    .slider-content { text-align: center; }
    .slider-content .jcarousel-clip, 
    .slider-content .slider-carousel ul { display: inline-block; }

    .article p { overflow: hidden; }
    .article ul { width: auto; }

    .map-canvas-outer { position: relative; padding-top: 36.25%; }
    .map-canvas-outer > #map_canvas { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; }

    #footer .col { width: 20%; 
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    #footer .col2 { width: 40%; }

    #footer .col .right,
    #footer .col .left { width: 50%; }
    #footer .col.col-last + .col { padding-left: 0; }
}

@media only screen and (max-width: 767px){
    .top-nav ul li.mobile { float: none; display: block; text-align: center; }

    #navigation { position: relative; height: 40px; }
    #navigation .shell { position: static; }
    #navigation ul { padding-left: 0; background: #004185; text-align: left; }
    #navigation > .shell > ul { position: absolute; top: 100%; left: 0; overflow: hidden; max-height: 0; width: 100%; }
    #navigation ul li { float: none; display: block; padding: 0; }
    #navigation ul li a { float: none; display: block; line-height: 1.3; }
    #navigation > .shell > ul > li > a { padding: 6px 10px; font-size: 16px; }

    #navigation ul li .sub { position: relative; top: 0; left: 0; overflow: hidden !important; display: block !important; max-height: 0 !important; width: 100%; padding-top: 0; background: none; }
    #navigation ul li .sub ul li a { padding: 6px 20px; }

    #navigation > .shell > ul.expanded,
    #navigation li.expanded > .sub { max-height: 800px !important; }

    #navigation ul,
    #navigation .sub {
        -webkit-transition: max-height 0.4s;
             -o-transition: max-height 0.4s;
                transition: max-height 0.4s;
    }

    .nav-mobile { display: block; position: absolute; top: 12px; right: 15px; width: 25px; height: 15px; cursor: pointer; }
    .nav-mobile:before,
    .nav-mobile:after { position: absolute; left: 0; width: 100%; height: 3px; background: #fff; content: ''; }
    .nav-mobile:before { top: 0; box-shadow: 0 6px #fff; }
    .nav-mobile:after { bottom: 0; }

    .slider { width: 320px; height: auto; }
    .slider .slider-carousel, 
    .slider .slider-carousel .jcarousel-clip, 
    .slider .slider-carousel ul li { width: 320px; height: 136px; }
    .slider .slider-carousel ul li img { width: 100%; height: auto; }
    .slider .slider-carousel ul { height: auto; }
    .slider .slider-carousel ul li { font-size: 0; }

    .slider .slider-carousel .text { width: auto; }
    .slider .slider-carousel p { font-size: 15px; line-height: 1.3; }

    .slider .slider-nav { top: auto; left: auto; bottom: 0; right: 0; }

    .cta ul { display: block; }
    .cta ul li { float: none; display: block; width: 100%; font-size: 0; vertical-align: top; }
    .cta ul li ~ li { margin: 10px 0 0; }
    .cta ul li a img { float: none; display: inline-block; height: auto; padding: 0; margin: 0; }

    .slider-content .slider-carousel .jcarousel-container { overflow: hidden; }
    .slider-content .jcarousel-clip, 
    .slider-content .slider-carousel { width: 100% !important; padding: 0; }
    .slider-content .slider-carousel { padding: 10px 0; }
    .slider-content .slider-nav a { top: 92px; }
    .slider-content .prev { left: 20px; }
    .slider-content .next { right: 20px; }

    .slider-content .jcarousel-clip { width: 458px !important; margin: 0 auto; }
    .slider-content .slider-carousel ul li { width: 229px; }

    .article h2 { line-height: 30px; }


    .map-canvas-outer { position: relative; padding-top: 56.25%; }

    #footer { overflow: hidden; text-align: center; }
    #footer .col { width: 100%; padding: 0; }
    #footer .col ~ .col { margin-top: 15px; }

    #footer .col .left,
    #footer .col .right { width: 48%; }

    #footer .pay { display: inline-block; width: auto; margin-left: -7px; }
    #footer .pay li { float: none; display: inline-block; padding: 0; margin: 0 0 4px 7px; font-size: 0; }

    #footer .footer-line { padding-bottom: 10px; margin-top: 10px; }
    #footer .social { float: none; display: block; margin-bottom: 10px; }
    #footer .footer-line .right { float: none; display: block; padding-right: 0; line-height: 1.3; text-align: center; }
}

@media only screen and (max-width: 479px) {
    input,
    textarea,
    select,
    .field { display: block; width: 100%; margin-bottom: 5px; 
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }

    .article form table td { display: block; width: 100%; text-align: left; }
    .article form table tr:first-child td:first-child { text-align: center; }

    .slider-content .jcarousel-clip { width: 298px !important; margin: 0 auto; }
    .slider-content .slider-carousel ul li { width: 298px; }
}