/**
 * === z-index ===
 *
 * pogoSlider-progressBar =    6
 * pogoSlider-dir-btn     =   10
 * pogoSlider-nav         =   10
 * pogoSlider-loading     =   11
 * 
 */

/* ============================= */
/* 1. Hide left/right arrows */
/* ============================= */
.pogoSlider-dir-btn {
    display: none !important;
}

/* ============================= */
/* 2. Slide images center on mobile */
/* ============================= */
.pogoSlider-slide {
    background-position: center center !important;
    background-size: cover !important;
}

/* Optional: further mobile adjustments */
@media (max-width: 768px) {
    .pogoSlider-slide {
        background-position: center center !important;
        background-size: cover !important;
    }
}

/* ============================= */
/* 3. Style slide buttons */
/* ============================= */
.pogoSlider-slide-element a {
    border: 1px solid #ffffff !important;
    border-radius: 5px !important;
    padding: 8px 16px !important;
    color: #ffffff !important;
    background-color: transparent !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.pogoSlider-slide-element a:hover {
    background-color: rgba(255,255,255,0.2) !important;
    border-color: #fff !important;
}

/* ============================= */
/* 4. Show bottom navigation dots */
/* ============================= */
.pogoSlider-nav {
    display: flex !important;
    justify-content: center !important;
    position: absolute !important;
    bottom: 10px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 15 !important;
    pointer-events: auto !important;
}

.pogoSlider-nav li {
    display: inline-block !important;
    margin: 0 6px !important;
}

.pogoSlider-nav-btn {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.6) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,1) !important;
}

.pogoSlider-nav-btn--selected {
    background: #272727 !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,1) !important;
}

/**
 * Element Animations
 */


/* Slide Down */

.pogoSlider-animation-slideDownIn {
    -webkit-animation-name: slideDownIn;
    animation-name: slideDownIn;
}

