html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Source Serif Pro", serif;
}

body {
	position: relative;
  	box-sizing: border-box;
  	display: table;
  	width: 100%;
  	height: 100%;
}

* {
	box-sizing: inherit;
}

#header-wrapper, #dBody, #footer {
	display: table-row;
}

/*#header-wrapper, #footer {
	height: 1px;
}*/

#dBody {
	width: 100%;
	padding: 3vw 6vw;
	height: auto;
}

.genInfo {
	width: 90%;
	margin: 1vw 2.5vw 2vw;
	padding: 0.5vw 3.5vw;
	background-image: linear-gradient(to right, #d5d8e9, transparent);
}

.genInfo, .genInfo > p {
	font-size: 4vw;
}

#header-wrapper {
	height: 12.5vw;
}

.fixed-wrapper {
	position: fixed;
	width: 100%;
	background-color: #97c2d3;
	height: inherit;
}

.header {
	width: 100%;
	height: inherit;
	font-size: 7.5vw;
	transition: all 200ms linear;
	font-family: 'DejaVu Sans', sans-serif;
	color: white;
	padding: 2vw 1vw;
}

.fixed-wrapper-scrolled {
	height: 9.5vw;
}

.header-scrolled {
	font-size: 7vw;
	padding: .5vw 1vw;
}

#menu {
	display: none;
	width: 100%;
	background-color: grey;
	font-family: "Source Serif Pro", serif;
}

#menu > a {
  color: white;
  padding: 1vw 3.5vw;
  text-decoration: none;
  display: block;
}

#menu > a:hover {
	background-color: #ddd;
	color: black;
}

.active {
	background-color: #ddd;
	color: black;
}

h1 {
	font-size: inherit;
	margin: 0;
	display: inline-block;
}

#menuIcon {
	float: right;
	color: white;
}

#about {
	/*background-color: rgb(255,182,193);*/
}

#services {
	/*background-color: rgb(255,255,153);*/
}

.genHeading {
	font-weight: bold;
	font-size: 6vw;
}

.pics {
	max-width: 100%;
}

#footer {
	width: 100%;
	/*background-color: rgb(255,222,173);*/
	background-color: #8bc792;
	color: white;
	/*height: 15vw;*/
}

/*mobile first design */

@media only screen and (min-width: 320px){
	//
}

@media only screen and (min-width: 768px){
	#dBody {
	padding: 1.5vw 3vw;
	}

	#header-wrapper {
		height: 9.5vw;
	}

	.fixed-wrapper {
		
	}

	.header {
		font-size: 7vw;
		text-align: left;
		padding: 1vw 1vw;
	}

	.fixed-wrapper-scrolled {
		height: 8vw;
	}

	.header-scrolled {
		font-size: 6vw;
	}

	.genInfo {
		width: 90%;
		padding: 0.5vw 2vw;
	}

	.genInfo, .genInfo > p {
		font-size: 2vw;
	}

	#menu > a {
		padding: .75vw 2vw;
	}

	.genHeading {
		font-size: 4.5vw;
	}

	.pics {
		max-width: 70%;
	}

	#footer {
		height: 10vw;
	}

}

@media only screen and (min-width: 1200px){
	#dBody {
		padding: 0.5vw 2vw;
	}

	#header-wrapper {
		height: 6vw;
	}

	.header {
		font-size: 3.5vw;
		text-align: left;
	}

	.fixed-wrapper-scrolled {
		height: 5vw;
	}

	.header-scrolled {
		font-size: 2.75vw;
	}

	.genInfo > p {
		font-size: 1.1vw;
	}

	.genInfo {
		width: 80%;
		font-size: 1.1vw;
	}

	.genHeading {
		font-size: 3vw;
	}

	.pics {
		max-width: 40%;
	}

	#footer {
		height: 5vw;
	}

}


/* 
things to change for media query
header-wrapper height
header font size
header scrolled height and font size
*/