.op3-element[data-op3-element-type="popoverlay"] {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    overflow-y: auto;
    padding: 1em;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;

    &[data-op3-popoverlay-active] {
        display: block;
    }

    &.op3-focus::before {
        display: none;
    }

    .op3-popoverlay-background {
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        transition: all 0.2s ease;
        opacity: 0;

        @at-root .op3-element[data-op3-element-type="popoverlay"][data-op3-popoverlay-active] .op3-popoverlay-background {
            opacity: 1;
        }

        @at-root .op3-element[data-op3-element-type="popoverlay"].op3-popoverlay-show .op3-popoverlay-background {
            opacity: 1;
        }
    }

    .op3-popoverlay-wrapper {
        left: 50%;
        position: absolute;
        z-index: 2;
        transform: translateX(-50%);
        max-width: 96%;
        width: 880px;
        top: 50px;
        margin-top: 3em;
        margin-bottom: 3em;
    }

    .op3-popoverlay-content {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 2em;
        min-height: 1em;
        background: #fff;
        border-radius: 5px;
        transition: all 0.3s ease;

        &[data-op3-children]:empty {
            height: auto;
        }

        /* keeping for backward compatibility */

        .op3-element[data-op3-element-type="section"] {
            padding-top: 0;
            padding-bottom: 0;
        }

        .op3-popoverlay-row-upper {
            padding: 25px 20px;

            > [data-op3-background="base"]::before,
            > [data-op3-background="base"]::after {
                background-color: rgb(61, 61, 61);
            }

            .op3-popoverlay-headline {
                [data-op3-contenteditable] > * {
                    font-size: 33px;
                }

                color: #fff;
                margin-bottom: 0;
            }

            .op3-popoverlay-text {
                color: rgba(255, 255, 255, 0.71);
                text-align: center;
            }
        }

        .op3-popoverlay-row-lower {
            padding: 0 40px 50px 40px;

            > [data-op3-background="base"]::before,
            > [data-op3-background="base"]::after {
                background-color: #f9f9f9;
            }

            .op3-popoverlay-text-privacy {
                color: rgba(33, 37, 41, 0.64);

                [data-op3-contenteditable] > * {
                    font-size: 13px;
                    text-align: center;
                }
            }
        }

        /* end of backward compatibility */

        html[data-jquery-mmdnd-dragging] &.op3-element-drop-target {
            background: #d1e2fe !important;;
        }

        .op3-popoverlay-default-text-style[data-op3-element-type="text"] {
            max-width: 480px;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

        & > .op3-popoverlay-controls:first-child + [data-op3-element-type="section"],
        & > [data-op3-element-type="section"]:first-child {
            border-top-left-radius: inherit;
            border-top-right-radius: inherit;

            & > [data-op3-background],
            & > [data-op3-children],
            & > [data-op3-children] > [data-op3-element-type="row"]:first-child,
            & > [data-op3-children] > [data-op3-element-type="row"]:first-child,
            & > [data-op3-children] > [data-op3-element-type="row"]:first-child > [data-op3-background] {
                border-top-left-radius: inherit;
                border-top-right-radius: inherit;
            }
        }

        & > [data-op3-element-type="section"]:last-child {
            border-bottom-left-radius: inherit;
            border-bottom-right-radius: inherit;

            & > [data-op3-background],
            & > [data-op3-children],
            & > [data-op3-children] > [data-op3-element-type="row"]:last-child,
            & > [data-op3-children] > [data-op3-element-type="row"]:last-child,
            & > [data-op3-children] > [data-op3-element-type="row"]:last-child > [data-op3-background] {
                border-bottom-left-radius: inherit;
                border-bottom-right-radius: inherit;
            }
        }
    }

    .op3-popoverlay-close {
        padding: 10px;
        position: absolute;
        top: -25px;
        right: -25px;
        cursor: pointer;

        .op3-popoverlay-close-text {
            display: none;
        }

        .op3-popoverlay-close-icon {
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            // background-image: url("../img/icn-close-popoverlay.svg");
            background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48cGF0aCBkPSJNMjU2LDMzQzEzMi4zLDMzLDMyLDEzMy4zLDMyLDI1N2MwLDEyMy43LDEwMC4zLDIyNCwyMjQsMjI0YzEyMy43LDAsMjI0LTEwMC4zLDIyNC0yMjRDNDgwLDEzMy4zLDM3OS43LDMzLDI1NiwzM3ogICAgTTM2NC4zLDMzMi41YzEuNSwxLjUsMi4zLDMuNSwyLjMsNS42YzAsMi4xLTAuOCw0LjItMi4zLDUuNmwtMjEuNiwyMS43Yy0xLjYsMS42LTMuNiwyLjMtNS42LDIuM2MtMiwwLTQuMS0wLjgtNS42LTIuM0wyNTYsMjg5LjggICBsLTc1LjQsNzUuN2MtMS41LDEuNi0zLjYsMi4zLTUuNiwyLjNjLTIsMC00LjEtMC44LTUuNi0yLjNsLTIxLjYtMjEuN2MtMS41LTEuNS0yLjMtMy41LTIuMy01LjZjMC0yLjEsMC44LTQuMiwyLjMtNS42bDc1LjctNzYgICBsLTc1LjktNzVjLTMuMS0zLjEtMy4xLTguMiwwLTExLjNsMjEuNi0yMS43YzEuNS0xLjUsMy41LTIuMyw1LjYtMi4zYzIuMSwwLDQuMSwwLjgsNS42LDIuM2w3NS43LDc0LjdsNzUuNy03NC43ICAgYzEuNS0xLjUsMy41LTIuMyw1LjYtMi4zYzIuMSwwLDQuMSwwLjgsNS42LDIuM2wyMS42LDIxLjdjMy4xLDMuMSwzLjEsOC4yLDAsMTEuM2wtNzUuOSw3NUwzNjQuMywzMzIuNXoiLz48L2c+PC9zdmc+");
            background-size: 30px 30px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            pointer-events: none;
        }
    }

    // Admin-only, must be inside
    // of .op3-popoverlay-content
    .op3-popoverlay-controls {
        position: absolute;
        left: 50%;
        top: -60px;
        transform: translateX(-50%);
        display: flex;
        font-family: $op-font-family;
        white-space: nowrap;

        button {
            color: $op-light-grey;
            background: $op-white;
            border: none;
            font-size: 12px;
            text-transform: uppercase;
            margin: 0;
            display: block;
            padding: 10px 20px 9px;
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            outline: none;

            &::after {
                content: "";
                display: block;
                width: 1px;
                height: 80%;
                position: absolute;
                top: 10%;
                left: 100%;
                right: auto;
                background: $op-grey-border;
            }
            // border-right: 1px solid $op-grey-border;
            &:first-child {
                border-radius: 10px 0 0 10px;
            }

            &:last-child {
                border-radius: 0 10px 10px 0;
                &::after { display: none; }
            }

            .op3-icon {
                color: $op-blue;
                margin-right: 8px;
                font-size: 16px;
            }

            &:hover {
                color: $op-blue;
            }

            &.active {
                background: $op-blue;
                color: $op-white;
                cursor: default;
                .op3-icon { color: $op-white; }
            }
        }
    }
}

// Disable pointer events when popoverlay
// is active (to ensure element's aren't
// dropped into the page itself)
#op3-designer-element.op3-popoverlay-active {
    pointer-events: none;

    .op3-element.op3-popoverlay-show {
        pointer-events: all;
    }
}

