cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h2>CSS3 Animations Plugin</h2>
<p>Created by Tomas Stankovic <a href='https://developer.mozilla.org/en-US/demos/detail/css3-animations-plugin/launch'>https://developer.mozilla.org/en-US/demos/detail/css3-animations-plugin/launch</a></p>


<h3>Basic effects</h3>

<div id="box" class="shake-box">shake</div>
<div id="box" class="shakeUp-box">shakeUp</div>
<div id="box" class="pulze-box">pulze</div>
<div id="box" class="zoom-box">zoom</div>
<div id="box" class="hide-box">hide</div>
<div id="box" class="skew-box">skew</div>

<h3>Rotate effects</h3>

<div id="box" class="rotate-box">rotate</div>
<div id="box" class="halfRotate-box">halfRorate</div>
<div id="box" class="flipRight-box">flipRight</div>
<div id="box" class="flipRightX-box">flipRightX</div>
<div id="box" class="flipLeft-box">flipLeft</div>
<div id="box" class="flipLeftX-box">flipLeftX</div>

<h3>Rotate and zoom effects</h3>

<div id="box" class="rotateAndZoom-box">rotateAndZoom</div>
<div id="box" class="rotateAndZoomX-box">rotateAndZoomX</div>
<div id="box" class="rotateAndZoomY-box">rotateAndZoomY</div>
<div id="box" class="rotateAndZoomOut-box">rotateAndZoomOut</div>
<div id="box" class="rotateAndZoomOutX-box">rotateAndZoomOutX</div>
<div id="box" class="rotateAndZoomOutY-box">rotateAndZoomOutY</div>
<div id="box" class="rotateAndZoomP-box">rotateAndZoomP</div>

<h3 style='margin-bottom:50px;'>Slide effects</h3>
<span class='topSlideShow-hover'>Hover me</span>
<div id="box" class="topSlideShow-box">topSlideShow</div>
<span class='bottomSlideShow-hover'>Hover me</span>
<div id="box" class="bottomSlideShow-box moreZindex">bottomSlideShow</div>
<span class='leftSlideShow-hover'>Hover me</span>
<div id="box" class="leftSlideShow-box">leftSlideShow</div>
<span class='rightSlideShow-hover'>Hover me</span>
<div id="box" class="rightSlideShow-box">rightSlideShow</div>
<span class='topSlideHide-hover'>Hover me</span>
<div id="box" class="topSlideHide-box">topSlideHide</div>
<span class='bottomSlideHide-hover'>Hover me</span>
<div id="box" class="bottomSlideHide-box moreZindex">bottomSlideHide</div>
<span class='leftSlideHide-hover'>Hover me</span>
<div id="box" class="leftSlideHide-box">leftSlideHide</div>
<span class='rightSlideHide-hover'>Hover me</span>
<div id="box" class="rightSlideHide-box">rightSlideHide</div>

<h3 style='margin-bottom:50px;'>Slide and rotate effects</h3>
<span class='topSlideRotateShow-hover'>Hover me</span>
<div id="box" class="topSlideRotateShow-box">topSlideRotateShow</div>
<span class='bottomSlideRotateShow-hover'>Hover me</span>
<div id="box" class="bottomSlideRotateShow-box moreZindex">bottomSlideRotateShow</div>
<span class='leftSlideRotateShow-hover'>Hover me</span>
<div id="box" class="leftSlideRotateShow-box">leftSlideRotateShow</div>
<span class='rightSlideRotateShow-hover'>Hover me</span>
<div id="box" class="rightSlideRotateShow-box">rightSlideRotateShow</div>
<span class='topSlideRotateHide-hover'>Hover me</span>
<div id="box" class="topSlideRotateHide-box">topSlideRotateHide</div>
<span class='bottomSlideRotateHide-hover'>Hover me</span>
<div id="box" class="bottomSlideRotateHide-box moreZindex">bottomSlideRotateHide</div>
<span class='leftSlideRotateHide-hover'>Hover me</span>
<div id="box" class="leftSlideRotateHide-box">leftSlideRotateHide</div>
<span class='rightSlideRotateHide-hover'>Hover me</span>
<div id="box" class="rightSlideRotateHide-box">rightSlideRotateHide</div>
            
          
!
            
              /*---------------------------------------------------
  CSS3 ANIMATIONS PLUGIN
  ver.: 1.0

  Slinto - Tomas Stankovic
  web: slinto.sk
  twitter: TomasStankovic
  START PARTY!
-----------------------------------------------------*/

/* =============================================================================
   1. SHAKE
   ========================================================================== */
@keyframes "APshake" {
 0% {
    left: 0px;
 }
 20% {
    left: -20px;
 }
 40% {
    left: 20px;
 }
 60% {
    left: -10px;
 }
 80% {
    left: 10px;
 }
 100% {
    left: 0px;
 }
}

@-moz-keyframes APshake {
 0% {
   left: 0px;
 }
 20% {
   left: -20px;
 }
 40% {
   left: 20px;
 }
 60% {
   left: -10px;
 }
 80% {
   left: 10px;
 }
 100% {
   left: 0px;
 }

}

@-webkit-keyframes "APshake" {
 0% {
   left: 0px;
 }
 20% {
   left: -20px;
 }
 40% {
   left: 20px;
 }
 60% {
   left: -10px;
 }
 80% {
   left: 10px;
 }
 100% {
   left: 0px;
 }

}

@-ms-keyframes "APshake" {
 0% {
   left: 0px;
 }
 20% {
   left: -20px;
 }
 40% {
   left: 20px;
 }
 60% {
   left: -10px;
 }
 80% {
   left: 10px;
 }
 100% {
   left: 0px;
 }

}

@-o-keyframes "APshake" {
 0% {
   left: 0px;
 }
 20% {
   left: -20px;
 }
 40% {
   left: 20px;
 }
 60% {
   left: -10px;
 }
 80% {
   left: 10px;
 }
 100% {
   left: 0px;
 }
}

/* =============================================================================
   SHAKE UP & DOWN
   ========================================================================== */
@keyframes "APshakeUpDown" {
 0% {
    top: 0px;
 }
 20% {
    top: -20px;
 }
 40% {
    top: 20px;
 }
 60% {
    top: -10px;
 }
 80% {
    top: 10px;
 }
 100% {
    top: 0px;
 }

}

@-moz-keyframes APshakeUpDown {
 0% {
   top: 0px;
 }
 20% {
   top: -20px;
 }
 40% {
   top: 20px;
 }
 60% {
   top: -10px;
 }
 80% {
   top: 10px;
 }
 100% {
   top: 0px;
 }

}

@-webkit-keyframes "APshakeUpDown" {
 0% {
   top: 0px;
 }
 20% {
   top: -20px;
 }
 40% {
   top: 20px;
 }
 60% {
   top: -10px;
 }
 80% {
   top: 10px;
 }
 100% {
   top: 0px;
 }

}

