/*----------------------------------------------------------------------------------------------------------------*\
BASIC RESET - please use a better one in production
\*----------------------------------------------------------------------------------------------------------------*/
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

/*----------------------------------------------------------------------------------------------------------------*\
NAV
\*----------------------------------------------------------------------------------------------------------------*/
.nav {}
.nav .navControl {display: none;cursor: pointer;}
.nav ul {list-style: none;}
.nav li {display: block;position: relative;z-index: 1;}
.nav a {padding: 10px 20px;display: block;text-decoration: none;text-align: center;}
.nav a:hover {}
.nav span {display: none;}
.nav .dropdown {text-align: center;}
.nav .dropdown li {margin: 0;display: inline-block;}
.nav .dropdown a {padding: 0;border-right: 0;margin-right: 10px;font-size: 0.8em;}
.nav .dropdown li:last-child a {margin-right: 0;}
.nav .dropdown ul {display: none;}

/*----------------------------------------------------------------------------------------------------------------*\
MEDIA QUERIES
\*----------------------------------------------------------------------------------------------------------------*/
@media all and (min-width: 31.250em) {
.nav li {margin-right: -4px;display: inline-block;}
.nav a {}
.nav .dropdown {display: none;position: absolute;top: 100%;left: 0;}
.nav .dropdown li {display: block;}
.nav .dropdown a {padding: 10px;margin-right: 0;white-space: nowrap;text-align: left;}
.nav span {display: inline;position: relative;left: 5px;}
.nav a:hover + .dropdown,
.nav .dropdown:hover {display: block;}

}