.sisal .element-slot{
	max-height: 440px;
  overflow: hidden;
  text-align: center;
}

.sisal .row-slot .element-slot .wrapper {
  height:440px;
  border: solid 1px #000; /* necessario, non so perché ma altrimenti l'animazione scatta (probabilmente qualcosa si disallinea) */
}

.sisal .row-slot .element-slot .wrapper > div {
	height:135px;
}

.sisal .row-slot .element-slot .wrapper .slotMachineContainer > div {
	margin: 0 auto !important;
	height:135px;
}

.sisal .row-slot .element-slot .wrapper .slotMachineContainer{
	padding-top: 135px;
}




.heartbeat{
	animation: heartbeat 1s infinite;
}

@keyframes heartbeat
{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}


a.spin{
  background-image: url('../images/spin_off.png?v=2');
}
a.spin:active{
  background-image: url('../images/spin_on.png?v=2');
}

a.take{
  background-image: url('../images/take_off.png?v=2');
}
a.take:active{
  background-image: url('../images/take_on.png?v=2');
}

.hidden{
  display: none;
}

.sisal .spin:active .holdon,
.sisal .take:active .holdon{
  margin-top:42px;
}

@media (max-width: 1023px) {

	.sisal .row-slot .element-slot .wrapper > div {
		height: 17.9vw;
	}
	
	.sisal .row-slot .element-slot .wrapper {
    	height: 51vw;
	}

}

@media (max-width: 767px) {

	.sisal .row-slot .element-slot .wrapper > div {
		height: 18.2vw;
	}

}