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



@media only screen and (max-width: 959px){
.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{}
.nav{}
.nav, .menu, .menu > li, .menu > li > a{}
.menu > li > a{}
.menu > li > a:hover, .menu > li > a:focus{}
.toggle{ z-index: 2;}

@media only screen and (max-width: 959px){

.menu{
position: absolute; 
}

.menu, .menu > li, .menu > li > a{
height: auto;		
margin-bottom: -26px !important;
}

.menu > li > a{
padding: 12px 12px;
background: #f0e9d3;	
border-bottom: 1px solid #272727;
color: #272727 !important;
}

.menu > li {
position: relative; 
bottom:50px; 
}

#topnav.sticky {
position: absolute; 
}

#intro {height: 230px;}

#topnav li {
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 22px; 
}

#topnav li.my-books, #topnav li.about-me, #topnav li.author-visits, #topnav li.book-tasters, #topnav li.stories, #topnav li.media {background-image: none;}

#topnav ul {
width: 100%;  
top: -100px; 
background: none;  
}

.menu > li > a:hover, .menu > li > a:focus{
background: #f0e9d3;
box-shadow: inset 5px 0px #fa5735;
padding: 12px 12px 12px 25px;
}

.toggle:after {
content: attr(data-open);
display: block;
width: 420px;
margin: 33px 0;
padding: 10px 50px;
background: #f0e9d3;
-webkit-border-radius: 2px;
border-radius: 2px;
text-align: center;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
border: 1px solid #f0e9d3;
color: #272727 ;
-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: none;
border: 1px solid #f0e9d3;
color: #f0e9d3;
}

#toggle:checked + div .toggle:after{
content: attr(data-close);
}



}

@media only screen and (max-width: 479px){

.nav, .toggle:after{ 
float: none; 
}

.toggle:after { 
text-align: center; 
width: 100%; 
}

}


@media only screen and (min-width: 768px) and (max-width: 1024px) {

.menu > li > a{
background: ;	

}

#topnav ul {
top: -40px !important; 
}

.toggle:after {margin: 33px auto;}
}