#nav-toggle { 
	position:relative;
	display:inline-block;
	cursor: pointer; 
	padding: 10px 35px 16px 0px; 
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
	cursor: pointer;
	border-radius: 1px;
	height: 5px;
	width: 35px;
	background: rgba(0,0,0,1);
	position: absolute;
	display: block;
	content: '';
}
#nav-toggle span:before {
	top: -10px; 
}
#nav-toggle span:after {
	bottom: -10px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}
#nav-toggle.active span {
	background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
	top: 0;
}
#nav-toggle.active span:before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
#nav-toggle.active span:after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

@media only screen and (min-width: 800px){
	#navnav{
		display:none;
	}	
}

@media only screen and (min-width: 569px) and (max-width: 750px){
	header{
		position:relative;
		display:inline-block;
		width:90%;
		height:75px;
		margin: 5% 0px 15px 5%;
		float:none;
	}
	#logo{
		position:relative;
		display:inline-block;
		width:35%;
		height:auto;
	}
	#navnav{
		position:relative;
		display:inline-block;
		float:right;
		margin-right:0px;
		margin-top:10px;
	}
	nav{
		position:relative;
		display:none;
		height:auto;
		width: 90%;
		margin-left:5%;
		margin-top: 5%;
		margin-bottom:15px;
		text-align: left;
	}
	div#subnav{
		text-align: left;
		margin-top:25px;
	}
	nav a{
		position:relative;
		display:inline-block;
		font-family: 'RobotoLight', sans-serif;
		font-size: 1.5em;
		float:none;
		width:100%;
		margin-right:0;
		margin-bottom:0.5em;
		color:rgb(0,0,0);
		text-decoration:none;
	}
	footer{
		text-align: center;
	}
	div.project-item{
		margin-bottom: 50px;
	}
	.bubble{
		display:none;
	}
	
}

@media only screen and (min-width: 475px) and (max-width: 568px) {
	header{
		position:relative;
		display:inline-block;
		width:90%;
		height:75px;
		margin: 5% 0px 5px 5%;
		float:none;
	}
	#logo{
		position:relative;
		display:inline-block;
		width:50%;
		height:auto;
	}
	#navnav{
		position:relative;
		display:inline-block;
		float:right;
		margin-right:0px;
		margin-top:10px;
	}
	nav{
		position:relative;
		display:none;
		height:auto;
		width: 90%;
		margin-left:5%;
		margin-top: 5%;
		margin-bottom:15px;
		text-align: left;
	}
	div#subnav{
		text-align: left;
		margin-top:25px;
	}
	nav a{
		position:relative;
		display:inline-block;
		font-family: 'RobotoLight', sans-serif;
		font-size: 1.5em;
		float:none;
		width:100%;
		margin-right:0;
		margin-bottom:0.5em;
		color:rgb(0,0,0);
		text-decoration:none;
	}
	footer{
		text-align: center;
	}
	div.project-item{
		margin-bottom: 50px;
	}
	.bubble{
		display:none;
	}
}
	
	
@media only screen and (min-width: 300px)  and (max-width: 474px) {
	header{
		position:relative;
		display:inline-block;
		width:90%;
		height:75px;
		margin: 5% 0px 5px 5%;
		float:none;
	}

	#logo{
		position:relative;
		display:inline-block;
		width:50%;
		height:auto;
	}
	#navnav{
		position:relative;
		display:inline-block;
		float:right;
		margin-right:0px;
		margin-top:10px;
	}
	nav{
		position:relative;
		display:none;
		height:auto;
		width: 90%;
		margin-left:5%;
		margin-top: 5%;
		margin-bottom:15px;
		text-align: left;
	}
	div#subnav{
		margin-top:25px;
		text-align: left;
	}
	nav a{
		position:relative;
		display:inline-block;
		font-family: 'RobotoLight', sans-serif;
		font-size: 1.5em;
		float:none;
		width:100%;
		margin-right:0;
		margin-bottom:0.5em;
		color:rgb(0,0,0);
		text-decoration:none;
	}
	footer{
		text-align: center;
	}
	div.project-item{
		margin-bottom: 50px;
	}
	.bubble{
		display:none;
	}
}