spicon 0.0.3 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 41aaea5d725d22aa2ff243e73f4215e8827200d6
-  data.tar.gz: f4659f9f56c6b1da3fc2d1864c95c308576c5693
+  metadata.gz: 73ea0c0fd270d903449c2fcf7fb14bfdd81ea473
+  data.tar.gz: d7a91735f128a268566dd42b9492c6d2bbb0ac75
 SHA512:
-  metadata.gz: cd96c4e13e13c370bc72af5ededa0e496a88bd50d29b76e778c900a97d57d79711dfc70dad002386124ca025dafa89f44edb82572a4eb19515a8dc5538ae04d4
-  data.tar.gz: 5be70490fbafa75eb21f9941fe969934502f5fe6fc61e73b3b92a925ef790ba0fab487478e98f12dc219dfb83b215fef09d6e2ebf278340afa50b5d361366060
+  metadata.gz: 1d91c33848fb00162d45de91e219069ca6dbb7d65827ca0fb649c616ee4d68c8905b39c7067125cc6bdb6eee8d8a590d3ec9e4789039cd0fb5dbb1469ab01b41
+  data.tar.gz: 2374153f7397a0fad8f0aaf7cd31e1e479cf027a33e28d6c25e184e5ef62f8492b881849557738e759aa0dfb2157ed3706677b934af1c5b903d211a408e04206

data/README.md

@@ -3,6 +3,10 @@
 
 > Cool feature that makes any element on your Rails application spin on mouseover.
 
+## Demo
+
+  [See spicon in action!](http://spicon.herokuapp.com)
+
 ## Supports
 
     Rails 2.3+
@@ -41,21 +45,23 @@ By using `.spicon` class by default the element will spin for `2 secs(2000ms)`,
 
 When using customized classes make sure you use it in the following format :
 
-    .spicon-{duration of the spin}-{number of spins}-{direction of the spin}
+    .spicon-spin.duration-{duration of the spin}s.iteration-{number of spins}.{direction of the spin}
 
 for instance,
 
-	.spicon-4s-2-alternate_reverse	
+	.spicon-spin.duration-4s.iteration-2.alternate-reverse	
+
++ The first class represents spicon-spin which will just spin the icon
 
-+ The first attribute represents the `duration of the spin` in seconds. Accordigly you can specify a number of your choice ranging from `1s(fastest) to 10s(slowest)`
++ The second class represents the `duration of the spin` in seconds. Accordigly you can specify a number of your choice ranging from `1s(fastest) to 10s(slowest)`
 
-+ The second attribute represents the `number of spins` ranging from `1 to 6`. You can also use `infinite` instead of a number for infinite spins.
++ The third class represents the `number of spins` ranging from `1 to 6`. You can also use `infinite` instead of a number for infinite spins.
 
-+ The third attribute represents the `direction of spin`, various options are
++ The fourth class represents the `direction of spin`, various options are
 	- `normal` - Spins in clockwise direction
 	- `reverse` - Spins in anti-clockwise direction
 	- `alternate` - Spins in clockwise direction first and then anticlockwise alternately
-	- `alternate_reverse` - Spins in anti-clockwise direction first and then clockwise alternately
+	- `alternate-reverse` - Spins in anti-clockwise direction first and then clockwise alternately
 
 ## Contributing
 

data/app/assets/stylesheets/spicon.css

@@ -66,2025 +66,166 @@
 	animation: spin 2s infinite alternate;
 }
 
