.max-elements-flip-box {
    -webkit-perspective: 1000px;
    perspective: 1000px;
    background-color: transparent;
}

.max-elements-flip-box-front-overlay,
.max-elements-flip-box-back-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.max-elements-flip-box-front-content,
.max-elements-flip-box-back-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.max-elements-flip-box {
    &:hover {
        .left-to-right {
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);

            .max-elements-flip-box-front {
                opacity: 0;
            }
        }

        .right-to-left {
            -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);

            .max-elements-flip-box-front {
                opacity: 0;
            }
        }

        .top-to-bottom {
            -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);

            .max-elements-flip-box-front {
                opacity: 0;
            }
        }

        .bottom-to-top {
            -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);

            .max-elements-flip-box-front {
                opacity: 0;
            }
        }

        .top-to-bottom-angle {
            -webkit-transform: rotate3d(1, 1, 0, -180deg);
            transform: rotate3d(1, 1, 0, -180deg);

            .max-elements-flip-box-front {
                opacity: 0;
            }
        }

        .bottom-to-top-angle {
            -webkit-transform: rotate3d(1, 1, 0, 180deg);
            transform: rotate3d(1, 1, 0, 180deg);

            .max-elements-flip-box-front {
                opacity: 0;
            }
        }

        .max-elements-flip-box-inner.fade-in-out {
            .max-elements-flip-box-front {
                opacity: 0;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                z-index: 2;
            }

            .max-elements-flip-box-back {
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1);
                z-index: 3;
            }
        }
    }

    .max-elements-flip-box-inner {
        position: relative;
        transition: -webkit-transform 1s cubic-bezier(0.17, 0.67, 0.47, 1.18);
        transition: transform 1s cubic-bezier(0.17, 0.67, 0.47, 1.18);
        transition: transform 1s, -webkit-transform 1s cubic-bezier(0.17, 0.67, 0.47, 1.18);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        width: 100%;
        height: 100%;

        .max-elements-flip-box-front {
            transition: all 0.5s cubic-bezier(0.17, 0.67, 0.47, 1.18);

            .max-elements-flip-box-front-title {
                font-size: 30px;
            }
        }

        .max-elements-flip-box-back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
    }

    .max-elements-flip-box-front .max-elements-flip-box-front-image i {
        font-size: 50px;
    }

    .max-elements-flip-box-inner {
        .max-elements-flip-box-back {
            .max-elements-flip-box-back-action {
                text-decoration: none;
                transition: all .4s ease;
                display: inline-block;
                font-weight: 400;
            }

            a.max-elements-flip-box-back-action:hover {
                cursor: pointer;
            }
        }

        &.left-to-right .max-elements-flip-box-back,
        &.right-to-left .max-elements-flip-box-back {
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
        }

        &.top-to-bottom .max-elements-flip-box-back {
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }

        &.bottom-to-top .max-elements-flip-box-back {
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
        }

        &.top-to-bottom-angle {
            .max-elements-flip-box-front {
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }

            .max-elements-flip-box-back {
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                -webkit-transform: rotate3d(1, 1, 0, 180deg);
                transform: rotate3d(1, 1, 0, 180deg);
            }
        }

        &.bottom-to-top-angle {
            .max-elements-flip-box-front {
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }

            .max-elements-flip-box-back {
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                -webkit-transform: rotate3d(1, 1, 0, -180deg);
                transform: rotate3d(1, 1, 0, -180deg);
            }
        }

        &.fade-in-out {
            .max-elements-flip-box-front {
                transition: all 0.8s cubic-bezier(0.17, 0.67, 0.47, 1.18);
                -webkit-transform: scale(1);
                transform: scale(1);
            }

            .max-elements-flip-box-back {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                transition: all 0.8s cubic-bezier(0.17, 0.67, 0.47, 1.18);
            }
        }

        &.three-d-flip {
            .max-elements-flip-box-front {
                -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32);
                transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32);
                transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32);
                transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32), -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32);
                -webkit-transform: rotateY(0);
                transform: rotateY(0);
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                min-height: 280px;
                background: #ffffff;

                .max-elements-flip-box-front-content {
                    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
                    transform: translateY(-50%) translateZ(60px) scale(0.94);
                    top: 50%;
                    position: absolute;
                    left: 0;
                    width: 100%;
                    -webkit-perspective: inherit;
                    perspective: inherit;
                }
            }

            .max-elements-flip-box-back {
                position: absolute;
                top: 0;
                left: 0;
                -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32);
                transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32);
                transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32);
                transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32), -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32);
                -webkit-transform: rotateY(180deg);
                transform: rotateY(180deg);
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                min-height: 280px;
                height: auto;
                width: 100%;
                background: #ffffff;

                .max-elements-flip-box-back-content {
                    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
                    transform: translateY(-50%) translateZ(60px) scale(0.94);
                    top: 50%;
                    position: absolute;
                    left: 0;
                    width: 100%;
                    -webkit-perspective: inherit;
                    perspective: inherit;
                }
            }

            &:hover {

                .max-elements-flip-box-front,
                .max-elements-flip-box-back {
                    -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32);
                    transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32);
                    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32);
                    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32), -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.3, 1.32);
                }

                .max-elements-flip-box-front {
                    -webkit-transform: rotateY(-180deg);
                    transform: rotateY(-180deg);
                    -webkit-transform-style: preserve-3d;
                    transform-style: preserve-3d;
                }

                .max-elements-flip-box-back {
                    -webkit-transform: rotateY(0);
                    transform: rotateY(0);
                    -webkit-transform-style: preserve-3d;
                    transform-style: preserve-3d;
                }
            }
        }

        &.fade {
            .max-elements-flip-box-back {
                opacity: 0;
                transition: all 0.5s ease;
            }

            &:hover {
                .max-elements-flip-box-front {
                    opacity: 0;
                }

                .max-elements-flip-box-back {
                    opacity: 1;
                }
            }
        }
    }
}

.max-elements-flip-box .max-elements-flip-box-inner {

    .max-elements-flip-box-front .max-elements-flip-box-front-image,
    .max-elements-flip-box-back .max-elements-flip-box-back-image {
        position: relative;
        display: inline-block;
    }

    .max-elements-flip-box-front .max-elements-flip-box-front-image {

        i,
        svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .max-elements-flip-box-back .max-elements-flip-box-back-image {

        i,
        svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .max-elements-flip-box-front .max-elements-flip-box-front-image img,
    .max-elements-flip-box-back .max-elements-flip-box-back-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        -o-object-fit: cover;
    }
}