<nav class="nav">

  <ul class="nav__list">
    <li class="nav__item">
      <a class="nav__link">
        <div class="nav__link-content">
          <span class="nav__link-num">01</span>
          <div class="nav__link-title">Our Work</div>
          <div class="nav__link-desc">What we've made</div>
        </div>
        <div class="nav__link-base"></div>
      </a>
      <div class="nav__item-line"></div>
    </li>
    <li class="nav__item">
      <a class="nav__link">
        <div class="nav__link-content">
          <span class="nav__link-num">02</span>
          <div class="nav__link-title">About</div>
          <div class="nav__link-desc">The low down</div>
        </div>
        <div class="nav__link-base"></div>
      </a>
      <div class="nav__item-line"></div>
    </li>
    <li class="nav__item">
      <a class="nav__link">
        <div class="nav__link-content">
          <span class="nav__link-num">03</span>
          <div class="nav__link-title">News</div>
          <div class="nav__link-desc">Latest ramblings</div>
        </div>
        <div class="nav__link-base"></div>
      </a>
      <div class="nav__item-line"></div>
    </li>
    <li class="nav__item">
      <a class="nav__link">
        <div class="nav__link-content">
          <span class="nav__link-num">04</span>
          <div class="nav__link-title">Contact</div>
          <div class="nav__link-desc">Don't be shy</div>
        </div>
        <div class="nav__link-base"></div>
      </a>
      <div class="nav__item-line"></div>
    </li>
  </ul>

  <a class="nav__logo-link">

    <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1057 289">

      <title>Boys and Girls Logo</title>

      <defs>
        <mask id="boys-letter-mask">
          <rect x="31" y="153.5" width="447" height="105.2" fill="white" /> 
        </mask>
        <mask id="girls-letter-mask">
          <rect x="494.5" y="31.4" width="473" height="105.2" fill="white" /> 
        </mask>
      </defs>

      <rect class="stage" x="0" y="0" width="1057" height="289" fill="none"/>

      <g class="logo__tm">
        <polygon points="1006.16 19.8 1006.16 31.68 999.18 31.68 999.18 19.8 992.63 19.8 992.63 14.67 1012.72 14.67 1012.72 19.8 1006.16 19.8" fill="#fff"/>
        <polygon points="1015.76 14.67 1025.74 14.67 1029.92 23.65 1034.1 14.67 1043.65 14.67 1043.65 31.68 1037.43 31.68 1037.43 20.14 1032.01 31.68 1027.35 31.68 1021.94 20.14 1021.94 31.68 1015.76 31.68 1015.76 14.67" fill="#fff"/>
      </g>

      <g class="logo__girls" fill="#fff" mask="url(#girls-letter-mask)">
        <path class="logo__girls-letter logo__girls-s" d="M900.11,121.32c-38.81,0-43.29-16.7-43.29-26.44V93.79H881c.3,4.47,2.89,11.73,22,11.73h1.4c19.5,0,21.69-3.88,21.69-7.85,0-4.28-2.29-7-19.4-7.46l-12.74-.3c-27.67-.79-36.13-10.13-36.13-21.67v-.89c0-11,6.57-22.56,40.31-22.56H905c35,0,43,12.22,43,23.36v1H923.89c-.5-2.78-2-8.85-21.39-8.85h-1.6c-17.91,0-19.2,3.18-19.2,6.36s2,6.07,17.11,6.37l12.44.19c27.87.5,39.11,7.26,39.11,22v1.39c0,12.23-6.17,24.75-43.39,24.75Z" transform="translate(1.16 1.07)"/>
        <polygon class="logo__girls-letter logo__girls-l" points="797.48 47.27 797.48 102.65 848.77 102.65 848.77 120.97 774.36 120.97 774.36 47.27 797.48 47.27"/>
        <path class="logo__girls-letter logo__girls-r" d="M757.33,66.51V65.32c0-10.6-7.46-19.12-32.14-19.12H665.48v73.71h23.19V93.75h30.25c11.44,0,15.42,4,15.42,13v8.52c0,2.67.4,3.76,1.1,4.66H759v-.5c-.69-1.19-1.39-3.07-1.39-9V99.6c0-9.51-6.47-14.76-14-16.94C748.48,81.07,757.33,77.11,757.33,66.51Zm-24.18,3.67c0,4.06-2.69,7.23-9.35,7.23H688.67V63H723.8c6.76,0,9.35,3.26,9.35,7.13Z" transform="translate(1.16 1.07)"/>
        <rect class="logo__girls-letter logo__girls-i" x="626.96" y="47.27" width="23.39" height="73.7"/>
        <path class="logo__girls-letter logo__girls-g" d="M559.18,77.41V93h28.35c-.38,2.38-7.16,10.33-28.11,10.33-20,0-27.44-10.24-27.44-19.88V82.36c0-10.24,5.47-20,27.64-20,16.17,0,22.14,4.5,24.45,7.7h25.38c-1.59-10.25-10.73-25.29-47.88-25.29h-4.2c-41.79,0-49.21,22.16-49.21,36.58v2.78c0,14.81,9.08,37.17,48.43,37.17h2c20.62,0,30.2-7.7,34.06-11.81A57.49,57.49,0,0,1,595.24,120h15V77.41Z" transform="translate(1.16 1.07)"/>    
      </g>

      <path class="logo__girls-border" d="M484.8,93V22.11H974.38V144H535.8" transform="translate(1.16 1.07)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="17"/> 

      <g class="logo__plus" fill="none" stroke="#f03296" stroke-miterlimit="10" stroke-width="17">
        <line class="logo__plus-horz" x1="447.67" y1="145.15" x2="524.2" y2="145.15"/>
        <line class="logo__plus-vert" x1="485.93" y1="106.8" x2="485.93" y2="183.33"/>
      </g>

      <g class="logo__boys" fill="#fff" mask="url(#boys-letter-mask)">
        <path class="logo__boys-letter logo__boys-b" d="M133.68,200.69c3.58-1.09,11.72-4.76,11.72-14.37v-1.39c0-8.71-5.86-16.84-27-16.84H48.94V241.8h70c23.94,0,30.59-9.61,30.59-21.2v-1.39C149.57,206.23,138.75,202,133.68,200.69Zm-61.59-17h42.33c6.45,0,8,2.77,8,5.84v.2c0,3-1.59,5.94-8,5.94H72.09Zm53.45,34.87c0,3-1.49,7.23-9.14,7.23H72.09V211.28H116.4c7.65,0,9.14,3.67,9.14,6.84Z" transform="translate(1.16 1.07)"/>
        <path class="logo__boys-letter logo__boys-o" d="M216.25,166.68H212c-46.85,0-52.12,23.36-52.12,36.58v3c0,13,5.27,37,52.12,37h4.28c46.65,0,52-24,52-37v-3C268.28,190,262.8,166.68,216.25,166.68ZM244,205.34c0,8.55-5.07,19.88-29.94,19.88-25.06,0-29.94-11.63-29.94-20.08V204c0-8.45,4.48-19.38,29.94-19.38C239.13,184.57,244,195.5,244,204Z" transform="translate(1.16 1.07)"/>
        <polygon class="logo__boys-letter logo__boys-y" points="306.07 214.33 266.45 169.16 295.22 169.16 318.22 196.3 341.61 169.16 367.79 169.16 329.27 214.33 329.27 242.86 306.07 242.86 306.07 214.33"/>
        <path class="logo__boys-letter logo__boys-s" d="M411.13,243.21c-38.81,0-43.29-16.7-43.29-26.44v-1.09H392c.3,4.47,2.89,11.73,22,11.73h1.39c19.51,0,21.69-3.88,21.69-7.85,0-4.28-2.28-7-19.4-7.46L405,211.8c-27.66-.79-36.12-10.14-36.12-21.67v-.89c0-11,6.57-22.56,40.3-22.56H416c35,0,43,12.22,43,23.36v1H434.92c-.5-2.78-2-8.85-21.4-8.85h-1.59c-17.92,0-19.21,3.18-19.21,6.36s2,6.07,17.12,6.37l12.44.19c27.86.5,39.11,7.26,39.11,22v1.39c0,12.23-6.17,24.75-43.39,24.75Z" transform="translate(1.16 1.07)"/>
      </g>

      <path class="logo__boys-border" d="M484.77,195V266H22V144.08H433.75" transform="translate(1.16 1.07)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="17"/>

    </svg>

  </a>

