#nav-fullscreen{
    visibility: hidden;
    position: absolute;
    left:100%;
    height:110vh;
    width:0;
    background-color:rgba(0,0,0,0.6);
    transition: 1s;
    z-index: 1;
  }
  
  #nav-fullscreen.open{
    overflow:auto;
    visibility: visible;
    position: absolute;
    left:25%;
    width: 75vw;
    padding-bottom:30px;
  }

  #nav-fullscreen.open ul{
      margin-top: 50vh;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
  }
  
  #nav-fullscreen.open li{
    height: 60px;
    width:100%;
    margin-left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    text-align: center;
  }
  
  #nav-fullscreen a{
    opacity: 0;
    line-height: 50px;
    font-size:20px;
    letter-spacing: 4px;
    font-weight:bold;
    color: white;
    text-decoration: none;
    position: relative;
    z-index: 6;

  
  }

  #nav-fullscreen.open a{
      visibility: visible;
      opacity:1;
      transition-delay: 1s;
      transition-duration:1s;
  }
  
  #nav-toggle{
    position: absolute;
    right:7%;
    top: 33px;
  }

  .navicon-button {
    display: inline-block;
    position: relative;
    padding: 2.0625rem 1.5rem;
    transition: 0.25s;
    cursor: pointer;
    user-select: none;
    opacity: .8;
    z-index: 999;
  }
  .navicon-button .navicon:before, .navicon-button .navicon:after {
    transition: 0.25s;
  }
  .navicon-button:hover {
    transition: 0.5s;
    opacity: 1;
  }
  .navicon-button:hover .navicon:before, .navicon-button:hover .navicon:after {
    transition: 0.25s;
  }
  .navicon-button:hover .navicon:before {
    top: .825rem;
  }
  .navicon-button:hover .navicon:after {
    top: -.825rem;
  }
  
  .navicon {
    position: relative;
    width: 1.25em;
    height: .2125rem;
    background: white;
    transition: 0.5s;
    border-radius: 2.5rem;
    z-index: 7;
  }
  .navicon:before, .navicon:after {
    display: block;
    content: "";
    height: .2125rem;
    width: 1.25rem;
    background: white;
    position: absolute;
    transition: 0.5s 0.25s;
    border-radius: 1rem;
    z-index: 7;
  }
  .navicon:before {
    top: .425rem;
  }
  .navicon:after {
    top: -.425rem;
  }
  
  .open:not(.steps) .navicon:before,
  .open:not(.steps) .navicon:after {
    top: 0 !important;
  }
  
  .open .navicon:before,
  .open .navicon:after {
    transition: 0.5s;
  }
  
  /* Arrows */
  .open.uarr .navicon:before,
  .open.uarr .navicon:after {
    width: 1.5rem;
  }

  .open.uarr .navicon:before {
    transform: rotate(35deg);
    transform-origin: left top;
  }
  .open.larr .navicon:after,
  .open.rarr .navicon:after,
  .open.uarr .navicon:after {
    transform: rotate(-35deg);
    transform-origin: left bottom;
  }
  
  .open.uarr {
    transform: scale(0.75) rotate(90deg);
  }

  section *, section *:before, section *:after {
    transform: translate3d(0, 0, 0);
  }

  .open.plus .navicon,
.open.x .navicon {
  background: transparent;
}
.open.plus .navicon:before,
.open.x .navicon:before {
  transform: rotate(-45deg);
}
.open.plus .navicon:after,
.open.x .navicon:after {
  transform: rotate(45deg);
}

.open.plus {
  transform: scale(0.75) rotate(45deg);
}


#nav-toggle::before{
  font-size:10px;
  content:"MENU";
  width:60px;
  color: white;
  transform: translateY(-50%);
  position: absolute;
  top: 48%;
  right: 37%;
}