/* ANIMATE - FLIP 3D */
@import url(https://fonts.googleapis.com/css?family=Roboto:400);
.cube {
    width: 5em;
    text-align: center;
    float: right;
    margin-right: 1em;
    margin-top:-1em;
    height: 3em;
    cursor:pointer;
    -webkit-transition: -webkit-transform .33s;
    transition: transform .33s; /* Animate the transform properties */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; /* <-NB */
}

/* The two faces of the cube */
.flippety, .flop {
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189, .8);
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
    box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;

}

/* Position the faces */
.flippety {
    -webkit-transform: translateZ(50px);
    transform: translateZ(22px);
}

.flop {
    -webkit-transform: rotateX(-90deg) translateZ(-50px);
    transform: rotateX(-90deg) translateZ(-50px);
}

/* ROTATE THE CUBE */
.cube:hover {
    -webkit-transform: rotateX(89deg);
    transform: rotateX(89deg); /* Text bleed at 90º */
}

/* BOUNCE REMINDER */
.hithere {
    animation: hithere 3s ease infinite;
}

@keyframes hithere {
    30% {
        transform: scale(1.2);
    }

    40%, 60% {
        transform: rotate(-20deg) scale(1.2);
    }

    50% {
        transform: rotate(20deg) scale(1.2);
    }

    70% {
        transform: rotate(0deg) scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}