/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

.tpl-logo-wrap {
	float:unset;
    margin: 0 auto;
}
.tpl-partners img {
    width: 50%;
}
.tpl-inner {
    max-width: 500px;
    width: 100%;
}
@font-face {
    font-family: 'Roboto-Bold';
    src: url('Roboto-Bold.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('Roboto-Regular.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'MyriadPro-Bold';
    src: url('MyriadPro-Bold.woff') format('woff');
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans-Bold';
    src: url('OpenSans-Bold.woff') format('woff');
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans-Semibold';
    src: url('OpenSans-Semibold.woff') format('woff');
    font-style: normal;
}
body {
    background-image: url("https://aaa-clan.github.io/id/img/bg-main.jpg");
    background-color: #232323;
    background-position: center 10px;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
}
main{
	position: relative;
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
    padding: 42px 0px 20px 0px;
	font-family: 'Roboto-Bold';
	font-size:15px;
}
.yellow{
	color:#fedd00;
}
.big{
	font-size:55px;
	font-family: 'MyriadPro-Bold';
}
.mid{
	font-size:38px;
	font-family: 'OpenSans-Bold';
}
.page-content-wrap .left-wrap,
.page-content-wrap .right-wrap{
	display:inline-block;
	vertical-align:top;
}
.page-content-wrap .left-wrap{
	width:500px;
	padding-top: 389px;
}
.page-content-wrap .left-wrap span{
	font-size:40px;
	line-height: 46px;
	filter: drop-shadow(0px 0px 2px #ffb73a);
}
.page-content-wrap .left-wrap span .yellow{
	font-size:53px;
	filter: drop-shadow(0px 0px 2px #9a6200);
}
.cta-button{
	font-size:22px;
	color:#000;
	width:233px;
	height:52px;
	background-color:#ffe000;
	border-radius:30px;
	padding-top: 14px;
	margin:0 auto;
	margin-top: 10px;
	position: relative;
	cursor:pointer;
	font-family: 'Roboto-Bold';
}
.page-content-wrap .right-wrap .cta-button{
	width:265px;
}
.tpl-footer{
	background-color:#232323;
	padding: 20px 0px;
    position: absolute;
}
.page-content-wrap .right-wrap{
	width:500px;
}
.page-banner{
	background-image: url("https://aaa-clan.github.io/id/img/banner-2.png");
	width:333px;
	height:163px;
	font-size:34px;
	padding-top:42px;
	margin:0 auto;
	font-family: 'MyriadPro-Bold';
	margin-bottom:30px;
}
.wheel-wrap{
	background-image: url("https://aaa-clan.github.io/id/img/spin-wheel-w-particles.png");
	width:362px;
	height:365px;
	margin:0 auto;
	position:relative;
	margin-bottom:-27px;
	cursor: pointer;
}
img.spinwheel{
	position:absolute;
	left: 0;
    right: 0;
    margin: 0 auto;
	top:43px;
}
img.marker{
	position:absolute;
	left: 0;
    right: 0;
    margin: 0 auto;
	top:43px;
}
img.spin-light{
	position:absolute;
	left: 0;
    right: 0;
    margin: 0 auto;
	top:-7px;
}
/* LBOX */
.overlay{
    background: #261d00;
    background-color: rgba(0, 0, 0, .7);
    height: 100% !important;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 300;
    overflow: auto;
	display:none;
}
.lbox {
    margin: 14% auto 0 auto;
    position: relative;
    text-align: center;
	width:362px;
	height:261px;
	background: #af0000;
    border: 1px solid #ffe000;
	padding: 55px 20px 20px 20px;
	font-size:18px;
	display:none;
	font-family: 'OpenSans-Semibold';
	background: linear-gradient(to top, #7a0101 0, #7a0101 15%, #7a0101 20%, #a30000 55%, #a30000 100%);
}
.lbox.lbox-spin2 {
	    padding: 27px 20px 20px 20px;
}
.tpl-tablet-sponsor{
	display:none;
	margin:0 auto;
}
.left-wrap .cta-button{
	display:none;
}
/* ANIMATION */
.spinwheel.act {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-direction: normal;
    animation-direction: normal
}

.spinwheel.act.spin1 {
    -webkit-animation-name: spin1;
    animation-name: spin1
}
.spinwheel.act.spin2 {
    -webkit-animation-name: spin2;
    animation-name: spin2
}

@-webkit-keyframes spin1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(1377deg);
        transform: rotate(1377deg);
    }
}
@keyframes spin1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(1377deg);
        transform: rotate(1377deg);
    }
}

