@charset "utf-8";

/* CSS Document */


.clfx:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clfx {
    display: inline-block;
}
html[xmlns] .clfx {
    display: block;
}
* html .clfx {
    height: 1%;
}



#apreloader{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding: 0px;
	z-index: 25000000000000;
	opacity: 1;
	transition: all 900ms ease-in-out;
	text-align: center;
}

#apreloader-inner{
	text-align: center;
	display: inline-block;
	position: absolute;
	width: 100%;
	text-align: center;
	height: 250px;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
}

#gif-spinner{
	position: absolute;
	top: 0px;
	z-index: 8;
	width: 100%;
	display: none;
}

#css3-spinner{
	position: absolute;
	margin: 0;
	top: 0px;
	height: auto;
	display: block;
	width: 100%;
	z-index: 1;
}

#css3-spinner > div{
	margin: 0 auto;
}

#apreloader-content-wrap {
	position: absolute;
	left: 0px;
	right: 0px;
	text-align: center;
	width: 100%;
	top: 100px;
}

#apreloader-logo-container{
	margin-bottom: 16px;
	text-align: center;
}

#apreloader-logo-container img{
	max-width: 100%;
	margin: auto;
}

#apreloader-text{
	display: block;
	text-align: center;
}


/* end layout style, begin animations style */
/* START CUBE */

