.spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.animate-opacity{animation:opac 0.4s}@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.4s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-zoom-75 {animation:animatezoom 0.4s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(0.75)}}

.animate-opacity-slow{animation:opac 1.2s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top-slow{position:relative;animation:animatetop 1s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.animate-left-slow{position:relative;animation:animateleft 1s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.animate-right-slow{position:relative;animation:animateright 1s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.animate-bottom-slow{position:relative;animation:animatebottom 1s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.animate-zoom-slow {animation:animatezoom 1s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

.animate-opacity-super-slow{animation:opac 2s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top-super-slow{position:relative;animation:animatetop 1.5s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.animate-left-super-slow{position:relative;animation:animateleft 1.5s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.animate-right-super-slow{position:relative;animation:animateright 1.5s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.animate-bottom-super-slow{position:relative;animation:animatebottom 1.5s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.animate-zoom-super-slow {animation:animatezoom 1.5s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

.animate-dely{ animation-delay: 0.4s;}
.animate-dely-slow{ animation-delay: 1s;}
.animate-dely-super-slow{ animation-delay: 1.5s;}

@media only screen and (max-width: 575px) { .animate-sm-none{ animation: none !important;} }
@media only screen and (max-width: 767px) { .animate-md-none{ animation: none !important;} }
@media only screen and (max-width: 991px) { .animate-lg-none{ animation: none !important;} }
@media only screen and (max-width: 1199px) { .animate-xl-none{ animation: none !important;} }
@media only screen and (max-width: 1399px) { .animate-xxl-none{ animation: none !important;} }

@media only screen and (min-width: 576) { .animate-fsm-none{ animation: none !important;} }
@media only screen and (min-width: 768) { .animate-fmd-none{ animation: none !important;} }
@media only screen and (min-width: 992px) { .animate-flg-none{ animation: none !important;} }
@media only screen and (min-width: 1200px) { .animate-fxl-none{ animation: none !important;} }
@media only screen and (min-width: 1400px) { .animate-fxxl-none{ animation: none !important;} }