body {
width: 100%;
margin:0;
height:100%;
padding-bottom:100px;
}
@font-face{
	font-family: komaxFont;
	src: url(KOMIKAX_.ttf);
}
.finalProjectDescription{
	width:75%;
	margin:0 auto;
	font-family: komaxFont;
}
main{
	width:100%;
}
#comedy{
	background-image: url('../../images/Home/PokemonGo.jpg');
   	background-size: cover;
    	background-repeat: no-repeat;
    	background-position: 75%; 
	width: 33.33%;
	height:100%;
	float: left;
}
#characterDesign{	
	background-image: url('../../images/Home/anger.jpg');
   	background-size: auto;
    	background-repeat: no-repeat;
    	background-position: 30%; 
	width: 33.33%;
	height:100%;
	float: left;
}
#otherWorks{
    	background-image: url('../../images/Home/manerism.jpg');
   	background-size: cover;
    	background-repeat: no-repeat;
    	background-position: 20%; 
	width: 33.33%;
	height:100%;
	float: left;
}
.overlay{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.0);
	transition: background-color .6s;
}
.title{
	position:relative;
	text-align:center;
	top:50%;
	opacity:0;
	color: #E84D87;
	font-family: "Lucida Grande", Optima, Verdana, Arial, Futura, Geneva, Swiss, Helvetica, SunSans-Regular, sans-serif;
  	font-weight: bold;
	transition: opacity .5s;
}
.overlay:hover{
	background: rgba(0, 0, 0, 0.5);
}
.overlay:hover .title{
	opacity:1;
}
.imgNavWrapper{
	margin: 0 auto;
	position: absolute;
	height: calc(50% + 100px);
	top: 210px;
}
@media screen and (max-width: 1000px){
	.imgNavWrapper{
		left: 250px;
		width: 500px;
	}
}	
@media screen and (min-width: 1000px){
	.imgNavWrapper{
		left: 25vw;
		width: 50vw;	
	}
}