/*
 * 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; float:left;        }

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

@media only screen and (max-width: 768px){
        .menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
        .menu > li { display: block; width: 100%; margin: 0; }
        .menu > li > a { display: block; 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{
        height: 60px;
		padding-left:10%;;
		padding-right:10%;
        background: #FFFFFF;
		/*position:fixed;*/
		top:0px;
		/*-moz-box-shadow: -5px -5px 5px #888;
		-webkit-box-shadow: -5px -5px 5px #888;
		box-shadow: -5px -5px 5px #888;*/
}

.container{
	/*border-bottom:solid black;*/
	font: normal 16px Helvetica, Verdana, Geneva, sans-serif;
	margin-left: auto;
margin-right: auto;
	height:50px;
	/*position:fixed;*/
	z-index:3000;
}

.header > h1 {
		width:100%;
        float: left;
        padding: 34px 0 0;                
        font-style: italic;
        font-family: Georgia;
        font-size: 28px;
        color: #7f563b;
		
		-webkit-text-stroke: 1px black;
}

.nav{ 
        display: block;
}

.nav, .menu, .menu > li > a{ 
        height: 100%; 
		
}

.menu > li{
	/*width:20%;*/
	width:50%;
	color:#7f563b;
	text-align:center;
}

.menu > li > a{
        display: block;
        padding: 12px 10px;
        text-decoration: none;
        font-weight:bold;
		font-style:none;
        font-size: 23px;
        line-height: 1;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box; 
        box-sizing: border-box;
        -webkit-transition: all 0.25s linear;
        -moz-transition: all 0.25s linear;
        -o-transition: all 0.25s linear;
        transition: all 0.25s linear;
		cursor:default;
}

.menu > li > a:hover, .menu > li > a:focus{
        background: #F2F2F2;
		border-bottom:#7f563b;
        color: #7f563b;
        /*padding: 35px 20px 34px;*/
}

.active{
        background: #F2F2F2;
		border-bottom:#7f563b;
        color: #7f563b;
}

.toggle{ 
        z-index: 2; 
}

@media only screen and (max-width: 768px){
        .menu{
                background: #FFFFFF;
                border-top: 1px solid #51C1F1;
        }
        
        .menu, .menu > li, .menu > li > a{
                height: auto;
        }
        
        .menu > li > a{
                padding: 15px 15px;
        }
        
        .menu > li > a:hover, .menu > li > a:focus{
                background: #F2F2F2;
                box-shadow: inset 5px 0px #51C1F1;
                padding: 15px 15px 15px 25px;
        }
        
        .toggle:after {
                content: attr(data-open);
                display: block;
                width: 200px;
                margin: 33px 0;
                padding: 10px 50px;
                background: #51C1F1;
                -webkit-border-radius: 2px;
                border-radius: 2px;
                text-align: center;
                font-size: 12px;
                color: #FFFFFF;
                -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: #45ABD6;
        }
        
        #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%; 
        }
}