@charset "utf-8";

.kaushan-script-regular {
  font-family: "Kaushan Script", cursive;
  font-weight: 500;
  font-style: normal;
}

body{
	background-color: #000000;
}

nav {
	width: 750px;
	margin: 100px auto 0 auto;
}

#inspiration, #design, #other, #work {
	width: 150px;
	margin-right: 50px;
	position: relative; 
	float: left;	
}

#work {
	margin: 0;
}

/*IMAGES*/
.zenitsu, .nezuko, .inosuke,.tanjiro {
	width: 150px;
	height: 150px;
	background-image:url("../images/project1-step2.png");
	background-repeat: no-repeat;	
	overflow: hidden;
}


/*drop down menu*/
li a {
	display: block;
	width: 150px;
	font-family:"Kaushan Script", Helvetica, Arial, "sans-serif";
	font-size: .8em;
	text-transform: uppercase;
	line-height: 32px;
	background-color:#B9B9B9;
	color: white;
	border-bottom: 1.5px dashed black;
	text-align: center;
}



.zenitsu{
	background-position: 0 -150px;
	transition: all .5s ease-in-out;
}
.nezuko {
	background-position: -150px -150px;
	transition: all .5s ease-in-out;
}
.inosuke {
	background-position: -300px -150px;
	transition: all .5s ease-in-out;
}
.tanjiro {
	background-position: -450px -150px;
	transition: all .5s ease-in-out;
}

/*HOVERS*/

.zenitsu:hover{
	background-position: 0px 0px;
	transition: all .5s ease-in-out;
}

.nezuko:hover{
	background-position: -150px 0px;
	transition: all .5s ease-in-out;
}

.inosuke:hover{
	background-position: -300px 0px;
	transition: all .5s ease-in-out;
}

.tanjiro:hover{
	background-position: -450px 0px;
	transition: all .5s ease-in-out;
}

/*DROP DOWNS*/


/*TOP DOWN MENUS */

.inspirational{
	background-color: #E5C701;
	border-bottom: none;
}

.design{
	background-color: #BE2F78;
	border-bottom: none;
}

.other{
	background-color: #3E81D8;
	border-bottom: none;
}
.work{
	background-color: #5AD72E;
	border-bottom: none;
}

a.inspirational:hover, a.design:hover, a.other:hover, a.work:hover{
	background-color: black;
	border-bottom: none;
}

/*HIDE SHOW MENU*/

ul.submenu {
	position: absolute;
	left:-9000em;
	height: 0;
	transition: height 1.5s ease-in-out;
	overflow: hidden;
}

.topmenu li:hover ul.submenu {
	left: 0;
	height: 500px;
}

/*SUBMENU HOVER*/

ul.submenu li a:hover{
	background-color:#450001 ;
	border-bottom: 2px solid #610001;
	
}