/*
|--------------------------------------------------------------------------
| For javascript breakpoint detection
|--------------------------------------------------------------------------
*/
body:after {
    content: 'desktop';
    display: none;
}
@media (max-width: 600px) {
    body:after { content: 'phone'; }
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 960px) {
    .header { height: 65px; }
    .header_inner { width: 100%; }
    .headertagline { display: none; }
}
@media screen and (max-width: 620px) {
    .socialetc { display: none; }
    .socialetc-mobile { display: block; }
}
@media screen and (max-width: 600px) {
    .header { height: 50px; }
    .socialetc-mobile { padding-left: 153px; }
    .socialetc-mobile a {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
    }
}

/*
|--------------------------------------------------------------------------
| Logo
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 960px) {
    a.logo {
        width: 224.903225806px;
        height: 140px;
        background-image: url(/images/logo_sm.png);
        background-repeat: no-repeat;
        background-size: 100%;
        transition: all 0.2s;
        position: absolute;
        top: 0; left: 0;
    }
}
@media screen and (max-width: 600px) {
    a.logo {
        height: 100px;
        width: 160.645160714px;
        border-right: 2px solid black;
    }
}

/*
|--------------------------------------------------------------------------
| Main nav
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 960px) {
    .mainnavholder {
        height: 74px;
        width: 100%;
        padding-left: 217px;
        box-sizing: border-box;
        margin-bottom: 0;
        border-top: 2px solid black;
    }
    .mainnavadjust { width: auto; }
    .mainnav a { display: inline-block !important; }
    .mainnav_ul {
        float: none !important;
        text-align: center;
    }
    .mainnav_ul > li {
        display: inline-block;
        float: none;
    }
    .mainnav_li { height: 31px; }

    .mainnav_l2 li.haschildren:hover .mainnav_l3 {
        display: none !important;
    }
    .mainnav_l2 li.haschildren { padding-right: 4px; }
    .mainnav_l2 li.haschildren:after { display: none; }
}
@media screen and (max-width: 600px) {
    .mainnavholder {
        height: 50px;
        padding-left: 153px;
    }
    .mainnav { 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2000;
        display: none;
    }
    .mainnav.mobile_show { display: block; }
    .mobile_subnav { display: block; }
    .mobile_subnav .back { background-color: #9eb93d; border-bottom: 1px solid black; }
    .mobile_subnav .back a { color: #35410a; }
    .mainnav_ul, .mobile_subnav { border-bottom: 5px solid black; }
    .mainnav_ul.mobile_hide { display: none; }
    .mainnav_li, .mobile_subnav li {
        display: block;
        width: 100% !important;
        float: none;
        border-bottom: 1px solid #c1d772;
        margin-left: 0 !important;
        background-color: #9eb93d;
        position: relative;
        height: 40px;
        padding-top: 10px !important;
        text-align: left;
        padding-left: 10px !important;
        box-sizing: border-box;
        z-index: 10;
    }
    .mainnav_li a, .mobile_subnav li a { 
        display: block !important; 
        z-index: 2; 
        position: relative; 
        height: 40px;
    }
    .mainnav_li.haschildren:after {
        content: '▶';
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        color: #35410a;
        top: 10px;
        right: 10px;
        text-shadow: 1px 0 0 black;
        z-index: 1;
    }
    .mobile_subnav { padding-left: 0 !important; }
    .mobile_subnav li {
        background-color: white;
        font-size: 14px;
        padding-left: 20px !important;
        font-weight: bold;
        text-transform: uppercase;
    }
    .mobile_subnav a { text-decoration: none; }
    .mobile_subnav .sub_menu_landing_link {
        padding-left: 10px !important;
    }
    .mobile_subnav .sub_menu_landing_link a {
        color: #35410a;
    }
    .mobile_nav_close {
        display: block;
        border-bottom: 1px solid #c1d772;
        text-align: right;
        background-color: black;
        width: 100%;
        height: 40px;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
        line-height: 40px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    .mobile_nav_close:after {
        content: 'close X';
        background-color: #cd5a13;
        color: white;
        padding: 4px 8px;
        border-radius: 10px;
    }
    li.mainnav_li:hover ul  { display: none; }
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 960px) {
    .footer_inner { width: 100%; }
    .footer_copyright, .footer_navigation, .sitebysmallbox {
        width: auto;
        box-sizing: border-box;
        float: none;
        margin-left: 0;
        margin-top: 0;
        clear: both;
        height: auto;
        position: relative;
        margin-bottom: 20px;
        margin-left: 20px;
        text-align: center;
        overflow-x: hidden;
    }
    .footer_navigation a { display: block; padding-left: 0; }
}


/*
|--------------------------------------------------------------------------
| Middle Section Layout
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 960px) {
    .background_container {
        background: none !important;
        padding-bottom: 0 !important;
    }
    .page_heading { 
        width: 100% !important;
        box-sizing: border-box;
        margin: 0 !important;
        background-color: #cd5a13;
        padding: 15px 10px 12px 10px !important;
    }
    .page_heading a { color: white; }
    .middle_inner_row { 
        margin-top: 0 !important; 
        width: 100% !important;
    }
    .middle { border-top: 2px solid black; width: 100%; }
    .leftside { 
        padding-top: 10px;
        width: 25% !important;
        padding-right: 5% !important;
        margin-right: 0 !important;
    }
    li.sidenav_li .sidenav_ul li.sidenav_li,
    li.sidenav_li .sidenav_ul,
    li.sidenav_li .sidenav_ul li.sidenav_li a.active, 
    li.sidenav_li .sidenav_ul li.sidenav_li a:hover,
    li.sidenav_li .sidenav_ul li.sidenav_li a { 
        width: auto; 
    }

    .content { 
        box-sizing: border-box;
        padding: 10px 10px 10px 0 !important;
        margin-left: 0 !important;
        /*
        width: auto !important;
        margin-left: 260px;
        float: none !important;
        */
    }
    .layout1 div.content, .layout3 div.content {
        width: 100%;
        float: none;
        padding-left: 10px !important;
    }
    .layout2 div.content, .layout4 div.content {
        width: 70%;
        float: left;
    }
    .layout0 div.content {
        width: 100%;
        float: none;
        padding-left: 0px !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-right: 0px !important;
    }
    .rightside {
        box-sizing: border-box;
        clear: both;
        float: none !important;
        width: 100% !important;
        padding: 10px;
        background-color: #f0f0f0;
        margin-top: 10px !important;
    }
    .rightside:before,
    .rightside:after {
        display: table;
        content: " ";
        line-height: 0;
    }
    .rightside:after { clear: both; }
    .rightside .block { 
        width: 40%; 
        float: left;
        margin: 0 4% 10px !important;
    }
    .rightside .block_body div {
        width: auto !important;
        float: none !important;
        margin-top: 0 !important;
    }
    .layout0 .rightside .block_body div p {
        margin-top: 0 !important;
    }
    .layout0 .rightside {
        margin-top: 10px !important;
        background-color: transparent !important;
    }
    .coscta {
        float: none !important;
        margin-left: -4% !important;
    }
    .block:nth-of-type(3n + 3) {
        clear: left;
    }
}
@media screen and (max-width: 600px) {
    .page_heading { background-color: black; border-bottom: none !important;}
    .rightside .block { 
        width: 220px !important; 
        float: none !important; 
        margin: 0 auto 30px auto !important; 
    }
    .block:nth-child(1) { margin-right: auto; }
    .content { width: 100% !important; padding-left: 10px !important;}
    .layout0 div.content { margin: 0 !important; }
    .layout0 .rightside .block {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 30px 0 !important;
    }
    .leftside { 
        float: none !important;
        width: 100% !important;
        display: none;
        background-color: black;
    }
    .leftside.mobile_show {
        display: block;
    }
    .leftside .block { 
        margin: 0 !important;
        width: 100% !important; 
    }
    .sidenav_ul li { padding-bottom: 10px; }
    .sidenav_ul li li { padding-bottom: 25px; }
    .sidenav_ul li li a { color: #dbe5bf !important; }
    .sidenav_ul li li a.active,
    .sidenav_ul li li a:hover { 
        background-color: #666 !important; 
    }
    .content { margin: 10px;}
    .page_heading a.mobile_haschildren:after {
        content: ' ▼';
        font-size: 0.8em;
    }
}


/*
|--------------------------------------------------------------------------
| Stories
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 960px) {
    .stories .story_image { width: 200px !important; }
}
@media screen and (max-width: 600px) {
    .stories .story_image { width: 100px !important; }
    .story .story_image { 
        max-width: 100% !important; float: none;
    }
    .story_image + .story_descr { margin-left: 0 !important; }
}
@media screen and (max-width: 500px) {
    .story .story_image {
        max-width: none;
        width: 100%;
        float: none;
        text-align: center;
    }
}


/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 600px) {
    .form_email, .form_longtext, .news_form_name {
        width: 100% !important;
        box-sizing: border-box;
    }
    label[for="last_name"] { 
        display: block; 
        clear: left; 
        padding-top: 10px; 
        margin-bottom: -20px; 
    }
}


/*
|--------------------------------------------------------------------------
| Home Page
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 960px) {
    .home_banner, .banner_slide { width: 100% !important; }
    .home_banner { 
        padding: 0 !important;
        height: auto !important;
    }
    .home_banner_gallery_image { 
        width: 50% !important;
        height: auto !important;
        position: relative !important;
        box-sizing: border-box;
        border: none !important;
        box-shadow: none !important;
        top: 0 !important;
        left: 0 !important;
        float: left;
    }
    .home_banner_gallery_image img {
        margin-bottom: 0;
    }
    .home_banner_gallery_content {
        width: 50% !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        float: left;
        box-sizing: border-box;
        padding: 0 10px 10px 20px;
        height: auto !important;
    }
    .home_banner_gallery_content p {
        margin-bottom: 0;
    }
    .banner-white-light { font-size: 20px; line-height: 30px; }
    .banner-orange { font-size: 26px; line-height: 30px; }
    .banner_slide { overflow: hidden; }
    .home_banner_navigation {
        position: relative !important;
        width: 100%;
        top: 0 !important;
        left: 0 !important;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: black;
    }
    .home_banner_navigation_link {
        display: inline-block;
        float: none !important;
    }
    .banner_play, .banner_stop { display: none !important; }
    .banner_link {
        background-image: none !important;
        background-color: #cfcfcf;
        margin: 0 5px;
        height: 24px !important;
        width: 24px !important;
        border-radius: 50%;
    }
    .banner_link_active {
        background-color: #9eb93d;
    }
}
@media screen and (max-width: 600px) {
    .home_banner_gallery_image {
        width: 100% !important;
        float: none;
    }
    .home_banner_gallery_image img {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
    }
    .home_banner_gallery_content {
        width: 100% !important;
        float: none;
        text-align: center;
    }
    .banner-white-light, .banner-orange {
        font-size: 16px !important;
        line-height: 24px;
    }
}



/*
|--------------------------------------------------------------------------
| misc
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 960px) {
    .wrapper { width: 100% !important; /* overflow-x: hidden; */}
    .faq_next, .faq_prev { box-sizing: border-box; }
    form.newsletter_form { width: 220px; }

    img { 
        max-width: 100% !important;
        height: auto !important;
    }
}
@media screen and (max-width: 600px) {
    .nav_menu_trigger { display: block; }
    img[align="right"] {
        display: block;
        float: none;
        margin: 0 auto 20px;
    }
}