/*!
Theme Name: gotokyiv
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gotokyiv
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

gotokyiv is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary: #0CAADE;
	--color-orange: #F06400;
  --bg-card: #444444;
	--bg-header: #262626;
	--bg-main: #303030;
	--bg-footer: #3B3B3B;
	--speed-fast: 0.2s;
	--speed-slow: 0.4s;
	--speed-slowest: 0.6s;
	--size-desktop: calc(100vw / 1366);
	--size-mobile: calc(100vw / 576);
}

* {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

html {
	scroll-behavior: initial!important;
	margin-top: 0px!important;
}

.x1, .x2, .x3, .x4, .x5, .x6, .x7, .x8, .x9 {
	opacity: 0;
	transform: translateX(-120px);
}
.x1 {
	transition: transform ease .7s .1s, opacity ease .7s .1s;
}
.x2 {
	transition: transform ease .7s .2s, opacity ease .7s .2s;
}
.x3 {
	transition: transform ease .7s .3s, opacity ease .7s .3s;
}
.x4 {
	transition: transform ease .7s .4s, opacity ease .7s .4s;
}
.x5 {
	transition: transform ease .7s .5s, opacity ease .7s .5s;
}
.x6 {
	transition: transform ease .7s .6s, opacity ease .7s .6s;
}
.x7 {
	transition: transform ease .7s .7s, opacity ease .7s .7s;
}
.x8 {
	transition: transform ease .7s .8s, opacity ease .7s .8s;
}
.x9 {
	transition: transform ease .7s .9s, opacity ease .7s .9s;
}
.ready .visible.x1, 
.ready .visible.x2, 
.ready .visible.x3, 
.ready .visible.x4, 
.ready .visible.x5, 
.ready .visible.x6,
.ready .visible.x7, 
.ready .visible.x8, 
.ready .visible.x9 {
	opacity: 1;
	transform: translateX(0px);
}

.y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9 {
	opacity: 0;
	transform: translateY(120px);
}
.y1 {
	transition: transform ease .7s .1s, opacity ease .7s .1s;
}
.y2 {
	transition: transform ease .7s .2s, opacity ease .7s .2s;
}
.y3 {
	transition: transform ease .7s .3s, opacity ease .7s .3s;
}
.y4 {
	transition: transform ease .7s .4s, opacity ease .7s .4s;
}
.y5 {
	transition: transform ease .7s .5s, opacity ease .7s .5s;
}
.y6 {
	transition: transform ease .7s .6s, opacity ease .7s .6s;
}
.y7 {
	transition: transform ease .7s .7s, opacity ease .7s .7s;
}
.y8 {
	transition: transform ease .7s .8s, opacity ease .7s .8s;
}
.y9 {
	transition: transform ease .7s .9s, opacity ease .7s .9s;
}
.ready .visible.y1, 
.ready .visible.y2, 
.ready .visible.y3, 
.ready .visible.y4, 
.ready .visible.y5, 
.ready .visible.y6, 
.ready .visible.y7, 
.ready .visible.y8, 
.ready .visible.y9 {
	opacity: 1;
	transform: translateX(0px);
}

#page-preloader {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 99;
}

.load:after, .loader:after {
	content: "";
	width: 66px;
	height: 66px;
	left: 50%;
	top: 50%;
	margin-left: -33px;
	margin-top: -33px;
	position: absolute;
	border-left: 4px solid #ccc;
	border-top: 4px solid #ccc;
	border-right: 4px solid #fff;
	border-bottom: 4px solid #ccc;
	border-radius: 50%;
	-moz-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-moz-animation: load-index .5s infinite linear;
	-webkit-animation: load-index .5s infinite linear;
	animation: load-index .5s infinite linear;
}

@-moz-keyframes load-index {
	0% {
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 2px dotted #ffcc01!important;
	}
	100% {
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 6px dotted #4ec9dd!important;
	}
}

@-webkit-keyframes load-index {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 2px dotted #ffcc01!important;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 6px dotted #4ec9dd!important;
	}
}

@keyframes load-index {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 2px dotted #ffcc01!important;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 6px dotted #4ec9dd!important;
	}
}

input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
  display: none;
  width : 0;
  height: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

body {
	font-family: 'Cygre', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 120%;
  color: var(--color-black);
}

body.overflow {
  overflow: hidden;
  padding-right: 17px;
}

.site#page {
	overflow: clip;
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.qrcode-wrap {
  display: none;
}

picture {
	width: 100%;
	height: 100%;
}

.single-mobile-box {
  position: relative;
	background-color: var(--bg-main);
	min-height: 100svh;
}

.single-mobile-box header.header {
  position: sticky;
  top: 0px;
  z-index: 10;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bg-header);
  overflow: hidden;
  margin: 0px auto;
}

.single-mobile-box header.header .header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5px 15px;
}

.single-mobile-box header.header .header-wrap .menu-wrap {
	width: 50px;
}

.single-mobile-box header.header .header-wrap .menu-wrap .modal-menu-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	min-width: 30px;
	height: 30px;
	background-image: url(assets/img/burger-menu-icon.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	text-decoration: none;
	font-size: 0px;
	line-height: 100%;
	font-weight: 400;
	color: transparent;
}

.single-mobile-box header.header .header-wrap .logo-wrap {
	width: calc(100% - 110px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-mobile-box header.header .header-wrap .logo-wrap .logo {
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.single-mobile-box header.header .header-wrap .logo-wrap .logo img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

.single-mobile-box header.header .header-wrap .lang-wrap {
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.single-mobile-box header.header .header-wrap .lang-wrap .language-menu {
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-mobile-box header.header .header-wrap .lang-wrap .language-menu > ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-mobile-box header.header .header-wrap .lang-wrap .language-menu > ul > li {
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-mobile-box header.header .header-wrap .lang-wrap .language-menu > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-width: 36px;
	height: 36px;
	border: 2px solid var(--color-white);
	border-radius: 6px;
	font-size: 1em;
	line-height: 100%;
	font-weight: 700;
	color: var(--color-white);
	text-decoration: none;
}

.single-mobile-box header.header .header-wrap .lang-wrap .language-menu > ul > li > a span {
	font-size: 1em;
	line-height: 100%;
	font-weight: 700;
}

.single-mobile-box section.main-section {
	display: flex;
	flex-direction: column;
	height: calc(100svh - 55px);
	overflow-y: auto;
	padding: 20px 15px 90px;
}

.single-mobile-box section.main-section::-webkit-scrollbar {
	width: 0px;
	height: 0px;
}

.single-mobile-box section.main-section .main-wrap {
	display: flex;
	flex-direction: column;
}

.single-mobile-box section.main-section .main-wrap h1 {
	font-size: 3em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 16px;
}

.single-mobile-box section.main-section .main-wrap h1 span {
	font-size: 1.25em;
}

.single-mobile-box section.main-section .main-wrap .main-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 16px;
}

.single-mobile-box section.main-section .main-wrap .main-list .list-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.single-mobile-box section.main-section .main-wrap .main-list .list-item .item-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 24px;
	overflow: hidden;
	text-decoration: none;
	background-color: var(--bg-card);
}

.single-mobile-box section.main-section .main-wrap .main-list .list-item .item-link .thumbnail {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.single-mobile-box section.main-section .main-wrap .main-list .list-item .item-link .thumbnail img {
	width: 100%;
	height: auto;
	aspect-ratio: 300 / 150;
	object-fit: cover;
}

.single-mobile-box section.main-section .main-wrap .main-list .list-item .item-link .caption {
	padding: 10px 15px;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.single-mobile-box section.main-section .main-wrap .main-list .list-item .item-link .caption p.h2 {
	font-size: 2em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 4px;
}

.single-mobile-box section.main-section .main-wrap .main-list .list-item .item-link .caption .text {
	font-size: 1.25em;
	line-height: 150%;
	font-weight: 400;
	color: var(--color-white);
	margin: 0px;
}

.single-mobile-box section.main-section .breadcrumbs {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 16px;
}

.single-mobile-box section.main-section .breadcrumbs span {
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-mobile-box section.main-section .breadcrumbs span a.back-link {
	width: 33px;
	min-width: 33px;
	height: 18px;
	background-image: url(assets/img/arrow-back-icon.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-size: 0px;
	line-height: 100%;
	font-weight: 400;
	color: transparent;
	overflow: hidden;
	text-decoration: none;
}

.single-mobile-box section.main-section .tops-wrap h1 {
	font-size: 1.25em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 16px;
}

.single-mobile-box section.main-section .tops-wrap .tops-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 10px;
}

.single-mobile-box section.main-section .tops-wrap .tops-list .list-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.single-mobile-box section.main-section .tops-wrap .tops-list .list-item .item-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--bg-card);
	border-radius: 20px;
	padding: 18px 22px;
	overflow: hidden;
	text-decoration: none;
}

.single-mobile-box section.main-section .tops-wrap .tops-list .list-item .item-link .caption {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.single-mobile-box section.main-section .tops-wrap .tops-list .list-item .item-link .caption p.h2 {
	font-size: 1.25em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	margin: 0px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.single-mobile-box section.main-section .tops-wrap .tops-list .list-item .item-link .caption p.h2::before {
	content: '';
	width: 22px;
	min-width: 22px;
	height: 32px;
	margin-right: 20px;
	background-image: url(assets/img/location-icon-gray.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.single-mobile-box section.main-section .tops-single h1 {
	font-size: 2em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 32px;
}

.single-mobile-box section.main-section .tops-single h1::before {
	content: '';
	width: 18px;
	min-width: 18px;
	height: 30px;
	background-color: #595959;
	border-top: 10px solid #78b829;
	margin-right: 20px;
}

.single-mobile-box section.main-section .tops-single .page-content {
	margin-bottom: 16px;
}

.single-mobile-box section.main-section .tops-single .single-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 14px;
}

.single-mobile-box section.main-section .tops-single .single-list .list-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.single-mobile-box section.main-section .tops-single .single-list .list-item .item-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	background-color: var(--bg-card);
	border-radius: 20px;
	padding: 18px 22px;
	overflow: hidden;
	text-decoration: none;
	font-size: 1.25em;
	line-height: 120%;
	font-weight: 500;
	color: var(--color-white);
}

.single-mobile-box section.main-section .tops-single .single-list .list-item .item-link::before {
	content: '';
	width: 40px;
	min-width: 40px;
	height: 40px;
	margin-right: 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.single-mobile-box section.main-section .tops-single .single-list .list-item.audioguide .item-link::before {
	background-image: url(assets/img/audio-icon.svg);
}

.single-mobile-box section.main-section .tops-single .single-list .list-item.places .item-link::before {
	background-image: url(assets/img/location-icon.svg);
}

.single-mobile-box section.main-section .tops-single .single-list .list-item.quest .item-link::before {
	background-image: url(assets/img/quest-icon.svg);
}

.single-mobile-box section.main-section .tops-single .single-list .list-item.ar-model .item-link::before {
	background-image: url(assets/img/ar-icon.svg);
}

.single-mobile-box section.main-section .tops-single.hide {
	display: none;
}

.single-mobile-box section.main-section:has(.tops-single) .locations-wrap {
	display: none;
}

.single-mobile-box section.main-section:has(.tops-single) .locations-wrap.show {
	display: block;
}

.single-mobile-box section.main-section:has(.tops-single) .locations-single {
	display: none;
}

.single-mobile-box section.main-section:has(.tops-single) .locations-single.show {
	display: block;
}

.single-mobile-box section.main-section:has(.tops-single) .audioguide-single {
	display: none;
}

.single-mobile-box section.main-section:has(.tops-single) .audioguide-single.show {
	display: block;
}

.single-mobile-box section.main-section .locations-wrap h1,
.single-mobile-box section.main-section .locations-wrap h2 {
	font-size: 1.25em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 16px;
}

.single-mobile-box section.main-section .locations-wrap .title-wrap {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.single-mobile-box section.main-section .locations-wrap .title-wrap h1 {
	margin: 0px;
}

.single-mobile-box section.main-section .locations-wrap .title-wrap a.map-link {
	font-size: 1.25em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	margin: 0px;
	text-decoration: none;
}

.single-mobile-box section.main-section .locations-wrap .locations-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 10px;
}

.single-mobile-box section.main-section .locations-wrap .locations-list .list-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.single-mobile-box section.main-section .locations-wrap .locations-list .list-item .item-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	background-color: var(--bg-card);
	border-radius: 20px;
	padding: 10px;
	overflow: hidden;
	text-decoration: none;
	gap: 20px;
}

.single-mobile-box section.main-section .locations-wrap .locations-list .list-item .item-link .thumbnail {
	display: flex;
	flex-direction: column;
	width: 30%;
	min-width: 30%;
	border-radius: 15px;
	aspect-ratio: 95 / 85;
	overflow: hidden;
	background-color: var(--bg-main);
}

.single-mobile-box section.main-section .locations-wrap .locations-list .list-item .item-link .thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-mobile-box section.main-section .locations-wrap .locations-list .list-item .item-link .caption {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.single-mobile-box section.main-section .locations-wrap .locations-list .list-item .item-link .caption p.h2 {
	font-size: 1.25em;
	line-height: 120%;
	font-weight: 500;
	color: var(--color-white);
	margin: 0px;
}

.single-mobile-box section.main-section > div > span.spinner {
	position: fixed;
	z-index: 1000;
	left: 0px;
	top: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0px;
	font-size: 0px;
	line-height: 100%;
	font-weight: 400;
	color: transparent;
	overflow: hidden;
	background: #00000073;
}

.single-mobile-box section.main-section > div > span.spinner::after {
	content: '';
	width: 40px;
	height: 40px;
	border: 3px solid var(--color-white);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: 0.5s linear infinite wpc-spinner;
}

@keyframes wpc-spinner {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(360deg)
	}
}

.single-mobile-box section.main-section .locations-single .title-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
}

.single-mobile-box section.main-section .locations-single .title-wrap h1 {
	font-size: 2em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	margin: 0px;
}

.single-mobile-box section.main-section .locations-single .title-wrap .share-btn {
	font-size: 1em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	margin: 0px;
	text-decoration: none;
	background: none;
	border: none;
	box-shadow: none;
	outline: none;
	cursor: pointer;
}

.single-mobile-box section.main-section .locations-single .thumbnail {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 30px;
	overflow: hidden;
	margin-bottom: 16px;
}

.single-mobile-box section.main-section .locations-single .thumbnail img {
	width: 100%;
	height: auto;
	/* aspect-ratio: 350 / 200; */
	object-fit: cover;
}

