// tiny bounce animation (for arrows pointing down) 
@-webkit-keyframes bounce_small { 
	0%, 50%, 100% {-webkit-transform: translateY(0px);}
	20% {-webkit-transform: translateY(-2px);}
	80% {-webkit-transform: translateY(2px);}
} 

@keyframes bounce_small { 
	0%, 50%, 100% {transform: translateY(0px);}
	20% {transform: translateY(-2px);}
	80% {transform: translateY(2px);}
}

// rotate clockwise animation
@-webkit-keyframes rotate_clockwise { 
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
} 

@keyframes rotate_clockwise { 
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

// rotate clockwise animation
@-webkit-keyframes rotate_counter_clockwise { 
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(-360deg);}
} 

@keyframes rotate_counter_clockwise { 
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}

// fade in and out animation
@-webkit-keyframes fade_in_out { 
	0% {-webkit-opacity: 0;}
	20% {-webkit-opacity: 0;}
	35% {-webkit-opacity: 1;}
	50% {-webkit-opacity: 0;}
	80% {-webkit-opacity: 0;}
	90% {-webkit-opacity: 0.6;}
	100% {-webkit-opacity: 0;}
} 

@keyframes fade_in_out { 
	0% {opacity: 0;}
	20% {opacity: 0;}
	35% {opacity: 1;}
	50% {opacity: 0;}
	80% {opacity: 0;}
	90% {opacity: 0.6;}
	100% {opacity: 0;}
}

// fade in animation
@-webkit-keyframes fade_in { 
	0% {-webkit-opacity: 0;}
	100% {-webkit-opacity: 1;}
} 

@keyframes fade_in { 
	0% {opacity: 0;}
	100% {opacity: 1;}
}

// grow and shrink animation
@-webkit-keyframes grow_shrink { 
	0% {-webkit-transform: scale(0.9, 0.9);}
	50% {-webkit-transform: scale(1, 1);}
	100% {-webkit-transform: scale(0.9, 0.9);}
} 

@keyframes grow_shrink { 
	0% {transform: scale(0.9, 0.9);}
	50% {transform: scale(1, 1);}
	100% {transform: scale(0.9, 0.9);}
}

@-ms-keyframes grow_shrink { 
	0% {-ms-transform: scale(0.9, 0.9);}
	50% {-ms-transform: scale(1, 1);}
	100% {-ms-transform: scale(0.9, 0.9);}
}

// shrink and grow animation
@-webkit-keyframes shrink_grow { 
	0% {-webkit-transform: scale(1, 1);}
	50% {-webkit-transform: scale(0.9, 0.9);}
	100% {-webkit-transform: scale(1, 1);}
} 

@keyframes shrink_grow { 
	0% {transform: scale(1, 1);}
	50% {transform: scale(0.9, 0.9);}
	100% {transform: scale(1, 1);}
}

@-ms-keyframes shrink_grow { 
	0% {-ms-transform: scale(1, 1);}
	50% {-ms-transform: scale(0.9, 0.9);}
	100% {-ms-transform: scale(1, 1);}
}