/* landing container*/
.landing{
	background: url("../images/doom.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100vw;
	height: 100vh;
}
.landing > div{
	width: 100vw;
	position: absolute;
	bottom: 2vh;
	text-align: center;
}
.landing h1{
	color: #fff;
	font-size: 4em;
	font-weight: 300;
	margin: 0;
}
.landing h2{
	color: #fff;
	font-size: 1.5em;
	font-weight: 300;
	margin: 0;
}
.landing nav{
	padding-top: 1%;
}
.landing nav div{
	background: #fff;
	color: #000;
	padding: 1% 2%;
	margin: 0 1%;
	width: 120px;
	display: inline-block;
	cursor: pointer;
}

/* work and education containers */
.work, .education{
	padding: 1% 0;
	max-width: 1500px;
	width: 100%;
	margin: 0 auto;
}
.work>h1, .education>h1{
	text-align: center;
	font-size: 3em;
	font-weight: 300;
	margin: 0;
}
.work>div, .education>div{
	width: 41%;
	margin: 2% 3%;
	display: inline-block;
	vertical-align: top;
	font-size: 0.85em;
	padding: 1%;
}
.image-title {
	border-bottom: 1px solid #bdc3c7;
	padding-bottom: 1%;
}
.image-title img{
	width: 20%;
	display: inline-block;
	vertical-align: middle;
}
.image-title div{
	width: 78%;
	display: inline-block;
	vertical-align: middle;
	padding-left: 1%;
}
.work div h1, .education div h1{
	font-size: 2em;
	font-weight: 300;
	margin: 0;
}
.work div h2, .education div h2{
	font-size: 1em;
	font-weight: 400;
	margin: 0;
}
.work div h3, .education div h3{
	font-size: 1em;
	font-weight: 400;
	margin: 2% 0 0 0;
}
.work ul, .education ul{
	font-weight: 300;
	margin: 1% 0 0 0;
}
.work li, .education li{
	font-size: 1.1em;
	padding: 0 0 1.5% 0;
	line-height: 1.4;
}

/* work container */
.work{
	width: 100vw;
}
.work nav{
	width: 100vw;
	text-align: center;
}
.work nav div{
	background: #000;
	color: #fff;
	padding: 1% 2%;
	margin: 0 auto;
	width: 120px;
	cursor: pointer;
}

/* education container */
.education{
	width: 100vw;
}


/* Media Queries */
@media only screen and (max-width: 950px){
	.image-title{
		text-align: center;
	}
	.image-title img{
		width: 40%;
	}
	.landing{
		background: url("../images/doom.jpg") no-repeat center center ; 
		background-size: 250%;
	}
}
@media only screen and (max-width: 776px){
	.work>h1, .education>h1{
		font-size: 2em;
	}
	.work>div, .education>div{
		width: 49vw;
		margin: 0;
		font-size: 0.9em;
		padding: 1% 0;
	}
	.image-title img{
		width: 60%;
	}
	.work ul, .education ul{
		padding: 0 2% 0 8%;
	}
	.work li, .education li{
		padding: 0.2% 0;
	}
}

@media only screen and (max-width: 600px){
	.landing{
		background: url("../images/doom.jpg") no-repeat center center ; 
		background-size: 250%;
	}
	.work>div, .education>div{
		width: 100vw;
		margin: 0;
		font-size: 0.9em;
		padding: 1% 0;
	}
	.image-title img{
		width: 60%;
	}
	.work div h3, .education div h3{
		padding-left: 2%;
	}
}