@media (max-width:1200px){

	#wrapper {
		width:800px;
	}

	.logo {
		width:45px;
		height:45px;
	}

	.hovertext {
		font-size: 0.8em;
		padding: 14px;
	}

}

@media (max-width:850px){

	#topbgcolor {
		height:40%;
	}

	#wrapper {
		margin-top:7.8rem;
		width:500px;
		height:680px;
	}

	#outerleft {
		width:50%;
	}

	#outermiddle {
		width:50%;
	}

	#outerright {
		width:100%;
	}

	.innerrighttop {
		float:left;
		width:50%;
	}

	.innerrightbottom {
		float:left;
		width:50%;
	}

}

@media (max-width:425px){

	#topbgcolor {
		height:100%;
	}

	.logonav {
		margin:auto;
		padding:2rem;
		background-color:#1A1D24;
	}

	.logo {
		display:none;
	}

	.logomobile {
		display:block;
		margin:auto;
		float:none;
		width:40px;
		height:40px;
	}

	#wrapper {
		margin-top:10rem;
		width:100%;
		height:auto;
		text-align:center;
	}

	#outerleft {
		width:100%;
	}

	#outermiddle {
		width:100%;
	}

	#outerright {
		width:100%;
	}

	.innerrighttop {
		width:100%;
	}

	.innerrightbottom {
		width:100%;
	}

	.regularnav {
		display:none;
	}

	.returntotop {
		display:block;
	}

	.mobiletopnav {
		display:block;
		margin-top:-3.5rem;
		z-index:100;
	}

	.indexnav {
		margin-top:0rem;
		margin-bottom:0;
		font-size:1.3em;
		padding:0.7rem;
		background-color:#1A1D24;
		border-bottom:1px solid black;
	}

	.aboutborder {
		border-top:1px solid black;
	}

	.col-1of3.portfoliocol {
		width:100%;
		padding:0;
	}

	.about, .contact {
		float:none;
	}

	.project1, .project2, .project3, .project4, .project5, .project6 {
		opacity:1;
	}

}