:root {
	--grd-1: linear-gradient(60deg,#1877F2,#EF7BAA);
	--grd-2: linear-gradient(60deg, #D85157, #EB759E);
	--grd-3: linear-gradient(60deg, #33A167, #A4D869);
	--point: url('../img/loyalty/point.svg');
	--point2: url('../img/loyalty/point2.svg');
}
.top-menu {
	padding: 0 32px;
}
body {
	min-height: calc(100vh - 72px) !important;
	overflow-x: hidden;
}
#main {
	margin-top: 72px;
	overflow: unset;
}
.lang-box {
	margin-left: auto;
}
.page-content {
	padding: 0 20px;
	overflow: unset;
}
.sign, .dashboard {
	min-height: calc(100vh - 240px);
	margin: 40px 0;
}
p, h5, h6, li {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.33;
	margin: 0;
}
h1, h2, h3, h4 {
	font-weight: 800;
	line-height: 1.33;
	text-align: left;
}
h1 {
	color: #000;
	font-size: 40px;
	text-align: center;
	margin: auto;
}
h2 {
	font-size: 32px;
}
h3 {
	font-size: 24px;
}
h4 {
	font-size: 18px;
}
h5 {
	font-weight: 700;
}
h6 {
	font-weight: 600;
}
h1+p {
	margin-top: 0;
}
h2.title {
	display: block;
	margin: 0 0 32px;
}
h3.title, h4.title, h6.title {
	display: flex;
	margin-bottom: 16px;
	color: #000;
}
h6.title {
	margin: 0;
}
h3.title>.emoji {
	height: 44px;
	background-color: var(--smok);
	padding: 10px;
	border-radius: 50%;
}
h6.title>.emoji {
	height: 40px;
	padding: 8px;
	margin-right: 12px;
	border-radius: 10px;
	background-color: #FFF;
}
.small {
	font-size: 12px;
	line-height: 1;
	margin: 0;
}
*+h4 {
	margin-top: 32px;
}
h4+ul, h4+ol {
	margin: 12px 0 0;
}
ul>li:not(:last-child) {
	margin-bottom: 8px;
}
ul.col-2 {
	column-count: 2;
}
._page, ._arrow {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: left;
	cursor: pointer;
}
._page:after, ._arrow:after, h4._menu:after {
	position: absolute;
	content: '\f105';
	display: flex;
	align-items: center;
	right: 0;
	font-family: 'FontAwesome';
}
h4._menu:after {
	right: 20px;
}
.sign-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 400px;
	margin: auto;
	text-align: center;
}
.sign-form>h1 {
	margin-bottom: 16px;
}
.sign-form>:last-child {
	margin-top: 16px;
}
input:not([type="radio"], [type="checkbox"]), select {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #AAA;
	border-radius: 8px;
	font-family: 'Nunito', 'Kanit', sans-serif;
}
input.birth_date {
	cursor: pointer;
}
input.pin {
	display: inline-block;
	width: 50px;
	height: 50px;
	margin: 8px 4px;
	padding: 0;
	font-size: 20px;
	text-align: center;
	appearance: textfield;
	-webkit-appearance: textfield;
}
input.pin::-webkit-outer-spin-button,
input.pin::-webkit-inner-spin-button {
	-webkit-appearance:none;
	margin:0;
}
.pincode .note { 
	margin: 16px 0;
	text-align: center;
}
input:focus, select:focus {
	background: #F6F9FF !important;
	outline: 0;
}
input.invalid {
	border-color: #D34946;
}
input.invalid + .note {
	display: block;
}
input.form-control {
	cursor: pointer;
}
.intl-tel-input {
	height: 100%;
}
.intl-tel-input .selected-flag {
	height: 48px;
	margin-right:12px;
}
.sign label {
	display: block;
	text-align: left;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 8px;
	color: var(--gray);
}
[type="checkbox"] {
	display: none;
}
[type="checkbox"]+label {
	display: flex;
	align-items: center;
	position: relative;
	font-size: 16px;
	font-weight: 500;
	padding-left: 24px;
	cursor: pointer;
}
[type="checkbox"]+label:before {
	position: absolute;
	left: 0;
	content: '\f096';
	font-family: FontAwesome;
	font-size: 20px;
	color: #4DADD3;
}
[type="checkbox"]:checked+label:before {
	content: '\f14a';
}
.divider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.divider:before {
	position: absolute;
	content: '';
	height: 1px;
	width: 100%;
	background: #EEE;
}
.divider>* {
	display: block;
	padding: 16px;
	background: #FFF;
	z-index: 1;
}
p.note {
	display: none;
	margin: 8px 0 0;
	font-size: 12px;
	color: #D34946;
	text-align: left;
}
.points {
	display: inline-flex;
	align-items: center;
	margin: 0;
}
.point {
	display: inline-block;
	aspect-ratio: 1;
	margin-left: 4px;
	background-image: var(--point);
	background-repeat: no-repeat;
	background-position: center;
}
h2 .point {
	height: 24px;
}
h3 .point {
	height: 18px;
}
h4 .point {
	height: 16px;
}
h5 .point {
	height: 14px;
}
hr.dashed {
	border: none;
	margin: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, transparent 50%, #DDD 50%);
	background-size: 12px;
}
.dashboard {
	display: grid;
	grid-template-columns: auto 900px;
	gap: 40px;
}
.side_bar {
	position: sticky;
	top: 112px;
	display: grid;
	align-content: space-between;
	height: 600px;
	padding: 20px;
	background: #FFF;
	border-radius: 20px;
}
.my_menu {
	display: grid;
	grid-template-rows: repeat(6, 40px);
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.my_menu>li {
	display: flex;
	align-items: center;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}
.my_menu>.active {
	color: #4DADD3;
	font-weight: 700;
}
.my_menu .ico {
	margin-right: 8px;
	filter: brightness(0);
	-webkit-filter: brightness(0);
}
.my_menu>.active>.ico {
	filter: brightness(1);
	-webkit-filter: brightness(1);
}
h4._menu {
	display: none;
}
.page {
	position: relative;
	padding: 40px;
	border-radius: 20px;
	background: #FFF;
}
/*** >>>>> page my_office >>>>> ***/
#my_office {
	padding: 0;
	background: none;
}
#my_office>* {
	margin-bottom: 24px;
	padding: 32px;
	background: #FFF;
	border-radius: 20px;
	overflow: hidden;
}
.slider {
	margin: 0;
	padding: 0;
	list-style: none;
}
/*** slider._top start ***/
.slider._top {
	position: relative;
	margin-right: -4px;
	padding: 0 !important;
	background: none !important;
}
._top .slider-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 144px;
	margin-right: 4px;
	padding: 0 60px;
	border-radius: 20px;
	position: relative;
	color: #FFF;
	cursor: pointer;
}
#slide1 {
	background: var(--grd-1);
}
#slide2 {
	background: var(--grd-2);
}
#slide3 {
	background: var(--grd-3);
}
#slide4 {
	background: linear-gradient(84deg, #7764B4, #A3ABD5);
}
._top h3, ._top p {
	width: 56%;
	margin: 4px 0;
	color: #FFF;
}
._top .emoji, .poster .emoji {
	position: absolute;
	height: 72px;
	margin: 0;
	background-color: #FFF;
	border-radius: 20px;
	background-size: 42px;
	background-origin: content-box;
	border: 1px solid #DDD;
}
.emoji.sl1 {
	top: 20px;
	right: 240px;
	transform: rotate(-10deg);
}
.emoji.sl2 {
	right: 170px;
	bottom: 20px;
	z-index: 1;
}
.emoji.sl3 {
	top: 24px;
	right: 100px;
	transform: rotate(12deg);
}
._top .arrow {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	top: calc(50% - 12px);
	color: #FFF;
	background: #FFF3;
	border-radius: 50%;
	font-size: 18px;
	cursor: pointer;
	z-index: 1;
}
.arrow.prev {
	left: 16px;
}
.arrow.next {
	right: 16px;
}
/*** top slider end ***/
._level {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: flex-end;
	gap: 16px;
	width: 100%;
}
.my_card, .get_next {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 2;
	position: relative;
	padding: 20px;
	border-radius: 16px;
	overflow: hidden;
}
.my_card {
	position: relative;
	color: #FFF;
	background: linear-gradient(to right,#F7832DFF,#F5D001FF);
}
.my_card:before {
	position: absolute;
	content: '';
	width: 150px;
	height: 150px;
	right: -16px;
	bottom: -16px;
	background: var(--point2);
	opacity: .2;
}
.point.invert {
	background-image: var(--point2);
}
.lotus.bronze {
	background-image: url('../img/loyalty/bronze-lotus.svg');
}
.lotus.silver {
	background-image: url('../img/loyalty/sivver-lotus.svg');
}
.lotus.gold {
	background-image: url('../img/loyalty/gold-lotus.svg');
}
.lotus.diamond {
	background-image: url('../img/loyalty/diamond-lotus.svg');
}
.my_card .small {
	color: #FFF;
}
.how_works {
	position: absolute;
	top: 18px;
	right: 20px;
	display: flex;
	align-items: center;
}
.how_works .ico {
	height: 16px;
	margin-left: 4px;
}
.bonus {
	position: relative;
	padding: 16px 20px;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
}
.bonus .emoji {
	position: absolute;
	height: 32px;
	right: 6px;
	bottom: 0;
}
h5.bonus {
	background: var(--grd-1) !important;
	color: #FFF;
}
.bonus .label {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	padding: 2px 4px;
	border-radius: 12px;
	color: #F5A119;
	background: #FFF;
	transform: rotate(-9deg);
}
.bonus .emoji {
	right: 2px;
	bottom: -2px;
	transform: rotate(15deg);
}
.bonus .point {
	height: 16px;
}
.get_next {
	background: var(--smok);
}
.my_level {
	display: flex;
	align-items: center;
}
.my_level .lotus {
	height: 46px;
	margin-right: 12px;
	background-color: #FFF;
	background-size: 24px;
	border-radius: 50%;
}
.my_level h3 {
	margin-top: 2px;
}
.visits {
	display: grid;
	grid-template-columns: repeat(7,1fr);
	margin-top: 12px;
}
.visits>* {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.visits .ico {
	height: 46px;
	background-color: #FFF;
	border-radius: 50%;
}
.ico.lotus {
	background-size: 24px;
}
.ico.done {
	background-color: var(--green);
	background-image: url('../img/icons/check-fff.svg');
	background-size: 16px;
	border-radius: 50%;
}
.visits p {
	font-size: 12px;
}
/*** _gifts slider start ***/
.slider._gifts {
	margin-right: -20%;
}
._gifts .slider-box,
.gifts .tick-box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 160px;
	margin-right: 12px;
	border-radius: 20px;
	overflow: hidden;
	background-image: url('../img/loyalty/gift-bg.svg');
}
._gifts .sl1 {
	background-color: #FEEEE3;
}
._gifts .sl2 {
	background-color: #C8E6F1;
}
._gifts .sl3 {
	background-color: #D0EBB2;
}
._gifts .sl4 {
	background-color: #FDECEC;
}
._gifts .sl5 {
	background-color: #FAEBD7;
}
._gifts .sl6 {
	background-color: #ADD8E6;
}
._gifts .sl7 {
	background-color: #FFE4E1;
}
._gifts .tick,
.gifts .tick {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	height: 115px;
	aspect-ratio: 1.8;
	padding: 16px 36px;
	background: #FFF;
	clip-path: url('#tick');
	box-shadow: 0 0 40px #EEE;
}
.gifts .tick {
	height: 105px;
	padding: 16px;
	transform: rotate(-5deg);
}
._gifts .tick>* {
	text-align: center;
}
._gifts .slick-track>:nth-child(odd) .tick {
	transform: rotate(-4deg);
}
._gifts .slick-track>:nth-child(even) .tick {
	transform: rotate(4deg);
}
._gifts .ico.lotus,
.gifts .ico.lotus {
	position: absolute;
	top: 20px;
	left: 20px;
	height: 42px;
	aspect-ratio: 1;
	background-color: #FFF;
	background-size: 24px;
	border-radius: 50%;
	box-shadow: 0 0 40px #EEE;
}
._gifts .emoji,
.gifts .emoji {
	position: absolute;
	right: -8px;
	bottom: -8px;
	height: 76px;
	transform: rotate(-8deg);
}

/*** _gifts slider end ***/
/*** _quests slider start ***/
.slider._quests {
	margin-right: -33%;
}
._quests .slider-box {
	padding: 20px;
	background: var(--smok);
	border-radius: 16px;
	margin-right: 16px;
}
._quests .slider-box>:first-child,
.quests>*>:first-child {
	display: grid;
	grid-template-columns: auto 80px;
	align-items: center;
	gap: 8px;
}
._quests h3 {
	justify-self: end;
}
._quests .slider-box>:last-child,
.quests>*>:last-child {
	margin-top: 16px;
	text-align: right;
	color: #999;
}
._quests .bars,
.quests .bars {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}
.bars>* {
	height: 8px;
	background: #CCC;
	border-radius: 4px;
}
.done {
	background-color: var(--green);
}
.bars.num-1 {
	grid-template-columns: 1fr;
}
.bars.num-2 {
	grid-template-columns: repeat(2,1fr);
}
.bars.num-3 {
	grid-template-columns: repeat(3,1fr);
}
/*** _quests slider end ***/
/*** _partners slider start ***/
.slider._partners {
	margin-right: -25%;
}
._partners .slider-box {
	display: grid;
	height: 420px;
	padding: 20px;
	border-radius: 20px;
	background: var(--smok);
	margin-right: 16px;
}
._partners ._logo, .partners ._logo {
	height: 120px;
	padding: 20px;
	border-radius: 16px;
	background: #FFF;
	text-align: center;
}
._partners ._logo>img, .partners ._logo>img {
	height: 100%;
	margin: auto;
}
._partners .info {
	padding: 8px;
}
._partners h4 {
	margin: 12px 0 8px;
}
._partners .points {
	font-size: 24px;
	margin: 40px 0 16px;
}
._partners .button {
	width: 100%;
	align-self: end;
}
.price {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 270px;
	margin: 60px 0 20px;
}
.price>:first-child {
	padding: 12px 0;
	align-self: end;
}
.price>:last-child {
	padding: 12px 16px;
	background: var(--smok);
	border-radius: 10px;
}
/*** _partners slider end ***/
/*** >>>>> page my_payments >>>>> ***/
#my_payments h2.title {
	margin: 0;
}
#my_payments h2.title+p {
	margin: 0 0 32px;
}
.uk-open .dropdown:after {
	content: '\f106';
}
.dashboard .uk-dropdown {
	position: static;
	width: 100%;
	margin-top: 16px;
	padding: 16px;
	background: #FFF;
	border-radius: 16px;
}
.uk-open>.uk-dropdown {
	display: grid;
}
.dropdown {
	cursor: pointer;
}
.dropdown:after {
	content: '\f107';
	display: flex;
	align-items: center;
	height: 100%;
	font-size: 18px;
	color: var(--gray);
	top: 0;
}
.payments {
	display: grid;
	gap: 8px;
}
.payments>* {
	padding: 20px;
	border-radius: 20px;
	background: var(--smok);
}
.payments .info,
.order-info>.item {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
}
.payments .info:after,
.order-info .item:after {
  content:'';
  width:100%;
  order:0;
}
.payments .info>:first-child {
	margin-bottom: 4px;
}
.payments .info>:first-child~* {
	order: 1;
	flex: 0 0 120px;
}
.payments .info>:nth-child(1),
.payments .info>:nth-child(2) {
	flex: 0 0 150px;
}
.order-info>.item {
	width: auto;
	font-size: 15px;
	font-weight: 500;
	padding: 16px 0;
	margin: 0 16px;
	list-style: none;
	align-items: flex-end;
	border-bottom: 1px solid #aaa;
}
.order-info>.item>:first-child ~* {
	order: 1;
}
.order-info>.item>:first-child {
	font-weight: 700;
	color: #999;
	margin-bottom: 4px;
}
.order-info>.item>:nth-child(2) {
	width: 50%;
}
.order-info>.item>:nth-child(3) {
	width: 90px;
	text-align: right;
}
.order-info>.item>:last-child {
	margin-left: auto;
}
.order-info>.end {
	margin: 16px;
}
.order-info>.end>* {
	display: flex;
	justify-content: space-between;
	margin: 8px 0;
}
.order-info>.end>h4 {
	margin-top: 16px;
}
.not_yet {
	display: grid;
	grid-template-columns: 140px auto;
	gap: 60px;
	align-items: center;
	width: 500px;
	margin: 60px auto 90px;
	background: #FFF;
}
.not_yet .emoji {
	/* padding: 36px; */
	border-radius: 50%;
	background-color: var(--smok);
	background-size: 64px;
}
.not_yet p {
	margin-top: 12px;
}
.payments>.not_yet {
	margin: 0 auto;
	padding: 0;
}
/*** <<<<< page my_payments <<<<< ***/
/*** >>>>> page my_quests >>>>> ***/
.quests {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 16px;
	margin-top: 20px;
}
.quests>* {
	display: none;
	height: 132px;
	padding: 20px;
	background: var(--smok);
	border-radius: 16px;
}
.quests .points {
	justify-content: end;
}
.ico.check-roud-green {
	background: url('../img/icons/check-roud-green.svg');
	margin: 0 0 0 auto;
}
#my_quests .button.active {
	color:#FFF;
	background: #595959;
}
/*** <<<<< page my_quests <<<<< ***/
/*** >>>>> page my_account >>>>> ***/
.page#my_account {
	padding: 0;
	background: none;
}
#my_account>* {
	padding: 40px;
	border-radius: 20px;
	background: #FFF;
	margin-bottom: 16px;
}
.my_qr {
	display: grid;
	gap: 32px 160px;
	margin-top: 60px;
	padding: 40px;
	background: var(--smok);
	border-radius: 20px;
	grid-template-areas: 'a c' 'b c';
}
.my_qr p {
	font-size: 18px;
	font-weight: 600;
	margin: 8px 0 0;
}
a.button.qr {
	grid-area: b;
}
.qr {
	grid-area: c;
}
.qr>canvas {
	height: 240px;
	aspect-ratio: 1;
	border-radius: 8px;
}
.account {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 40px;
}
.account>:first-child {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.account>:last-child {
	display: grid;
	grid-template-rows: repeat(3, 64px);
	gap: 16px;
}
.account>:last-child>* {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	border-radius: 16px;
	background: #FEEEE3;
}
.account>:last-child>*>:first-child {
	flex: 0 0 270px;
}
.account .points {
	padding: 4px 8px;
	background: #FFF;
	border-radius: 16px;
}
.account .emoji {
	height: 32px;
}
#relatives {
	margin: 32px 0;
	padding: 0;
	list-style: none;
}
#relatives>* {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 32px 20px;
	background: var(--smok);
	border-radius: 20px;
}
#relatives .emoji {
	height: 56px;
	background-color: #FFF;
	border-radius: 50%;
	padding: 12px;
}
#relatives p {
	color: #999;
	text-transform: capitalize;
}
a.full {
	display: flex;
}
.ico.edit {
	width: 24px;
	margin-left: auto;
}
#add_edit_person>* {
	min-height: auto;
}
#add-edit-person {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 24px;
}
fieldset {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 8px 0;
	font-size: 15px;
	font-weight: 500;
	border: 0;
}
input[type=radio] {
	display: none;
}
fieldset label {
	position: relative;
	padding-left: 32px;
	display: flex;
	align-items: center;
	margin: 0;
	cursor: pointer;
	user-select: none;
}
fieldset label:before {
	position: absolute;
	content: '';
	left: 0;
	background-image: url('../img/icons/circle-o.svg');
	height: 24px;
	aspect-ratio: 1;
}
label:has(> input:checked):before {
	background-image: url('../img/icons/circle-dot.svg');
}
label>span {
	color: #969696;
}
a.add_edit_person {
	display: flex;
	margin-top: 32px;
}
/*** <<<<< page my_account <<<<< ***/
/*** >>>>> page free_photo >>>>> ***/

