@media (max-width: 1250px) {
	#nav {
		width: 100%;
		height: 60px;
		background: #ffd400; 
		z-index: 10000;
		position: fixed;
		right: 0;
		transition: height 150ms ease-in-out;
		-webkit-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25);
		-moz-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25);
		box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25);
	}

	#nav.clicked {
		height: 100%;
	}
}

@media (min-width: 1251px) {
	#nav {
		width: 60px;
		height: 100%;
		background: #ffd400;
		z-index: 10000;
		position: fixed;
		right: 0;
		transition: width 300ms ease-in-out;
		-webkit-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25);
		-moz-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25);
		box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25);
	}

	#nav.clicked {
		width: 100%;
	}
}

@media (max-width: 500px) {
	.logo {
		width: 190px;
		height: auto;
		position: fixed;
		margin-left: 20px;
		margin-right: auto;
		top: 17px;
		clear: both;
		z-index: 10000;
	}
}

@media (min-width: 501px) {
	.logo {
		width: 190px;
		height: auto;
		position: fixed;
		margin-left: 50px;
		margin-right: auto;
		top: 17px;
		clear: both;
		z-index: 10000;
	}
}


@media (min-width: 1251px) {
	.logo {
		-ms-transform: rotate(90deg); 
		-webkit-transform: rotate(90deg); 
		transform: rotate(90deg);
		width: 190px;
		height: auto;
		position: relative;
		left: -7.2em;
		top: calc(50vh);
		z-index: 10000;
	}

	/*.logo img {
		height: auto;
		width: 220px;
		}*/
	}
	.logo img {
		width: 170px;
		height: auto;
	}
	@media (min-width: 1251px) {
		#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
			width: 28px;
			height: 20px;
			position: absolute;
			left: 0;
			margin-bottom: 0;
			margin-top: 40px;
			right: 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;
			z-index: 10000;
		}

		#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
			display: block;
			position: absolute;
			height: 4px;
			width: 100%;
			background: #000000;
			opacity: 1;
			left: 16px;
			-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;
		}
	}

	@media (min-width: 501px) and (max-width: 1250px) {
		#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
			width: 28px;
			height: 20px;
			position: absolute;
			left: auto;
			margin-bottom: 0;
			margin-top: 17px;
			right: 70px;
			-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;
			z-index: 10000;
		}

		#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
			display: block;
			position: absolute;
			height: 4px;
			width: 100%;
			background: #000000;
			opacity: 1;
			left: 16px;
			-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;
		}
	}

	@media (max-width: 500px) {
		#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
			width: 28px;
			height: 20px;
			position: absolute;
			left: auto;
			margin-bottom: 0;
			margin-top: 17px;
			right: 40px;
			-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;
			z-index: 10000;
		}

		#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
			display: block;
			position: absolute;
			height: 4px;
			width: 100%;
			background: #000000;
			opacity: 1;
			left: 16px;
			-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;
		}
	}

	#nav-icon3 span:nth-child(1) {
		top: 0px;
	}

	#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
		top: 10px;
	}

	#nav-icon3 span:nth-child(4) {
		top: 20px;
	}

	#nav-icon3.open span:nth-child(1) {
		top: 18px;
		width: 0%;
		left: 50%;
	}

	#nav-icon3.open span:nth-child(2) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#nav-icon3.open span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	#nav-icon3.open span:nth-child(4) {
		top: 18px;
		width: 0%;
		left: 50%;
	}



	@media (max-width: 500px) {
		#about {
			width: auto;
			height: auto;
			position: absolute;
			left: auto;
			bottom: auto;
			top: -22px;
			right: 70px;
			clear: both;
			z-index: 10000;
		}
	}

	@media (min-width: 501px) and (max-width: 1250px) {
		#about {
			width: auto;
			height: auto;
			position: absolute;
			left: auto;
			bottom: auto;
			top: -22px;
			right: 100px;
			clear: both;
			z-index: 10000;
		}
	}


	@media (min-width: 1251px) {
		#about {
			width: auto;
			height: auto;
			position: relative;
			right: auto;
			left: 23px;
			top: calc(100vh - 150px);
			z-index: 10000;
		}
	}

	@media (min-width: 1600px) {
		#nav-content {
			position: relative;
			width: 100%;
			top: 10%;
			height: auto;
			text-align: center;
			display: none;		
		}
	}

	@media (min-width: 1251px) and (max-width: 1599px) {
		#nav-content {
			position: relative;
			width: 100%;
			top: 0;
			height: auto;
			text-align: center;
			display: none;		
		}
	}

	@media (min-width: 1000px) and (max-width: 1251px) {
		#nav-content {
			position: relative;
			width: 100%;
			margin-top: 25vh;
			height: auto;
			text-align: center;
			display: none;	
		}
	}

	@media (min-width: 501px) and (max-width: 999px)  {
		#nav-content {
			position: relative;
			width: 100%;
			height: auto;
			margin-top: 25vh;
			text-align: center;
			display: none;		
		}
	}

	@media (max-width: 500px) {
		#nav-content {
			position: relative;
			width: 100%;
			height: auto;
			margin-top: 25vh;
			text-align: center;
			display: none;		
		}
	}


	.nav-links {
		height: auto;
		width: auto;
		display: none;
	}



	@media (min-width: 1600px) {
		h3.nav-item{
			font-size: 2.5vw;
		}
	}

	@media (min-width: 1250px) and (max-width: 1599px) {
		h3.nav-item{
			font-size: 3vw;
		}
	}

	@media (min-width: 500px) and (max-width: 1249px) {
		h3.nav-item{
			font-size: 3.5vw;
		}
	}

	@media (max-width: 500px) {
		h3.nav-item{
			font-size: 20px;
		}
	}

	h3.nav-item a{
		text-decoration: none;
		color: #000;
		border-bottom: solid transparent .1em;
	}

	h3.nav-item a:hover{
		text-decoration: none;
		color: #000;
		border-bottom: solid #0082c9 .1em;
		transition: border-color 150ms ease-in;
	}

	@media (min-width: 1251px) {
		.about-text {
			padding:10%;
			overflow-y: scroll;
		}
	}

	@media (max-width: 1250px) {
		.about-text {
			padding-left:10%;
			padding-right: 10%;
			padding-top: 70px;
			padding-bottom: 70px;
			overflow-y: scroll;
			height: calc(100% - 140px);
		}
	}

	@media (min-width: 501px) {
		#about-content {
			overflow-y: scroll; 
			position: fixed;
			width: 100%;
			height: 100%;
			background: #ffd400;
			z-index: 100000;
			display: none;
		}
	}

	@media (max-width: 500px) {
		#about-content {
			position: fixed;
			width: 100%;
			height: 100%;
			background: #ffd400;
			display: none;
			z-index: 100000;
		}
	}

	@media (min-width: 1251px) {
		.about-close{
			position: fixed;
			top: 38px;
			left: 16px;
			cursor: pointer;
		}
	}

	@media (max-width: 1250px) {
		.about-close{
			position: fixed;
			top: 15px;
			right: 24px;
			cursor: pointer;
		}
	}

	.about-close img{
		height: auto;
		width: 28px;
	}

	#everything {
		display: none;
	}

	#loading {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100vw;
		height: 100vh;
		background-position: center;
	}

	.loading-thing {
		position: absolute;
		margin-left: calc(50vw - 30px);
		margin-top: calc(50vh - 30px);
	}