/* ---------------------- 
Stylesheet Guide
-------------------------

slideTop
slideBottom
slideLeft
slideRight
zoomOut
zoomIn
bounceInUp
bounceInRight
bounceInDown
bounceInLeft
pageRight
pageRightBack
pageLeft
pageLeftBack
pageBottomBack
pageTopBack
tinDown
tinUp
tinRight
tinLeft

*/
/* ================= slideTop  ================== */
.slideTop {
    opacity: 0;
    position: relative;
    -webkit-animation: slideTop 1s ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: slideTop 1s ease both;
    -moz-animation-play-state: paused;
    -o-animation: slideTop 1s ease both;
    -o-animation-play-state: paused;
    animation: slideTop 1s ease both;
    animation-play-state: paused;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes slideTop {
    0% { opacity: 0; top: -40px; }
    100% { opacity: 1; top: 0; }
}

@-moz-keyframes slideTop {
    0% { opacity: 0; top: -40px; }
    100% { opacity: 1; top: 0; }
}

@-o-keyframes slideTop {
    0% { opacity: 0; top: -40px; }
    100% { opacity: 1; top: 0; }
}

@keyframes slideTop {
    0% { opacity: 0; top: -40px; }
    100% { opacity: 1; top: 0; }
}
/* ================= slideBottom  ================== */
.slideBottom {
    opacity: 0;
    position: relative;
    -webkit-animation: slideBottom 1000ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: slideBottom 1000ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: slideBottom 1000ms ease both;
    -o-animation-play-state: paused;
    animation: slideBottom 1000ms ease both;
    animation-play-state: paused;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes slideBottom {
    0% { opacity: 0; top: 30px; }
    100% { opacity: 1; top: 0; }
}

@-moz-keyframes slideBottom {
    0% { opacity: 0; top: 30px; }
    100% { opacity: 1; top: 0; }
}

@-o-keyframes slideBottom {
    0% { opacity: 0; top: 30px; }
    100% { opacity: 1; top: 0; }
}

@keyframes slideBottom {
    0% { opacity: 0; top: 30px; }
    100% { opacity: 1; top: 0; }
}    
/* ================= slideLeft  ================== */    
.slideLeft {
    opacity: 0;
    position: relative;
    -webkit-animation: slideLeft 1000ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: slideLeft 1000ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: slideLeft 1000ms ease both;
    -o-animation-play-state: paused;
    animation: slideLeft 1000ms ease both;
    animation-play-state: paused;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes slideLeft {
    0% { opacity: 0; left: -30px; }
    100% { opacity: 1; left: 0; }
}

@-moz-keyframes slideLeft {
    0% { opacity: 0; left: -30px; }
    100% { opacity: 1; left: 0; }
}

@-o-keyframes slideLeft {
    0% { opacity: 0; left: -30px; }
    100% { opacity: 1; left: 0; }
}

@keyframes slideLeft {
    0% { opacity: 0; left: -30px; }
    100% { opacity: 1; left: 0; }
} 
/* ================= slideRight  ================== */
.slideRight {
    opacity: 0;
    position: relative;
    -webkit-animation: slideRight 1000ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: slideRight 1000ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: slideRight 1000ms ease both;
    -o-animation-play-state: paused;
    animation: slideRight 1000ms ease both;
    animation-play-state: paused;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes slideRight {
    0% { opacity: 0; left: 30px; }
    100% { opacity: 1; left: 0; }
}

@-moz-keyframes slideRight {
    0% { opacity: 0; left: 30px; }
    100% { opacity: 1; left: 0; }
}

@-o-keyframes slideRight {
    0% { opacity: 0; left: 30px; }
    100% { opacity: 1; left: 0; }
}

@keyframes slideRight {
    0% { opacity: 0; left: 30px; }
    100% { opacity: 1; left: 0; }
    } 
/* ================= zoomOut  ================== */
.zoomOut {
    opacity: 0;
    position: relative;
    -webkit-animation: zoomOut 1000ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: zoomOut 1000ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: zoomOut 1000ms ease both;
    -o-animation-play-state: paused;
    animation: zoomOut 1000ms ease both;
    animation-play-state: paused;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes zoomOut {
    0% { opacity: 0; -webkit-transform: scale(.6); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}

@-moz-keyframes zoomOut {
    0% { opacity: 0; -moz-transform: scale(.6); }
    100% { opacity: 1; -moz-transform: scale(1); }
}

@-o-keyframes zoomOut {
    0% { opacity: 0; -o-transform: scale(.6); }
    100% { opacity: 1; -o-transform: scale(1); }
}

@keyframes zoomOut {
    0% { opacity: 0; transform: scale(.6); }
    100% { opacity: 1; transform: scale(1); }
}

/* ================= zoomIn  ================== */
.zoomIn {
    opacity: 0;
    position: relative;
    -webkit-animation: zoomIn 1000ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: zoomIn 1000ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: zoomIn 1000ms ease both;
    -o-animation-play-state: paused;
    animation: zoomIn 1000ms ease both;
    animation-play-state: paused;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes zoomIn {
    0% { opacity: 0; -webkit-transform: scale(1.8); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}

@-moz-keyframes zoomIn {
    0% { opacity: 0; -moz-transform: scale(1.8); }
    100% { opacity: 1; -moz-transform: scale(1); }
}

@-o-keyframes zoomIn {
    0% { opacity: 0; -o-transform: scale(1.8); }
    100% { opacity: 1; -o-transform: scale(1); }
}

@keyframes zoomIn {
    0% { opacity: 0; transform: scale(1.8); }
    100% { opacity: 1; transform: scale(1); }
}
/* ================= bounceInUp  ================== */
.bounceInUp {
    opacity: 0;
    position: relative;
    -webkit-animation: bounceInUp 800ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: bounceInUp 800ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: bounceInUp 800ms ease both;
    -o-animation-play-state: paused;
    animation: bounceInUp 800ms ease both;
    animation-play-state: paused;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes bounceInUp {
    0% { opacity: 0; -webkit-transform: translateY(2000px); }
    60% { -webkit-transform: translateY(-30px); }
    80% { -webkit-transform: translateY(10px); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}

@-moz-keyframes bounceInUp {
    0% { opacity: 0; -moz-transform: translateY(2000px); }
    60% { -moz-transform: translateY(-30px); }
    80% { -moz-transform: translateY(10px); }
    100% { opacity: 1; -moz-transform: translateY(0); }
}

@-o-keyframes bounceInUp {
    0% { opacity: 0; -o-transform: translateY(2000px); }
    60% { -o-transform: translateY(-30px); }
    80% { -o-transform: translateY(10px); }
    100% { opacity: 1; -o-transform: translateY(0); }
}

@keyframes bounceInUp {
    0% { opacity: 0; transform: translateY(2000px); }
    60% { transform: translateY(-30px); }
    80% { transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* ================= bounceInRight  ================== */
.bounceInRight {
    opacity: 0;
    position: relative;
    -webkit-animation: bounceInRight 800ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: bounceInRight 800ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: bounceInRight 800ms ease both;
    -o-animation-play-state: paused;
    animation: bounceInRight 800ms ease both;
    animation-play-state: paused;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes bounceInRight {
    0% { opacity: 0; -webkit-transform: translateX(2000px); }
    60% { -webkit-transform: translateX(-30px); }
    80% { -webkit-transform: translateX(10px); }
    100% { opacity: 1; -webkit-transform: translateX(0); }
}

@-moz-keyframes bounceInRight {
    0% { opacity: 0; -moz-transform: translateX(2000px); }
    60% { -moz-transform: translateX(-30px); }
    80% { -moz-transform: translateX(10px); }
    100% { opacity: 1; -moz-transform: translateX(0); }
}

@-moz-keyframes bounceInRight {
    0% { opacity: 0; -o-transform: translateX(2000px); }
    60% { -o-transform: translateX(-30px); }
    80% { -o-transform: translateX(10px); }
    100% { opacity: 1; -o-transform: translateX(0); }
}

@keyframes bounceInRight {
    0% { opacity: 0; transform: translateX(2000px); }
    60% { transform: translateX(-30px); }
    80% { transform: translateX(10px); }
    100% { opacity: 1; transform: translateX(0); }
}
/* ================= bounceInDown  ================== */
.bounceInDown {
    opacity: 0;
    position: relative;
    -webkit-animation: bounceInDown 800ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: bounceInDown 800ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: bounceInDown 800ms ease both;
    -o-animation-play-state: paused;
    animation: bounceInDown 800ms ease both;
    animation-play-state: paused;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes bounceInDown {
    0% { opacity: 0; -webkit-transform: translateY(-2000px); }
    60% { -webkit-transform: translateY(30px); }
    80% { -webkit-transform: translateY(-10px); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}

@-moz-keyframes bounceInDown {
    0% { opacity: 0; -moz-transform: translateY(-2000px); }
    60% { -moz-transform: translateY(30px); }
    80% { -moz-transform: translateY(-10px); }
    100% { opacity: 1; -moz-transform: translateY(0); }
}

@-o-keyframes bounceInDown {
    0% { opacity: 0; -o-transform: translateY(-2000px); }
    60% { -o-transform: translateY(30px); }
    80% { -o-transform: translateY(-10px); }
    100% { opacity: 1; -o-transform: translateY(0); }
}

@keyframes bounceInDown {
    0% { opacity: 0; transform: translateY(-2000px); }
    60% { transform: translateY(30px); }
    80% { transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* ================= bounceInLeft  ================== */
.bounceInLeft {
    opacity: 0;
    position: relative;
    -webkit-animation: bounceInLeft 800ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: bounceInLeft 800ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: bounceInLeft 800ms ease both;
    -o-animation-play-state: paused;
    animation: bounceInLeft 800ms ease both;
    animation-play-state: paused;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes bounceInLeft {
    0% { opacity: 0; -webkit-transform: translateX(-2000px); }
    60% { -webkit-transform: translateX(30px); }
    80% { -webkit-transform: translateX(-10px); }
    100% { opacity: 1; -webkit-transform: translateX(0); }
}

@-moz-keyframes bounceInLeft {
    0% { opacity: 0; -moz-transform: translateX(-2000px); }
    60% { -moz-transform: translateX(30px); }
    80% { -moz-transform: translateX(-10px); }
    100% { opacity: 1; -moz-transform: translateX(0); }
}

@-o-keyframes bounceInLeft {
    0% { opacity: 0; -o-transform: translateX(-2000px); }
    60% { -o-transform: translateX(30px); }
    80% { -o-transform: translateX(-10px); }
    100% { opacity: 1; -o-transform: translateX(0); }
}

@keyframes bounceInLeft {
    0% { opacity: 0; transform: translateX(-2000px); }
    60% { transform: translateX(30px); }
    80% { transform: translateX(-10px); }
    100% { opacity: 1; transform: translateX(0); }
}
/* ================= pageRight  ================== */
.pageRight {
    opacity: 0;
    position: relative;
    -webkit-animation: pageRight 800ms ease both;
    -webkit-animation-play-state: paused;
    -webkit-transform-origin: 100% 50%;
    -moz-animation: pageRight 800ms ease both;
    -moz-animation-play-state: paused;
    -moz-transform-origin: 100% 50%;
    -o-animation: pageRight 800ms ease both;
    -o-animation-play-state: paused;
    -o-transform-origin: 100% 50%;
    animation: pageRight 800ms ease both;
    animation-play-state: paused;
    transform-origin: 100% 50%;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes pageRight {
    0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); }
    100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); }
}

@-moz-keyframes pageRight {
    0% { opacity: 0; -moz-transform: perspective(400px) rotateY(90deg); }
    100% { opacity: 1; -moz-transform: perspective(400px) rotateY(0deg); }
}

@-o-keyframes pageRight {
    0% { opacity: 0; -o-transform: perspective(400px) rotateY(90deg); }
    100% { opacity: 1; -o-transform: perspective(400px) rotateY(0deg); }
}

@keyframes pageRight {
    0% { opacity: 0; transform: perspective(400px) rotateY(90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}
/* ================= pageRightBack  ================== */
.pageRightBack {
    opacity: 0;
    position: relative;
    -webkit-animation: pageRightBack 800ms ease both;
    -webkit-animation-play-state: paused;
    -webkit-transform-origin: 100% 50%;
    -moz-animation: pageRightBack 800ms ease both;
    -moz-animation-play-state: paused;
    -moz-transform-origin: 100% 50%;
    -o-animation: pageRightBack 800ms ease both;
    -o-animation-play-state: paused;
    -o-transform-origin: 100% 50%;
    animation: pageRightBack 800ms ease both;
    animation-play-state: paused;
    transform-origin: 100% 50%;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes pageRightBack {
    0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(-90deg); }
    100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); }
}

@-moz-keyframes pageRightBack {
    0% { opacity: 0; -moz-transform: perspective(400px) rotateY(-90deg); }
    100% { opacity: 1; -moz-transform: perspective(400px) rotateY(0deg); }
}

@-o-keyframes pageRightBack {
    0% { opacity: 0; -o-transform: perspective(400px) rotateY(-90deg); }
    100% { opacity: 1; -o-transform: perspective(400px) rotateY(0deg); }
}

@keyframes pageRightBack {
    0% { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}
/* ================= pageLeft  ================== */
.pageLeft {
    opacity: 0;
    position: relative;
    -webkit-animation: pageLeft 800ms ease both;
    -webkit-animation-play-state: paused;
    -webkit-transform-origin: 0% 50%;
    -moz-animation: pageLeft 800ms ease both;
    -moz-animation-play-state: paused;
    -moz-transform-origin: 0% 50%;
    -o-animation: pageLeft 800ms ease both;
    -o-animation-play-state: paused;
    -o-transform-origin: 0% 50%;
    animation: pageLeft 800ms ease both;
    animation-play-state: paused;
    transform-origin: 0% 50%;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes pageLeft {
    0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(-90deg); }
    100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); }
}

@-moz-keyframes pageLeft {
    0% { opacity: 0; -moz-transform: perspective(400px) rotateY(-90deg); }
    100% { opacity: 1; -moz-transform: perspective(400px) rotateY(0deg); }
}

@-o-keyframes pageLeft {
    0% { opacity: 0; -o-transform: perspective(400px) rotateY(-90deg); }
    100% { opacity: 1; -o-transform: perspective(400px) rotateY(0deg); }
}

@keyframes pageLeft {
    0% { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}
/* ================= pageLeftBack  ================== */
.pageLeftBack {
    opacity: 0;
    position: relative;
    -webkit-animation: pageLeftBack 800ms ease both;
    -webkit-animation-play-state: paused;
    -webkit-transform-origin: 0% 50%;
    -moz-animation: pageLeftBack 800ms ease both;
    -moz-animation-play-state: paused;
    -moz-transform-origin: 0% 50%;
    -o-animation: pageLeftBack 800ms ease both;
    -o-animation-play-state: paused;
    -o-transform-origin: 0% 50%;
    animation: pageLeftBack 800ms ease both;
    animation-play-state: paused;
    transform-origin: 0% 50%;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes pageLeftBack {
    0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); }
    100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); }
}

@-moz-keyframes pageLeftBack {
    0% { opacity: 0; -moz-transform: perspective(400px) rotateY(90deg); }
    100% { opacity: 1; -moz-transform: perspective(400px) rotateY(0deg); }
}

@-o-keyframes pageLeftBack {
    0% { opacity: 0; -o-transform: perspective(400px) rotateY(90deg); }
    100% { opacity: 1; -o-transform: perspective(400px) rotateY(0deg); }
}

@keyframes pageLeftBack {
    0% { opacity: 0; transform: perspective(400px) rotateY(90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}
/* ================= pageBottomBack  ================== */
.pageBottomBack {
    opacity: 0;
    position: relative;
    -webkit-animation: pageBottomBack 800ms ease both;
    -webkit-animation-play-state: paused;
    -webkit-transform-origin: 50% 100%;
    -moz-animation: pageBottomBack 800ms ease both;
    -moz-animation-play-state: paused;
    -moz-transform-origin: 50% 100%;
    -o-animation: pageBottomBack 800ms ease both;
    -o-animation-play-state: paused;
    -o-transform-origin: 50% 100%;
    animation: pageBottomBack 800ms ease both;
    animation-play-state: paused;
    transform-origin: 50% 100%;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes pageBottomBack {
    0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); }
}

@-moz-keyframes pageBottomBack {
    0% { opacity: 0; -moz-transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); }
}

@-o-keyframes pageBottomBack {
    0% { opacity: 0; -o-transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); }
}

@keyframes pageBottomBack {
    0% { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}
/* ================= pageTopBack  ================== */
.pageTopBack {
    opacity: 0;
    position: relative;
    -webkit-animation: pageTopBack 800ms ease both;
    -webkit-animation-play-state: paused;
    -webkit-transform-origin: 50% 0%;
    -moz-animation: pageTopBack 800ms ease both;
    -moz-animation-play-state: paused;
    -moz-transform-origin: 50% 0%;
    -o-animation: pageTopBack 800ms ease both;
    -o-animation-play-state: paused;
    -o-transform-origin: 50% 0%;
    animation: pageTopBack 800ms ease both;
    animation-play-state: paused;
    transform-origin: 50% 0%;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes pageTopBack {
    0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); }
}

@-moz-keyframes pageTopBack {
    0% { opacity: 0; -moz-transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); }
}

@-o-keyframes pageTopBack {
    0% { opacity: 0; -o-transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); }
}

@keyframes pageTopBack {
    0% { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}
/* ================= Tin Effects  ================== */
.tinDown {
  -webkit-animation-name: tinDown;
  -moz-animation-name: tinDown;
  -ms-animation-name: tinDown;
  -o-animation-name: tinDown;
  animation-name: tinDown;
    -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
.tinUp {
  -webkit-animation-name: tinUp;
  -moz-animation-name: tinUp;
  -ms-animation-name: tinUp;
  -o-animation-name: tinUp;
  animation-name: tinUp;
    -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
.tinLeft {
  -webkit-animation-name: tinLeft;
  -moz-animation-name: tinLeft;
  -ms-animation-name: tinLeft;
  -o-animation-name: tinLeft;
  animation-name: tinLeft;
    -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
.tinRight {
  -webkit-animation-name: tinRight;
  -moz-animation-name: tinRight;
  -ms-animation-name: tinRight;
  -o-animation-name: tinRight;
  animation-name: tinDown;
    -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-moz-keyframes tinRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
    -moz-transform: scale(1, 1) translateX(900%);
    -ms-transform: scale(1, 1) translateX(900%);
    -o-transform: scale(1, 1) translateX(900%);
    transform: scale(1, 1) translateX(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    -moz-transform: scale(1.1, 1.1) translateX(0);
    -ms-transform: scale(1.1, 1.1) translateX(0);
    -o-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    -moz-transform: scale(1, 1) translateX(0);
    -ms-transform: scale(1, 1) translateX(0);
    -o-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@-webkit-keyframes tinRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
    -moz-transform: scale(1, 1) translateX(900%);
    -ms-transform: scale(1, 1) translateX(900%);
    -o-transform: scale(1, 1) translateX(900%);
    transform: scale(1, 1) translateX(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    -moz-transform: scale(1.1, 1.1) translateX(0);
    -ms-transform: scale(1.1, 1.1) translateX(0);
    -o-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    -moz-transform: scale(1, 1) translateX(0);
    -ms-transform: scale(1, 1) translateX(0);
    -o-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@-o-keyframes tinRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
    -moz-transform: scale(1, 1) translateX(900%);
    -ms-transform: scale(1, 1) translateX(900%);
    -o-transform: scale(1, 1) translateX(900%);
    transform: scale(1, 1) translateX(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    -moz-transform: scale(1.1, 1.1) translateX(0);
    -ms-transform: scale(1.1, 1.1) translateX(0);
    -o-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    -moz-transform: scale(1, 1) translateX(0);
    -ms-transform: scale(1, 1) translateX(0);
    -o-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@-ms-keyframes tinRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
    -moz-transform: scale(1, 1) translateX(900%);
    -ms-transform: scale(1, 1) translateX(900%);
    -o-transform: scale(1, 1) translateX(900%);
    transform: scale(1, 1) translateX(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    -moz-transform: scale(1.1, 1.1) translateX(0);
    -ms-transform: scale(1.1, 1.1) translateX(0);
    -o-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    -moz-transform: scale(1, 1) translateX(0);
    -ms-transform: scale(1, 1) translateX(0);
    -o-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@keyframes tinRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
    -moz-transform: scale(1, 1) translateX(900%);
    -ms-transform: scale(1, 1) translateX(900%);
    -o-transform: scale(1, 1) translateX(900%);
    transform: scale(1, 1) translateX(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    -moz-transform: scale(1.1, 1.1) translateX(0);
    -ms-transform: scale(1.1, 1.1) translateX(0);
    -o-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    -moz-transform: scale(1, 1) translateX(0);
    -ms-transform: scale(1, 1) translateX(0);
    -o-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@-moz-keyframes tinLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
    -moz-transform: scale(1, 1) translateX(-900%);
    -ms-transform: scale(1, 1) translateX(-900%);
    -o-transform: scale(1, 1) translateX(-900%);
    transform: scale(1, 1) translateX(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    -moz-transform: scale(1.1, 1.1) translateX(0);
    -ms-transform: scale(1.1, 1.1) translateX(0);
    -o-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    -moz-transform: scale(1, 1) translateX(0);
    -ms-transform: scale(1, 1) translateX(0);
    -o-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@-webkit-keyframes tinLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
    -moz-transform: scale(1, 1) translateX(-900%);
    -ms-transform: scale(1, 1) translateX(-900%);
    -o-transform: scale(1, 1) translateX(-900%);
    transform: scale(1, 1) translateX(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    -moz-transform: scale(1.1, 1.1) translateX(0);
    -ms-transform: scale(1.1, 1.1) translateX(0);
    -o-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    -moz-transform: scale(1, 1) translateX(0);
    -ms-transform: scale(1, 1) translateX(0);
    -o-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@-o-keyframes tinLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
    -moz-transform: scale(1, 1) translateX(-900%);
    -ms-transform: scale(1, 1) translateX(-900%);
    -o-transform: scale(1, 1) translateX(-900%);
    transform: scale(1, 1) translateX(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    -moz-transform: scale(1.1, 1.1) translateX(0);
    -ms-transform: scale(1.1, 1.1) translateX(0);
    -o-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    -moz-transform: scale(1, 1) translateX(0);
    -ms-transform: scale(1, 1) translateX(0);
    -o-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@-ms-keyframes tinLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
    -moz-transform: scale(1, 1) translateX(-900%);
    -ms-transform: scale(1, 1) translateX(-900%);
    -o-transform: scale(1, 1) translateX(-900%);
    transform: scale(1, 1) translateX(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    -moz-transform: scale(1.1, 1.1) translateX(0);
    -ms-transform: scale(1.1, 1.1) translateX(0);
    -o-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    -moz-transform: scale(1, 1) translateX(0);
    -ms-transform: scale(1, 1) translateX(0);
    -o-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@keyframes tinLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
    -moz-transform: scale(1, 1) translateX(-900%);
    -ms-transform: scale(1, 1) translateX(-900%);
    -o-transform: scale(1, 1) translateX(-900%);
    transform: scale(1, 1) translateX(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    -moz-transform: scale(1.1, 1.1) translateX(0);
    -ms-transform: scale(1.1, 1.1) translateX(0);
    -o-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    -moz-transform: scale(1, 1) translateX(0);
    -ms-transform: scale(1, 1) translateX(0);
    -o-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@-moz-keyframes tinUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
    -moz-transform: scale(1, 1) translateY(-900%);
    -ms-transform: scale(1, 1) translateY(-900%);
    -o-transform: scale(1, 1) translateY(-900%);
    transform: scale(1, 1) translateY(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    -moz-transform: scale(1.1, 1.1) translateY(0);
    -ms-transform: scale(1.1, 1.1) translateY(0);
    -o-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}
@-webkit-keyframes tinUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
    -moz-transform: scale(1, 1) translateY(-900%);
    -ms-transform: scale(1, 1) translateY(-900%);
    -o-transform: scale(1, 1) translateY(-900%);
    transform: scale(1, 1) translateY(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    -moz-transform: scale(1.1, 1.1) translateY(0);
    -ms-transform: scale(1.1, 1.1) translateY(0);
    -o-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}
@-o-keyframes tinUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
    -moz-transform: scale(1, 1) translateY(-900%);
    -ms-transform: scale(1, 1) translateY(-900%);
    -o-transform: scale(1, 1) translateY(-900%);
    transform: scale(1, 1) translateY(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    -moz-transform: scale(1.1, 1.1) translateY(0);
    -ms-transform: scale(1.1, 1.1) translateY(0);
    -o-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}
@-ms-keyframes tinUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
    -moz-transform: scale(1, 1) translateY(-900%);
    -ms-transform: scale(1, 1) translateY(-900%);
    -o-transform: scale(1, 1) translateY(-900%);
    transform: scale(1, 1) translateY(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    -moz-transform: scale(1.1, 1.1) translateY(0);
    -ms-transform: scale(1.1, 1.1) translateY(0);
    -o-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes tinUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
    -moz-transform: scale(1, 1) translateY(-900%);
    -ms-transform: scale(1, 1) translateY(-900%);
    -o-transform: scale(1, 1) translateY(-900%);
    transform: scale(1, 1) translateY(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    -moz-transform: scale(1.1, 1.1) translateY(0);
    -ms-transform: scale(1.1, 1.1) translateY(0);
    -o-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}
@-moz-keyframes tinDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
    -moz-transform: scale(1, 1) translateY(900%);
    -ms-transform: scale(1, 1) translateY(900%);
    -o-transform: scale(1, 1) translateY(900%);
    transform: scale(1, 1) translateY(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    -moz-transform: scale(1.1, 1.1) translateY(0);
    -ms-transform: scale(1.1, 1.1) translateY(0);
    -o-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}
@-webkit-keyframes tinDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
    -moz-transform: scale(1, 1) translateY(900%);
    -ms-transform: scale(1, 1) translateY(900%);
    -o-transform: scale(1, 1) translateY(900%);
    transform: scale(1, 1) translateY(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    -moz-transform: scale(1.1, 1.1) translateY(0);
    -ms-transform: scale(1.1, 1.1) translateY(0);
    -o-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}
@-o-keyframes tinDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
    -moz-transform: scale(1, 1) translateY(900%);
    -ms-transform: scale(1, 1) translateY(900%);
    -o-transform: scale(1, 1) translateY(900%);
    transform: scale(1, 1) translateY(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    -moz-transform: scale(1.1, 1.1) translateY(0);
    -ms-transform: scale(1.1, 1.1) translateY(0);
    -o-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}
@-ms-keyframes tinDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
    -moz-transform: scale(1, 1) translateY(900%);
    -ms-transform: scale(1, 1) translateY(900%);
    -o-transform: scale(1, 1) translateY(900%);
    transform: scale(1, 1) translateY(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    -moz-transform: scale(1.1, 1.1) translateY(0);
    -ms-transform: scale(1.1, 1.1) translateY(0);
    -o-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes tinDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
    -moz-transform: scale(1, 1) translateY(900%);
    -ms-transform: scale(1, 1) translateY(900%);
    -o-transform: scale(1, 1) translateY(900%);
    transform: scale(1, 1) translateY(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    -moz-transform: scale(1.1, 1.1) translateY(0);
    -ms-transform: scale(1.1, 1.1) translateY(0);
    -o-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}