/*** <<<<< page free_photo <<<<< ***/
/*** >>>>> page faq_help >>>>> ***/
.how_to {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 12px;
	margin-bottom: 60px;
}
.how_to>* {
	position: relative;
	height: 144px;
	padding: 20px;
	border-radius: 20px;
	overflow: hidden;
}
.how_to>:nth-child(1) {
	background: linear-gradient(30deg, #FEE198, #FEF5D2);
}
.how_to>:nth-child(2) {
	background: linear-gradient(30deg, #CFB8FF, #F6EDFE);
}
.how_to>:nth-child(3) {
	background: linear-gradient(30deg, #D3F28D, #F3FFD8);
}
.how_to>:nth-child(4) {
	background: linear-gradient(30deg, #C1E1FF, #E9F4FF);
}
.how_to h4 {
	max-width: 80%;
}
.how_to .emoji {
	position: absolute;
	right: -4px;
	bottom: -4px;
	height: 72px;
}
.how_to>:nth-child(3) .emoji {
	transform: rotate(30deg);
}
.faq_chapter {
	display: grid;
	gap: 7px;
	margin-top: 40px;
}
.faq_chapter>h3 {
	margin-bottom: 20px;
}
.faq_item {
	position: relative;
	padding: 28px 60px 28px 28px;
	background: var(--smok);
	border-radius: 20px;
	cursor: pointer;
}
.faq_item:after {
	position: absolute;
	content: url('../img/icons/angle-down.svg');
	width: 24px;
	height: 24px;
	top: 28px;
	right: 28px;
	filter: brightness(0);
	-webkit-filter: brightness(0);
}
.faq_item.open:after {
	content: url('../img/icons/angle-top.svg');
}
.faq_item>:not(h4) {
	display: none;
}
.faq_item.open p {
	font-size: 15px;
	margin-top: 6px;
	display: block;
}
.faq_item.open .in_faq {
	display: grid;
	width: 480px;
	margin-top: 12px;
	border-radius: 20px;
	overflow: hidden;
	gap: 2px;
}
.in_faq>* {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: #FFF;
}
.in_faq h5 {
	color: transparent;
	background: linear-gradient(to right, #F7832D, #F5D001);
	background-clip: text;
	-webkit-background-clip: text;
}
.in_faq a {
	display: flex;
}
.in_faq .emoji {
	height: 24px;
	margin: -2px 4px -2px 0;
}
.in_faq .lotus {
	height: 24px;
	aspect-ratio: 1.5;
	margin: -2px 8px -2px 0;
	background-size: contain;
}

/*** <<<<< page faq_help <<<<< ***/
/*** >>>>> page my_partners >>>>> ***/
.partners {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 16px;
	margin-top: 32px;
}
.partners>* {
	display: grid;
	padding: 20px;
	background: var(--smok);
	border-radius: 20px;
}
.partners h4 {
	margin: 20px 8px 4px;
}
.partners .points {
	margin: 40px 8px 16px;
}
.partners p, .partners .button {
	display: flex;
	margin: 0 8px 8px;
}
._partners p {
	
}
.partners .button {
	align-self: end;
}
.back {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}
.inf {
	display: flex;
	justify-content: space-between;
}
.logo {
	flex: 0 0 150px;
	aspect-ratio: 1.5;
	align-self: flex-start;
	background-size: contain;
	background-repeat: no-repeat;
}
.contacts p {
	display: flex;
	align-items: center;
	margin-top: 8px;
}
/*** >>>>> posters >>>>> ***/
.poster {
	position: relative;
	padding: 32px;
	border-radius: 20px;
	overflow: hidden;
}
.poster p, .poster ul, .poster ol {
	margin: 12px 0 0;
}
.poster .button {
	margin-top: 20px;
}
p+.poster {
	margin-top: 32px;
}
.about_points {
	background-color: var(--linen);
}
.about_points p {
	max-width: 80%;
}
.uk-modal-dialog.scroll-bar {
	padding-right: 8px;
}
.scroll {
	overflow-y: scroll;
	max-height: calc(100vh - 300px);
	padding-right: 8px;
	margin-right: -32px;
}
.about_points .point {
	height: 168px;
	position: absolute;
	right: -30px;
	bottom: -30px;
	background-size: contain;
	background-color: transparent;
	border: none;
}
.about_level {
	padding: 12px;
	margin-top: 16px;
	background: var(--smok);
}
.about_level.pass {
	background: #E8F4EE;
}
.about_level>:first-child {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px;
}
.about_level>:last-child {
	margin-top: 8px;
	padding: 28px;
	border-radius: 16px;
	background: #FFF;
}
.about_level>:last-child>* {
	display: flex;
	align-items: center;
	gap: 8px;
}
.about_level>:last-child .emoji {
	position: static;
	height: 16px !important;
	background-size: contain !important;
}
.about_level .lotus {
	height: 72px;
	background-color: #FFF;
	background-size: 42px;
	border-radius: 50%;
}
.about_level p {
	margin: 0;
}
.about_level .done {
	height: 44px;
	margin-left: auto;
}
.poster.gifts {
	display: grid;
	grid-template-columns: auto 280px;
	align-items: center;
	padding: 0;
	background: var(--linen);
}
.poster.gifts>:first-child {
	margin-left: 32px;
}
.poster.gifts>:last-child {
	margin: 0;
}
.poster.gifts h2,
.poster.gifts h3,
.poster.gifts p {
	color: #222;
	max-width: 100%;
	margin-bottom: 0;
}
.poster.gifts .label {
	display: inline-flex;
	align-items: center;
	color: #FFF;
	background: linear-gradient(90deg, #F69F1D, #F5C507);
	line-height: 1;
	padding: 2px 4px 2px 8px;
	border-radius: 16px;
}
.poster.gifts .tick>* {
	margin: 0;
}
.poster.donate {
	background: linear-gradient(20deg, #3DA567, #9CD469);
	color: #FFF;
}
.poster.donate p {
	max-width: 56%;
}
.donate .emoji {
	height: 90px;
	/* padding: 0; */
	background-size: 48px;
}
.emoji.d1 {
	top: 32px;
	right: 220px;
	transform: rotate(-10deg);
}
.emoji.d2 {
	right: 140px;
	bottom: 32px;
	transform: rotate(-6deg);
	z-index: 1;
}
.emoji.d3 {
	top: 32px;
	right: 60px;
	transform: rotate(12deg);
}
.poster.get_photo {
	background: var(--grd-3);
	color: #FFF;
}
.get_photo ol>li:before {
	background: #FFF;
	color: #000;
}
.get_photo>.emoji {
	height: 90px;
	background-size: 52px;	
}
.emoji.f1 {
	top: calc(50% - 60px);
	right: 240px;
	transform: rotate(-15deg);
}
.emoji.f2 {
	top: calc(50% - 30px);
	right: 160px;
	z-index: 1;
}
.emoji.f3 {
	top: calc(50% - 60px);
	right: 80px;
	transform: rotate(15deg);
}
.poster.smok {
	margin: 32px 0;
	background: var(--smok);
}
.poster.smok li {
	color: #000;
	max-width: 100%;
}
#referral ol>li {
}
.poster.referral {
	background: var(--grd-1);
	color: #FFF;
}
.referral .points {
	padding: 2px 8px;
	border-radius: 16px;
	background: #FFF;
	margin-left: 8px;
	transform: rotate(-5deg);
	transform-origin: left;
}
.referral .points>span {
	color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(to right, #F7832D, #F5D001);
}
.referral .emoji {
	height: 72px;
	background-size: 36px;
}
.emoji.r1 {
	top: 32px;
	right: 200px;
	transform: rotate(-10deg);
}
.emoji.r2 {
	right: 130px;
	bottom: 32px;
	transform: rotate(-6deg);
	z-index: 1;
}
.emoji.r3 {
	top: 32px;
	right: 60px;
	transform: rotate(12deg);
}
#ref_url {
	display: none;
}
.poster.rel {
	margin: 32px 0;
	background: var(--grd-1);
	color: #FFF;
}
.emoji.a1 {
	top: calc(50% - 20px);
	right: 200px;
	transform: rotate(-6deg);
}
.emoji.a2 {
	top: calc(50% - 52px);
	right: 130px;
}
.emoji.a3 {
	top: calc(50% - 20px);
	right: 60px;
	transform: rotate(6deg);
}
.slice {
	display: flex;
	gap: 24px;
	align-items: center;
	padding: 20px;
	border-radius: 16px;
	margin-top: 8px;
}
.slice.small {
	padding: 16px;
	border-radius: 10px;
}
.slice.smok {
	background: var(--smok);
}
.slice.white {
	background: #FFF;
}
.point_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	aspect-ratio: 1;
	background: linear-gradient(60deg, #F7832D, #F5D001);
	border-radius: 20px;
}
.slice p {
	margin: 0;
}
.slice .point {
	height: 28px;
}
.slice .emoji {
	position: static;
}
/*** >>>>> posters >>>>> ***/
 .green {
	color: #33A167;
}
.gray {
	color: var(--gray);
}
.opacity {
	opacity: .5;
}
.uk-modal h2 {
	margin-bottom: 16px;
}
.button.round {
	border-radius: 20px;
	height: 40px;
	padding: 0 16px;
	margin-right: 12px;
}
#footer {
	padding: 0;
}
.terms {
	margin: 0;
	padding: 10px 0;
}
#process {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.white-teal {
	color: #4DADD3 !important;
	background: #FFF;
	border: 1px solid #4DADD3;
	margin: 0 auto;
	width: 100%;
}
.ico.right {
	margin-left: 6px;
}
.ico.left {
	margin-right: 6px;
}

@media (max-width:480px) {
.lang-box {
	display: flex !important;
}
.page-content {
	padding: 0;
}
h1 {
	font-size: 32px;
}
h2 {
	font-size: 24px;
}
h3 {
	font-size: 18px;
}
h4 {
	font-size: 15px;
}
p {
	font-size: 12px;
}
h3.title {
	margin-bottom: 12px;
}
h2 .point {
	height: 18px;
}
h3 .point {
	height: 16px;
}
h4 .point {
	height: 14px;
}
h5 .point {
	height: 12px;
}
ul.col-2 {
	column-count: auto;
}
.sign-form {
	width: 100%;
}
.sign, .dashboard {
	display: block;
	margin: 0 0 24px;
}
.dashboard>:first-child {
	display: none;
}
h4._menu {
	display: flex;
	position: relative;
	font-weight: 600;
	cursor: pointer;
}
._menu>.ico {
	margin-right: 12px;
	filter: brightness(0);
	-webkit-filter: brightness(0);
}
/*** >>>>> page my_office >>>>> ***/
.page#my_office>* {
	margin: 8px 16px;
	padding: 20px;
	border-radius: 16px;
}
h5.bonus {
	margin-top: 20px !important;
}
/*** slider._top start ***/
.slider._top {
	margin: 16px 14px 16px !important;
}
._top .slider-box {
	height: 156px;
	padding: 20px;
	border-radius: 16px;
}
.slider._top h3, .slider._top p {
	width: 70%;
}
._top .emoji {
	height: 48px;
	background-size: 32px;
	border-radius: 10px;
}
.emoji.sl1 {
	top: 10%;
	right: 40px;
}
.emoji.sl2 {
	right: 20px;
	bottom: calc(50% - 24px);
}
.emoji.sl3 {
	top: auto;
	bottom: 10%;
	right: 40px;
}
.my_quests, .my_partners, .my_payments {
	display: none;
}
/*** slider._top end ***/
/*** _levels slider start ***/
.slider._levels {
	margin-top: 24px;
	margin-right: -50%;
}
._levels .slider-box {
	border-radius: 16px;
	margin-right: 12px;
}
.page, .uk-modal-dialog {
	min-height: calc(100vh - 200px);
}
#my_level {
	background: none !important;
	padding: 0 !important;
}
._level {
	grid-template-columns: auto;
	background: #FFF;
	grid-template-rows: auto;
	gap: 0;
}
._level>* {
	padding: 16px;
	background: #FFF;
	border-radius: 16px;
}
._level>:last-child {
	padding-top: 0;
}
.my_card, .get_next {
	padding: 20px 16px;
}
.visits .ico {
	height: 40px;
}
.visits>*>:last-child {
	display: none;
}
.my_card h2:after {
	height: 20px;
	left: calc(100% + 4px);
}
.uk-modal {
	position: static;
	height: 100%;
	background: #FFF;
}
.uk-modal-dialog {
	position: static;
	width: 100%;
	max-width: 100vw;
	margin: 0;
	padding: 0 16px 32px;
	border-radius: 0;
	overflow: hidden;
}
.bonus .label {
	top: 16px;
	right: 36px;
}
.bonus .emoji {
	height: 40px;
}
/*** <<<<< page my_office <<<<< ***/
.page:not(:first-child) {
	padding: 0 16px 32px;
	border-radius: 16px;
}
.title._back, #my_payments h2.title {
	position: relative;
	display: flex;
	align-items: stretch;
	margin: 0 -16px 32px;
	padding: 12px 16px;
	background: var(--smok);
	cursor: pointer;
	text-align: center;
}
.title._back:before {
	position: absolute;
	content: '\f104';
	display: flex;
	align-items: center;
	left: 16px;
	font-family: 'FontAwesome';
}
.not_yet {
	width: auto;
	grid-template-columns: none;
	justify-items: center;
	gap: 20px;
	margin: 40px 80px;
}
.not_yet>*>* {
	text-align: center;
}
.not_yet .emoji {
	width: 100px;
	background-size: 48px;
	padding: 20px;
}
.payments>.not_yet {
	width: 280px;
}
/*** _gifts slider start ***/
.slider._gifts {
	margin-right: -70%;
}

/*** _gifts slider end ***/
/*** >>>>> page my_payments >>>>> ***/
.payments>* {
	padding: 16px;
	border-radius: 16px;
}
.payments .info>* {
	flex: 0 0 90px !important;
}
.payments .info>:nth-child(2) {
	order: unset;
	margin-bottom: 4px;
}
.dashboard .uk-dropdown {
	padding: 8px 0 0;
	background: none;
}
.order-info>.item {
	margin: 0;
}
.order-info>.item>:nth-child(2) {
	width: 40%;
}
/*** <<<<< page my_payments <<<<< ***/
/*** >>>>> page my_quests >>>>> ***/
.quests {
	grid-template-columns: auto;
}
/*** <<<<< page my_quests <<<<< ***/
/*** >>>>> page my_account >>>>> ***/
#my_account>* {
	padding: 20px;
	border-radius: 16px;
}
.my_qr {
	grid-template-areas: 'a' 'c' 'b';
	grid-template-columns: 1fr;
	justify-items: center;
	gap: 32px;
	padding: 32px;
}
.my_qr p {
	font-size: 15px;
}
a.button.qr {
	width: 280px;
}
.qr>canvas {
	height: 280px;
}
.account {
	grid-template-columns: none;
}
.account>:first-child {
	gap: 8px;
}
.account>:last-child {
	gap: 8px;
	order: -1;
}
#relatives>* {
	padding: 16px 32px 16px 16px;
	border-radius: 16px;
}
#add-edit-person {
	grid-template-columns: auto;
}
/*** <<<<< page my_account <<<<< ***/
/*** >>>>> page free_photo >>>>> ***/