</nav>
<svg class="nav__bg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient class="nav__grad" x1="92.6356902%" y1="7.36430977%" x2="0%" y2="100%" id="nav-grad">
            <stop stop-color="#F03296" offset="20%"></stop>
            <stop stop-color="#00B4FF" offset="100%"></stop>
        </linearGradient>
    <mask id="nav__bg-mask" class="nav__bg-mask" maskUnits="userSpaceOnUse"x="0" y="0" width="100" height="100">
        <rect class="nav__bg-mask-rect" x="0" y="0" width="25" height="100" fill="white"/>
      <rect class="nav__bg-mask-rect" x="24.9" y="0" width="25.1" height="100" fill="white"/>
      <rect class="nav__bg-mask-rect" x="49.9" y="0" width="25.1" height="100" fill="white"/>
      <rect class="nav__bg-mask-rect" x="74.9" y="0" width="25.1" height="100" fill="white"/>
    </mask>
    </defs>
    <rect x="0" y="0" width="100" height="100" fill="url(#nav-grad)" mask="url(#nav__bg-mask)"></rect>
</svg>

<button class="nav-btn">
  <svg class="burger <?php echo $darkBurgerClass; ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<!--        <title>Navigation Button Icon</title> -->
        <rect class="burger__stroke"  x="2" y="2" width="32" height="32" fill="none" stroke="" stroke-miterlimit="10" stroke-width="4"/>
        <polyline class="burger__stroke-over"points="18 2 34 2 34 34 2 34 2 2 18 2" fill="none" stroke="" stroke-miterlimit="10" stroke-width="4"/>
        <g class="burger__plus">
          <rect class="burger__plus-left" x="8" y="16" width="10" height="4"/>
          <rect class="burger__plus-btm" x="16" y="18" width="4" height="10"/>
          <rect class="burger__plus-right" x="18" y="16" width="10" height="4"/>
          <rect class="burger__plus-top" x="16" y="8" width="4" height="10"/>
        </g>
      </svg>
