nav {
  ul.navLinks {
    @include margin-right(19px);
    #country, #product, #explore, #publications, #api {
      a {
        @include padding(25px, 10px, 25px, 10px);
      }
    }
  }
}

ul.navLinks {
  @include font-smoothing(antialiased);
  @include flex();
  list-style: none;

  li {
    font-family: $montserrat;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    opacity: 0.7;
    @include padding(5px, 10px, 5px, 10px);
    position: relative;
    text-transform: uppercase;

    &.active {
      opacity: 1;
    }

    &:hover {
      cursor: pointer;
      opacity: 1;
    }

    a {
      color: white;
    }

    .sub_menu {
      background-color: $darkbackground;
      display: none;
      @include left(-5px);
      @include padding(0, 0, 5px, 5px);
      position: absolute;
      top: 25px;
      width: 180%;
      z-index: 1000;

      &.open {
        display: block;
      }

      ul {
        display: block;

        li {
          display: block;
          font-size: 11px;
          @include padding(5px, 10px, 5px, 10px);

          &:hover {
            opacity: 0.9;
          }

          &:hover:before {
            @include ltr {
              content: unicode("f0da");
            }
            @include rtl {
              content: unicode("f0d9");
            }
            font-family: FontAwesome;
            opacity: 0.4;
            position: absolute;
            margin-top: 2px;
            @include margin-left(-10px);
          }

          &.active:before {
            @include ltr {
              content: unicode("f0da");
            }
            @include rtl {
              content: unicode("f0d9");
            }
            font-family: FontAwesome;
            position: absolute;
            margin-top: 2px;
            @include margin-left(-10px);
          }
        }

      }

    }

  }

}

#logo {
  // color: white;
  // font-family: $open-sans;
  // font-size: 25px;
  // font-weight: 800;
  @include margin(0px, 0px, 0px, 0px);
  @include padding(5px, 0, 5px, 0);
  position: relative;
  @include left(17px);
  text-decoration: none;

  @media all and (max-width: 950px) {
    @include left(0);
  }

}

nav {
  @include flex();
  @include flex-direction(row);
  @include justify(space-between);
  @include align-items(center);
  background-color: $darkbackground;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
  @include padding(15px, 0, 15px, 0);

  .navLinks {
    @include flex-direction(row);

    @media all and (max-width: 950px) {
      display: none !important;
    }

  }

  #search_button {
    cursor: pointer;
    @include margin(-15px, 0, -15px, 0);
    @include padding(15px, 15px, 15px, 15px);

    img {
      @include transition(opacity 0.1s, transform 0.5s);
      opacity: 0.7;
      height: 22px;
      width: 22px;
    }

    :hover {
      cursor: pointer;
      opacity: 1;
    }

    &.open img {
      @include transform(rotate(180deg));
    }

  }

}

#mobileNav {
  @include transition(left 0.25s 0.2s, right 0.25s 0.2s);
  background-color: $l2-darkbackground;
  bottom: 0;
  display: block;
  // height: 100vh;
  @include left(-$mobileNav);
  overflow-y: scroll;
  position: fixed;
  top: 0;
  width: $mobileNav;
  z-index: 31;

  &.open {
    @include left(0);
  }

  .navLinks {
    @include flex-direction(column);
    @include padding(16px, 14px, 70px, 40px);

    li {
      @include margin(3px, 0, 3px, 0);

      .sub_menu {
        background-color: transparent;
        display: block;
        @include margin(10px, 0, 0, 0);
        padding-bottom: 0;
        position: static;
        width: auto;

        ul > li {
          @include margin(2px, 0, 2px, 0);
        }

        li:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
        }

      }

      a:focus:after, a:active:after {
        @include animation(spin-right 1.5s linear infinite);
        content: "";
        background-repeat: no-repeat;
        background-image: url("/static/img/nav/spinner.png");
        background-size: cover;
        display: inline-block;
        cursor: pointer;
        @include margin-left(7px);
        top: 1px;
        width: 12px;
        height: 12px;
        position: relative;
      }

    }

  }

  .modal_close {
    cursor: pointer;
    display: block;
    @include margin(-15px, 0, -15px, 0);
    @include padding(15px, 15px, 15px, 15px);
    position: absolute;
    top: 23px;
    width: 17px;

    img {
      @include transition(opacity 0.1s, transform 0.5s 0.1s);
      @include transform(rotate(-180deg));
      opacity: 1;
      height: 16px;
      width: 16px;

      &:hover, &:focus {
        opacity: 0.7;
      }
    }
  }

  &.open .modal_close img {
    @include transform(rotate(180deg));
  }

}
