.navigation-wrapper {
  display: block;
  width: 100%;
  background: rgb(255, 255, 255); /* The Fallback */
  background: rgba(255, 255, 255, 0.7);
}

.no-js #my-main-menu {
  display: none;
}

.title-bar {
  padding: 0.5rem;
  background: #fff;
  color: #333;
}

.menu-icon::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: #fefefe;
  box-shadow: 0 10px 0 #ccc, 0 25px 0 #ccc;
  content: '';
}

i.fa-bars {
  color: #666;
  margin-top: 10px;
}
i.fa-bars:hover {
  color: #000;
  cursor: pointer;
}

.logo {
  max-height: 90px;
  height: auto;
  width: auto;
  padding: 5px 0;
}

.navigation li a {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  color: #333;
}

@media screen and (max-width: 63.99em) {
  
  #my-main-menu li a {
    border-bottom: solid 1px #ddd;
  }
  #my-main-menu li li a {
    border: none;
  }
  #my-main-menu li li a {
    border: none;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media screen and (min-width: 40em) {
  
  i.fa-bars {
    margin-top: 20px;
  }
}

/* Large and up - min 1024px */
@media screen and (min-width: 64em) {
  
  .no-js .title-bar {
    display: none;
  }
  
  /* CSS TRANISTIONS are used to make the HEIGHT of the navigation bar and
  certain elements within it change on scroll. the trigger is a JS function that
  adds or removes a class of 'shrink'. */
    
  .navigation-wrapper {
    display:  block;
    position: fixed;
    z-index: 1000;
    height: 95px;
    background: rgba(255, 255, 255, 0.7);
    border-bottom: solid 1px rgba(255, 255, 255, 0);
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
  }
  /* Toggle used by JS to animate the size of the navigation bar */
  .navigation-wrapper.shrink {
    height: 60px;
    background: rgba(255, 255, 255, 1.0);
    border-bottom: solid 1px rgba(200, 200, 200, 1);
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
  }
  
  .logo {
    height: 65px;
    padding: 5px 0;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
  }
  
  /* Toggle used by JS to animate the size of the navigation bar */
  .navigation-wrapper.shrink .logo{
    height: 60px;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
  }
  .navigation #my-main-menu {
    float: right;
    height: 100%;
  }
  
  .navigation  ul > li {
    height: 95px;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
  }
  /* Toggle used by JS to animate the size of the navigation bar */
  .navigation-wrapper.shrink .navigation  ul > li {
    height: 59px;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
  }
  
  .navigation  ul > li > ul > li {
    height: auto;
  }
  .navigation-wrapper.shrink .navigation  ul > li ul > li {
    height: auto;
  }
  .navigation .menu > li > a {
    padding-top: 2rem;
    padding-bottom: 2rem; 
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    /* With EDGE, the submenu seems to start from the <a> rather than the <li>, so it covers up some of the navigation bar on hover */
    /* So set the vertical padding of the <a> to bit larger (but not to be larger than the <li>) and animate */
  }
  /* Toggle used by JS to animate the size of the navigation bar */
  .navigation-wrapper.shrink .navigation  .menu > li > a {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    -moz-transition-duration: padding-top 0.2s;
    -o-transition-duration: padding-top 0.2s;
    -webkit-transition-duration: padding-top 0.2s;
    transition-duration: padding-top 0.2s;
  }
  /* Keep submenu padding not ridiculous :) */
  ul.submenu li a {
    padding:  0.8rem 1.5rem !important;
  }
  
  .is-dropdown-submenu {
    min-width: 300px;
  }
  .navigation .menu > li.active {
    background: #fff;
  }
  .navigation .menu > li.active a {
    background: transparent;
    color: #333;
  }
  .navigation-wrapper.shrink .navigation nav li.active {
    background: #eee;
  }
 
}

@media screen and (min-width: 74em) {
  
  .logo {
    height: 90px;
  }
  
  .navigation li a {
    font-size: 1.2rem;
  }
  
  .navigation .menu > li > a {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
}