@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");

* {
	margin: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}

img {
	width: 100%;
	display: block;
}

a {
	text-decoration: none;
}

html {
	height: 100%;
}

body {
	background-color: #e7f2ee;
	background-image: url(../images/bg-m.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;
	height: 100%;
}

@-webkit-keyframes mmfadeIn {
	0% {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mmfadeIn {
	0% {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@-webkit-keyframes mmfadeOut {
	0% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes mmfadeOut {
	0% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@-webkit-keyframes mmslideIn {
	0% {
		transform: translateY(15%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes mmslideIn {
	0% {
		transform: translateY(15%);
	}

	to {
		transform: translateY(0);
	}
}

@-webkit-keyframes mmslideOut {
	0% {
		transform: translateY(0);
	}

	to {
		transform: translateY(-10%);
	}
}

@keyframes mmslideOut {
	0% {
		transform: translateY(0);
	}

	to {
		transform: translateY(-10%);
	}
}

.micromodal-slide {
	display: none;
}

.micromodal-slide.is-open {
	display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
	animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
	animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
	animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
	animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
	will-change: transform;
}

.modal__overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #0009;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999999;
	backdrop-filter: blur(2px);
}

.modal__container {
	background: #fff;
	max-height: 95vh;
	border-radius: 10px;
	box-sizing: border-box;
	width: 90%;
	max-width: 600px;
	padding: 20px;
	font-size: 14px;
}

.modal__container ul {
	padding-inline-start: 20px;
}

.modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal__title {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.25;
	color: #00449e;
	box-sizing: border-box;
}

.modal__close {
	width: 28px;
	height: 28px;
	position: absolute;
	top: -8px;
	right: -8px;
	border-radius: 50%;
	border: none;
	background-color: #f27123;
	outline: none;
	cursor: pointer;
	color: #fff;
}

/* .modal__header .modal__close:before {
	content: "\2715";
} */

.modal__content {
	line-height: 1.5;
	color: #000c;
}

.bg-end {
	background-image: url("../images//bg-end-m.jpg");
}

.game-area {
	width: 100%;
	height: 100%;
	margin: auto;
	padding: 25px;
	max-width: 400px;
	position: relative;
	overflow: hidden;
}

.popup {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 90%;
	height: 90%;
	padding: 10px;
	background: #fff;
	border-radius: 10px;
	transform: scale(0);
	transition: transform 200ms ease-out;
}

.popup.show {
	transform: scale(1);
}

.popup-title {
	width: 215px;
	margin: 10px auto;
}

.popup-content {
	overflow: auto;
	max-height: 85%;
	padding-right: 5px;
}

.popup-content::-webkit-scrollbar {
	width: 3px;
}

.popup-content::-webkit-scrollbar-thumb {
	background-color: #119d99;
	border-radius: 3px;
}

.popup-content::-webkit-scrollbar-track {
	background-color: #e7f2ee;
	border-radius: 3px;
}

.popup ul {
	padding-inline-start: 25px;
}

.popup li {
	font-size: 14px;
	line-height: 1.3;
	margin-bottom: 10px;
}

.popup-close {
	position: absolute;
	top: -5px;
	right: -5px;
	background: #119d99;
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	line-height: 1;
	color: #fff;
}

.logo-wrap {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 15px;
	padding: 0 20px;
	justify-content: center;
}

.btn-primary,
.btn-level {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: #f27123;
	border: none;
	border-radius: 12px;
	color: #fff;
	text-align: center;
	padding: 15px 20px;
	font-weight: 700;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
	width: 80%;
	margin: 15px auto;
	cursor: pointer;
}

.btn-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: #fff;
	border: none;
	border-radius: 10px;
	color: #00529c;
	text-align: center;
	padding: 15px 20px;
	font-weight: 700;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
	width: 80%;
	margin: 15px auto;
	cursor: pointer;
}

.arabic-text-start {
	margin-top: 25px;
	display: none;
}

.title {
	width: 80%;
	margin: 0 auto 15px;
}

.btn-level {
	width: 90%;
	margin: 8px auto;
	background-color: #00529c;
	border: solid 3px #fff;
	color: #fff;
}

.btn-level-done {
	background-color: #f27123;
	color: #fff;
	cursor: not-allowed;
}

.btn-level-done::before {
	content: "";
	display: block;
	background-image: url(../images/icon-done.png);
	width: 14px;
	height: 18px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.btn-level-locked {
	background-color: #2daae3;
	color: #00529c;
	cursor: not-allowed;
}

.btn-level-locked::before {
	content: "";
	display: block;
	background-image: url(../images/icon-lock.png);
	width: 11px;
	height: 16px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.7;
}

.question-box {
	background: #fff;
	border-radius: 10px;
}

.answer-box {
	margin: 20px 0;
}

.answer label {
	cursor: pointer;
	display: block;
	background: #00529c;
	border-radius: 14px;
	border: solid 3px #fff;
	width: 90%;
	margin: 10px auto;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
	transition: all 100ms;
}

.answer label:has(input[type="radio"]:checked) {
	background: #f27123;
}

.answer input[type="radio"] {
	display: none;
}

.answer.active {
	background-color: #f49b35;
}

.btn-next {
	background: #f27123;
	color: #fff;
	border: none;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 6px;
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-right: 10px;
	cursor: pointer;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	-webkit-animation: pulse 1000ms infinite;
	-moz-animation: pulse 1000ms infinite;
	-o-animation: pulse 1000ms infinite;
	animation: pulse 1000ms infinite;
}

.btn-next::after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	background-image: url("../images/arrow-right.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.point-box {
	position: relative;
}

.point-wrap {
	position: absolute;
	top: 27%;
	left: 0;
	right: 0;
	margin: auto;
	width: 215px;
	text-align: center;
	color: #00529c;
	font-weight: 700;
}

.point-wrap p {
	margin-bottom: 10px;
}

.point {
	font-size: 36px;
	color: #f27123;
	background: white;
	border-radius: 5px;
	padding: 0 5px;
	display: block;
	width: fit-content;
	margin: 15px auto 0;
}

.point-text {
	width: fit-content;
	position: absolute;
	bottom: 80px;
	text-align: center;
	margin: auto;
	left: 0;
	right: 0;
	font-size: 14px;
	font-weight: 600;
	color: #00529c;
	line-height: 1.5;
}

.share-text {
	font-size: 14px;
	color: #fff;
	text-align: center;
	line-height: 1.5;
	margin-top: 15px;
}

.share-option {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	margin: 15px 0 0;
	gap: 8px;
}

.share-option .item {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	position: relative;
}



.share-cta {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.item .imgbox {
	display: flex;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}

.item .imgbox img {
	filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(318deg) brightness(110%) contrast(101%);
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: none;
}

.copy-link .imgbox::before {
	content: "URL Berhasil disalin";
	position: absolute;
	width: 60px;
	background: #fff;
	color: #00529c;
	padding: 5px;
	border-radius: 3px;
	font-size: 10px;
	text-align: center;
	top: -40px;
	z-index: 1;
	display: none;
}

.copy-link.mini-msg .imgbox::before {
	display: block;
}

.panduan-judul {
	width: 80%;
	margin: auto;
	max-width: 250px;
	margin-bottom: 10px;
}

.btn-redirect,
.btn-refresh {
	font-size: 14px;
	border: 4px solid #fff;
}

.hidden {
	display: none;
}

.logo-jernih-berbagi {
	width: 140px;
}

.logo-client {
	width: 70px;
	display: none;
}


.item .imgbox:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	/* -webkit-filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(318deg) brightness(110%) contrast(101%);
	filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(318deg) brightness(110%) contrast(101%); */
}

.item.facebook .imgbox:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cpath%20d%3D%22M12.7971%2016.3677V12.1083H14.2341L14.4477%2010.4406H12.7971V9.37835C12.7971%208.89711%2012.9312%208.56763%2013.6219%208.56763H14.497V7.0808C14.0712%207.03516%2013.6432%207.01313%2013.215%207.0148C11.9448%207.0148%2011.0728%207.79017%2011.0728%209.2136V10.4375H9.64522V12.1052H11.0759V16.3677H12.7971Z%22%20fill%3D%22%23FBFBFB%22%2F%3E%3C%2Fsvg%3E");
}

.item.line .imgbox:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cpath%20d%3D%22M18.1213%2010.7824C18.1213%207.90514%2015.2368%205.56427%2011.6912%205.56427C8.14553%205.56427%205.26103%207.90514%205.26103%2010.7824C5.26103%2013.3619%207.55127%2015.5226%2010.6383%2015.9306C10.848%2015.9758%2011.1331%2016.0686%2011.2048%2016.2476C11.2699%2016.4104%2011.2476%2016.6653%2011.2259%2016.8292C11.2259%2016.8292%2011.1506%2017.2831%2011.1343%2017.3795C11.106%2017.5422%2011.0047%2018.0153%2011.6912%2017.7266C12.3776%2017.438%2015.3941%2015.5461%2016.743%2013.993C17.6747%2012.9714%2018.1213%2011.9323%2018.1213%2010.7824Z%22%20fill%3D%22%23FBFBFB%22%2F%3E%3Cpath%20d%3D%22M15.9818%2012.444H14.1737C14.1417%2012.444%2014.111%2012.4313%2014.0884%2012.4087C14.0658%2012.3861%2014.0531%2012.3555%2014.0531%2012.3235V9.51794C14.0531%209.48597%2014.0658%209.45531%2014.0884%209.4327C14.111%209.4101%2014.1417%209.3974%2014.1737%209.3974H15.9818C16.0137%209.3974%2016.0444%209.4101%2016.067%209.4327C16.0896%209.45531%2016.1023%209.48597%2016.1023%209.51794V9.97418C16.1023%2010.0061%2016.0896%2010.0368%2016.067%2010.0594C16.0444%2010.082%2016.0137%2010.0947%2015.9818%2010.0947H14.7541V10.5678H15.9818C16.0137%2010.5678%2016.0444%2010.5805%2016.067%2010.6031C16.0896%2010.6257%2016.1023%2010.6564%2016.1023%2010.6884V11.1488C16.1023%2011.1808%2016.0896%2011.2115%2016.067%2011.2341C16.0444%2011.2567%2016.0137%2011.2694%2015.9818%2011.2694H14.7541V11.7431H15.9818C16.0137%2011.7431%2016.0444%2011.7558%2016.067%2011.7784C16.0896%2011.801%2016.1023%2011.8317%2016.1023%2011.8636V12.3193C16.1029%2012.3354%2016.1002%2012.3516%2016.0944%2012.3667C16.0886%2012.3818%2016.0798%2012.3956%2016.0685%2012.4072C16.0573%2012.4189%2016.0438%2012.4281%2016.0289%2012.4345C16.014%2012.4408%2015.9979%2012.444%2015.9818%2012.444Z%22%20fill%3D%22%2301529C%22%2F%3E%3Cpath%20d%3D%22M9.29969%2012.444C9.33166%2012.444%209.36232%2012.4313%209.38493%2012.4087C9.40753%2012.3861%209.42023%2012.3554%209.42023%2012.3235V11.8678C9.42023%2011.8359%209.40753%2011.8052%209.38493%2011.7826C9.36232%2011.76%209.33166%2011.7473%209.29969%2011.7473H8.072V9.51733C8.072%209.48536%208.0593%209.4547%208.0367%209.43209C8.01409%209.40949%207.98343%209.39679%207.95147%209.39679H7.49342C7.46145%209.39679%207.43079%209.40949%207.40818%209.43209C7.38558%209.4547%207.37288%209.48536%207.37288%209.51733V12.3217C7.37288%2012.3536%207.38558%2012.3843%207.40818%2012.4069C7.43079%2012.4295%207.46145%2012.4422%207.49342%2012.4422H9.3015L9.29969%2012.444Z%22%20fill%3D%22%2301529C%22%2F%3E%3Cpath%20d%3D%22M10.387%209.39197H9.93132C9.86341%209.39197%209.80836%209.44701%209.80836%209.51492V12.3211C9.80836%2012.389%209.86341%2012.444%209.93132%2012.444H10.387C10.4549%2012.444%2010.5099%2012.389%2010.5099%2012.3211V9.51492C10.5099%209.44701%2010.4549%209.39197%2010.387%209.39197Z%22%20fill%3D%22%2301529C%22%2F%3E%3Cpath%20d%3D%22M13.4914%209.39197H13.0358C13.0038%209.39197%2012.9732%209.40467%2012.9506%209.42727C12.9279%209.44988%2012.9152%209.48054%2012.9152%209.51251V11.1796L11.6315%209.44561C11.6286%209.44102%2011.6251%209.43677%2011.6213%209.43295L11.614%209.42572L11.6074%209.42029H11.6038L11.5972%209.41547H11.5935L11.5869%209.41186H11.5827H11.5761H11.5718H11.5646H11.5598H11.5526H11.5477H11.5411H11.0764C11.0445%209.41186%2011.0138%209.42456%2010.9912%209.44716C10.9686%209.46977%2010.9559%209.50043%2010.9559%209.5324V12.3385C10.9559%2012.3705%2010.9686%2012.4012%2010.9912%2012.4238C11.0138%2012.4464%2011.0445%2012.4591%2011.0764%2012.4591H11.5327C11.5646%2012.4591%2011.5953%2012.4464%2011.6179%2012.4238C11.6405%2012.4012%2011.6532%2012.3705%2011.6532%2012.3385V10.6552L12.9388%2012.391C12.9472%2012.4033%2012.9578%2012.4139%2012.9701%2012.4223L12.9773%2012.4271H12.9809L12.987%2012.4302H12.993H12.9972H13.0057C13.0163%2012.4328%2013.0272%2012.4342%2013.0382%2012.4344H13.4914C13.5234%2012.4344%2013.5541%2012.4217%2013.5767%2012.3991C13.5993%2012.3765%2013.612%2012.3458%2013.612%2012.3138V9.51492C13.6123%209.49889%2013.6094%209.48295%2013.6035%209.46805C13.5976%209.45314%2013.5887%209.43957%2013.5775%209.42812C13.5663%209.41667%2013.5529%209.40758%2013.5381%209.40137C13.5233%209.39516%2013.5075%209.39196%2013.4914%209.39197Z%22%20fill%3D%22%2301529C%22%2F%3E%3C%2Fsvg%3E");
}

.item.telegram .imgbox:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cpath%20d%3D%22M6.27007%2011.0677L13.2341%208.19839C13.9216%207.8995%2016.2529%206.94307%2016.2529%206.94307C16.2529%206.94307%2017.3288%206.52463%2017.2392%207.54084C17.2093%207.95928%2016.9702%209.42382%2016.7311%2011.0079L15.9839%2015.7004C15.9839%2015.7004%2015.9241%2016.3879%2015.416%2016.5074C14.9079%2016.627%2014.071%2016.089%2013.9216%2015.9694C13.802%2015.8798%2011.6799%2014.5348%2010.9028%2013.8772C10.6936%2013.6979%2010.4545%2013.3392%2010.9327%2012.9208C12.0087%2011.9345%2013.2939%2010.709%2014.071%209.93193C14.4297%209.57327%2014.7883%208.73638%2013.2939%209.7526L9.0796%2012.592C9.0796%2012.592%208.60138%2012.8909%207.70472%2012.6219C6.80807%2012.3529%205.76196%2011.9942%205.76196%2011.9942C5.76196%2011.9942%205.04464%2011.5459%206.27007%2011.0677Z%22%20fill%3D%22%23FBFBFB%22%2F%3E%3C%2Fsvg%3E");
}

.item.copy-link .imgbox:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cpath%20d%3D%22M13.7492%209.63533C13.8269%209.71323%2013.8706%209.81878%2013.8706%209.92881C13.8706%2010.0388%2013.8269%2010.1444%2013.7492%2010.2223L10.2222%2013.7493C10.1436%2013.8258%2010.0383%2013.8686%209.92872%2013.8686C9.81909%2013.8686%209.71379%2013.8258%209.63524%2013.7493C9.55752%2013.6714%209.51388%2013.5658%209.51388%2013.4558C9.51388%2013.3458%209.55752%2013.2402%209.63524%2013.1623L13.1622%209.63533C13.2401%209.55762%2013.3457%209.51397%2013.4557%209.51397C13.5658%209.51397%2013.6713%209.55762%2013.7492%209.63533ZM12.2792%2014.0454L10.8092%2015.5102C10.6174%2015.7045%2010.3889%2015.8587%2010.137%2015.964C9.88506%2016.0693%209.61477%2016.1235%209.34175%2016.1235C9.06874%2016.1235%208.79844%2016.0693%208.54654%2015.964C8.29464%2015.8587%208.06616%2015.7045%207.87434%2015.5102C7.48577%2015.1207%207.26755%2014.593%207.26755%2014.0428C7.26755%2013.4926%207.48577%2012.9649%207.87434%2012.5754L9.33916%2011.1053C9.41078%2011.0263%209.44926%2010.9227%209.44664%2010.8161C9.44401%2010.7095%209.40048%2010.6079%209.32505%2010.5325C9.24962%2010.4571%209.14808%2010.4135%209.04144%2010.4109C8.9348%2010.4083%208.83124%2010.4468%208.75219%2010.5184L7.28217%2011.9884C6.73663%2012.5339%206.43015%2013.2739%206.43015%2014.0454C6.43015%2014.8169%206.73663%2015.5568%207.28217%2016.1024C7.82772%2016.6479%208.56764%2016.9544%209.33916%2016.9544C10.1107%2016.9544%2010.8506%2016.6479%2011.3961%2016.1024L12.8662%2014.6323C12.9439%2014.5544%2012.9875%2014.4489%2012.9875%2014.3389C12.9875%2014.2288%2012.9439%2014.1233%2012.8662%2014.0454C12.8279%2014.0063%2012.7823%2013.9752%2012.7319%2013.954C12.6815%2013.9328%2012.6273%2013.9218%2012.5727%2013.9218C12.518%2013.9218%2012.4639%2013.9328%2012.4135%2013.954C12.3631%2013.9752%2012.3174%2014.0063%2012.2792%2014.0454ZM16.1023%207.28227C15.8321%207.01212%2015.5115%206.79783%2015.1585%206.65163C14.8056%206.50543%2014.4273%206.43018%2014.0453%206.43018C13.6633%206.43018%2013.285%206.50543%2012.932%206.65163C12.5791%206.79783%2012.2584%207.01212%2011.9883%207.28227L10.5183%208.75228C10.4467%208.83133%2010.4082%208.93489%2010.4108%209.04153C10.4134%209.14817%2010.457%209.24972%2010.5324%209.32514C10.6078%209.40057%2010.7094%209.4441%2010.816%209.44673C10.9226%209.44936%2011.0262%209.41087%2011.1052%209.33925L12.5753%207.87443C12.7671%207.68015%2012.9956%207.5259%2013.2475%207.42062C13.4994%207.31535%2013.7697%207.26113%2014.0427%207.26113C14.3157%207.26113%2014.586%207.31535%2014.8379%207.42062C15.0898%207.5259%2015.3183%207.68015%2015.5101%207.87443C15.8987%208.26394%2016.1169%208.79166%2016.1169%209.34185C16.1169%209.89203%2015.8987%2010.4198%2015.5101%2010.8093L14.0453%2012.2793C14.0062%2012.3175%2013.9751%2012.3631%2013.9539%2012.4135C13.9327%2012.4639%2013.9217%2012.5181%2013.9217%2012.5728C13.9217%2012.6274%2013.9327%2012.6816%2013.9539%2012.732C13.9751%2012.7824%2014.0062%2012.828%2014.0453%2012.8662C14.0827%2012.9057%2014.1278%2012.9371%2014.1779%2012.9586C14.2279%2012.98%2014.2817%2012.991%2014.3362%2012.9909C14.3913%2012.9908%2014.4459%2012.9797%2014.4967%2012.9583C14.5476%2012.9369%2014.5936%2012.9056%2014.6322%2012.8662L16.1023%2011.3962C16.6466%2010.85%2016.9522%2010.1104%2016.9522%209.33925C16.9522%208.56814%2016.6466%207.82847%2016.1023%207.28227Z%22%20fill%3D%22%23FBFBFB%22%2F%3E%3C%2Fsvg%3E");
}

.item.twitter .imgbox:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cg%20clip-path%3D%22url(%23clip0_924_38)%22%3E%3Cpath%20d%3D%22M12.9317%2011.0506L16.4135%207.01471H15.5885L12.5652%2010.519L10.1505%207.01471H7.36543L11.0169%2012.3139L7.36543%2016.5461H8.19056L11.3832%2012.8455L13.9333%2016.5461H16.7184L12.9315%2011.0506H12.9317ZM11.8016%2012.3606L11.4316%2011.8329L8.48787%207.6341H9.75523L12.1308%2011.0227L12.5008%2011.5503L15.5889%2015.9549H14.3215L11.8016%2012.3608V12.3606Z%22%20fill%3D%22%23FBFBFB%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_924_38%22%3E%3Crect%20width%3D%2210.5221%22%20height%3D%2210.7284%22%20fill%3D%22white%22%20transform%3D%22translate(6.43015%206.32697)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
}

.item.whatsapp .imgbox:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cg%20clip-path%3D%22url(%23clip0_924_43)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.4191%207.96677C14.9338%207.47824%2014.3563%207.09088%2013.7202%206.82712C13.0841%206.56336%2012.402%206.42844%2011.7133%206.43019C8.82576%206.43019%206.47508%208.78029%206.47391%2011.669C6.47391%2012.5923%206.71493%2013.4933%207.17305%2014.2882L6.43015%2017.0024L9.20743%2016.2735C9.97565%2016.6917%2010.8363%2016.911%2011.711%2016.9114H11.7133C14.6003%2016.9114%2016.951%2014.5613%2016.9522%2011.6725C16.9542%2010.9842%2016.8197%2010.3023%2016.5566%209.66621C16.2934%209.03014%2015.9068%208.45253%2015.4191%207.96677ZM11.7133%2016.0272H11.7116C10.9316%2016.0273%2010.166%2015.8175%209.49513%2015.4197L9.3364%2015.3252L7.68835%2015.7576L8.12779%2014.151L8.0245%2013.9864C7.58844%2013.2922%207.3576%2012.4888%207.35863%2011.669C7.3598%209.26817%209.31306%207.31491%2011.7151%207.31491C12.2872%207.31364%2012.8538%207.42584%2013.3822%207.64501C13.9106%207.86419%2014.3903%208.18599%2014.7935%208.59179C15.1989%208.99566%2015.5202%209.47586%2015.7388%2010.0046C15.9575%2010.5334%2016.0692%2011.1003%2016.0675%2011.6725C16.0663%2014.0734%2014.113%2016.0272%2011.7133%2016.0272ZM14.102%2012.7656C13.9706%2012.6996%2013.3275%2012.3833%2013.2073%2012.3396C13.0877%2012.2958%2013.0007%2012.2742%2012.9132%2012.4049C12.8257%2012.5357%2012.5747%2012.8304%2012.4983%2012.9179C12.4218%2013.0054%2012.3454%2013.0159%2012.2146%2012.9506C12.0839%2012.8852%2011.662%2012.7469%2011.1619%2012.3011C10.7726%2011.9538%2010.51%2011.5255%2010.4335%2011.3942C10.3571%2011.2629%2010.4254%2011.1922%2010.4913%2011.1269C10.5503%2011.0685%2010.622%2010.974%2010.6874%2010.8975C10.7528%2010.8211%2010.7744%2010.7668%2010.8181%2010.6793C10.8619%2010.5917%2010.8403%2010.5153%2010.807%2010.4499C10.7744%2010.384%2010.5123%209.7397%2010.4032%209.47767C10.2976%209.22381%2010.1896%209.25766%2010.1091%209.25416C10.0257%209.25075%209.94218%209.24919%209.85871%209.24949C9.79233%209.25118%209.72701%209.26657%209.66686%209.29469C9.60671%209.32281%209.55301%209.36305%209.50914%209.41289C9.38892%209.5442%209.05103%209.8605%209.05103%2010.5048C9.05103%2011.1491%209.52023%2011.7717%209.58559%2011.8593C9.65095%2011.9468%2010.5088%2013.2686%2011.8219%2013.8359C12.1347%2013.9707%2012.3786%2014.0512%2012.5683%2014.1119C12.8817%2014.2117%2013.1671%2014.1971%2013.3929%2014.1639C13.6444%2014.1265%2014.1673%2013.8476%2014.2764%2013.5418C14.3856%2013.236%2014.3856%2012.9739%2014.3529%2012.9191C14.3202%2012.8642%2014.2321%2012.831%2014.102%2012.7656Z%22%20fill%3D%22%23FBFBFB%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_924_43%22%3E%3Crect%20width%3D%2210.5221%22%20height%3D%2210.5221%22%20fill%3D%22white%22%20transform%3D%22translate(6.43015%206.43018)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
}

.item.instagram .imgbox:after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none'%3E%3Cmask id='a' width='24' height='24' x='8' y='8' maskUnits='userSpaceOnUse' style='mask-type:luminance'%3E%3Cpath fill='%23fff' d='M32 8H8v24h24V8Z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M20 23.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z'/%3E%3Cpath stroke='%23FBFBFB' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M24.5 11h-9a4.5 4.5 0 0 0-4.5 4.5v9a4.5 4.5 0 0 0 4.5 4.5h9a4.5 4.5 0 0 0 4.5-4.5v-9a4.5 4.5 0 0 0-4.5-4.5Z'/%3E%3Cpath fill='%23fff' d='M24.875 16.063a.937.937 0 1 0 0-1.875.937.937 0 0 0 0 1.874Z'/%3E%3C/g%3E%3C/svg%3E");
	filter: none;
}

.logo-client-end {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	width: 70px;
	margin: auto;
	display: none;
}

@-webkit-keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

@-moz-keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

@-o-keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

@media only screen and (max-width: 360px) {
	/* body {
		background-position: bottom -55px center;
	} */

	.game-area {
		width: 90%;
	}

	.title {
		width: 80%;
		margin: 0 auto 10px;
	}

	.answer-box {
		margin: 10px 0;
	}

	.point-box {
		margin-top: 0;
	}

	.point-wrap {
		top: 22%;
	}

	.point-wrap p {
		margin-bottom: 5px;
	}

	.point-text {
		font-size: 12px;
	}

	.btn-redirect,
	.btn-refresh {
		width: 100%;
		font-size: 13px;
		margin: 8px 0;
	}
}

@media only screen and (min-width: 768px) {
	body {
		background-image: url(../images/bg-d.jpg);
	}

	.bg-end {
		background-image: url(../images/bg-end-d.jpg);
	}

	.game-area {
		max-width: 340px;
	}

	.point-box {
		width: 90%;
		margin: auto;
	}

	.btn-redirect,
	.btn-refresh {
		padding: 15px;
		border-width: 2px;
	}

	.point-text {
		bottom: 80px;
	}

	.title {
		width: 220px;
	}

	.area-two .title {
		width: 178px;
	}

	.point {
		font-size: 32px;
	}

	/* .item .imgbox {
		width: 35px;
		height: 35px;
	} */


	.item.instagram {
		display: none;
	}
}