/* Color Declarations */
/* Color Config */
/* Menu Config */

/* We have the elements of the page handled in our reset css so we don't need it here  */

/* html, body {
  font-family: 'Shadows Into Light', sans-serif;
  font-weight: 100;
  height: 100%;
  margin: 0;
  padding: 0; }
*/


/* This image was used in the example but we don't need it so it is being removed  */
/* body{ background: url(http://i.imgur.com/oiX1bgx.jpg) }  */


a {
  text-decoration: none;
  }
  
  a i {
    font: 0/0 a;  
    text-shadow: none;
    color: transparent; 
  }

nav {
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  position: fixed;
  right: -300px;
  top: 0;
  -webkit-transition: right 0.3s linear;
  -moz-transition: right 0.3s linear;
  -o-transition: right 0.3s linear;
  transition: right 0.3s linear;
  width: 300px;
  z-index: 9001;
  /* IT'S OVER 9000! */
  }
  
  nav #menuToggle {
    background: rgba(0, 0, 0, 0.8);
    display: block;
    position: relative;
    height: 40px;
    left: -50px;
    top: 25px;
    width: 50px;
  }
  
    nav #menuToggle span {
      background: white;
      display: block;
      height: 10%;
      left: 10%;
      position: absolute;
      top: 45%;
      width: 80%;
      }
      
      nav #menuToggle span:before, nav #menuToggle span:after {
        background: white;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        top: -250%;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        width: 100%;
      }
      
      nav #menuToggle span:after {
        top: 250%;
      }
      
    nav a:nth-child(n+2) {
      color: white;
      display: block;
      font-size: 2.5em;
      margin: 0px 0 30px 30px;
    }
    
    nav a:nth-child(n+2):after {
      background: #ffa53e;
      content: '';
      display: block;
      height: 2px;
      -webkit-transition: width 0.3s;
      -moz-transition: width 0.3s;
      -o-transition: width 0.3s;
      transition: width 0.3s;
      width: 0;
    }
    
    nav a:nth-child(n+2):hover:after {
      width: 100%;
    }

.open {
  right: 0;
  }

  .open #menuToggle span {
    background: transparent;
    left: 10%;
    top: 45%; 
    }

    .open #menuToggle span:before, .open #menuToggle span:after {
      background: white;
      top: 0;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    .open #menuToggle span:after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

#menuToggle .navClosed {
  -webkit-transition: background 0.15s linear;
  -moz-transition: background 0.15s linear;
  -o-transition: background 0.15s linear;
  transition: background 0.15s linear;
}
  
#menuToggle .navClosed:before, #menuToggle .navClosed:after {
    -webkit-transition: top 0.3s linear, -webkit-transform 0.3s linear;
    -webkit-transition-delay: 0.15s, 0.15s;
    -moz-transition: top 0.3s linear 0.15s, -moz-transform 0.3s linear 0.15s;
    -o-transition: top 0.3s linear 0.15s, -o-transform 0.3s linear 0.15s;
    transition: top 0.3s linear 0.15s, transform 0.3s linear 0.15s;
}

#menuToggle .navOpen {
  -webkit-transition: background 0.15s linear;
  -webkit-transition-delay: 0.3s;
  -moz-transition: background 0.15s linear 0.3s;
  -o-transition: background 0.15s linear 0.3s;
  transition: background 0.15s linear 0.3s;
}

#menuToggle .navOpen:before, #menuToggle .navOpen:after {
  -webkit-transition: top 0.3s linear, -webkit-transform 0.3s linear;
  -moz-transition: top 0.3s linear, -moz-transform 0.3s linear;
  -o-transition: top 0.3s linear, -o-transform 0.3s linear;
  transition: top 0.3s linear, transform 0.3s linear;
}