.flipside-perspective {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.flipside {
    display: block;
    -webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.flipside.is-open .flipside-front {
    pointer-events: none;
}

.flipside .flipside-front {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
}

.flipside .flipside-back {
    -webkit-transform: translateZ(-2px) rotateX(180deg);
    transform: translateZ(-2px) rotateX(180deg);
    overflow: hidden;
}

.flipside .flipside-back button {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.flipside[data-direction="left"] .flipside-back,
.flipside[data-direction="right"] .flipside-back {
    -webkit-transform: translateZ(-2px) rotateY(180deg);
    transform: translateZ(-2px) rotateY(180deg);
}

.flipside[data-direction="top"].is-open {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.flipside[data-direction="right"].is-open {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flipside[data-direction="bottom"].is-open {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}

.flipside[data-direction="left"].is-open {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}