.box-spin {
	background: url(img/bg.png) no-repeat center;
	background-size: 100% 100%;
	width: 100%;
	height: 425px;
	aspect-ratio: 1/1;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	padding: 2px;
	margin-bottom: 10px;
	border: 0px solid #E29E53;
	border-radius: 5px;
	position: relative;
	display: block;
}
.box-item-spin {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
.item-spin {
	background: url(img/item_off.png) no-repeat center center;
	background-size: 100% 100%;
	aspect-ratio: 1 / 1;
	height: 25%;
	margin: 0px;
	display: inline-block;
	border: 0px solid #17C2EB;
	border-radius: 0px;
}
.item-spin img {
	background-size: display;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 5px;
	border: none;
	border-radius: 0px;
}
.spin_on {	
	background: url(img/item_on.png) no-repeat center center;
	background-size: 100% 100%;
	border: 0px solid #fff;
}
.spin_on img {
	opacity: 0.5;
}
.item-spin-jarak {
	margin-left: 10px;
	margin-right: 10px;
}
.itemoff {
	background-size: display;
	aspect-ratio: 1 / 1;
	height: 20%;
	margin: 2px;
	display: inline-block;
	border: 0px solid #17C2EB;
	border-radius: 0px;
}
.item-spin-top {
	margin-bottom: -22px;
	margin-top: 3px;
}
.item-spin-bottom {
	margin-top: -10px;
}
.item-spin-left {
	display: inline-block;
	padding-left: 0px;
	animation-name: fadeInLeft;
	animation: fadeInLeft 1s;
}
.item-spin-center {
	display: inline-block;
}
.item-spin-right {
	display: inline-block;
	padding-right: 0px;
	animation-name: fadeInRight;
	animation: fadeInRight 1s;
}

.item-selected {	
	background-size: 100% 100%;
	width: 33%;
	height:auto;
	margin-top: -60px;	
	position: absolute;
	left: 0;
	right: 0;
	float: center;
	margin-inline: auto;	
}
.item-selected img {	
	width: 100%;
	height:auto;
}
.item-button {
	background: url(img/btn_spin.png) no-repeat center;
	background-size: 100% 100%;
	width: 33%;
	height: auto;
	aspect-ratio: 1/1;
	margin: 7px;
	margin-top: -70px;
	padding-top: 0px;
	font-size: 14px;
	margin-bottom: 1px;
	font-family: DINM;
	color: #000;
	position: absolute;
	left: 0;
	right: 0;
	float: center;
	margin-inline: auto;
	animation: 
	  fade 1s forwards,
	  bounce .9s infinite alternate;
	animation-play-state: running;
}
.item-button img {
	background-size: display;
	width: 100%;
	height: 44px;
}

@keyframes bounce {
	to {
		transform: scale(1.1);
	}
}
@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}
.box-ganteng {
	box-sizing: border-box;
}
@keyframes fadeInLeft {
   0% {
      opacity: 0;
      transform: translateX(-20px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}
@keyframes fadeInRight {
   0% {
      opacity: 0;
      transform: translateX(20px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}
.goodluck {
	width: 35%;
	height: 40px;
	margin: 7px;
	margin-top: 20px;
	padding-top: 9px;
	font-size: 14px;
	margin-bottom: 1px;
	color: #fff;
	font-family: DINM;
	animation: bounce .9s infinite alternate;
	animation-play-state: running;
}
.border-hadiah {
	background: url(img/item_on.png) no-repeat center;
	background-size: 100% 100%;
	--stroke-pos: 1px;
	--stroke-neg: -1px;
	--stroke-color: rgba(255, 255, 255, 0.2);
	filter: drop-shadow(var(--stroke-pos) 0 0 var(--stroke-color)) drop-shadow(var(--stroke-neg) 0 var(--stroke-color)) drop-shadow(0 var(--stroke-pos) 0 var(--stroke-color)) drop-shadow(0 var(--stroke-neg) 0 var(--stroke-color)) drop-shadow(var(--stroke-pos) var(--stroke-pos) 0 var(--stroke-color)) drop-shadow(var(--stroke-pos) var(--stroke-neg) 0 var(--stroke-color)) drop-shadow(var(--stroke-neg) var(--stroke-pos) 0 var(--stroke-color)) drop-shadow(var(--stroke-neg) var(--stroke-neg) 0 var(--stroke-color));
}
@-webkit-keyframes blinker {
	from {
		opacity: 1.0;
	}

	to {
		opacity: 0.0;
	}
}
.blink {
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: alternate;
}
.border-item {
	-webkit-filter: drop-shadow(1.5px 1px 0 #DD3183) drop-shadow(-1px 1px 0 #DD3183);
	filter: drop-shadow(1.5px 1px 0 #DD3183) drop-shadow(-1px 1px 0 #DD3183);
}
.border-item-stop {
	-webkit-filter: drop-shadow(1.5px 1px 0 #DD3183) drop-shadow(-1px 1px 0 #DD3183);
	filter: drop-shadow(1.5px 1px 0 #DD3183) drop-shadow(-1px 1px 0 #DD3183);
}
.box-shadow {
	background: url(img/item_on.png) no-repeat center;
	background-size: 100% 100%;
	--stroke-pos: 1px;
	--stroke-neg: -1px;
	--stroke-color: rgba(255, 255, 255, 0.2);
	filter: drop-shadow(var(--stroke-pos) 0 0 var(--stroke-color)) drop-shadow(var(--stroke-neg) 0 var(--stroke-color)) drop-shadow(0 var(--stroke-pos) 0 var(--stroke-color)) drop-shadow(0 var(--stroke-neg) 0 var(--stroke-color)) drop-shadow(var(--stroke-pos) var(--stroke-pos) 0 var(--stroke-color)) drop-shadow(var(--stroke-pos) var(--stroke-neg) 0 var(--stroke-color)) drop-shadow(var(--stroke-neg) var(--stroke-pos) 0 var(--stroke-color)) drop-shadow(var(--stroke-neg) var(--stroke-neg) 0 var(--stroke-color));
}
.item-shadow img {
	-webkit-filter: drop-shadow(1.5px 1px 0 #ff000000) drop-shadow(-1px 1px 0 #ff000000);
	filter: drop-shadow(1.5px 1px 0 #ff000000) drop-shadow(-1px 1px 0 #ff000000);
}

@media only screen and (min-width: 300px) and (max-width: 387px) {

	.box-spin {
		width: 100%;
		height: 310px;
	}
	
	.itemoff {
		height: 24%;
		margin: 0px;
		
	}

	.item-spin {
		margin: 0px;
		height: 24%;	
		
	}

	.item-spin img {
		width: 100%;
		margin-top: 0px;
		padding:3px;	
	}

	.item-spin-top {
		margin-bottom: -10px;
		margin-top: 0px;
	}

	.item-spin-bottom {
		margin-top: -10px;
	}

	.item-spin-left {
		display: inline-block;
		padding-left: 0px;
	}

	.item-spin-center {
		display: inline-block;
	}

	.item-spin-right {
		display: inline-block;
		padding-right: 0px;
	}

	.item-custom span {
		font-size: 14px;
	}

	.item-custom img {
		width: 20px;
		height: 20px;
	}

	.item-button {
	margin-top: -60px;
    }


}

@media only screen and (min-width: 388px) and (max-width: 600px) {

    .box-spin {				
		height: 390px;		
	}
	
	.item-spin {
		margin: 3px;
		height: 25%;
	}

	.item-spin img {
		width: 100%;		
	}

	.item-spin-top {
		margin-bottom: -20px;
		margin-top: 3px;
	}

	.item-spin-bottom {
		margin-top: -20px;
	}

	.item-spin-left {		
		padding-left: 0px;
	}

	.item-spin-center {
		display: inline-block;
	}

	.item-spin-right {		
		padding-right: 0px;
	}

	.item-button {
		width: 35%;
		height: auto;
	}
	
}
?>