@-webkit-keyframes slideDownIn {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDownIn {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.pogoSlider-animation-slideDownOut {
    -webkit-animation-name: slideDownOut;
    animation-name: slideDownOut;
}

@-webkit-keyframes slideDownOut {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
}

@keyframes slideDownOut {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
}


/* Slide Up */

.pogoSlider-animation-slideUpIn {
    -webkit-animation-name: slideUpIn;
    animation-name: slideUpIn;
}

@-webkit-keyframes slideUpIn {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUpIn {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.pogoSlider-animation-slideUpOut {
    -webkit-animation-name: slideUpOut;
    animation-name: slideUpOut;
}

@-webkit-keyframes slideUpOut {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
}

@keyframes slideUpOut {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
}


/* Slide Right */

.pogoSlider-animation-slideRightIn {
    -webkit-animation-name: slideRightIn;
    animation-name: slideRightIn;
}

.pogoSlider-animation-slideRightOut {
    -webkit-animation-name: slideRightOut;
    animation-name: slideRightOut;
}

@-webkit-keyframes slideRightIn {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideRightIn {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes slideRightOut {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
}

@keyframes slideRightOut {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
}


/* Slide Left */

.pogoSlider-animation-slideLeftIn {
    -webkit-animation-name: slideLeftIn;
    animation-name: slideLeftIn;
}

.pogoSlider-animation-slideLeftOut {
    -webkit-animation-name: slideLeftOut;
    animation-name: slideLeftOut;
}

@-webkit-keyframes slideLeftIn {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideLeftIn {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes slideLeftOut {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }
}

@keyframes slideLeftOut {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }
}


/* Expand */

.pogoSlider-animation-expandIn {
    -webkit-animation-name: expandIn;
    animation-name: expandIn;
}

.pogoSlider-animation-expandOut {
    -webkit-animation-name: expandOut;
    animation-name: expandOut;
}

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

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

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

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


/* Contract */

.pogoSlider-animation-contractIn {
    -webkit-animation-name: contractIn;
    animation-name: contractIn;
}

.pogoSlider-animation-contractOut {
    -webkit-animation-name: contractOut;
    animation-name: contractOut;
}

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

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

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

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


/* Spin In */

.pogoSlider-animation-spinIn {
    -webkit-animation-name: spinIn;
    animation-name: spinIn;
}

.pogoSlider-animation-spinOut {
    -webkit-animation-name: spinOut;
    animation-name: spinOut;
}

@-webkit-keyframes spinIn {
    0% {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: scale(0) rotate(720deg);
        transform: scale(0) rotate(720deg);
    }
    100% {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

@keyframes spinIn {
    0% {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: scale(0) rotate(720deg);
        transform: scale(0) rotate(720deg);
    }
    100% {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

@-webkit-keyframes spinOut {
    0% {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
    100% {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: scale(0) rotate(720deg);
        transform: scale(0) rotate(720deg);
    }
}

@keyframes spinOut {
    0% {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
    100% {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: scale(0) rotate(720deg);
        transform: scale(0) rotate(720deg);
    }
}


/* Side Fall */

.pogoSlider-animation-sideFallIn {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation-name: sideFallIn;
    animation-name: sideFallIn;
}

.pogoSlider-animation-sideFallOut {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation-name: sideFallOut;
    animation-name: sideFallOut;
}

@-webkit-keyframes sideFallIn {
    0% {
        -webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
        transform: translate(30%) translateZ(600px) rotate(10deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0) translateZ(0) rotate(0);
        transform: translate(0) translateZ(0) rotate(0);
        opacity: 1;
    }
}

@keyframes sideFallIn {
    0% {
        -webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
        transform: translate(30%) translateZ(600px) rotate(10deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0) translateZ(0) rotate(0);
        transform: translate(0) translateZ(0) rotate(0);
        opacity: 1;
    }
}

@-webkit-keyframes sideFallOut {
    0% {
        -webkit-transform: translate(0) translateZ(0) rotate(0);
        transform: translate(0) translateZ(0) rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
        transform: translate(30%) translateZ(600px) rotate(10deg);
        opacity: 0;
    }
}

@keyframes sideFallOut {
    0% {
        -webkit-transform: translate(0) translateZ(0) rotate(0);
        transform: translate(0) translateZ(0) rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
        transform: translate(30%) translateZ(600px) rotate(10deg);
        opacity: 0;
    }
}


/* 3D Horizontal Flip */

.pogoSlider-animation-horizontal3DFlipIn {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation-name: horizontal3DFlipIn;
    animation-name: horizontal3DFlipIn;
}

.pogoSlider-animation-horizontal3DFlipOut {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation-name: horizontal3DFlipOut;
    animation-name: horizontal3DFlipOut;
}

@-webkit-keyframes horizontal3DFlipIn {
    0% {
        -webkit-transform: rotateY(-70deg);
        transform: rotateY(-70deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 1;
    }
}

@keyframes horizontal3DFlipIn {
    0% {
        -webkit-transform: rotateY(-70deg);
        transform: rotateY(-70deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 1;
    }
}

@-webkit-keyframes horizontal3DFlipOut {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateY(-70deg);
        transform: rotateY(-70deg);
        opacity: 0;
    }
}

@keyframes horizontal3DFlipOut {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateY(-70deg);
        transform: rotateY(-70deg);
        opacity: 0;
    }
}


/* 3D Vertical Flip */

.pogoSlider-animation-vertical3DFlipIn {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation-name: vertical3DFlipIn;
    animation-name: vertical3DFlipIn;
}

.pogoSlider-animation-vertical3DFlipOut {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation-name: vertical3DFlipOut;
    animation-name: vertical3DFlipOut;
}

@-webkit-keyframes vertical3DFlipIn {
    0% {
        -webkit-transform: rotateX(-70deg);
        transform: rotateX(-70deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
}

@keyframes vertical3DFlipIn {
    0% {
        -webkit-transform: rotateX(-70deg);
        transform: rotateX(-70deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes vertical3DFlipOut {
    0% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(-70deg);
        transform: rotateX(-70deg);
        opacity: 0;
    }
}

@keyframes vertical3DFlipOut {
    0% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(-70deg);
        transform: rotateX(-70deg);
        opacity: 0;
    }
}


/* 3d Pivot */

.pogoSlider-animation-3DPivotIn {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation-name: pivotIn;
    animation-name: pivotIn;
}

.pogoSlider-animation-3DPivotOut {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation-name: pivotOut;
    animation-name: pivotOut;
}

@-webkit-keyframes pivotIn {
    0% {
        -webkit-transform: rotateX(-60deg);
        transform: rotateX(-60deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }
}

@keyframes pivotIn {
    0% {
        -webkit-transform: rotateX(-60deg);
        transform: rotateX(-60deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }
}

@-webkit-keyframes pivotOut {
    0% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(-60deg);
        transform: rotateX(-60deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        opacity: 0;
    }
}

@keyframes pivotOut {
    0% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(-60deg);
        transform: rotateX(-60deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        opacity: 0;
    }
}


/* Roll Left */

.pogoSlider-animation-rollLeftIn {
    -webkit-animation-name: rollLeftIn;
    animation-name: rollLeftIn;
}

.pogoSlider-animation-rollLeftOut {
    -webkit-animation-name: rollLeftOut;
    animation-name: rollLeftOut;
}

@-webkit-keyframes rollLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
}

@keyframes rollLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
}

@-webkit-keyframes rollLeftOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg);
    }
}

@keyframes rollLeftOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg);
    }
}


/* Roll Right */

.pogoSlider-animation-rollRightIn {
    -webkit-animation-name: rollRightIn;
    animation-name: rollRightIn;
}

.pogoSlider-animation-rollRightOut {
    -webkit-animation-name: rollRightOut;
    animation-name: rollRightOut;
}

@-webkit-keyframes rollRightIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
}

@keyframes rollRightIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
}

@-webkit-keyframes rollRightOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg);
    }
}

@keyframes rollRightOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg);
    }
}


/* Glide Left */

.pogoSlider-animation-glideLeftIn {
    -webkit-animation-name: glideLeftIn;
    animation-name: glideLeftIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

.pogoSlider-animation-glideLeftOut {
    -webkit-animation-name: glideLeftOut;
    animation-name: glideLeftOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes glideLeftIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@keyframes glideLeftIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@-webkit-keyframes glideLeftOut {
    0% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-100%) skewX(30deg);
        transform: translateX(-100%) skewX(30deg);
        opacity: 0;
    }
}

@keyframes glideLeftOut {
    0% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-100%) skewX(30deg);
        transform: translateX(-100%) skewX(30deg);
        opacity: 0;
    }
}


