/*
 * 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.	

*/

.svg-email {
	width: 220px;
	height: 24px;
	vertical-align: middle;
}


nav {
	position:fixed;
	padding:10px 0 0 35px;
	z-index:98;
	font:18px/18px "helvetica neue", "helvetica", arial, sans-serif;
	width:100%;
	display: flex;
    justify-content: center;
}
nav ul li {
  display: inline-block;
  margin: 0 3px;
}

.menu {
	width:300px;
	height:60px;
	margin:0 auto;
	text-align:center;
	text-shadow:1px 1px 0 rgba(0, 0, 0, 1);
}

nav div.home {float:left;display:none;}
nav .box a:before {content:"?";}
nav a span.vert {display:none;}

nav .box a:hover:before {content:"";}
nav a:hover span.vert {display:block;}

nav .box a {
	float:left;
	display:inline-block;
	width:48px;
	height:33px;
	border:1px solid #06f;
	margin:5px;
	padding:15px 0 0 0;
}
nav .hofa-box {float:left;margin:5px;}
nav .box {
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	font-size:.9em;
}
nav .box a:hover {color:#fff;}

a.sound:hover {border-color:#0c0;background:#0c0;}
a.vision:hover {border-color:#c0f;background:#c0f;}
a.design:hover {border-color:#f00;background:#f00;}
a.jellyfishing:hover {border-color:#0ff;background:#0ff;}
a.ampersand:hover {border-color:#666;background:#666;}
a.friends:hover {border-color:#ff0;background:#ff0;}

.uranus a.sound {border-color:#0c0;background:#0c0;}
.jupiter a.vision {border-color:#c0f;background:#c0f;}
.saturn a.design {border-color:#f00;background:#f00;}
.venus a.jellyfishing {border-color:#0ff;background:#0ff;}
.neptune a.ampersand {border-color:#666;background:#666;}
.mars a.friends {border-color:#ff0;background:#ff0;}

.uranus a.sound:after {content:"👂";color:#fff;}
.jupiter a.vision:after {content:"️👁️";color:#fff;}
.saturn a.design:after {content:"📐";color:#fff;}
.venus a.jellyfishing:after {content:"🤖";color:#fff;}
.neptune a.ampersand:after {content:"👽";color:#fff;}
.mars a.friends:after {content:"💩";color:#fff;}

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



#toggle, .toggle, .mobile, li.home {display:none;}
.mobile > 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:768px){
	nav {padding-top:10px;}
	.mobile {display:none;opacity:0;width:120%;position:absolute;text-align:center;padding:0;}
	.mobile > li {display:block;width:120%;margin:10px auto;}
	.mobile > li > a {display:block;width:120%;text-decoration:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
	.toggle  {display:block;max-width:50px;margin:0 auto;position:relative;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
	li.sound  {display:block;position:relative;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
	#toggle:checked + div .mobile {display:inline-block;opacity:1;}
}

/*--------------------------------
 Presentation Styles (Editable)
---------------------------------*/

.toggle{z-index:2;}
@media only screen and (max-width:768px) {
	.menu {display:none;}
	.mobile {background:none;}
	.mobile, .mobile > li, .mobile > li > a {height:auto;}
	.mobile > li > a {padding:10px 0;border:1px solid #06f;}
	.mobile > li > a:hover, .mobile > li > a:focus {
		border:1px solid #06f;
		color:#fff;
		background:#06f;
		padding-bottom:10px;
		z-index:100;
	}	
	.toggle:after {
		content:attr(data-open);
		display:block;
		width:50px;
		height:50px;
		padding:10px 0 0 0;
		margin:0 auto;
		color:#06f;
		text-align:center;
		border:1px solid #06f;
		-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;
		z-index:100;
	}
	.toggle:hover:after {
		color:#fff;
		background:#06f;
		z-index:100;
	}
	#toggle:checked + div .toggle:after {content: attr(data-close);background:#fff;}
	#toggle:checked + div .toggle:hover:after {background:#06f;}
}