</button>

<div class="content">
  <svg class="main-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1057 289">
<!--    <title>Boys and Girls Logo</title> -->
    <g>
      <polygon points="1006.16 19.8 1006.16 31.68 999.18 31.68 999.18 19.8 992.63 19.8 992.63 14.67 1012.72 14.67 1012.72 19.8 1006.16 19.8" fill="#fff"/>
      <polygon points="1015.76 14.67 1025.74 14.67 1029.92 23.65 1034.1 14.67 1043.65 14.67 1043.65 31.68 1037.43 31.68 1037.43 20.14 1032.01 31.68 1027.35 31.68 1021.94 20.14 1021.94 31.68 1015.76 31.68 1015.76 14.67" fill="#fff"/>
    </g>

    <g fill="#fff" >
      <path d="M900.11,121.32c-38.81,0-43.29-16.7-43.29-26.44V93.79H881c.3,4.47,2.89,11.73,22,11.73h1.4c19.5,0,21.69-3.88,21.69-7.85,0-4.28-2.29-7-19.4-7.46l-12.74-.3c-27.67-.79-36.13-10.13-36.13-21.67v-.89c0-11,6.57-22.56,40.31-22.56H905c35,0,43,12.22,43,23.36v1H923.89c-.5-2.78-2-8.85-21.39-8.85h-1.6c-17.91,0-19.2,3.18-19.2,6.36s2,6.07,17.11,6.37l12.44.19c27.87.5,39.11,7.26,39.11,22v1.39c0,12.23-6.17,24.75-43.39,24.75Z" transform="translate(1.16 1.07)"/>
      <polygon points="797.48 47.27 797.48 102.65 848.77 102.65 848.77 120.97 774.36 120.97 774.36 47.27 797.48 47.27"/>
      <path d="M757.33,66.51V65.32c0-10.6-7.46-19.12-32.14-19.12H665.48v73.71h23.19V93.75h30.25c11.44,0,15.42,4,15.42,13v8.52c0,2.67.4,3.76,1.1,4.66H759v-.5c-.69-1.19-1.39-3.07-1.39-9V99.6c0-9.51-6.47-14.76-14-16.94C748.48,81.07,757.33,77.11,757.33,66.51Zm-24.18,3.67c0,4.06-2.69,7.23-9.35,7.23H688.67V63H723.8c6.76,0,9.35,3.26,9.35,7.13Z" transform="translate(1.16 1.07)"/>
      <rect x="626.96" y="47.27" width="23.39" height="73.7"/>
      <path d="M559.18,77.41V93h28.35c-.38,2.38-7.16,10.33-28.11,10.33-20,0-27.44-10.24-27.44-19.88V82.36c0-10.24,5.47-20,27.64-20,16.17,0,22.14,4.5,24.45,7.7h25.38c-1.59-10.25-10.73-25.29-47.88-25.29h-4.2c-41.79,0-49.21,22.16-49.21,36.58v2.78c0,14.81,9.08,37.17,48.43,37.17h2c20.62,0,30.2-7.7,34.06-11.81A57.49,57.49,0,0,1,595.24,120h15V77.41Z" transform="translate(1.16 1.07)"/>    
    </g>

    <path d="M484.8,93V22.11H974.38V144H535.8" transform="translate(1.16 1.07)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="17"/> 

    <g fill="none" stroke="#f03296" stroke-miterlimit="10" stroke-width="17">
      <line x1="447.67" y1="145.15" x2="524.2" y2="145.15"/>
      <line x1="485.93" y1="106.8" x2="485.93" y2="183.33"/>
    </g>

    <g fill="#fff" >
      <path d="M133.68,200.69c3.58-1.09,11.72-4.76,11.72-14.37v-1.39c0-8.71-5.86-16.84-27-16.84H48.94V241.8h70c23.94,0,30.59-9.61,30.59-21.2v-1.39C149.57,206.23,138.75,202,133.68,200.69Zm-61.59-17h42.33c6.45,0,8,2.77,8,5.84v.2c0,3-1.59,5.94-8,5.94H72.09Zm53.45,34.87c0,3-1.49,7.23-9.14,7.23H72.09V211.28H116.4c7.65,0,9.14,3.67,9.14,6.84Z" transform="translate(1.16 1.07)"/>
      <path d="M216.25,166.68H212c-46.85,0-52.12,23.36-52.12,36.58v3c0,13,5.27,37,52.12,37h4.28c46.65,0,52-24,52-37v-3C268.28,190,262.8,166.68,216.25,166.68ZM244,205.34c0,8.55-5.07,19.88-29.94,19.88-25.06,0-29.94-11.63-29.94-20.08V204c0-8.45,4.48-19.38,29.94-19.38C239.13,184.57,244,195.5,244,204Z" transform="translate(1.16 1.07)"/>
      <polygon points="306.07 214.33 266.45 169.16 295.22 169.16 318.22 196.3 341.61 169.16 367.79 169.16 329.27 214.33 329.27 242.86 306.07 242.86 306.07 214.33"/>
      <path d="M411.13,243.21c-38.81,0-43.29-16.7-43.29-26.44v-1.09H392c.3,4.47,2.89,11.73,22,11.73h1.39c19.51,0,21.69-3.88,21.69-7.85,0-4.28-2.28-7-19.4-7.46L405,211.8c-27.66-.79-36.12-10.14-36.12-21.67v-.89c0-11,6.57-22.56,40.3-22.56H416c35,0,43,12.22,43,23.36v1H434.92c-.5-2.78-2-8.85-21.4-8.85h-1.59c-17.92,0-19.21,3.18-19.21,6.36s2,6.07,17.12,6.37l12.44.19c27.86.5,39.11,7.26,39.11,22v1.39c0,12.23-6.17,24.75-43.39,24.75Z" transform="translate(1.16 1.07)"/>
    </g>

    <path d="M484.77,195V266H22V144.08H433.75" transform="translate(1.16 1.07)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="17"/>

  </svg>
