.gift-notify {
    position: absolute;
    text-align: center;
    background: #fff;
    box-shadow: 2px 4px rgba(0, 0, 0, .24);
    top: 90px;
    left: -50px;
    border-radius: 25px 25px 0 25px;
    color: #444444;
    padding: 10px;
    visibility: hidden;
    opacity: 0;
    width: 100%;
    z-index: 47;
    transition: all .2s ease-in-out;
}

.fourth-notification {
    bottom: -150px;
}

.gift-notification-wrapper {
    position: relative;
    left: -215px;
    bottom: 0;
}

.active-gift-notification {
    opacity: 1;
    visibility: visible;
}

.string {
    width: .1rem;
    /* border-right: .1rem solid #777; */
    height: 0vmin;
    -webkit-transform: translate3d(10vmin, 0, 0);
    transform: translate3d(10vmin, 0, 0);
}

.container {
    position: absolute;
    left: -40%;
    bottom: 70px;
    width: 12vmin;
    cursor: pointer;
    z-index: 45;
    -webkit-perspective: 2000px;
    perspective: 2000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    transition: -webkit-transform 1s ease-out;
    transition: transform 1s ease-out;
    transition: transform 1s ease-out, -webkit-transform 1s ease-out;
    -webkit-transform: scale(.4) rotateX(-11deg) rotateY(24deg) translate3d(-50%, 0, 0);
    transform: scale(.4) rotateX(-11deg) rotateY(24deg) translate3d(-50%, 0, 0);
    backface-visibility: hidden;
}

.shake-gift {
    animation: shake 1s cubic-bezier(.36, .07, .19, .97) infinite;
}

.box {
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.elf {
    position: absolute;
    width: 185%;
    opacity: 1;
    -webkit-transform: rotateY(-23deg) translateZ(8vmin);
    transform: rotateY(-23deg) translateZ(8vmin);
    transition: all .2s ease-in-out;
}

.active-elf {
    -webkit-transform: rotateY(-23deg) translateZ(8vmin) translateY(-13vmin);
    transform: rotateY(-23deg) translateZ(8vmin) translateY(-13vmin);
}

.elf img {
    width: 100%;
    height: auto;
}

.lid {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: all .2s ease-in-out;
    -webkit-transform: translate3d(-1vmin, 0, 0);
    transform: translate3d(-1vmin, 0, 0);
}

.active-lid {
    -webkit-transform: translate3d(-1vmin, -13vmin, 0);
    transform: translate3d(-1vmin, -13vmin, 0);
}

.lid .face {
    width: 22vmin;
    height: 5vmin;
    background: #2196f3;
}

.lid .face.top {
    height: 22vmin;
}

.lid .face.front {
    -webkit-transform: rotateY(0deg) translateZ(11vmin);
    transform: rotateY(0deg) translateZ(11vmin);
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
}

.lid .face.back {
    -webkit-transform: rotateX(180deg) translateZ(11vmin);
    transform: rotateX(180deg) translateZ(11vmin);
    box-shadow: 0px -3px 2px rgba(0, 0, 0, 0.1);
}

.lid .face.left {
    -webkit-transform: rotateY(-90deg) translateZ(11vmin);
    transform: rotateY(-90deg) translateZ(11vmin);
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
}

.lid .face.right {
    -webkit-transform: rotateY(90deg) translateZ(11vmin);
    transform: rotateY(90deg) translateZ(11vmin);
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
}

.lid .face.top {
    -webkit-transform: rotateX(90deg) translateZ(11vmin);
    transform: rotateX(90deg) translateZ(11vmin);
}

.lid .face.bottom {
    -webkit-transform: rotateX(-90deg) translateZ(11vmin);
    transform: rotateX(-90deg) translateZ(11vmin);
}

.face {
    width: 20vmin;
    height: 20vmin;
    background: #2196f3;
    position: absolute;
    display: inline-block;
    color: white;
    font-size: 2rem;
    opacity: 1;
}

.face.front {
    -webkit-transform: rotateY(0deg) translateZ(10vmin);
    transform: rotateY(0deg) translateZ(10vmin);
}

.face.back {
    -webkit-transform: rotateX(180deg) translateZ(10vmin);
    transform: rotateX(180deg) translateZ(10vmin);
}

.face.left {
    -webkit-transform: rotateY(-90deg) translateZ(10vmin);
    transform: rotateY(-90deg) translateZ(10vmin);
}

.face.right {
    -webkit-transform: rotateY(90deg) translateZ(10vmin);
    transform: rotateY(90deg) translateZ(10vmin);
}

.face.top {
    -webkit-transform: rotateX(90deg) translateZ(10vmin);
    transform: rotateX(90deg) translateZ(10vmin);
}

.face.bottom {
    -webkit-transform: rotateX(-90deg) translateZ(10vmin);
    transform: rotateX(-90deg) translateZ(10vmin);
}

.face .ribbon {
    position: absolute;
    background: #ccd;
    border-right: 1px solid rgba(255, 255, 255, 0.95);
    border-left: 1px solid rgba(255, 255, 255, 0.95);
    width: 20%;
    height: 100%;
    margin: 0 40%;
}

.face .ribbon:nth-of-type(2) {
    width: 100%;
    height: 20%;
    margin: 40% 0;
}

/* .container {
    -webkit-animation: swing 1600ms infinite alternate ease-in-out;
    animation: swing 1600ms infinite alternate ease-in-out;
} */

@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotateY(-10deg) rotateZ(20deg);
        transform: rotateY(-10deg) rotateZ(20deg);
    }

    100% {
        -webkit-transform: rotateY(10deg) rotateZ(-20deg);
        transform: rotateY(10deg) rotateZ(-20deg);
    }
}

@keyframes swing {
    0% {
        -webkit-transform: rotateY(-10deg) rotateZ(20deg);
        transform: rotateY(-10deg) rotateZ(20deg);
    }

    100% {
        -webkit-transform: rotateY(10deg) rotateZ(-20deg);
        transform: rotateY(10deg) rotateZ(-20deg);
    }
}

/* Shake gift */

@keyframes shake {

    10% {
        transform: scale(.4) rotateX(-11deg) rotateY(24deg) translate3d(-50%, 0, 0);
    }

    90% {
        transform: scale(.4) rotateX(-11deg) rotateY(24deg) translate3d(-52%, 0, 0);
    }

    20%,
    80% {
        transform: scale(.4) rotateX(-11deg) rotateY(24deg) translate3d(-48%, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: scale(.4) rotateX(-11deg) rotateY(24deg) translate3d(-54%, 0, 0);
    }

    40%,
    60% {
        transform: scale(.4) rotateX(-11deg) rotateY(24deg) translate3d(-46%, 0, 0);
    }

    100% {
        transform: scale(.4) rotateX(-11deg) rotateY(24deg) translate3d(-50%, 0, 0);
    }
}