nav {
font-family: "Open Sans", gotham, arial, helvetica, san-serif;
font-weight: 600;
font-size: 100%;
margin: -10px 0 0 0;
padding: 15px 2% 5px 2%;
background-color: #634666;
grid-column: 1 / -1;
grid-row: 1 / 2;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: block;
float: left;
background-color: #634666;
}
nav a {
display: inline-block;
margin: 5px 3px 1px 3px;
padding: 5px 15px;
color: #000;
background-color: #89688c;
font-size: 100%;
text-decoration: none; 
}
nav a:hover { 
color: #D7D4B7;
padding: 5px 15px;
text-decoration: none;
background-color: #98656E;
}
nav li:hover { 
color: #D7D4B7; 
}
li > a:after { 
content: none; 
}
.toggle, [id^=drop] {
display: none;
}
li > a:only-child:after 
{ content: ''; 
}


@media all and (max-width : 900px) {
nav { 
margin: -6px 0 0 0;
}	
	
}
	
@media all and (max-width : 600px) {

nav { 
margin: 0;
padding-top: 14px;
}
.toggle + a,
.menu { 
display: none; 
}
.toggle {
text-align: left;
display: block;
background-color: #89688c;
padding: 2px 5%;
color: #D7D4B7;
font-size: 100%;
line-height: 30px;
text-decoration: none;
border: none;
margin: 10px 0;
}
.toggle:hover { 
background-color: #98656E; 
}
[id^=drop]:checked + ul { 
display: block; 
}
nav ul li {
display: block;
width: 94%;
}
nav ul .toggle,
nav ul a { 
text-align: left;
padding: 5px 5%; 
line-height: 27px;
width: 94%;
}
nav ul .toggle,
nav ul a:hover { 
text-align: left;
padding: 5px 5%; 
line-height: 27px;
}
nav a:hover { background-color: #98656E;}

}