#slots {
  margin: 0;
  
}

#stage {
  margin: 0 auto;
  /*padding: 0 0 40px;*/
}

.perspective-on {
  -webkit-perspective: 700px;
     -moz-perspective: 700px;
          perspective: 700px;    /* Setting the perspective of the contents of the stage but not the stage itself*/
}
.perspective-off {
  -webkit-perspective: 7000px;
     -moz-perspective: 7000px;
          perspective: 7000px;
}

#rotate {
  /*margin: 0 auto 0;
  width: 540px;
  height: 220px;
  padding-top: 150px;
  padding-top:10%;
 
  width: 100%;
  height: 100%;
   */
  /* Ensure that we're in 3D space */
  transform-style: preserve-3d;
}

.ring {
  margin: 0 auto;
  /*height: 80px;
  width: 90px;*/
    
  float: left;
  transform-style: preserve-3d;
 	
}


.slot {
  position: absolute;
  /*width: 90px;
  height: 80px;*/
  
  box-sizing: border-box;
  opacity: 0.9;
  color: rgba(255,255,255,0.9);
  
  background: #111;
  border: solid 1px #aaa;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
   -webkit-border-radius: 7px;	
   /*
   -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;	 
*/
	

	
}

.slot .is-active{
	background-color: rgba(76, 209, 95, 0.9);
	
}

.slot:hover {
	background-color: #00f;
    /*
   transform: rotateX(90 deg) scale(2);
  
	-webkit-transform: rotateX(90 deg) scale(2,2);
    -moz-transform:  scale(2,2);
    -o-transform: scale(2,2);
    -ms-transform:  scale(2,2);
   */
	
}

.slot img{
	width:90%;
	height:100%;
	opacity:0.8;
	/*object-fit: contain;*/
	
}

.backface-on {
  -webkit-backface-visibility: visible;
     -moz-backface-visibility: visible;
          backface-visibility: visible;
}



/*
.go {
  display: block;
  margin: 0 auto 20px;
  padding:10px 30px;
  font-size: 20px;
  cursor: pointer;
}
*/

label.slo {
  cursor: pointer;
  display: inline-block;
  width: 45%;
  text-align: center;
}

.tilted {
  transform: rotateY(45deg);
}

/*=====*/
.spin-0     { transform: rotateX(-3719deg); }
.spin-1     { transform: rotateX(-3749deg); }
.spin-2     { transform: rotateX(-3779deg); }
.spin-3     { transform: rotateX(-3809deg); }
.spin-4     { transform: rotateX(-3839deg); }
.spin-5     { transform: rotateX(-3869deg); }
.spin-6     { transform: rotateX(-3899deg); }
.spin-7     { transform: rotateX(-3929deg); }
.spin-8     { transform: rotateX(-3959deg); }
.spin-9     { transform: rotateX(-3989deg); }
.spin-10    { transform: rotateX(-4019deg); }
.spin-11    { transform: rotateX(-4049deg); }
/*=====*/
@keyframes back-spin {
    /*0%    { transform: rotateX(0deg); }*/
    100%  { transform: rotateX(30deg); }
}
@keyframes tiltin {
    0%    { transform: rotateY(0deg);}
    50%   { transform: rotateY(0deg);}
    100%  { transform: rotateY(45deg);}
}
@keyframes tiltout {
    0%    { transform: rotateY(45deg);}
    100%  { transform: rotateY(0deg);}
}

@keyframes spin-0 {
    0%    { transform: rotateX(30deg); }
    100%  { transform: rotateX(-3719deg); }
}
@keyframes spin-1 {
    0%    { transform: rotateX(30deg); }
    100%  { transform: rotateX(-3749deg); }
}
@keyframes spin-2 {
    0%    { transform: rotateX(30deg); }
    100%  { transform: rotateX(-3779deg); }
}
@keyframes spin-3 {
    0%    { transform: rotateX(30deg); }
    100%  { transform: rotateX(-3809deg); }
}
@keyframes spin-4 {
    0%    { transform: rotateX(30deg); }
    100%  { transform: rotateX(-3839deg); }
}
@keyframes spin-5 {
    0%    { transform: rotateX(30deg); }
    100%  { transform: rotateX(-3869deg); }
}
@keyframes spin-6 {
    0%    { transform: rotateX(30deg); }
    100%  { transform: rotateX(-3899deg); }
}
@keyframes spin-7 {
    0%    { transform: rotateX(30deg); }
    100%  { transform: rotateX(-3929deg); }
}
@keyframes spin-8 {
    0%    { transform: rotateX(30deg); }
    100%  { transform: rotateX(-3959deg); }
}
@keyframes spin-9 {
    0%    { transform: rotateX(30deg); }
    100%  { transform: rotateX(-3989deg); }
}
@keyframes spin-10 {
    0%    { transform: rotateX(30deg); }
    100%  { transform: rotateX(-4019deg); }
}
@keyframes spin-11 {
    0%    { transform: rotateX(30deg); }
    100%  { transform: rotateX(-4049deg); }
}

.spin-text{
   
   vertical-align:middle;
   text-align: center;
   color:inherit;
   text-shadow:  -1px 1px 1px #000,
				  1px 1px 1px #000;
				 
}

.spin-text:hover{
   width:80%;
   heighth:80%;
  
  
  padding-top:10%;	
  color: #ff0;
  text-shadow: -1px 1px 1px #000,
				  1px 1px 1px #000,
				  1px -1px 0 #000,
				 -1px -1px 0 #000;
 
}