.cube {
  width: 30px;
  height: 30px;
  background-color: #fff;
  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  -o-animation: rotateplane 1.2s infinite ease-in-out;
  -moz-animation: rotateplane 1.2s infinite ease-in-out;
  -ms-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-ms-keyframes rotateplane {
  0% { -ms-transform: perspective(120px) }
  50% { -ms-transform: perspective(120px) rotateY(180deg) }
  100% { -ms-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@-moz-keyframes rotateplane {
  0% { -moz-transform: perspective(120px) }
  50% { -moz-transform: perspective(120px) rotateY(180deg) }
  100% { -moz-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@-o-keyframes rotateplane {
  0% { -o-transform: perspective(120px) }
  50% { -o-transform: perspective(120px) rotateY(180deg) }
  100% { -o-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
    -ms-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
    -o-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
    -moz-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
    -ms-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
    -moz-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
    -o-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -ms-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -moz-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -o-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

/* END CUBE */

/* START CIRCLE */

.circle {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -ms-animation: bounce 2.0s infinite ease-in-out;
  -o-animation: bounce 2.0s infinite ease-in-out;
  -moz-animation: bounce 2.0s infinite ease-in-out;
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
  ms-delay: -1.0s;
  moz-delay: -1.0s;
  o-delay: -1.0s;
}

@-ms-keyframes bounce {
  0%, 100% { -ms-transform: scale(0.0) }
  50% { -ms-transform: scale(1.0) }
}

@-o-keyframes bounce {
  0%, 100% { -o-transform: scale(0.0) }
  50% { -o-transform: scale(1.0) }
}

@-moz-keyframes bounce {
  0%, 100% { -moz-transform: scale(0.0) }
  50% { -moz-transform: scale(1.0) }
}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    -moz-transform: scale(0.0);
    -o-transform: scale(0.0);
    -ms-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -o-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -moz-transform: scale(1.0);
  }
}

/* END CIRCLE */

/* START STICKS*/

.sticks {
  margin: 100px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.sticks > div {
  background-color: #fff;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  -moz-animation: stretchdelay 1.2s infinite ease-in-out;
  -o-animation: stretchdelay 1.2s infinite ease-in-out;
  -ms-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.sticks .rect2 {
  -moz-animation-delay: -1.1s;
  -o-animation-delay: -1.1s;
  -ms-animation-delay: -1.1s;
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.sticks .rect3 {
  -webkit-animation-delay: -1.0s;
  -moz-animation-delay: -1.0s;
  -o-animation-delay: -1.0s;
  -ms-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.sticks .rect4 {
  -o-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  -ms-animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.sticks .rect5 {
  -webkit-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -ms-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-ms-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@-o-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@-moz-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
    -moz-transform: scaleY(0.4);
    -o-transform: scaleY(0.4);
    -ms-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
    -ms-transform: scaleY(1.0);
    -o-transform: scaleY(1.0);
    -moz-transform: scaleY(1.0);
  }
}

/* END STICKS */

/* START TWO CUBES */

.twocubs {
  margin: 100px auto;
  width: 32px;
  height: 32px;
  position: relative;
}

.cube1, .cube2 {
  background-color: #fff;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  -ms-animation: cubemove 1.8s infinite ease-in-out;
  -o-animation: cubemove 1.8s infinite ease-in-out;
  -moz-animation: cubemove 1.8s infinite ease-in-out;
  -webkit-animation: cubemove 1.8s infinite ease-in-out;
  animation: cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -ms-animation-delay: -0.9s;
  -o-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-ms-keyframes cubemove {
  25% { -ms-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -ms-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -ms-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -ms-transform: rotate(-360deg) }
}

@-o-keyframes cubemove {
  25% { -o-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -o-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -o-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -o-transform: rotate(-360deg) }
}

@-moz-keyframes cubemove {
  25% { -moz-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -moz-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -moz-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -moz-transform: rotate(-360deg) }
}

@-webkit-keyframes cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    -ms-transform: translateX(42px) rotate(-90deg) scale(0.5);
    -o-transform: translateX(42px) rotate(-90deg) scale(0.5);
    -moz-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    -ms-transform: translateX(42px) translateY(42px) rotate(-179deg);
    -o-transform: translateX(42px) translateY(42px) rotate(-179deg);
    -moz-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    -o-transform: translateX(42px) translateY(42px) rotate(-180deg);
    -moz-transform: translateX(42px) translateY(42px) rotate(-180deg);
    -ms-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -ms-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -o-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -moz-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
  }
}

/* END TWO CUBES */

/* START ROUND */

.round {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #fff;
  border-radius: 100%;  
  -ms-animation: scaleout 1.0s infinite ease-in-out;
  -o-animation: scaleout 1.0s infinite ease-in-out;
  -moz-animation: scaleout 1.0s infinite ease-in-out;
  -webkit-animation: scaleout 1.0s infinite ease-in-out;
  animation: scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
  0% { -webkit-transform: scale(0.0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@-ms-keyframes scaleout {
  0% { -ms-transform: scale(0.0) }
  100% {
    -ms-transform: scale(1.0);
    opacity: 0;
  }
}

@-o-keyframes scaleout {
  0% { -o-transform: scale(0.0) }
  100% {
    -o-transform: scale(1.0);
    opacity: 0;
  }
}

@-moz-keyframes scaleout {
  0% { -moz-transform: scale(0.0) }
  100% {
    -moz-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes scaleout {
  0% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    -moz-transform: scale(0.0);
    -ms-transform: scale(0.0);
    -o-transform: scale(0.0);
  } 100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -o-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    opacity: 0;
  }
}

/* START SUPER COOL */

.supercool {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -webkit-animation: rotate 2.0s infinite linear;
  -ms-animation: rotate 2.0s infinite linear;
  -o-animation: rotate 2.0s infinite linear;
  -moz-animation: rotate 2.0s infinite linear;
  animation: rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #fff;
  border-radius: 100%;
  -moz-animation: bounce 2.0s infinite ease-in-out;
  -o-animation: bounce 2.0s infinite ease-in-out;
  -ms-animation: bounce 2.0s infinite ease-in-out;
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0px;
  -webkit-animation-delay: -1.0s;
  -ms-animation-delay: -1.0s;
  -o-animation-delay: -1.0s;
  -webkit-animation-delay: -1.0s;
  -moz-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}

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

@-ms-keyframes rotate { 100% { -ms-transform: rotate(360deg) }}

@-o-keyframes rotate { 100% { -o-transform: rotate(360deg) }}

@-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg) }}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@-ms-keyframes bounce {
  0%, 100% { -ms-transform: scale(0.0) }
  50% { -ms-transform: scale(1.0) }
}

@-o-keyframes bounce {
  0%, 100% { -o-transform: scale(0.0) }
  50% { -o-transform: scale(1.0) }
}

@-moz-keyframes bounce {
  0%, 100% { -moz-transform: scale(0.0) }
  50% { -moz-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    -o-transform: scale(0.0);
    -moz-transform: scale(0.0);
    -ms-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    -moz-transform: scale(1.0);
  }
}

/* END SUPER COOL */

/* START STARIGHT DOTS */

.straightdots {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.straightdots > div {
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  -ms-animation: bouncedelay 1.4s infinite ease-in-out;
  -o-animation: bouncedelay 1.4s infinite ease-in-out;
  -moz-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
}

.straightdots .bounce1 {
  -o-animation-delay: -0.32s;
  -ms-animation-delay: -0.32s;
  -moz-animation-delay: -0.32s;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.straightdots .bounce2 {
  -webkit-animation-delay: -0.16s;
  -o-animation-delay: -0.16s;
  -moz-animation-delay: -0.16s;
  -ms-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@-ms-keyframes bouncedelay {
  0%, 80%, 100% { -ms-transform: scale(0.0) }
  40% { -ms-transform: scale(1.0) }
}

@-moz-keyframes bouncedelay {
  0%, 80%, 100% { -moz-transform: scale(0.0) }
  40% { -moz-transform: scale(1.0) }
}

@-o-keyframes bouncedelay {
  0%, 80%, 100% { -o-transform: scale(0.0) }
  40% { -o-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    -o-transform: scale(0.0);
    -ms-transform: scale(0.0);
    -moz-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -o-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
  }
}

/* END STARIGHT DOTS */

/*START SPINNER */

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 50px;
  position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  -ms-animation: bouncedelay 1.2s infinite ease-in-out;
  -o-animation: bouncedelay 1.2s infinite ease-in-out;
  -moz-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2 {
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.container3 {
  -o-transform: rotateZ(90deg);
  -ms-transform: rotateZ(90deg);
  -moz-transform: rotateZ(90deg);
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  -o-animation-delay: -1.1s;
  -moz-animation-delay: -1.1s;
  -ms-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  -moz-animation-delay: -1.0s;
  -ms-animation-delay: -1.0s;
  -o-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  -o-animation-delay: -0.9s;
  -ms-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  -ms-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  -o-animation-delay: -0.7s;
  -moz-animation-delay: -0.7s;
  -ms-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  -ms-animation-delay: -0.6s;
  -o-animation-delay: -0.6s;
  -moz-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  -ms-animation-delay: -0.5s;
  -o-animation-delay: -0.5s;
  -moz-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  -ms-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  -o-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  -ms-animation-delay: -0.2s;
  -o-animation-delay: -0.2s;
  -moz-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  -ms-animation-delay: -0.1s;
  -o-animation-delay: -0.1s;
  -moz-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@-ms-keyframes bouncedelay {
  0%, 80%, 100% { -ms-transform: scale(0.0) }
  40% { -ms-transform: scale(1.0) }
}

@-o-keyframes bouncedelay {
  0%, 80%, 100% { -o-transform: scale(0.0) }
  40% { -o-transform: scale(1.0) }
}

@-moz-keyframes bouncedelay {
  0%, 80%, 100% { -moz-transform: scale(0.0) }
  40% { -moz-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    -ms-transform: scale(0.0);
    -o-transform: scale(0.0);
    -moz-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    -moz-transform: scale(1.0);
  }
}

/* END SPINNER */

/* START FOLLOWING BALLS */

#movingBallG{
	position: relative;
	width: 256px;
	height: 20px;
	float: none;
	margin: auto;
}

.movingBallLineG{
	position:absolute;
	left:0px;
	top:8px;
	height:4px;
	width:256px;
	background-color:#FFFFFF;
}

.movingBallG{
	background-color:#FFFFFF;
	position:absolute;
	top:0;
	left:0;
	width:20px;
	height:20px;
	-moz-border-radius:10px;
	-moz-animation-name:bounce_movingBallG;
	-moz-animation-duration:0.7s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:linear;
	-webkit-border-radius:10px;
	-webkit-animation-name:bounce_movingBallG;
	-webkit-animation-duration:0.7s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:linear;
	-ms-border-radius:10px;
	-ms-animation-name:bounce_movingBallG;
	-ms-animation-duration:0.7s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:linear;
	-o-border-radius:10px;
	-o-animation-name:bounce_movingBallG;
	-o-animation-duration:0.7s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:linear;
	border-radius:10px;
	animation-name:bounce_movingBallG;
	animation-duration:0.7s;
	animation-iteration-count:infinite;
	animation-direction:linear;
}

@-moz-keyframes bounce_movingBallG{
0%{
left:0px;
}

50%{
left:236px;
}

100%{
left:0px;
}

}

@-webkit-keyframes bounce_movingBallG{
0%{
left:0px;
}

50%{
left:236px;
}

100%{
left:0px;
}

}

@-ms-keyframes bounce_movingBallG{
0%{
left:0px;
}

50%{
left:236px;
}

100%{
left:0px;
}

}

@-o-keyframes bounce_movingBallG{
0%{
left:0px;
}

50%{
left:236px;
}

100%{
left:0px;
}

}

@keyframes bounce_movingBallG{
0%{
left:0px;
}

50%{
left:236px;
}

100%{
left:0px;
}

}

/* END FOLLOWING BALLS */

/* START WIN8 */

.windows8 {
	position: relative;
	width: 100px;
	height: 100px;
	float: none;
	margin: auto;
}

.windows8 .wBall {
	position: absolute;
	width: 86px;
	height: 86px;
	opacity: 0;
	-moz-transform: rotate(225deg);
	-moz-animation: orbit 3.8499999999999996s infinite;
	-webkit-transform: rotate(225deg);
	-webkit-animation: orbit 3.8499999999999996s infinite;
	-ms-transform: rotate(225deg);
	-ms-animation: orbit 3.8499999999999996s infinite;
	-o-transform: rotate(225deg);
	-o-animation: orbit 3.8499999999999996s infinite;
	transform: rotate(225deg);
	animation: orbit 3.8499999999999996s infinite;
}

.windows8 .wBall .wInnerBall{
	position: absolute;
	width: 11px;
	height: 11px;
	background: #FFFFFF;
	left:0px;
	top:0px;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	-ms-border-radius: 11px;
	-o-border-radius: 11px;
	border-radius: 11px;
}

.windows8 #wBall_1 {
-moz-animation-delay: 0.84s;
-webkit-animation-delay: 0.84s;
-ms-animation-delay: 0.84s;
-o-animation-delay: 0.84s;
animation-delay: 0.84s;
}

.windows8 #wBall_2 {
-moz-animation-delay: 0.17s;
-webkit-animation-delay: 0.17s;
-ms-animation-delay: 0.17s;
-o-animation-delay: 0.17s;
animation-delay: 0.17s;
}

.windows8 #wBall_3 {
-moz-animation-delay: 0.34s;
-webkit-animation-delay: 0.34s;
-ms-animation-delay: 0.34s;
-o-animation-delay: 0.34s;
animation-delay: 0.34s;
}

.windows8 #wBall_4 {
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.windows8 #wBall_5 {
-moz-animation-delay: 0.67s;
-webkit-animation-delay: 0.67s;
-ms-animation-delay: 0.67s;
-o-animation-delay: 0.67s;
animation-delay: 0.67s;
}

@-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}

30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}

39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}

70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}

75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}

76% {
opacity: 0;
-moz-transform:rotate(900deg);
}

100% {
opacity: 0;
-moz-transform: rotate(900deg);
}

}

@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}

30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}

