
* {
  margin:0;
  padding:0;
 font-family:"Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif;
  word-spacing:-2px;
}

/* ------------------------------------------- 

        Desktop Styling 

---------------------------------------------- */
.nav-menu-wrapper{
	display: inline-block;
	float: right;
	width: 75%;
	height: auto;
	margin: 10px 0 0 0;
}
.nav-menu{
	float: left;
	width: 100%;
}
.nav-menu h1 {
 display: none;
}
input#toggle{
  display: none;
}
.nav-menu ul{
	float: right;
	width: auto;
	height: 100%;
}
.nav-menu li{
	float: left;
	width: auto;
	list-style: none;
	padding: 0 0 0 25px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.nav-menu li a:link, li a:visited{
	font-family:"Quicksand", "Helvetica Neue", sans-serif;
	font-size:14px;
	font-weight: 500;
	display: inline;
    color:#fff;
	text-decoration: none;
}
.nav-menu li a:hover{
    color:#000;
	text-decoration: none;
}
.header-wrapper.active .nav-menu li a:hover{
    color: #7FB8F0;
}

/* ------------------------------------------- 

        Mobile Styling 

---------------------------------------------- */
@media screen and (max-width: 600px) {
.nav-menu-wrapper{
	display: inline-block;
	float: left;
	width: 50%;
	height: auto;
	margin: 5px 0 0 0;
}
.nav-menu h1 {
  display: block;
  color:#FFF;
  font-size:25px;
	font-weight: normal;
  -webkit-font-smoothing: antialiased;
	margin: 0 0 10px 0;
}
.nav-menu ul{
	float: left;
	width: 100%;
}
.nav-menu li{	
	display: inline-block;
	font-size:16px;
    color:#888;
	float: left;
	width: 100%;
	list-style: none;
	padding: 10px 0 10px 0;
}
.nav-menu li a:link, .nav-menu li a:visited{
    color:#888;
	text-decoration: none;
	font-weight: normal;
}
.nav-menu li a:hover{
    color:#fff;
	text-decoration: none;
}

.nav-menu {
  position: fixed;
  background:#181818;
  color:#FFF;
  right: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 70px 5% 0 8%;
  transition: right 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  overflow: hidden;
  box-sizing: border-box;
  z-index: 4000;
}

#toggle {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {
  position:absolute;
  right: 20px;
  cursor:pointer;
  width: 50px;
  height: 23px;
  color: #FFF;
  margin: 0;
  transition:all 500ms ease;
  background-image: url(../img/menu-trigger-white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
}
#toggle + label:after {
}

.container {
  transition: margin 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#toggle:checked ~ .nav-menu {
  right: 0;
}

#toggle:checked ~ .container {
  margin-right: 250px;
}

#toggle:checked + label {
  width: 50px;
  height: 23px;
  background-image: url(../img/menu-trigger-white-close.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
		z-index: 10000;
	margin: 10px 0 0 0;
}

#toggle:checked + label:after {
}
}
