/*
Description:
    Contains all the styles for the winning wheel page.
    
Verison History:
    2012-01-28, Douglas McKechie
    - Created based off earlier version.
    
    2015-09-26, Douglas McKechie
    - Minor updates for the 2.0 winwheel example.
*/

 
@font-face {
  font-family: 'Dosis-Bold';
  src: url('font/Dosis-Bold.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Dosis-Light';
  src: url('font/Dosis-Light.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Dosis-Medium';
  src: url('font/Dosis-Medium.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Dosis-Regular';
  src: url('font/Dosis-Regular.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Dosis-SemiBold';
  src: url('font/Dosis-SemiBold.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}

.mainspin .toptext .stitle{    line-height: 52px;
    text-align: center;
    font-size: 40px;
    font-family: 'Dosis-Bold';
    min-width: 306px; }
.toptext .sluck{   text-align: center; font-family:'Dosis-Light';}
.toptext .swinn{ line-height: 52px;text-align: center; font-family:'Dosis-Light';}
.mainspin  input#semailfield { 
    padding: 5px 10px;    width: 96%;
    text-align: center;color: #949393;
    border-radius: 8px;
    border: 0;
	font-family: Dosis-Medium;
    font-size: 18px;
}
.mainspin  #coup_expire{text-align: center;
    color: white;}
.mainspin  .semail {
    text-align: center;
    width: 100%;
    padding: 10px;
} 
 @media only screen and (min-width: 768px) { 
 .spinnerright{width:421px !important}
 .mainspin #spinbutton {padding:10px 83px}
 .mainspin.it #spinbutton {padding:10px 42px}
 /*.before_close.Mobile{    margin-top: 10px !important;display:none !important}
  .before_close { margin-top: 76px !important;display:block !important} */
  }
 @media only screen and (min-width: 670px) { 
 .mainspin {
    position: absolute;
   top: 229px;
    z-index: 999;
  }
  .spinnerright{    width: 52%;
    float: right;
    position: absolute;
    right: 0;
    top: 30%;
	}
	.spinarrow{left: -200px;    top: 7px;}
 }
 
/* Sets the background image for the wheel */
div.the_wheel
{
	    background: url(images/wheel_back.png) no-repeat;
        background-position-y: -15px;
		background-position-x: -36px;
		background-size: 573px;
} 
 .mainspin {
       width: 880px;    z-index: 999;
    max-width: 880px;
    background: #0fb9b7;
        opacity:1;
}
/* Do some css reset on selected elements */
.mainspin  h1, .mainspin  p
{
    margin: 0;
}

 

.mainspin  div.html5_logo
{
    margin-left:70px;
}

/* Styles for the power selection controls */
.mainspin  table.power
{
    background-color: #cccccc;
    cursor: pointer;
    border:1px solid #333333;
}

.mainspin  table.power th
{
    background-color: white;
    cursor: default;
}

.mainspin td.pw1
{
    background-color: #6fe8f0;
}

.mainspin td.pw2
{
    background-color: #86ef6f;
}

.mainspin td.pw3
{
    background-color: #ef6f6f;
}

/* Style applied to the spin button once a power has been selected */
.mainspin .clickable
{
    cursor: pointer;
}

/* Other misc styles */
.mainspin .margin_bottom
{
    margin-bottom: 5px;
}

.spinnerclass {
    width: 100%;
	max-width: 768px;
    float: left;
    background: #00b5b2;
    position: relative;
    height: 602px;padding: 20px 0 0 0;
    overflow: hidden;
}
.spinnerleft{
	position: absolute;
    width: 100%;
    left: -250px;
    overflow: hidden;
    padding-top: 19px;
    height: 562px;
    margin-top: 0;
}
.spinnerright {
    width: auto;
    float: right;
    position: absolute;
    right: 0;    padding: 0 63px;
    top: 21%;
}
 
.stitle {
    font-size: 40px;
    font-weight: 900;
    color: #fff;
}
.sluck {
    font-size: 40px;
    color: #fff;
    font-weight: 600;
}
.swinn{
	font-size: 40px;
    color: #fff;
    font-weight: 700;
}
.mainspin input#semailfield.error {
    border: 1px solid red;
}
.spinarrow {
    position: absolute;
   left: -137px;    top: 69px;
}
@media only screen and (max-width: 870px) { 
.mainspin{width:100%;max-width:100%;}
}
@media only screen and (max-width: 768px) { 
.mainspin.YesMobile input#semailfield{width: 214px !important;}
.mainspin.it input#semailfield{width: 212px !important;}
.mainspin.it #spinbutton{padding:7px 24px !important}
.mainspin  #spinbutton{padding: 7px 55px  !important;}
.spinnerright input#coupon_code{width:85% !important} 
.spinnerright #winsuccess{text-align:center;margin-top: 11px !important;padding: 0 !important;}
.spinnerright button.semailfields.copy_coupon{width:85% !important}
.YesMobile.it .toptext .sluck{margin-bottom: 0;}
.mainspin a.coupon_close{padding-right: 10%;}
.toptext.winner .swinn{width: 49% ;text-transform: uppercase;}
#finalwinner {
     font-family: Dosis-SemiBold;text-transform: uppercase;font-size: 22px;
    margin-bottom: 23px;text-align: center;color: white;}
}
@media only screen and (max-width: 768px) { 
.YesMobile div.the_wheel
{background: url(images/wheel_back_mobile.png) no-repeat !important;}
/*.before_close.Mobile{display:block !important;bottom: 34px;

text-align: center;position: absolute;

width: 100%;}
 .before_close {display:none !important} */
.spinarrow{display:none !important;}
  .NoMobile  div.the_wheel {
		background: url(images/wheel_back.png) no-repeat;
		background-position-y: 11px !important;
		background-position-x: -10px !important;
		background-size: 319px !important; }
  .spinnerclass {
	   height: 548px !important;
    width: 100% !important;
    max-width: 100% !important;	  
	  }
.spinnerleft{text-align: center;margin-top: -151px !important;left:unset !important;}
 .mainspin{  opacity: 1;   width: 100% !important;    max-width:100% !important;   position: ABSOLUTE;    top: -9px !important;    z-index: 999;}
  .NoMobile.mainspin{    top: 255px !important;}
  .NoMobile  .spinnerclass {    height: 602px !important;}
  .NoMobile .toptext .sluck{width: 100%;    text-align: center !important;}
  .mainspin.it.NoMobile .spinnerright{padding: 0 37px !important;    max-width: 471px  !important;min-width: 471px  !important;}
  .NoMobile .toptext .swinn{width: 100% !important;text-align: center !important;}
  .NoMobile .spinnerleft {
    position: absolute !important;
    width: 100% !important;
    left: -384px !important;
    overflow: hidden !important;
    padding-top: 19px !important;
    height: 562px !important;
    margin-top: 0 !important;
}

.YesMobile.it .toptext .sluck {
    text-align: center !important;
    font-family: 'Dosis-Medium';
    float: none;
    font-size: 31px !important; 
    width: 100%;
    margin-bottom: 10px;
}
.mainspin input#semailfield{width: 211px !important;}
.mainspin #winsuccess {max-width: 301px !important;margin: 0 auto !important;}
.mainspin.it.YesMobile .toptext .stitle{line-height: 40px;} 
.mainspin.it.YesMobile .swinn,.mainspin.it.YesMobile .sluck{width: 100% !important;text-align:center !important;}
.NoMobile .spinarrow_Mobile.visible-xs{display:none !important;}
.NoMobile .spinarrow{display:block !important;}
.NoMobile .spinarrow {position: absolute;left: -122px !important;top: 72px !important;transform: unset !important; }
.NoMobile.it .spinarrow{left: -83px !important;}
.NoMobile  .spinnerright {
    width: auto !important;
    float: right;
    position: absolute;
    right: 0;
    padding: 0 63px !important;
    top: 21% !important;
}
.NoMobile  #winsuccess {width: 310px;}
 .spinnerright {
    width: 100%;
    float: unset;
    position: relative;
    right: unset;
    padding: unset;
    top: 240px;
    margin: 0 auto;

}
.toptext .stitle,.toptext .sluck,.toptext .swinn{font-size:30px;}
.toptext .sluck {

    text-align: right !important;
    font-family: 'Dosis-Light';
    float: left;
    font-size: 22px ;
    width: 50%;
margin-bottom: 14px;
}
.toptext .swinn {

    line-height: unset;
    text-align: left;
    font-family: 'Dosis-Light';
    float: right;
    font-size: 22px ;
    width: 46%;
margin-bottom: 14px;
}
.spinarrow {

    position: absolute;
    left: 85px;
    top: -98px;
    transform: rotate(90deg);

}

.spinarrow img{width: 100px;}
.spinarrow_Mobile{width: 100%;text-align: center;position: absolute;top: 153px;}
.spinarrow_Mobile img{width: 75px;transform: rotate(92deg);}
#spinbutton{padding: 10px 16px;font-family: Dosis-Medium;}
  }
#spinbutton {
  color: #fff;background: #d3370d;text-align: center;border-radius: 10px;
padding: 10px 82px; font-family: Dosis-Bold;font-size: 21px;
}

.mainspin.it #spinbutton{padding:10px 43px}
@media only screen and (max-width: 768px) and (min-width: 700px){ 
   .NoMobile div.the_wheel{background: url(images/wheel_back.png) no-repeat;
		background-position-y: -17px !important;  
      background-position-x: 97px !important;  
      background-size: 572px !important;}
	  .spinnerclass {	  height: 661px !important;   }
	  .spinnerright{    top: 344px;}
	  .spinnerleft {	  margin-top: -269px !important; }
	.mainspin  input#semailfield{width: 267px;} 
	.spinarrow_Mobile.visible-xs img{    width: 109px;}
	.spinarrow_Mobile.visible-xs{top: 233px;display: block !important;}
	#winsuccess {  width: 364px;  margin: 0 auto; }
	.mainspin img#spin_button {    width: auto !important;}
	.mainspin.it .swinn{width: 100%;text-align: center;font-size: 34px !important;font-family: Dosis-Medium;}
   
  /*is Mobile and responsive*/
  /* .YesMobile .spinnerleft {    margin-top: -166px !important;}
 .YesMobile  div.the_wheel{ background-position-y: 10px !important;
		background-position-x: 223px !important;
		background-size: 319px !important;} */
	.YesMobile  .spinarrow_Mobile.visible-xs img {		width: 75px;	}
    .YesMobile .spinarrow_Mobile.visible-xs {    top: 152px;}
	.YesMobile .spinnerright {    top: 229px;}
	.YesMobile.it .toptext .sluck {
    text-align: center !important;
    font-family: 'Dosis-Medium';
    float: none;
    font-size: 31px !important; 
    width: 100%;
    margin-bottom: 10px;
}
}
 

  @media only screen and (max-width: 768px) { 
  .sluck.formobile{    width: 100%;
    text-align: center !important;}
    .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 196px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 765px) { 
    .mainspin  input#semailfield{width: 267px;}
	.mainspin img#spin_button {    width: auto !important;}
	.mainspin.it .swinn{width: 100%;text-align: center;font-size: 34px !important;font-family: Dosis-Medium;}
  }
  @media only screen and (max-width: 765px) { 
    .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 194px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
   @media only screen and (max-width: 760px) { 
   .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 192px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
   @media only screen and (max-width: 750px) { 
   .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 187px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  
    @media only screen and (max-width: 740px) { 
   .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 182px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
   @media only screen and (max-width: 730px) { 
    .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 177px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 720px) { 
   .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 172px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
   @media only screen and (max-width: 710px) { 
   .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 167px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
   @media only screen and (max-width: 700px) { 
   .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 162px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }  
   @media only screen and (max-width: 690px) { 
    .YesMobile    div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 157px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }  
    @media only screen and (max-width: 680px) { 
    .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 152px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }  
   @media only screen and (max-width: 670px) { 
    .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 147px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }  
 @media only screen and (max-width: 660px) { 
   .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 142px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }  
  @media only screen and (max-width: 650px) { 
   .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 137px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }  
@media only screen and (max-width: 640px) { 
    .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 132px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }  
   @media only screen and (max-width: 630px) { 
   .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 127px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 620px) { 
  .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 122px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 610px) { 
   .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 117px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 600px) { 
  .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 112px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 590px) { 
   .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 107px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 580px) { 
  .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 102px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 570px) {
 .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 97px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 560px) {
	.YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 92px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 550px) { 
  .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 87px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 540px) {
  .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 82px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 530px) { 
   .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 77px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 527px) { 
   .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 75px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 520px) { 
  .YesMobile    div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 72px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 510px) { 
   .YesMobile    div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 67px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 500px) { 
   .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 62px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 490px) { 
   .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 57px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 480px) { 
   .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 52px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 470px) { 
  .YesMobile    div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 47px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 460px) { 
 .YesMobile   div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 42px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 450px) { 
  .YesMobile  div.the_wheel{background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 37px !important;
    margin-top: -230px !important;}
	.YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
 @media only screen and (max-width: 440px) { 
  .YesMobile  div.the_wheel {
    background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 32px !important;
    margin-top: -230px !important;
	}	
  .YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 430px) { 
 .YesMobile   div.the_wheel {
    background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 27px !important;
    margin-top: -230px !important;
	}	
  .YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 420px) {
   .YesMobile  div.the_wheel {
    background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 22px !important;
    margin-top: -230px !important;
	}	
  .YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (min-width: 416px) and (max-width: 419px) { 
    .YesMobile   div.the_wheel {
          background-position-y: 48px !important;
          background-position-x: 19px !important;
	}
  }
  @media only screen and (max-width: 415px) { 
    .YesMobile   div.the_wheel {
          background-position-y: 48px !important;
          background-position-x: 19px !important;
	}
  }
  @media only screen and (max-width: 410px) { 
    .YesMobile   div.the_wheel {
    background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 17px !important;
    margin-top: -230px !important;
	}	
  .YesMobile .spinnerleft canvas{margin-left:  -13px;}
  }
  @media only screen and (max-width: 400px) { 
  .YesMobile   div.the_wheel {
    background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 12px !important;
    margin-top: -230px !important;
	}	
  .YesMobile .spinnerleft canvas{margin-left:  -16px;}
  }
  @media only screen and (max-width: 390px) {
  .YesMobile  div.the_wheel {
    background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: 7px !important;
    margin-top: -230px !important;
	}	
.YesMobile .spinnerleft canvas{margin-left:  -21px;}	
  }
  @media only screen and (max-width: 380px) { 
  .YesMobile   div.the_wheel{ 
	background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: -2px !important;
    margin-top: -230px !important;
   }
   .YesMobile .spinnerleft canvas{margin-left:  -30px;}
  }
  @media only screen and (max-width: 370px) { 
  .YesMobile  div.the_wheel{ 
	background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: -2px !important;
    margin-top: -230px !important;
   }
   .YesMobile .spinnerleft canvas{margin-left:  -30px;}
  }
  @media only screen and (max-width: 360px) {
  .YesMobile     div.the_wheel{ 
	background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: -6px !important;
    margin-top: -230px !important;
   }
   .YesMobile .spinnerleft canvas{margin-left:  -34px;}
  }
  
  @media only screen and (max-width: 350px) { 
 .YesMobile   div.the_wheel{ 
	background-size: 365px !important;
    background-position-y: 48px !important;
    background-position-x: -14px !important;
    margin-top: -230px !important;
   }
   .YesMobile .spinnerleft canvas{margin-left:  -42px;}
  }
  @media only screen and (max-width: 330px) { 
 .YesMobile  div.the_wheel{     
    background-position-x: -18px !important;
    background-size: 365px !important;
    background-position-y: 48px !important;
    margin-top: -230px !important;}
    .YesMobile .spinnerleft canvas{margin-left:  -46px;}
  }
  @media only screen and (max-width: 320px) { 
 .YesMobile  div.the_wheel{margin-top: -230px !important;background-size: 365px !important;background-position-y: 48px !important;background-position-x: -22px !important;}
  .YesMobile .spinnerleft canvas{margin-left: -50px;}
  
  }
  button.semailfields{
    padding: 10px; 
    width: 90%;
    text-align: center;
    border-radius: 7px;
}
label.coup {
    line-height: 2;
    text-align: center;
    font-family: 'Dosis-SemiBold';
	    font-size: 20px;
    color: #fff;
    font-weight: 700;
}
.coupon_close:hover{
	color:#2d2d2d !important;
}
#winsuccess{
	padding-left:18px
}
img#spin_button {
    width: 90%;
}
a.before_close {
    color: #fff;
   padding: 0px 0px 0 0;
	margin-top: 32px;
    text-align: center;
    display: block;
    font-size: 19px;
    font-family: "Dosis";
}
.mainspin input#coupon_code {
        text-align: center !important;
    padding: 2px 10px !important;
    font-weight: bold !important;
    border-radius: 10px !important;
    border: 0 !important;
    width: 100% !important;
    color: #18AEAA !important;
    font-size: 30px !important;
    font-family: Dosis-Bold;
}
.mainspin button.semailfields.copy_coupon {
    padding: 10px !important;
    width: 100% !important;
    text-align: center !important;
    border-radius: 7px !important;
    background: #D53712 !important;
    color: #fff !important;
    font-weight: bold !important;
	font-family: "Dosis" !important;
    font-size: 18px;
}
.mainspin a.coupon_close {
        margin-top: 55px;
    display: block;
    color: #FFF;
    text-align: right;
	   font-size: 19px;
    font-family: "Dosis";
}
.mainspin .toptext.winner .swinn{font-family:'Dosis-Light';}
.mainspin a.coupon_close:hover {
    
	opacity: 0.9;
    cursor: pointer;
}
.mainspin #spin_button:hover {
    opacity: 0.9;
    cursor: pointer;
}
.mainspin a.before_close:hover{
	 opacity: 0.9;
    cursor: pointer;
}
.mainspin #exist_email{
	color: red;
    padding: 0px 0px 0 0;
    margin-top: 5px;
    text-align: center;
    display: block;
    font-size: 17px;
    font-family: 'Dosis-Light';
    font-weight: bold;
}
.mainspin button#spinbutton:hover {
    opacity: 0.9;
}
.mainspin button.semailfields.copy_coupon:hover {
    opacity: 0.9;
}
/*
@media only screen and (max-width: 669px) { 
  .spinnerclass {    height: 576px !important;width: 100% !important;  max-width: 660px !important; }
  .mainspin{     width: 100% !important;    max-width: 660px !important;   position: ABSOLUTE;    top: -9px !important;    z-index: 999;}
  .spinnerright{transform: rotate(270deg);}
  div#spinnerclass {    transform: rotate(90deg);}
  }  */