/* mobile only */
@media only screen and (max-width: 950px) {
	.mainNav {
		position: fixed;
		overflow:hidden;
		transform: translate(0,-120vh);
		transition: transform 0.4s ease;
		width: 100%;
		z-index: 25;
		background-color: black;
		color: white;
		top: 45px;
		text-transform: uppercase;
		letter-spacing: 0.2em;
		overflow-y: auto;
		font-weight: 600;
		height: 100vh;
	}

	.mainNav.open {
		transform: translate(0,0);
	}

	.topNav {
		font-size: 1.5em;
		line-height: 1.2;
		padding: 12% 8% 8% 8%;
		text-align: center;
	}

	.topNav li,
	.topNav li a {
		text-decoration: none;
		color: inherit;
	}
	
	.topNav li a {
		display: block;
		padding: 0.4em 0;
	}
	
	.topNav li:last-child {
		margin-bottom: 220px;
	}

	.burgerButton {
		display:block;
		position: absolute;
		width: 60px;
		height: 40px;
		top: 0.2em;
		left: 6%;
		cursor: pointer;
		padding: 10px;
		z-index: 20;
	}

	.burgerButton>span {
		display:block;
		width: 100%;
		height: 4px;
		background-color: black;
		margin-bottom: 3px;
	}
	
	.desktopOnly {
		display:none;
	}

}


/* desktop */
@media only screen and (min-width: 950px) {
	
	.burgerButton {
		display:none;
	}
	
	.mainNav {
		position: fixed;
		z-index: 20;
		top: 157px;
		right: 5%;
		text-align: right;
		font-size: 1.3333333em;
		font-weight: 600;
		letter-spacing: 0.2em;
		line-height: 1.2;
		text-transform: uppercase;
	}
	
	.mainNav a {
		display:inline-block;
		color: white;
		text-decoration: none;
		padding: 0.2em 0 0.2em 0;
		margin-bottom: 1em;
		border-bottom: 1px solid transparent;
	}
	
	.mainNav a:hover,
	.mainNav a.active {
		border-color: white;
	}
	
	.mobileOnly {
		display:none;
	}
	
}