body#studio-bg {background:url(./images/bg.jpg) center center no-repeat;background-size: cover; padding: 0; margin: 0;min-height: 100vh;}
.fortune-wheel {text-align: center;position: relative;display: flex;justify-content: center;}
.fortune-wheel .fortune-container .wheel { position: relative; }
.fortune-wheel .fortune-container .wheel img { width: 100%; }
.fortune-wheel .fortune-container .wheel .outer-wheel, .fortune-wheel .fortune-container .wheel .inner-wheel, .fortune-wheel .fortune-container .wheel .happy-skin { position: absolute;left: 0;top: 0; }
.fortune-wheel .fortune-container .wheel .happy-skin {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.fortune-wheel .fortune-container .wheel .happy-skin.active {-webkit-animation-name: bounceIn;animation-name: bounceIn;}
.fortune-wheel .fortune-container .wheel .wheel-pointer { position: absolute;left: 0;right: 0;margin: auto; }


@-webkit-keyframes bounceIn {
	from, 20%, 40%, 60%, 80%, to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		-webkit-transform: scale3d(.97, .97, .97);
		transform: scale3d(.97, .97, .97);
	}

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

@keyframes bounceIn {
	from, 20%, 40%, 60%, 80%, to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		-webkit-transform: scale3d(.97, .97, .97);
		transform: scale3d(.97, .97, .97);
	}

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

.fortune-wheel .fortune-container .happy-result { position: absolute;top: 0;height: 100%;overflow: hidden; }
.fortune-wheel.mobile .fortune-container .happy-result {position: relative;}
.fortune-wheel.mobile .fortune-container .happy-result img {width: 100%;}
.fortune-wheel .fortune-container .happy-result {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.fortune-wheel .fortune-container .happy-result.active {-webkit-animation-name: fadeIn;animation-name: fadeIn;}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}