@-ms-keyframes "APshakeUpDown" {
 0% {
   top: 0px;
 }
 20% {
   top: -20px;
 }
 40% {
   top: 20px;
 }
 60% {
   top: -10px;
 }
 80% {
   top: 10px;
 }
 100% {
   top: 0px;
 }

}

@-o-keyframes "APshakeUpDown" {
 0% {
   top: 0px;
 }
 20% {
   top: -20px;
 }
 40% {
   top: 20px;
 }
 60% {
   top: -10px;
 }
 80% {
   top: 10px;
 }
 100% {
   top: 0px;
 }

}

/* =============================================================================
   PULZE
   ========================================================================== */
@keyframes "APpulze" {
 0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
 }
 25% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
 }
 50% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
 }
 75% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
 }
 100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
 }
}

@-moz-keyframes APpulze {
 0% {
   -moz-transform: scale(1);
   transform: scale(1);
 }
 25% {
   -moz-transform: scale(1.2);
   transform: scale(1.2);
 }
 50% {
   -moz-transform: scale(1);
   transform: scale(1);
 }
 75% {
   -moz-transform: scale(1.2);
   transform: scale(1.2);
 }
 100% {
   -moz-transform: scale(1);
   transform: scale(1);
 }

}

@-webkit-keyframes "APpulze" {
 0% {
   -webkit-transform: scale(1);
   transform: scale(1);
 }
 25% {
   -webkit-transform: scale(1.2);
   transform: scale(1.2);
 }
 50% {
   -webkit-transform: scale(1);
   transform: scale(1);
 }
 75% {
   -webkit-transform: scale(1.2);
   transform: scale(1.2);
 }
 100% {
   -webkit-transform: scale(1);
   transform: scale(1);
 }

}

@-ms-keyframes "APpulze" {
 0% {
   -ms-transform: scale(1);
   transform: scale(1);
 }
 25% {
   -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 50% {
   -ms-transform: scale(1);
   transform: scale(1);
 }
 75% {
   -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 100% {
   -ms-transform: scale(1);
   transform: scale(1);
 }

}

@-o-keyframes "APpulze" {
 0% {
   -o-transform: scale(1);
   transform: scale(1);
 }
 25% {
   -o-transform: scale(1.2);
   transform: scale(1.2);
 }
 50% {
   -o-transform: scale(1);
   transform: scale(1);
 }
 75% {
   -o-transform: scale(1.2);
   transform: scale(1.2);
 }
 100% {
   -o-transform: scale(1);
   transform: scale(1);
 }

}

/* =============================================================================
   ZOOM
   ========================================================================== */
@keyframes "APzoom" {
 0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
 }
 35% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
 }
 65% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
 }
 100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
 }

}

@-moz-keyframes APzoom {
 0% {
   -moz-transform: scale(1);
   transform: scale(1);
 }
 35% {
   -moz-transform: scale(1.2);
   transform: scale(1.2);
 }
 65% {
   -moz-transform: scale(1.2);
   transform: scale(1.2);
 }
 100% {
   -moz-transform: scale(1);
   transform: scale(1);
 }

}

@-webkit-keyframes "APzoom" {
 0% {
   -webkit-transform: scale(1);
   transform: scale(1);
 }
 35% {
   -webkit-transform: scale(1.2);
   transform: scale(1.2);
 }
 65% {
   -webkit-transform: scale(1.2);
   transform: scale(1.2);
 }
 100% {
   -webkit-transform: scale(1);
   transform: scale(1);
 }

}

@-ms-keyframes "APzoom" {
 0% {
   -ms-transform: scale(1);
   transform: scale(1);
 }
 35% {
   -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 65% {
   -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 100% {
   -ms-transform: scale(1);
   transform: scale(1);
 }

}

@-o-keyframes "APzoom" {
 0% {
   -o-transform: scale(1);
   transform: scale(1);
 }
 35% {
   -o-transform: scale(1.2);
   transform: scale(1.2);
 }
 65% {
   -o-transform: scale(1.2);
   transform: scale(1.2);
 }
 100% {
   -o-transform: scale(1);
   transform: scale(1);
 }

}

/* =============================================================================
   HIDE
   ========================================================================== */
@keyframes "APhide" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    display: none;
 }

}

@-moz-keyframes APhide {
 0% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
   display: none;
 }

}

@-webkit-keyframes "APhide" {
 0% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
   display: none;
 }

}

@-ms-keyframes "APhide" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   display: none;
 }

}

@-o-keyframes "APhide" {
 0% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
   display: none;
 }

}

/* =============================================================================
   ROTATE
   ========================================================================== */
@keyframes "AProtate" {
 0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }
 100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
 }

}

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

}

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

}

