_nav.scss

.navigation {
	position: fixed;
	background: white;
	top: 0;
	right: 0;
	z-index: $z-nav;
	
	// Hamburger menu styles
	@media only screen and (max-width: $mediumlarge - 1px) {
		padding: 60px 20px 40px;
		box-shadow: 0 0 10px rgba(0,0,0,0.16);
		width: 280px;
		opacity: 0;
		transform: translateX(100%);
		visibility: hidden;
		transition: all 0.1s ease;

		&--shown {
			transform: translateX(0%);
			opacity: 1;
			visibility: visible;
			transition: all 0.2s ease;
		}
	}

	@media only screen and (min-width: $mediumlarge) {
		flex: 1;
		left: 0;
		position: relative;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;

		@media only screen and (min-width: $mediumlarge) {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-end;
			justify-content: flex-end;
		}

		li {
			a {
				display: inline-block;
				font-weight: bold;
				text-decoration: none;
				color: black;
				padding: 20px 10px;
				font-family: $font-header;
				font-size: 19px;
				line-height: 21px;
				position: relative;

				@media only screen and (min-width: $medium) {
					padding: 10px 10px 0;
					font-size: 17px;
				}

				@media only screen and (min-width: 1100px) {
					padding: 15px 15px 0;
					font-size: 19px;
				}

				&:before, &:after {
					z-index: -2;
					content: "";
					position: absolute;
					height: 3px;
					bottom: 18px;
					left: 10px;
					right: 12px;
					mix-blend-mode: multiply;
					transition: background 0.2s ease;
					background: transparent;

					@media only screen and (min-width: $medium) {
						bottom: -2px;
					}

					@media only screen and (min-width: 1100px) {
						left: 15px;
						right: 17px;
					}
				}

				&:after {
					transform: translate(2px,2px);
				}

				//&:hover:before,
				&:hover:after {
					background: $bg-yellow;
				}
			}

			// Open schooling navigator link
			&.osn {
				position: relative;

				&:before,
				&:after,
				a:before,
				a:after {
					z-index: -2;
					content: "";
					position: absolute;
					height: 3px;
					bottom: 4px;
					left: 10px;
					right: 145px;
					mix-blend-mode: multiply;

					@media only screen and (min-width: $mediumlarge) {
						right: 65px;
					}
				}

				// second line coloured bar
				&:before {
					background: $red;
				}

				&:after {
					transform: translate(1.5px, 1.5px);
					background: $bg-green;
				}

				a {
					padding: 0 10px 5px;
					display: inline-block;
					position: relative;

					.arrow {
						display: inline-block;
						position: relative;
						font-weight: bold;
						font-family: $font-header;
						transform: translate(0px, -1px);
					}

					&:hover .arrow {
						transform: translate(2px, -3px);
						transition: all 0.2s ease;
					}

					// first line coloured bar
					&:before {
						right: 12px;
						bottom: 25px;
						background: $red;
					}

					// first line coloured bar
					&:after {
						right: 12px;
						bottom: 25px;
						transform: translate(1.5px,1.5px);
						background: $bg-green;
					}
				}

				@media only screen and (min-width: 1100px) {
					margin-left: 20px;
				}

				@media only screen and (min-width: $large) {
					margin-left: 50px;
				}
			}

			&.current-menu-item {
				a:before {
					background: $blue;
				}

				a:after {
					background: $bg-yellow;
				}

				&.news a:before {
					background: $red;
				}

				&.resources a:before {
					background: $green;
				}

				&.getinvolved a:before {
					background: $purple;
				}

				&.about a:before {
					background: $yellow;
				}
			}
		}
	}
}

.hamburger {
	outline: none;
	// flex: 1;
	padding: 10px;
	transition: all 0.2s ease;
	z-index: $z-hamburger;

	@media only screen and (min-width: $mediumlarge) {
		display: none;
	}

	div {
		width: 16px;
		height: 16px;
		margin: 12px auto;
		position: relative;
		content: " ";
	}

	span {
		position: absolute;
		top: calc(50% - 1px);
		left: 0;
		right: 0;
		height: 2px;
		background: black;
		content: " ";
		display: block;
		transition: all 0.2s ease;

		&:nth-child(1) {
			transform: translateY(-5px);
			transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s;
		}

		&:nth-child(2) {
			transform: scaleX(1);
			transition: transform 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.25s;
		}

		&:nth-child(3) {
			transform: translateY(5px);
			transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s;
		}
	}

	&--active {
		span:nth-child(1) {
			transform: rotate(45deg);
			transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.15s;
		}
		span:nth-child(2) {
			transform: scaleX(0);
			transition: transform 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s;
		}
		span:nth-child(3) {
			transform: rotate(-45deg);
			transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.15s;
		}
	}
}