/* Glide Right */

.pogoSlider-animation-glideRightIn {
    -webkit-animation-name: glideRightIn;
    animation-name: glideRightIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

.pogoSlider-animation-glideRightOut {
    -webkit-animation-name: glideRightOut;
    animation-name: glideRightOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes glideRightIn {
    0% {
        -webkit-transform: translateX(-100%) skewX(30deg);
        transform: translateX(-100%) skewX(30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: translateX(20%) skewX(-30deg);
        transform: translateX(20%) skewX(-30deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: translateX(0%) skewX(15deg);
        transform: translateX(0%) skewX(15deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@keyframes glideRightIn {
    0% {
        -webkit-transform: translateX(-100%) skewX(30deg);
        transform: translateX(-100%) skewX(30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: translateX(20%) skewX(-30deg);
        transform: translateX(20%) skewX(-30deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: translateX(0%) skewX(15deg);
        transform: translateX(0%) skewX(15deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@-webkit-keyframes glideRightOut {
    0% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
}

@keyframes glideRightOut {
    0% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
}


/* FlipX */

.pogoSlider-animation-flipXIn {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipXIn;
    animation-name: flipXIn;
}

.pogoSlider-animation-flipXOut {
    -webkit-animation-name: flipXOut;
    animation-name: flipXOut;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

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

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

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

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


/* FlipY */

.pogoSlider-animation-flipYIn {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipYIn;
    animation-name: flipYIn;
}

.pogoSlider-animation-flipYOut {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipYOut;
    animation-name: flipYOut;
}

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

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

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

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


/**
 * Slide Animations
 */


/* Fold Left */

.pogoSlider-animation-foldInLeft {
    -webkit-animation-name: foldInLeft;
    animation-name: foldInLeft;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 0% 0% 0;
    transform-origin: 0% 0% 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

@-webkit-keyframes foldInLeft {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }
}

@keyframes foldInLeft {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }
}

.pogoSlider-animation-foldOutLeft {
    -webkit-animation-name: foldOutLeft;
    animation-name: foldOutLeft;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100% 0;
    transform-origin: 100% 100% 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

@-webkit-keyframes foldOutLeft {
    0% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes foldOutLeft {
    0% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}


/* Fold Right */

.pogoSlider-animation-foldInRight {
    -webkit-animation-name: foldInRight;
    animation-name: foldInRight;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100% 0;
    transform-origin: 100% 100% 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

@-webkit-keyframes foldInRight {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}

@keyframes foldInRight {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}

.pogoSlider-animation-foldOutRight {
    -webkit-animation-name: foldOutRight;
    animation-name: foldOutRight;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 0% 0% 0;
    transform-origin: 0% 0% 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

@-webkit-keyframes foldOutRight {
    0% {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes foldOutRight {
    0% {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}


/* Expand Reveal */

.pogoSlider-animation-expandReveal {
    -webkit-animation-name: expandReveal;
    animation-name: expandReveal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

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

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


/* Shrink Reveal */

.pogoSlider-animation-shrinkReveal {
    -webkit-animation-name: shrinkReveal;
    animation-name: shrinkReveal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

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

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


/* Blocks Reveal */

.pogoSlider-animation-blocksReveal {
    -webkit-animation-name: blocksReveal;
    animation-name: blocksReveal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

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

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


/* Down */

.pogoSlider-animation-downIn {
    -webkit-animation-name: downIn;
    animation-name: downIn;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes downIn {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes downIn {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.pogoSlider-animation-downOut {
    -webkit-animation-name: downOut;
    animation-name: downOut;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes downOut {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

@keyframes downOut {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}


/* Up */

.pogoSlider-animation-upIn {
    -webkit-animation-name: upIn;
    animation-name: upIn;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes upIn {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes upIn {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.pogoSlider-animation-upOut {
    -webkit-animation-name: upOut;
    animation-name: upOut;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes upOut {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

@keyframes upOut {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}


/* Right */

.pogoSlider-animation-rightIn {
    -webkit-animation-name: rightIn;
    animation-name: rightIn;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes rightIn {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes rightIn {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.pogoSlider-animation-rightOut {
    -webkit-animation-name: rightOut;
    animation-name: rightOut;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes rightOut {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@keyframes rightOut {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}


/* Left */

.pogoSlider-animation-leftIn {
    -webkit-animation-name: leftIn;
    animation-name: leftIn;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes leftIn {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes leftIn {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.pogoSlider-animation-leftOut {
    -webkit-animation-name: leftOut;
    animation-name: leftOut;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes leftOut {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@keyframes leftOut {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}