.toggle,
[id^=drop] {
  display: none;
}
nav { 
  margin: 0;
  padding: 0;
  background: linear-gradient(rgba(76, 76, 76, 1) 20%,rgba(0, 0, 0, 1) 80%);
  width: 100%;
  height: 60px;
  text-align: center;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
  display: inline-block;
  padding: 0;
  bottom: 0px; 
  border-right: 1px solid rgba(108, 108, 108, 1);
  margin: 0;  
  list-style: none;
  position: relative;
}
nav ul li {
  margin: 0px;
  height: 60px;
  box-sizing: content-box;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(rgba(76, 76, 76, 1) 20%,rgba(0, 0, 0, 1) 80%); 
  display: inline-block;
  float: left;
}
nav ul li a {
  border-left: 1px solid rgba(108, 108, 108, 1);
}
nav a {	
  display: block;
  padding: 21px 20px;
  line-height: normal;	
  color: rgba(255, 255, 255, 1); 
  font-size: 15px;
  text-decoration: none;
}
nav ul li ul li a:hover {    
  background: linear-gradient(rgba(27, 27, 255, 1) 20%,rgba(0, 0, 128, 1) 80%);
}
nav a:hover { 
  background: linear-gradient(rgba(27, 27, 255, 1) 20%,rgba(0, 0, 128, 1) 80%);
}
.wrapper {
  background: linear-gradient(rgba(76, 76, 76, 1) 20%,rgba(0, 0, 0, 1) 80%);
  width: 100%;
  position: relative;
}
nav ul ul {
  display: none;
  width: 234px;
  position: absolute; 
  top: 60px; 
}
nav ul li:hover > ul {
  display: inherit;
}
nav ul ul li {
  width: 234px;
  float: none;
  overflow: visible;
  height: auto;
  display: list-item;
  position: relative;
}
nav ul ul li a {
  border-style: none;
  box-shadow: inset 1px 0px 0px 0px rgba(108, 108, 108, 1) , inset -1px 0px 0px 0px rgba(108, 108, 108, 1);
}
nav ul ul ul li a {
  box-shadow: 1px 0px 0px 0px rgba(108, 108, 108, 1) , -1px 0px 0px 0px rgba(108, 108, 108, 1);
}
nav ul ul ul li  {
 position: relative; 
 top: -60px;
 width: 232px;
 left: 234px; 
}
li > a:after { 
  content:  ' +';
}
li > a:only-child:after { 
  content: '';
}

/* Media Queries
--------------------------------------------- */

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

nav {
  margin: 0;
  text-align: right;
  height: auto;
}
.toggle + a,
	.menu {
  display: none;
}
.toggle {
  display: block;
  padding: 20px 20px;	
  line-height: normal;	
  background: linear-gradient(rgba(76, 76, 76, 1) 20%,rgba(0, 0, 0, 1) 80%);
  color: rgba(255, 255, 255, 1);
  font-size: 15px;
  text-decoration: none;
  border: none;
}
.toggle:hover { 
  background: linear-gradient(rgba(76, 76, 76, 1) 20%,rgba(0, 0, 0, 1) 80%);
}
[id^=drop]:checked + ul { 
  display: block; 
  width: 100%;
}
nav ul {
  border-style: none;
}
nav ul li a {
  border-style: none;
}
nav ul li {
  width: 100%;
  display: block;
  height: auto;
  background: linear-gradient(rgba(76, 76, 76, 1) 20%,rgba(0, 0, 0, 1) 80%);
}
nav a:hover,
 nav ul ul ul a {
  background: linear-gradient(rgba(76, 76, 76, 1) 20%,rgba(0, 0, 0, 1) 80%);
}
nav ul ul a:hover {
   background: linear-gradient(rgba(27, 27, 255, 1) 20%,rgba(0, 0, 128, 1) 80%);
}
 nav ul ul ul a {
   background: linear-gradient(rgba(27, 27, 255, 1) 20%,rgba(0, 0, 128, 1) 80%);
}
nav ul li ul li .toggle,
 nav ul ul a {     
  background: linear-gradient(rgba(27, 27, 255, 1) 20%,rgba(0, 0, 128, 1) 80%);
}
nav ul ul {
  float: none;
  position: static;
  color: rgba(255, 255, 255, 1);
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { 
  display: none;
}
nav ul ul li:hover .toggle {
  background: linear-gradient(rgba(27, 27, 255, 1) 20%,rgba(0, 0, 128, 1) 80%);
}
nav ul ul ul li a { 
  background: linear-gradient(rgba(108, 108, 108, 1) 20%,rgba(32,32,32,1) 80%);
  box-shadow: none;
}
nav ul ul li a {
  box-shadow: none;
}
nav ul ul ul li a:hover {
  background: linear-gradient(rgba(108, 108, 108, 1) 20%,rgba(32,32,32,1) 80%);
}
nav ul ul ul li { 
  position: static;
  width: 100%;
}
nav ul ul li  {
  width: 100%;
}
nav a {
  height: auto;
}
}
@media all and (max-width: 176px) {
.toggle + a {
  font-size: 12px;
}
nav a {
  font-size: 12px;
}
nav ul li ul li a {
  font-size: 12px;
}
.toggle {
  font-size: 12px;
}
}