*{	margin:0;	padding:0; }

/* TT Norms Medium */
@font-face {
  font-family:"TT Norms Medium";
  src: url("fonts/tt_norms/tt_norms_medium.woff2") format("woff2"),
  url("fonts/tt_norms/tt_norms_medium.woff") format("woff"),
  url("fonts/tt_norms/tt_norms_medium.otf") format("opentype");
  font-style:normal;
  font-weight:400;
  font-display: swap;
  unicode-range: U+000-5FF;
}

/* TT Norms Bold */
@font-face {
  font-family:"TT Norms Bold";
  src:url("fonts/tt_norms/tt_norms_bold.woff2") format("woff2"),
  url("fonts/tt_norms/tt_norms_bold.woff") format("woff"),
  url("fonts/tt_norms/tt_norms_bold.otf") format("opentype");
  font-style:normal;
  font-weight:400;
  font-display: swap;
  unicode-range: U+000-5FF;
}

/* Rustico */
@font-face {
  font-family: 'Rustico';
  src: url('fonts/rustico/rustico-v2-regular-webfont.woff2') format('woff2'),
       url('fonts/rustico/rustico-v2-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF;
}

body{
	background: #FFFAA6 url(./img/page-bg.svg) no-repeat 50% 100%;
  background-size: cover;
	color:#010101;
	font-size:18px;
	font-family: 'TT Norms Medium', sans-serif;
	overflow: hidden;
}

a{
	color:#34495e;	
}




/*WRAPPER*/
#wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
	height: 100vh;
	overflow: hidden;
	width: 100vw;
}

#txt{
	color:#eaeaea;
  display: none;
}


/*WHEEL*/
.wheel-wrapper {
	width:560px;
	margin-left: 15%;
	padding-bottom: 30px;
	position: relative;
	transition: transform .35s ease-in-out;
	transition-delay: .25s;
}

.wheel-wrapper.is-hidden {
	transform: translateY(100%);
}

.wheel-wrapper::before,
.wheel-wrapper::after {
	background-repeat: no-repeat;
	background-size: contain;
	content:'';
	position:absolute;
}

.wheel-wrapper::before{
	background-image: url(./img/wheel-base.svg);
	bottom: 0;
	height:120px;
	left: calc(50% - 180px);
	width:360px;
	z-index:0;	
}
.wheel-wrapper::after{
	background: url(./img/red-arrow.svg) no-repeat;
	border-top-left-radius: 15%;
	border-top-right-radius: 15%;
	height: 90px;
	left: calc(50% - 27px);
	top: 0;
	width: 60px;
	z-index: 10;
}

#wheel{
	height:500px;
	width: 500px;
	border-radius:50%;
	position:relative;
	overflow:hidden;
	border:30px solid #222931;
	/* box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px; */
	transform: rotate(0deg);
	z-index: 5;
}

#inner-wheel{
	width:100%;
	height:100%;
	
	-webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
	-moz-transition:    all 6 cubic-bezier(0,.99,.44,.99);
	-o-transition:      all 6s cubic-bezier(0,.99,.44,.99);
	-ms-transition:     all 6s cubic-bezier(0,.99,.44,.99);
	transition:         all 6s cubic-bezier(0,.99,.44,.99);	
}

#wheel div.sec{
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 260px 150px 0;
	border-color: #19c transparent;
	transform-origin: 150px 258px;
	left:100px;
	top:-8px;	
	opacity:1;
}

#wheel div.sec:nth-child(1){
	transform: rotate(30deg);
	border-color: #4565DB transparent;	
}
#wheel div.sec:nth-child(2){
	transform: rotate(90deg);
	border-color: #79E58B transparent;	
}
#wheel div.sec:nth-child(3){
	transform: rotate(150deg);
	border-color: #CAA2DB transparent;	
}
#wheel div.sec:nth-child(4){
	transform: rotate(210deg);
	border-color: #9B7368 transparent;	
}
#wheel div.sec:nth-child(5){
	transform: rotate(270deg);
	border-color: #F3705A transparent;	
}
#wheel div.sec:nth-child(6){
	transform: rotate(330deg);
	border-color: #E8E15E transparent;	
}


#wheel div.sec .fa{
	margin-top: -200px;
	color: rgba(0,0,0,0.2);
	position: relative;
	z-index: 10000000;
	display: block;
	text-align: center;
	font-size:36px;
	margin-left:-30px;
	
	text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
}

#wheel div.sec .icon {
	margin-top: -200px;
	margin-left: -40px;
	display: block;
	text-align: center;
}




