nav {
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-weight: 700;
margin: 0;
padding: 15px 2% 5px 2%;
background-color: #625D97;
grid-column: 1 / -1;
grid-row: 2 / 3;
}
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: inline-block;
float: left;
background-color: #625D97;
}
nav a {
display: block;
margin: 0 10px;
padding-bottom: 2px;
color: #000;
font-size: 100%;
text-decoration: none;
border-bottom: solid #625D97 7px;
}
nav a:hover { 
color: #FFF;
text-decoration: none;
border-bottom: solid #8792DB 7px;
}
nav li:hover { 
color: #FFF; 
}
li > a:after { 
content: none; 
}
.toggle, [id^=drop] {
display: none;
}
li > a:only-child:after 
{ content: ''; 
}


@media all and (max-width : 625px) {

nav 
{ margin: 0; 
}
.toggle + a,
.menu { 
display: none; 
}
.toggle {
text-align: left;
display: block;
background-color: #625D97;
padding: 0 5%;
color: #000;
font-size: 100%;
line-height: 30px;
text-decoration: none;
border: none;
}
.toggle:hover { 
background-color: #625D97; 
}
[id^=drop]:checked + ul { 
display: block; 
}
nav ul li {
display: block;
width: 100%;
}
nav ul .toggle,
nav ul a { 
text-align: right;
padding: 5px 5%; 
line-height: 27px;
}
nav ul .toggle,
nav ul a:hover { 
text-align: right;
padding: 5px 5%; 
line-height: 27px;
border-bottom: solid #4e4a78 2px;
}
nav a:hover { background-color: #4e4a78;}
nav li:hover { background: #4e4a78;}
}