-/* 1s */
-
-/* Spicon 1s-x-normal classes */
-
-.spicon-1s-1-normal:hover {
-  -webkit-animation: spin 1s 1 normal;
-  -moz-animation: spin 1s 1 normal;
-  -ms-animation: spin 1s 1 normal;
-  -o-animation: spin 1s 1 normal;
-  animation: spin 1s 1 normal;
-}
-
-.spicon-1s-2-normal:hover {
-  -webkit-animation: spin 1s 2 normal;
-  -moz-animation: spin 1s 2 normal;
-  -ms-animation: spin 1s 2 normal;
-  -o-animation: spin 1s 2 normal;
-  animation: spin 1s 2 normal;
-}
-
-.spicon-1s-3-normal:hover {
-  -webkit-animation: spin 1s 3 normal;
-  -moz-animation: spin 1s 3 normal;
-  -ms-animation: spin 1s 3 normal;
-  -o-animation: spin 1s 3 normal;
-  animation: spin 1s 3 normal;  
-}
-
-.spicon-1s-4-normal:hover {
-  -webkit-animation: spin 1s 4 normal;
-  -moz-animation: spin 1s 4 normal;
-  -ms-animation: spin 1s 4 normal;
-  -o-animation: spin 1s 4 normal;
-  animation: spin 1s 4 normal;  
-}
-
-.spicon-1s-5-normal:hover {
-  -webkit-animation: spin 1s 5 normal;
-  -moz-animation: spin 1s 5 normal;
-  -ms-animation: spin 1s 5 normal;
-  -o-animation: spin 1s 5 normal;
-  animation: spin 1s 5 normal;  
-}
-
-.spicon-1s-6-normal:hover {
-  -webkit-animation: spin 1s 6 normal;
-  -moz-animation: spin 1s 6 normal;
-  -ms-animation: spin 1s 6 normal;
-  -o-animation: spin 1s 6 normal;
-  animation: spin 1s 6 normal;  
-}
-
-/* Spicon 1s-x-reverse classes */
-
-.spicon-1s-1-reverse:hover {
-  -webkit-animation: spin 1s 1 reverse;
-  -moz-animation: spin 1s 1 reverse;
-  -ms-animation: spin 1s 1 reverse;
-  -o-animation: spin 1s 1 reverse;
-  animation: spin 1s 1 reverse;
-}
-
-.spicon-1s-2-reverse:hover {
-  -webkit-animation: spin 1s 2 reverse;
-  -moz-animation: spin 1s 2 reverse;
-  -ms-animation: spin 1s 2 reverse;
-  -o-animation: spin 1s 2 reverse;
-  animation: spin 1s 2 reverse;
-}
-
-.spicon-1s-3-reverse:hover {
-  -webkit-animation: spin 1s 3 reverse;
-  -moz-animation: spin 1s 3 reverse;
-  -ms-animation: spin 1s 3 reverse;
-  -o-animation: spin 1s 3 reverse;
-  animation: spin 1s 3 reverse;  
-}
-
-.spicon-1s-4-reverse:hover {
-  -webkit-animation: spin 1s 4 reverse;
-  -moz-animation: spin 1s 4 reverse;
-  -ms-animation: spin 1s 4 reverse;
-  -o-animation: spin 1s 4 reverse;
-  animation: spin 1s 4 reverse;  
-}
-
-.spicon-1s-5-reverse:hover {
-  -webkit-animation: spin 1s 5 reverse;
-  -moz-animation: spin 1s 5 reverse;
-  -ms-animation: spin 1s 5 reverse;
-  -o-animation: spin 1s 5 reverse;
-  animation: spin 1s 5 reverse;  
-}
-
-.spicon-1s-6-reverse:hover {
-  -webkit-animation: spin 1s 6 reverse;
-  -moz-animation: spin 1s 6 reverse;
-  -ms-animation: spin 1s 6 reverse;
-  -o-animation: spin 1s 6 reverse;
-  animation: spin 1s 6 reverse;
-}
-
-/* Spicon 1s-x-alternate classes */
-
-.spicon-1s-1-alternate:hover {
-  -webkit-animation: spin 1s 1 alternate;
-  -moz-animation: spin 1s 1 alternate;
-  -ms-animation: spin 1s 1 alternate;
-  -o-animation: spin 1s 1 alternate;
-  animation: spin 1s 1 alternate;
-}
-
-.spicon-1s-2-alternate:hover {
-  -webkit-animation: spin 1s 2 alternate;
-  -moz-animation: spin 1s 2 alternate;
-  -ms-animation: spin 1s 2 alternate;
-  -o-animation: spin 1s 2 alternate;
-  animation: spin 1s 2 alternate;
-}
-
-.spicon-1s-3-alternate:hover {
-  -webkit-animation: spin 1s 3 alternate;
-  -moz-animation: spin 1s 3 alternate;
-  -ms-animation: spin 1s 3 alternate;
-  -o-animation: spin 1s 3 alternate;
-  animation: spin 1s 3 alternate;  
-}
-
-.spicon-1s-4-alternate:hover {
-  -webkit-animation: spin 1s 4 alternate;
-  -moz-animation: spin 1s 4 alternate;
-  -ms-animation: spin 1s 4 alternate;
-  -o-animation: spin 1s 4 alternate;
-  animation: spin 1s 4 alternate;  
-}
-
-.spicon-1s-5-alternate:hover {
-  -webkit-animation: spin 1s 5 alternate;
-  -moz-animation: spin 1s 5 alternate;
-  -ms-animation: spin 1s 5 alternate;
-  -o-animation: spin 1s 5 alternate;
-  animation: spin 1s51 alternate;  
-}
-
-.spicon-1s-6-alternate:hover {
-  -webkit-animation: spin 1s 6 alternate;
-  -moz-animation: spin 1s 6 alternate;
-  -ms-animation: spin 1s 6 alternate;
-  -o-animation: spin 1s 6 alternate;
-  animation: spin 1s 6 alternate;  
-}
-
-/* Spicon 1s-x-alternate_reverse classes */
-
-.spicon-1s-1-alternate_reverse:hover {
-  -webkit-animation: spin 1s 1 alternate-reverse;
-  -moz-animation: spin 1s 1 alternate-reverse;
-  -ms-animation: spin 1s 1 alternate-reverse;
-  -o-animation: spin 1s 1 alternate-reverse;
-  animation: spin 1s 1 alternate-reverse;
-}
-
-.spicon-1s-2-alternate_reverse:hover {
-  -webkit-animation: spin 1s 2 alternate-reverse;
-  -moz-animation: spin 1s 2 alternate-reverse;
-  -ms-animation: spin 1s 2 alternate-reverse;
-  -o-animation: spin 1s 2 alternate-reverse;
-  animation: spin 1s 2 alternate-reverse;
-}
-
-.spicon-1s-3-alternate_reverse:hover {
-  -webkit-animation: spin 1s 3 alternate-reverse;
-  -moz-animation: spin 1s 3 alternate-reverse;
-  -ms-animation: spin 1s 3 alternate-reverse;
-  -o-animation: spin 1s 3 alternate-reverse;
-  animation: spin 1s 3 alternate-reverse;  
-}
-
-.spicon-1s-4-alternate_reverse:hover {
-  -webkit-animation: spin 1s 4 alternate-reverse;
-  -moz-animation: spin 1s 4 alternate-reverse;
-  -ms-animation: spin 1s 4 alternate-reverse;
-  -o-animation: spin 1s 4 alternate-reverse;
-  animation: spin 1s 4 alternate-reverse;  
-}
-
-.spicon-1s-5-alternate_reverse:hover {
-  -webkit-animation: spin 1s 5 alternate-reverse;
-  -moz-animation: spin 1s 5 alternate-reverse;
-  -ms-animation: spin 1s 5 alternate-reverse;
-  -o-animation: spin 1s 5 alternate-reverse;
-  animation: spin 1s 5 alternate-reverse;  
-}
-
-.spicon-1s-6-alternate_reverse:hover {
-  -webkit-animation: spin 1s 6 alternate-reverse;
-  -moz-animation: spin 1s 6 alternate-reverse;
-  -ms-animation: spin 1s 6 alternate-reverse;
-  -o-animation: spin 1s 6 alternate-reverse;
-  animation: spin 1s 6 alternate-reverse;
-}
-
-/* 2s */
-
-/* Spicon 2s-x-normal classes */
-
-.spicon-2s-1-normal:hover {
-  -webkit-animation: spin 2s 1 normal;
-  -moz-animation: spin 2s 1 normal;
-  -ms-animation: spin 2s 1 normal;
-  -o-animation: spin 2s 1 normal;
-  animation: spin 2s 1 normal;
-}
-
-.spicon-2s-2-normal:hover {
-  -webkit-animation: spin 2s 2 normal;
-  -moz-animation: spin 2s 2 normal;
-  -ms-animation: spin 2s 2 normal;
-  -o-animation: spin 2s 2 normal;
-  animation: spin 2s 2 normal;
-}
-
-.spicon-2s-3-normal:hover {
-  -webkit-animation: spin 2s 3 normal;
-  -moz-animation: spin 2s 3 normal;
-  -ms-animation: spin 2s 3 normal;
-  -o-animation: spin 2s 3 normal;
-  animation: spin 2s 3 normal;  
-}
-
-.spicon-2s-4-normal:hover {
-  -webkit-animation: spin 2s 4 normal;
-  -moz-animation: spin 2s 4 normal;
-  -ms-animation: spin 2s 4 normal;
-  -o-animation: spin 2s 4 normal;
-  animation: spin 2s 4 normal; 
-}
-
-.spicon-2s-5-normal:hover {
-  -webkit-animation: spin 2s 5 normal;
-  -moz-animation: spin 2s 5 normal;
-  -ms-animation: spin 2s 5 normal;
-  -o-animation: spin 2s 5 normal;
-  animation: spin 2s 5 normal;  
-}
-
-.spicon-2s-6-normal:hover {
-  -webkit-animation: spin 2s 6 normal;
-  -moz-animation: spin 2s 6 normal;
-  -ms-animation: spin 2s 6 normal;
-  -o-animation: spin 2s 6 normal;
-  animation: spin 2s 6 normal;  
-}
-
-/* Spicon 2s-x-reverse classes */
-
-.spicon-2s-1-reverse:hover {
-  -webkit-animation: spin 2s 1 reverse;
-  -moz-animation: spin 2s 1 reverse;
-  -ms-animation: spin 2s 1 reverse;
-  -o-animation: spin 2s 1 reverse;
-  animation: spin 2s 1 reverse;
-}
-
-.spicon-2s-2-reverse:hover {
-  -webkit-animation: spin 2s 2 reverse;
-  -moz-animation: spin 2s 2 reverse;
-  -ms-animation: spin 2s 2 reverse;
-  -o-animation: spin 2s 2 reverse;
-  animation: spin 2s 2 reverse;
-}
-
-.spicon-2s-3-reverse:hover {
-  -webkit-animation: spin 2s 3 reverse;
-  -moz-animation: spin 2s 3 reverse;
-  -ms-animation: spin 2s 3 reverse;
-  -o-animation: spin 2s 3 reverse;
-  animation: spin 2s 3 reverse;  
-}
-
-.spicon-2s-4-reverse:hover {
-  -webkit-animation: spin 2s 4 reverse;
-  -moz-animation: spin 2s 4 reverse;
-  -ms-animation: spin 2s 4 reverse;
-  -o-animation: spin 2s 4 reverse;
-  animation: spin 2s 4 reverse;  
-}
-
-.spicon-2s-5-reverse:hover {
-  -webkit-animation: spin 2s 5 reverse;
-  -moz-animation: spin 2s 5 reverse;
-  -ms-animation: spin 2s 5 reverse;
-  -o-animation: spin 2s 5 reverse;
-  animation: spin 2s 5 reverse;  
-}
-
-.spicon-2s-6-reverse:hover {
-  -webkit-animation: spin 2s 6 reverse;
-  -moz-animation: spin 2s 6 reverse;
-  -ms-animation: spin 2s 6 reverse;
-  -o-animation: spin 2s 6 reverse;
-  animation: spin 2s 6 reverse;  
-}
-
-/* Spicon 2s-x-alternate classes */
-
-.spicon-2s-1-alternate:hover {
-  -webkit-animation: spin 2s 1 alternate;
-  -moz-animation: spin 2s 1 alternate;
-  -ms-animation: spin 2s 1 alternate;
-  -o-animation: spin 2s 1 alternate;
-  animation: spin 2s 1 alternate;
-}
-
-.spicon-2s-2-alternate:hover {
-  -webkit-animation: spin 2s 2 alternate;
-  -moz-animation: spin 2s 2 alternate;
-  -ms-animation: spin 2s 2 alternate;
-  -o-animation: spin 2s 2 alternate;
-  animation: spin 2s 2 alternate;
-}
-
-.spicon-2s-3-alternate:hover {
-  -webkit-animation: spin 2s 3 alternate;
-  -moz-animation: spin 2s 3 alternate;
-  -ms-animation: spin 2s 3 alternate;
-  -o-animation: spin 2s 3 alternate;
-  animation: spin 2s 3 alternate;  
-}
-
-.spicon-2s-4-alternate:hover {
-  -webkit-animation: spin 2s 4 alternate;
-  -moz-animation: spin 2s 4 alternate;
-  -ms-animation: spin 2s 4 alternate;
-  -o-animation: spin 2s 4 alternate;
-  animation: spin 2s 4 alternate;  
-}
-
-.spicon-2s-5-alternate:hover {
-  -webkit-animation: spin 2s 5 alternate;
-  -moz-animation: spin 2s 5 alternate;
-  -ms-animation: spin 2s 5 alternate;
-  -o-animation: spin 2s 5 alternate;
-  animation: spin 2s 5 alternate;  
-}
-
-.spicon-2s-6-alternate:hover {
-  -webkit-animation: spin 2s 6 alternate;
-  -moz-animation: spin 2s 6 alternate;
-  -ms-animation: spin 2s 6 alternate;
-  -o-animation: spin 2s 6 alternate;
-  animation: spin 2s 6 alternate;  
-}
-
-/* Spicon 2s-x-alternate_reverse classes */
-
-.spicon-2s-1-alternate_reverse:hover {
-  -webkit-animation: spin 2s 1 alternate_reverse;
-  -moz-animation: spin 2s 1 alternate_reverse;
-  -ms-animation: spin 2s 1 alternate_reverse;
-  -o-animation: spin 2s 1 alternate_reverse;
-  animation: spin 2s 1 alternate_reverse;
-}
-
-.spicon-2s-2-alternate_reverse:hover {
-  -webkit-animation: spin 2s 2 alternate-reverse;
-  -moz-animation: spin 2s 2 alternate-reverse;
-  -ms-animation: spin 2s 2 alternate-reverse;
-  -o-animation: spin 2s 2 alternate-reverse;
-  animation: spin 2s 2 alternate-reverse;
-}
-
-.spicon-2s-3-alternate_reverse:hover {
-  -webkit-animation: spin 2s 3 alternate-reverse;
-  -moz-animation: spin 2s 3 alternate-reverse;
-  -ms-animation: spin 2s 3 alternate-reverse;
-  -o-animation: spin 2s 3 alternate-reverse;
-  animation: spin 2s 3 alternate-reverse;  
-}
-
-.spicon-2s-4-alternate_reverse:hover {
-  -webkit-animation: spin 2s 4 alternate-reverse;
-  -moz-animation: spin 2s 4 alternate-reverse;
-  -ms-animation: spin 2s 4 alternate-reverse;
-  -o-animation: spin 2s 4 alternate-reverse;
-  animation: spin 2s 4 alternate-reverse;  
-}
-
-.spicon-2s-5-alternate_reverse:hover {
-  -webkit-animation: spin 2s 5 alternate-reverse;
-  -moz-animation: spin 2s 5 alternate-reverse;
-  -ms-animation: spin 2s 5 alternate-reverse;
-  -o-animation: spin 2s 5 alternate-reverse;
-  animation: spin 2s 5 alternate-reverse;  
-}
-
-.spicon-2s-6-alternate_reverse:hover {
-  -webkit-animation: spin 2s 623 alternate-reverse;
-  -moz-animation: spin 2s 6 alternate-reverse;
-  -ms-animation: spin 2s 6 alternate-reverse;
-  -o-animation: spin 2s 6 alternate-reverse;
-  animation: spin 2s 6 alternate-reverse;  
-}
-
-/* 3s */
-
-/* Spicon 3s-x-normal classes */
-
-.spicon-3s-1-normal:hover {
-  -webkit-animation: spin 3s 1 normal;
-  -moz-animation: spin 3s 1 normal;
-  -ms-animation: spin 3s 1 normal;
-  -o-animation: spin 3s 1 normal;
-  animation: spin 3s 1 normal;
-}
-
-.spicon-3s-2-normal:hover {
-  -webkit-animation: spin 3s 2 normal;
-  -moz-animation: spin 3s 2 normal;
-  -ms-animation: spin 3s 2 normal;
-  -o-animation: spin 3s 2 normal;
-  animation: spin 3s 2 normal;
-}
-
-.spicon-3s-3-normal:hover {
-  -webkit-animation: spin 3s 3 normal;
-  -moz-animation: spin 3s 3 normal;
-  -ms-animation: spin 3s 3 normal;
-  -o-animation: spin 3s 3 normal;
-  animation: spin 3s 3 normal;  
-}
-
-.spicon-3s-4-normal:hover {
-  -webkit-animation: spin 3s 4 normal;
-  -moz-animation: spin 3s 4 normal;
-  -ms-animation: spin 3s 4 normal;
-  -o-animation: spin 3s 4 normal;
-  animation: spin 3s 4 normal; 
-}
-
-.spicon-3s-5-normal:hover {
-  -webkit-animation: spin 3s 5 normal;
-  -moz-animation: spin 3s 5 normal;
-  -ms-animation: spin 3s 5 normal;
-  -o-animation: spin 3s 5 normal;
-  animation: spin 3s 5 normal;  
-}
-
-.spicon-3s-6-normal:hover {
-  -webkit-animation: spin 3s 6 normal;
-  -moz-animation: spin 3s 6 normal;
-  -ms-animation: spin 3s 6 normal;
-  -o-animation: spin 3s 6 normal;
-  animation: spin 3s 6 normal;  
-}
-
-/* Spicon 3s-x-reverse classes */
-
-.spicon-3s-1-reverse:hover {
-  -webkit-animation: spin 3s 1 reverse;
-  -moz-animation: spin 3s 1 reverse;
-  -ms-animation: spin 3s 1 reverse;
-  -o-animation: spin 3s 1 reverse;
-  animation: spin 3s 1 reverse;
-}
-
-.spicon-3s-2-reverse:hover {
-  -webkit-animation: spin 3s 2 reverse;
-  -moz-animation: spin 3s 2 reverse;
-  -ms-animation: spin 3s 2 reverse;
-  -o-animation: spin 3s 2 reverse;
-  animation: spin 3s 2 reverse;
-}
-
-.spicon-3s-3-reverse:hover {
-  -webkit-animation: spin 3s 3 reverse;
-  -moz-animation: spin 3s 3 reverse;
-  -ms-animation: spin 3s 3 reverse;
-  -o-animation: spin 3s 3 reverse;
-  animation: spin 3s 3 reverse;  
-}
-
-.spicon-3s-4-reverse:hover {
-  -webkit-animation: spin 3s 4 reverse;
-  -moz-animation: spin 3s 4 reverse;
-  -ms-animation: spin 3s 4 reverse;
-  -o-animation: spin 3s 4 reverse;
-  animation: spin 3s 4 reverse;  
-}
-
-.spicon-3s-5-reverse:hover {
-  -webkit-animation: spin 3s 5 reverse;
-  -moz-animation: spin 3s 5 reverse;
-  -ms-animation: spin 3s 5 reverse;
-  -o-animation: spin 3s 5 reverse;
-  animation: spin 3s 5 reverse;  
-}
-
-.spicon-3s-6-reverse:hover {
-  -webkit-animation: spin 3s 6 reverse;
-  -moz-animation: spin 3s 6 reverse;
-  -ms-animation: spin 3s 6 reverse;
-  -o-animation: spin 3s 6 reverse;
-  animation: spin 3s 6 reverse;  
-}
-
-/* Spicon 3s-x-alternate classes */
-
-.spicon-3s-1-alternate:hover {
-  -webkit-animation: spin 3s 1 alternate;
-  -moz-animation: spin 3s 1 alternate;
-  -ms-animation: spin 3s 1 alternate;
-  -o-animation: spin 3s 1 alternate;
-  animation: spin 3s 1 alternate;
-}
-
-.spicon-3s-2-alternate:hover {
-  -webkit-animation: spin 3s 2 alternate;
-  -moz-animation: spin 3s 2 alternate;
-  -ms-animation: spin 3s 2 alternate;
-  -o-animation: spin 3s 2 alternate;
-  animation: spin 3s 2 alternate;
-}
-
-.spicon-3s-3-alternate:hover {
-  -webkit-animation: spin 3s 3 alternate;
-  -moz-animation: spin 3s 3 alternate;
-  -ms-animation: spin 3s 3 alternate;
-  -o-animation: spin 3s 3 alternate;
-  animation: spin 3s 3 alternate;  
-}
-
-.spicon-3s-4-alternate:hover {
-  -webkit-animation: spin 3s 4 alternate;
-  -moz-animation: spin 3s 4 alternate;
-  -ms-animation: spin 3s 4 alternate;
-  -o-animation: spin 3s 4 alternate;
-  animation: spin 3s 4 alternate;  
-}
-
-.spicon-3s-5-alternate:hover {
-  -webkit-animation: spin 3s 5 alternate;
-  -moz-animation: spin 3s 5 alternate;
-  -ms-animation: spin 3s 5 alternate;
-  -o-animation: spin 3s 5 alternate;
-  animation: spin 3s 5 alternate; 
-}
-
-.spicon-3s-6-alternate:hover {
-  -webkit-animation: spin 3s 6 alternate;
-  -moz-animation: spin 3s 6 alternate;
-  -ms-animation: spin 3s 6 alternate;
-  -o-animation: spin 3s 6 alternate;
-  animation: spin 3s 6 alternate;  
-}
-
-/* Spicon 3s-x-alternate_reverse classes */
-
-.spicon-3s-1-alternate_reverse:hover {
-  -webkit-animation: spin 3s 1 alternate-reverse;
-  -moz-animation: spin 3s 1 alternate-reverse;
-  -ms-animation: spin 3s 1 alternate-reverse;
-  -o-animation: spin 3s 1 alternate-reverse;
-  animation: spin 3s 1 alternate-reverse;
-}
-
-.spicon-3s-2-alternate_reverse:hover {
-  -webkit-animation: spin 3s 2 alternate-reverse;
-  -moz-animation: spin 3s 2 alternate-reverse;
-  -ms-animation: spin 3s 2 alternate-reverse;
-  -o-animation: spin 3s 2 alternate-reverse;
-  animation: spin 3s 2 alternate-reverse;
-}
-
-.spicon-3s-3-alternate_reverse:hover {
-  -webkit-animation: spin 3s 3 alternate-reverse;
-  -moz-animation: spin 3s 3 alternate-reverse;
-  -ms-animation: spin 3s 3 alternate-reverse;
-  -o-animation: spin 3s 3 alternate-reverse;
-  animation: spin 3s 3 alternate-reverse;  
-}
-
-.spicon-3s-4-alternate_reverse:hover {
-  -webkit-animation: spin 3s 4 alternate-reverse;
-  -moz-animation: spin 3s 4 alternate-reverse;
-  -ms-animation: spin 3s 4 alternate-reverse;
-  -o-animation: spin 3s 4 alternate-reverse;
-  animation: spin 3s 4 alternate-reverse;  
-}
-
-.spicon-3s-5-alternate_reverse:hover {
-  -webkit-animation: spin 3s 5 alternate-reverse;
-  -moz-animation: spin 3s 5 alternate-reverse;
-  -ms-animation: spin 3s 5 alternate-reverse;
-  -o-animation: spin 3s 5 alternate-reverse;
-  animation: spin 3s 5 alternate-reverse; 
-}
-
-.spicon-3s-6-alternate_reverse:hover {
-  -webkit-animation: spin 3s 6 alternate-reverse;
-  -moz-animation: spin 3s 6 alternate-reverse;
-  -ms-animation: spin 3s 6 alternate-reverse;
-  -o-animation: spin 3s 6 alternate-reverse;
-  animation: spin 3s 6 alternate-reverse; 
-}
-
-/* 4s */
-
-/* Spicon 4s-x-normal classes */
-
-.spicon-4s-1-normal:hover {
-  -webkit-animation: spin 4s 1 normal;
-  -moz-animation: spin 4s 1 normal;
-  -ms-animation: spin 4s 1 normal;
-  -o-animation: spin 4s 1 normal;
-  animation: spin 4s 1 normal;
-}
-
-.spicon-4s-2-normal:hover {
-  -webkit-animation: spin 4s 2 normal;
-  -moz-animation: spin 4s 2 normal;
-  -ms-animation: spin 4s 2 normal;
-  -o-animation: spin 4s 2 normal;
-  animation: spin 4s 2 normal;
-}
-
-.spicon-4s-3-normal:hover {
-  -webkit-animation: spin 4s 3 normal;
-  -moz-animation: spin 4s 3 normal;
-  -ms-animation: spin 4s 3 normal;
-  -o-animation: spin 4s 3 normal;
-  animation: spin 4s 3 normal; 
-}
-
-.spicon-4s-4-normal:hover {
-  -webkit-animation: spin 4s 4 normal;
-  -moz-animation: spin 4s 4 normal;
-  -ms-animation: spin 4s 4 normal;
-  -o-animation: spin 4s 4 normal;
-  animation: spin 4s 4 normal; 
-}
-
-.spicon-4s-5-normal:hover {
-  -webkit-animation: spin 4s 5 normal;
-  -moz-animation: spin 4s 5 normal;
-  -ms-animation: spin 4s 5 normal;
-  -o-animation: spin 4s 5 normal;
-  animation: spin 4s 5 normal; 
-}
-
-.spicon-4s-6-normal:hover {
-  -webkit-animation: spin 4s 6 normal;
-  -moz-animation: spin 4s 6 normal;
-  -ms-animation: spin 4s 6 normal;
-  -o-animation: spin 4s 6 normal;
-  animation: spin 4s 6 normal; 
-}
-
-/* Spicon 4s-x-reverse classes */
-
-.spicon-4s-1-reverse:hover {
-  -webkit-animation: spin 4s 1 reverse;
-  -moz-animation: spin 4s 1 reverse;
-  -ms-animation: spin 4s 1 reverse;
-  -o-animation: spin 4s 1 reverse;
-  animation: spin 4s 1 reverse;
-}
-
-.spicon-4s-2-reverse:hover {
-  -webkit-animation: spin 4s 2 reverse;
-  -moz-animation: spin 4s 2 reverse;
-  -ms-animation: spin 4s 2 reverse;
-  -o-animation: spin 4s 2 reverse;
-  animation: spin 4s 2 reverse;
-}
-
-.spicon-4s-3-reverse:hover {
-  -webkit-animation: spin 4s 3 reverse;
-  -moz-animation: spin 4s 3 reverse;
-  -ms-animation: spin 4s 3 reverse;
-  -o-animation: spin 4s 3 reverse;
-  animation: spin 4s 3 reverse; 
-}
-
-.spicon-4s-4-reverse:hover {
-  -webkit-animation: spin 4s 4 reverse;
-  -moz-animation: spin 4s 4 reverse;
-  -ms-animation: spin 4s 4 reverse;
-  -o-animation: spin 4s 4 reverse;
-  animation: spin 4s 4 reverse; 
-}
-
-.spicon-4s-5-reverse:hover {
-  -webkit-animation: spin 4s 5 reverse;
-  -moz-animation: spin 4s 5 reverse;
-  -ms-animation: spin 4s 5 reverse;
-  -o-animation: spin 4s 5 reverse;
-  animation: spin 4s 5 reverse; 
-}
-
-.spicon-4s-6-reverse:hover {
-  -webkit-animation: spin 4s 6 reverse;
-  -moz-animation: spin 4s 6 reverse;
-  -ms-animation: spin 4s 6 reverse;
-  -o-animation: spin 4s 6 reverse;
-  animation: spin 4s 6 reverse; 
-}
-
-/* Spicon 4s-x-alternate classes */
-
-.spicon-4s-1-alternate:hover {
-  -webkit-animation: spin 4s 1 alternate;
-  -moz-animation: spin 4s 1 alternate;
-  -ms-animation: spin 4s 1 alternate;
-  -o-animation: spin 4s 1 alternate;
-  animation: spin 4s 1 alternate;
-}
-
-.spicon-4s-2-alternate:hover {
-  -webkit-animation: spin 4s 2 alternate;
-  -moz-animation: spin 4s 2 alternate;
-  -ms-animation: spin 4s 2 alternate;
-  -o-animation: spin 4s 2 alternate;
-  animation: spin 4s 2 alternate;
-}
-
-.spicon-4s-3-alternate:hover {
-    -webkit-animation: spin 4s 3 alternate;
-  -moz-animation: spin 4s 3 alternate;
-  -ms-animation: spin 4s 3 alternate;
-  -o-animation: spin 4s 3 alternate;
-  animation: spin 4s 3 alternate;
-}
-
-.spicon-4s-4-alternate:hover {
-  -webkit-animation: spin 4s 4 alternate;
-  -moz-animation: spin 4s 4 alternate;
-  -ms-animation: spin 4s 4 alternate;
-  -o-animation: spin 4s 4 alternate;
-  animation: spin 4s 4 alternate; 
-}
-
-.spicon-4s-5-alternate:hover {
-  -webkit-animation: spin 4s 5 alternate;
-  -moz-animation: spin 4s 5 alternate;
-  -ms-animation: spin 4s 5 alternate;
-  -o-animation: spin 4s 5 alternate;
-  animation: spin 4s 5 alternate; 
-}
-
-.spicon-4s-6-alternate:hover {
-  -webkit-animation: spin 4s 6 alternate;
-  -moz-animation: spin 4s 6 alternate;
-  -ms-animation: spin 4s 6 alternate;
-  -o-animation: spin 4s 6 alternate;
-  animation: spin 4s 6 alternate; 
-}
-
-/* Spicon 4s-x-alternate_reverse classes */
-
-.spicon-4s-1-alternate_reverse:hover {
-  -webkit-animation: spin 4s 1 alternate-reverse;
-  -moz-animation: spin 4s 1 alternate-reverse;
-  -ms-animation: spin 4s 1 alternate-reverse;
-  -o-animation: spin 4s 1 alternate-reverse;
-  animation: spin 4s 1 alternate-reverse;
-}
-
-
-.spicon-4s-2-alternate_reverse:hover {
-  -webkit-animation: spin 4s 2 alternate-reverse;
-  -moz-animation: spin 4s 2 alternate-reverse;
-  -ms-animation: spin 4s 2 alternate-reverse;
-  -o-animation: spin 4s 2 alternate-reverse;
-  animation: spin 4s 2 alternate-reverse;
-}
-
-.spicon-4s-3-alternate_reverse:hover {
-  -webkit-animation: spin 4s 3 alternate-reverse;
-  -moz-animation: spin 4s 3 alternate-reverse;
-  -ms-animation: spin 4s 3 alternate-reverse;
-  -o-animation: spin 4s 3 alternate-reverse;
-  animation: spin 4s 3 alternate-reverse; 
-}
-
-.spicon-4s-4-alternate_reverse:hover {
-    -webkit-animation: spin 4s 4 alternate-reverse;
-  -moz-animation: spin 4s 4 alternate-reverse;
-  -ms-animation: spin 4s 4 alternate-reverse;
-  -o-animation: spin 4s 4 alternate-reverse;
-  animation: spin 4s 4 alternate-reverse;
-}
-
-.spicon-4s-5-alternate_reverse:hover {
-  -webkit-animation: spin 4s 5 alternate-reverse;
-  -moz-animation: spin 4s 5 alternate-reverse;
-  -ms-animation: spin 4s 5 alternate-reverse;
-  -o-animation: spin 4s 5 alternate-reverse;
-  animation: spin 4s 5 alternate-reverse; 
-}
-
-.spicon-4s-6-alternate_reverse:hover {
-  -webkit-animation: spin 4s 6 alternate-reverse;
-  -moz-animation: spin 4s 6 alternate-reverse;
-  -ms-animation: spin 4s 6 alternate-reverse;
-  -o-animation: spin 4s 6 alternate-reverse;
-  animation: spin 4s 6 alternate-reverse;
-}
-
-/* 5s */
-
-/* Spicon 5s-x-normal classes */
-
-.spicon-5s-1-normal:hover {
-  -webkit-animation: spin 5s 1 normal;
-  -moz-animation: spin 5s 1 normal;
-  -ms-animation: spin 5s 1 normal;
-  -o-animation: spin 5s 1 normal;
-  animation: spin 5s 1 normal;
-}
-
-
-.spicon-5s-2-normal:hover {
-  -webkit-animation: spin 5s 2 normal;
-  -moz-animation: spin 5s 2 normal;
-  -ms-animation: spin 5s 2 normal;
-  -o-animation: spin 5s 2 normal;
-  animation: spin 5s 2 normal;
-}
-
-.spicon-5s-3-normal:hover {
-  -webkit-animation: spin 5s 3 normal;
-  -moz-animation: spin 5s 3 normal;
-  -ms-animation: spin 5s 3 normal;
-  -o-animation: spin 5s 3 normal;
-  animation: spin 5s 3 normal; 
-}
-
-.spicon-5s-4-normal:hover {
-  -webkit-animation: spin 5s 4 normal;
-  -moz-animation: spin 5s 4 normal;
-  -ms-animation: spin 5s 4 normal;
-  -o-animation: spin 5s 4 normal;
-  animation: spin 5s 4 normal;  
-}
-
-.spicon-5s-5-normal:hover {
-  -webkit-animation: spin 5s 5 normal;
-  -moz-animation: spin 5s 5 normal;
-  -ms-animation: spin 5s 5 normal;
-  -o-animation: spin 5s 5 normal;
-  animation: spin 5s 5 normal; 
-}
-
-.spicon-5s-6-normal:hover {
-  -webkit-animation: spin 5s 6 normal;
-  -moz-animation: spin 5s 6 normal;
-  -ms-animation: spin 5s 6 normal;
-  -o-animation: spin 5s 6 normal;
-  animation: spin 5s 6 normal; 
-}
-
-/* Spicon 5s-x-reverse classes */
-
-.spicon-5s-1-reverse:hover {
-  -webkit-animation: spin 5s 1 reverse;
-  -moz-animation: spin 5s 1 reverse;
-  -ms-animation: spin 5s 1 reverse;
-  -o-animation: spin 5s 1 reverse;
-  animation: spin 5s 1 reverse;
-}
-
-.spicon-5s-2-reverse:hover {
-  -webkit-animation: spin 5s 2 reverse;
-  -moz-animation: spin 5s 2 reverse;
-  -ms-animation: spin 5s 2 reverse;
-  -o-animation: spin 5s 2 reverse;
-  animation: spin 5s 2 reverse;
-}
-
-.spicon-5s-3-reverse:hover {
-  -webkit-animation: spin 5s 3 reverse;
-  -moz-animation: spin 5s 3 reverse;
-  -ms-animation: spin 5s 3 reverse;
-  -o-animation: spin 5s 3 reverse;
-  animation: spin 5s 3 reverse; 
-}
-
-.spicon-5s-4-reverse:hover {
-  -webkit-animation: spin 5s 4 reverse;
-  -moz-animation: spin 5s 4 reverse;
-  -ms-animation: spin 5s 4 reverse;
-  -o-animation: spin 5s 4 reverse;
-  animation: spin 5s 4 reverse; 
-}
-
-.spicon-5s-5-reverse:hover {
-  -webkit-animation: spin 5s infinite reverse;
-  -moz-animation: spin 5s infinite reverse;
-  -ms-animation: spin 5s infinite reverse;
-  -o-animation: spin 5s infinite reverse;
-  animation: spin 5s infinite reverse; 
-}
-
-.spicon-5s-6-reverse:hover {
-  -webkit-animation: spin 5s infinite reverse;
-  -moz-animation: spin 5s infinite reverse;
-  -ms-animation: spin 5s infinite reverse;
-  -o-animation: spin 5s infinite reverse;
-  animation: spin 5s infinite reverse; 
-}
-
-/* Spicon 5s-x-alternate classes */
-
-.spicon-5s-1-alternate:hover {
-  -webkit-animation: spin 5s 1 alternate;
-  -moz-animation: spin 5s 1 alternate;
-  -ms-animation: spin 5s 1 alternate;
-  -o-animation: spin 5s 1 alternate;
-  animation: spin 5s 1 alternate;
-}
-
-.spicon-5s-2-alternate:hover {
-  -webkit-animation: spin 5s 2 alternate;
-  -moz-animation: spin 5s 2 alternate;
-  -ms-animation: spin 5s 2 alternate;
-  -o-animation: spin 5s 2 alternate;
-  animation: spin 5s 2 alternate;
-}
-
-.spicon-5s-3-alternate:hover {
-  -webkit-animation: spin 5s 3 alternate;
-  -moz-animation: spin 5s 3 alternate;
-  -ms-animation: spin 5s 3 alternate;
-  -o-animation: spin 5s 3 alternate;
-  animation: spin 5s 3 alternate; 
-}
-
-.spicon-5s-4-alternate:hover {
-    -webkit-animation: spin 5s 4 alternate;
-  -moz-animation: spin 5s 4 alternate;
-  -ms-animation: spin 5s 4 alternate;
-  -o-animation: spin 5s 4 alternate;
-  animation: spin 5s 4 alternate;
-}
-
-.spicon-5s-5-alternate:hover {
-  -webkit-animation: spin 5s 5 alternate;
-  -moz-animation: spin 5s 5 alternate;
-  -ms-animation: spin 5s 5 alternate;
-  -o-animation: spin 5s 5 alternate;
-  animation: spin 5s 5 alternate; 
-}
-
-.spicon-5s-6-alternate:hover {
-  -webkit-animation: spin 5s 6 alternate;
-  -moz-animation: spin 5s 6 alternate;
-  -ms-animation: spin 5s 6 alternate;
-  -o-animation: spin 5s 6 alternate;
-  animation: spin 5s 6 alternate; 
-}
-
-/* Spicon 5s-x-alternate_reverse classes */
-
-.spicon-5s-1-alternate_reverse:hover {
-  -webkit-animation: spin 5s 1 alternate-reverse;
-  -moz-animation: spin 5s 1 alternate-reverse;
-  -ms-animation: spin 5s 1 alternate-reverse;
-  -o-animation: spin 5s 1 alternate-reverse;
-  animation: spin 5s 1 alternate-reverse;
-}
-
-.spicon-5s-2-alternate_reverse:hover {
-  -webkit-animation: spin 5s 2 alternate-reverse;
-  -moz-animation: spin 5s 2 alternate-reverse;
-  -ms-animation: spin 5s 2 alternate-reverse;
-  -o-animation: spin 5s 2 alternate-reverse;
-  animation: spin 5s 2 alternate-reverse;
-}
-
-.spicon-5s-3-alternate_reverse:hover {
-  -webkit-animation: spin 5s 3 alternate-reverse;
-  -moz-animation: spin 5s 3 alternate-reverse;
-  -ms-animation: spin 5s 3 alternate-reverse;
-  -o-animation: spin 5s 3 alternate-reverse;
-  animation: spin 5s 3 alternate-reverse; 
-}
-
-.spicon-5s-4-alternate_reverse:hover {
-  -webkit-animation: spin 5s 4 alternate-reverse;
-  -moz-animation: spin 5s 4 alternate-reverse;
-  -ms-animation: spin 5s 4 alternate-reverse;
-  -o-animation: spin 5s 4 alternate-reverse;
-  animation: spin 5s 4 alternate-reverse;
-}
-
-.spicon-5s-5-alternate_reverse:hover {
-    -webkit-animation: spin 5s 5 alternate-reverse;
-  -moz-animation: spin 5s 5 alternate-reverse;
-  -ms-animation: spin 5s 5 alternate-reverse;
-  -o-animation: spin 5s 5 alternate-reverse;
-  animation: spin 5s 5 alternate-reverse;
-}
-
-.spicon-5s-6-alternate_reverse:hover {
-  -webkit-animation: spin 5s 6 alternate-reverse;
-  -moz-animation: spin 5s 6 alternate-reverse;
-  -ms-animation: spin 5s 6 alternate-reverse;
-  -o-animation: spin 5s 6 alternate-reverse;
-  animation: spin 5s 6 alternate-reverse;
-}
-
-/* 6s */
-
-/* Spicon 6s-x-normal classes */
-
-.spicon-6s-1-normal:hover {
-  -webkit-animation: spin 6s 1 normal;
-  -moz-animation: spin 6s 1 normal;
-  -ms-animation: spin 6s 1 normal;
-  -o-animation: spin 6s 1 normal;
-  animation: spin 6s 1 normal;
-}
-
-
-.spicon-6s-2-normal:hover {
-  -webkit-animation: spin 6s 2 normal;
-  -moz-animation: spin 6s 2 normal;
-  -ms-animation: spin 6s 2 normal;
-  -o-animation: spin 6s 2 normal;
-  animation: spin 6s 2 normal;
-}
-
-.spicon-6s-3-normal:hover {
-  -webkit-animation: spin 6s 3 normal;
-  -moz-animation: spin 6s 3 normal;
-  -ms-animation: spin 6s 3 normal;
-  -o-animation: spin 6s 3 normal;
-  animation: spin 6s 3 normal;  
+/* use of different classes to reduce the file size */
+
+/* spin on hover */
+.spicon-spin:hover{
+  -webkit-animation-name: spin;
+  -moz-animation-name: spin;
+  -ms-animation-name: spin;
+  -o-animation-name: spin;
+  animation-name: spin;
+}
+
+/* spin direction */
+.normal:hover{
+  -webkit-animation-direction: normal;
+  -moz-animation-direction: normal;
+  -ms-animation-direction: normal;
+  -o-animation-direction: normal;
+  animation-direction: normal;
+}
+.reverse:hover{
+  -webkit-animation-direction: reverse;
+  -moz-animation-direction: reverse;
+  -ms-animation-direction: reverse;
+  -o-animation-direction: reverse;
+  animation-direction: reverse;
+}
+.alternate:hover{
+  -webkit-animation-direction: alternate;
+  -moz-animation-direction: alternate;
+  -ms-animation-direction: alternate;
+  -o-animation-direction: alternate;
+  animation-direction: alternate;
+}
+.alternate-reverse:hover{
+  -webkit-animation-direction: alternate-reverse;
+  -moz-animation-direction: alternate-reverse;
+  -ms-animation-direction: alternate-reverse;
+  -o-animation-direction: alternate-reverse;
+  animation-direction: alternate-reverse;
+}
+
+/* duration of spin */
+.duration-1s:hover{
+  -webkit-animation-duration: 1s;
+  -moz-animation-duration: 1s;
+  -ms-animation-duration: 1s;
+  -o-animation-duration: 1s;
+  animation-duration: 1s;
+}
+.duration-2s:hover{
+  -webkit-animation-duration: 2s;
+  -moz-animation-duration: 2s;
+  -ms-animation-duration: 2s;
+  -o-animation-duration: 2s;
+  animation-duration: 2s;
+}
+.duration-3s:hover{
+  -webkit-animation-duration: 3s;
+  -moz-animation-duration: 3s;
+  -ms-animation-duration: 3s;
+  -o-animation-duration: 3s;
+  animation-duration: 3s;
+}
+.duration-4s:hover{
+  -webkit-animation-duration: 4s;
+  -moz-animation-duration: 4s;
+  -ms-animation-duration: 4s;
+  -o-animation-duration: 4s;
+  animation-duration: 4s;
+}
+.duration-5s:hover{
+  -webkit-animation-duration: 5s;
+  -moz-animation-duration: 5s;
+  -ms-animation-duration: 5s;
+  -o-animation-duration: 5s;
+  animation-duration: 5s;
+}
+.duration-6s:hover{
+  -webkit-animation-duration: 6s;
+  -moz-animation-duration: 6s;
+  -ms-animation-duration: 6s;
+  -o-animation-duration: 6s;
+  animation-duration: 6s;
+}
+.duration-7s:hover{
+  -webkit-animation-duration: 7s;
+  -moz-animation-duration: 7s;
+  -ms-animation-duration: 7s;
+  -o-animation-duration: 7s;
+  animation-duration: 7s;
+}
+.duration-8s:hover{
+  -webkit-animation-duration: 8s;
+  -moz-animation-duration: 8s;
+  -ms-animation-duration: 8s;
+  -o-animation-duration: 8s;
+  animation-duration: 8s;
+}
+.duration-9s:hover{
+  -webkit-animation-duration: 9s;
+  -moz-animation-duration: 9s;
+  -ms-animation-duration: 9s;
+  -o-animation-duration: 9s;
+  animation-duration: 9s;
+}
+.duration-10s:hover{
+  -webkit-animation-duration: 10s;
+  -moz-animation-duration: 10s;
+  -ms-animation-duration: 10s;
+  -o-animation-duration: 10s;
+  animation-duration: 10s;
+}
+
+/* iteration count of spin */
+.iteration-1:hover{
+  -webkit-animation-iteration-count: 1;
+  -moz-animation-iteration-count: 1;
+  -ms-animation-iteration-count: 1;
+  -o-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+}
+.iteration-2:hover{
+  -webkit-animation-iteration-count: 2;
+  -moz-animation-iteration-count: 2;
+  -ms-animation-iteration-count: 2;
+  -o-animation-iteration-count: 2;
+  animation-iteration-count: 2;
+}
+.iteration-3:hover{
+  -webkit-animation-iteration-count: 3;
+  -moz-animation-iteration-count: 3;
+  -ms-animation-iteration-count: 3;
+  -o-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+}
+.iteration-4:hover{
+  -webkit-animation-iteration-count: 4;
+  -moz-animation-iteration-count: 4;
+  -ms-animation-iteration-count: 4;
+  -o-animation-iteration-count: 4;
+  animation-iteration-count: 4;
+}
+.iteration-5:hover{
+  -webkit-animation-iteration-count: 5;
+  -moz-animation-iteration-count: 5;
+  -ms-animation-iteration-count: 5;
+  -o-animation-iteration-count: 5;
+  animation-iteration-count: 5;
+}
+.iteration-6:hover{
+  -webkit-animation-iteration-count: 6;
+  -moz-animation-iteration-count: 6;
+  -ms-animation-iteration-count: 6;
+  -o-animation-iteration-count: 6;
+  animation-iteration-count: 6;
+}
+.iteration-infinite:hover{
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  -ms-animation-iteration-count: infinite;
+  -o-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
 }
-
-.spicon-6s-4-normal:hover {
-  -webkit-animation: spin 6s 4 normal;
-  -moz-animation: spin 6s 4 normal;
-  -ms-animation: spin 6s 4 normal;
-  -o-animation: spin 6s 4 normal;
-  animation: spin 6s 4 normal; 
-}
-
-.spicon-6s-5-normal:hover {
-  -webkit-animation: spin 6s 5 normal;
-  -moz-animation: spin 6s 5 normal;
-  -ms-animation: spin 6s 5 normal;
-  -o-animation: spin 6s 5 normal;
-  animation: spin 6s 5 normal; 
-}
-
-.spicon-6s-6-normal:hover {
-  -webkit-animation: spin 6s 6 normal;
-  -moz-animation: spin 6s 6 normal;
-  -ms-animation: spin 6s 6 normal;
-  -o-animation: spin 6s 6 normal;
-  animation: spin 6s 6 normal; 
-}
-
-/* Spicon 6s-x-reverse classes */
-
-.spicon-6s-1-reverse:hover {
-  -webkit-animation: spin 6s 1 reverse;
-  -moz-animation: spin 6s 1 reverse;
-  -ms-animation: spin 6s 1 reverse;
-  -o-animation: spin 6s 1 reverse;
-  animation: spin 6s 1 reverse;
-}
-
-.spicon-6s-2-reverse:hover {
-  -webkit-animation: spin 6s 2 reverse;
-  -moz-animation: spin 6s 2 reverse;
-  -ms-animation: spin 6s 2 reverse;
-  -o-animation: spin 6s 2 reverse;
-  animation: spin 6s 2 reverse;
-}
-
-.spicon-6s-3-reverse:hover {
-  -webkit-animation: spin 6s 3 reverse;
-  -moz-animation: spin 6s 3 reverse;
-  -ms-animation: spin 6s 3 reverse;
-  -o-animation: spin 6s 3 reverse;
-  animation: spin 6s 3 reverse; 
-}
-
-.spicon-6s-4-reverse:hover {
-  -webkit-animation: spin 6s 4 reverse;
-  -moz-animation: spin 6s 4 reverse;
-  -ms-animation: spin 6s 4 reverse;
-  -o-animation: spin 6s 4 reverse;
-  animation: spin 6s 4 reverse; 
-}
-
-.spicon-6s-5-reverse:hover {
-  -webkit-animation: spin 6s 5 reverse;
-  -moz-animation: spin 6s 5 reverse;
-  -ms-animation: spin 6s 5 reverse;
-  -o-animation: spin 6s 5 reverse;
-  animation: spin 6s 5 reverse; 
-}
-
-.spicon-6s-6-reverse:hover {
-  -webkit-animation: spin 6s 6 reverse;
-  -moz-animation: spin 6s 6 reverse;
-  -ms-animation: spin 6s 6 reverse;
-  -o-animation: spin 6s 6 reverse;
-  animation: spin 6s 6 reverse; 
-}
-
-/* Spicon 6s-x-alternate classes */
-
-.spicon-6s-1-alternate:hover {
-  -webkit-animation: spin 6s 1 alternate;
-  -moz-animation: spin 6s 1 alternate;
-  -ms-animation: spin 6s 1 alternate;
-  -o-animation: spin 6s 1 alternate;
-  animation: spin 6s 1 alternate;
-}
-
-.spicon-6s-2-alternate:hover {
-  -webkit-animation: spin 6s 2 alternate;
-  -moz-animation: spin 6s 2 alternate;
-  -ms-animation: spin 6s 2 alternate;
-  -o-animation: spin 6s 2 alternate;
-  animation: spin 6s 2 alternate;
-}
-
-.spicon-6s-3-alternate:hover{
-  -webkit-animation: spin 6s 3 alternate;
-  -moz-animation: spin 6s 3 alternate;
-  -ms-animation: spin 6s 3 alternate;
-  -o-animation: spin 6s 3 alternate;
-  animation: spin 6s 3 alternate; 
-}
-
-.spicon-6s-4-alternate:hover {
-  -webkit-animation: spin 6s 4 alternate;
-  -moz-animation: spin 6s 4 alternate;
-  -ms-animation: spin 6s 4 alternate;
-  -o-animation: spin 6s 4 alternate;
-  animation: spin 6s 4 alternate; 
-}
-
-.spicon-6s-5-alternate:hover {
-  -webkit-animation: spin 6s 5 alternate;
-  -moz-animation: spin 6s 5 alternate;
-  -ms-animation: spin 6s 5 alternate;
-  -o-animation: spin 6s 5 alternate;
-  animation: spin 6s 5 alternate; 
-}
-
-.spicon-6s-6-alternate:hover {
-  -webkit-animation: spin 6s 6 alternate;
-  -moz-animation: spin 6s 6 alternate;
-  -ms-animation: spin 6s 6 alternate;
-  -o-animation: spin 6s 6 alternate;
-  animation: spin 6s 6 alternate; 
-}
-
-/* Spicon 6s-x-alternate_reverse classes */
-
-.spicon-6s-1-alternate_reverse:hover {
-  -webkit-animation: spin 6s 1 alternate-reverse;
-  -moz-animation: spin 6s 1 alternate-reverse;
-  -ms-animation: spin 6s 1 alternate-reverse;
-  -o-animation: spin 6s 1 alternate-reverse;
-  animation: spin 6s 1 alternate-reverse;
-}
-
-.spicon-6s-2-alternate_reverse:hover {
-  -webkit-animation: spin 6s 2 alternate-reverse;
-  -moz-animation: spin 6s 2 alternate-reverse;
-  -ms-animation: spin 6s 2 alternate-reverse;
-  -o-animation: spin 6s 2 alternate-reverse;
-  animation: spin 6s 2 alternate-reverse;
-}
-
-.spicon-6s-3-alternate_reverse:hover {
-  -webkit-animation: spin 6s 3 alternate-reverse;
-  -moz-animation: spin 6s 3 alternate-reverse;
-  -ms-animation: spin 6s 3 alternate-reverse;
-  -o-animation: spin 6s 3 alternate-reverse;
-  animation: spin 6s 3 alternate-reverse; 
-}
-
-.spicon-6s-4-alternate_reverse:hover {
-  -webkit-animation: spin 6s 4 alternate-reverse;
-  -moz-animation: spin 6s 4 alternate-reverse;
-  -ms-animation: spin 6s 4 alternate-reverse;
-  -o-animation: spin 6s 4 alternate-reverse;
-  animation: spin 6s 4 alternate-reverse; 
-}
-
-.spicon-6s-5-alternate_reverse:hover {
-  -webkit-animation: spin 6s 5 alternate-reverse;
-  -moz-animation: spin 6s 5 alternate-reverse;
-  -ms-animation: spin 6s 5 alternate-reverse;
-  -o-animation: spin 6s 5 alternate-reverse;
-  animation: spin 6s 5 alternate-reverse; 
-}
-
-.spicon-6s-6-alternate_reverse:hover {
-  -webkit-animation: spin 6s 6 alternate-reverse;
-  -moz-animation: spin 6s 6 alternate-reverse;
-  -ms-animation: spin 6s 6 alternate-reverse;
-  -o-animation: spin 6s 6 alternate-reverse;
-  animation: spin 6s 6 alternate-reverse; 
-}
-
-/* 7s */
-
-/* Spicon 7s-x-normal classes */
-
-.spicon-7s-1-normal:hover {
-  -webkit-animation: spin 7s 1 normal;
-  -moz-animation: spin 7s 1 normal;
-  -ms-animation: spin 7s 1 normal;
-  -o-animation: spin 7s 1 normal;
-  animation: spin 7s 1 normal;
-}
-
-.spicon-7s-2-normal:hover {
-  -webkit-animation: spin 7s 2 normal;
-  -moz-animation: spin 7s 2 normal;
-  -ms-animation: spin 7s 2 normal;
-  -o-animation: spin 7s 2 normal;
-  animation: spin 7s 2 normal;
-}
-
-.spicon-7s-3-normal:hover {
-  -webkit-animation: spin 7s 3 normal;
-  -moz-animation: spin 7s 3 normal;
-  -ms-animation: spin 7s 3 normal;
-  -o-animation: spin 7s 3 normal;
-  animation: spin 7s 3 normal; 
-}
-
-.spicon-7s-4-normal:hover {
-  -webkit-animation: spin 7s 4 normal;
-  -moz-animation: spin 7s 4 normal;
-  -ms-animation: spin 7s 4 normal;
-  -o-animation: spin 7s 4 normal;
-  animation: spin 7s 4 normal; 
-}
-
-.spicon-7s-5-normal:hover {
-  -webkit-animation: spin 7s 5 normal;
-  -moz-animation: spin 7s 5 normal;
-  -ms-animation: spin 7s 5 normal;
-  -o-animation: spin 7s 5 normal;
-  animation: spin 7s 5 normal; 
-}
-
-.spicon-7s-6-normal:hover {
-    -webkit-animation: spin 7s 6 normal;
-  -moz-animation: spin 7s 6 normal;
-  -ms-animation: spin 7s 6 normal;
-  -o-animation: spin 7s 6 normal;
-  animation: spin 7s 6 normal;
-}
-
-/* Spicon 7s-x-reverse classes */
-
-.spicon-7s-1-reverse:hover {
-  -webkit-animation: spin 7s 1 reverse;
-  -moz-animation: spin 7s 1 reverse;
-  -ms-animation: spin 7s 1 reverse;
-  -o-animation: spin 7s 1 reverse;
-  animation: spin 7s 1 reverse;
-}
-
-.spicon-7s-2-reverse:hover {
-  -webkit-animation: spin 7s 2 reverse;
-  -moz-animation: spin 7s 2 reverse;
-  -ms-animation: spin 7s 2 reverse;
-  -o-animation: spin 7s 2 reverse;
-  animation: spin 7s 2 reverse;
-}
-
-.spicon-7s-3-reverse:hover {
-    -webkit-animation: spin 7s 3 reverse;
-  -moz-animation: spin 7s 3 reverse;
-  -ms-animation: spin 7s 3 reverse;
-  -o-animation: spin 7s 3 reverse;
-  animation: spin 7s 3 reverse;
-}
-
-.spicon-7s-4-reverse:hover {
-    -webkit-animation: spin 7s 4 reverse;
-  -moz-animation: spin 7s 4 reverse;
-  -ms-animation: spin 7s 4 reverse;
-  -o-animation: spin 7s 4 reverse;
-  animation: spin 7s 4 reverse;
-}
-
-.spicon-7s-5-reverse:hover {
-  -webkit-animation: spin 7s 5 reverse;
-  -moz-animation: spin 7s 5 reverse;
-  -ms-animation: spin 7s 5 reverse;
-  -o-animation: spin 7s 5 reverse;
-  animation: spin 7s 5 reverse; 
-}
-
-.spicon-7s-6-reverse:hover {
-  -webkit-animation: spin 7s 6 reverse;
-  -moz-animation: spin 7s 6 reverse;
-  -ms-animation: spin 7s 6 reverse;
-  -o-animation: spin 7s 6 reverse;
-  animation: spin 7s 6 reverse; 
-}
-
-/* Spicon 7s-x-alternate classes */
-
-.spicon-7s-1-alternate:hover {
-  -webkit-animation: spin 7s 1 alternate;
-  -moz-animation: spin 7s 1 alternate;
-  -ms-animation: spin 7s 1 alternate;
-  -o-animation: spin 7s 1 alternate;
-  animation: spin 7s 1 alternate;
-}
-
-.spicon-7s-2-alternate:hover {
-  -webkit-animation: spin 7s 2 alternate;
-  -moz-animation: spin 7s 2 alternate;
-  -ms-animation: spin 7s 2 alternate;
-  -o-animation: spin 7s 2 alternate;
-  animation: spin 7s 2 alternate;
-}
-
-.spicon-7s-3-alternate:hover {
-  -webkit-animation: spin 7s 3 alternate;
-  -moz-animation: spin 7s 3 alternate;
-  -ms-animation: spin 7s 3 alternate;
-  -o-animation: spin 7s 3 alternate;
-  animation: spin 7s 3 alternate; 
-}
-
-.spicon-7s-4-alternate:hover {
-  -webkit-animation: spin 7s 4 alternate;
-  -moz-animation: spin 7s 4 alternate;
-  -ms-animation: spin 7s 4 alternate;
-  -o-animation: spin 7s 4 alternate;
-  animation: spin 7s 4 alternate; 
-}
-
-.spicon-7s-5-alternate:hover {
-  -webkit-animation: spin 7s 5 alternate;
-  -moz-animation: spin 7s 5 alternate;
-  -ms-animation: spin 7s 5 alternate;
-  -o-animation: spin 7s 5 alternate;
-  animation: spin 7s 5 alternate; 
-}
-
-.spicon-7s-6-alternate:hover {
-  -webkit-animation: spin 7s 6 alternate;
-  -moz-animation: spin 7s 6 alternate;
-  -ms-animation: spin 7s 6 alternate;
-  -o-animation: spin 7s 6 alternate;
-  animation: spin 7s 6 alternate; 
-}
-
-/* Spicon 7s-x-alternate_reverse classes */
-
-.spicon-7s-1-alternate_reverse:hover {
-  -webkit-animation: spin 7s 1 alternate-reverse;
-  -moz-animation: spin 7s 1 alternate-reverse;
-  -ms-animation: spin 7s 1 alternate-reverse;
-  -o-animation: spin 7s 1 alternate-reverse;
-  animation: spin 7s 1 alternate-reverse;
-}
-
-.spicon-7s-2-alternate_reverse:hover {
-  -webkit-animation: spin 7s 2 alternate-reverse;
-  -moz-animation: spin 7s 2 alternate-reverse;
-  -ms-animation: spin 7s 2 alternate-reverse;
-  -o-animation: spin 7s 2 alternate-reverse;
-  animation: spin 7s 2 alternate-reverse;
-}
-
-.spicon-7s-3-alternate_reverse:hover {
-  -webkit-animation: spin 7s 3 alternate-reverse;
-  -moz-animation: spin 7s 3 alternate-reverse;
-  -ms-animation: spin 7s 3 alternate-reverse;
-  -o-animation: spin 7s 3 alternate-reverse;
-  animation: spin 7s 3 alternate-reverse; 
-}
-
-.spicon-7s-4-alternate_reverse:hover {
-    -webkit-animation: spin 7s 4 alternate-reverse;
-  -moz-animation: spin 7s 4 alternate-reverse;
-  -ms-animation: spin 7s 4 alternate-reverse;
-  -o-animation: spin 7s 4 alternate-reverse;
-  animation: spin 7s 4 alternate-reverse;
-}
-
-.spicon-7s-5-alternate_reverse:hover {
-  -webkit-animation: spin 7s 5 alternate-reverse;
-  -moz-animation: spin 7s 5 alternate-reverse;
-  -ms-animation: spin 7s 5 alternate-reverse;
-  -o-animation: spin 7s 5 alternate-reverse;
-  animation: spin 7s 5 alternate-reverse; 
-}
-
-.spicon-7s-6-alternate_reverse:hover {
-  -webkit-animation: spin 7s 6 alternate-reverse;
-  -moz-animation: spin 7s 6 alternate-reverse;
-  -ms-animation: spin 7s 6 alternate-reverse;
-  -o-animation: spin 7s 6 alternate-reverse;
-  animation: spin 7s 6 alternate-reverse;
-}
-
-/* 8s */
-
-/* Spicon 8s-x-normal classes */
-
-.spicon-8s-1-normal:hover {
-  -webkit-animation: spin 8s 1 normal;
-  -moz-animation: spin 8s 1 normal;
-  -ms-animation: spin 8s 1 normal;
-  -o-animation: spin 8s 1 normal;
-  animation: spin 8s 1 normal;
-}
-
-.spicon-8s-2-normal:hover {
-  -webkit-animation: spin 8s 2 normal;
-  -moz-animation: spin 8s 2 normal;
-  -ms-animation: spin 8s 2 normal;
-  -o-animation: spin 8s 2 normal;
-  animation: spin 8s 2 normal;
-}
-
-.spicon-8s-3-normal:hover {
-    -webkit-animation: spin 8s 3 normal;
-  -moz-animation: spin 8s 3 normal;
-  -ms-animation: spin 8s 3 normal;
-  -o-animation: spin 8s 3 normal;
-  animation: spin 8s 3 normal;
-}
-
-.spicon-8s-4-normal:hover {
-  -webkit-animation: spin 8s 4 normal;
-  -moz-animation: spin 8s 4 normal;
-  -ms-animation: spin 8s 4 normal;
-  -o-animation: spin 8s 4 normal;
-  animation: spin 8s 4 normal; 
-}
-
-.spicon-8s-5-normal:hover {
-    -webkit-animation: spin 8s 5 normal;
-  -moz-animation: spin 8s 5 normal;
-  -ms-animation: spin 8s 5 normal;
-  -o-animation: spin 8s 5 normal;
-  animation: spin 8s 5 normal;
-}
-
-.spicon-8s-6-normal:hover {
-  -webkit-animation: spin 8s 6 normal;
-  -moz-animation: spin 8s 6 normal;
-  -ms-animation: spin 8s 6 normal;
-  -o-animation: spin 8s 6 normal;
-  animation: spin 8s 6 normal; 
-}
-
-/* Spicon 8s-x-reverse classes */
-
-.spicon-8s-1-reverse:hover {
-  -webkit-animation: spin 8s 1 reverse;
-  -moz-animation: spin 8s 1 reverse;
-  -ms-animation: spin 8s 1 reverse;
-  -o-animation: spin 8s 1 reverse;
-  animation: spin 8s 1 reverse;
-}
-
-.spicon-8s-2-reverse:hover {
-  -webkit-animation: spin 8s 2 reverse;
-  -moz-animation: spin 8s 2 reverse;
-  -ms-animation: spin 8s 2 reverse;
-  -o-animation: spin 8s 2 reverse;
-  animation: spin 8s 2 reverse;
-}
-
-.spicon-8s-3-reverse:hover {
-    -webkit-animation: spin 8s 3 reverse;
-  -moz-animation: spin 8s 3 reverse;
-  -ms-animation: spin 8s 3 reverse;
-  -o-animation: spin 8s 3 reverse;
-  animation: spin 8s 3 reverse;
-}
-
-.spicon-8s-4-reverse:hover {
-  -webkit-animation: spin 8s 4 reverse;
-  -moz-animation: spin 8s 4 reverse;
-  -ms-animation: spin 8s 4 reverse;
-  -o-animation: spin 8s 4 reverse;
-  animation: spin 8s 4 reverse; 
-}
-
-.spicon-8s-5-reverse:hover {
-  -webkit-animation: spin 8s 5 reverse;
-  -moz-animation: spin 8s 5 reverse;
-  -ms-animation: spin 8s 5 reverse;
-  -o-animation: spin 8s 5 reverse;
-  animation: spin 8s 5 reverse; 
-}
-
-.spicon-8s-6-reverse:hover{
-  -webkit-animation: spin 8s 6 reverse;
-  -moz-animation: spin 8s 6 reverse;
-  -ms-animation: spin 8s 6 reverse;
-  -o-animation: spin 8s 6 reverse;
-  animation: spin 8s 6 reverse; 
-}
-
-/* Spicon 8s-x-alternate classes */
-
-.spicon-8s-1-alternate:hover {
-  -webkit-animation: spin 8s 1 alternate;
-  -moz-animation: spin 8s 1 alternate;
-  -ms-animation: spin 8s 1 alternate;
-  -o-animation: spin 8s 1 alternate;
-  animation: spin 8s 1 alternate;
-}
-
-.spicon-8s-2-alternate:hover {
-  -webkit-animation: spin 8s 2 alternate;
-  -moz-animation: spin 8s 2 alternate;
-  -ms-animation: spin 8s 2 alternate;
-  -o-animation: spin 8s 2 alternate;
-  animation: spin 8s 2 alternate;
-}
-
-.spicon-8s-3-alternate:hover {
-  -webkit-animation: spin 8s 3 alternate;
-  -moz-animation: spin 8s 3 alternate;
-  -ms-animation: spin 8s 3 alternate;
-  -o-animation: spin 8s 3 alternate;
-  animation: spin 8s 3 alternate; 
-}
-
-.spicon-8s-4-alternate:hover {
-  -webkit-animation: spin 8s 4 alternate;
-  -moz-animation: spin 8s 4 alternate;
-  -ms-animation: spin 8s 4 alternate;
-  -o-animation: spin 8s 4 alternate;
-  animation: spin 8s 4 alternate; 
-}
-
-.spicon-8s-5-alternate:hover {
-  -webkit-animation: spin 8s 5 alternate;
-  -moz-animation: spin 8s 5 alternate;
-  -ms-animation: spin 8s 5 alternate;
-  -o-animation: spin 8s 5 alternate;
-  animation: spin 8s 5 alternate; 
-}
-
-.spicon-8s-6-alternate:hover {
-  -webkit-animation: spin 8s 6 alternate;
-  -moz-animation: spin 8s 6 alternate;
-  -ms-animation: spin 8s 6 alternate;
-  -o-animation: spin 8s 6 alternate;
-  animation: spin 8s 6 alternate; 
-}
-
-/* Spicon 8s-x-alternate_reverse classes */
-
-.spicon-8s-1-alternate_reverse:hover {
-  -webkit-animation: spin 8s 1 alternate-reverse;
-  -moz-animation: spin 8s 1 alternate-reverse;
-  -ms-animation: spin 8s 1 alternate-reverse;
-  -o-animation: spin 8s 1 alternate-reverse;
-  animation: spin 8s 1 alternate-reverse;
-}
-
-.spicon-8s-2-alternate_reverse:hover {
-  -webkit-animation: spin 8s 2 alternate-reverse;
-  -moz-animation: spin 8s 2 alternate-reverse;
-  -ms-animation: spin 8s 2 alternate-reverse;
-  -o-animation: spin 8s 2 alternate-reverse;
-  animation: spin 8s 2 alternate-reverse;
-}
-
-.spicon-8s-3-alternate_reverse:hover {
-  -webkit-animation: spin 8s 3 alternate-reverse;
-  -moz-animation: spin 8s 3 alternate-reverse;
-  -ms-animation: spin 8s 3 alternate-reverse;
-  -o-animation: spin 8s 3 alternate-reverse;
-  animation: spin 8s 3 alternate-reverse; 
-}
-
-.spicon-8s-4-alternate_reverse:hover {
-  -webkit-animation: spin 8s 4 alternate-reverse;
-  -moz-animation: spin 8s 4 alternate-reverse;
-  -ms-animation: spin 8s 4 alternate-reverse;
-  -o-animation: spin 8s 4 alternate-reverse;
-  animation: spin 8s 4 alternate-reverse; 
-}
-
-.spicon-8s-5-alternate_reverse:hover {
-  -webkit-animation: spin 8s 5 alternate-reverse;
-  -moz-animation: spin 8s 5 alternate-reverse;
-  -ms-animation: spin 8s 5 alternate-reverse;
-  -o-animation: spin 8s 5 alternate-reverse;
-  animation: spin 8s 5 alternate-reverse; 
-}
-
-.spicon-8s-6-alternate_reverse:hover {
-  -webkit-animation: spin 8s 6 alternate-reverse;
-  -moz-animation: spin 8s 6 alternate-reverse;
-  -ms-animation: spin 8s 6 alternate-reverse;
-  -o-animation: spin 8s 6 alternate-reverse;
-  animation: spin 8s 6 alternate-reverse;
-}
-
-/* 9s */
-
-/* Spicon 9s-x-normal classes */
-
-.spicon-9s-1-normal:hover {
-  -webkit-animation: spin 9s 1 normal;
-  -moz-animation: spin 9s 1 normal;
-  -ms-animation: spin 9s 1 normal;
-  -o-animation: spin 9s 1 normal;
-  animation: spin 9s 1 normal;
-}
-
-.spicon-9s-2-normal:hover {
-  -webkit-animation: spin 9s 2 normal;
-  -moz-animation: spin 9s 2 normal;
-  -ms-animation: spin 9s 2 normal;
-  -o-animation: spin 9s 2 normal;
-  animation: spin 9s 2 normal;
-}
-
-.spicon-9s-3-normal:hover {
-    -webkit-animation: spin 9s 3 normal;
-  -moz-animation: spin 9s 3 normal;
-  -ms-animation: spin 9s 3 normal;
-  -o-animation: spin 9s 3 normal;
-  animation: spin 9s 3 normal;
-}
-
-.spicon-9s-4-normal:hover {
-  -webkit-animation: spin 9s 4 normal;
-  -moz-animation: spin 9s 4 normal;
-  -ms-animation: spin 9s 4 normal;
-  -o-animation: spin 9s 4 normal;
-  animation: spin 9s 4 normal; 
-}
-
-.spicon-9s-5-normal:hover {
-    -webkit-animation: spin 9s 5 normal;
-  -moz-animation: spin 9s 5 normal;
-  -ms-animation: spin 9s 5 normal;
-  -o-animation: spin 9s 5 normal;
-  animation: spin 9s 5 normal;
-}
-
-.spicon-9s-6-normal:hover {
-  -webkit-animation: spin 9s 6 normal;
-  -moz-animation: spin 9s 6 normal;
-  -ms-animation: spin 9s 6 normal;
-  -o-animation: spin 9s 6 normal;
-  animation: spin 9s 6 normal; 
-}
-
-/* Spicon 9s-x-reverse classes */
-
-.spicon-9s-1-reverse:hover {
-  -webkit-animation: spin 9s 1 reverse;
-  -moz-animation: spin 9s 1 reverse;
-  -ms-animation: spin 9s 1 reverse;
-  -o-animation: spin 9s 1 reverse;
-  animation: spin 9s 1 reverse;
-}
-
-.spicon-9s-2-reverse:hover {
-  -webkit-animation: spin 9s 2 reverse;
-  -moz-animation: spin 9s 2 reverse;
-  -ms-animation: spin 9s 2 reverse;
-  -o-animation: spin 9s 2 reverse;
-  animation: spin 9s 2 reverse;
-}
-
-.spicon-9s-3-reverse:hover {
-    -webkit-animation: spin 9s 3 reverse;
-  -moz-animation: spin 9s 3 reverse;
-  -ms-animation: spin 9s 3 reverse;
-  -o-animation: spin 9s 3 reverse;
-  animation: spin 9s 3 reverse;
-}
-
-.spicon-9s-4-reverse:hover {
-  -webkit-animation: spin 9s 4 reverse;
-  -moz-animation: spin 9s 4 reverse;
-  -ms-animation: spin 9s 4 reverse;
-  -o-animation: spin 9s 4 reverse;
-  animation: spin 9s 4 reverse; 
-}
-
-.spicon-9s-5-reverse:hover {
-  -webkit-animation: spin 9s 5 reverse;
-  -moz-animation: spin 9s 5 reverse;
-  -ms-animation: spin 9s 5 reverse;
-  -o-animation: spin 9s 5 reverse;
-  animation: spin 9s 5 reverse; 
-}
-
-.spicon-9s-6-reverse:hover {
-  -webkit-animation: spin 9s 6 reverse;
-  -moz-animation: spin 9s 6 reverse;
-  -ms-animation: spin 9s 6 reverse;
-  -o-animation: spin 9s 6 reverse;
-  animation: spin 9s 6 reverse; 
-}
-
-/* Spicon 9s-x-alternate classes */
-
-.spicon-9s-1-alternate:hover {
-  -webkit-animation: spin 9s 1 alternate;
-  -moz-animation: spin 9s 1 alternate;
-  -ms-animation: spin 9s 1 alternate;
-  -o-animation: spin 9s 1 alternate;
-  animation: spin 9s 1 alternate;
-}
-
-.spicon-9s-2-alternate:hover {
-  -webkit-animation: spin 9s 2 alternate;
-  -moz-animation: spin 9s 2 alternate;
-  -ms-animation: spin 9s 2 alternate;
-  -o-animation: spin 9s 2 alternate;
-  animation: spin 9s 2 alternate;
-}
-
-.spicon-9s-3-alternate:hover {
-    -webkit-animation: spin 9s 3 alternate;
-  -moz-animation: spin 9s 3 alternate;
-  -ms-animation: spin 9s 3 alternate;
-  -o-animation: spin 9s 3 alternate;
-  animation: spin 9s 3 alternate;
-}
-
-.spicon-9s-4-alternate:hover {
-  -webkit-animation: spin 9s 4 alternate;
-  -moz-animation: spin 9s 4 alternate;
-  -ms-animation: spin 9s 4 alternate;
-  -o-animation: spin 9s 4 alternate;
-  animation: spin 9s 4 alternate; 
-}
-
-.spicon-9s-5-alternate:hover {
-  -webkit-animation: spin 9s 5 alternate;
-  -moz-animation: spin 9s 5 alternate;
-  -ms-animation: spin 9s 5 alternate;
-  -o-animation: spin 9s 5 alternate;
-  animation: spin 9s 5 alternate; 
-}
-
-.spicon-9s-6-alternate:hover {
-  -webkit-animation: spin 9s 6 alternate;
-  -moz-animation: spin 9s 6 alternate;
-  -ms-animation: spin 9s 6 alternate;
-  -o-animation: spin 9s 6 alternate;
-  animation: spin 9s 6 alternate; 
-}
-
-/* Spicon 9s-x-alternate_reverse classes */
-
-.spicon-9s-1-alternate_reverse:hover {
-  -webkit-animation: spin 9s 1 alternate-reverse;
-  -moz-animation: spin 9s 1 alternate-reverse;
-  -ms-animation: spin 9s 1 alternate-reverse;
-  -o-animation: spin 9s 1 alternate-reverse;
-  animation: spin 9s 1 alternate-reverse;
-}
-
-.spicon-9s-2-alternate_reverse:hover {
-  -webkit-animation: spin 9s 2 alternate-reverse;
-  -moz-animation: spin 9s 2 alternate-reverse;
-  -ms-animation: spin 9s 2 alternate-reverse;
-  -o-animation: spin 9s 2 alternate-reverse;
-  animation: spin 9s 2 alternate-reverse;
-}
-
-.spicon-9s-3-alternate_reverse:hover {
-  -webkit-animation: spin 9s 3 alternate-reverse;
-  -moz-animation: spin 9s 3 alternate-reverse;
-  -ms-animation: spin 9s 3 alternate-reverse;
-  -o-animation: spin 9s 3 alternate-reverse;
-  animation: spin 9s 3 alternate-reverse; 
-}
-
-.spicon-9s-4-alternate_reverse:hover {
-    -webkit-animation: spin 9s 4 alternate-reverse;
-  -moz-animation: spin 9s 4 alternate-reverse;
-  -ms-animation: spin 9s 4 alternate-reverse;
-  -o-animation: spin 9s 4 alternate-reverse;
-  animation: spin 9s 4 alternate-reverse;
-}
-
-.spicon-9s-5-alternate_reverse:hover {
-    -webkit-animation: spin 9s 5 alternate-reverse;
-  -moz-animation: spin 9s 5 alternate-reverse;
-  -ms-animation: spin 9s 5 alternate-reverse;
-  -o-animation: spin 9s 5 alternate-reverse;
-  animation: spin 9s 5 alternate-reverse;
-}
-
-.spicon-9s-6-alternate_reverse:hover {
-  -webkit-animation: spin 9s 6 alternate-reverse;
-  -moz-animation: spin 9s 6 alternate-reverse;
-  -ms-animation: spin 9s 6 alternate-reverse;
-  -o-animation: spin 9s 6 alternate-reverse;
-  animation: spin 9s 6 alternate-reverse;
-}
-
-/* 10s */
-
-/* Spicon 10s-x-normal classes */
-
-.spicon-10s-1-normal:hover {
-  -webkit-animation: spin 10s 1 normal;
-  -moz-animation: spin 10s 1 normal;
-  -ms-animation: spin 10s 1 normal;
-  -o-animation: spin 10s 1 normal;
-  animation: spin 10s 1 normal;
-}
-
-.spicon-10s-2-normal:hover {
-  -webkit-animation: spin 10s 2 normal;
-  -moz-animation: spin 10s 2 normal;
-  -ms-animation: spin 10s 2 normal;
-  -o-animation: spin 10s 2 normal;
-  animation: spin 10s 2 normal;
-}
-
-.spicon-10s-3-normal:hover {
-  -webkit-animation: spin 10s 3 normal;
-  -moz-animation: spin 10s 3 normal;
-  -ms-animation: spin 10s 3 normal;
-  -o-animation: spin 10s 3 normal;
-  animation: spin 10s 3 normal; 
-}
-
-.spicon-10s-4-normal:hover {
-  -webkit-animation: spin 10s 4 normal;
-  -moz-animation: spin 10s 4 normal;
-  -ms-animation: spin 10s 4 normal;
-  -o-animation: spin 10s 4 normal;
-  animation: spin 10s 4 normal; 
-}
-
-.spicon-10s-5-normal:hover {
-  -webkit-animation: spin 10s 5 normal;
-  -moz-animation: spin 10s 5 normal;
-  -ms-animation: spin 10s 5 normal;
-  -o-animation: spin 10s 5 normal;
-  animation: spin 10s 5 normal; 
-}
-
-.spicon-10s-6-normal:hover {
-  -webkit-animation: spin 10s 6 normal;
-  -moz-animation: spin 10s 6 normal;
-  -ms-animation: spin 10s 6 normal;
-  -o-animation: spin 10s 6 normal;
-  animation: spin 10s 6 normal;
-}
-
-/* Spicon 10s-x-reverse classes */
-
-.spicon-10s-1-reverse:hover {
-  -webkit-animation: spin 10s 1 reverse;
-  -moz-animation: spin 10s 1 reverse;
-  -ms-animation: spin 10s 1 reverse;
-  -o-animation: spin 10s 1 reverse;
-  animation: spin 10s 1 reverse;
-}
-
-.spicon-10s-2-reverse:hover {
-  -webkit-animation: spin 10s 2 reverse;
-  -moz-animation: spin 10s 2 reverse;
-  -ms-animation: spin 10s 2 reverse;
-  -o-animation: spin 10s 2 reverse;
-  animation: spin 10s 2 reverse;
-}
-
-.spicon-10s-3-reverse:hover {
-    -webkit-animation: spin 10s 3 reverse;
-  -moz-animation: spin 10s 3 reverse;
-  -ms-animation: spin 10s 3 reverse;
-  -o-animation: spin 10s 3 reverse;
-  animation: spin 10s 3 reverse;
-}
-
-.spicon-10s-4-reverse:hover {
-    -webkit-animation: spin 10s 4 reverse;
-  -moz-animation: spin 10s 4 reverse;
-  -ms-animation: spin 10s 4 reverse;
-  -o-animation: spin 10s 4 reverse;
-  animation: spin 10s 4 reverse;
-}
-
-.spicon-10s-5-reverse:hover {
-  -webkit-animation: spin 10s 5 reverse;
-  -moz-animation: spin 10s 5 reverse;
-  -ms-animation: spin 10s 5 reverse;
-  -o-animation: spin 10s 5 reverse;
-  animation: spin 10s 5 reverse; 
-}
-
-.spicon-10s-6-reverse:hover {
-  -webkit-animation: spin 10s 6 reverse;
-  -moz-animation: spin 10s 6 reverse;
-  -ms-animation: spin 10s 6 reverse;
-  -o-animation: spin 10s 6 reverse;
-  animation: spin 10s 6 reverse; 
-}
-
-/* Spicon 10s-x-alternate classes */
-
-.spicon-10s-1-alternate:hover {
-  -webkit-animation: spin 10s 1 alternate;
-  -moz-animation: spin 10s 1 alternate;
-  -ms-animation: spin 10s 1 alternate;
-  -o-animation: spin 10s 1 alternate;
-  animation: spin 10s 1 alternate;
-}
-
-.spicon-10s-2-alternate:hover {
-  -webkit-animation: spin 10s 2 alternate;
-  -moz-animation: spin 10s 2 alternate;
-  -ms-animation: spin 10s 2 alternate;
-  -o-animation: spin 10s 2 alternate;
-  animation: spin 10s 2 alternate;
-}
-
-.spicon-10s-3-alternate:hover {
-  -webkit-animation: spin 10s 3 alternate;
-  -moz-animation: spin 10s 3 alternate;
-  -ms-animation: spin 10s 3 alternate;
-  -o-animation: spin 10s 3 alternate;
-  animation: spin 10s 3 alternate; 
-}
-
-.spicon-10s-4-alternate:hover {
-    -webkit-animation: spin 10s 4 alternate;
-  -moz-animation: spin 10s 4 alternate;
-  -ms-animation: spin 10s 4 alternate;
-  -o-animation: spin 10s 4 alternate;
-  animation: spin 10s 4 alternate;
-}
-
-.spicon-10s-5-alternate:hover {
-  -webkit-animation: spin 10s 5 alternate;
-  -moz-animation: spin 10s 5 alternate;
-  -ms-animation: spin 10s 5 alternate;
-  -o-animation: spin 10s 5 alternate;
-  animation: spin 10s 5 alternate; 
-}
-
-.spicon-10s-6-alternate:hover {
-  -webkit-animation: spin 10s 6 alternate;
-  -moz-animation: spin 10s 6 alternate;
-  -ms-animation: spin 10s 6 alternate;
-  -o-animation: spin 10s 6 alternate;
-  animation: spin 10s 6 alternate; 
-}
-
-/* Spicon 10s-x-alternate_reverse classes */
-
-.spicon-10s-1-alternate_reverse:hover {
-  -webkit-animation: spin 10s 1 alternate-reverse;
-  -moz-animation: spin 10s 1 alternate-reverse;
-  -ms-animation: spin 10s 1 alternate-reverse;
-  -o-animation: spin 10s 1 alternate-reverse;
-  animation: spin 10s 1 alternate-reverse;
-}
-
-.spicon-10s-2-alternate_reverse:hover {
-  -webkit-animation: spin 10s 2 alternate-reverse;
-  -moz-animation: spin 10s 2 alternate-reverse;
-  -ms-animation: spin 10s 2 alternate-reverse;
-  -o-animation: spin 10s 2 alternate-reverse;
-  animation: spin 10s 2 alternate-reverse;
-}
-
-.spicon-10s-3-alternate_reverse:hover {
-    -webkit-animation: spin 10s 3 alternate-reverse;
-  -moz-animation: spin 10s 3 alternate-reverse;
-  -ms-animation: spin 10s 3 alternate-reverse;
-  -o-animation: spin 10s 3 alternate-reverse;
-  animation: spin 10s 3 alternate-reverse;
-}
-
-.spicon-10s-4-alternate_reverse:hover {
-    -webkit-animation: spin 10s 4 alternate-reverse;
-  -moz-animation: spin 10s 4 alternate-reverse;
-  -ms-animation: spin 10s 4 alternate-reverse;
-  -o-animation: spin 10s 4 alternate-reverse;
-  animation: spin 10s 4 alternate-reverse;
-}
-
-.spicon-10s-5-alternate_reverse:hover {
-  -webkit-animation: spin 10s 5 alternate-reverse;
-  -moz-animation: spin 10s 5 alternate-reverse;
-  -ms-animation: spin 10s 5 alternate-reverse;
-  -o-animation: spin 10s 5 alternate-reverse;
-  animation: spin 10s 5 alternate-reverse; 
-}
-
-.spicon-10s-6-alternate_reverse:hover {
-  -webkit-animation: spin 10s 6 alternate-reverse;
-  -moz-animation: spin 10s 6 alternate-reverse;
-  -ms-animation: spin 10s 6 alternate-reverse;
-  -o-animation: spin 10s 6 alternate-reverse;
-  animation: spin 10s 6 alternate-reverse;
-}