@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: 100px;
	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;
}

.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%3Cpath%20d%3D%22M24%2012.073C24%2018.062%2019.606%2023.027%2013.87%2023.928V15.565H16.659L17.19%2012.105H13.87V9.86C13.87%208.913%2014.334%207.991%2015.82%207.991H17.329V5.045C17.329%205.045%2015.959%204.811%2014.65%204.811C11.916%204.811%2010.13%206.468%2010.13%209.467V12.104H7.091V15.564H10.13V23.927C4.395%2023.025%200%2018.061%200%2012.073C0%205.446%205.373%200.072998%2012%200.072998C18.627%200.072998%2024%205.445%2024%2012.073Z%22%20fill%3D%22black%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%3Cg%20clip-path%3D%22url(%23clip0_371_3720)%22%3E%3Cpath%20d%3D%22M18.59%200H5.41C2.422%200%200%202.422%200%205.41V18.59C0%2021.578%202.422%2024%205.41%2024H18.59C21.578%2024%2024%2021.578%2024%2018.59V5.41C24%202.422%2021.577%200%2018.59%200ZM18.284%2014.865C16.605%2016.797%2012.852%2019.151%2011.998%2019.511C11.144%2019.871%2011.27%2019.282%2011.305%2019.079C11.326%2018.959%2011.419%2018.394%2011.419%2018.394C11.446%2018.19%2011.474%2017.873%2011.393%2017.671C11.303%2017.448%2010.949%2017.333%2010.688%2017.276C6.843%2016.768%203.996%2014.08%203.996%2010.87C3.996%207.29%207.586%204.376%2011.998%204.376C16.41%204.376%2020%207.289%2020%2010.87C19.999%2012.302%2019.444%2013.593%2018.284%2014.865Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M15.81%2010.0119V10.6009H17.338C17.422%2010.6009%2017.491%2010.6699%2017.491%2010.7539V11.3219C17.491%2011.4059%2017.423%2011.4749%2017.338%2011.4749H15.81V12.0639H17.338C17.422%2012.0639%2017.491%2012.1329%2017.491%2012.2169V12.7849C17.491%2012.8689%2017.423%2012.9369%2017.338%2012.9369H15.09C15.006%2012.9369%2014.937%2012.8689%2014.937%2012.7849V9.29192C14.937%209.20792%2015.005%209.13892%2015.09%209.13892H17.338C17.422%209.13892%2017.491%209.20692%2017.491%209.29192V9.85892C17.491%209.94292%2017.423%2010.0119%2017.338%2010.0119H15.81Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M9.17409%2012.2169V12.7849C9.17409%2012.8689%209.10609%2012.9369%209.02109%2012.9369H6.77309C6.68909%2012.9369%206.62109%2012.8689%206.62109%2012.7849V9.29192C6.62109%209.20792%206.68909%209.13892%206.77309%209.13892H7.34109C7.42509%209.13892%207.49409%209.20692%207.49409%209.29192V12.0639H9.02209C9.10609%2012.0639%209.17409%2012.1329%209.17409%2012.2169Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M10.5283%209.29192V12.7839C10.5283%2012.8679%2010.4603%2012.9359%2010.3753%2012.9359H9.80827C9.72427%2012.9359%209.65527%2012.8679%209.65527%2012.7839V9.29192C9.65527%209.20792%209.72327%209.13892%209.80827%209.13892H10.3753C10.4593%209.13892%2010.5283%209.20792%2010.5283%209.29192Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M14.3913%209.29192V12.7839C14.3913%2012.8679%2014.3233%2012.9359%2014.2383%2012.9359H13.6743C13.6243%2012.9359%2013.5753%2012.9109%2013.5463%2012.8699L11.9463%2010.7099V12.7839C11.9463%2012.8679%2011.8783%2012.9359%2011.7933%2012.9359H11.2253C11.1413%2012.9359%2011.0723%2012.8679%2011.0723%2012.7839V9.29192C11.0723%209.20792%2011.1403%209.13892%2011.2253%209.13892H11.7893C11.8423%209.13892%2011.8883%209.16692%2011.9193%209.20792L13.5173%2011.3659V9.29192C13.5173%209.20792%2013.5853%209.13892%2013.6703%209.13892H14.2383C14.3233%209.13892%2014.3913%209.20792%2014.3913%209.29192Z%22%20fill%3D%22black%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_371_3720%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%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%3Cg%20clip-path%3D%22url(%23clip0_371_3722)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C5.373%200%200%205.373%200%2012C0%2018.627%205.373%2024%2012%2024C18.627%2024%2024%2018.627%2024%2012C24%205.373%2018.627%200%2012%200ZM17.562%208.161C17.382%2010.058%2016.6%2014.663%2016.203%2016.788C16.035%2017.688%2015.703%2017.989%2015.383%2018.018C14.686%2018.082%2014.157%2017.557%2013.482%2017.115C12.426%2016.423%2011.829%2015.992%2010.804%2015.316C9.619%2014.535%2010.387%2014.106%2011.062%2013.405C11.239%2013.221%2014.309%2010.428%2014.369%2010.175C14.376%2010.143%2014.384%2010.025%2014.313%209.963C14.242%209.901%2014.139%209.922%2014.065%209.939C13.959%209.963%2012.272%2011.078%209.003%2013.284C8.524%2013.613%208.09%2013.773%207.701%2013.765C7.273%2013.756%206.449%2013.523%205.836%2013.323C5.085%2013.079%204.487%2012.949%204.539%2012.535C4.566%2012.319%204.863%2012.098%205.431%2011.872C8.929%2010.348%2011.262%209.343%2012.429%208.857C15.762%207.471%2016.454%207.23%2016.906%207.222C17.472%207.214%2017.608%207.681%2017.562%208.161Z%22%20fill%3D%22black%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_371_3722%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%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%3Cg%20clip-path%3D%22url(%23clip0_371_3721)%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M12%200C5.37281%200%200%205.37281%200%2012C0%2018.6272%205.37281%2024%2012%2024C18.6272%2024%2024%2018.6272%2024%2012C24%205.37281%2018.6272%200%2012%200ZM13.6627%2017.1L12.8972%2017.8655C12.4513%2018.3103%2011.9222%2018.663%2011.34%2018.9032C10.7578%2019.1435%2010.134%2019.2667%209.50421%2019.2658C8.8744%2019.2649%208.25093%2019.1399%207.66945%2018.8979C7.08797%2018.6559%206.55986%2018.3018%206.11531%2017.8556C4.24875%2015.9806%204.28719%2012.9338%206.1575%2011.0588L6.89062%2010.3275C7.04939%2010.1687%207.2647%2010.0796%207.48922%2010.0796C7.71373%2010.0796%207.92905%2010.1687%208.08781%2010.3275C8.24656%2010.4863%208.33575%2010.7016%208.33575%2010.9261C8.33575%2011.1506%208.24656%2011.3659%208.08781%2011.5247L7.32187%2012.2902C7.033%2012.5797%206.80428%2012.9235%206.6489%2013.3018C6.49353%2013.6802%206.41456%2014.0855%206.41657%2014.4945C6.41857%2014.9035%206.5015%2015.308%206.66058%2015.6848C6.81966%2016.0616%207.05174%2016.4032%207.34344%2016.6898C8.56219%2017.8833%2010.523%2017.8453%2011.7281%2016.6402L12.4655%2015.9028C12.5439%2015.8232%2012.6372%2015.76%2012.7402%2015.7167C12.8431%2015.6734%2012.9537%2015.6508%2013.0654%2015.6504C13.1771%2015.65%2013.2877%2015.6717%2013.391%2015.7143C13.4943%2015.7568%2013.5881%2015.8194%2013.6671%2015.8984C13.7461%2015.9774%2013.8086%2016.0712%2013.8512%2016.1745C13.8938%2016.2777%2013.9155%2016.3884%2013.915%2016.5001C13.9146%2016.6118%2013.8921%2016.7223%2013.8488%2016.8253C13.8055%2016.9282%2013.7422%2017.0216%2013.6627%2017.1ZM15.007%2010.1803L10.1789%2015.0084C10.0191%2015.1617%209.80559%2015.2462%209.58418%2015.244C9.36276%2015.2417%209.15106%2015.1527%208.99446%2014.9962C8.83786%2014.8396%208.74882%2014.628%208.74644%2014.4065C8.74406%2014.1851%208.82852%2013.9716%208.98172%2013.8117L13.8098%208.98359C13.969%208.82677%2014.1837%208.73923%2014.4071%208.74005C14.6306%208.74088%2014.8446%208.83%2015.0026%208.988C15.1606%209.14599%2015.2497%209.36005%2015.2506%209.58348C15.2514%209.80692%2015.1639%2010.0216%2015.007%2010.1808V10.1803ZM17.8664%2012.8991L17.1%2013.6627C17.0216%2013.7422%2016.9282%2013.8055%2016.8253%2013.8488C16.7223%2013.8921%2016.6118%2013.9146%2016.5001%2013.915C16.3884%2013.9155%2016.2777%2013.8938%2016.1745%2013.8512C16.0712%2013.8086%2015.9774%2013.7461%2015.8984%2013.6671C15.8194%2013.5881%2015.7568%2013.4943%2015.7143%2013.391C15.6717%2013.2877%2015.65%2013.1771%2015.6504%2013.0654C15.6508%2012.9537%2015.6734%2012.8431%2015.7167%2012.7402C15.76%2012.6372%2015.8232%2012.5439%2015.9028%2012.4655L16.6683%2011.7C16.9571%2011.4104%2017.1858%2011.0666%2017.3411%2010.6882C17.4965%2010.3099%2017.5754%209.90455%2017.5734%209.49557C17.5713%209.08658%2017.4883%208.68205%2017.3292%208.30528C17.1701%207.92851%2016.938%207.58696%2016.6462%207.30031C15.4298%206.10688%2013.4672%206.14438%2012.262%207.35L11.5247%208.08734C11.3659%208.24609%2011.1506%208.33528%2010.9261%208.33528C10.7016%208.33528%2010.4863%208.24609%2010.3275%208.08734C10.1687%207.92858%2010.0796%207.71326%2010.0796%207.48875C10.0796%207.26424%2010.1687%207.04892%2010.3275%206.89016L11.0625%206.1575C12.9342%204.28578%2015.9811%204.24875%2017.8594%206.11531C18.3053%206.56011%2018.6591%207.08841%2018.9008%207.67003C19.1424%208.25164%2019.2671%208.87517%2019.2677%209.50499C19.2682%2010.1348%2019.1447%2010.7586%2018.9041%2011.3406C18.6635%2011.9227%2018.3106%2012.4516%2017.8655%2012.8972L17.8664%2012.8991Z%22%20fill%3D%22black%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_371_3721%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
}

