/* ===================================
   Mobile Nav
   ================================ */
    #mobile-nav-toggle {
        color: #000;
        font-family: sans-serif;
        font-weight: bold;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        padding: 0 0 0 43px;
        font-size: 0.8em;
        
        /* Prevent Highlight on Tap */
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    #mobile-nav-toggle:before {
        /* you'll probably want to tweak these */        
        margin-top: -11px;
        height: 15px;

        /* these, most often, will be left alone */ 
        content: '';
        display: block;
        background: transparent;
        border-bottom: 9px double #000;
        border-top: 3px solid #000;
        width: 22px;
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        position: absolute;
        top: 50%;
        left: 15px;
    }
    #mobile-nav-toggle span {
        vertical-align: middle;
        display: block;
        position: relative;
        top: 50%;
        margin-top: -0.85em;
    }

    #mobile-nav {
        visibility: hidden; /* androidfix/Michael */
        z-index: 0;/* androidfix/Michael */
        padding: 100px 0 0; /* change top padding to equal header-height */
        text-align: left;
		background-image: url('../images/repeating_bkgrd2.jpg');
		background-repeat: repeat;
        color: #999;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        -webkit-transform-style: flat;/* androidfix/Michael */
        -webkit-backface-visibility: hidden;
/*
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        -webkit-transition: all 0.2s ease-out 0s;
        -moz-transition: all 0.2s ease-out 0s;
        -o-transition: all 0.2s ease-out 0s;
        transition: all 0.2s ease-out 0s;
*/
        /* use 2d transforms to include pre android 3.0 */
        -webkit-transform: translate(-100%, 0);
        -moz-transform: translate(-100%, 0);
        -o-transform: translate(-100%, 0);
        -ms-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
         /* transition visibility and z-index for older phones that don't support transform transitions */
        -webkit-transition: -webkit-transform 0.2s ease-out 0s, visibility 0s linear 0.2s, z-index 0s linear 0.2s;
        -moz-transition: -moz-transform 0.2s ease-out 0s, visibility 0s linear 0.2s, z-index 0s linear 0.2s;
        -o-transition: -o-transform 0.2s ease-out 0s, visibility 0s linear 0.2s, z-index 0s linear 0.2s;
        -ms-transition: -ms-transform 0.2s ease-out 0s, visibility 0s linear 0.2s, z-index 0s linear 0.2s;
        transition: transform 0.2s ease-out 0s, visibility 0s linear 0.2s, z-index 0s linear 0.2s;
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        
        
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #mobile-nav.on {
/*
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        padding-bottom:1px;
*/
	    z-index: 2; /* change this, so that it's ontop of content, but one under header */
        visibility: visible;
        -webkit-transform: translate(0, 0); 
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);/**/
        -webkit-transition: -webkit-transform 0.2s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0s;
        -moz-transition: -moz-transform 0.2s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0s;
        -o-transition: -o-transform 0.2s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0s;
        -ms-transition: -ms-transform 0.2s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0s;
        transition: transform 0.2s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0s;
        padding-bottom:1px;
    }
    #mobile-nav ul, 
    #mobile-nav li {
        margin: 0;
        padding: 0;
    }
	#mobile-nav ul {
		margin-bottom: 30px;
	}   
    #mobile-nav a {
        display: block;
        color: #000;
        font-size: 2.2em;
        text-decoration: none;
        padding: 1em 1.75em;
        border-bottom: 1px solid #ccc;
        
        /* Prevent Highlight on Tap */
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
/*         font-family: 'PT Sans Narrow', 'PT Sans', sans-serif; */
		font-family: 'windsor_handregular','PT Sans', sans-serif;
        text-transform: uppercase;
    }
    #mobile-nav a:hover,
    #mobile-nav a:focus,
    #mobile-nav a:active {
        background-color: #51b6ae;
        color: #fff;
    }
    #mobile-nav .sub-menu a {
        padding: 0.75em 1.75em 0.75em 3em;
    }

    #mobile-nav-close { /* fallback close button for browsers that don't implement z-index properly */
        position: absolute;
        top: 0;
        width: 100%;
        line-height: 55px; /* change line-height to equal header-height */
        padding-top: 0 !important;
        padding-bottom: 0 !important;  
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-top: 55px;
    }
    #mobile-nav-close:before {
        -webkit-font-smoothing: antialiased;
        content: '\2716';
        font-family: 'sans-serif';
        font-variant: normal;
        font-weight: normal;
        line-height: 1;
        speak: none;
        text-transform: none;
        font-size: 1.25em;
        line-height: 1em;
        position: relative;
        top: 1px;
        margin-right: 0.25em;
    }   

    .admin-bar #mobile-nav {
        top: 28px;
    }
    .admin-bar #mobile-nav.on {
        padding-bottom:29px;
    }

/* ===================================
   Hide Mobnav for non-mobile
   ================================ */
@media only screen and (min-width: 769px) {
    #mobile-nav-toggle,
    #mobile-nav {
        display: none;
    }
    .band.top-responsive-header {
	display: none;
	}
}
/* ===================================
   Hide desktop nav + sticky header for mobile
   ================================ */
@media only screen and (max-width: 769px) {
    #container {
        padding-top: 101px; /* change this to equal header-height */     
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #header {
        /* -webkit-transform: translateZ(0);  */
         z-index: 3; /* should be ontop of all other content */        
        position: fixed;
        width: 100%;
        top: 0;
    }
    #nav {
        display: none;
    }
    .band.navigation {
	    display: none;
    }
    .band.top-responsive-header {
		display: block;
		z-index: 3;
		position: fixed;
		background-image: url('../images/repeating_bkgrd2.jpg');
		background-repeat: repeat;
		width: 100%;
		-webkit-box-shadow: 0px 4px 11px rgba(50, 50, 50, 0.47);
		-moz-box-shadow:    0px 4px 11px rgba(50, 50, 50, 0.47);
		box-shadow:         0px 4px 11px rgba(50, 50, 50, 0.47);
		padding: 0;
	}
	#top-header {
		display: none;
	}
	
	#responsive-header {
		height: 90px;
	}
	.band.chief {
		padding-top: 100px;
	}
	#responsive-logo {
		float: right;
		margin-top: 15px;
	}

}