.toggle, [id^=drop] {
  display: none;
}
#drop_menu{
  position: relative;
  display: block;
  z-index: 1;
}
/* Giving a background-color to the nav container. */

nav {
  margin: 0;
  padding: 0;
  text-align: center;
  margin-top: -120px;
  height: 42px;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */

nav ul {
  float: none;
  padding: 0;
  margin-top: -12px;
  list-style: none;
  position: relative;
}
/* Positioning the navigation items inline */

nav ul li {
  margin: 0px;
  display: inline-block;
  float: none;

}
/* Styling the links */

nav a {
  display: block;
  padding: 20px;
  color:  #6BA0FA;
  font-weight: bold;
  font-size: 17px;
  text-decoration: none;
}
nav a:hover {
  color: snow;
  text-shadow: 0 1px 0 rgba(0, 255, 230, 0.4);
  background-color: ;
  text-decoration: none;
}
nav a:active {
  color: snow;
  text-shadow: 0 1px 0 rgba(0, 255, 230, 0.4);
  background-color: ;
  text-decoration: none;
}
/* Hide Dropdowns by Default
 * and giving it a position of absolute */

nav ul ul {
  display: none;
  padding: 0;
  position: absolute;
  /* has to be the same number as the "line-height" of "nav a" */

  top: 60px;
}
/* Fisrt Tier Dropdown */

nav ul ul li {
  width: 100%;
  float: none;
  display: list-item;
  position: relative;
  font-size: 52px;
}
/* Media Queries
--------------------------------------------- */

@media all and (max-device-width: 768px) {
  #drop_menu{
    margin-top: -80px;
  }
  nav {
    margin: 0;
  }
  nav a{
    font-size: 22px;
  }
  /* Hide the navigation menu by default */
  /* Also hide the  */

  .toggle + a,
  .menu {
    display: none;
    background-color: rgba(0, 0, 0, 0.75);
  }
  /* Stylinf the toggle lable */

  .toggle {
    display: block;
    background-color: ;
    margin-top: -10px;
    padding: 14px 20px;
    color:  #6BA0FA;
    font-size: 22px;
    text-decoration: none;
    border: none;
  }
  .toggle:hover {
    background-color: ;
    color: snow;
    text-shadow: 0 1px 0 rgba(0, 255, 230, 0.4);
  }

  /* Display Dropdown when clicked on Parent Lable */

  [id^=drop]:checked + ul {
    display: block;
  }
  /* Change menu item's width to 100% */

  nav ul li {
    margin-top: -14px;
    display: block;
    width: 100%;
  }
  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }
  nav ul ul ul a {
    padding: 0 80px;
  }
  nav a:hover,
  nav ul ul ul a {
    background-color: ;
  }
  nav ul li ul li .toggle,
  nav ul ul a,
  nav ul ul ul a {
    padding: 14px 20px;
    color: snow;
    font-size: 22px;
  }
  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: #212121;
  }
  /* Hide Dropdowns by Default */

  nav ul ul {
    float: none;
    position: static;
    color: snow;
    /* has to be the same number as the "line-height" of "nav a" */
  }
  /* Hide menus on hover */

  nav ul ul li:hover > ul,
  nav ul li:hover > ul {
    display: none;
  }
  /* Fisrt Tier Dropdown */

  nav ul ul li {
    display: block;
    text-align: center
    width: 100%;
  }
  nav ul ul ul li {
    position: static;
    /* has to be the same number as the "width" of "nav ul ul li" */
  }
}

@media all and (max-device-width: 1064px) {
  nav ul li {
    display: block;
    width: 100%;
  }
}