.item.twitter .imgbox:after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3E%3Cpath fill='%23000' d='M9.522 6.904 15.48 0h-1.412L8.895 5.995 4.765 0H0l6.247 9.065L0 16.305h1.412l5.461-6.33 4.363 6.33H16l-6.478-9.4ZM7.59 9.145l-.633-.903L1.92 1.06h2.168l4.064 5.796.633.903 5.283 7.535H11.9L7.589 9.145Z'/%3E%3C/svg%3E");
}

.item.whatsapp .imgbox:after {
	background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.573 11.297c-.223-.112-1.32-.65-1.524-.726-.204-.075-.353-.112-.5.112-.147.224-.576.726-.706.875-.13.15-.26.168-.483.056a6.09 6.09 0 0 1-1.797-1.108 6.724 6.724 0 0 1-1.241-1.545c-.13-.223-.014-.344.1-.455.114-.11.223-.26.335-.39a1.52 1.52 0 0 0 .223-.373.41.41 0 0 0-.019-.39c-.056-.113-.5-1.21-.688-1.657-.188-.446-.365-.376-.5-.383a8.41 8.41 0 0 0-.428-.008.82.82 0 0 0-.595.28 2.5 2.5 0 0 0-.781 1.86c.073.842.39 1.644.911 2.308a9.945 9.945 0 0 0 3.808 3.367c.415.18.84.336 1.272.47.455.138.936.168 1.405.088a2.302 2.302 0 0 0 1.506-1.06c.146-.334.191-.703.13-1.062-.056-.093-.2-.149-.428-.26v.001ZM9.5 16.854a7.41 7.41 0 0 1-3.777-1.034l-.271-.16-2.808.736.75-2.738-.176-.28A7.42 7.42 0 1 1 9.5 16.853Zm6.318-13.736A8.93 8.93 0 0 0 1.767 13.891L.5 18.517l4.733-1.24a8.921 8.921 0 0 0 9.228-.42 8.932 8.932 0 0 0 1.357-13.739Z' fill='%23000'/%3E%3C/svg%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;
}

@-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;
	}
}