/* These are the animations that determine how items would be loaded on to the screen */

.animate-top{position:relative;animation:animatetop 0.4s}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}

.animate-left{position:relative;animation:animateleft 0.4s}
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}

.animate-right{position:relative;animation:animateright 0.4s}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}

.animate-bottom{position:relative;animation:animatebottom 0.4s}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}

.animate-zoom {animation:animatezoom 0.6s}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

.animate-bottom2{position:relative;animation:animatebottom 2s}
@keyframes animatebottom{from{bottom:-8px;opacity:0} to{bottom:0;opacity:1}}

.spin{animation:spin 4s infinite linear}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}