@charset "UTF-8";
body {
	background-color: #4D3D71;
	margin-top: 100px;
}

section {
	width: 800px;
	margin: 0 auto;
	padding: 75px;
	background-color: white;
}

h2 {
	
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.75em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: letter-spacing .5s;
	
}

/*TRANSITIONS*/

h2.ts {
	
	color: #e2a52a;
	padding-bottom: 50px;
}

h2.ts:hover {
	
	letter-spacing: 1em;
	
}

#box1 {
	
width: 75px;
height: 75px;
background-color: #DF5153;
transition: all 2s ease-out;

}

#box1:hover {
	width: 800px;
	background-color: #FFDE29;
}

#box2 {
	
width: 75px;
height: 75px;
background-color: #999999;
border: 15px solid black;
margin-top: 75px;
margin-right: 150px;
float: left;
transition: all .5s
	}

#box2:hover {
	
	background-color: black;
	border-color: #999999;
}

#box3 {
	
	width: 250px;
	height: 250px;
	margin-top: 75px;
	background-image: url("../images/ghost1.jpg");
	float: left;
	transition: all 3s ease-in-out;
	}

#box3:active {
	background-image: url("../images/ghost2.jpg")
}

#box4 {
	width: 75px;
	height: 75px;
	background-color: #2AAEC4;
	float: left;
	margin: 75px 0 0 150px;
	opacity: 1;
	transition: all 2s;
}

#box4:hover {
	opacity: 0;
}

/*TRANSFORMS*/

#transforms {
	
	margin-top: 75px;
}

h2.tf {
	
	color: #4EB98C;
	padding-bottom: 50px;
	display: inline-block;
	transition: all 1s;
}

h2.tf:hover {
	transform: rotate(360deg)
}

#box5 img {
	
	width:25px;
	transition: all .25s;
}

#box5 img:hover{
	
	transform: scale(24);
	transform-origin: bottom left;
}

#box6 {
	
	width: 75px;
	height: 75px;
	margin-top: 75px;
	background-color: #FFDE29;
	transition: all .8s ease-in-out;
}

#box6:active {
	
	transform: translateX(700px);
	background-color:#DF5153; 
	
}