/*$icon_width: 79px;
$icon_height: 79px;
$num_icons: 9;*/

.slot_button
{
	display:block;
	margin-top:20px;
}

.slots_frame {
	margin-left:-20px;
	margin-right:-20px;
	margin-top:15px;
	margin-bottom:15px;
}

.slots {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  padding: 23.7px;
  background: rgba(255,255,255,1); /*linear-gradient(45deg, #ffaa00 0%, #ffcc00 100%);*/
  border:0px; /*2px solid rgba(0, 0, 0, 0.3);*/
  /*border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  border-left: 1px solid rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);*/
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3)/*, inset 0px 5px 5px 0px rgb(0 0 0 / 20%), inset 0px -5px 5px 0px rgb(0 0 0 / 20%)*/;
  border-radius: 20px;
}
.slots::before/*, .slots::after*/ {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.3);
	z-index:1;
}
.slots::before {
  left: 0px;
  transform: translate(00%, 0%);
}
/*.slots::after {
  right: 27px;
  transform: translate(200%, -50%);
}*/
@-webkit-keyframes win1 {
  0% {
    background: linear-gradient(45deg, orange 0%, yellow 100%);
    box-shadow: 0 0 80px orange;
  }
  100% {
    background: linear-gradient(45deg, grey 0%, lightgrey 100%);
    box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
  }
}
@keyframes win1 {
  0% {
    background: linear-gradient(45deg, orange 0%, yellow 100%);
    box-shadow: 0 0 80px orange;
  }
  100% {
    background: linear-gradient(45deg, grey 0%, lightgrey 100%);
    box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
  }
}
@-webkit-keyframes win2 {
  0% {
    background: linear-gradient(45deg, lightblue 0%, lightgreen 100%);
    box-shadow: 0 0 80px lightgreen;
  }
  100% {
    background: linear-gradient(45deg, grey 0%, lightgrey 100%);
    box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
  }
}
@keyframes win2 {
  0% {
    background: linear-gradient(45deg, lightblue 0%, lightgreen 100%);
    box-shadow: 0 0 80px lightgreen;
  }
  100% {
    background: linear-gradient(45deg, grey 0%, lightgrey 100%);
    box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
  }
}
.slots.win1 {
  -webkit-animation: win1 200ms steps(2, end) infinite;
          animation: win1 200ms steps(2, end) infinite;
}
.slots.win2 {
  -webkit-animation: win2 200ms steps(2, end) infinite;
          animation: win2 200ms steps(2, end) infinite;
}
.slots .reel {
  position: relative;
  width: 32%;
  height: 237px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color:#f3f1f0;
  border-radius: 3px;
  overflow: hidden;
  background-image: url(slotreel.webp);
  background-position: center 0;
  background-repeat: repeat-y;
}
.slots .reel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4) 100%);
  box-shadow: inset 0 0 6px 2px rgba(0, 0, 0, 0.3);
}
.slots p {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  transform: translate(-50%, calc(100% + 30px));
  text-align: center;
  font-size: 0.8rem;
  color: #444;
}
.slots p a {
  color: red;
  font-weight: 700;
}