.spin{animation:spin 2s infinite linear}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.animate-fading{animation:fading 10s}@keyframes fading{0%{opacity:0}50%{opacity:1}}
.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.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-input{transition:width 0.4s ease-in-out}.animate-input:focus{width:100%!important}

.balboxanimation{position:relative;animation:balboxanimation 5s}@keyframes balboxanimation{from{left:-300px;opacity:0} to{left:-20;opacity:1}}
.animate-slowzoom {animation:animatezoom 2s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-slowzoom2 {animation:animatezoom 4s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-slowzoom3 {animation:animatezoom 6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

@keyframes navbaranimation{from{top:-7vh;opacity:1} to{left:0;opacity:1}}
@keyframes logoanimation{from{left:-30vh;opacity:1} to{left:8px;opacity:1}}
@keyframes footeranimation{from{bottom:-20vh;opacity:1} to{bottom:0px;opacity:1}}