.single-mobile-box section.main-section .locations-single .route-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 16px;
}

.single-mobile-box section.main-section .locations-single .route-wrap .route-btn {
	font-size: 1.375em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	background-color: var(--bg-card);
	border: 1px solid #6a696a;
	padding: 10px;
	border-radius: 20px;
	width: 100%;
	text-align: center;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-mobile-box section.main-section .locations-single .route-wrap .route-btn::before {
	content: '';
	width: 15px;
	min-width: 15px;
	height: 25px;
	margin-right: 10px;
	background-image: url(assets/img/location-icon.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.single-mobile-box section.main-section .locations-single .content-wrap {
	border-radius: 20px;
	background-color: var(--color-white);
	display: flex;
	flex-direction: column;
	padding: 20px;
	width: 100%;
}

.single-mobile-box section.main-section .locations-single .content-wrap .page-content p {
	color: var(--color-black);
}

.single-mobile-box section.main-section .locations-single .content-wrap .page-content ul li,
.single-mobile-box section.main-section .locations-single .content-wrap .page-content ol li {
	color: var(--color-black);
}

.single-mobile-box section.main-section .info-wrap h1 {
	font-size: 1.25em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 16px;
}

.single-mobile-box section.main-section .info-wrap h1::before {
	content: '';
	width: 34px;
	min-width: 34px;
	height: 34px;
	margin-right: 12px;
	background-image: url(assets/img/info-icon.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.single-mobile-box section.main-section .info-wrap.single-wrap h1 {
	text-transform: none;
}

.single-mobile-box section.main-section .info-wrap.single-wrap h1::before {
	display: none;
}

.page-content p {
	font-size: 1em;
	line-height: 150%;
	font-weight: 400;
	color: var(--color-white);
	margin-bottom: 16px;
}

.page-content ul,
.page-content ol {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding-left: 16px;
	margin-bottom: 16px;
}

.page-content ul li,
.page-content ol li {
	font-size: 1em;
	line-height: 150%;
	font-weight: 400;
	color: var(--color-white);
	margin: 0px;
}

.page-content *:last-child {
	margin-bottom: 0px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-image {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 30px;
	overflow: hidden;
	margin-bottom: 16px;
	background-color: var(--bg-card);
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-image .item-thumbnail {
	display: flex;
	flex-direction: column;
	aspect-ratio: 960 / 780;
	width: 100%;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-image .item-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-image:has(.item-thumbnail img[src="false"]) {
	display: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player {
  display: flex;
  flex-direction: column;
  width: 100%;
	margin-bottom: 32px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
  background-color: var(--color-white);
	border-radius: 20px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-title {
  margin-bottom: 20px;
  display: flex;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-title h2 {
  font-size: 1.25em;
  color: var(--color-black);
  line-height: 120%;
  font-weight: 700;
  margin: 0px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .time-controls {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .time-controls .progress-container {
  position: relative;
  height: 6px;
  width: 100%;
  border-radius: 5px;
  background-color: #CECECE;
  cursor: pointer;
  overflow: visible;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .time-controls .progress-container .progress-bar {
  display: flex;
  height: 100%;
  width: 0;
  background-color: var(--color-black);
  position: relative;
  border-radius: 5px;
  overflow: visible;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .time-controls .progress-container .progress-bar::after {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(70%, -50%);
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: var(--color-black);
  display: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .time-controls .time-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  position: relative;
  min-height: 23px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .time-controls .time-buttons span {
  font-size: 0.875em;
  line-height: 100%;
  font-weight: 400;
  color: var(--color-black);
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .time-controls .time-buttons > button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: none;
  background: transparent;
  font-size: 0.875em;
  line-height: 120%;
  font-weight: 400;
  color: var(--color-black);
  border: 1px solid var(--color-black);
  border-radius: 6px;
  padding: 2px 6px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons > button {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  outline: none;
  display: flex;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons > button svg {
  width: 100%;
  height: 100%;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons .play-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons .play-button > button {
  width: 45px;
  height: 45px;
  border: none;
  background: transparent;
  outline: none;
  display: flex;
  transition: 0.4s;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons .play-button > button.disabled {
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons .play-button > button svg {
  width: 100%;
  height: 100%;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons .play-button > button#playPause {
  width: 60px;
  height: 60px;
  background-color: var(--color-orange);
  border-radius: 100%;
  padding: 15px;
  margin: 0px 16px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons .play-button > button#playPause span {
  display: flex;
  width: 100%;
  height: 100%;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons .play-button > button#playPause span.pause-icon {
  display: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons .play-button > button#playPause.play span.pause-icon {
  display: flex;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons .play-button > button#playPause.play span.play-icon {
  display: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .player .player-controls .player-buttons .play-button > button#playPause span svg {
  fill: var(--color-white);
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container {
  display: flex;
  width: 100%;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card {
  border: none;
  background: transparent;
  width: 100%;
  border-radius: 0px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-body-wrap {
  width: 100%;
  /* max-height: 250px;
  overflow-y: auto; */
  position: relative;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-body-wrap::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 20px;
  background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 1) 100%);
  user-select: none;
  pointer-events: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-body-wrap::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 20px;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 1) 100%);
  user-select: none;
  pointer-events: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-body-wrap .card-body {
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  padding: 20px 0px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-body-wrap .card-body p {
  font-size: 1em;
  line-height: 150%;
  font-weight: 400;
  color: var(--color-black);
  margin-bottom: 12px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-body-wrap .card-body p:last-child {
  margin-bottom: 0px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-header {
  width: 100%;
  padding: 0px;
  border: none;
  background: transparent;
  outline: none;
  transition: 0.2s;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-header:has(button:not(.collapsed)) {
  padding-top: 20px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-header button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 1em;
  font-weight: 500;
  background-color: transparent;
  color: var(--color-black);
  text-decoration: none;
  cursor: pointer;
  border-radius: 15px;
  border: 1px solid var(--color-black);
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-header button span {
  display: flex;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-header button:not(.collapsed) span.show {
  display: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-header button.collapsed span.hide {
  display: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-header button span.cross {
  width: 20px;
  height: 20px;
  margin-left: 12px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-header button span.cross svg {
  width: 100%;
  height: 100%;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-header button.collapsed span.cross {
  transform: rotate(180deg);
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-player .audio-player-wrap .accordion-container .card .card-header button::after {
  display: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* padding: 20px;
  background-color: #262626; */
  color: var(--color-white);
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist::before {
  content: '';
  position: absolute;
  top: 34px;
  left: 0px;
  width: 100%;
  height: 20px;
  background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(48, 48, 48, 0.7) 60%, rgba(48, 48, 48, 1) 100%);
  user-select: none;
  pointer-events: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 20px;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(48, 48, 48, 0.7) 60%, rgba(48, 48, 48, 1) 100%);
  user-select: none;
  pointer-events: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist h3 {
  font-size: 1.25em;
  color: var(--color-white);
  line-height: 120%;
  font-weight: 700;
  margin-bottom: 10px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist ul {
  list-style: none;
  padding: 20px 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 500px;
  counter-reset: playlist-counter;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist ul::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist ul li {
  font-size: 1em;
  line-height: 120%;
  font-weight: 500;
  color: var(--color-white);
  border: 1px solid var(--color-white);
  border-radius: 15px;
  display: flex;
  align-items: center;
  padding: 12px 18px;
  transition: 0.2s;
  cursor: pointer;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist ul li span > span {
  display: none;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist ul li:not(:last-child) {
  margin-bottom: 10px;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist ul li:nth-child(1n + 1)::before {
  counter-increment: playlist-counter;
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist ul li::before {
  content: counter(playlist-counter);
  width: 30px;
  min-width: 30px;
  height: 30px;
  background-color: var(--color-white);
  border-radius: 100%;
  margin-right: 10px;
  font-weight: 500;
  line-height: 100%;
  color: #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

/* .single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist ul li:first-child::before {
  content: '●';
} */

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist ul li.active {
  color: #000000;
  background-color: var(--color-white);
}

.single-mobile-box section.main-section .audioguide-single .audio-guide-playlist .player-playlist ul li.active::before {
  background-color: var(--color-orange);
  color: var(--color-white);
}

.single-mobile-box footer.footer {
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 10;
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0px;
	background-color: var(--bg-footer);
	overflow: hidden;
	margin: 0px auto;
}

.single-mobile-box footer.footer .footer-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 5px 15px;
}


.single-mobile-box footer.footer .footer-wrap .footer-menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.single-mobile-box footer.footer .footer-wrap .footer-menu > ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0px;
	margin: 0px;
	list-style: none;
	gap: 15px;
}

.single-mobile-box footer.footer .footer-wrap .footer-menu > ul > li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.single-mobile-box footer.footer .footer-wrap .footer-menu > ul > li > a {
	border-radius: 20px;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 0px;
	line-height: 100%;
	font-weight: 400;
	color: transparent;
	overflow: hidden;
	text-decoration: none;
	height: 60px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50% 50%;
}

.single-mobile-box footer.footer .footer-wrap .footer-menu > ul > li.current-menu-item > a {
	background-color: var(--color-primary);
}

.single-mobile-box footer.footer .footer-wrap .footer-menu > ul > li.main-page-btn > a {
	background-image: url(assets/img/home-icon.svg);
}

.single-mobile-box footer.footer .footer-wrap .footer-menu > ul > li.locations-page-btn > a {
	background-image: url(assets/img/location-icon.svg);
}

.single-mobile-box footer.footer .footer-wrap .footer-menu > ul > li.info-page-btn > a {
	background-image: url(assets/img/info-icon.svg);
}

.single-mobile-box footer.footer .footer-wrap .footer-menu > ul > li.menu-page-btn > a {
	background-image: url(assets/img/burger-menu-icon.svg);
}

/* .single-mobile-box:has(.links-wrap) header.header {
	display: none;
}

.single-mobile-box:has(.links-wrap) footer.footer {
	display: none;
} */

.single-mobile-box section.main-section:has(.links-wrap) {
	/* height: 100svh;
	padding: 20px 15px;
	background-color: var(--bg-header); */
	position: relative;
}

.single-mobile-box section.main-section .links-wrap {
	/* padding: 80px 0px 0px; */
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.single-mobile-box section.main-section .links-wrap .logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.single-mobile-box section.main-section .links-wrap .logo-wrap .logo {
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.single-mobile-box section.main-section .links-wrap .logo-wrap .logo img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

.single-mobile-box section.main-section .links-wrap h1 {
	font-size: 1.5em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 50px;
}

.single-mobile-box section.main-section .links-wrap .links-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 12px;
	margin-bottom: 50px;
}

.single-mobile-box section.main-section .links-wrap .links-list .links-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.single-mobile-box section.main-section .links-wrap .links-list .links-item .item-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--bg-card);
	border-radius: 20px;
	padding: 18px 22px;
	overflow: hidden;
	text-decoration: none;
	font-size: 1.25em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	text-align: center;
}

.single-mobile-box section.main-section .links-wrap .copyright {
	margin-top: auto;
	font-size: 1em;
	line-height: 150%;
	font-weight: 700;
	color: #6c6c6c;
	text-align: center;
}

.share-btn.float-btn {
	position: absolute;
	top: 20px;
	right: 20px;
  background: var(--color-white);
  color: var(--color-white);
  border: none;
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: 100%;
  cursor: pointer;
  font-size: 0px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-btn.float-btn svg {
  width: 60%;
  height: 60%;
}

.share-menu,
.watch-ar-modal {
  position: fixed;
  z-index: 1000;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  user-select: none;
  pointer-events: none;
  background: #00000073;
  transition: 0.2s;
  padding: 15px;
}

.share-menu.show,
.watch-ar-modal.show {
  opacity: 1;
  user-select: auto;
  pointer-events: all;
}

.share-wrap,
.ar-modal-wrap {
  background: var(--bg-main);
  border: 1px solid var(--bg-header);
  border-radius: 10px;
  padding: 8px 0;
  max-width: 470px;
  width: 100%;
  z-index: 9999; /* поверх усіх елементів */
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.ar-modal-wrap {
	padding: 8px 12px;
}

.ar-modal-wrap p.h2 {
	font-size: 1.25em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	margin: 20px 0px;
	text-align: center;
}

.ar-modal-wrap p:not(.h2) {
	font-size: 1em;
	line-height: 150%;
	font-weight: 400;
	color: var(--color-white);
	margin-bottom: 16px;
}

.ar-modal-wrap .thumbnail {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 20px;
}

.ar-modal-wrap .thumbnail img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
}

.ar-modal-wrap p.h3 {
	margin: 20px 0px;
	text-align: center;
}

.watch-ar-modal .ar-modal-wrap .not-support-wrap {
	display: none;
}

.watch-ar-modal.not-support .ar-modal-wrap .not-support-wrap {
	display: block;
}

.watch-ar-modal .ar-modal-wrap .list-item {
	display: flex;
	align-items: center;
	margin-top: 12px;
	margin-bottom: 20px;
}

.watch-ar-modal .ar-modal-wrap .list-item .item-link {
	font-size: 1em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	background-color: var(--bg-card);
	border: 1px solid #6a696a;
	padding: 10px;
	border-radius: 20px;
	width: 100%;
	text-align: center;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.share-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 1em;
  text-decoration: none;
  color: var(--color-white);
  background: none;
  border: none;
  text-align: left;
}

.share-item::before {
  content: '';
  width: 32px;
  min-width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 10px;
  border-radius: 100%;
}

.share-item#copyLink::before {
  background-image: url(assets/img/copy-icon.svg);
}

.share-item#shareX::before {
  background-image: url(assets/img/x-icon.svg);
}

.share-item#shareFb::before {
  background-image: url(assets/img/facebook-icon.svg);
}

.share-item#shareTg::before {
  background-image: url(assets/img/telegram-icon.svg);
}

.share-item#shareWa::before {
  background-image: url(assets/img/whatsapp-icon.svg);
}

.share-item:not(:last-child) {
  border-bottom: 1px solid var(--bg-header);
}

.modal-menu {
  position: fixed;
  left: -100%;
  top: 0;
  max-width: 80%;
  width: 100%;
  height: 100%;
  max-height: 100svh;
  background-color: var(--bg-header);
  opacity: 0;
  z-index: 101;
  pointer-events: none;
  transition: var(--speed-slow);
  /* overflow-y: auto; */
  box-shadow: 0 0 10px 0 #00000078;
  display: flex;
  flex-direction: column;
  padding: 55px 0px 20px;
}

.modal-menu.show {
  opacity: 1;
  left: 0px;
  z-index: 101;
  pointer-events: all;
}

.modal-menu::before {
  content: '';
  position: absolute;
  top: 55px;
  left: 0px;
  width: 100%;
  height: 20px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(38, 38, 38, 0.7) 60%, rgba(38, 38, 38, 1) 100%);
  user-select: none;
  pointer-events: none;
}

.modal-menu::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 0px;
  width: 100%;
  height: 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(38, 38, 38, 0.7) 60%, rgba(38, 38, 38, 1) 100%);
  user-select: none;
  pointer-events: none;
}

.modal-menu .modal-menu-btn {
  position: absolute;
  top: 12px;
  left: 15px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.modal-menu .modal-menu-btn::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 3px;
  background-color: var(--color-white);
  transform: rotate(45deg);
}

.modal-menu .modal-menu-btn::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 3px;
  background-color: var(--color-white);
  transform: rotate(-45deg);
}

.modal-menu .menus {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0px 15px;
  overflow-y: auto;
}

.modal-menu .menus::-webkit-scrollbar {
	width: 0px;
	height: 0px;
}

.modal-menu .menus .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	margin-bottom: 16px;
	text-decoration: none;
}

.modal-menu .menus .logo img {
  width: 100%;
	height: 60px;
}

.modal-menu .menus p.h2 {
  font-size: 1.25em;
  line-height: 120%;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 16px;
}

.modal-menu .menus p {
  font-size: 1em;
  line-height: 150%;
  font-weight: 400;
  color: var(--color-white);
  margin-bottom: 16px;
}

#iframeModalOverlay {
	position: fixed;
	inset: 0;
	background: #00000073;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

#iframeModalOverlay.hide {
	display: none;
}

#iframeModal {
	width: 100%;
	height: 100%;
	background: var(--bg-card);
	border-radius: 0px;
	overflow: hidden;
	position: relative;
}

#iframeModal iframe {
	width: 100%;
	height: 100%;
	border: none;
}

#iframeClose {
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
	font-size: 2.5em;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.6);
	border: none;
	color: var(--color-white);
	padding: 10px;
}

#iframeClose:hover {
	background-color: #000000;
}

@media screen and (min-width: 600px) {
  .site#page {
    background-color: var(--bg-main);
  }

  .site#page::after {
    content: '';
    position: fixed;
    z-index: 1;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.35) 80%,
    rgba(0,0,0,0.6) 100%);
    user-select: none;
    pointer-events: none;
  }

  .qrcode-wrap {
    position: fixed;
    z-index: 2;
    right: 32px;
    bottom: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px;
  }

  .qrcode-wrap span {
    font-size: 14px;
    line-height: 120%;
    font-weight: 400;
    color: var(--color-white);
    text-align: center;
    margin-bottom: 10px;
  }

  .qrcode-wrap .qrcode-img {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .qrcode-wrap .qrcode-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .single-mobile-box {
    position: relative;
    z-index: 3;
    max-width: 500px;
    width: 100%;
    min-height: calc(100svh - 40px);
    margin: 40px auto 0px;
    box-shadow: 0 0 10px 0 #00000078;
    border-radius: 20px 20px 0px 0px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

	.single-mobile-box section.main-section {
		display: flex;
		flex-direction: column;
		height: calc(100svh - 95px);
	}

	.modal-menu {
    position: absolute;
    max-height: none;
  }

	/* .single-mobile-box section.main-section:has(.links-wrap) {
		height: calc(100svh - 40px);
	} */

	#iframeClose {
		top: 20px;
		right: 20px;
		font-size: 3em;
		width: 40px;
		height: 40px;
	}
}






.quest-single .hide {
	display: none;
}

.quest-single .next-mission {
	display: none;
	font-weight: 400;
	width: 100%;
	height: 50px;
	font-size: 1em;
	background:var(--color-black);
	margin-top: 16px;
	color: var(--color-white);
	border-radius: 16px;
	cursor: pointer;
}

.quest-single .next-mission span {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quest-single .numbers-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.single-mobile-box section.main-section .quest-single .numbers-wrap .breadcrumbs {
	margin: 0px;
}

.quest-single .numbers-wrap .numbers {
	display: flex;
	align-items: center;
	font-size: 1em;
	line-height: 120%;
	font-weight: 400;
	color: var(--color-white);
}

.quest-single .numbers-wrap .numbers.finish {
	display: none;
}

.quest-single #progresslineBar {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
	width: 100%;
	box-sizing: border-box;
	background: var(--color-primary);
	border-radius: 6px;
	overflow: hidden;
}

.quest-single .progressline-step {
	width: 100%;
	height: 5px;
	background: var(--color-black);
	transition: background 0.3s;
}

.quest-single .progressline-step.active {
	background: var(--color-white);
}

.quest-single #progresslineBar.finish {
	display: none;
}

.quest-single #questContainer {
	position: relative;
	width: 100%;
	overflow: clip;
	background-size: cover;
	background-position: 0% 0%;
	background-repeat: no-repeat;
}

.quest-single #start {
	font-weight: 400;
	width: 100%;
	height: 50px;
	font-size: 1em;
	display: flex;
	background:var(--color-orange);
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	margin-top: 16px;
	border-radius: 16px;
}

.quest-single .quest-screen {
	position: absolute;
	width: 100%;
	opacity: 0;
	transform: translateX(100%);
	transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
}

.quest-single .quest-screen.active {
	opacity: 1;
	transform: none!important;
	position: relative;
}

.quest-single .quest-screen.prev {
	transform: translateX(-100%);
	opacity: 0;
}

.quest-single .quest-screen .img {
	position:relative;
	width: 100%;
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	border-radius: 30px;
	overflow: hidden;
	background-color: var(--bg-card);
}

.quest-single .quest-screen .img .hint-wrap {
	background: #F0F0F0D9;
	border-radius: 20px;
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 15px;
	padding: 12px;
	color: var(--color-black);
	display: flex;
	flex-direction: column;
	text-align: left;
	transition: 0.2s;
}

.quest-single .quest-screen .img .hint-wrap .title {
	font-size: 1em;
	font-weight: 700;
	margin-bottom: 8px;
}

.quest-single .quest-screen .img .hint-wrap .text {
	font-weight: 400;
	font-size: 0.875em;
}

.quest-single .quest-screen .img .hint-wrap .close {
	position: absolute;
	right: 12px;
	top: 12px;
	width: 10px;
	height: 10px;
	background-image: url(assets/img/close.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
}

.quest-single .quest-screen .img .hint-wrap.closed {
	opacity: 0;
	user-select: none;
	pointer-events: none;
}

.quest-single .quest-screen .img .img-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.quest-single .quest-screen .img .img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quest-single .quest-screen .caption {
	background-color: var(--color-white);
	padding: 20px;
	color: var(--color-black);
	text-align: left;
	width: 100%;
	border-radius: 20px;
	margin-bottom: 32px;
}

.quest-single .quest-screen .caption span.uppertitle {
	font-size: 1em;
	color: var(--color-primary);
	line-height: 100%;
	font-weight: 700;
	margin-bottom: 16px;
	display: flex;
}

.quest-single .quest-screen .caption h2 {
	font-size: 1.25em;
	color: var(--color-black);
	line-height: 120%;
	font-weight: 700;
	margin-bottom: 16px;
}

.quest-single .quest-screen .caption h2:last-child {
	margin-bottom: 0px;
}

.quest-single .quest-screen .caption:has(h2:first-child:last-child) {
	padding: 0px;
	background: none;
	border-radius: 0px;
	margin-bottom: 16px;
}

.quest-single .quest-screen .caption h2:first-child:last-child {
	font-size: 1.5em;
	color: var(--color-white);
}

.quest-single .quest-screen .caption span.undertitle {
	padding-top: 12px;
	border-top: 1px solid var(--color-black);
	color: var(--color-black);
	font-size: 1.125em;
	line-height: 100%;
	font-weight: 700;
	margin-bottom: 16px;
	display: flex;
}

.quest-single .quest-screen .caption p {
	font-size: 1em;
	color: var(--color-black);
	line-height: 150%;
	font-weight: 400;
	margin-bottom: 16px;
	text-align: left;
}

.quest-single .quest-screen .caption p:last-child {
	margin-bottom: 0px;
}

.quest-single .quest-screen .caption .player {
	padding: 12px 14px;
	border: 1px solid var(--color-primary);
	margin-bottom: 0px;
	margin-top: 20px;
	border-radius: 10px;
}

.quest-single .quest-screen .caption:has(.show-more-wrap) .player {
	margin-bottom: 20px;
}

.quest-single .quest-screen .caption .player .controls {
	display: flex;
	align-items: center;
	gap: 14px;
}

.quest-single .quest-screen .caption .player .controls .play-pause {
	cursor: pointer;
	border: none;
	background: transparent;
	color: var(--color-black);
	width: 24px;
	min-width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.quest-single .quest-screen .caption .player .controls .play-pause span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.quest-single .quest-screen .caption .player .controls .play-pause span svg {
	width: 100%;
	height: 100%;
	fill: var(--color-primary);
}

.quest-single .quest-screen .caption .player .controls .play-pause span.pause-icon {
	display: none;
}

.quest-single .quest-screen .caption .player .controls .play-pause.playing span.play-icon {
	display: none;
}

.quest-single .quest-screen .caption .player .controls .play-pause.playing span.pause-icon {
	display: flex;
}

.quest-single .quest-screen .caption .player .controls .progress {
	flex-grow: 1;
	height: 6px;
	background: #D7D7D8;
	border-radius: 5px;
	cursor: pointer;
}

.quest-single .quest-screen .caption .player .controls .progress .progress-filled {
	height: 100%;
	background: var(--color-primary);
	width: 0%;
	border-radius: 5px;
	position: relative;
}

.quest-single .quest-screen .caption .player .controls .progress .progress-filled::after {
	content: '';
	width: 12px;
	height: 12px;
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translate(50%, -50%);
	background: var(--color-primary);
	border-radius: 100%;
}

.quest-single .show-more-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.quest-single .show-more-wrap .show-more-content {
	position: relative;
}

.quest-single .show-more-wrap.show:not(.full) .show-more-content {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	width: 100%;
}

.quest-single .show-more-wrap .show-more-content > *:last-child {
	margin-bottom: 0px;
}

.quest-single .show-more-wrap.open:not(.full) .show-more-content {
	display: block;
}

.quest-single .show-more-wrap.show:not(.full) .show-more-content::after {
	content: '';
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 21px;
	background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
	transition: 0.2s;
}

.quest-single .show-more-wrap.open:not(.full) .show-more-content::after {
	opacity: 0;
}

.quest-single .show-more-wrap .show-more {
	display: none;
}

.quest-single .show-more-wrap.show:not(.full) .show-more {
	display: flex;
	align-items: center;
	position: relative;
	margin-top: 12px;
	cursor: pointer;
}

.quest-single .show-more-wrap .show-more::after {
	content: '';
	width: 12px;
	min-width: 12px;
	height: 12px;
	background-image: url(assets/img/arrow-back-gray.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-left: 8px;
	transform: rotate(270deg);
	transition: 0.2s;
}

.quest-single .show-more-wrap.open .show-more::after {
	transform: rotate(90deg);
}

.quest-single .show-more-wrap .show-more span {
	font-size: 1em;
	line-height: 120%;
	font-weight: 400;
	color: var(--color-black);
}

.quest-single .show-more-wrap .show-more span.less {
	display: none;
}

.quest-single .show-more-wrap.open .show-more span.more {
	display: none;
}

.quest-single .show-more-wrap.open .show-more span.less {
	display: flex;
}

.quest-single .quest-screen .task {
	text-align: left;
	padding: 0px;
	background-color: var(--bg-main);
	width: 100%;
	color: var(--color-white);
}

.quest-single .quest-screen .task h3 {
	text-align: left;
	font-size: 1.25em;
	line-height: 1;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 16px;
}

.quest-single .quest-screen .task p {
	font-size: 1em;
	font-weight: 400;
	text-align: left;
	margin-bottom: 16px;
	line-height: 150%;
}

.quest-single .quest-screen .task p.qst {
	font-size: 1.125em;
	font-weight: 700;
	line-height: 120%;
}

.quest-single .answers-container {
	margin-top: 16px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.quest-single .answers-container div {
	padding: 8px 10px;
	border: 1px solid var(--color-white);
	transition: background 0.3s, border-color 0.3s;
	font-weight: 400;
	text-align: left;
	width: 100%;
	line-height: 150%;
	font-size: 1em;
	min-height: 50px;
	display: flex;
	align-items: center;
	background-color: transparent;
	color: var(--color-white);
	border-radius: 12px;
	cursor: pointer;
}

.quest-single .answers-container div.selected {
	background: var(--color-white);
	color: var(--color-black);
}

.quest-single .answers-container div.correct {
	background: var(--color-white);
	color: var(--color-black);
}

.quest-single .answers-container div.wrong {
	background: var(--color-white);
	color: var(--color-black);
}

.quest-single .answers-container div .marker {
	width: 20px;
	min-width: 20px;
	height: 20px;
	border-radius: 100%;
	border: 1px solid var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-right: 8px;
}

.quest-single .answers-container div.selected .marker {
	border-color: var(--color-black);
	background: var(--color-black);
}

.quest-single .answers-container div .marker::after {
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 100%;
	background-color: transparent;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.quest-single .answers-container div.selected .marker::after {
	background-image: url(assets/img/correct-white.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 60% 65%;
}

.quest-single .answers-container div.correct .marker {
	border-color: #92BE7F;
	background: #92BE7F;
}

.quest-single .answers-container div.correct .marker::after {
	background-image: url(assets/img/correct-white.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 60% 67%;
}

.quest-single .answers-container div.wrong .marker {
	border-color: #781919;
	background: #781919;
}

.quest-single .answers-container div.wrong .marker::after {
	background-image: url(assets/img/close-white.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 62% 67%;
}

.quest-single #verify {
	margin-top: 16px;
	font-weight: 400;
	width: 100%;
	height: 50px;
	background: var(--color-black);
	color: var(--color-white);
	user-select: none;
	pointer-events: none;
	border-radius: 16px;
	transition: 0.3s;
	opacity: 0.5;
	cursor: pointer;
}

.quest-single #verify span {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quest-single #verify.selected {
	background: var(--color-black);
	color: var(--color-white);
	user-select: auto;
	pointer-events: all;
	opacity: 1;
}

.quest-single .answer {
	margin-top: 16px;
	font-weight: 400;
	width: 100%;
	height: 50px;
	font-size: 1em;
	border-radius: 12px;
	display: none;
}

.quest-single .answer span {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quest-single .answer.correct {
	background: var(--color-white);
	color: var(--color-black);
}

.quest-single .answer.wrong {
	background: var(--color-white);
	color: var(--color-black);
}

.quest-single .popup-next-wrap {
	opacity: 0;
	user-select: none;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 30px);
	max-width: 470px;
	background-color: var(--bg-main);
	border: 1px solid var(--bg-header);
	box-shadow: 0 0 10px 0 #00000078;
	padding: 20px 15px;
	z-index: 5;
	border-radius: 10px;
	transition: 0.2s;
}

.quest-single .popup-next-wrap::before {
	content: '';
	width: 50px;
	height: 50px;
	border-radius: 100%;
	margin: 0px auto 16px;
	background-color: var(--color-orange);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50% 50%;
}

.quest-single .popup-next-wrap.correct::before {
	background-image: url(assets/img/correct-white.svg);
	background-color: #92BE7F;
}

.quest-single .popup-next-wrap.wrong::before {
	background-image: url(assets/img/close-white.svg);
	background-color: #781919;
}

.quest-single .popup-next-wrap p.title {
	font-size: 1.25em;
	line-height: 100%;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 16px;
}

.quest-single .popup-next-wrap p.text {
	font-size: 1em;
	line-height: 150%;
	font-weight: 400;
	color: var(--color-white);
	margin-bottom: 32px;
}

.quest-single .popup-next-wrap p.text b {
	font-weight: 700;
}

.quest-single .popup-next-wrap .buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.quest-single .popup-next-wrap .next-mission {
	margin: 0px;
	background-color: var(--color-black);
	display: flex;
	border-radius: 16px;
	transition: 0.4s;
}

.quest-single .popup-next-wrap .next-mission:hover {
	background-color: var(--color-black);
	color: var(--color-white);
}

.quest-single .popup-next-wrap.closed {
	display: none;
}

.quest-single .quest-screen:has(.task .answer.correct:not(.hide)) .popup-next-wrap.correct {
	opacity: 1;
	user-select: auto;
	pointer-events: all;
}

.quest-single .quest-screen:has(.task .answer.wrong:not(.hide)) .popup-next-wrap.wrong {
	opacity: 1;
	user-select: auto;
	pointer-events: all;
}

.quest-single #questContainer .popup-bg {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: #00000073;
	z-index: 4;
	opacity: 0;
	user-select: none;
	pointer-events: none;
	transition: 0.2s;
}

.quest-single #questContainer .popup-bg.show {
	opacity: 1;
	user-select: auto;
	pointer-events: all;
}

.quest-single .quest-screen:has(.task .answer.correct:not(.hide)) .popup-next-wrap.correct::before {
	animation: bounceCheckmark 0.6s ease-out;
	transform-origin: center;
}

.quest-single .quest-screen:has(.task .answer.wrong:not(.hide)) .popup-next-wrap.wrong::before {
	animation: errorPopShake 0.6s ease-out;
	transform-origin: center;
}

.quest-single #end > div {
	width: 100%;
	/* height: calc(100svh - 68px); */
}

.quest-single #end > div > *:not(.bg) {
	position: relative;
	z-index: 2;
}

.quest-single #end h2 {
	text-align: center;
	font-size: 1.5em;
	line-height: 120%;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 20px;
}

.quest-single #end h3 {
	font-size: 1.25em;
	margin-top: 16px;
	margin-bottom: 16px;
	text-align: center;
	font-weight: 700;
	color: var(--color-white);
}

.quest-single #end p {
	text-align: center;
	margin-bottom: 16px;
}

.quest-single #end .result {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}

.quest-single #end .stars {
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	font-size: 3em;
	color: var(--color-white);
	width: 80%;
	line-height: 100%;
}

.quest-single #end .stars span {
	color: var(--color-white);
}

.quest-single #end.active .stars span {
	animation: bounceCheckmark 0.6s ease-out;
	transform-origin: center;
}

.quest-single #end .stars span:nth-child(1) {
	animation-delay: 0.3s;
	animation-fill-mode: both;
}

.quest-single #end .stars span:nth-child(2) {
	animation-delay: 0.6s;
	animation-fill-mode: both;
}

.quest-single #end .stars span:nth-child(3) {
	animation-delay: 0.9s;
	animation-fill-mode: both;
}

.quest-single #end .stars span:nth-child(4) {
	animation-delay: 1.2s;
	animation-fill-mode: both;
}

.quest-single #end .stars span:nth-child(5) {
	animation-delay: 1.5s;
	animation-fill-mode: both;
}

.quest-single #end .stars span.active {
	color: var(--color-primary);
}

.quest-single #end .stars img {
	display: block;
	width: 42px;
	aspect-ratio: 1/1;
	margin: 0px 10px;
}

.quest-single #end .result p {
	font-weight: 700;
	text-align: center;
	font-size: 1em;
}

.quest-single #again {
	margin-top: 32px;
	font-weight: 400;
	text-align: center;
	width: 100%;
	height: 50px;
	font-size: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-white);
	color: var(--color-black);
	border-radius: 16px;
	cursor: pointer;
}

.quest-single #share {
	font-weight: 400;
	width: 100%;
	height: 50px;
	font-size: 1em;
	display: flex;
	background: var(--color-black);
	align-items: center;
	justify-content: center;
	margin-top: 16px;
	color: var(--color-white);
	border-radius: 16px;
	cursor: pointer;
}

@keyframes bounceCheckmark {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes errorPopShake {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(1.1);
    opacity: 1;
  }
  60% {
    transform: scale(1);
  }
  70% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
  90% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}