</div>

/*  Brand Colours 
  ========================================================================== */

  $color-primary: #F03694;
  $color-secondary: #00B4FB;

/*  Dark Colours
  ========================================================================== */

  $color-dark-1: #0E1925;
  $color-dark-2: #1E2D3C;
  $color-dark-3: #3C4B59;
  $color-dark-4: #5A6977;
  
  $color-grey-1: #939BA3;
  $color-grey-2: #C2CCD5;

/*  ==========================================================================
    Styles
    ========================================================================== */ 

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background: $color-dark-2;
  // background: linear-gradient(45deg, black 0%, $color-dark-2 100%);
  color: $color-grey-1;
}

html,
body
 {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.nav {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.js-nav--open {
  visibility: visible;
}

.nav__list {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item {
  position: relative;
  flex-basis: 25%;
  margin: 0;
  padding: 0; 
}

.nav__item-line {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 1px;
  height: 100%;
  background: rgba(white, 0.2);
}

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0 0 20%;
  text-decoration: none;
  color: white;
  will-change: transform;
  transition: color 0.5s;
  
  &:hover {
    color: black;
  }
}

.nav__link-content {
  position: relative;
  z-index: 3;
}

.nav__link-base {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 150px);
  background-color: white;
  box-shadow: 2px 4px 16px 0 rgba(0,0,0,0.20);
  will-change: transition;
  opacity: 0;
  
  .nav__link:hover & {
    z-index: 2;
  }
}

.nav__link-num {
  position: absolute;
  top: 12px;
  left: -24px;
  font-size: 16px;
  font-family: "bebas-neue",sans-serif;
}

.nav__link-title {
  font-size: 36px;
  text-transform: uppercase;
  font-family: "bebas-neue",sans-serif;
  margin-bottom: 8px;
  line-height: 0.8;
  overflow: hidden;
}

.nav__link-desc {
  display: block;
  font-size: 12px;
}

.nav-btn {
  position: fixed;
  z-index: 101;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  appearance: none;
  outline: 0;
  cursor: pointer;
}

.burger {
  width: 36px;
  height: 36px;
}

.burger__stroke {
  stroke: white;
}

.burger__plus {
  fill: $color-primary;
}

.nav__bg {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  will-change: auto;
  pointer-events: none;
  visibility: hidden;
}

.nav__bg-mask-rect {
  will-change: transform;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.nav__logo-link {
  position: absolute;
  bottom: 50px;
  left: calc(50% - 102px);
  display: block;
  width: 220px;
  height: auto;
  will-change: transition;
  visibility: hidden;
}

.main-logo {
  width: 400px;
  height: auto;
}

/*  ==========================================================================
    Variables
    ========================================================================== */ 

var $nav = $('.nav'),
  $navBtn = $('.nav-btn'),
  $bgMask = $('.nav__bg-mask-rect'),
  $link = $('.nav__link'),
  $linkNum = $('.nav__link-num'),
  $linkTitle = $('.nav__link-title'),
  $linkDesc = $('.nav__link-desc'),
  $linkBase = $('.nav__link-base'),
  $itemLine = $('.nav__item-line'),
  isNavOpen = false,
  navOpenTL = new TimelineMax(),
  navCloseTL = new TimelineMax(),
  logoTL = new TimelineMax(),
  animateGrad = true; // toggle for gradient animation test

/*  ==========================================================================
    Nav Button Events
    ========================================================================== */ 

  $navBtn.on('click', function() {
    $nav.addClass( "js-nav--open" );

    // toggle animations
    if(!isNavOpen) {
      openNav();
    }
    else {
      closeNav();
    }
  })

  $navBtn.on('mouseenter', function() {

    // toggle animations
    if(!isNavOpen) {
      navBtnClosedOver();
    }
    else {
      navBtnOpenOver();
    }

  });

  $navBtn.on('mouseleave', function() {

    // toggle animations
    if(!isNavOpen) {
      navBtnClosedOut();
    }
    else {
      navBtnOpenOut();
    }

  });

/*  ==========================================================================
    Nav Button Animation States
    ========================================================================== */ 

  function navBtnClosedOver() {

    var navIconTL = new TimelineMax();

    navIconTL.set('.burger__stroke-over', { stroke: "#F03694", drawSVG: 0 })
         .to('.burger__plus', 0.3, { fill: '#fff', rotation: 0, ease: Power4.easeInOut })
         .to('.burger__stroke-over', 0.4, { drawSVG: "0% 100%", ease: Power4.easeInOut }, 0);
  }

  function navBtnClosedOut() {

    var navIconTL = new TimelineMax();
    navIconTL.to('.burger__stroke-over', 0.4, { drawSVG: 0, ease: Power4.easeInOut })
         .to('.burger__plus', 0.3, { fill: '#F03694', rotation: 0, ease: Power4.easeInOut }, 0);
  }

  function navBtnOpenOver() {

    var navIconTL = new TimelineMax();
    navIconTL.to('.burger__plus', 0.3, { fill: '#fff', rotation: 135, ease: Power4.easeInOut, transformOrigin: "center center" })
         .to('.burger__stroke-over', 0.4, { drawSVG: 0, ease: Power4.easeInOut }, 0);
  }

  function navBtnOpenOut() {

    var navIconTL = new TimelineMax();
    navIconTL.to('.burger__plus', 0.3, { fill: '#0E1925', rotation: 45, ease: Power4.easeInOut, transformOrigin: "center center" });
  }

/*  ==========================================================================
    Nav Animation States
    ========================================================================== */ 

  initNav();

  function initNav() {
    TweenMax.set( $bgMask, { scaleX: 0, transformOrigin: "100% 0" });
    TweenMax.set( [$itemLine], { scaleY: 0 });
    TweenMax.set( [$linkBase], { scaleX: 0 });
    TweenMax.set( '.nav__bg', { visibility: 'visible' });
  }

  function openNav() {

    destroyAnimation(navCloseTL); // destroy the close animation so the onComplete doesn't fire is reopened too quickly.

    isNavOpen = true;

    showLogo();
    updateGradient();
    navBtnOpenOver();

    navOpenTL = new TimelineMax();

    navOpenTL.set( $linkDesc, { opacity: 0, x: 40 })
      .set( $linkNum, { opacity: 0, x: -20 })
      .set( $linkTitle, { opacity: 1 })
      .staggerTo( $bgMask, 0.8, { 
        scaleX: 1,
        ease: Power4.easeInOut,
        transformOrigin: "100% 0"
      }, 0.08 )
      .staggerTo( $itemLine, 1.2, { 
        scaleY: 1,
        ease: Power4.easeInOut,
        transformOrigin: "100% 0"
      }, 0.1, "-=0.4" )
      .staggerTo( $linkNum, 0.8, { 
        opacity: 1,
        x: 0,
        ease: Power4.easeOut
      }, 0.1, "-=1.4" )
      .staggerTo( $linkDesc, 0.8, { 
        x: 0,
        opacity: 1,
        ease: Power4.easeOut
      }, 0.1, "-=1.0" )


    var navSplitText = new SplitText( $linkTitle, { type:"chars words", position:"relative" });

    hTL = new TimelineMax({ delay: 0.6 });
    hTL.staggerFrom(navSplitText.chars, 0.8, { y: 160, ease: Expo.easeOut }, 0.03);


  }

  function closeNav() {

    destroyAnimation(navOpenTL); // destroy opening animations in case clicking too quickly

    isNavOpen = false;

    hideLogo();
    stopGradient();
    navBtnClosedOver();

    navCloseTL = new TimelineMax( { onComplete: function() { 
      $nav.removeClass( "js-nav--open" );
      console.log('remove class');
    } } );

    navCloseTL.to( $itemLine, 0.3, { 
        scaleY: 0
      } )
      .staggerTo( $bgMask, 0.8, { 
        scaleX: 0,
        ease: Power4.easeInOut,
        transformOrigin: "100% 0"
      }, 0.08, "-=0.2")

    TweenMax.to( [$linkDesc, $linkNum, $linkTitle], 0.3, { opacity: 0 });

  }



  function showLogo() {

    TweenMax.set('.nav__logo-link', { autoAlpha: 1 });

    logoTL = new TimelineMax( { delay: 1 } );

    logoTL.set('.logo__tm', { opacity: 0 })
        .set('.logo__plus-horz', { opacity: 0 })
        .fromTo('.logo__plus-vert', 0.5, { scaleY: 0, transformOrigin: "center center" }, { scaleY: 1, ease: Power4.easeIn })
        .set('.logo__plus-horz', { opacity: 1, immediateRender: false  })
        .fromTo('.logo__boys-border', 1.0, { drawSVG: '0% 0%' }, { drawSVG: '0% 100%', ease: Power4.easeOut}, 0.5)
        .fromTo('.logo__girls-border', 1.0, { drawSVG: '0% 0%' }, { drawSVG: '0% 100%', ease: Power4.easeOut}, 0.5)
        .fromTo('.logo__plus-horz', 0.5, { rotation: -90, transformOrigin: "center center" } ,{ rotation: 0, ease: Elastic.easeOut.config(1.0, 0.5) }, "-=0.35")
        .staggerFromTo('.logo__boys-letter', 0.4, { y: 150 }, { y: 0, ease: Power2.easeOut }, 0.07, "-=0.4")
        .staggerFromTo('.logo__girls-letter', 0.3, { y: -150 }, { y: 0, ease: Power2.easeOut }, 0.07, "-=0.59")
        .set('.logo__tm', { opacity: 1, immediateRender: false })
        .fromTo('.logo__tm', 0.5, { x: -50 }, { x: 0, ease: Power2.easeOut });

    logoTL.timeScale( 1 );
  }

  function hideLogo() {
    destroyAnimation(logoTL);
    TweenMax.to('.nav__logo-link', 0.3, { autoAlpha: 0 });
  }

  function destroyAnimation(tl) {
    tl.clear();
    tl.eventCallback("onReverseComplete", null);
    tl.eventCallback("onComplete", null);
    tl.eventCallback("onUpdate", null);
    tl.eventCallback("onStart", null);
  }


/*  ==========================================================================
    Gradient Mouse Move
    ========================================================================== */  


  function updateGradient() {

    if(animateGrad) {

      // Bind animation to cursor
      $nav.on('mousemove', function(e) {
        x = e.pageX;
        y = e.pageY
        var xPerc = (e.pageX / document.documentElement.clientWidth) * 100;
        var yPerc = (e.pageY / document.documentElement.clientHeight) * 100

        TweenMax.to('.nav__grad', 2, {
          attr: { x1: yPerc.toString()+"%" },
          ease: Expo.easeOut
        });

        TweenMax.to('.nav__grad', 2, {
          attr: { y1: (xPerc/2).toString()+"%" },
          ease: Expo.easeOut
        });

        TweenMax.to('.nav__grad', 2, {
          attr: { x2: (100-xPerc).toString()+"%" },
          ease: Expo.easeOut
        });

        TweenMax.to('.nav__grad', 2, {
          attr: { y2: (100-yPerc).toString()+"%" },
          ease: Expo.easeOut
        });

      });
    }
  }

  function stopGradient() {
    if(animateGrad) {
      $nav.off('mousemove');
    }
  }


/*  ==========================================================================
    Nav Links Events
    ========================================================================== */  

  $link.on( "mouseenter", function() {
    if(isNavOpen) {
      var $thisBase = $(this).find('.nav__link-base');
      var $thisNum = $(this).find('.nav__link-num');
      var $thisDesc = $(this).find('.nav__link-desc');
      var linkOverTL = new TimelineMax();
      
      linkOverTL.to($thisBase, 0.8, { scaleX: 1, opacity: 1, ease: Power4.easeOut, transformOrigin: "0% 0%" })
        .to($thisNum, 0.8, { y: -14, ease: Elastic.easeOut.config(1.0, 0.5) }, 0)
        .to($thisDesc, 0.8, { x: 20, ease: Elastic.easeOut.config(1.0, 0.5) }, 0);
    }
    
  } );

  $link.on( "mouseleave", function() {
    var $thisBase = $(this).find('.nav__link-base');
    var $thisNum = $(this).find('.nav__link-num');
    var $thisDesc = $(this).find('.nav__link-desc');
    TweenMax.to($thisBase, 0.4, { scaleX: 0, opacity: 0, ease: Power4.easeOut, transformOrigin: "0% 0%" });
    TweenMax.to($thisNum, 0.8, { y: 0, ease: Elastic.easeOut.config(1.0, 0.5) });
    TweenMax.to($thisDesc, 0.8, { x: 0, ease: Elastic.easeOut.config(1.0, 0.5) });
  } );

  $link.on( "click", function(e) {
    e.preventDefault();
  } );

console.clear();