nav.css

nav{
	width: 100%;
	background-color: #FCFAFF;
	float: left;
	padding: 0 10%;
	z-index: 99;
	display: flex;
	position: fixed;
 align-items: center;
 align-content: center;
 font-family: sans-serif;
 transition-duration: 0.3s;

 
}
nav.mobile{
	display: none;
}
nav.mobile #nav-icon{
	
	width: 30px;
  height: 30px;
  position: relative;
  margin: 0px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

nav.mobile #nav-icon span{
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #8261C9;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
	top: 0px;
  }
  
  #nav-icon span:nth-child(2) {
	top:33%;
  }
  
  #nav-icon span:nth-child(3) {
	top: 66%;
  }
  #nav-icon.open span:nth-child(1) {
	top: 33%;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
  }
  
  #nav-icon.open span:nth-child(2) {
	opacity: 0;
	left: -100%;
  }
  
  #nav-icon.open span:nth-child(3) {
	top: 33%;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
  }
  .submenu{
	  position: absolute;
	  display: flex;
	  flex-direction: column;
	  background: #FCFAFF;
	  top: 100%;
	  right: 0;
	  width: 100vw;
	  text-align: center;
	  transition-duration:0.3s;
	  opacity: 1;
  }
  #overlay{
	  
	  width: 100vw;
	  height: 100vh;
	  background: rgba(103, 89, 146, 0.3);
	  position: fixed;
	  z-index: -1;
	  transition-duration: 0.4s;
	  opacity: 0;
  }
  #overlay.show{
	  display: block;
	  opacity: 1;
	  z-index: 99;
  }
  .submenu.hide{
     right:-100%;
	 opacity: 0;

  }
nav.mobile #menu{
	display: flex;
	flex-direction: column;
	width: auto;
	text-align: right;
	align-items: flex-end;
	align-self: flex-end;
	margin-left: auto;
	margin-right: 0;
	
}

nav #logo{
	width: 10%;
	font-family: 'Ribeye Marrow','Garamond';
	display: inline-block;
	
	color: #6636CB;

}
nav div{
	float: left;
	padding: 10px 0;
}
nav:after{
	display: table;
	clear: both;
	content: '';
	float: none;
	
}


nav #menu{
	text-align: center;
	width:80%;
	margin: auto;
	padding: 0;

}


nav #menu a,nav #menu a:link,nav #menu a:visited{
	display: inline-block;
	z-index: 100;
	padding: 9px 6%;
	letter-spacing: 0.1em;
	color:rgb(84, 72, 85);
	font-weight: lighter;

	
}
nav.enlarged #menu a,nav.enlarged #menu a:link,nav.enlarged #menu a:visited{
	padding: 18px 6%;
	color: #8261C9;
	font-weight: normal;
	

}
nav.enlarged{
	font-size: 1.1em;
	
}

nav #menu a:hover{

    color:#9B99E3;
    cursor: pointer;
}
a.nav-item.current{
	text-decoration: line-through;
	color: #9B99E3 !important;
}
nav #contact{
	float: right;
}
#mail{
	
	
	text-align: right;
	margin-right: 0;
}
@media only screen and (max-width: 650px){

	nav{
	padding: 0 0 0 5%;
}
#nav-icon{
	right: 5vw;
}

nav.desktop{
	display: none;
}
nav.mobile{
	display: flex;
	padding-top: 4px;
	padding-bottom: 4px;
}
nav.mobile #logo{
	font-size:20px;
}

}
@media only screen and (max-width: 500px)
{
	nav{
	font-size: 25px;
	padding: 0 0 0 5%;
	}
	#nav-icon{
		right: 5vw;
	}
	nav #menu a,nav #menu a:link,nav #menu a:visited{
	
	padding: 10px 4%;
	letter-spacing: 2px;
	}
	nav.desktop{
		display: none;
	}
	nav.mobile{
		display: flex;
	}
	
}
@media only screen and (max-width: 300px){


	nav{
	font-size: 10px;
	}
	nav #menu a,nav #menu a:link,nav #menu a:visited{
	
	padding: 10px 2%;
	letter-spacing: 0px;
	}
	nav#logo
	{
		width: 15%;
	}

	nav #menu{
		width: 70%;
	}



}