<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();