.cube {
    background-color: #fafafa;
    margin-top: 14px;
    padding-top: 50px;
    height: 400px;
}

#mainDiv {
    width: 300px;
    height: 300px;
    margin: 0px auto;
    perspective: 1500px;
}

#boxDiv {
    width: 300px;
    transform-style: preserve-3d;
    animation: rotate 15s linear infinite;
}

    #boxDiv div {
        width: 300px;
        height: 300px;
        position: absolute;
        text-align: center;
        opacity: 0.90;
    }

#front {
    transform: translateZ(150px);
    background: #ffffe6;
    border: 1px solid #fafafa;
    background-image: url("/assets/img/f1.png");
    background-size: 100%;
}

#back {
    transform: rotateY(180deg) translateZ(150px);
    background: #ccffff;
    border: 1px solid #fafafa;
    background-image: url("/assets/img/f2.png");
    background-size: 100%;
}

#left {
    transform: rotateY(-90deg) translateX(-150px);
    transform-origin: left;
    border: 1px solid #fafafa;
    background: #d9ffcc;
    background-image: url("/assets/img/f3.png");
    background-size: 100%;
}

#right {
    transform: rotateY(90deg) translateX(150px);
    transform-origin: right;
    background: #ccccff;
    border: 1px solid #fafafa;
    background-image: url("/assets/img/f4.png");
    background-size: 100%;
}

@media (max-width:1200px) {
    .cube {
        background-color: #fafafa;
        margin-top: 14px;
        padding-top: 20px;
        height: 250px;
    }

    #mainDiv {
        width: 200px;
        height: 200px;
        margin: 0px auto;
        perspective: 1500px;
    }

    #boxDiv {
        width: 200px;
        transform-style: preserve-3d;
        animation: rotate 15s linear infinite;
    }

        #boxDiv div {
            width: 200px;
            height: 200px;
            position: absolute;
            text-align: center;
            opacity: 0.90;
        }

    #front {
        transform: translateZ(100px);
        background: #ffffe6;
        border: 1px solid #fafafa;
        background-image: url("/assets/img/f1.png");
        background-size: 100%;
    }

    #back {
        transform: rotateY(180deg) translateZ(100px);
        background: #ccffff;
        border: 1px solid #fafafa;
        background-image: url("/assets/img/f2.png");
        background-size: 100%;
    }

    #left {
        transform: rotateY(-90deg) translateX(-100px);
        transform-origin: left;
        border: 1px solid #fafafa;
        background: #d9ffcc;
        background-image: url("/assets/img/f3.png");
        background-size: 100%;
    }

    #right {
        transform: rotateY(90deg) translateX(100px);
        transform-origin: right;
        background: #ccccff;
        border: 1px solid #fafafa;
        background-image: url("/assets/img/f4.png");
        background-size: 100%;
    }
    /* #top {
         transform:rotateX(-90deg) translateY(-100px);
         transform-origin:top;
         background:white;
         border:1px solid #fafafa;
    }
     #bottom {
         transform:rotateX(90deg) translateY(100px);
         transform-origin:bottom;
         border:1px solid #fafafa;
         background:white;
    }
     */
}

@keyframes rotate {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(-360deg);
    }
}