$trans: 0.2s linear; 

@mixin menu-transform {
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.navigation {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  
  height: $nav-height;
  padding: $nav-height-padding;
  transition: padding-top $trans, padding-bottom $trans, height $trans;

  .brand-logo {
    float: left;
    margin-left: 100px;
  }
  
  .links {
    ul {
      list-style: none;
      float: right;
      margin: 0 100px 0 0;
      height: 100%;
      
      a {
        cursor: pointer;
      }
      
      li {
        text-decoration: none;
        color: $header-text-color;
        display: inline-block;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        font-weight: 300;
        font-size: 13px;
        margin-left: 50px;
      }    
    }
  }

  &.fixed {
    height: $nav-height-fixed;
    padding-top: $nav-height-padding-fixed;
    padding-bottom: $nav-height-padding-fixed;

    background: $nav-bg-fixed;
  }
  
  .menu {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    background-color: $purple-menu;
    position: relative;
    display: inline-block;
    top: -10px;
    
    #menu-icon {
      width: 45px;
      height: 45px;
      position: relative;
      margin: 10px auto;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      -o-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
      cursor: pointer;
      
      span {
        display: block;
        position: absolute;
        height: 5px;
        width: 60%;
        background: #fff;
        border-radius: 2px;
        opacity: 1;
        left: 20%;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
        
        &:nth-child(1) {
          top: 0;
          @include menu-transform;
        }
        
        &:nth-child(2) {
          top: 10px;
          @include menu-transform;
        }
        
        &:nth-child(3) {
          top: 20px;
          @include menu-transform;
        }
      }
      
      &.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 3%;
        left: 28%;
      }
      
      &.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
      }

      &.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 45%;
        left: 28%;
      }
    }
  }

 /** Breakpoints
  *
  *  Less than 768px;
  *  project 100% width
  *  navigation hidden, uses toggle and full screen overlay 
  *  header size is reduced.
  *
  *  768px;
  *
  *  Project Grid Goes to two wide 
  * 
  *  1025px;
  *  
  *  Nav bar expands
  *
  *  1200px;
  *
  *  project grid goes to 4 wide.
  *
  **/

  .links {
    display: block;
  }

  .menu {
    display: none;
  } 

  @media all and (max-width: 1024px) {
    .brand-logo {
      margin-left: 0px;
    }

    .links {
      position: fixed;
      background-color: #000;
      height: 100%;
      width: 100%;
      left: 0;

      top: -100%;
      opacity: 0;
      
      pointer-events: none;
      cursor: none;
      
      &.visible {
        
        z-index: 2;
        
        top:0;
        opacity: 0.95;
        
        transition: opacity 0.5s ease;

        pointer-events: auto;
        cursor: auto;
        
        text-align: center;


        ul {
          list-style: none;
          margin: 30% 0;
          float: none;
          
          a {
            cursor: pointer;
          }
          
          li {
            display: inline-block;
            width: 100%;
            margin: 2% 0;
            
            text-decoration: none;
            text-transform: uppercase;
            color: $faded-white;
    
            letter-spacing: 0.3em;
            font-weight: 300;
            font-size: 24px;
          
            &:hover {
              color: $white;
            }
          } 
        }
      }
    }

    .menu {
      z-index: 3;
      display: block;
      float: right;
    }
  }
  
}