html, body, div, span,
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

:focus {
  outline: 0;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

html {
  font-size: 100%; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
}

a:active,
a:hover {
  outline: 0;
}

img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%; /* 1 */
  margin: 0; /* 2 */
  vertical-align: baseline; /* 3 */
  *vertical-align: middle; /* 3 */
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
  *overflow: visible; /* 4 */
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type=checkbox],
input[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
  *height: 13px; /* 3 */
  *width: 13px; /* 3 */
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}


html,
button,
input,
select,
textarea {
  color: #222;
}

/* ::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
} */

img {
  vertical-align: middle;
}

@font-face {
  font-family: "Inter";
  src: url("inter-semibold.eot");
  src: local("Bodoni Classic Text Cyrillic Roman"),
		local("inter-semibold"),
		url("../fonts/Inter/inter-semibold.eot") format("embedded-opentype"),
		url("../fonts/Inter/inter-semibold.woff2") format("woff2"),
		url("../fonts/Inter/inter-semibold.woff") format("woff"),
		url("../fonts/Inter/inter-semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("inter-bold.eot");
  src: local("Bodoni Classic Text Cyrillic Roman"),
		local("inter-bold"),
		url("../fonts/Inter/inter-bold.eot") format("embedded-opentype"),
		url("../fonts/Inter/inter-bold.woff2") format("woff2"),
		url("../fonts/Inter/inter-bold.woff") format("woff"),
		url("../fonts/Inter/inter-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
	font-family: "Bebas Neue";
	src: url("BebasNeueBold.eot");
	src: local("Bebas Neue Bold"), local("BebasNeueBold"),
		url("../fonts/BebasNeue/BebasNeueBold.eot?#iefix") format("embedded-opentype"),
		url("../fonts/BebasNeue/BebasNeueBold.woff2") format("woff2"),
		url("../fonts/BebasNeue/BebasNeueBold.woff") format("woff"),
		url("../fonts/BebasNeue/BebasNeueBold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'HeliosCond';
    src: url('../fonts/HeliosCond.woff2') format('woff2'),
        url('../fonts/HeliosCond.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HeliosCond';
    src: url('../fonts/HeliosCond-Bold.woff2') format('woff2'),
        url('../fonts/HeliosCond-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html {
  font-size: 18px;
}

body {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2rem;
	background: #F2E8D4;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.app {
  width: 100%;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

.container {
  position: relative;
  /* max-width: 1680px; */
  max-width: calc(1680 / 1050 * 100vh);
  width: 100%;
	height: 100%;
  margin: 0 auto;
  /* padding-left: 80px;
  padding-right: 80px; */
}

@media screen and (max-width: 1680px) {
	.container {
		/* padding-left: 4.7619047619vw;
    padding-right: 4.7619047619vw; */
  }
}
@media screen and (max-width: 650px) {
	.container {
		/* min-height: auto;
    padding: 0 30px; */
  }
}

.logo-km {
  position: absolute;
  max-width: 208px;
  width: calc(208 / 1050 * 100vh);
	top: -1.5vh;
	left: 13.2%;
	transform: translateX(-50%);
}

.logo-km img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  max-width: 100%;
}

.share-block {
	position: absolute;
	left: 13.2%;
	bottom: 8.2vh;
	transform: translateX(-50%);
}

.share-title {
	font-family: 'Bebas Neue', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	font-size: calc(24 / 1050 * 100vh);
	line-height: 100%;
	text-align: center;
	color: #D9272E;
	text-transform: uppercase;
	margin-bottom: 1.6vh;
}

.share-links .ya-share2__container {
	display: flex;
	justify-content: center;
}

.share-links .ya-share2__list.ya-share2__list_direction_horizontal > .ya-share2__item {
	display: inline-block;
	vertical-align: top;
	padding: 0;
	/* margin: 0 16px 0 0; */
	margin: 0 calc(16 / 1050 * 100vh) 0 0;
}

.share-links .ya-share2__list.ya-share2__list_direction_horizontal > .ya-share2__item:last-child {
	margin-right: 0;
}

.share-links .ya-share2__container_size_m .ya-share2__badge .ya-share2__icon {
	/* height: 40px;
	width: 40px;
	background-size: 36px 36px; */
	height: calc(40 / 1050 * 100vh);
	width: calc(40 / 1050 * 100vh);
	background-size: calc(36 / 1050 * 100vh) calc(36 / 1050 * 100vh);
	background-repeat: no-repeat;
}

.share-links .ya-share2__container_shape_round.ya-share2__container_size_m .ya-share2__badge .ya-share2__icon:not(.ya-share2__icon_messenger-contact):not(.ya-share2__icon_more):not(.ya-share2__icon_copy) {
	/* background-size: 36px 36px; */
	background-size: calc(36 / 1050 * 100vh) calc(36 / 1050 * 100vh);
}

.content-primary {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 2;
	/* transform: skewY(-20deg); */
}

.bg-primary {
	position: absolute;
	top: 0;
	right: 50%;
	transform: translateX(50%);
	z-index: -1;
	max-width: 530px;
	width: calc(530 / 1050 * 100vh);
	height: 100%;
	background: #D9272E;
	transition: height 600ms;
}

.bg-primary::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: #D9272E;
	transform: translateY(50%) skewY(-5.5deg);
}

.title-1 {
	margin-top: 4.5vh;
	margin-right: -1.5%;
	transition: margin 600ms;
}

.title-1 img {
	max-width: 123px;
	/* width: 7.321vw; */
	width: calc(123 / 1050 * 100vh);
	transition: width 600ms;
}

.title-2 {
	position: relative;
	margin-top: 2.4vh;
	margin-right: -0.6%;
	transition: margin 600ms;
}

.title-2 img:first-child {
	position: absolute;
	right: -0.9%;
	bottom: -1.6vh;
	z-index: -1;
	max-width: 350px;
	/* width: 24.167vw; */
	width: calc(350 / 1050 * 100vh);
	transition: width 600ms;
}

.title-2 img:last-child {
	max-width: 350px;
	/* width: 24.345vw; */
	width: calc(350 / 1050 * 100vh);
	transition: width 600ms;
}

.title-3 {
	position: relative;
	margin-top: -0.3vh;
	margin-right: -1.6%;
	transition: transform 600ms, margin-top 600ms 300ms;
}

.title-3 img:first-child {
	position: absolute;
	right: -0.9%;
	bottom: -1.6vh;
	z-index: -1;
	max-width: 360px;
	/* width: 24.167vw; */
	width: calc(360 / 1050 * 100vh);
	transition: width 600ms;
}

.title-3 img:last-child {
	max-width: 360px;
	/* width: 24.345vw; */
	width: calc(360 / 1050 * 100vh);
	transition: width 600ms;
}

.subtitle {
	max-width: 313px;
	width: calc(313 / 1050 * 100vh);
	margin-top: 2vh;
	color: #F2E8D4;
	text-align: center;
	font-size: calc(18 / 1050 * 100vh);
  line-height: 1.2;
	transition: opacity 600ms;
}

.button {
	font-family: 'Bebas Neue', sans-serif;
	font-weight: 700;
	/* font-size: 24px; */
	font-size: calc(24 / 1050 * 100vh);
	line-height: 1;
	text-transform: uppercase;
	/* padding: 22px 52px; */
	padding: calc(22 / 1050 * 100vh) calc(35 / 1050 * 100vh);
  min-width: calc(233 / 1050 * 100vh);
	background-color: #000;
	color: #FFF;
	border: none;
	border-radius: 100px;
	box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.25);
	transition: transform 600ms;
}

.content-primary .button {
	margin-top: 5vh;
}

.bg-img {
	position: absolute;
  pointer-events: none;
}

.bg-img img {
	width: 100%;
}

.bg-img0-1 {
	top: calc(116 / 1050 * 100vh);
	right: 5.8%;
	z-index: -5;
	/* transform: translateX(230%); */
	transition: top 1200ms, right 1200ms;
}
.bg-img0-1 img {
	max-width: 323px;
	width: calc(323 / 1050 * 100vh);
}

.bg-img0-2 {
	max-width: 155px;
	top: calc(89 / 1050 * 100vh);
	right: -1.8%;
	z-index: -5;
	/* transform: translateX(560%); */
}
.bg-img0-2 img {
	max-width: 155px;
	width: calc(155 / 1050 * 100vh);
}

.bg-img1 {
	top: calc(256 / 1050 * 100vh);
	right: 15.6%;
	/* transform: translateX(142%); */
}
.bg-img1 img {
	max-width: 400px;
	width: calc(400 / 1050 * 100vh);
}

.bg-img1-1 {
	top: calc(296 / 1050 * 100vh);
	right: 18.2%;
	/* transform: translateX(529%); */
}
.bg-img1-1 img {
	max-width: 100px;
	width: calc(100 / 1050 * 100vh);
}

.bg-img2 {
	right: 17.2%;
	bottom: calc(-358 / 1050 * 100vh);
	/* transform: translateX(69.8%); */
}
.bg-img2 img {
	max-width: 792px;
	width: calc(792 / 1050 * 100vh);
}
.bg-img2:before {
	content: '';
	display: block;
	max-width: 667px;
	width: calc(667 / 1050 * 100vh);
	max-height: 268px;
	height: calc(268 / 1050 * 100vh);
	position: absolute;
	top: calc(-35 / 1050 * 100vh);
	left: calc(-176 / 1050 * 100vh);
	z-index: -1;
	background: radial-gradient(35.26% 36.65% at 50% 50%, #632A00 0%, rgba(196, 123, 71, 0) 100%);
	mix-blend-mode: multiply;
	/* transform: rotate(-10.99deg); */
}

.bg-img3 {
	right: 9.3%;
	bottom: calc(-117 / 1050 * 100vh);
	/* transform: translateX(158%); */
}
.bg-img3 img {
	max-width: 433px;
	width: calc(433 / 1050 * 100vh);
}

.bg-img4 {
	/* left: 25.3%; */
	left: calc(311 / 1680 * 100%);
  z-index: 5;
	bottom: calc(-159 / 1050 * 100vh);
	/* transform: translateX(-118%) rotate(-5.08deg); */
}
.bg-img4 img {
	max-width: 353px;
	width: calc(353 / 1050 * 100vh);
	transform: rotate(-5.08deg);
}
.bg-img4:before {
	content: '';
	display: block;
	max-width: 633px;
	width: calc(633 / 1050 * 100vh);
	max-height: 605px;
	height: calc(605 / 1050 * 100vh);
	position: absolute;
	top: calc(196 / 1050 * 100vh);
	left: calc(-186 / 1050 * 100vh);
	z-index: -1;
	background: radial-gradient(35.26% 36.65% at 50% 50%, rgba(169, 71, 0, 0.36) 0%, rgba(196, 123, 71, 0) 100%);
	mix-blend-mode: multiply;
}
.bg-img4:after {
	content: '';
	display: block;
	max-width: 231px;
	width: calc(231 / 1050 * 100vh);
	max-height: 514px;
	height: calc(514 / 1050 * 100vh);
	position: absolute;
	top: calc(236 / 1050 * 100vh);
	left: calc(210 / 1050 * 100vh);
	z-index: -1;
	background: radial-gradient(35.26% 36.65% at 50% 50%, #612E09 0%, rgba(0, 0, 0, 0) 100%);
	mix-blend-mode: multiply;
}

.bg-img5-1 {
	top: calc(-10 / 1050 * 100vh);
	right: 23.7%;
	/* transform: translateX(135%); */
	transition: top 1200ms, right 1200ms;
}
.bg-img5-1 img {
	max-width: 326px;
	width: calc(326 / 1050 * 100vh);
	transition: width 1200ms;
}

.bg-img5-2 {
	top: calc(490 / 1050 * 100vh);
	left: -2%;
	/* transform: translateX(-141%); */
	transition: top 1200ms, left 1200ms;
}
.bg-img5-2 img {
	max-width: 619px;
	width: calc(619 / 1050 * 100vh);
	transition: width 1200ms;
}

.bg-img5-3 {
	top: calc(655 / 1050 * 100vh);
	left: 10.9%;
	/* transform: translateX(-150%); */
	transition: top 1200ms, left 1200ms;
}
.bg-img5-3 img {
	max-width: 437px;
	width: calc(437 / 1050 * 100vh);
	transition: width 1200ms;
}

.bg-img5-4 {
	top: calc(567 / 1050 * 100vh);
	right: -27.4%;
	/* transform: translateX(155%); */
	transition: top 1200ms, right 1200ms;
}
.bg-img5-4 img {
	max-width: 837px;
	width: calc(837 / 1050 * 100vh);
	transition: width 1200ms;
}

.bg-img5-5 {
	top: calc(555 / 1050 * 100vh);
	right: -10%;
	/* transform: translateX(155%); */
	transition: top 1200ms, right 1200ms;
}
.bg-img5-5 img {
	max-width: 384px;
	width: calc(384 / 1050 * 100vh);
	transform: scale(0);
	transition: width 1200ms;
}

.bg-secondary {
	max-width: 966px;
	width: calc(966 / 1050 * 100vh);
	max-height: 1160px;
	height: calc(1160 / 1050 * 100vh);
	position: absolute;
	top: calc(332 / 1050 * 100vh);
	right: 54.4%;
	z-index: -2;
	transform: translate(50%, 0%);
	transition: transform 600ms 600ms;
}
.bg-secondary div{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	/* z-index: -3; */
	background: #FFFFFF;
	transform: rotate(3.08deg);
	overflow: hidden;
}
.bg-secondary img{
	max-width: 500px;
	width: calc(500 / 1050 * 100vh);
	position: absolute;
	top: 32.6%;
	right: -7%;
	transform: rotate(-3deg);
}
.bg-secondary::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: calc(44 / 1050 * 100vh);
	left: calc(30 / 1050 * 100vh);
	z-index: -1;
	background: #ECDEC7;
	transform: rotate(4.76deg);
	/* transform-origin: ; */
}

.game-preview .bg-secondary {
	opacity: 0;
	visibility: hidden;
	transform: translate(50%, 100%);
}

.game-preview .content-secondary {
	opacity: 0;
	visibility: hidden;
}
.start-game .content-secondary {
	position: relative;
	z-index: 10;
	opacity: 1;
	visibility: visible;
	transition: opacity 600ms 1200ms;
}

.question-wrapper {
	max-width: 1000px;
	width: calc(1000 / 1050 * 100vh);
	margin: calc(34 / 1050 * 100vh) auto 0;
	padding-right: calc(20 / 1050 * 100vh);
  user-select: none;
}

.question {
	max-width: 700px;
	width: calc(700 / 1050 * 100vh);
	margin: 0 auto;
	font-family: "HeliosCond";
	font-style: normal;
	font-weight: 700;
	/* font-size: 40px;
	line-height: 46px; */
	font-size: calc(32 / 1050 * 100vh);
	line-height: 1.2;
	text-align: center;
	color: #D9272E;
}

.answer {
  margin: calc(40 / 1050 * 100vh) auto 0;
  width: calc(700 / 1050 * 100vh);
	font-family: "HeliosCond";
	font-style: normal;
	font-weight: 700;
	font-size: calc(20 / 1050 * 100vh);
	line-height: 1.2;
	color: #000000;
	display: flex;
	flex-wrap: wrap;
}

.answer .option {
	position: relative;
	min-height: calc(72 / 1050 * 100vh);
	padding: calc(8 / 1050 * 100vh) calc(25 / 1050 * 100vh) calc(16 / 1050 * 100vh) calc(66 / 1050 * 100vh);
	width: 50%;
	cursor: pointer;
}

.answer .option.active > span,
.answer .option.active > span:after {
	background-color: #FE9821;
}

@media (hover: hover) and (pointer: fine) {
	.answer .option:hover > span,
	.answer .option:hover > span:after {
		background-color: #FE9821;
	}
}

.answer .option > span {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(46 / 1050 * 100vh);
	height: calc(40 / 1050 * 100vh);
	padding-top: calc(6 / 1050 * 100vh);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
	background-color: #D9272E;
	transition: background-color 300ms;
}

.answer .option > span:after {
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: calc(12 / 1050 * 100vh);
	background-color: #D9272E;
	transform: translateY(50%) skewY(-12deg);
	transition: background-color 300ms;
}

.angel-scale {
	transition: transform 300ms, opacity 1000ms;
}

.angel-scale.updating {
	transform: scale(1.2) translateY(20%);
}

.angel-scale.updating .progress {
	background: linear-gradient(180deg, #FF5C00 60%, rgba(255, 207, 35, 0) 100%);
}

.angel-scale__icon {
	position: absolute;
	display: block;
	top: calc(-52 / 1050 * 100vh);
	max-width: 87px;
	width: calc(87 / 1050 * 100vh);
	filter: drop-shadow(calc(-6 / 1050 * 100vh) calc(20 / 1050 * 100vh) calc(30 / 1050 * 100vh) rgba(124, 79, 46, 0.28));
	transition: transform 300ms 300ms;
}
.angel-scale__progress {
	position: relative;
	max-width: 44px;
	width: calc(44 / 1050 * 100vh);
	max-height: 353px;
	height: calc(353 / 1050 * 100vh);
	background: #FFFFFF;
	/* border: 4px solid #FFFFFF; */
	box-sizing: border-box;
	border-radius: 100px;
	box-shadow: calc(-20 / 1050 * 100vh) calc(30 / 1050 * 100vh) calc(30 / 1050 * 100vh) rgba(0, 0, 0, 0.3);
	transition: transform 300ms;
}

.angel-scale__progress::before {
	content: '';
	display: block;
	position: absolute;
	top: calc(-9 / 1050 * 100vh);
	left: calc(-9 / 1050 * 100vh);
	right: calc(-9 / 1050 * 100vh);
	bottom: calc(-9 / 1050 * 100vh);
	border: calc(4 / 1050 * 100vh) dashed #FFFFFF;
	border-radius: 100px;
}
.angel-scale__progress::after {
	content: '';
	display: block;
	position: absolute;
	top: calc(3 / 1050 * 100vh);
	right: 0;
	bottom: calc(3 / 1050 * 100vh);
	max-width: 13px;
	width: calc(13 / 1050 * 100vh);
	background: linear-gradient(270deg, #FFFFFF -17.14%, rgba(255, 255, 255, 0) 142.86%);
	border-radius: 100px;
}
.angel-scale__progress .progress {
	overflow: hidden;
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: calc(4 / 1050 * 100vh) solid #FFFFFF;
  background: rgb(255,207,35);
  background: linear-gradient(0deg, rgba(255,207,35,0.2) 0%, rgba(255,92,0,1) 74%);
	border-radius: 100px;
	transition: height 600ms ease-out, background-position 600ms ease-out;
}
.angel-scale__progress .progress span {
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	transition: height 300ms;
}

.start-game .bg-primary {
	height: calc(438 / 1050 * 100vh);
}

.start-game .title-1 {
	margin-top: 5.6vh;
	margin-right: -1.5%;
}

.start-game .title-1 img {
	max-width: 85px;
	width: calc(85 / 1050 * 100vh);
}

.start-game .title-2 {
	position: relative;
	margin-top: 0.5vh;
	margin-right: -1%;
}

.start-game .title-2 img:first-child {
	position: absolute;
	right: -2.8%;
	bottom: -1.2vh;
	z-index: -1;
	max-width: 280px;
	width: calc(280 / 1050 * 100vh);
}

.start-game .title-2 img:last-child {
	max-width: 280px;
	width: calc(280 / 1050 * 100vh);
}
.start-game .title-3 {
	margin-top: -5.2vh;
	transform: scale(0);
}

.start-game .subtitle {
	max-width: 414px;
	width: calc(414 / 1050 * 100vh);
}

.start-game #button-start {
	transform: scale(0);
	transition: transform 600ms;
}
.game-preview .bg-img6 {
	opacity: 0;
	pointer-events: none;
}
.start-game .bg-img6 {
  top: calc(424 / 1050 * 100%);
	left:  calc(1316 / 1680 * 100%);
  z-index: 15;
	opacity: 1;
	display: flex;
	justify-content: center;
}




@keyframes moveImg1 {
	0% {
		top: calc(245 / 1050 * 100vh);
		right: 16.2%;
	}
	30% {
		top: calc(85 / 1050 * 100vh);
		right: 10%;
	}
	100% {
		top: calc(65 / 1050 * 100vh);
    right: 10%;
	}
}

.start-game .bg-img1 {
	animation: moveImg1 1800ms ease-out 600ms forwards;
}
.start-game .bg-img1 img {
	max-width: 455px;
	width: calc(455 / 1050 * 100vh);
	transition: width 1200ms;
}
.start-game .bg-img1-1 img {
	transform: scale(0);
	transform-origin: 50% 100%;
	transition: transform 600ms;
}

@keyframes moveImg2 {
	0% {
		right: 17.2%;
		bottom: calc(-358 / 1050 * 100vh);
	}
	40% {
		right: 17.2%;
		bottom: calc(-624 / 1050 * 100vh);
	}
	60% {
		right: 60.2%;
		bottom: calc(-624 / 1050 * 100vh);
	}
	90% {
		right: 60.2%;
		bottom: calc(-404 / 1050 * 100vh);
	}
	100% {
		right: 60.2%;
		bottom: calc(-424 / 1050 * 100vh);
	}
}

.start-game .bg-img2 {
	animation: moveImg2 1200ms ease-out 600ms forwards;
}
.start-game .bg-img2 img {
	max-width: 557px;
	width: calc(557 / 1050 * 100vh);
	transform: scaleX(-1);
	transition: width 1800ms 600ms, transform 600ms 1200ms;
}

@keyframes moveImg3 {
	0% {
		right: 9.3%;
		bottom: calc(-117 / 1050 * 100vh);
	}
	50% {
		right: 9.3%;
		bottom: calc(-97 / 1050 * 100vh);
	}
	100% {
		right:7.3%;
		bottom: calc(-500 / 1050 * 100vh);
	}
}

.start-game .bg-img3 {
	animation: moveImg3 1200ms ease-out 600ms forwards;
}


@keyframes moveImg4 {
	0% {
		left: 25.3%;
		bottom: calc(-225 / 1050 * 100vh);
	}
	40% {
		left: 15.3%;
		bottom: calc(-380 / 1050 * 100vh);
	}
	60% {
		left: 15.3%;
		bottom: calc(-380 / 1050 * 100vh);
		transform: scale(1);
	}
	90% {
		left: 2.2%;
		bottom: calc(-305 / 1050 * 100vh);
		transform: scale(1.1);
	}
	100% {
		left: 2.2%;
		bottom: calc(-325 / 1050 * 100vh);
		transform: scale(1);
	}
}

.start-game .bg-img4 {
	/* animation: moveImg4 1200ms ease-out 600ms forwards; */
	left: 2.2%;
	bottom: calc(-325 / 1050 * 100vh);
	transition: left 1800ms, bottom 1800ms;
}
.start-game .bg-img4 img {
	max-width: 324px;
	width: calc(324 / 1050 * 100vh);
	transform: rotate(7.97deg);
	transition: transform 1800ms, width 1800ms;
}

@keyframes moveImg5-1 {
	0% {
		top: calc(-10 / 1050 * 100vh);
		right: 23.7%;
	}
	40% {
		top: calc(-10 / 1050 * 100vh);
		right: 13.7%;
		z-index: -3;
	}
	70% {
		top: calc(80 / 1050 * 100vh);
		right: 35%;
	}
	100% {
		top: calc(173.9 / 1050 * 100vh);
    right: 58.9%;
		z-index: -3;
	}
}

.start-game .bg-img5-1 {
	top: calc(-10 / 1050 * 100vh);
	right: 23.7%;
	animation: moveImg5-1 1200ms ease-out 600ms forwards;
}
.start-game .bg-img5-1 img {
	max-width: 352px;
	width: calc(352 / 1050 * 100vh);
}

.start-game .bg-img5-2 {
	top: calc(233 / 1050 * 100vh);
	left: 22.4%;
}
.start-game .bg-img5-2 img {
	max-width: 442px;
	width: calc(442 / 1050 * 100vh);
}

.start-game .bg-img5-3 {
	top: calc(327 / 1050 * 100vh);
	left: 18.1%;
}
.start-game .bg-img5-3 img {
	max-width: 311px;
	width: calc(311 / 1050 * 100vh);
}

.start-game .bg-img5-4 {
	top: calc(402 / 1050 * 100vh);
	right: -5.5%;
}
.start-game .bg-img5-4 img {
	max-width: 673px;
	width: calc(673 / 1050 * 100vh);
}

.start-game .bg-img5-5 {
	top: calc(415 / 1050 * 100vh);
	right: -2.4%;
}
.start-game .bg-img5-5 img {
	max-width: 384px;
	width: calc(384 / 1050 * 100vh);
	transform: scale(1);
}

.start-game .bg-img0-1 {
	top: calc(170 / 1050 * 100vh);
	right: 1.7%;
}



@media screen and (max-width: 1680px) {

}
@media screen and (max-width: 1000px) {

}
@media screen and (max-width: 650px) {

}
@media screen and (max-width: 450px) {

}

.animate > .fromTop {
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
  opacity: 0;
  -webkit-transition: opacity 1000ms, -webkit-transform 1000ms;
  transition: opacity 1000ms, -webkit-transform 1000ms;
  transition: transform 1000ms, opacity 1000ms;
  transition: transform 1000ms, opacity 1000ms, -webkit-transform 1000ms;
}
.animate > .fromBottom {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  opacity: 0;
  -webkit-transition: opacity 1000ms, -webkit-transform 1000ms;
  transition: opacity 1000ms, -webkit-transform 1000ms;
  transition: transform 1000ms, opacity 1000ms;
  transition: transform 1000ms, opacity 1000ms, -webkit-transform 1000ms;
}
.animate > .fromRight {
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
  opacity: 0;
  -webkit-transition: opacity 1000ms, -webkit-transform 1000ms;
  transition: opacity 1000ms, -webkit-transform 1000ms;
  transition: transform 1000ms, opacity 1000ms;
  transition: transform 1000ms, opacity 1000ms, -webkit-transform 1000ms;
}
.animate > .fromLeft {
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
  opacity: 0;
  -webkit-transition: opacity 1000ms, -webkit-transform 1000ms;
  transition: opacity 1000ms, -webkit-transform 1000ms;
  transition: transform 1000ms, opacity 1000ms;
  transition: transform 1000ms, opacity 1000ms, -webkit-transform 1000ms;
}
.animate .animation-delay-2 {
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
}
.animate .animation-delay-4 {
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}
.animate .animation-delay-6 {
  -webkit-transition-delay: 600ms;
          transition-delay: 600ms;
}
.animate .animation-delay-8 {
  -webkit-transition-delay: 800ms;
          transition-delay: 800ms;
}
.animate .animation-delay-12 {
  -webkit-transition-delay: 1200ms;
          transition-delay: 1200ms;
}

.fadeIn {
  opacity: 0;
  -webkit-transition: opacity 1500ms;
  transition: opacity 1500ms;
}

.app {
  -webkit-animation: fadeIn 1000ms linear;
          animation: fadeIn 1000ms linear;
}

.animated > .fromTop,
.animated > .fromBottom,
.animated > .fromRight,
.animated > .fromLeft,
.animated > .fadeIn {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}

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

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



.cloud{
  pointer-events: none;
}
.cloud div{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/v2/cloud.png);
}
.cloud::before{
  content: '';
  position: absolute;
  z-index: 0;
  background: radial-gradient(35.26% 36.65% at 50% 50%, rgba(112, 61, 25, 0.31) 0%, rgba(196, 123, 71, 0) 100%);
	mix-blend-mode: multiply;
}
.cloud1{
  width: calc(1227 / 1050 * 100vh);
  height: calc(511 / 1050 * 100vh);
  max-width: 1227px;
  max-height: 511px;
  top: calc(355 / 1050 * 100%);
	left: calc(-707 / 1680 * 100%);
  z-index: 0;
}
.cloud1:before {
	width: calc(1106 / 1227 * 100%);
	height: calc(400 / 511 * 100%);
	left: calc(305 / 1227 * 100%);
	top: calc(181 / 511 * 100%);
}
.cloud2{
  width: calc(456 / 1050 * 100vh);
  height: calc(190 / 1050 * 100vh);
  max-width: 456px;
  max-height: 190px;
  top: calc(87 / 1050 * 100%);
	left: calc(1319 / 1680 * 100%);
  z-index: 0;
}
.cloud2:before {
	width: calc(595 / 456 * 100%);
	height: calc(224 / 190 * 100%);
	left: calc(-70 / 456 * 100%);
	top: calc(82 / 190 * 100%);
}
.cloud3{
  width: calc(1227 / 1050 * 100vh);
  height: calc(511 / 1050 * 100vh);
  max-width: 1227px;
  max-height: 511px;
  top: calc(791 / 1050 * 100%);
	left: calc(936 / 1680 * 100%);
  z-index: 6;
}
.cloud3:before {
	width: calc(1106 / 1227 * 100%);
	height: calc(400 / 511 * 100%);
	left: calc(305 / 1227 * 100%);
	top: calc(181 / 511 * 100%);
}

.barrel{}
.barrel div{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/v2/barrel.png);
}
.barrel1{
  width: calc(894 / 1050 * 100vh);
  height: calc(806 / 1050 * 100vh);
  max-width: 894px;
  max-height: 806px;
  bottom: calc(-325 / 1050 * 100%);
	left: calc(393 / 1680 * 100%);
  z-index: 4;
}

.man{
  width: calc(962 / 1050 * 100vh);
  height: calc(962 / 1050 * 100vh);
  max-width: 962px;
  max-height: 962px;
  bottom: calc(-19 / 1050 * 100%);
	left: calc(762 / 1680 * 100%);
  z-index: 5;
  pointer-events: none;
}
.man div{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/v2/man.png);
}

.title{
	font-family: 'Bebas Neue', sans-serif;
	font-style: normal;
	font-weight: 700;
  font-size: calc(39 / 1050 * 100vh);
  line-height: 1;
  color: #fff;
  text-align: center;
  padding: calc(62 / 1050 * 100vh) 0 calc(37 / 1050 * 100vh);
  transition: transform 300ms;
}
.title > span{
  display: inline-block;
  background: #FFFFFF;
  background: linear-gradient(0deg, #DDD9DF 9.89%, #FFFFFF 66.43%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title__l2{
  font-size: 2.179em;
  transform: rotate(-2.87deg);
  margin-top: calc(15 / 1050 * 100vh);
  filter: drop-shadow(calc(7 / 1050 * 100vh) calc(10 / 1050 * 100vh) #AC2A2F);
}
.title__l3{
  margin-top: calc(15 / 1050 * 100vh);
}

.start-game .cloud1{
  top: calc(305 / 1050 * 100%);
	left: calc(-837 / 1680 * 100%);
  z-index: 6;
	transition: top 1.3s, left 1.3s;
}
.start-game .cloud2{
  top: calc(58 / 1050 * 100%);
  left: calc(1031 / 1680 * 100%);
  z-index: 5;
	transition: top 1.5s, left 1.5s;
}
.start-game .cloud3{
  top: calc(745 / 1050 * 100%);
  left: calc(1288 / 1680 * 100%);
	transition: top 1.5s, left 1.5s;
}
.start-game .man{
  left: calc(1072 / 1680 * 100%);
	transition: left 1000ms, bottom 1000ms, width 1000ms, height 1000ms;
}
.start-game .barrel1{
  width: calc(743 / 1050 * 100vh);
  height: calc(616 / 1050 * 100vh);
  max-width: 743px;
  max-height: 616px;
  bottom: calc(-434 / 1050 * 100%);
	left: calc(20 / 1680 * 100%);
  transform: scale(-1,1);
	transition: left 1800ms, bottom 1800ms, width 1800ms, height 1800ms, transform 500ms;
}
.start-game .share-block {
	transform: translateX(-50%) scale(0);
	transition: transform 600ms;
}

.finishblock{
  opacity: 0;
  transition: opacity 100ms;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
}
.finishblock__title{
  color: #D9272E;
	font-family: "HeliosCond";
	font-style: normal;
	font-weight: 700;
  font-size: calc(102.8 / 1050 * 100vh);
  line-height: 1;
}
.finishblock__text{
  margin-top: calc(31 / 1050 * 100vh);
	font-family: "HeliosCond";
	font-style: normal;
	font-weight: 700;
  font-size: calc(34.67 / 1050 * 100vh);
  line-height: 1.2;
}
.finishblock__button{
  margin-top: calc(16 / 1050 * 100vh);
}

.finish-game .subtitle{
	opacity: 0;
}
.finish-game .title{
  transform: translate(0,27%);
}
.finish-game .question-wrapper{
  transition: transform 300ms;
  transform: scale(0);
}
.finish-game .finishblock{
  transition: opacity 300ms 500ms;
  opacity: 1;
  pointer-events: auto;
}
.finish-game .angel-scale{
  opacity: 0;
}

.popupbg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background: #232323;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms;
}
.popup{
  position: absolute;
  z-index: 101;
  top: calc(140 / 1050 * 100vh);
  left: calc(484 / 1050 * 100vh);
  width: calc(712 / 1050 * 100vh);
  height: calc(703 / 1050 * 100vh);
  pointer-events: none;
}
.popup__window{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/v2/popup.svg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(83 / 1050 * 100vh) calc(136 / 1050 * 100vh) calc(64 / 1050 * 100vh) calc(84 / 1050 * 100vh);
  transform: scale(0);
  transition: transform 500ms;
  transform-origin: 100% 50%;
}
.popup__text{
  color: #fff;
	font-family: "HeliosCond";
	font-style: normal;
	font-weight: 700;
  font-size: calc(102.8 / 1050 * 100vh);
  font-size: calc(64 / 1050 * 100vh);
  line-height: 1.2;
  transform: rotate(-3.48deg);
}
.popup__text .big{
  font-size: 1.5em;
  line-height: 1;
}
.popup__text .avg{
  font-size: 0.9em;
  line-height: 1.2;
  display: inline-block;
}
.popup__text .small{
  font-size: 0.7em;
  line-height: 1.2;
  display: inline-block;
}
.popup__close{
  position: absolute;
  z-index: 10;
  top: calc(14 / 703 * 100%);;
  left: calc(666 / 712 * 100%);
  width: calc(104 / 1050 * 100vh);
  height: calc(104 / 1050 * 100vh);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/v2/close.svg);
  transform: rotate(9.68deg) scale(0);
  cursor: pointer;
  transition: transform 500ms;
}
.popup__close:hover{
  transform: rotate(9.68deg) scale(1.1);
}
.cloud4{
  width: calc(1227 / 1050 * 100vh);
  height: calc(511 / 1050 * 100vh);
  top: calc(628 / 1050 * 100%);
  left: calc(-1713 / 1680 * 100%);
  z-index: 5;
  transform: translate(-40%,0);
  opacity: 0;
  transition: transform 700ms, opacity 700ms;
}
.cloud4:before {
	width: calc(1106 / 1227 * 100%);
	height: calc(400 / 511 * 100%);
	left: calc(305 / 1227 * 100%);
	top: calc(181 / 511 * 100%);
}
.cloud5{
  width: calc(456 / 1050 * 100vh);
  height: calc(190 / 1050 * 100vh);
  top: calc(20 / 1050 * 100%);
  left: calc(1102 / 1680 * 100%);
  z-index: 5;
  transform: translate(100%,0);
  opacity: 0;
  transition: transform 700ms, opacity 700ms;
}
.cloud5:before {
	width: calc(595 / 456 * 100%);
	height: calc(224 / 190 * 100%);
	left: calc(-70 / 456 * 100%);
	top: calc(82 / 190 * 100%);
}
.barrel2{
  width: calc(533.11 / 1050 * 100vh);
  height: calc(441.95 / 1050 * 100vh);
  top: calc(503 / 1050 * 100%);
  left: calc(-774 / 1680 * 100%);
  transform: scale(-1,1) rotate(9.03deg) translate(40%,0);
  z-index: 3;
  opacity: 0;
  transition: transform 700ms, opacity 700ms;
}
.popup-opened .man{
  width: calc(778 / 1050 * 100vh);
  height: calc(778 / 1050 * 100vh);
  max-width: none;
  max-height: none;
  z-index: 101;
  bottom: calc(-49 / 1050 * 100%);
  left: calc(971 / 1680 * 100%);
}
.popup-opened .popupbg{
  opacity: 0.9;
  pointer-events: auto;
}
.popup-opened .popup{
  pointer-events: auto;
}
.popup-opened .popup__window{
  transform: scale(1);
  transition: transform 1000ms;
}
.popup-opened .popup__close{
  transform: rotate(9.68deg) scale(1);
  transition: transform 1000ms;
}
.popup-opened .cloud4,
.popup-opened .cloud5{
  transform: translate(0,0);
  opacity: 1;
  transition: transform 1000ms, opacity 1000ms;
}
.popup-opened .barrel2{
  opacity: 1;
  transform: scale(-1,1) rotate(9.03deg) translate(0,0);
  transition: transform 1000ms, opacity 1000ms;
}
.logo-km2{
  display: none;
}

.finish-game .share-block{
  transform: translateX(-50%) scale(1);
  left: 50%;
  bottom: 5vh;
}
.finish-game .share-title{
  color: #000;
}
@media (orientation: portrait) {
  .logo-km {
    display: none;
    max-width: unset;
    width: calc(100 / 812 * 100 * var(--vh, 1vh));
  	top: calc(14 / 812 * 100 * var(--vh, 1vh));
  	left: 50%;
  	transform: translateX(-50%);
  }
  .logo-km2{
    display: block;
  }

  .bg-primary {
  	max-width: unset;
  	width: calc(315 / 812 * 100 * var(--vh, 1vh));
  }
  .bg-primary::after {
  	height: calc(50 / 812 * 100 * var(--vh, 1vh));
  }

  .bg-img4 {
  	left: 50%;
    margin-left: calc(-205 / 812 * 100 * var(--vh, 1vh));
  	bottom: calc(-58 / 812 * 100 * var(--vh, 1vh));
  }
  .bg-img4 img {
  	max-width: unset;
  	width: calc(131 / 812 * 100 * var(--vh, 1vh));
  }
  .bg-img4:before {
  	max-width: unset;
  	width: calc(633 / 1050 * 100vh);
  	max-height: 605px;
  	height: calc(605 / 1050 * 100vh);
  	top: calc(196 / 1050 * 100vh);
  	left: calc(-186 / 1050 * 100vh);
  }
  .bg-img4:after {
  	max-width: unset;
  	width: calc(231 / 1050 * 100vh);
  	max-height: 514px;
  	height: calc(514 / 1050 * 100vh);
  	top: calc(236 / 1050 * 100vh);
  	left: calc(210 / 1050 * 100vh);
  }

  .barrel1{
    width: calc(332 / 812 * 100 * var(--vh, 1vh));
    height: calc(300 / 812 * 100 * var(--vh, 1vh));
    max-width: unset;
    max-height: unset;
    bottom: calc(-80 / 812 * 100 * var(--vh, 1vh));
    left: 50%;
  	margin-left: calc(-174 / 812 * 100 * var(--vh, 1vh));
  }

  .man{
    width: calc(360 / 812 * 100 * var(--vh, 1vh));
    height: calc(360 / 812 * 100 * var(--vh, 1vh));
    max-width: unset;
    max-height: unset;
    bottom: calc(-4 / 812 * 100 * var(--vh, 1vh));
    left: 50%;
  	margin-left: calc(-47 / 812 * 100 * var(--vh, 1vh));
  }

  .cloud1{
    width: calc(456 / 812 * 100 * var(--vh, 1vh));
    height: calc(190 / 812 * 100 * var(--vh, 1vh));
    max-width: unset;
    max-height: unset;
    top: calc(493 / 812 * 100 * var(--vh, 1vh));
    left: 50%;
  	margin-left: calc(-494 / 812 * 100 * var(--vh, 1vh));
    z-index: 5;
  }
  .cloud1:before {
  	width: calc(92 / 456 * 100%);
  	height: calc(115 / 190 * 100%);
  	left: calc(229 / 456 * 100%);
  	top: calc(33 / 190 * 100%);
  }
  .cloud2{
    width: calc(170 / 812 * 100 * var(--vh, 1vh));
    height: calc(71 / 812 * 100 * var(--vh, 1vh));
    max-width: unset;
    max-height: unset;
    top: calc(412 / 812 * 100 * var(--vh, 1vh));
    left: 50%;
  	margin-left: calc(110 / 812 * 100 * var(--vh, 1vh));
  }
  .cloud2:before {
    display: none;
  }
  .cloud3{
    width: calc(456 / 812 * 100 * var(--vh, 1vh));
    height: calc(190 / 812 * 100 * var(--vh, 1vh));
    max-width: unset;
    max-height: unset;
    top: calc(685 / 812 * 100 * var(--vh, 1vh));
    left: 50%;
  	margin-left: calc(37 / 812 * 100 * var(--vh, 1vh));
    z-index: 6;
  }
  .cloud3:before {
    display: none;
  }

  .title{
    font-size: calc(23 / 812 * 100 * var(--vh, 1vh));
    padding: calc(152 / 812 * 100 * var(--vh, 1vh)) 0 0;
  }
  .title__l2{
    margin-top: calc(8 / 812 * 100 * var(--vh, 1vh));
    filter: drop-shadow(calc(2 / 812 * 100 * var(--vh, 1vh)) calc(6 / 812 * 100 * var(--vh, 1vh)) #AC2A2F);
  }
  .title__l3{
    margin-top: calc(9 / 812 * 100 * var(--vh, 1vh));
  }
  .subtitle {
  	max-width: unset;
  	width: calc(270 / 812 * 100 * var(--vh, 1vh));
  	margin-top: calc(35 / 812 * 100 * var(--vh, 1vh));
  	font-size: calc(13 / 812 * 100 * var(--vh, 1vh));
    line-height: 1.2;
  }
  .button {
  	font-size: calc(14 / 812 * 100 * var(--vh, 1vh));
  	line-height: 1;
  	padding: calc(13 / 812 * 100 * var(--vh, 1vh)) calc(30 / 812 * 100 * var(--vh, 1vh));
    min-width: calc(138 / 812 * 100 * var(--vh, 1vh));
  	border-radius: calc(50 / 812 * 100 * var(--vh, 1vh));
  	box-shadow: 0px calc(18 / 812 * 100 * var(--vh, 1vh)) calc(15 / 812 * 100 * var(--vh, 1vh)) rgba(0, 0, 0, 0.25);
  }
  .content-primary .button {
  	margin-top: calc(30 / 812 * 100 * var(--vh, 1vh));
  }

  .share-block {
  	left: 50%;
  	bottom: auto;
    top: calc(468 / 812 * 100 * var(--vh, 1vh));
  	transform: translateX(-50%);
  }
  .share-title {
  	font-size: calc(14 / 812 * 100 * var(--vh, 1vh));
  	line-height: 1;
  	margin-bottom: calc(10 / 812 * 100 * var(--vh, 1vh));
    color: #fff;
  }
  .share-links .ya-share2__list.ya-share2__list_direction_horizontal > .ya-share2__item {
  	margin: 0 calc(6 / 812 * 100 * var(--vh, 1vh)) !important;
  }
  .share-links .ya-share2__container_size_m .ya-share2__badge .ya-share2__icon {
  	height: calc(24 / 812 * 100 * var(--vh, 1vh));
  	width: calc(24 / 812 * 100 * var(--vh, 1vh));
  	background-size: contain;
  }
  .share-links .ya-share2__container_shape_round.ya-share2__container_size_m .ya-share2__badge .ya-share2__icon:not(.ya-share2__icon_messenger-contact):not(.ya-share2__icon_more):not(.ya-share2__icon_copy) {
    background-size: 80% auto;
  }

  .start-game .bg-primary {
  	height: calc(376 / 812 * 100 * var(--vh, 1vh));
  }
  .start-game .subtitle{
    max-width: unset;
  	width: calc(289 / 812 * 100 * var(--vh, 1vh));
    transition: margin 0.3s;
    margin-top: calc(27 / 812 * 100 * var(--vh, 1vh));
  }
  .start-game .cloud1{
    top: calc(590 / 812 * 100 * var(--vh, 1vh));
    left: 50%;
    margin-left: calc(-546 / 812 * 100 * var(--vh, 1vh));
    z-index: 5;
  	transition: top 1.5s, left 1.5s, margin 1.5s;
  }
  .start-game .cloud2{
    top: calc(132 / 812 * 100 * var(--vh, 1vh));
    left: 50%;
    margin-left: calc(120 / 812 * 100 * var(--vh, 1vh));
  	transition: top 1.5s, left 1.5s, margin 1.5s;
  }
  .start-game .cloud3{
    top: calc(685 / 812 * 100 * var(--vh, 1vh));
    left: 50%;
    margin-left: calc(97 / 812 * 100 * var(--vh, 1vh));
    transition: top 1.5s, left 1.5s, margin 1.5s;
  }
  .start-game .man{
    left: 50%;
  	margin-left: calc(1 / 812 * 100 * var(--vh, 1vh));
  	transition: left 1000ms, bottom 1000ms, width 1000ms, height 1000ms, margin 1000ms;
  }
  .start-game .barrel1{
    width: calc(345 / 812 * 100 * var(--vh, 1vh));
    height: calc(260 / 812 * 100 * var(--vh, 1vh));
    max-width: unset;
    max-height: unset;
    bottom: calc(-165 / 812 * 100 * var(--vh, 1vh));
    left: 50%;
  	margin-left: calc(-258 / 812 * 100 * var(--vh, 1vh));
  	transition: left 1800ms, bottom 1800ms, width 1800ms, height 1800ms, transform 500ms, margin 1800ms;
  }
  .start-game .bg-img4 {
  	left: 50%;
    margin-left: calc(-229 / 812 * 100 * var(--vh, 1vh));
  	bottom: calc(-134 / 812 * 100 * var(--vh, 1vh));
  	transition: left 1800ms, bottom 1800ms, margin 1800ms;
  }
  .start-game .bg-img4 img {
  	max-width: unset;
  	width: calc(129 / 812 * 100 * var(--vh, 1vh));
  }

  .bg-secondary {
  	max-width: unset;
  	width: calc(470 / 812 * 100 * var(--vh, 1vh));
  	max-height: unset;
  	height: calc(597 / 812 * 100 * var(--vh, 1vh));
  	position: absolute;
  	top: calc(324 / 812 * 100 * var(--vh, 1vh));
  	right: 54.4%;
  }
  .start-game .bg-img6 {
    top: calc(637 / 812 * 100 * var(--vh, 1vh));
    left: 50%;
  	margin-left: calc(97 / 812 * 100 * var(--vh, 1vh));
  }

  .angel-scale__icon {
  	top: calc(-22 /  812 * 100 * var(--vh, 1vh));
  	max-width: unset;
  	width: calc(30 / 812 * 100 * var(--vh, 1vh));
  	filter: drop-shadow(calc(6 / 1050 * 100vh) calc(10 / 1050 * 100vh) calc(20 / 1050 * 100vh) #000);
  }
  .angel-scale__progress {
  	max-width: unset;
  	max-height: unset;
  	width: calc(26 / 812 * 100 * var(--vh, 1vh));
  	height: calc(99 / 812 * 100 * var(--vh, 1vh));
  	border-radius: 100px;
  	box-shadow: calc(-20 / 1050 * 100vh) calc(30 / 1050 * 100vh) calc(30 / 1050 * 100vh) rgba(0, 0, 0, 0.3);
  }
  .angel-scale__progress::before {
  	top: calc(-2 / 812 * 100 * var(--vh, 1vh));
  	left: calc(-2 / 812 * 100 * var(--vh, 1vh));
  	right: calc(-2 / 812 * 100 * var(--vh, 1vh));
  	bottom: calc(-2 / 812 * 100 * var(--vh, 1vh));
  	border: calc(3 / 812 * 100 * var(--vh, 1vh)) dashed #FFFFFF;
  	border-radius: 100px;
  }
  .angel-scale__progress::after {
  	top: calc(3 / 812 * 100 * var(--vh, 1vh));
  	right: calc(2 / 812 * 100 * var(--vh, 1vh));
  	bottom: calc(3 / 812 * 100 * var(--vh, 1vh));
  	max-width: unset;
  	width: calc(13 / 812 * 100 * var(--vh, 1vh));
  }
  .angel-scale__progress .progress {
  	border: calc(3 / 812 * 100 * var(--vh, 1vh)) solid #FFFFFF;
  }

  .question-wrapper {
  	max-width: unset;
  	width: calc(315 / 812 * 100 * var(--vh, 1vh));
  	margin: calc(-5 / 812 * 100 * var(--vh, 1vh)) auto 0;
  	padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .question {
  	max-width: unset;
  	width: 100%;
  	font-size: calc(18 / 812 * 100 * var(--vh, 1vh));
  	line-height: 1.2;
  }
  .answer {
    margin: calc(12 / 812 * 100 * var(--vh, 1vh)) auto 0;
    width: auto;
    min-width: 50%;
    display: inline-block;
  	font-size: calc(15 / 812 * 100 * var(--vh, 1vh));
  	line-height: 1.2;
    padding: 0 7%;
  }
  .answer .option {
  	min-height: calc(32 / 812 * 100 * var(--vh, 1vh));
  	padding: 0 0 calc(7 / 812 * 100 * var(--vh, 1vh)) calc(34 / 812 * 100 * var(--vh, 1vh));
  	width: 100%;
  }
  .answer .option > span {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: calc(24 / 812 * 100 * var(--vh, 1vh));
  	height: calc(19 / 812 * 100 * var(--vh, 1vh));
  	padding-top: calc(3 / 812 * 100 * var(--vh, 1vh));
  	font-size: calc(12 / 812 * 100 * var(--vh, 1vh));
  	line-height: 1.2;
  }
  .answer .option > span:after {
  	height: calc(6 / 812 * 100 * var(--vh, 1vh));
    z-index: -1;
  }
  .answer .option:nth-child(3n){
    max-width: 90%;
  }
  .answer .option:last-child{
    max-width: 83%;
    max-width: 74%;
  }

  .popup{
    top: calc(59 / 812 * 100 * var(--vh, 1vh));
    left: 50%;
    margin-left: calc(-195 / 812 * 100 * var(--vh, 1vh));
    width: calc(419 / 812 * 100 * var(--vh, 1vh));
    height: calc(477 / 812 * 100 * var(--vh, 1vh));
  }
  .popup__window{
    background-image: url(../img/v2/popup3.svg);
    padding: 15% 8% 20% 2%;
    transform-origin: 70% 100%;
  }
  .popup__text{
    font-size: calc(30 / 812 * 100 * var(--vh, 1vh));
    line-height: 1.2;
    padding: 0 10%;
  }
  .popup__text .big{
    font-size: 1.5em;
    line-height: 1;
  }
  .popup__text .avg{
    font-size: 0.9em;
    line-height: 1.2;
    display: inline-block;
  }
  .popup__text .small{
    font-size: 0.9em;
    line-height: 1.2;
    display: inline-block;
  }
  .popup__close{
    top: calc(26 / 812 * 100 * var(--vh, 1vh));
    left: calc(312 / 812 * 100 * var(--vh, 1vh));
    width: calc(55 / 812 * 100 * var(--vh, 1vh));
    height: calc(55 / 812 * 100 * var(--vh, 1vh));
    transform: scale(0) !important;
  }
  .popup-opened .popup__close {
    transform: scale(1) !important;
  }
  .cloud4{
    width: calc(651 / 812 * 100 * var(--vh, 1vh));
    height: calc(270 / 812 * 100 * var(--vh, 1vh));
    top: calc(362 / 812 * 100 * var(--vh, 1vh));
    left: calc(-421 / 812 * 100 * var(--vh, 1vh));
  }
  .cloud4:before {
  	display: none;
  }
  .cloud5{
    width: calc(242 / 812 * 100 * var(--vh, 1vh));
    height: calc(101 / 812 * 100 * var(--vh, 1vh));
    top: calc(22 / 812 * 100 * var(--vh, 1vh));
    left: calc(225 / 812 * 100 * var(--vh, 1vh));
  }
  .cloud5:before {
  	display: none;
  }
  .barrel2{
    width: calc(283 / 812 * 100 * var(--vh, 1vh));
    height: calc(235 / 812 * 100 * var(--vh, 1vh));
    top: calc(328 / 812 * 100 * var(--vh, 1vh));
    left: calc(-94 / 812 * 100 * var(--vh, 1vh));
  }
  .popup-opened .man{
    width: calc(420 / 812 * 100 * var(--vh, 1vh));
    height: calc(420 / 812 * 100 * var(--vh, 1vh));
    bottom: calc(-15 / 812 * 100 * var(--vh, 1vh));
  	margin-left: calc(-83 / 812 * 100 * var(--vh, 1vh));
    z-index: 102;
  }

  .finish-game .title{
    transform: translate(0,8%);
  }
  .finishblock__title{
    font-size: calc(40 / 812 * 100 * var(--vh, 1vh));
    line-height: 1;
  }
  .finishblock__text{
    margin-top: calc(10 / 812 * 100 * var(--vh, 1vh));
    font-size: calc(16 / 812 * 100 * var(--vh, 1vh));
    line-height: 1.2;
  }
  .finishblock__button{
    margin-top: calc(18 / 812 * 100 * var(--vh, 1vh));
  }

  .finish-game .share-block{
    top: calc(615 / 812 * 100 * var(--vh, 1vh));
    bottom: auto;
  }
  .finish-game .share-title{
    color: #000;
  }
}