@media (max-width: $breakpoint-tablet) {
    .op3-element[data-op3-element-type="section"] {
        padding-top: 15px;
        padding-bottom: 15px;

        &:first-child {
            padding-top: 0;
        }
    }
}

/**
 * Animations
 */
// Individual modal styles with animations/transitions
.op3-element[data-op3-element-type="popoverlay"] {
    /* ! Effect 0: No effect */
    &.op3-popoverlay-effect-0 .op3-popoverlay-content,
    &.op3-popoverlay-effect-0 .op3-popoverlay-background {
        transition: none;
    }

    /* ! Effect 1: Fade in and scale up */
    &.op3-popoverlay-effect-1 .op3-popoverlay-content {
        transform: scale(0.7);
        opacity: 0;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-1 .op3-popoverlay-content {
        transform: scale(1);
        opacity: 1;
    }

    /* ! Effect 2: Slide from the right */
    &.op3-popoverlay-effect-2 .op3-popoverlay-content {
        transform: translateX(20%);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-2 .op3-popoverlay-content {
        transform: translateX(0);
        opacity: 1;
    }

    /* ! Effect 3: Slide from the bottom */
    &.op3-popoverlay-effect-3 .op3-popoverlay-content {
        transform: translateY(20%);
        opacity: 0;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-3 .op3-popoverlay-content {
        transform: translateY(0);
        opacity: 1;
    }

    /* ! Effect 4: Newspaper */
    &.op3-popoverlay-effect-4 .op3-popoverlay-content {
        transform: scale(0) rotate(540deg);
        opacity: 0;
    }

    &.op3-popoverlay-effect-4 .op3-popoverlay-content {
        transition: all 0.5s;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-4 .op3-popoverlay-content {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    /* ! Effect 5: fly in from front */
    &.op3-popoverlay-effect-5 .op3-popoverlay-wrapper {
        perspective: 1300px;
    }

    &.op3-popoverlay-effect-5 .op3-popoverlay-content {
        transform-style: preserve-3d;
        transform: translateZ(600px) rotateX(20deg);
        opacity: 0;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-5 .op3-popoverlay-content {
        transition: all 0.3s ease-in;
        transform: translateZ(0) rotateX(0deg);
        opacity: 1;
    }

    /* ! Effect 6: fly in from right */
    // &.op3-popoverlay-effect-6 .op3-popoverlay-wrapper {
    //     perspective: 1300px;
    // }

    &.op3-popoverlay-effect-6 .op3-popoverlay-content {
        // transform-style: preserve-3d;
        transform: translate(30%) translateZ(600px) rotate(10deg);
        opacity: 0;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-6 .op3-popoverlay-content {
        // transition: all 0.3s ease-in, font 1ms;
        transform: translate(0%) translateZ(0) rotate(0deg);
        opacity: 1;
    }

    /* ! Effect 7:  slide and stick to top */
    &.op3-popoverlay-effect-7 {
        top: 0;
    }

    &.op3-popoverlay-effect-7 .op3-popoverlay-content {
        transform: translateY(-200%);
        opacity: 0;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-7 .op3-popoverlay-content {
        transform: translateY(0%);
        opacity: 1;
    }

    /* ! Effect 8: 3D flip horizontal */
    &.op3-popoverlay-effect-8 .op3-popoverlay-wrapper {
        perspective: 1300px;
    }

    &.op3-popoverlay-effect-8 .op3-popoverlay-content {
        transform-style: preserve-3d;
        transform: rotateY(-70deg);
        opacity: 0;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-8 .op3-popoverlay-content {
        transform: rotateY(0deg);
        opacity: 1;
    }

    /* ! Effect 9: 3D flip vertical */
    &.op3-popoverlay-effect-9 .op3-popoverlay-wrapper {
        perspective: 1300px;
    }

    &.op3-popoverlay-effect-9 .op3-popoverlay-content {
        transform-style: preserve-3d;
        transform: rotateX(-70deg);
        opacity: 0;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-9 .op3-popoverlay-content {
        transform: rotateX(0deg);
        opacity: 1;
    }

    /* ! Effect 10: 3D sign same as 3D flip vertical */
    // &.op3-popoverlay-effect-10 .op3-popoverlay-wrapper {
    //     perspective: 1300px;
    // }

    // &.op3-popoverlay-effect-10 .op3-popoverlay-content {
    //     transform-style: preserve-3d;
    //     transform: rotateX(-60deg);
    //     transform-origin: 50% 0;
    //     opacity: 0;
    // }

    // &.op3-popoverlay-show.op3-popoverlay-effect-10 .op3-popoverlay-content {
    //     transform: rotateX(0deg);
    //     opacity: 1;
    // }

    /* ! Effect 11: Super scaled */
    &.op3-popoverlay-effect-11 .op3-popoverlay-content {
        transform: scale(2);
        opacity: 0;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-11 .op3-popoverlay-content {
        transform: scale(1);
        opacity: 1;
    }

    /* Effect 12: Fade */
    &.op3-popoverlay-effect-12 .op3-popoverlay-content {
        transform: scale(1);
        opacity: 0;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-12 .op3-popoverlay-content {
        transform: scale(1);
        opacity: 1;
    }

    /* ! Effect 13: 3D slit */
    &.op3-popoverlay-effect-13 .op3-popoverlay-wrapper {
        perspective: 1300px;
    }

    &.op3-popoverlay-effect-13 .op3-popoverlay-content {
        transform-style: preserve-3d;
        transform: translateZ(-3000px) rotateY(90deg);
        opacity: 0;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-13 .op3-popoverlay-content {
        animation: slit 0.7s forwards ease-out;
    }

    &.op3-popoverlay-hide.op3-popoverlay-effect-13 .op3-popoverlay-content {
        animation: slit-end 0.4s forwards ease-out;
    }

    @keyframes slit {
        50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in; }
        100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
    }

    @keyframes slit-end {
        0% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
        100% { transform: translateZ(250px) rotateY(-89deg); opacity: 0; animation-timing-function: ease-in; }
    }

    /* ! Effect 14:  3D Rotate from bottom */
    &.op3-popoverlay-effect-14 .op3-popoverlay-wrapper {
        perspective: 1300px;
    }

    &.op3-popoverlay-effect-14 .op3-popoverlay-content {
        transform-style: preserve-3d;
        transform: translateY(100%) rotateX(90deg);
        transform-origin: 0 100%;
        opacity: 0;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-14 .op3-popoverlay-content {
        transform: translateY(0%) rotateX(0deg);
        opacity: 1;
    }

    /* ! Effect 15:  3D Rotate in from left */
    &.op3-popoverlay-effect-15 .op3-popoverlay-wrapper {
        perspective: 1300px;
    }

    &.op3-popoverlay-effect-15 .op3-popoverlay-content {
        transform-style: preserve-3d;
        transform: translateZ(100px) translateX(-30%) rotateY(90deg);
        transform-origin: 0 100%;
        opacity: 0;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-15 .op3-popoverlay-content {
        transform: translateZ(0) translateX(0%) rotateY(0deg);
        opacity: 1;
    }

    /* ! Effect 16:  Blur */
    &.op3-popoverlay-effect-16 .op3-popoverlay-content {
        transform: translateY(-5%);
        opacity: 0;
        filter: blur(3px);
        transition: all 0.3s ease;
    }

    &.op3-popoverlay-effect-16 .op3-popoverlay-background {
        filter: blur(3px);
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-16 .op3-popoverlay-content,
    &.op3-popoverlay-show.op3-popoverlay-effect-16 .op3-popoverlay-background {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }

    /* ! Effect 17:  Slide in from bottom with perspective on container */
    &.op3-popoverlay-show.op3-popoverlay-effect-17 .op3-popoverlay-wrapper {
        // height: 100%;
        // transition: transform 0.3s;
        perspective: 1300px;
    }

    &.op3-popoverlay-effect-17 .op3-popoverlay-content {
        transform: rotateY(-2deg);
        transform-origin: 50% 0%;
        transform-style: preserve-3d;
    }

    &.op3-popoverlay-effect-17 .op3-popoverlay-content {
        opacity: 0;
        transform: translateY(200%);
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-17 .op3-popoverlay-content {
        transform: translateY(0);
        opacity: 1;
    }

    /* ! Effect 18:  Slide from right with perspective on container */
    &.op3-popoverlay-effect-18 .op3-popoverlay-wrapper {
        perspective: 1300px;
    }

    @keyframes rotateRightSideFirst {
        0% { transform: translateZ(200px) rotateY(25deg); animation-timing-function: ease-out; }
        100% { transform: translateZ(0); }
    }

    @keyframes rotateRightSideFirst-end {
        0% { transform: translateZ(0); }
        100% { transform: translateZ(200px) rotateY(25deg); animation-timing-function: ease-out; }
    }

    &.op3-popoverlay-effect-18 .op3-popoverlay-content {
        transform: translateX(200%);
        opacity: 0;
        transform-style: preserve-3d;
        transform-origin: 0% 50%;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-18 .op3-popoverlay-content {
        transform: translateX(0);
        opacity: 1;
        transition: all 0.3s;
        animation: rotateRightSideFirst 0.3s forwards ease-in;
    }

    &.op3-popoverlay-hide.op3-popoverlay-effect-18 .op3-popoverlay-content {
        animation: rotateRightSideFirst-end 0.3s forwards ease-in;
    }

    /* ! Effect 19: Slip in from the top with perspective on container */
    &.op3-popoverlay-effect-19 .op3-popoverlay-wrapper {
        perspective: 1300px;
    }

    @keyframes rotateTopSideFirst {
        0% { transform: translateZ(200px) rotateX(35deg); animation-timing-function: ease-out; }
        100% { transform: translateZ(0); }
    }

    @keyframes rotateTopSideFirst-end {
        0% { transform: translateZ(0); }
        100% { transform: translateZ(200px) rotateX(35deg); animation-timing-function: ease-out; }
    }

    &.op3-popoverlay-effect-19 .op3-popoverlay-content {
        transform: translateX(200%);
        opacity: 0;
        transform-style: preserve-3d;
        transform-origin: top center;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-19 .op3-popoverlay-content {
        transform: translateX(0);
        opacity: 1;
        transition: all 0.3s;
        animation: rotateTopSideFirst 0.3s forwards ease-in;
    }

    &.op3-popoverlay-hide.op3-popoverlay-effect-19 .op3-popoverlay-content {
        animation: rotateTopSideFirst-end 0.3s forwards ease-in;
    }

    /* ! Effect 20 - Wobble / Rubber */
    &.op3-popoverlay-effect-20 .op3-popoverlay-wrapper {
        perspective: 1300px;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-20 .op3-popoverlay-content {
        opacity: 1;
        transform-style: preserve-3d;
        transform-origin: 50% 50%;
        animation: rubberBand 0.7s forwards;
    }

    &.op3-popoverlay-hide.op3-popoverlay-effect-20 .op3-popoverlay-content {
        opacity: 0;
        transform-style: preserve-3d;
        transform-origin: 50% 50%;
        animation: rubberBand-end 0.3s forwards;
    }

    @keyframes rubberBand {
        0% { transform: scale3d(1, 1, 1); }
        30% { transform: scale3d(1.15, 0.85, 1); }
        40% { transform: scale3d(0.85, 1.15, 1); }
        50% { transform: scale3d(1.05, 0.95, 1); }
        65% { transform: scale3d(0.95, 1.05, 1); }
        75% { transform: scale3d(1.05, 0.95, 1); }
        100% { transform: scale3d(1, 1, 1); }
    }

    @keyframes rubberBand-end {
        0% { transform: scale3d(1, 1, 1); }
        30% { transform: scale3d(1.05, 0.95, 1); }
        40% { transform: scale3d(0.95, 1.05, 1); }
        50% { transform: scale3d(1.05, 0.95, 1); }
        100% { transform: scale3d(1, 1, 1); }
    }

    /* ! Effect 21 - Swing / Shake */
    &.op3-popoverlay-effect-21 .op3-popoverlay-wrapper {
        perspective: 1300px;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-21 .op3-popoverlay-content {
        opacity: 1;
        transform-style: preserve-3d;
        transform-origin: 50% 50%;
        animation: swing 0.7s forwards;
    }

    &.op3-popoverlay-hide.op3-popoverlay-effect-21 .op3-popoverlay-content {
        opacity: 0;
        transform-style: preserve-3d;
        transform-origin: 50% 50%;
        animation: swing-end 0.3s forwards;
    }

    @keyframes swing {
        20% { transform: rotate3d(0, 0, 1, 15deg); }
        40% { transform: rotate3d(0, 0, 1, -10deg); }
        60% { transform: rotate3d(0, 0, 1, 5deg); }
        80% { transform: rotate3d(0, 0, 1, -5deg); }
        100% { transform: rotate3d(0, 0, 1, 0deg); }
    }

    @keyframes swing-end {
        0% { transform: rotate3d(0, 0, 1, 0deg); }
        20% { transform: rotate3d(0, 0, 1, -5deg); }
        40% { transform: rotate3d(0, 0, 1, 5deg); }
        60% { transform: rotate3d(0, 0, 1, -10deg); }
        80% { transform: rotate3d(0, 0, 1, 15deg); }
    }

    /* ! Effect 22 - Bounce */
    &.op3-popoverlay-effect-22 .op3-popoverlay-wrapper {
        perspective: 1300px;
    }

    &.op3-popoverlay-effect-22 .op3-popoverlay-content {
        opacity: 0;
        transform-style: preserve-3d;
        transform-origin: 50% 50%;
    }

    &.op3-popoverlay-show.op3-popoverlay-effect-22 .op3-popoverlay-content {
        animation: bounce 0.7s forwards;
        opacity: 1;
    }

    &.op3-popoverlay-hide.op3-popoverlay-effect-22 .op3-popoverlay-content {
        animation: bounce-end 0.3s forwards;
        opacity: 0;
    }

    @keyframes bounce {
        0%,
        100%,
        20%,
        53%,
        80% {
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transform: translate3d(0, 0, 0);
        }

        40%,
        43% {
            transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            transform: translate3d(0, -30px, 0);
        }

        70% {
            transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            transform: translate3d(0, -15px, 0);
        }

        90% {
            transform: translate3d(0, -4px, 0);
        }

        100% {
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes bounce-end {
        0% {
            transform: translate3d(0, 0, 0);
        }

        20%,
        53%,
        80% {
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transform: translate3d(0, 0, 0);
        }

        40%,
        43% {
            transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            transform: translate3d(0, -30px, 0);
        }

        70% {
            transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            transform: translate3d(0, -15px, 0);
        }
    }
}