@charset "UTF-8";
/* CSS Document */

#timings_container {border: 1px solid black;
					height: 530px;
					width: 530px;
					margin: 0 auto;
					padding: 10px;
					position: relative;}

#ease.box {border: 1px solid red;
			transition: all 4s ease 0s;}

#ease-in.box {border: 1px solid orange;
				transition: all 4s ease-in 0s;}

#ease-out.box {border: 1px solid yellow;
				transition: all 4s ease-out 0s;}

#ease-in-out.box {border: 1px solid green;
					transition: all 4s ease-in-out 0s;}

#linear.box {border: 1px solid blue;
			transition: all 4s linear 0s;}

#custom.box {border: 1px solid purple;
			transition: all 4s cubic-bezier(1,0,0.835,0.945)0s;}

#negative.box {border: 1px solid pink;
				transition: all 4s cubic-bezier(1,-0.53,0.405,1.425)0s;}

#timings_container:hover .box{background-color: white;
								color:black;
								border-radius: 30px;
								margin-left: 420px;
								transform: rotate(720deg);}

.box {font-size: 12px;
		height: 60px;
		width: 60px;
		margin-bottom: 10px;
		position: relative;
		background-color: #626262;
		color: white;}

.box p {text-align: center;
		padding: 4px;}