.nav-wrap {
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 10;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}
.nav-wrap.dark {
  background-color: rgba(0, 0, 0, 0.9);
}
.nav {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  max-width: 1600px;
}
.nav:before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 100vw;
  height: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.nav:after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 100vw;
  height: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.burger {
  position: absolute;
  left: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: #fff;
  width: 24px;
  height: 2px;
  cursor: pointer;
  display: none;
  -webkit-transition: width 0.3s, background 0.3s;
  transition: width 0.3s, background 0.3s;
}
.burger:after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 24px;
  height: 2px;
  border-top: 2px solid #fff;
  padding-bottom: 5px;;
  -webkit-transition: bottom 0.3s, -webkit-transform 0.3s;;
  transition: bottom 0.3s, -webkit-transform 0.3s;;
  transition: transform 0.3s, bottom 0.3s;;
  transition: transform 0.3s, bottom 0.3s, -webkit-transform 0.3s;
}
.burger:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 24px;
  height: 2px;
  padding-bottom: 5px;
  border-bottom: 2px solid #fff;
  -webkit-transition: top 0.3s, -webkit-transform 0.3s;
  transition: top 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, top 0.3s;
  transition: transform 0.3s, top 0.3s, -webkit-transform 0.3s;
}
.burger.active {
  width: 1px;
  background-color: rgba(255, 255, 255, 0)
}
.burger.active:after {
  -webkit-transform: rotate(45deg) translate(5px, 6px);
          transform: rotate(45deg) translate(5px, 6px);
}
.burger.active:before {
  -webkit-transform: rotate(-45deg) translate(5px, -6px);
          transform: rotate(-45deg) translate(5px, -6px);
}
.nav__logo-wrap {
  position: absolute;
  height: 30px;
  width: 200px;
  left: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
}
.nav__logo {
  width: 100%;
  height: 100%;
}
.nav__links {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style-type: none;
  height: 100%;
}
.nav__link {
  font: 700 1.6rem/2rem 'SourceSansPro';
  margin: 0 30px 0 0;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  padding: 20px 0;
}
.nav__link:hover:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--green);
}
.nav__link a.is-active:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--green);
}

@media only screen and (max-width: 1206px) {
  .nav__logo-wrap {
    width: 150px;
  }
}

@media only screen and (max-width: 1024px) {
  .nav__links {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0 0 0 150px;
  }
}

@media only screen and (max-width: 870px) {
  .nav__logo-wrap {
    width: 125px;
  }
}

@media only screen and (max-width: 768px) {
  .nav__links {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding: 0;
  }
}

@media only screen and (max-width: 767px) {
  .burger {
    display: block;
  }
  .nav__logo-wrap {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 200px;
  }
  .nav__links {
    background-color: var(--dark-gray);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    top: 100%;
    padding-top: 40px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    height: calc(100vh - 60px);
    width: 100%;
    -webkit-transition: -webkit-transform 0.7s;
    transition: -webkit-transform 0.7s;
    transition: transform 0.7s;
    transition: transform 0.7s, -webkit-transform 0.7s;
  }
  .nav__links.active {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  .nav__link {
    margin: 0;
    background-color: var(--dark-gray);
    padding: 20px 80px 20px 40px;
  }
  .nav__link:hover {
    background-color: #1d262e;
  }
  .nav__link:hover:after,
  .nav__link a.is-active:after{
    display: none;
  }
}

@media only screen and (max-width: 320px) {
  .nav__logo-wrap {
    width: 150px;
  }
}