@-ms-keyframes "AProtate" {
 0% {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 100% {
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-o-keyframes "AProtate" {
 0% {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 100% {
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

/* =============================================================================
   HALF ROTATE
   ========================================================================== */
@keyframes "APhalfRotate" {
 0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }
 40% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
 }
 55% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
 }
 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }

}

@-moz-keyframes APhalfRotate {
 0% {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 40% {
   -moz-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 55% {
   -moz-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 100% {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-webkit-keyframes "APhalfRotate" {
 0% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 40% {
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 55% {
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 100% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-ms-keyframes "APhalfRotate" {
 0% {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 40% {
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 55% {
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 100% {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-o-keyframes "APhalfRotate" {
 0% {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 40% {
   -o-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 55% {
   -o-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 100% {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

/* =============================================================================
   FLIP RIGHT
   ========================================================================== */
@keyframes "APflipRight" {
 0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }
 40% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
 }
 55% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
 }
 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }
}

@-moz-keyframes APflipRight {
 0% {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 40% {
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 55% {
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-webkit-keyframes "APflipRight" {
 0% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 40% {
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 55% {
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-ms-keyframes "APflipRight" {
 0% {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 40% {
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 55% {
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-o-keyframes "APflipRight" {
 0% {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 40% {
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 55% {
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

/* =============================================================================
   FLIP RIGHT X
   ========================================================================== */
@keyframes "APflipRightX" {
 0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    top: 0px;
 }
 35% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 0px;
 }
 45% {
    top: 5px;
 }
 50% {
    top: -5px;
 }
 55% {
    top: 0px;
 }
 65% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
 }
 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }

}

@-moz-keyframes APflipRightX {
 0% {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
   top: 0px;
 }
 35% {
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
   top: 0px;
 }
 45% {
   top: 5px;
 }
 50% {
   top: -5px;
 }
 55% {
   top: 0px;
 }
 65% {
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-webkit-keyframes "APflipRightX" {
 0% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   top: 0px;
 }
 35% {
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
   top: 0px;
 }
 45% {
   top: 5px;
 }
 50% {
   top: -5px;
 }
 55% {
   top: 0px;
 }
 65% {
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-ms-keyframes "APflipRightX" {
 0% {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
   top: 0px;
 }
 35% {
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
   top: 0px;
 }
 45% {
   top: 5px;
 }
 50% {
   top: -5px;
 }
 55% {
   top: 0px;
 }
 65% {
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-o-keyframes "APflipRightX" {
 0% {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   top: 0px;
 }
 35% {
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
   top: 0px;
 }
 45% {
   top: 5px;
 }
 50% {
   top: -5px;
 }
 55% {
   top: 0px;
 }
 65% {
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
}

/* =============================================================================
   FLIP LEFT
   ========================================================================== */
@keyframes "APflipLeft" {
 0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }
 40% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
 }
 55% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
 }
 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }

}

@-moz-keyframes APflipLeft {
 0% {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 40% {
   -moz-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 55% {
   -moz-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 100% {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-webkit-keyframes "APflipLeft" {
 0% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 40% {
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 55% {
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 100% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-ms-keyframes "APflipLeft" {
 0% {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 40% {
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 55% {
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 100% {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-o-keyframes "APflipLeft" {
 0% {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 40% {
   -o-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 55% {
   -o-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 100% {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}


/* =============================================================================
   FLIP LEFT X
   ========================================================================== */
@keyframes "APflipLeftX" {
 0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    top: 0px;
 }
 35% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 0px;
 }
 45% {
    top: 5px;
 }
 50% {
    top: -5px;
 }
 55% {
    top: 0px;
 }
 65% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
 }
 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }

}

@-moz-keyframes APflipLeftX {
 0% {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
   top: 0px;
 }
 35% {
   -moz-transform: rotate(-90deg);
   transform: rotate(-90deg);
   top: 0px;
 }
 45% {
   top: 5px;
 }
 50% {
   top: -5px;
 }
 55% {
   top: 0px;
 }
 65% {
   -moz-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 100% {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-webkit-keyframes "APflipLeftX" {
 0% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   top: 0px;
 }
 35% {
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
   top: 0px;
 }
 45% {
   top: 5px;
 }
 50% {
   top: -5px;
 }
 55% {
   top: 0px;
 }
 65% {
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 100% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-ms-keyframes "APflipLeftX" {
 0% {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
   top: 0px;
 }
 35% {
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
   top: 0px;
 }
 45% {
   top: 5px;
 }
 50% {
   top: -5px;
 }
 55% {
   top: 0px;
 }
 65% {
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 100% {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

@-o-keyframes "APflipLeftX" {
 0% {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   top: 0px;
 }
 35% {
   -o-transform: rotate(-90deg);
   transform: rotate(-90deg);
   top: 0px;
 }
 45% {
   top: 5px;
 }
 50% {
   top: -5px;
 }
 55% {
   top: 0px;
 }
 65% {
   -o-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 100% {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

/* =============================================================================
   SKEW
   ========================================================================== */
@keyframes "APskew" {
 0% {
    -webkit-transform: skewX(0deg);
    -moz-transform: skewX(0deg);
    -o-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    transform: skewX(0deg);
 }
 20% {
    -webkit-transform: skewX(10deg);
    -moz-transform: skewX(10deg);
    -o-transform: skewX(10deg);
    -ms-transform: skewX(10deg);
    transform: skewX(10deg);
 }
 40% {
    -webkit-transform: skewX(-10deg);
    -moz-transform: skewX(-10deg);
    -o-transform: skewX(-10deg);
    -ms-transform: skewX(-10deg);
    transform: skewX(-10deg);
 }
 60% {
    -webkit-transform: skewX(5deg);
    -moz-transform: skewX(5deg);
    -o-transform: skewX(5deg);
    -ms-transform: skewX(5deg);
    transform: skewX(5deg);
 }
 80% {
    -webkit-transform: skewX(-5deg);
    -moz-transform: skewX(-5deg);
    -o-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    transform: skewX(-5deg);
 }
 100% {
    -webkit-transform: skewX(0deg);
    -moz-transform: skewX(0deg);
    -o-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    transform: skewX(0deg);
 }

}

@-moz-keyframes APskew {
 0% {
   -moz-transform: skewX(0deg);
   transform: skewX(0deg);
 }
 20% {
   -moz-transform: skewX(10deg);
   transform: skewX(10deg);
 }
 40% {
   -moz-transform: skewX(-10deg);
   transform: skewX(-10deg);
 }
 60% {
   -moz-transform: skewX(5deg);
   transform: skewX(5deg);
 }
 80% {
   -moz-transform: skewX(-5deg);
   transform: skewX(-5deg);
 }
 100% {
   -moz-transform: skewX(0deg);
   transform: skewX(0deg);
 }

}

@-webkit-keyframes "APskew" {
 0% {
   -webkit-transform: skewX(0deg);
   transform: skewX(0deg);
 }
 20% {
   -webkit-transform: skewX(10deg);
   transform: skewX(10deg);
 }
 40% {
   -webkit-transform: skewX(-10deg);
   transform: skewX(-10deg);
 }
 60% {
   -webkit-transform: skewX(5deg);
   transform: skewX(5deg);
 }
 80% {
   -webkit-transform: skewX(-5deg);
   transform: skewX(-5deg);
 }
 100% {
   -webkit-transform: skewX(0deg);
   transform: skewX(0deg);
 }

}

@-ms-keyframes "APskew" {
 0% {
   -ms-transform: skewX(0deg);
   transform: skewX(0deg);
 }
 20% {
   -ms-transform: skewX(10deg);
   transform: skewX(10deg);
 }
 40% {
   -ms-transform: skewX(-10deg);
   transform: skewX(-10deg);
 }
 60% {
   -ms-transform: skewX(5deg);
   transform: skewX(5deg);
 }
 80% {
   -ms-transform: skewX(-5deg);
   transform: skewX(-5deg);
 }
 100% {
   -ms-transform: skewX(0deg);
   transform: skewX(0deg);
 }

}

@-o-keyframes "APskew" {
 0% {
   -o-transform: skewX(0deg);
   transform: skewX(0deg);
 }
 20% {
   -o-transform: skewX(10deg);
   transform: skewX(10deg);
 }
 40% {
   -o-transform: skewX(-10deg);
   transform: skewX(-10deg);
 }
 60% {
   -o-transform: skewX(5deg);
   transform: skewX(5deg);
 }
 80% {
   -o-transform: skewX(-5deg);
   transform: skewX(-5deg);
 }
 100% {
   -o-transform: skewX(0deg);
   transform: skewX(0deg);
 }

}

/* =============================================================================
   TOP SLIDE SHOW
   ========================================================================== */
@keyframes "APtopSlideShow" {
 0% {
    top: -300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 100% {
    top: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
}

@-moz-keyframes APtopSlideShow {
 0% {
   top: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

@-webkit-keyframes "APtopSlideShow" {
 0% {
   top: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

@-ms-keyframes "APtopSlideShow" {
 0% {
   top: -300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   top: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

@-o-keyframes "APtopSlideShow" {
 0% {
   top: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
}

/* =============================================================================
   BOTTOM SLIDE SHOW
   ========================================================================== */
@keyframes "APbottomSlideShow" {
 0% {
    top: 300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 100% {
    top: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }

}

@-moz-keyframes APbottomSlideShow {
 0% {
   top: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

@-webkit-keyframes "APbottomSlideShow" {
 0% {
   top: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

@-ms-keyframes "APbottomSlideShow" {
 0% {
   top: 300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   top: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

@-o-keyframes "APbottomSlideShow" {
 0% {
   top: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

/* =============================================================================
   LEFT SLIDE SHOW
   ========================================================================== */
@keyframes "APleftSlideShow" {
 0% {
    left: -300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 100% {
    left: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
}

@-moz-keyframes APleftSlideShow {
 0% {
   left: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

@-webkit-keyframes "APleftSlideShow" {
 0% {
   left: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

@-ms-keyframes "APleftSlideShow" {
 0% {
   left: -300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   left: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

@-o-keyframes "APleftSlideShow" {
 0% {
   left: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

/* =============================================================================
   RIGHT SLIDE SHOW
   ========================================================================== */
@keyframes "APrightSlideShow" {
 0% {
    left: 300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 100% {
    left: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }

}

@-moz-keyframes APrightSlideShow {
 0% {
   left: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

@-webkit-keyframes "APrightSlideShow" {
 0% {
   left: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

@-ms-keyframes "APrightSlideShow" {
 0% {
   left: 300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   left: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

@-o-keyframes "APrightSlideShow" {
 0% {
   left: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }

}

/* =============================================================================
   TOP SLIDE ROTATE SHOW
   ========================================================================== */
@keyframes "APtopSlideRotateShow" {
 0% {
    top: -300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
 }
 100% {
    top: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
 }
}

@-moz-keyframes APtopSlideRotateShow {
 0% {
   top: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-webkit-keyframes "APtopSlideRotateShow" {
 0% {
   top: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-ms-keyframes "APtopSlideRotateShow" {
 0% {
   top: -300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   top: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-o-keyframes "APtopSlideRotateShow" {
 0% {
   top: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

/* =============================================================================
   BOTTOM SLIDE ROTATE SHOW
   ========================================================================== */
@keyframes "APbottomSlideRotateShow" {
 0% {
    top: 300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
 }
 100% {
    top: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
 }

}

@-moz-keyframes APbottomSlideRotateShow {
 0% {
   top: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-webkit-keyframes "APbottomSlideRotateShow" {
 0% {
   top: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-ms-keyframes "APbottomSlideRotateShow" {
 0% {
   top: 300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   top: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-o-keyframes "APbottomSlideRotateShow" {
 0% {
   top: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

/* =============================================================================
   LEFT SLIDE ROTATE SHOW
   ========================================================================== */
@keyframes "APleftSlideRotateShow" {
 0% {
    left: -300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
 }
 100% {
    left: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
 }

}

@-moz-keyframes APleftSlideRotateShow {
 0% {
   left: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-webkit-keyframes "APleftSlideRotateShow" {
 0% {
   left: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-ms-keyframes "APleftSlideRotateShow" {
 0% {
   left: -300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   left: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-o-keyframes "APleftSlideRotateShow" {
 0% {
   left: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

/* =============================================================================
   RIGHT SLIDE ROTATE SHOW
   ========================================================================== */
@keyframes "APrightSlideRotateShow" {
 0% {
    left: 300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
 }
 100% {
    left: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
 }

}

@-moz-keyframes APrightSlideRotateShow {
 0% {
   left: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-webkit-keyframes "APrightSlideRotateShow" {
 0% {
   left: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-ms-keyframes "APrightSlideRotateShow" {
 0% {
   left: 300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   left: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-o-keyframes "APrightSlideRotateShow" {
 0% {
   left: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 100% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

/* =============================================================================
   TOP SLIDE HIDE
   ========================================================================== */
@keyframes "APtopSlideHide" {
 0% {
    top: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
 100% {
    top: -300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }

}

@-moz-keyframes APtopSlideHide {
 0% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   top: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-webkit-keyframes "APtopSlideHide" {
 0% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   top: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-ms-keyframes "APtopSlideHide" {
 0% {
   top: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   top: -300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-o-keyframes "APtopSlideHide" {
 0% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   top: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

/* =============================================================================
   BOTTOM SLIDE HIDE
   ========================================================================== */
@keyframes "APbottomSlideHide" {
 0% {
    top: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
 100% {
    top: 300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }

}

@-moz-keyframes APbottomSlideHide {
 0% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   top: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-webkit-keyframes "APbottomSlideHide" {
 0% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   top: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-ms-keyframes "APbottomSlideHide" {
 0% {
   top: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   top: 300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-o-keyframes "APbottomSlideHide" {
 0% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   top: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
}


/* =============================================================================
   LEFT SLIDE HIDE
   ========================================================================== */
@keyframes "APleftSlideHide" {
 0% {
    left: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
 100% {
    left: -300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }

}

@-moz-keyframes APleftSlideHide {
 0% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   left: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-webkit-keyframes "APleftSlideHide" {
 0% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   left: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-ms-keyframes "APleftSlideHide" {
 0% {
   left: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   left: -300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-o-keyframes "APleftSlideHide" {
 0% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   left: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

/* =============================================================================
   RIGHT SLIDE HIDE
   ========================================================================== */
@keyframes "APrightSlideHide" {
 0% {
    left: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
 100% {
    left: 300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }

}

@-moz-keyframes APrightSlideHide {
 0% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   left: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-webkit-keyframes "APrightSlideHide" {
 0% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   left: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-ms-keyframes "APrightSlideHide" {
 0% {
   left: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   left: 300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-o-keyframes "APrightSlideHide" {
 0% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   left: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

/* =============================================================================
   TOP SLIDE ROTATE HIDE
   ========================================================================== */
@keyframes "APtopSlideRotateHide" {
 0% {
    top: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
 }
 100% {
    top: -300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
 }

}

@-moz-keyframes APtopSlideRotateHide {
 0% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   top: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

@-webkit-keyframes "APtopSlideRotateHide" {
 0% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   top: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

@-ms-keyframes "APtopSlideRotateHide" {
 0% {
   top: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   top: -300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

@-o-keyframes "APtopSlideRotateHide" {
 0% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   top: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

/* =============================================================================
   BOTTOM SLIDE ROTATE HIDE
   ========================================================================== */
@keyframes "APbottomSlideRotateHide" {
 0% {
    top: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
 }
 100% {
    top: 300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
 }

}

@-moz-keyframes APbottomSlideRotateHide {
 0% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   top: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

@-webkit-keyframes "APbottomSlideRotateHide" {
 0% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   top: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

@-ms-keyframes "APbottomSlideRotateHide" {
 0% {
   top: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   top: 300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

@-o-keyframes "APbottomSlideRotateHide" {
 0% {
   top: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   top: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

/* =============================================================================
   LEFT SLIDE ROTATE HIDE
   ========================================================================== */
@keyframes "APleftSlideRotateHide" {
 0% {
    left: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
 }
 100% {
    left: -300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
 }

}

@-moz-keyframes APleftSlideRotateHide {
 0% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   left: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

@-webkit-keyframes "APleftSlideRotateHide" {
 0% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   left: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

@-ms-keyframes "APleftSlideRotateHide" {
 0% {
   left: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   left: -300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

@-o-keyframes "APleftSlideRotateHide" {
 0% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   left: -300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

/* =============================================================================
   RIGHT SLIDE ROTATE HIDE
   ========================================================================== */
@keyframes "APrightSlideRotateHide" {
 0% {
    left: 0px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
 }
 100% {
    left: 300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
 }

}

@-moz-keyframes APrightSlideRotateHide {
 0% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   left: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

@-webkit-keyframes "APrightSlideRotateHide" {
 0% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   left: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

@-ms-keyframes "APrightSlideRotateHide" {
 0% {
   left: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   left: 300px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

@-o-keyframes "APrightSlideRotateHide" {
 0% {
   left: 0px;
   filter: alpha(opacity=100);
   opacity: 1;
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 100% {
   left: 300px;
   filter: alpha(opacity=0);
   opacity: 0;
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }

}

/* =============================================================================
   ROTATE AND ZOOM
   ========================================================================== */
@keyframes "AProtateAndZoom" {
 0% {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
 }
 50% {
    -webkit-transform: scale(1.3) rotate(180deg);
    -moz-transform: scale(1.3) rotate(180deg);
    -o-transform: scale(1.3) rotate(180deg);
    -ms-transform: scale(1.3) rotate(180deg);
    transform: scale(1.3) rotate(180deg);
 }
 100% {
    -webkit-transform: scale(1) rotate(360deg);
    -moz-transform: scale(1) rotate(360deg);
    -o-transform: scale(1) rotate(360deg);
    -ms-transform: scale(1) rotate(360deg);
    transform: scale(1) rotate(360deg);
 }

}

@-moz-keyframes AProtateAndZoom {
 0% {
   -moz-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -moz-transform: scale(1.3) rotate(180deg);
   transform: scale(1.3) rotate(180deg);
 }
 100% {
   -moz-transform: scale(1) rotate(360deg);
   transform: scale(1) rotate(360deg);
 }

}

@-webkit-keyframes "AProtateAndZoom" {
 0% {
   -webkit-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -webkit-transform: scale(1.3) rotate(180deg);
   transform: scale(1.3) rotate(180deg);
 }
 100% {
   -webkit-transform: scale(1) rotate(360deg);
   transform: scale(1) rotate(360deg);
 }

}

@-ms-keyframes "AProtateAndZoom" {
 0% {
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -ms-transform: scale(1.3) rotate(180deg);
   transform: scale(1.3) rotate(180deg);
 }
 100% {
   -ms-transform: scale(1) rotate(360deg);
   transform: scale(1) rotate(360deg);
 }

}

@-o-keyframes "AProtateAndZoom" {
 0% {
   -o-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -o-transform: scale(1.3) rotate(180deg);
   transform: scale(1.3) rotate(180deg);
 }
 100% {
   -o-transform: scale(1) rotate(360deg);
   transform: scale(1) rotate(360deg);
 }

}

/* =============================================================================
   ROTATE AND ZOOM X
   ========================================================================== */
@keyframes "AProtateAndZoomX" {
 0% {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
 }
 50% {
    -webkit-transform: scale(1.3) rotate(360deg);
    -moz-transform: scale(1.3) rotate(360deg);
    -o-transform: scale(1.3) rotate(360deg);
    -ms-transform: scale(1.3) rotate(360deg);
    transform: scale(1.3) rotate(360deg);
 }
 100% {
    -webkit-transform: scale(1) rotate(720deg);
    -moz-transform: scale(1) rotate(720deg);
    -o-transform: scale(1) rotate(720deg);
    -ms-transform: scale(1) rotate(720deg);
    transform: scale(1) rotate(720deg);
 }

}

@-moz-keyframes AProtateAndZoomX {
 0% {
   -moz-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -moz-transform: scale(1.3) rotate(360deg);
   transform: scale(1.3) rotate(360deg);
 }
 100% {
   -moz-transform: scale(1) rotate(720deg);
   transform: scale(1) rotate(720deg);
 }

}

@-webkit-keyframes "AProtateAndZoomX" {
 0% {
   -webkit-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -webkit-transform: scale(1.3) rotate(360deg);
   transform: scale(1.3) rotate(360deg);
 }
 100% {
   -webkit-transform: scale(1) rotate(720deg);
   transform: scale(1) rotate(720deg);
 }

}

@-ms-keyframes "AProtateAndZoomX" {
 0% {
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -ms-transform: scale(1.3) rotate(360deg);
   transform: scale(1.3) rotate(360deg);
 }
 100% {
   -ms-transform: scale(1) rotate(720deg);
   transform: scale(1) rotate(720deg);
 }

}

@-o-keyframes "AProtateAndZoomX" {
 0% {
   -o-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -o-transform: scale(1.3) rotate(360deg);
   transform: scale(1.3) rotate(360deg);
 }
 100% {
   -o-transform: scale(1) rotate(720deg);
   transform: scale(1) rotate(720deg);
 }

}

/* =============================================================================
   ROTATE AND ZOOM Y
   ========================================================================== */
@keyframes "AProtateAndZoomY" {
 0% {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
 }
 50% {
    -webkit-transform: scale(1.3) rotate(360deg);
    -moz-transform: scale(1.3) rotate(360deg);
    -o-transform: scale(1.3) rotate(360deg);
    -ms-transform: scale(1.3) rotate(360deg);
    transform: scale(1.3) rotate(360deg);
 }
 100% {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
 }

}

@-moz-keyframes AProtateAndZoomY {
 0% {
   -moz-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -moz-transform: scale(1.3) rotate(360deg);
   transform: scale(1.3) rotate(360deg);
 }
 100% {
   -moz-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }

}

@-webkit-keyframes "AProtateAndZoomY" {
 0% {
   -webkit-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -webkit-transform: scale(1.3) rotate(360deg);
   transform: scale(1.3) rotate(360deg);
 }
 100% {
   -webkit-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }

}

@-ms-keyframes "AProtateAndZoomY" {
 0% {
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -ms-transform: scale(1.3) rotate(360deg);
   transform: scale(1.3) rotate(360deg);
 }
 100% {
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }

}

@-o-keyframes "AProtateAndZoomY" {
 0% {
   -o-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -o-transform: scale(1.3) rotate(360deg);
   transform: scale(1.3) rotate(360deg);
 }
 100% {
   -o-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }

}

/* =============================================================================
   ROTATE AND ZOOM WITH PAUSE
   ========================================================================== */
@keyframes "AProtateAndZoomP" {
 0% {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
 }
 30% {
    -webkit-transform: scale(1.4) rotate(360deg);
    -moz-transform: scale(1.4) rotate(360deg);
    -o-transform: scale(1.4) rotate(360deg);
    -ms-transform: scale(1.4) rotate(360deg);
    transform: scale(1.4) rotate(360deg);
 }
 70% {
    -webkit-transform: scale(1.4) rotate(360deg);
    -moz-transform: scale(1.4) rotate(360deg);
    -o-transform: scale(1.4) rotate(360deg);
    -ms-transform: scale(1.4) rotate(360deg);
    transform: scale(1.4) rotate(360deg);
 }
 100% {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
 }

}

@-moz-keyframes AProtateAndZoomP {
 0% {
   -moz-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 30% {
   -moz-transform: scale(1.4) rotate(360deg);
   transform: scale(1.4) rotate(360deg);
 }
 70% {
   -moz-transform: scale(1.4) rotate(360deg);
   transform: scale(1.4) rotate(360deg);
 }
 100% {
   -moz-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }

}

@-webkit-keyframes "AProtateAndZoomP" {
 0% {
   -webkit-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 30% {
   -webkit-transform: scale(1.4) rotate(360deg);
   transform: scale(1.4) rotate(360deg);
 }
 70% {
   -webkit-transform: scale(1.4) rotate(360deg);
   transform: scale(1.4) rotate(360deg);
 }
 100% {
   -webkit-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }

}

@-ms-keyframes "AProtateAndZoomP" {
 0% {
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 30% {
   -ms-transform: scale(1.4) rotate(360deg);
   transform: scale(1.4) rotate(360deg);
 }
 70% {
   -ms-transform: scale(1.4) rotate(360deg);
   transform: scale(1.4) rotate(360deg);
 }
 100% {
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }

}

@-o-keyframes "AProtateAndZoomP" {
 0% {
   -o-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 30% {
   -o-transform: scale(1.4) rotate(360deg);
   transform: scale(1.4) rotate(360deg);
 }
 70% {
   -o-transform: scale(1.4) rotate(360deg);
   transform: scale(1.4) rotate(360deg);
 }
 100% {
   -o-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }

}

/* =============================================================================
   ROTATE AND ZOOM OUT
   ========================================================================== */
@keyframes "AProtateAndZoomOut" {
 0% {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
 }
 50% {
    -webkit-transform: scale(.7) rotate(180deg);
    -moz-transform: scale(.7) rotate(180deg);
    -o-transform: scale(.7) rotate(180deg);
    -ms-transform: scale(.7) rotate(180deg);
    transform: scale(.7) rotate(180deg);
 }
 100% {
    -webkit-transform: scale(1) rotate(360deg);
    -moz-transform: scale(1) rotate(360deg);
    -o-transform: scale(1) rotate(360deg);
    -ms-transform: scale(1) rotate(360deg);
    transform: scale(1) rotate(360deg);
 }

}

@-moz-keyframes AProtateAndZoomOut {
 0% {
   -moz-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -moz-transform: scale(.7) rotate(180deg);
   transform: scale(.7) rotate(180deg);
 }
 100% {
   -moz-transform: scale(1) rotate(360deg);
   transform: scale(1) rotate(360deg);
 }

}

@-webkit-keyframes "AProtateAndZoomOut" {
 0% {
   -webkit-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -webkit-transform: scale(.7) rotate(180deg);
   transform: scale(.7) rotate(180deg);
 }
 100% {
   -webkit-transform: scale(1) rotate(360deg);
   transform: scale(1) rotate(360deg);
 }

}

@-ms-keyframes "AProtateAndZoomOut" {
 0% {
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -ms-transform: scale(.7) rotate(180deg);
   transform: scale(.7) rotate(180deg);
 }
 100% {
   -ms-transform: scale(1) rotate(360deg);
   transform: scale(1) rotate(360deg);
 }

}

@-o-keyframes "AProtateAndZoomOut" {
 0% {
   -o-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -o-transform: scale(.7) rotate(180deg);
   transform: scale(.7) rotate(180deg);
 }
 100% {
   -o-transform: scale(1) rotate(360deg);
   transform: scale(1) rotate(360deg);
 }

}

/* =============================================================================
   ROTATE AND ZOOM OUT X
   ========================================================================== */
@keyframes "AProtateAndZoomOutX" {
 0% {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
 }
 50% {
    -webkit-transform: scale(.7) rotate(360deg);
    -moz-transform: scale(.7) rotate(360deg);
    -o-transform: scale(.7) rotate(360deg);
    -ms-transform: scale(.7) rotate(360deg);
    transform: scale(.7) rotate(360deg);
 }
 100% {
    -webkit-transform: scale(1) rotate(720deg);
    -moz-transform: scale(1) rotate(720deg);
    -o-transform: scale(1) rotate(720deg);
    -ms-transform: scale(1) rotate(720deg);
    transform: scale(1) rotate(720deg);
 }

}

@-moz-keyframes AProtateAndZoomOutX {
 0% {
   -moz-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -moz-transform: scale(.7) rotate(360deg);
   transform: scale(.7) rotate(360deg);
 }
 100% {
   -moz-transform: scale(1) rotate(720deg);
   transform: scale(1) rotate(720deg);
 }

}

@-webkit-keyframes "AProtateAndZoomOutX" {
 0% {
   -webkit-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -webkit-transform: scale(.7) rotate(360deg);
   transform: scale(.7) rotate(360deg);
 }
 100% {
   -webkit-transform: scale(1) rotate(720deg);
   transform: scale(1) rotate(720deg);
 }

}

@-ms-keyframes "AProtateAndZoomOutX" {
 0% {
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -ms-transform: scale(.7) rotate(360deg);
   transform: scale(.7) rotate(360deg);
 }
 100% {
   -ms-transform: scale(1) rotate(720deg);
   transform: scale(1) rotate(720deg);
 }

}

@-o-keyframes "AProtateAndZoomOutX" {
 0% {
   -o-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -o-transform: scale(.7) rotate(360deg);
   transform: scale(.7) rotate(360deg);
 }
 100% {
   -o-transform: scale(1) rotate(720deg);
   transform: scale(1) rotate(720deg);
 }

}

/* =============================================================================
   ROTATE AND ZOOM OUT Y
   ========================================================================== */
@keyframes "AProtateAndZoomOutY" {
 0% {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
 }
 50% {
    -webkit-transform: scale(.7) rotate(360deg);
    -moz-transform: scale(.7) rotate(360deg);
    -o-transform: scale(.7) rotate(360deg);
    -ms-transform: scale(.7) rotate(360deg);
    transform: scale(.7) rotate(360deg);
 }
 100% {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
 }

}

@-moz-keyframes AProtateAndZoomOutY {
 0% {
   -moz-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -moz-transform: scale(.7) rotate(360deg);
   transform: scale(.7) rotate(360deg);
 }
 100% {
   -moz-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }

}

@-webkit-keyframes "AProtateAndZoomOutY" {
 0% {
   -webkit-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -webkit-transform: scale(.7) rotate(360deg);
   transform: scale(.7) rotate(360deg);
 }
 100% {
   -webkit-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }

}

@-ms-keyframes "AProtateAndZoomOutY" {
 0% {
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -ms-transform: scale(.7) rotate(360deg);
   transform: scale(.7) rotate(360deg);
 }
 100% {
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }

}

@-o-keyframes "AProtateAndZoomOutY" {
 0% {
   -o-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }
 50% {
   -o-transform: scale(.7) rotate(360deg);
   transform: scale(.7) rotate(360deg);
 }
 100% {
   -o-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
 }

}

.shake-hover:hover ~ .shake-box, .shake-box:hover{
  -webkit-animation: APshake .5s;
  -moz-animation   : APshake .5s;
  -ms-animation    : APshake .5s;
  -o-animation     : APshake .5s;
  animation        : APshake .5s;
}

.shakeUp-hover:hover ~ .shakeUp-box, .shakeUp-box:hover{
  -webkit-animation: APshakeUpDown .5s;
  -moz-animation   : APshakeUpDown .5s;
  -ms-animation    : APshakeUpDown .5s;
  -o-animation     : APshakeUpDown .5s;
  animation        : APshakeUpDown .5s;
}

.pulze-hover:hover ~ .pulze-box, .pulze-box:hover{
  -webkit-animation: APpulze 2s;
  -moz-animation   : APpulze 2s;
  -ms-animation    : APpulze 2s;
  -o-animation     : APpulze 2s;
  animation        : APpulze 2s;
}

.zoom-hover:hover ~ .zoom-box, .zoom-box:hover{
  -webkit-animation: APzoom 3s;
  -moz-animation   : APzoom 3s;
  -ms-animation    : APzoom 3s;
  -o-animation     : APzoom 3s;
  animation        : APzoom 3s;
}

.hide-hover:hover ~ .hide-box, .hide-box:hover{
  -webkit-animation: APhide 1s;
  -moz-animation   : APhide 1s;
  -ms-animation    : APhide 1s;
  -o-animation     : APhide 1s;
  animation        : APhide 1s;
}

.skew-hover:hover ~ .skew-box, .skew-box:hover{
  -webkit-animation: APskew .5s;
  -moz-animation   : APskew .5s;
  -ms-animation    : APskew .5s;
  -o-animation     : APskew .5s;
  animation        : APskew .5s;
}

.rotate-hover:hover ~ .rotate-box, .rotate-box:hover{
  -webkit-animation: AProtate 1s;
  -moz-animation   : AProtate 1s;
  -ms-animation    : AProtate 1s;
  -o-animation     : AProtate 1s;
  animation        : AProtate 1s;
}

.halfRotate-hover:hover ~ .halfRotate-box, .halfRotate-box:hover{
  -webkit-animation: APhalfRotate 1s;
  -moz-animation   : APhalfRotate 1s;
  -ms-animation    : APhalfRotate 1s;
  -o-animation     : APhalfRotate 1s;
  animation        : APhalfRotate 1s;
}

.flipRight-hover:hover ~ .flipRight-box, .flipRight-box:hover{
  -webkit-animation: APflipRight 1s;
  -moz-animation   : APflipRight 1s;
  -ms-animation    : APflipRight 1s;
  -o-animation     : APflipRight 1s;
  animation        : APflipRight 1s;
}

.flipRightX-hover:hover ~ .flipRightX-box, .flipRightX-box:hover{
  -webkit-animation: APflipRightX 1s;
  -moz-animation   : APflipRightX 1s;
  -ms-animation    : APflipRightX 1s;
  -o-animation     : APflipRightX 1s;
  animation        : APflipRightX 1s;
}

.flipLeft-hover:hover ~ .flipLeft-box, .flipLeft-box:hover{
  -webkit-animation: APflipLeft 1s;
  -moz-animation   : APflipLeft 1s;
  -ms-animation    : APflipLeft 1s;
  -o-animation     : APflipLeft 1s;
  animation        : APflipLeft 1s;
}

.flipLeftX-hover:hover ~ .flipLeftX-box, .flipLeftX-box:hover{
  -webkit-animation: APflipLeftX 1s;
  -moz-animation   : APflipLeftX 1s;
  -ms-animation    : APflipLeftX 1s;
  -o-animation     : APflipLeftX 1s;
  animation        : APflipLeftX 1s;
}

.rotateAndZoom-hover:hover ~ .rotateAndZoom-box, .rotateAndZoom-box:hover{
  -webkit-animation: AProtateAndZoom 1s linear;
  -moz-animation   : AProtateAndZoom 1s linear;
  -ms-animation    : AProtateAndZoom 1s linear;
  -o-animation     : AProtateAndZoom 1s linear;
  animation        : AProtateAndZoom 1s linear;
}

.rotateAndZoomX-hover:hover ~ .rotateAndZoomX-box, .rotateAndZoomX-box:hover{
  -webkit-animation: AProtateAndZoomX 1.5s;
  -moz-animation   : AProtateAndZoomX 1.5s;
  -ms-animation    : AProtateAndZoomX 1.5s;
  -o-animation     : AProtateAndZoomX 1.5s;
  animation        : AProtateAndZoomX 1.5s;
}

.rotateAndZoomY-hover:hover ~ .rotateAndZoomY-box, .rotateAndZoomY-box:hover{
  -webkit-animation: AProtateAndZoomY 1.5s;
  -moz-animation   : AProtateAndZoomY 1.5s;
  -ms-animation    : AProtateAndZoomY 1.5s;
  -o-animation     : AProtateAndZoomY 1.5s;
  animation        : AProtateAndZoomY 1.5s;
}

.rotateAndZoomP-hover:hover ~ .rotateAndZoomP-box, .rotateAndZoomP-box:hover{
  -webkit-animation: AProtateAndZoomP 2s linear;
  -moz-animation   : AProtateAndZoomP 2s linear;
  -ms-animation    : AProtateAndZoomP 2s linear;
  -o-animation     : AProtateAndZoomP 2s linear;
  animation        : AProtateAndZoomP 2s linear;
}

.rotateAndZoomOut-hover:hover ~ .rotateAndZoomOut-box, .rotateAndZoomOut-box:hover{
  -webkit-animation: AProtateAndZoomOut 1s linear;
  -moz-animation   : AProtateAndZoomOut 1s linear;
  -ms-animation    : AProtateAndZoomOut 1s linear;
  -o-animation     : AProtateAndZoomOut 1s linear;
  animation        : AProtateAndZoomOut 1s linear;
}

.rotateAndZoomOutX-hover:hover ~ .rotateAndZoomOutX-box, .rotateAndZoomOutX-box:hover{
  -webkit-animation: AProtateAndZoomOutX 1.5s;
  -moz-animation   : AProtateAndZoomOutX 1.5s;
  -ms-animation    : AProtateAndZoomOutX 1.5s;
  -o-animation     : AProtateAndZoomOutX 1.5s;
  animation        : AProtateAndZoomOutX 1.5s;
}

.rotateAndZoomOutY-hover:hover ~ .rotateAndZoomOutY-box, .rotateAndZoomOutY-box:hover{
  -webkit-animation: AProtateAndZoomOutY 1.5s;
  -moz-animation   : AProtateAndZoomOutY 1.5s;
  -ms-animation    : AProtateAndZoomOutY 1.5s;
  -o-animation     : AProtateAndZoomOutY 1.5s;
  animation        : AProtateAndZoomOutY 1.5s;
}

.topSlideShow-hover:hover ~ .topSlideShow-box{
  -webkit-animation: APtopSlideShow 1s;
  -moz-animation   : APtopSlideShow 1s;
  -ms-animation    : APtopSlideShow 1s;
  -o-animation     : APtopSlideShow 1s;
  animation        : APtopSlideShow 1s;
}

.bottomSlideShow-hover:hover ~ .bottomSlideShow-box{
  -webkit-animation: APbottomSlideShow 1s;
  -moz-animation   : APbottomSlideShow 1s;
  -ms-animation    : APbottomSlideShow 1s;
  -o-animation     : APbottomSlideShow 1s;
  animation        : APbottomSlideShow 1s;
}

.leftSlideShow-hover:hover ~ .leftSlideShow-box{
  -webkit-animation: APleftSlideShow 1s;
  -moz-animation   : APleftSlideShow 1s;
  -ms-animation    : APleftSlideShow 1s;
  -o-animation     : APleftSlideShow 1s;
  animation        : APleftSlideShow 1s;
}

.rightSlideShow-hover:hover ~ .rightSlideShow-box{
  -webkit-animation: APrightSlideShow 1s;
  -moz-animation   : APrightSlideShow 1s;
  -ms-animation    : APrightSlideShow 1s;
  -o-animation     : APrightSlideShow 1s;
  animation        : APrightSlideShow 1s;
}

.topSlideRotateShow-hover:hover ~ .topSlideRotateShow-box{
  -webkit-animation: APtopSlideRotateShow .8s;
  -moz-animation   : APtopSlideRotateShow .8s;
  -ms-animation    : APtopSlideRotateShow .8s;
  -o-animation     : APtopSlideRotateShow .8s;
  animation        : APtopSlideRotateShow .8s;
}

.bottomSlideRotateShow-hover:hover ~ .bottomSlideRotateShow-box{
  -webkit-animation: APbottomSlideRotateShow .8s;
  -moz-animation   : APbottomSlideRotateShow .8s;
  -ms-animation    : APbottomSlideRotateShow .8s;
  -o-animation     : APbottomSlideRotateShow .8s;
  animation        : APbottomSlideRotateShow .8s;
}

.leftSlideRotateShow-hover:hover ~ .leftSlideRotateShow-box{
  -webkit-animation: APleftSlideRotateShow 1s;
  -moz-animation   : APleftSlideRotateShow 1s;
  -ms-animation    : APleftSlideRotateShow 1s;
  -o-animation     : APleftSlideRotateShow 1s;
  animation        : APleftSlideRotateShow 1s;
}

.rightSlideRotateShow-hover:hover ~ .rightSlideRotateShow-box{
  -webkit-animation: APrightSlideRotateShow 1s;
  -moz-animation   : APrightSlideRotateShow 1s;
  -ms-animation    : APrightSlideRotateShow 1s;
  -o-animation     : APrightSlideRotateShow 1s;
  animation        : APrightSlideRotateShow 1s;
}

.topSlideHide-hover:hover ~ .topSlideHide-box{
  -webkit-animation: APtopSlideHide 1s;
  -moz-animation   : APtopSlideHide 1s;
  -ms-animation    : APtopSlideHide 1s;
  -o-animation     : APtopSlideHide 1s;
  animation        : APtopSlideHide 1s;
}

.bottomSlideHide-hover:hover ~ .bottomSlideHide-box{
  -webkit-animation: APbottomSlideHide 1s;
  -moz-animation   : APbottomSlideHide 1s;
  -ms-animation    : APbottomSlideHide 1s;
  -o-animation     : APbottomSlideHide 1s;
  animation        : APbottomSlideHide 1s;
}

.leftSlideHide-hover:hover ~ .leftSlideHide-box{
  -webkit-animation: APleftSlideHide 1s;
  -moz-animation   : APleftSlideHide 1s;
  -ms-animation    : APleftSlideHide 1s;
  -o-animation     : APleftSlideHide 1s;
  animation        : APleftSlideHide 1s;
}

.rightSlideHide-hover:hover ~ .rightSlideHide-box{
  -webkit-animation: APrightSlideHide 1s;
  -moz-animation   : APrightSlideHide 1s;
  -ms-animation    : APrightSlideHide 1s;
  -o-animation     : APrightSlideHide 1s;
  animation        : APrightSlideHide 1s;
}

.topSlideRotateHide-hover:hover ~ .topSlideRotateHide-box{
  -webkit-animation: APtopSlideRotateHide 1s;
  -moz-animation   : APtopSlideRotateHide 1s;
  -ms-animation    : APtopSlideRotateHide 1s;
  -o-animation     : APtopSlideRotateHide 1s;
  animation        : APtopSlideRotateHide 1s;
}

.bottomSlideRotateHide-hover:hover ~ .bottomSlideRotateHide-box{
  -webkit-animation: APbottomSlideRotateHide 1s;
  -moz-animation   : APbottomSlideRotateHide 1s;
  -ms-animation    : APbottomSlideRotateHide 1s;
  -o-animation     : APbottomSlideRotateHide 1s;
  animation        : APbottomSlideRotateHide 1s;
}

.leftSlideRotateHide-hover:hover ~ .leftSlideRotateHide-box{
  -webkit-animation: APleftSlideRotateHide 1s;
  -moz-animation   : APleftSlideRotateHide 1s;
  -ms-animation    : APleftSlideRotateHide 1s;
  -o-animation     : APleftSlideRotateHide 1s;
  animation        : APleftSlideRotateHide 1s;
}

.rightSlideRotateHide-hover:hover ~ .rightSlideRotateHide-box{
  -webkit-animation: APrightSlideRotateHide 1s;
  -moz-animation   : APrightSlideRotateHide 1s;
  -ms-animation    : APrightSlideRotateHide 1s;
  -o-animation     : APrightSlideRotateHide 1s;
  animation        : APrightSlideRotateHide 1s;
}


/*
Sloppy demo only CSS please disregard
*/

html{
  color:#FFF;
  font-family:Verdana;
  background: url(http://stratosprovatopoulos.com/wp-content/themes/accentbox/images/cbg.png);
}

body {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

h3, h2{
  float:left;
  width:100%;
  color:#B69455;
  margin-left:30px;
}

p,a{
  color:#333;
  font-size:13px;
}

p{
  margin-left:30px;
}

h3{
  color:#D9462C;
}


div{
  position:relative;
  float:left;
  margin:30px;
  padding:10px;
  width:180px;
  border: 5px solid #193B4B;
  background: #3C7E9E;
  font-weight:bold;
  font-size:12px;
}


span {
  float: left;
  width: 180px;
  margin-left: 32px;
  margin-top: -18px;
  color: #333;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console