/* 

Assignment 3
Demo

*/

body {
	background-color: black;
}

/*.square.mz { background: black; }*/

.mz.demo-circle { 
	animation-name: redchange;
    background-color:red;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    
  /*  width:150px;
    height:150px;*/

    

	/*
	/*margin-left:20px;
	margin-top:0px;*/

}
.mz.demo-circle:hover{
	background-image: url(../images/source.gif);
	background-size:cover;
	background-position: center;

}
@keyframes redchange{
	0%{ background-color :#e30a20; }
	25%{background-color:#f92037;}
	50%{background-color:#f95820;}
	75%{background-color:#f93f20;}
	100%{ background-color :#e30a20; }
	0%{transform:rotate(360deg);}
   100%{transform:rotate(0deg);}
	}
/*.mz.demo-circle:hover{
	
	transform:rotate(90deg);
	opacity: 2px;
	border-radius: 100%;


}*/
.mz.rotate{
	
    border:solid black 2px;
    -webkit-transition: width 1s; /* Safari */
    transition: width 1s;
}
.mz.rotate:hover{
	 width: 150px;
}
.mz.demo-square {
	

	background: none;
	border: inset 2px white;
	animation-name:rotatee;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	cursor:help;
	
	

}
.mz.demo-square:active{
	background-image: url(../images/source4.gif);
	background-size: cover;
	background-position: center;
}
@keyframes rotatee{
   0%{transform:rotate(0deg);}
   50%{transform:rotate(180deg);}
   100%{transform:rotate(360deg);}


}