@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap');
* {
      box-sizing: border-box;
}

html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
}

.mob-nav-wrapper {
      display: none;
}

path {
      fill: none;
      stroke: #FFF;
      stroke-width: 1px;
      stroke-linejoin: round;
}

#nav_menu {
      margin: 0;
      padding: 0;
      width: 100%;
      font-family: 'Open Sans Condensed', sans-serif;
      position: fixed;
      z-index: 1;
      background-color: black;
      mix-blend-mode: difference;
      transition: top 0.3s;
      top: 0;
      display: block;
}

.menu_home {
      float: left;
      padding: 8px;
      margin-left: 16px;
      margin-top: 8px;
      color: white;
      font-family: 'Open Sans Condensed', sans-serif;
      text-transform: uppercase;
      font-size: 15px;
      letter-spacing: 1.8px;
      font-weight: 700;
      text-decoration: none;
}

#nav_menu ul {
      float: right;
      margin-right: 24px;
}

#nav_menu ul li {
      display: inline-block;
      float: left;
}

#nav_menu ul li > a {
      position: relative;
      color: white;
      text-decoration: none;
}

#nav_menu ul li a {
      display: inline-block;
      outline: none;
      color: white;
      text-transform: uppercase;
      text-decoration: none;
      font-size: 13px;
      letter-spacing: 1.8px;
      font-weight: 600;
      margin-left: 10px;
      margin-right: 10px;
      padding-top: 2px;
      padding-bottom: 7px;
}

#nav_menu ul li > a:hover {
      color: white;
}

#nav_menu ul li > a:before {
      content: "";
      position: absolute;
      width: 65%;
      height: 3px;
      bottom: 0;
      left: 0;
      background-color: white;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      -webkit-transform-origin: left;
      transform: scaleX(0);
      transform-origin: left;
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
}

#nav_menu ul li > a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
}

@media screen and (max-width: 900px) {

      #nav_menu {
            display: none;
      }

      .active::after {
            content: "";
            position: absolute;
            width: 65%;
            height: 3px;
            bottom: 0;
            left: 0;
            background-color: #BBB;
            visibility: visible;
            -webkit-transform: scaleX(1);
            -webkit-transform-origin: left;
            transform: scaleX(1);
            transform-origin: left;
            -webkit-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
      }
      
      .active:a:before {
            visibility: visible;
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
      }

      .mob-nav-wrapper {
            display: block;
            margin: 0;
            padding: 6px;
            width: 100%;
            font-family: 'Open Sans Condensed', sans-serif;
            position: fixed;
            overflow: hidden;
            background-color: black;
            mix-blend-mode: difference;
      }

      .mob-nav-wrapper ul li a img {
            width: 22px;
            height: 22px;
            filter: invert(1);
      }

      .mob-nav-wrapper ul {
            float: right;
            width: 100%;
            margin-block-start: 0em;
            margin-block-end: 0em;
            padding-inline-start: 0px;
      }

      .mob-nav-wrapper ul li {
            display: inline-block;
            width: 15%;
            margin-left: 0px;
            margin-right: 0px;
      }

      .mob-nav-wrapper ul li a {
            display: inline-block;
            outline: none;
            color: white;
            text-decoration: none;
            margin-left: 10px;
            margin-right: 10px;
            padding-bottom: 7px;
            font-family: 'Open Sans Condensed', sans-serif;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 1.8px;
            font-weight: 700;
      }

      .mob-nav-wrapper ul li > a {
            position: relative;
            color: white;
            text-decoration: none;
      }
      
      .mob-nav-wrapper ul li > a:before {
            content: "";
            position: absolute;
            width: 65%;
            height: 3px;
            bottom: 0;
            left: 0;
            background-color: #BBB;
            visibility: hidden;
            -webkit-transform: scaleX(0);
            -webkit-transform-origin: left;
            transform: scaleX(0);
            transform-origin: left;
            -webkit-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
      }
      
      .mob-nav-wrapper ul li > a:hover:before {
            visibility: visible;
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
      }
      
      .mob-nav-wrapper ul {
            float: right;
      }
      
      .mob-nav-wrapper ul li {
            display: inline-block;
            float: none;
      }
}