/* 

Assignment 3
Demo

*/


body {
	font-size: 40px;
	background: url(../images/tilepalm.jpg);
	background-attachment: fixed;
	background-size: contain;
}

.demo-circle { 
	background: url(../images/tileone.jpg);
	background-attachment: fixed;
	background-size: cover;
	border-top-left-radius: 50%;
	border-bottom-right-radius: 60%;
	box-shadow: steelblue 15px 15px;
	opacity: 0.75;
	transform: rotate(320deg);
}

.demo-circle:hover {
	background: url(../images/tileone.jpg);
	background-attachment: fixed;
	background-size: cover;
	opacity: 0.2;
	transition: 1s;
	transform: rotate(180deg);
}

.demo-circle:active {
	background: url(../images/tileone.jpg);
	background-attachment: fixed;
	background-size: cover;
	opacity: 1;
	transition: 0.5s;
}

.demo-square {
	background: url(../images/tilesun.jpg);
	background-attachment: fixed;
	background-size: cover;
	border-top-left-radius: 50%;
	border-bottom-right-radius: 60%;
	box-shadow: orange 75px 75px;
	opacity: 0.79;
	transform: rotate(310deg);
}

.demo-square:hover {
	background: url(../images/tilesun.jpg);
	background-attachment: fixed;
	background-size: cover;
	opacity: 0.2;
	transition: 1.5s;
}

.demo-square:active {
	background: url(../images/tilesun.jpg);
	background-attachment: fixed;
	background-size: cover;
	opacity: 1;
	transition: 0.5s;
}
.demo-lozenge {
	background: url(../images/tilelast.jpg);
	background-attachment: fixed;
	background-size: cover;
	border-top-left-radius: 50%;
	border-bottom-right-radius: 50%;
	box-shadow: black 70px 70px;
	opacity: 0.6;
	transform: rotate(310deg);
	transition: all .2s ease-in-out;
}

.demo-lozenge:hover {
	background: url(../images/tilelast.jpg);
	background-attachment: fixed;
	background-size: cover;
	opacity: 0.2;
	transition: 2s;
	transform: scale(1.2);
}

.demo-lozenge:active {
	background: url(../images/tilelast.jpg);
	background-attachment: fixed;
	background-size: cover;
	opacity: 1;
	transition: 0.5s;
}