/*** <<<<< page free_photo <<<<< ***/
/*** >>>>> page faq_help >>>>> ***/
.how_to {
	grid-template-columns: repeat(2,1fr);
	gap: 8px;
}
.how_to>* {
	height: 120px;
}
.how_to .emoji {
	right: -2px;
	bottom: -2px;
	height: 48px;
}
.faq_chapter>h3 {
	margin-bottom: 16px;
}
.faq_item {
	padding: 20px;
	border-radius: 16px;
}
.faq_item>h4 {
	font-size: 16px;
	font-weight: 600;
}
.faq_item:after {
	width: 20px;
	height: 20px;
	top: 20px;
	right: 20px;
}

/*** <<<<< page faq_help <<<<< ***/
/*** >>>>> page my_partners >>>>> ***/

.partners {
	grid-template-columns: auto;
	gap: 12px;
	margin-top: 20px;
}
.partners>* {
	padding: 12px 12px 20px;
	border-radius: 16px;
}
.partners ._logo {
	height: 90px;
	padding: 0;
	border-radius: 12px;
}
.inf {
	flex-direction: column-reverse;
}
.logo {
	flex: 0 0 100px;
	margin: 0 auto 16px;
}
.partners .points {
	margin-top: 32px;
}
/*** <<<<< page my_partners <<<<< ***/
/*** >>>>> posters >>>>> ***/
.poster {
	min-height: 152px;
	padding: 20px;
	border-radius: 16px;
	cursor: pointer;
}
.poster p, .poster ul, .poster ol {
	margin-top: 8px;
}
.poster .emoji:not(.point) {
	height: 48px;
	border-radius: 10px;
	background-size: 28px;
}
.emoji.d1 {
	top: 20px;
	right: 60px;
}
.emoji.d2 {
	right: 30px;
	bottom: 52px;
	transform: none;
}
.emoji.d3 {
	top: auto;
	bottom: 20px;
	right: 60px;
}
.emoji.f1 {
	top: calc(50% - 70px);
	right: 32px;
}
.emoji.f2 {
	top: calc(50% - 24px);
	right: 24px;
}
.emoji.f3 {
	top: calc(50% + 22px);
	right: 32px;
}
.referral h3 {
	font-size: 16px;
	white-space: nowrap;
}
.referral .points {
	padding: 1px 4px;
	margin-left: 4px;
}
.emoji.r1 {
	top: 20px;
	right: 48px;
}
.emoji.r2 {
	right: 16px;
	bottom: 52px;
	transform: none;
}
.emoji.r3 {
	top: auto;
	bottom: 20px;
	right: 48px;
}
.emoji.a1 {
	top: calc(50% - 70px);
	right: 32px;
}
.emoji.a2 {
	top: calc(50% - 24px);
	right: 16px;
}
.emoji.a3 {
	top: calc(50% + 22px);
	right: 32px;
}
.about_points>* {
	max-width: 75%;
}
.about_points .point {
	height: 86px;
	top: -4px;
	right: -4px;
	bottom: auto;
}
.poster.gifts {
	display: grid;
	grid-template-columns: 4fr 3fr;
}
.poster.gifts>:first-child {
	margin-left: 24px;
}
.poster.gifts h3 {
	font-size: 15px;
}
.gifts .tick {
	height: 80px;
	padding: 8px;
}
.gifts .ico.lotus {
	top: 40px;
	left: 0;
	height: 24px;
	background-size: 16px;
}
.gifts .emoji {
	right: -4px;
	bottom: 20px;
	height: 40px;
}

/*** >>>>> posters >>>>> ***/

.scroll {
	overflow: hidden;
	max-height: fit-content;
	padding-right: 0;
}

}