/* Default Transition Setting */
.transition {
	transition:all 0.5s ease;
}

/*------------------------------------*\
	CSS3 Transitions
\*------------------------------------*/

/* Fade */
.fade {
	opacity: 1;
}
.fade:hover {
	opacity: 0.6;	
}

/* Grow */
.grow:hover {
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}

/* Shrink */
.shrink:hover {
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
}

/* Rotate */
.rotate:hover {
	-webkit-transform: rotateZ(-30deg);
	-ms-transform: rotateZ(-30deg);
	transform: rotateZ(-30deg);
}

/* Circle */
.circle:hover {
	border-radius:50%;
}

/* 3D Shadow */
.threed:hover {
	box-shadow:
					1px 1px #53a7ea,
					2px 2px #53a7ea,
					3px 3px #53a7ea;
	-webkit-transform: translateX(-3px);
	transform: translateX(-3px);
}

/* Swing */
.swing:hover {
	-webkit-animation: swing 1s ease;
	animation: swing 1s ease;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

/* circular rotate */
.circular-rotate:hover {
	 -webkit-animation: rotate 14s linear infinite;
	 animation:rotate 14s linear infinite;
	/* microsoft ie */
	animation-name: spin; 
	animation-duration: 14000ms; /* 14 seconds */
	animation-iteration-count: infinite; 
	animation-timing-function: linear;	
	/* opera */
	-o-transition: rotate(3600deg); /* works */
}

@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(180deg);
    }
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
`
@-webkit-keyframes swing
{
	15%
	{
			-webkit-transform: translateX(5px);
			transform: translateX(5px);
	}
	30%
	{
			-webkit-transform: translateX(-5px);
		 transform: translateX(-5px);
	} 
	50%
	{
			-webkit-transform: translateX(3px);
			transform: translateX(3px);
	}
	65%
	{
			-webkit-transform: translateX(-3px);
			transform: translateX(-3px);
	}
	80%
	{
			-webkit-transform: translateX(2px);
			transform: translateX(2px);
	}
	100%
	{
			-webkit-transform: translateX(0);
			transform: translateX(0);
	}
}
@keyframes swing
{
	15%
	{
			-webkit-transform: translateX(5px);
			transform: translateX(5px);
	}
	30%
	{
			-webkit-transform: translateX(-5px);
			transform: translateX(-5px);
	}
	50%
	{
			-webkit-transform: translateX(3px);
			transform: translateX(3px);
	}
	65%
	{
			-webkit-transform: translateX(-3px);
			transform: translateX(-3px);
	}
	80%
	{
			-webkit-transform: translateX(2px);
			transform: translateX(2px);
	}
	100%
	{
			-webkit-transform: translateX(0);
			transform: translateX(0);
	}
}