.wheel-layout {
    background: transparent url("../images/bg/wheel-bg.png") repeat-x scroll 0 0;
    position: relative;
    max-height: 774px;
    border-bottom: 5px solid #0fbfd9;
}
.wheel-layout:before, .wheel-layout:after {
    background: transparent url("../images/bg/wheel-left.png") no-repeat scroll 0 0;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 245px;
    z-index: 0;
}
.wheel-layout::before {
    left: 0;
}
.wheel-layout:after {
    right: 0;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.wheel-title {
    background: transparent url("../images/bg/wheel-title.png") no-repeat scroll center 0;
    display: inline-block;
    font-size: 47px;
    font-weight: bold;
    margin: 20px auto 0px;
    text-indent: -999em;
    text-transform: uppercase;
    width: 465px;
    position: relative;
}
.wheel-title::after {
    content: "";
    display: block;
    background: transparent url("../images/bg/w-title-bd.png") repeat-x scroll center 0;
    height: 17px;
    margin-top: -4px;
}
.wheel-description {
    font-size: 12px;
    margin: 0;
}
.wheel-time {
    font-size: 17px;
}
.wheel-spin-wr {
    padding: 30px 0 78px;
    position: relative;
    margin-bottom: 35px;
}
.wheel-spin-wr:before, .wheel-spin-wr:after {
    content: "";
    display: block;
    position: absolute;
}
.wheel-spin-wr::before {
    background: transparent url("../images/bg/w-left.png") no-repeat scroll 0 0;
    width: 200px;
    height: 350px;
    top: -20px;
    left: 45px;
}
.wheel-spin-wr::after {
    background: transparent url("../images/bg/w-right.png") no-repeat scroll 0 0;
    width: 159px;
    height: 228px;
    top: 20px;
    right: 70px;
}
.wheel-spin {
    height: 496px;
    margin: 0 auto;
    position: relative;
    width: 496px;
    z-index: 2;
}
.wheel-spin::before, .wheel-spin::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
}
.wheel-spin::before {
    background: transparent url("../images/wheel-bgt.png") no-repeat scroll center 0;
    height: 70px;
    top: -30px;
    width: 100%;
}
.wheel-spin::after {
    background: transparent url("../images/wheel-bgb.png") no-repeat scroll center 0;
    bottom: -78px;
    height: 148px;
    width: 578px;
    left: 50%;
    margin-left: -289px;
}
.wheel-spin-inner {
    overflow: hidden;
    border-radius: 50%;
}
.wheel-spin canvas {
    border-radius: 50%;
    max-height: 100%;
    max-width: 100%;
    position: relative;
    z-index: 5;
    border: 1px solid rgba(51, 51, 51, 0);
}
#wheel-spin-bt {
    display: block;
    width: 80px;
    height: 80px;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;
    margin: -40px 0 0 -40px;
    border-radius: 50%;
    cursor: pointer;
}
/* ------------- Responsive ------------- */

@media only screen  and (min-width : 1224px) {
    /* Styles */
}

@media only screen and (min-width : 1024px) and (max-width : 1223px) {
    /* Styles */
}

@media only screen and (min-width : 768px) and (max-width : 1023px) {
    /* Styles */
}

@media only screen and (min-width : 640px) and (max-width : 767px) {
    /* Styles */
}

@media only screen and (max-width : 639px) {

}

@media only screen and (min-width : 480px) and (max-width : 639px) {
    /* Styles */
}

@media only screen and (max-width : 479px) {

}

@media only screen and (min-width : 320px) and (max-width : 479px) {
    /* Styles */
}