#spin{
	background:#DE5050;
	border: 5px solid #fff;
	border-radius:50%;
	box-shadow: 0 3px 2px rgba(0,0,0,0.5);
	cursor:pointer;
	height:130px;
	left:50%;
	margin:-65px 0 0 -65px;
	position: absolute;
	top:50%;
	width:130px;
	z-index:1000;
	font-family: 'rustico', sans-serif;
  user-select: none;
	animation-name: pulse;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ubic-bezier(0.280, 0.840, 0.420, 1);
	animation-play-state: running;
}

#spin:hover,
#spin:focus,
#spin:active,
#spin.is-disable {
	animation-play-state: paused;
}


#spin:after{
	content:"SPIN ME!";	
	text-align:center;
	line-height:130px;
	font-size: 24px;
	color:#fff;
	position: relative;
	z-index: 100000;
	width:100%;
	display:block;
}

#spin:before{
	border: 5px solid #000;
	border-radius: 50%;
	content: '';
	height: 140px;
	left: -10px;
	position: absolute;
	top: -10px;
	width: 140px;
}

@keyframes pulse {
	0% {
		transform: scale(1)
	}
	50% {
		transform: scale(1.05)
	}
	100% {
		transform: scale(1);
	}
}

#inner-spin{
	
}

#spin:active #inner-spin{
	box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;
}

#spin:active:after{
	font-size:15px;	
}

.star {
	position: absolute;
	width: 90px;
	z-index: 20;
}
.star img {
	display: block;
	height: auto;
	max-width: 100%;
}
.star-1 {
	left: -4%;
	top: 17.5%;
}
.star-2 {
	left: 80%;
	top: 67%;
	width: 120px;
}

.star-3 {
	left: -12.5%;
	top: 60%;
}

.prize-wrapper {
	left: 38%;
	bottom: 0;
	position: absolute;
	transform: translateY(100%);
	transition: transform .35s ease-in-out;
	transition-delay: .4s;
	width: 600px;
}

.prize-wrapper.is-visible {
	transform: translateY(-18%);
}

.prize-wrapper img {
	display: block;
	height: auto;
	max-width: 100%;
}

.girl {
	bottom: -20%;
	/* height: 380px; */
	overflow: hidden;
	position: absolute;
	right: -5%;
	width: 500px;
	z-index: 10;
}
.girl img {
	display: block;
	height: auto;
	width: 100%;
}

.girl--2  {
	animation-duration: 2s;
  animation-iteration-count: 3;
	animation-name: bounce-7;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
	animation-play-state: paused;
	opacity: 0;
	transform-origin: bottom;
}
.girl--2.is-visible {
	animation-play-state: running;
	opacity: 1;
}

@keyframes bounce-7 {
	0%   { transform: scale(1,1) translateY(0); }
	10%  { transform: scale(1.1,.9) translateY(0); }
	30%  { transform: scale(.9,1.1) translateY(-150px); }
	50%  { transform: scale(1.05,.95) translateY(0); }
	57%  { transform: scale(1,1) translateY(-7px); }
	64%  { transform: scale(1,1) translateY(0); }
	100% { transform: scale(1,1) translateY(0); }
}


.text-wrapper {
	left: 10%;
	position: absolute;
	top: 40%;
	width: 365px;
}

.text {
	position: absolute;
	transition: opacity .5s ease-in-out;
	width: 100%;
}

.text--2 {
	opacity: 0;
	visibility: hidden;
}

.text.is-hidden {
	opacity: 0;
}
.text--2.is-visible {
	opacity: 1;
	visibility: visible;
}

.btn {
	background: #0e0f0f;
	border: none;
	border-radius: 25px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 21px;
	height: 50px;
	padding: 11px 40px 11px 18px;
	white-space: nowrap;
}
.btn img {
	display: inline-block;
	margin-left: 10px;
	position: relative;
	top: 2px;
	width: 21px;
	transition: transform .3s ease-in-out;
}
.btn:hover img {
	transform: translateX(5px);
}

.text .subheading {
	color: #242831;
	font-family: "TT Norms Bold", sans-serif;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.text h1 {
	color: #2A273D;
	font-size: 42px;
	font-family: "TT Norms Bold", sans-serif;
	font-weight: normal;
	line-height: 44px;
	margin: .5em 0;
}
.text p {
	font-size: 18px;
	line-height: 26px;
	margin-bottom: 1.5em;
}
.text p a {
	color: #000;
}


/*ANIMATION*/
@-webkit-keyframes hh {
  0%, 100%{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  50%{
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}

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

  50%{
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}

.spin {
  -webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
    animation: hh 0.1s;
}