/*===== MOVED FROM responsive.css */
/* styles applied at 769px or above */
@media (min-width: 993px) {
    /* This is needed so the vertical styling of the mobile menu 
       doesn't display because we use a different desktop menu */
    nav.mobile-nav-wrap {display:none!important;}
    #mobile-menu-wrap {display: none;}
}

/*===== MOVED FROM skin.css =====*/
/*@media only screen and (max-width: 768px) */
@media only screen and (max-width: 992px) {
        /*--------- mobile style ----------*/
        nav.mobile-nav-wrap {display:none;position: relative;width:100%;margin:0 auto;}/* z-index:1000; */
        #mobile-menu-wrap{ display:block;float: left;margin:-25px 0 0 0;height: 30px;width: 100%;position: relative;}
        .mobile_nav {display:block;float: right;margin:0px 45px 0 0;position:relative;width:auto; height:40px; bottom:10px; left:10px; }/*z-index:1000;*/
        .mobile-menu-font-size{font-size:21px!important;}

        /*.btn-mobile-menu {background:url(images/btn_menu.png) no-repeat center center; width:40px; height:40px;display: block;}*/
        .btn-mobile-menu input
        {display: block;width: 40px;height: 32px;position: absolute;top: -7px;left: -5px;cursor: pointer;opacity: 0; /* hide this */z-index: 2; /* and place it over the hamburger */-webkit-touch-callout: none;}
        .btn-mobile-menu span {display: block;width: 33px;height: 4px;margin-bottom: 5px;position: relative;background: #fff;border-radius: 3px;
            z-index: 1;transform-origin: 4px 0px;transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;}

        .btn-mobile-menu span:first-child{transform-origin: 0% 0%;}
        .btn-mobile-menu span:nth-last-child(1){transform-origin: 0% 100%;}
        
        /* Transform all the slices into a crossmark. */
        .btn-mobile-menu input:checked ~ span{opacity: 1;transform: rotate(45deg) translate(-2px, -1px);background: #fff;} 
        
        /* hide the middle one with a transition/fade. */
        .btn-mobile-menu input:checked ~ span:nth-last-child(2){opacity: 0;transform: rotate(0deg) scale(0.2, 0.2) translate(0, -1px)} 
    
        /* Rotate the bottom line the opposite direction of the first line */
        .btn-mobile-menu input:checked ~ span:nth-last-child(1){transform: rotate(-45deg) translate(0, -1px);}  

        /*--------- nav-mobile-menu style ----------*/
        #nav-mobile-menu { width:auto; padding:0;background-color: #000;}
        #nav-mobile-menu ul { padding:0;}

        ul.mobile-menu-top-level{list-style: none;margin:0 0 25px 0;padding: 15px 25px 15px 25px;}
        ul.mobile-menu-top-level li{list-style:none;} /* margin: .5em 0; */
        ul.mobile-menu-inner {padding-left:0;overflow: hidden;display: none;}
        ul.mobile-menu-inner li.sub-item span{color:#036;font-style:italic;}
        ul.mobile-menu-inner li.mobile-sub-sub-item.last{margin-bottom:25px;}
        
        ul.mobile-menu-inner li.active-page a{color:#000;}
        
        ul.mobile-menu-top-level li a.mobile-menu-toggle {font-size:21px!important;width: 100%;display: block;color:#E6530C;padding: .15em;transition: background .3s ease;text-transform: uppercase;/*background: rgba(0,0,0,0.9);border-radius: 0.15em;/*background: rgba(0,0,0,0.78);color:#fefefe;*/}
        
        ul.mobile-menu-top-level li a.mobile-menu-toggle {background:url(images/plus-minus.png) no-repeat right 0;}
        ul.mobile-menu-top-level li a.mobile-menu-toggle.expanded {background-position: right -38px!important;}
        
        ul.mobile-menu-top-level > li.selected-top a{color:#036;}
        ul.mobile-menu-top-level > li.selected-top > a::before{content:"> ";}
        
        ul.mobile-menu-inner ul{margin-left:30px;}
        
        ul.mobile-menu-inner li{font-size:21px!important;padding-bottom:5px;}
        ul.mobile-menu-inner li a{font-size:21px!important;}

        ul.mobile-menu-inner ul li.selected-sub a{color:#036;}
        ul.mobile-menu-inner li.selected-sub a::before{content:"> ";}
        ul.mobile-menu-inner ul li:not(.selected-sub) a{color:#ee4924!important;}

        ul.mobile-menu-inner ul li.mobile-sub-sub-item a:hover{color:#036!important;}
        
        /* tabs and sections hidden on desktop menu for CTAs */
        #mobile-tab656{display:block;} /* COPD360social -> Get Involved */
        #mobile-tab737-sizing{display:block;} /* About Education and Support */
        #mobile-tab572{display:block;} /* Donate Now and */
        #mobile-tab829{display:block;} /* Get Involved -> Take Action */
        #mobile-tab730-sizing{display:block;} /* About COPD360 */
        #mobile-tab261{display:block;} /* About the COPD Foundation */
 
        /* COPD360social - Video */
        #mobile-tab390 ul.mobile-menu-inner .interior-banner-wrap{margin-top:25px;margin-right:25px;}
        /* WHAT IS COPD - video */
        #mobile-tab84 ul.mobile-menu-inner .interior-banner-wrap{margin-top:25px;margin-right:25px;}
        /* RESEARCH - video */
        #mobile-tab85 ul.mobile-menu-inner .interior-banner-wrap{margin-top:25px;margin-right:25px;}
        /* ABOUT US - annual report */
        #mobile-tab90 ul.mobile-menu-inner .mobile-annual-report{margin-top:25px;margin-right:25px;}
        /* WAYS TO GIVE */
        #mobile-tab961 ul.mobile-menu-inner .mobile-image-margin{margin-top:25px;margin-bottom:25px;}
    }
    
    /*
    @media (min-width:360px) and (max-width:768px) {
        #mobile-menu-wrap{ display:block;float: left;margin:-25px 0 0 0;}
    }
    */

    /* 481px and above */
    @media only screen and (min-width: 601px){
        .landscape-view-message{display:none;}
    } 
    
    /* 480px and below */
    @media only screen and (max-width: 600px){
        .landscape-view-message{display:block;}
    }
    
    @media (min-width:325px) and (max-width:360px){
        #mobile-menu-wrap{margin:-20px 25px 0 0;}
        .mobile_nav {margin:-5px 35px 25px 0;}
    }
    @media (max-width:325px){
        #mobile-menu-wrap{margin:-15px 25px 0 0;}
        .mobile_nav {margin:-5px 35px 25px 0;}
    }