body {
}

@-webkit-keyframes spincube {
    from, to {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    16% {
        -webkit-transform: rotateY(-90deg);
    }

    33% {
        -webkit-transform: rotateY(-90deg) rotateZ(90deg);
    }

    50% {
        -webkit-transform: rotateY(-180deg) rotateZ(90deg);
    }

    66% {
        -webkit-transform: rotateY(-270deg) rotateX(90deg);
    }

    83% {
        -webkit-transform: rotateX(90deg);
    }
}

@keyframes spincube {
    from, to {
        -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    16% {
        -moz-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    33% {
        -moz-transform: rotateY(-90deg) rotateZ(90deg);
        -ms-transform: rotateY(-90deg) rotateZ(90deg);
        transform: rotateY(-90deg) rotateZ(90deg);
    }

    50% {
        -moz-transform: rotateY(-180deg) rotateZ(90deg);
        -ms-transform: rotateY(-180deg) rotateZ(90deg);
        transform: rotateY(-180deg) rotateZ(90deg);
    }

    66% {
        -moz-transform: rotateY(-270deg) rotateX(90deg);
        -ms-transform: rotateY(-270deg) rotateX(90deg);
        transform: rotateY(-270deg) rotateX(90deg);
    }

    83% {
        -moz-transform: rotateX(90deg);
        -ms-transform: rotateX(90deg);
        transform: rotateX(90deg);
    }
}

.cubespinner > div a:hover {
    color: #000;
}

.face5 a:hover,
.face2 a:hover {
    color: #FA6405 !important;
}

.cubespinner {
    -webkit-animation-name: spincube;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 17s;
    animation-name: spincube;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 17s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 60px 60px 0;
    -moz-transform-origin: 60px 60px 0;
    -ms-transform-origin: 60px 60px 0;
    transform-origin: 60px 60px 0;
}

.face1,
.face3 {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgb(160, 5, 5);
    border-bottom: 2px solid rgb(96, 0, 0);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.face6,
.face4 {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgb(160, 5, 5);
    border-bottom: 2px solid rgb(96, 0, 0);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.face5,
.face2 {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgb(160, 5, 5);
    border-bottom: 2px solid rgb(96, 0, 0);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.cubespinner .face1 {
    -webkit-transform: translateZ(60px);
    -moz-transform: translateZ(60px);
    -ms-transform: translateZ(60px);
    transform: translateZ(60px);
}

.cubespinner .face2 {
    -webkit-transform: rotateY(90deg) translateZ(60px);
    -moz-transform: rotateY(90deg) translateZ(60px);
    -ms-transform: rotateY(90deg) translateZ(60px);
    transform: rotateY(90deg) translateZ(60px);
}

.cubespinner .face3 {
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}

.cubespinner .face4 {
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
}

.cubespinner .face5 {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
}

.cubespinner .face6 {
    -webkit-transform: rotateX(-90deg) translateZ(60px);
    -moz-transform: rotateX(-90deg) translateZ(60px);
    -ms-transform: rotateX(-90deg) translateZ(60px);
    transform: rotateX(-90deg) translateZ(60px);
}

.face7 {
    position: absolute;
    width: 120px;
    height: 120px;
    background: #808000;
    border-bottom: 2px solid rgb(96, 0, 0);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.face9 {
    position: absolute;
    width: 120px;
    height: 120px;
    background: #1E90FF;
    border-bottom: 2px solid rgb(96, 0, 0);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.face12 {
    position: absolute;
    width: 120px;
    height: 120px;
    background: #808000;
    border-bottom: 2px solid rgb(96, 0, 0);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.face10 {
    position: absolute;
    width: 120px;
    height: 120px;
    background: #F27633;
    border-bottom: 2px solid rgb(96, 0, 0);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.face11,
.face8 {
    position: absolute;
    width: 120px;
    height: 120px;
    background: #F27633;
    border-bottom: 2px solid rgb(96, 0, 0);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.cubespinner .face7 {
    -webkit-transform: translateZ(60px);
    -moz-transform: translateZ(60px);
    -ms-transform: translateZ(60px);
    transform: translateZ(60px);
}

.cubespinner .face8 {
    -webkit-transform: rotateY(90deg) translateZ(60px);
    -moz-transform: rotateY(90deg) translateZ(60px);
    -ms-transform: rotateY(90deg) translateZ(60px);
    transform: rotateY(90deg) translateZ(60px);
}

.cubespinner .face9 {
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}

.cubespinner .face10 {
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
}

.cubespinner .face11 {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
}

.cubespinner .face12 {
    -webkit-transform: rotateX(-90deg) translateZ(60px);
    -moz-transform: rotateX(-90deg) translateZ(60px);
    -ms-transform: rotateX(-90deg) translateZ(60px);
    transform: rotateX(-90deg) translateZ(60px);
}

.suggestionsBox {
    padding: 15px 30px;
    position: fixed;
    width: 18%;
    float: left;
    z-index: 111111;
    bottom: 60px;
    left: 0;
}

    .suggestionsBox .stage .cubespinner > div i {
        font-size: 33px;
        margin-bottom: 7px;
        margin-top: 15px;
    }

.cubespinner > div i {
    font-size: 33px;
    margin-bottom: 7px;
    margin-top: 24px;
}

.RecogBox {
    margin-bottom: 10px !important;
    padding: 15px 30px;
    position: fixed;
    width: 18%;
    float: right;
    z-index: 111111;
    bottom: 20px;
    right: 0;
}

.RecogBoxR {
    margin-bottom: 10px !important;
    padding: 15px 30px;
    position: fixed;
    width: 18%;
    float: right;
    z-index: 111111;
    bottom: 100px;
    left: 0;
}