/*
 * Navigataur: A pure CSS responsive navigation menu
 * Author: Mike King (@micjamking)
 */

/*
         Notes:
 
         - Media queries should be edited in both style sections if you require 
          a different breakpoint for your navigation.
          
        - Toggle class & menu anchor tags in list items have box-sizing: border-box 
          style property to allow padding inside the container without conflicting with layout.        

*/


/*--------------------------------
 Functional Styles (Required)
---------------------------------*/

.header { position: relative; }
#toggle, .toggle { display: none; }
.menu > li { list-style: none; }

/* Nicolas Gallagher micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

@media only screen and (max-width: 1024px){
        .menu { display: none; opacity: 0; width: 100%; position: absolute; left: 0; }
        .menu > li { display: block; width: 100%; margin: 0; }
        .menu > li > a { display: block;font-family: 'Source Sans Pro', sans-serif; font-size: 18px; color: #515151; font-weight: 300;
	text-decoration: none;width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
        .toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
        #toggle:checked + div .menu { display: block; opacity: 1;}
}


/*--------------------------------
 Presentation Styles (Editable)
---------------------------------*/
.header{

}

.header > h1 {

}

.nav{ 

}

.nav, .menu, .menu > li, .menu > li > a{ 
        height: 38px; 
}

.menu > li > a{

}

.menu > li > a:hover, .menu > li > a:focus{

}

.toggle{ 
        z-index: 2; 
}

@media only screen and (max-width: 1024px){
        .menu{
                background: #FFFFFF;
                border-top: 1px solid #F2F2F2;
        }
        
        .menu, .menu > li, .menu > li > a{
                height: auto;
				border-right: 0px solid #e6e6e6;
        }
        
        .menu > li > a{
                padding: 15px 15px;
        }
        
        .menu > li > a:hover, .menu > li > a:focus{
                background: #F2F2F2;
                padding: 15px 15px 15px 15px;
        }
        
        .toggle:after {
                content: attr(data-open);
                display: block;
                width: 100%;
                margin: 0;
                padding: 10px 0;
                background: #FFF;
                -webkit-border-radius: 0;
                border-radius: 0;
                text-align: center;
                font-size: 16px;
                color: #000;
                -webkit-transition: all 0.5s linear;
                -moz-transition: all 0.5s linear;
                -o-transition: all 0.5s linear;
                transition: all 0.5s linear;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box; 
        }
        
        .toggle:hover:after{
                background: #F2F2F2;
        }
        
        #toggle:checked + div .toggle:after{
                content: attr(data-close);
        }
}

@media only screen and (max-width: 479px){
        .header > h1 { 
                text-align: center;
        }
        .header > h1, .nav, .toggle:after{ 
                float: none; 
        }
        .toggle:after { 
                text-align: center; width: 100%; 
        }
}