.menu {
  margin: 0 auto;
  padding: 50px 0;
  font-family: Raleway;
}


.menu ul {
  list-style: none;
  text-align: center;
}

.menu ul li {
  display: inline-block;
}

.menu ul li a {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  margin: 0 10px;
}

.menu ul li a,
.menu ul li a:after,
.menu ul li a:before {
  transition: all .5s;
}


.menu ul li a {
  position: relative;
}

.menu ul li a:after {
  position: absolute;
  bottom: 5;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #fff;
  height: 1px;
}

.menu ul li a:hover:after {
  width: 100%;
}

.menu ul li a.current-link:after {
  position: absolute;
  bottom: 5;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  content: '.';
  color: transparent;
  background: #fff;
  height: 1px;
}

@media only screen and (hover: none) and (pointer: coarse) {
  .menu {
    display: none;
  }
}

@media only screen and (max-width: 750px) {
  .menu {
    display: none;
  }
}

/*burger*/

@media(hover: hover) and (pointer: fine) {
  .burger {
    display: none;
  }
}

@media only screen and (max-width: 750px) {
  .burger {
    display: block;
  }
}

#toggle {
  display: none;
}

/**
    Hamburger
  **/
.hamburger {
  position: absolute;
  top: 5em;
  right: 10%;
  margin-left: -2em;
  margin-top: -50px;
  width: 2em;
  height: 45px;
  z-index: 5;
}

.hamburger div {
  position: relative;
  width: 4em;
  height: 9px;
  border-radius: 3px;
  background-color: #fff;
  margin-top: 10px;
  transition: all 0.3s ease-in-out;
}

/**
Nav Styles
**/
.nav {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  top: -100%;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  transform: scale(0);
  z-index: 50;
}

.nav-wrapper {
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  height: 100%;
  align-items: center;
  font-family: Raleway;
  text-align: center;
}

.nav nav {
  text-align: center;
  margin-top: 30%;
}

.nav nav a {
  position: relative;
  text-decoration: none;
  color: #fff;
  font-size: 8vw;
  display: inline-block;
  margin-top: 1em;
}

.nav nav a:hover {
  color: white;
}

.nav nav a:hover:before {
  height: 100%;
}

/**
Animations
**/
#toggle:checked+.hamburger .top-bun {
  transform: rotate(-45deg);
  margin-top: 25px;
}

#toggle:checked+.hamburger .bottom-bun {
  opacity: 0;
  transform: rotate(45deg);
}

#toggle:checked+.hamburger .meat {
  transform: rotate(45deg);
  margin-top: -7px;
}

#toggle:checked+.hamburger+.nav {
  top: 100;
  transform: scale(1);
}

.nav nav a.current-link:after {
  position: absolute;
  bottom: 5;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  content: '.';
  color: transparent;
  background: #fff;
  height: 1px;
}

#nav-button {
  text-align: center;
  margin-top: 12rem;
}