.play-left{
  text-align: center;
  margin: 20px 0;
}
.play-left span{
  background-color: #000;
  color: #fff;
  padding: 0 5px;
  margin: 0 5px;
  font-size: 24px;
  border-radius: 3px;
}
#roulette{
  position: relative;
  min-width: 290px;
  max-width: 558px;
  width: 100%;
  z-index: 10;
  margin: 0 auto;
}
#roulette .wheel {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background: url('../images/roulette/wheel.png?v=1.0') no-repeat center center;
  background-size: 100%;
  padding-top:100%;
  width: 100%;
}
#roulette .wheel-base{
  position: relative;
  left: 0;
  top: 0;
  background: url('../images/roulette/wheel-base.png') no-repeat;
  background-size: 100%;
  padding-top: 100%;
  width: 100%;
}
#roulette .pointer {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  background: url('../images/roulette/pointer.png') no-repeat center 1%;
  background-size: 11.65%;
  padding-top: 100%;
  width: 100%;
}
#roulette .spinner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: url('../images/roulette/go-bg.png') no-repeat 51.5% 51.5%;
  background-size: 24%;
  padding-top: 100%;
  width: 100%;
  border: none;
  cursor: pointer;
}
#roulette .spinner-go{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  background: url('../images/roulette/spinner-go.png') no-repeat center center;
  background-size: 8.96%;
  padding-top: 100%;
  width: 100%;
}
.spinner:focus {outline:0;}

/* loader */
/*.spinner-loader{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  background: url('../images/roulette/loader.gif') no-repeat center center;
  background-size: 5.38%;
  padding-top: 100%;
  width: 100%;
}*/

/* animation */
#roulette .spinner{
  -webkit-animation: scale .7s infinite;
  animation: scale .7s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
@keyframes scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
/*
@media screen and (max-width: 320px){
  .fancybox-wrap{
    left: 0!important;
    width: 300px;
  }
}*/
/*
.fancybox-close{
  top: 20px;
  right: 20px;
  width: 18px;
  height: 18px;
}
*/
.modal-content{
  display: none;
  font-size: 18px;
  color: #676767;
/*  background-color: #ffffff;*/
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}
.modal-content input[type="text"]{
  height: 25px;
  padding-left: 5px;
}
.modal-content .ob_head{
  font-size: 16px;
  text-align: center;
  margin-bottom: 25px;
}
.modal-content .content{
  text-align: center;
  margin: 40px 20px;
}
.modal-content .btn_comfirm,
.modal-content .btn_cancel{
  text-align: center;
}
.modal-content .btn_comfirm a,
.modal-content .btn_cancel a{
  display: inline-block;
  color: #ffffff;
  background-color: #725c9d;
  text-align: center;
  text-decoration: none;
  width: 170px;
  padding: 15px 0px;
}
.modal-content .message{
  margin-bottom: 30px;
}
/*.fancybox-opened .fancybox-title{
  visibility: hidden;
}*/
.modal-content .dialog_confirm ,
.modal-content .dialog_cancel{
  display: inline-block;
  color: #ffffff;
  background-color: #df0037;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  min-width: 170px;
  padding: 15px 15px;
}
/*.modal_dialog{
  padding-top: 40px;
}*/
.modal_dialog .content{
  margin: 50px 10px;
  line-height: 25px;
}
.modal_dialog .btn_area{
  text-align: center;
}
/*have two buttons*/
.modal_prompt .btn_area{
  overflow: hidden;
  width: 285px;
  margin: 0 auto;
}
.modal_prompt .dialog_confirm,
.modal_prompt .dialog_cancel{
  min-width: 100px;
}
.modal_prompt .dialog_confirm{
  float: right;
}
.modal_prompt .dialog_cancel{
  float: left;
}