@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700;900&display=swap');
body{
	background: url('../img/Background.jpg') center center no-repeat; 
	background-size:cover;
	background-attachment:fixed;
	font-family: arial;
	font-family: 'Nunito', sans-serif;
	-webkit-backface-visibility: hidden;
}
.the_wheel{
	position:relative;
	background-image: url('../img/bg-spin-1.gif');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding:31px;
	z-index:-1;
}
.the_wheel::before {
    content: "";
    position: absolute;
    box-shadow: inset 0 0 31px #000000;
    z-index: 1;
    width: 88%;
    height: 88%;
    border-radius: 50%;
}
.the_wheel img#pointer{z-index:3;}
.the_wheel canvas#spinWheel{max-width:100%; }
.skb ul{
	padding-top: .5rem;
	padding-bottom: .5rem;
	padding-left:31px;
	background:#ececec;
	color:#343a40!important;
}
h1, p{margin: 0;}
#formdata h4{
	text-shadow:1px 2px 1px #000;
}
.drop {
	background: linear-gradient(to bottom, #967e05 5%, #faa20a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #967e05), color-stop(1, #faa20a));
	background: -moz-linear-gradient(top, #967e05 0%, #faa20a 100%);
	position: relative;
	width:20px;
	height:20px;
	border-radius:50%;
	position: absolute;
	bottom:0px;
	-webkit-animation: fall 1s linear infinite;
	-moz-animation: fall 1s linear infinite;
	z-index:99;
}
.drop:before {
	position: absolute;
	content: "Rp";
	font-size:10px;
	width:20px;
	height:20px;	
	margin-left:4px;
	margin-top:3px;
}
.rounded-start{
	border-start-end-radius:0rem !important;
	border-end-end-radius:0rem !important;
}
.rounded-end{
	border-start-start-radius:0rem !important;
	border-end-start-radius:0rem !important;
}
.bt-red {
	box-shadow: 3px 4px 0px 0px #8a2a21;
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	background-color:#c62d1f;
	border-radius:18px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.bt-red:hover {
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	background-color:#f24437;
}
.bg-orange {
	background:linear-gradient(to bottom, #ff8c00 5%, #b26200 100%);
	background-color:#ff8c00;
}

.bt-red:active {
	position:relative;
		top:1px;
}
.bg-gold{
	background: -webkit-linear-gradient(top, #8f6B29, #c59504, #DF9F28) !important;
	background: linear-gradient(top, #8f6B29, #765800, #DF9F28) !important;
}
.bt-gold{
	background: -webkit-linear-gradient(top, #8f6B29, #765800, #DF9F28) !important;
	background: linear-gradient(top, #8f6B29, #765800, #DF9F28) !important;
}
.bt-red:active {
	position:relative;
	top:1px;
}
.bt-gold{
	background: -webkit-linear-gradient(top, #8f6B29, #765800, #DF9F28) !important;
	background: linear-gradient(top, #8f6B29, #765800, #DF9F28) !important;
}
.bt-gold:hover{
	background: -webkit-linear-gradient(top, #DF9F28, #765800, #8f6B29) !important;
	background: linear-gradient(top, #DF9F28, #765800, #8f6B29) !important;
}
@-webkit-keyframes fall {to {margin-top:120px;}}
@-moz-keyframes fall {to {margin-top:120px;}}
.mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {opacity: 1;}
.mfp-with-zoom.mfp-ready.mfp-bg {opacity: 0.8;}
.mfp-with-zoom.mfp-removing .mfp-container,.mfp-with-zoom.mfp-removing.mfp-bg {opacity: 0;}
.mfp-no-margins img.mfp-img {padding: 0;}
.mfp-no-margins .mfp-container {padding: 0;}
.mfp-figure:after{box-shadow:none !important; background: transparent !important;}
.mfp-title{text-align: center !important; font-size:5vw; font-weight:700; line-height: 40px !important;padding-right:0px !important;}
@media (max-width: 320px){
	.the_wheel{padding:15px;}
	.the_wheel img#pointer{width:8vw !important; z-index:3;}
}
@media (min-width: 321px) and (max-width: 424px){
	.the_wheel{padding:19px;}
	.the_wheel img#pointer{width:8vw !important; z-index:3;}
}
@media (min-width: 425px) and (max-width: 480px){
	.the_wheel{padding:22px;}
	.the_wheel img#pointer{width:9vw !important; z-index:3;}
}
@media (min-width: 481px) and (max-width: 767px){
	.the_wheel img#pointer{width:7vw !important;}
}
@media (min-width: 768px) and (max-width: 985px){
	.the_wheel img#pointer{width:6vw !important; z-index:3;}
}