/*! responsive-nav.js v1.0.14 by @viljamis */

.js nav[role=navigation] {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;

@include media-query-bp($bp3){
max-height : none;}

.opened {
  max-height: 9999px;
}

}

#nav-toggle {
float : right;
display : block;
padding : $baselineheight / 2 $gutterwidth / 2;
background-color: $navigationbackgroundcolor; 
color: $navigationlinkcolor;
border-bottom-left-radius: $borderradius * 2;

@include media-query-bp($bp3){
display : none;}
}

.navigation-toggle {
display: none;
}

nav[role=navigation] {
clear : both;
background-color : $navigationbackgroundcolor;
@include transition (all $transitionduration ease); }

nav[role=navigation].active {
max-height : 25em; }

#navigation-toggle {
list-style-type : none;
@include zero;

@include media-query-bp($bp3){
margin : 0 0 0 -0.25em;
border-width : 0;}

ul {
list-style-type : none;
@include zero; 
@include media-query-bp($bp3){
margin : 0 auto;}
}

li {
@include media-query-bp($bp3){
display : inline-block;
margin : 0 $gutterwidth / 2 0 0; }
}

a {
display : block;
padding : .8em;
border-bottom : $navigationborderwidth $navigationborderstyle $navigationbordercolor;
color : $navigationlinkcolor;
text-transform : uppercase;

@include media-query-bp($bp3){
border-width : 0;
@include font-size(14); 
text-transform : none; }

&:hover {
color : $navigationlinkcolorhover;
text-decoration : none; }
}
}