39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}

70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}

75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}

76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}

100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}

}

@-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}

30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}

39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}

70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}

75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}

76% {
opacity: 0;
-ms-transform:rotate(900deg);
}

100% {
opacity: 0;
-ms-transform: rotate(900deg);
}

}

@-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}

30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}

39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}

70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}

75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}

76% {
opacity: 0;
-o-transform:rotate(900deg);
}

100% {
opacity: 0;
-o-transform: rotate(900deg);
}

}

@keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}

7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}

30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}

39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}

70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}

75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}

76% {
opacity: 0;
transform:rotate(900deg);
}

100% {
opacity: 0;
transform: rotate(900deg);
}

}

/* END WIN8 */

.blackgifs ul {
	display: block;
	padding: 0px;
	margin: 0px;
	width: 100%;
	text-align: center;
}

.blackgifs ul li {
	display: block;
	padding: 0px;
	margin: 0px;
	width: 100%;
	padding-bottom: 50px;
	padding-top: 50px;
	border-bottom: solid 1px #eee;
	float: left;
	background-color: #000;	
}

.whitegifs ul {
	display: block;
	padding: 0px;
	margin: 0px;
	width: 100%;
	text-align: center;
}

.whitegifs ul li {
	display: block;
	padding: 0px;
	margin: 0px;
	width: 100%;
	padding-bottom: 50px;
	padding-top: 50px;
	border-bottom: solid 1px #eee;
	float: left;
	background-color: #fff;	
}