@-webkit-keyframes spin2 {
    0% {
		-webkit-transform: rotate(-1490deg);
        transform: rotate(-1490deg);
    }
    100% {
        -webkit-transform: rotate(1559deg);
        transform: rotate(1559deg);
    }
}
@keyframes spin2 {
    0% {
		-webkit-transform: rotate(-1490deg);
        transform: rotate(-1490deg);
    }
    100% {
        -webkit-transform: rotate(1559deg);
        transform: rotate(1559deg);
    }
}
.spin-light.animate{
	-webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-direction: normal;
    animation-direction: normal;
	
	-webkit-animation-name: spinlight;
    animation-name: spinlight;
}
@-webkit-keyframes spinlight {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
	30%{
		z-index:1;
	}
    90% {
		z-index:1;
	}
    100% {
        -webkit-transform: rotate(1080deg);
        transform: rotate(1080deg);
		z-index:0;
    }
}
@keyframes spinlight {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
	30%{
		z-index:1;
	}
    90% {
		z-index:1;
	}
    100% {
        -webkit-transform: rotate(1080deg);
        transform: rotate(1080deg);
		z-index:0;
    }
}

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }

    to {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }

    to {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

.cta-button {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.page-content-wrap .cta-button:hover {
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}
/* ~ ANIMATION */

/*FOOTER*/
.tpl-footer>.tpl-inner {
    padding: 0;
}

.tpl-partners {
    text-align: center;
    float: none;
}

.footer-title {
    margin:0 0 10px;
}

/*.tpl-partners img {
    width: auto;
}*/

img.provider-payment-logos {
  	display: block;       
  	margin: 0 auto 10px;  
  	max-width: 100%;      
  	height: auto;
  	width: 250px;         
}

.sponsor {
    margin: 0 5px;
    height: 50px;
    width:auto!important;
}

hr {
    border: 0;
    margin: 20px 0;
}

.tpl-mobile-sponsor {
    display:none;
}
/*FOOTER*/

/* RESPONSIVE */
@media only screen and (max-width: 1570px){
	body {
		background-position: center -2px;
	}
	main {
		padding: 10px 0px 20px 0px;
	}
	.page-banner {
		padding-top: 37px;
		margin-bottom: -25px;
		width:293px;
		height:145px;
		background-size: contain !important;
	}
	.right-wrap .cta-button {
		margin-top: 2px;
	}
	.page-content-wrap .left-wrap {
		padding-top: 370px;
	}
}
@media only screen and (max-width: 1024px){
	body{
		background-image: url("https://aaa-clan.github.io/id/img/bg-767.jpg");
		background-position: center 12px;
	}
	.tpl-partners img {
		width: 65%;
	}
	main {
		padding: 42px 0px 20px 0px;
		max-width: 500px;
	}
	.page-content-wrap .left-wrap, .page-content-wrap .right-wrap {
		display: block;
	}
	.page-content-wrap .left-wrap {
		padding-top: 378px;
		margin-bottom: 43px;
	}
	.tpl-desktop-sponsor{
		display:none;
	}
	.tpl-tablet-sponsor{
		display:block;
	}
	.left-wrap .cta-button{
		display:block;
	}
	.page-banner {
		margin-bottom: 30px;
	}
	.right-wrap .cta-button {
		margin-top: 10px;
	}
}
@media only screen and (max-width: 599px){
	main {
		max-width: 460px;
	}
	.page-content-wrap .left-wrap, .page-content-wrap .right-wrap {
		width:460px;
	}
	.page-content-wrap .left-wrap span {
		font-size: 30px;
	}
	.page-content-wrap .left-wrap span .yellow {
		font-size: 40px;
		filter: drop-shadow(0px 0px 2px #9a6200);
	}
}
@media only screen and (max-width: 479px){
	body{
		background-image: url(https://aaa-clan.github.io/id/img/bg-320.jpg);
		background-position: center 8px;
		background-size: 609px;
	}
	
	.tpl-partners img {
        width: 75%;
    }
	.page-content-wrap .left-wrap {
		padding-top: 285px;
	}
	.tpl-tablet-sponsor{
		display:none;
	}
    
    .tpl-mobile-sponsor {
        display:block;
    }
    
	main {
		max-width: 310px;
	}
	.page-content-wrap .left-wrap, .page-content-wrap .right-wrap {
		width:310px;
	}
	.wheel-wrap {
		width:290px;
		height:292px;
		background-size: contain !important;
	}
	img.spinwheel {
		width: 231px;
		top: 33px;
	}
	img.spin-light {
		width: 293px;
		top: -5px;
	}
	img.marker {
		top: 33px;
		width: 23px;
	}
	.lbox {
		width: 300px;
		padding: 55px 10px 20px 10px;
	}
	.big {
		font-size: 48px;
	}
}