nav a {
  color: #656565;
  display: block;
  padding: .5rem;
  flex-grow: 0;
  text-align: left;
  text-transform: uppercase; }
  nav a.active {
    color: #4f4f4f;
    font-weight: bold; }
  nav a:hover {
    color: #DC3545;
    text-decoration: none; }
  nav a.active:hover {
    color: #4f4f4f; }

nav .navbar-brand {
  color: #333333;
  font-size: 2.5rem;
  text-transform: lowercase; }

@media screen and (max-width: 767px) {
  nav .menuToggle {
    display: block;
    position: relative;
    z-index: 1;
    /*
       * Transform all the slices of hamburger
       * into a crossmark.
       */
    /*
       * And let's slide it in from the left
       */ }
    nav .menuToggle input {
      cursor: pointer;
      display: block;
      height: 32px;
      left: -5px;
      opacity: 0;
      position: absolute;
      top: -7px;
      width: 40px;
      z-index: 2; }
    nav .menuToggle span {
      background: #000000;
      border-radius: 3px;
      display: block;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      width: 33px;
      z-index: 1;
      transform-origin: 4px 0px;
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; }
      nav .menuToggle span:first-child {
        transform-origin: 0% 0%; }
      nav .menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%; }
    nav .menuToggle input:checked ~ span {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: #000000; }
      nav .menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2); }
      nav .menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px); }
    nav .menuToggle input:checked ~ .menu {
      transform: none;
      visibility: visible; }
    nav .menuToggle .menu {
      background: #ffffff;
      height: 100%;
      left: 0px;
      list-style-type: none;
      margin: 0;
      padding: 50px;
      padding-top: 125px;
      position: fixed;
      top: 0px;
      visibility: hidden;
      width: 100%;
      -webkit-font-smoothing: antialiased;
      /* to stop flickering of text in safari */
      transform-origin: 0% 0%;
      transform: translate(100%, 0);
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }
      nav .menuToggle .menu a {
        font-size: 22px;
        padding: 10px 0; } }

@media screen and (min-width: 768px) {
  nav .menuToggle input {
    display: none;
    visibility: hidden; }
  nav .menuToggle .menu {
    display: flex; }
    nav .menuToggle .menu .home {
      display: none;
      visibility: hidden; } }