.dice__scene {
    width: 70px;
    height: 70px;
    -webkit-perspective: 210px;
    perspective: 210px;
    display: inline-block;
    float: right;
}
#dice__cube {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-35px);
    transform: translateZ(-35px);
    -webkit-transition: -webkit-transform ease;
    transition: -webkit-transform ease;
    transition: transform ease;
    transition: transform ease, -webkit-transform ease;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #dice__cube {
        -webkit-transform-style: flat;
        transform-style: flat;
        -webkit-transform: none !important;
        transform: none !important;
    }
}
@-webkit-keyframes showSameFont {
    100% {
        -webkit-transform: translateZ(-35px) rotateY(360deg);
        transform: translateZ(-35px) rotateY(360deg);
    }
}
@keyframes showSameFont {
    100% {
        -webkit-transform: translateZ(-35px) rotateY(360deg);
        transform: translateZ(-35px) rotateY(360deg);
    }
}
@-webkit-keyframes showSameRight {
    100% {
        -webkit-transform: translateZ(-35px) rotateY(-450deg);
        transform: translateZ(-35px) rotateY(-450deg);
    }
}
@keyframes showSameRight {
    100% {
        -webkit-transform: translateZ(-35px) rotateY(-450deg);
        transform: translateZ(-35px) rotateY(-450deg);
    }
}
@-webkit-keyframes showSameBack {
    100% {
        -webkit-transform: translateZ(-35px) rotateY(-540deg);
        transform: translateZ(-35px) rotateY(-540deg);
    }
}
@keyframes showSameBack {
    100% {
        -webkit-transform: translateZ(-35px) rotateY(-540deg);
        transform: translateZ(-35px) rotateY(-540deg);
    }
}
@-webkit-keyframes showSameLeft {
    100% {
        -webkit-transform: translateZ(-35px) rotateY(450deg);
        transform: translateZ(-35px) rotateY(450deg);
    }
}
@keyframes showSameLeft {
    100% {
        -webkit-transform: translateZ(-35px) rotateY(450deg);
        transform: translateZ(-35px) rotateY(450deg);
    }
}
@-webkit-keyframes showSameTop {
    100% {
        -webkit-transform: translateZ(-35px) rotateX(-450deg);
        transform: translateZ(-35px) rotateX(-450deg);
    }
}
@keyframes showSameTop {
    100% {
        -webkit-transform: translateZ(-35px) rotateX(-450deg);
        transform: translateZ(-35px) rotateX(-450deg);
    }
}
@-webkit-keyframes showSameBottom {
    100% {
        -webkit-transform: translateZ(-35px) rotateX(450deg);
        transform: translateZ(-35px) rotateX(450deg);
    }
}
@keyframes showSameBottom {
    100% {
        -webkit-transform: translateZ(-35px) rotateX(450deg);
        transform: translateZ(-35px) rotateX(450deg);
    }
}
#dice__cube.show-front {
    -webkit-transform: translateZ(-35px) rotateY(0);
    transform: translateZ(-35px) rotateY(0);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #dice__cube.show-front .dice__side--front {
        display: block;
    }
}
#dice__cube.show-front.show-same {
    -webkit-animation: showSameFont 0.5s ease;
    animation: showSameFont 0.5s ease;
}
#dice__cube.show-right {
    -webkit-transform: translateZ(-35px) rotateY(-90deg);
    transform: translateZ(-35px) rotateY(-90deg);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #dice__cube.show-right .dice__side--right {
        display: block;
    }
}
#dice__cube.show-right.show-same {
    -webkit-animation: showSameRight 0.5s ease;
    animation: showSameRight 0.5s ease;
}
#dice__cube.show-back {
    -webkit-transform: translateZ(-35px) rotateY(-180deg);
    transform: translateZ(-35px) rotateY(-180deg);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #dice__cube.show-back .dice__side--back {
        display: block;
    }
}
#dice__cube.show-back.show-same {
    -webkit-animation: showSameBack 0.5s ease;
    animation: showSameBack 0.5s ease;
}
#dice__cube.show-left {
    -webkit-transform: translateZ(-35px) rotateY(90deg);
    transform: translateZ(-35px) rotateY(90deg);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #dice__cube.show-left .dice__side--left {
        display: block;
    }
}
#dice__cube.show-left.show-same {
    -webkit-animation: showSameLeft 0.5s ease;
    animation: showSameLeft 0.5s ease;
}
#dice__cube.show-top {
    -webkit-transform: translateZ(-35px) rotateX(-90deg);
    transform: translateZ(-35px) rotateX(-90deg);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #dice__cube.show-top .dice__side--top {
        display: block;
    }
}
#dice__cube.show-top.show-same {
    -webkit-animation: showSameTop 0.5s ease;
    animation: showSameTop 0.5s ease;
}
#dice__cube.show-bottom {
    -webkit-transform: translateZ(-35px) rotateX(90deg);
    transform: translateZ(-35px) rotateX(90deg);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #dice__cube.show-bottom .dice__side--bottom {
        display: block;
    }
}
#dice__cube.show-bottom.show-same {
    -webkit-animation: showSameBottom 0.5s ease;
    animation: showSameBottom 0.5s ease;
}
.dice__side {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
    box-shadow: inset 0 0 17px rgba(59, 107, 147, 2.1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .dice__side {
        display: none;
        -webkit-transform: none !important;
        transform: none !important;
    }
}
.dice__side--front {
    -webkit-transform: rotateY(0) translateZ(35px);
    transform: rotateY(0) translateZ(35px);
    background-image: url(../img/dice-1.png);
}
.dice__side--back {
    -webkit-transform: rotateY(180deg) translateZ(35px);
    transform: rotateY(180deg) translateZ(35px);
    background-image: url(../img/dice-6.png);
}
.dice__side--right {
    -webkit-transform: rotateY(90deg) translateZ(35px);
    transform: rotateY(90deg) translateZ(35px);
    background-image: url(../img/dice-4.png);
}
.dice__side--left {
    -webkit-transform: rotateY(-90deg) translateZ(35px);
    transform: rotateY(-90deg) translateZ(35px);
    background-image: url(../img/dice-3.png);
}
.dice__side--top {
    -webkit-transform: rotateX(90deg) translateZ(35px);
    transform: rotateX(90deg) translateZ(35px);
    background-image: url(../img/dice-2.png);
}
.dice__side--bottom {
    -webkit-transform: rotateX(-90deg) translateZ(35px);
    transform: rotateX(-90deg) translateZ(35px);
    background-image: url(../img/dice-5.png);
}

.dice_btn {
    font-family: Parastoo, tahoma, Calibri;
    float: right;
    margin-right: 12px;
    background: #3b6b93;
    color: white;
    cursor: pointer;
}