/* nav section
============================== */

.site-nav {
  position: absolute;
  top: 7vh;
  iright: 0%;
  transition: all ease-in-out 750ms;
  iclip-path: circle(0px at top right);
  z-index: 102;
  display: none;
  box-shadow: -5px 5px 5px rgba(0,0,0, 0.6);
}

.site-nav--open {
  iclip-path: circle(200% at top right);
  transition: all ease-in-out 750ms;
  display: initial;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  border-bottom: 1px solid #575766;
}

nav li:last-child {
  border-bottom: none;
}

nav a {
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  padding: 2em 1em;
  display: block;
  width: 300px;
  margin: 0 auto;
}

nav a:hover,
nav a:focus {
}

/* home of hamburger */
.menu-toggle {
  padding: 0.5em 1em;
  position: absolute;
  top: 0.5em;
  right: 0em;
  cursor: pointer;
  z-index: 101;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: white;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: ease-in-out 500ms;
}

.hamburger::before {
  transform: translateY(-7px);
}

.hamburger::after {
  transform: translateY(4px);
}

.open .hamburger {
  transform: rotate(765deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(-810deg)
}

/* SUB MENU ITEMS */

.menu-sub {
  position: absolute;
  top: 0em;
  right: 0em;
  transition: clip-path ease-in-out 750ms;
  clip-path: inset(50% 0% 50% 0%);
  padding: 0;
  margin-top: 0;
}

.menu-sub--open {
  clip-path: inset(0% 0% 0% 0%);
}

.menu-sub li {
  display: block;
  border-bottom: 1px solid grey;
}

.menu-sub a,
.menu-back {
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  padding: 2em 0;
  display: block;
  cursor: pointer;
  width: 300px;
  margin: 0 auto;
}

.menu-sub a:hover,
.menu-back:hover {
  color: black;
}

@media (min-width: 60rem) {

  .site-nav {
    imax-width: 54vw;
    height: auto;
    position: relative;
    margin-top: -2em;
    float: right;
    display: inline-block;
    margin: 0 auto;
    top: 25%;
    vertical-align: text-top;
    clip-path: initial;
    box-shadow: initial;
  }

  nav li {
    display: inline-block;
    border-left: none;
    border-bottom: none;
    height: 2em;
    padding: 0 10px;
  }

  nav li:first-child {
    border-left: none;
  }

  nav a {
    padding: 0;
    font-size: 1.2em;
    width: initial;
    margin: initial;
  }

  nav a:link,
  nav a:visited {
    background: transparent;
  }

  nav a:hover,
  nav a:active {
    color: #f05536;
  }

  .menu-toggle {
    display: none;
  }

  .menu-sub {
    position: absolute;
    padding: 0.5em 0;
    right: 13em;
    top: 1.3em;
    height: 151px;
    overflow: hidden;
  }

  nav li:hover .menu-sub {
    clip-path: circle(150% at top right);
  }

  .menu-sub li {
    display: block;
    margin: 1em 0;
    border-bottom: 1px solid grey;
  }

  .menu-sub a,
  .menu-back {
    font-weight: 200;
    font-size: 1em;
    padding: 0em 0em;
    width: initial;
    margin: initial;
  }

  .menu-back {
    visibility: hidden;
  }

  .menu-sub a:hover {
  }
}