*:focus {
    outline: none;
    box-shadow: none;
}
.carkBlock button.spinBtn {
    cursor: pointer;
    z-index: 21;
    position: absolute;
    left: 204px;
    top: 210px;
    background: transparent;
    border: none;
}
.carkBlock button.spinBtn img {
    width: 100px;
    animation: rotateButton 2s infinite alternate ease-in-out;
}
.pauseAnimation {
    animation: none !important;
}
@keyframes rotateButton {
    0% { transform: rotate(-15deg); }
    100% { transform: rotate(15deg); }
}
#canvas {
    animation: SpinCenter 60s linear infinite;
}

@keyframes SpinCenter {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#innerBlock {
    position: relative;
}

.the_wheel {
    background: url(/themes/assets/wheel/back/5.png) transparent no-repeat top center;
    width: 517px;
    height: 615px;
    display: block;
    position: relative;
    z-index: 10;
    margin: 0 auto;
    background-size: contain;
}

.the_wheel_inner {
    background: url(/themes/assets/wheel/pin/3.png) transparent no-repeat top center;
    width: 517px;
    height: 517px;
    display: block;
    position: absolute;
    z-index: 20;
    background-size: contain;
    left:0;
    top:0;
}
#canvas {
    top: 39px;
    left: 39px;
    position: relative;
    z-index: 10;
    margin: 0 auto;
}

@media (max-width: 992px) {
    #innerBlock {
        padding-top: 0;
    }
}
@media (max-width: 640px) {
    .the_wheel {
        position: relative;
        width: 300px;
        height: 362px;

        background-size: cover;
    }
    #canvas {
        padding: 0;
        width: 260px !important;
        top: 23px;
        left: 20px;
    }
    .the_wheel_inner {
        width: 300px;
        left: -2px;
        top: 0;
        height: 350px;
    }
}