/* ---------------------------------------- 
Dahee
---------------------------------------- */

/* NOTES:

1. DO NOT use width or height properties for any parent-level divs (these are divs you will be adding classes to).
2. Use % over px for sizing interior divs
3. Remember: if you do not give dimention and style to interior divs, we will not see them. By default, divs are invisible.

*/

/* so we can tell that our file is loading */
body {
	background: #ffffff;
}

/*div {
	border-width: 300%;
	border-color: white;
	border-style: outset;
}
*/

.example {
	background-color: black;
}

.magenta {
	background-color: black;
}

.yellow {
	background-color: black;
}

/*.example div {
	;
	margin-top: 0%
	background-size:cover;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
*/

.example:hover {
	background-image: url(../images/abstract_1.jpg);
	transition-duration: .7s;
	background-repeat: no-repeat;
	background-size: 100%;
}

.magenta:hover {
	background-color: black;
	background-image: url(../images/abstract_2.jpg);
	transition-duration: .7s;
	background-repeat: no-repeat;
	background-size: 100%;
}

.yellow:hover {
	background-color: black;
	background-image: url(../images/abstract_3.jpg);
	transition-duration: .7s;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
}

.example:active {
	background-image: url(../images/abstract_1_inverse.jpg);
	cursor: pointer;
	transform: rotate(0deg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left bottom;
}

.magenta:active {
	background-image: url(../images/abstract_2_inverse.jpg);
	background-color: #1409c5;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left bottom;
}

.yellow:active {
	background-image: url(../images/abstract_3_inverse.jpg);
	background-color: #6305e2;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left bottom;
}