@charset "utf-8"

div {
	display:block;
}

.changeMe {
	background-image:url(images/cardBack.png);
	padding:6px;
	margin-top:40px;
	margin-left:auto;
	margin-right:auto;
	width:330px;
	height:470px;
	cursor:pointer;
}

.changeMe:hover {
	background-image:url(images/cardFront.png);
}

#expander {
	margin-top:20px;
	margin-auto:20px;
	width: 100px;
	height: 100px;
	background-color: #ADD8E6;
	transition: all 3s;
}

#simpleAnim {
	background-color:#296D98;
	width:200px;
	height:200px;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	cursor:pointer;
}

#simpleAnim.trigger{
	animation:myAnim 3s 1 ease-in-out;
}

	@keyframes myAnim {
	0%,100% {width:200px; background-color:#296D98; opacity: 100%;}
	30% {width:400px; transform:rotate(90deg);}
	60% {transform:rotate(180deg); background-color:#8E1600;opacity: 50%;}
	}