.surprise-gift {
    position: absolute;
    top: 0;
    left: 23%;
    cursor: pointer;
    /* transform: translateY(0%); */
    height: 360px;
    width: 250px;
    z-index: 15;
    transition: all .5s ease-in-out;
}

.active-surprise {
    transform: translateY(0%);
}

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

#container {
    position: absolute;
    left: 27%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    width: 20vmin;
    -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;
}

#box {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#lid {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(-1vmin, 0, 0);
    transform: translate3d(-1vmin, 0, 0);
}

#lid .faceSuprise {
    width: 22vmin;
    height: 5vmin;
    background: #3F5EFB;
    background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
}

#lid .faceSuprise.top {
    height: 22vmin;
}

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

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

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

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

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

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

#box {
    transform: scale(0.5);
}

#lid {
    -webkit-transform: translate3d(-.5vmin, 0, 0) scale(.5);
    transform: translate3d(-.5vmin, 0, 0) scale(.5);
}

.faceSuprise {
    width: 20vmin;
    height: 20vmin;
    background: #3F5EFB;
    background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
    position: absolute;
    display: inline-block;
    color: white;
    font-size: 2rem;
    opacity: 1;
}

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

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

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

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

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

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

.faceSuprise .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%;
}

.faceSuprise .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(-5deg) rotateZ(10deg);
        transform: rotateY(-5deg) rotateZ(10deg);
    }

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

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

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