:root {
	--primary: #9159a0;
	--primary-active: #774585;
	/*--desctop-scale: calc(0.8 + 0.2 * ((100vw - 992px) / (1920 - 992)));*/
	--desctop-scale: 0.8;
}


a, a:hover, a:focus {
	display: inline-block;
	color: inherit;
	text-decoration: none;
}

html {
	overflow: hidden;
}

body {
	position: relative;
	margin: 0;
	font-size: 20px;
	scroll-behavior: smooth;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	line-height: 1.2;
}

.window-wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	position: relative;
}

header, main, footer {
	position: relative;
}
	
main {
	flex: 1 1 auto;
}

header {}

footer {}

picture {
	display: block;
	position: relative;
}

picture img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 5px;
	max-height: 450px;
}

.detail-page-wrapper picture img {
	margin-bottom: 10px;
	border-radius: 0px;
	max-height: none;
}

.pa {
	position: absolute;
}

.tr {
	transform: translate(-50%, -50%);
}

.trx {
	transform: translateX(-50%);
}

.try {
	transform: translateY(-50%);
}

.backgroung-block {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
}

img.bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

img.bg--contain {
	object-fit: contain;
}

.main-page-wrapper {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
}

.center-lgg-block {
	top: 48.5%;
	left: 49.5%;
	width: calc(340px + 80 * ((100vw - 992px) / (1920 - 992)));
}

.text-lgg {
	top: 64%;
	left: 55%;
	width: 100%;
	height: 100%;
}

.center-lgg-block:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 1px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0px 0px 110px 120px rgb(255 255 255 / 0.8);
	transform: translate(-50%, -50%);
}

.btn-open-page-wrapper {
	cursor: pointer;
}

.btn-image-wrapper {
	position: relative;
	text-align: center;
}

.btn-image-wrapper > img {
	transition: opacity 0.3s, width 0.3s;
}

.btn-image-wrapper > .static {
	opacity: 1;
	width: 60px;
}

.btn-image-wrapper > .hover {
	position: absolute;
	left: 50%;
	bottom: 0;
	opacity: 0;
	transform: translateX(-50%);
	width: 10px;
}

.btn-open-page-wrapper:hover > .btn-image-wrapper > .static {
	opacity: 0;
	width: 0;
}

.btn-open-page-wrapper:hover > .btn-image-wrapper > .hover {
	opacity: 1;
	transform: translateX(-50%);
	width: 170px;
}

.btn-text {
	color: #134294;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
	padding-top: 10px;
}


.btn-sale-wrapper {
	cursor: pointer;
	animation: btn-pulsate 2s ease-out;
	animation-iteration-count: infinite;
}

.btn-sale-wrapper:hover {
	animation: none;
}

.btn-sale-image-wrapper {
	position: relative;
	text-align: center;
}

.btn-sale-image-wrapper > .static {
	width: calc(115px + 56 * ((100vw - 992px) / (1920 - 992)));
}

.btn-sale-image-wrapper > .hover {
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translate(-50%, -120%);
	opacity: 0;
	transition: opacity 0.5s, transform 0.5s;
	width: calc(260px + 142 * ((100vw - 992px) / (1920 - 992)));
}

.btn-sale-wrapper:hover > .btn-sale-image-wrapper > .hover {
	transform: translate(-50%, -50%);
	opacity: 1;
}

.btn-sale-wrapper .mobile-active {
	display: none;
}

@media (max-width: 992px) {
	.btn-sale-image-wrapper > .hover {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;
		transition: opacity 0.5s, top 0.5s, left 0.5s, width 0.5s;
		width: 50px;
	}
	.btn-sale-image-wrapper > .mobile-active {
		display: block;
		top: 50%;
		left: 50%;
		opacity: 0;
		width: calc(115px + 56 * ((100vw - 992px) / (1920 - 992)));
		transition: opacity 0.5s;
	}
	.btn-sale-wrapper:hover > .btn-sale-image-wrapper > .hover, .btn-sale-wrapper.active > .btn-sale-image-wrapper > .hover {
		width: 250px;
		top: 105%;
		left: -25%;
		opacity: 1;
	}
	.btn-sale-wrapper .static {
		transition: opacity 0.5s;
	}
	.btn-sale-wrapper.active .static {
		opacity: 0;
	}
	.btn-sale-wrapper.active .mobile-active {
		opacity: 1;
	}
}

.btn-select-probiotic-wrapper {
	display: flex;
	align-items: center;
	padding: 10px;
	background-color: #E193A9;
	width: 520px;
	border-radius: 50px;
	cursor: pointer;
}

.btn-select-probiotic-wrapper:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: #FA6F96;
	width: 0;
	transition: width 0.5s, opacity 0.5s;
	z-index: -1;
	opacity: 0;
	overflow: hidden;
	border-radius: 50px;
}

.btn-select-probiotic-wrapper:hover:before {
	width: 100%;
	opacity: 0.7;
}

.btn-select-probiotic-wrapper span {
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	margin: 0 auto;
	line-height: 1.1;
	text-align: center;
}

.btn-select-probiotic-wrapper img {
	width: 60px;
	height: auto;
}

.btn-select-test-wrapper {
	display: flex;
	align-items: center;
	padding: 10px;
	background-color: #04ACDD;
	width: 520px;
	border-radius: 50px;
	cursor: pointer;
}

.btn-select-test-wrapper:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: #009fcd;
	width: 0;
	transition: width 0.5s, opacity 0.5s;
	z-index: -1;
	opacity: 0;
	overflow: hidden;
	border-radius: 50px;
}

.btn-select-test-wrapper:hover:before {
	width: 100%;
	opacity: 0.7;
}

.btn-select-test-wrapper span {
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	margin: 0 auto;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
}

.btn-select-test-wrapper img {
	width: 60px;
	height: auto;
}

.detail-page-wrapper {
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	z-index: 5;
	transition: width 0.7s, height 0.7s, opacity 0.7s;
	opacity: 0;
}

.detail-page-wrapper.hide {
	z-index: -1;
}

.detail-page-bg {
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: #2575B2;
	opacity: 0.4;
	border-radius: 50%;
	transition: background-color 0.7s;
}

.detail-page-wrapper.page-1 .detail-page-bg {
	background-color: #2575B2;
}

.detail-page-wrapper.page-2 .detail-page-bg {
	background-color: #4BBAF6;
}

.detail-page-wrapper.page-3 .detail-page-bg {
	background-color: #5891FF;
}

.detail-page-wrapper.page-4 .detail-page-bg {
	background-color: #47D3FF;
}

.detail-page-wrapper.active {
	width: 1200px;
	height: 1200px;
	opacity: 1;
}

.main-page-wrapper {
	transition: opacity 0.6s, top 0.8s, left 0.8s;
}

.main-page-wrapper.detail-page-active {
	opacity: 0;
	top: -100%;
	left: -100%;
}

.animation-open-dot {
	width: 10px;
	height: 10px;
	top: auto;
	left: auto;
	border-radius: 50%;
	background-color: #2575B2;
	opacity: 0;
	z-index: -1;
}

.animation-open-dot--transition {
	transition: opacity 0.2s, top 0.2s, left 0.2s, width 0.2s, height 0.2s; 
	z-index: 1;
}

.animation-open-dot.active {
	width: 40px;
	height: 40px;
	top: 50% !important;
	left: 50% !important;
	opacity: 0.6;
}

.btn-detail-page-close {
	width: 60px;
	height: 60px;
	background-image: url('../image/detail_page/btn-detail-close.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	top: 16%;
	right: 8.3%;
	cursor: pointer;
	z-index: 15;
}

.detail-content {
	width: 62.5%;
	height: 62.5%;
	top: 50%;
	left: 50%;
	overflow-x: hidden;
	overflow-y: auto;
	padding-right: 10px;
	scrollbar-width: thin;
  scrollbar-color: #134294b0 #CEE6F680;
}

.detail-content::-webkit-scrollbar {
	width: 11px;
}

.detail-content::-webkit-scrollbar-track {
  background: #CEE6F680;
	border-radius: 6px;
}
.detail-content::-webkit-scrollbar-thumb {
  background-color: #134294b0;
  border-radius: 6px;
}

.detail-page-tab {
	display: none;
}

.detail-page-tab.active {
	display: block;
}

.detail-page-title {
	color: #134294;
	text-transform: uppercase;
	font-size: 32px;
	font-weight: bold;
	padding-bottom: 10px;
}

.detail-page-image img {
	width: 100%;
	height: auto;
}

.detail-page-text {
	color: #134294;
	font-size: 18px;
	padding-bottom: 20px;
}

.detail-page-dropdown {
	padding: 5px;
	background-color: #BEE0FC;
	border: 1px solid #fff;
	border-radius: 30px;
	margin-bottom: 25px;
}

.page-1 .detail-page-dropdown {
	background-color: #BEE0FC;
}

.page-2 .detail-page-dropdown {
	background-color: #C9EBFF;
}

.page-3 .detail-page-dropdown {
	background-color: #CEE3FF;
}

.page-4 .detail-page-dropdown {
	background-color: #CBF1FF;
}

.detail-page-dropdown span {
	font-size: 24px;
	font-weight: 400;
	text-transform: uppercase;
	padding-left: 50px;
	color: #134294;
	position: relative;
	cursor: pointer;
	transition: color 0.5s;
}

.detail-page-dropdown span:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 25px;
	width: 27px;
	height: 27px;
	transform: translate(-50%, -50%) rotate(0deg);
	background-image: url('../image/detail_page/dropdown-arrow.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	transition: transform 0.5s;
}

.detail-page-dropdown.active span {
	color: transparent;
}

.detail-page-dropdown.active span:before {
	transform: translate(-50%, -50%) rotate(180deg);
}

.detail-page-dropdown-content {
	max-height: 0px;
	overflow: hidden;
	transition: max-height 0.5s;
}

.detail-page-annotation-text {
	color: #134294;
	font-size: 12px;
}

.icon-text-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px 0;
}

.icon-text-wrapper img {
	width: 72px;
	height: 72px;
	margin-right: 10px;
	flex: 0 0 72px;
}

.icon-text-wrapper div {
	flex: 1;
	color: #134294;
	font-size: 18px;
}

.icon-text-col-wrapper {
	text-align: center;
	
}

.icon-text-col-wrapper img {
	width: 100%;
	height: auto;
	margin-bottom: 5px;
}

.icon-text-col-wrapper.img-135 img {
	max-width: 135px;
}

.icon-text-col-wrapper.img-70 img {
	max-width: 70px;
}

.icon-text-wrapper.img-145 img {
	max-width: 145px;
	width: 100%;
	height: auto;
}

.detail-page-wrapper .btn-sale-wrapper {
	top: 15%;
	right: -16%;
	z-index: 10;
}





.main-page-wrapper.select-probiotic-active {
	opacity: 0;
}

.select-probiotic-page {
	top: 0; left: 0; width: 100%; height: 90%;
	opacity: 0;
	transition: opacity 0.5s;
	z-index: 10;
}

.select-probiotic-page.hide {
	z-index: -1;
}

.select-probiotic-page.active {
	opacity: 1;
}

.btn-close-select-probiotic-page {
	width: 60px;
	height: 60px;
	background-image: url(../image/detail_page/btn-detail-close.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	top: 14%;
	right: 13.3%;
	cursor: pointer;
	z-index: 20;
}

.animation-title {
	color: #134294;
	font-size: 42px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	left: 50%;
	top: 2%;
}

.animation-title-3 {
	left: 50%;
	top: 63%;
}

.btn-further {
	left: 50%;
	bottom: -8%;
	display: flex;
	align-items: center;
	padding: 10px 15px;
	background-color: #E193A9;
	border-radius: 50px;
	cursor: pointer;
}

.btn-further span {
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	margin: 0 auto;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	min-width: 200px;
}

.btn-further img {
	position: absolute;
	right: 5px;
	width: 40px;
	height: auto;
}


.animation-modal {
	border: 2px solid #fff;
	padding: 20px;
	border-radius: 30px;
	color: #134294;
	opacity: 0;
	transition: opacity 0.5s;
	top: 50%;
	left: 50%;
	width: 95%;
	max-width: 600px;
	max-height: 700px;
	overflow: auto;
	z-index: 30;
}

.animation-modal.page-1 {
	background-color: #BEE0FC;
}

.animation-modal.page-2 {
	background-color: #CEE3FF;
}

.animation-modal.page-3 {
	background-color: #CBF1FF;
}

.animation-modal.page-4 {
	background-color: #C9EBFF;
}

.animation-modal.active {
	opacity: 1;
}

.animation-modal.hide {
	z-index: -1;
}

.btn-close-animation-modal-page {
	width: 40px;
	height: 40px;
	background-image: url(../image/detail_page/btn-detail-close.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	top: 40px;
	right: 5px;
	cursor: pointer;
	z-index: 21;
}

.animation-modal-tab {
	display: none;
}

.animation-modal-tab.active {
	display: block;
}

.animation-modal-tab-title {
	font-size: 24px;
	font-weight: 600;
	text-align: center;
}

.animation-modal-tab-annotation {
	font-size: 12px;
}


.element-1-step img, .element-2-step img, .element-3-step img, .element-4-step img, .element-5-step img {
	width: 100%;
	height: auto;
}

.element-1-step {
	width: calc(280px + 108 * ((100vw - 992px) / (1920 - 992)));
	height: calc(280px + 108 * ((100vw - 992px) / (1920 - 992)));
	opacity: 0;
	transition: opacity 0.5s, top 0.5s, left 0.5s, width 0.5s, height 0.5s;
}

.element-1 { top: 33.5%; left: -100%; }
.element-2 { top: -150%; left: 59%; }
.element-4 { top: 150%; left: 41%; }
.element-3 { top: 71.5%; left: 100%; }

.element-1-step.active {
	opacity: 0.9;
}

.element-1.active { top: 33.5%; left: 41%; }
.element-2.active { top: 33.5%; left: 59%; }
.element-4.active { top: 71.5%; left: 41%; }
.element-3.active { top: 71.5%; left: 59%; }

@media (min-width: 0px) and (max-width: 350px) {
	.element-1.active { top: 35%; left: 21%; }
	.element-2.active { top: 35%; left: 79%; }
	.element-4.active { top: 65%; left: 21%; }
	.element-3.active { top: 65%; left: 79%; }
	.element-1-step.animation-element {
		width: 240px;
		height: 240px;
	}
	.animation-page-annotation-text {
    bottom: 60px;
	}
}

@media (min-width: 351px) and (max-width: 400px) {
	.element-1.active { top: 35%; left: 21%; }
	.element-2.active { top: 35%; left: 79%; }
	.element-4.active { top: 65%; left: 21%; }
	.element-3.active { top: 65%; left: 79%; }
	.element-1-step.animation-element {
		width: 260px;
		height: 260px; 
	}
	.animation-page-annotation-text {
    bottom: 60px;
	}
}

@media (min-width: 401px) and (max-width: 550px) {
	.element-1.active { top: 35%; left: 25%; }
	.element-2.active { top: 35%; left: 75%; }
	.element-4.active { top: 60%; left: 25%; }
	.element-3.active { top: 60%; left: 75%; }
	.element-1-step.animation-element {
		width: 260px;
		height: 260px;
	}
	.animation-page-annotation-text {
    bottom: 85px;
	}
}



@media (min-width: 992px) and (max-width: 1199px) {
	.element-1.active { top: 35.5%; left: 40%; }
	.element-2.active { top: 35.5%; left: 60%; }
	.element-4.active { top: 69.5%; left: 40%; }
	.element-3.active { top: 69.5%; left: 60%; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
	.element-1.active { top: 31.5%; left: 42%; }
	.element-2.active { top: 31.5%; left: 58%; }
	.element-4.active { top: 68.5%; left: 42%; }
	.element-3.active { top: 68.5%; left: 58%; }
}

@media (min-width: 1400px) and (max-width: 1599px) {
	.element-1.active { top: 31.5%; left: 39%; }
	.element-2.active { top: 31.5%; left: 61%; }
	.element-4.active { top: 68.5%; left: 39%; }
	.element-3.active { top: 68.5%; left: 61%; }
}

@media (min-width: 1600px) and (max-width: 1850px) {
	.element-1.active { top: 29.5%; left: 40%; }
	.element-2.active { top: 29.5%; left: 60%; }
	.element-4.active { top: 70.5%; left: 40%; }
	.element-3.active { top: 70.5%; left: 60%; }
}

.element-1-step.center { top: 50%; left: 50%; width: 0px; height: 0px; opacity: 0.3; }



.element-5 .text-lgg {
	top: 70%;
	left: 67%;
	width: 91%;
	height: 89%;
	transition: opacity 0.5s;
}

.element-5 {
	width: 0px;
	height: 0px;
	opacity: 0;
	transition: opacity 0.8s, width 0.5s, height 0.5s;
}

.element-5.active {
	width: calc(340px + 80 * ((100vw - 992px) / (1920 - 992)));
	height: calc(340px + 80 * ((100vw - 992px) / (1920 - 992)));
	opacity: 1;
}

.element-5:before {
	opacity: 1;
	transition: box-shadow 0.5s, opacity 0.5s;
}

.element-5.small:before {
	opacity: 0;
	box-shadow: 0px 0px 0px 0px rgb(255 255 255 / 0.8);
}

.element-5:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 1px;
	border-radius: 50%;
	background-color: #bcd8e5;
	box-shadow: 0px 0px 25px 10px #bcd8e5;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.2s, width 0.5s, height 0.5s, top 0.5s, left 0.5s;
	z-index: -1;
}

.element-5.small:after {
	width: 700px;
	height: 700px;
	opacity: 0.5;
}

@media (min-width: 0px) and (max-width: 991px) {
	.element-5.small:after {
		width: 100vw;
		height: 100vw;
	}
} 

.element-5.small {
	width: calc(120px + 50 * ((100vw - 992px) / (1920 - 992)));
	height: calc(120px + 50 * ((100vw - 992px) / (1920 - 992)));
	top: 50%;
	left: 50%;
	z-index: -1;
}

.element-5.small .text-lgg {
	opacity: 0;
}


.element-3-step {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #00A9DA;
	opacity: 0;
	transition: opacity 0.3s, top 0.5s, left 0.5s;
}

@media (min-width: 0px) and (max-width: 991px) {
	.element-3-step {
		font-size: 13px;
	} 
}

.element-3-step.active {
	opacity: 1;
}

.element-6 { top: -50%; left: 50%; }
.element-7 { top: 42.5%; left: 150%; }
.element-8 { top: 57%; left: 150%; }
.element-9 { top: 120%; left: 50%; }
.element-10 { top: 50%; left: -50%; }

.element-6.active { top: 29.5%; left: 50%; }
.element-7.active { top: 42.5%; left: 60%; }
.element-8.active { top: 57%; left: 60%; }
.element-9.active { top: 69%; left: 50%; }
.element-10.active { top: 50%; left: 39%; }

@media (min-width: 0px) and (max-width: 350px) {
	.element-6.active { top: 40%; left: 50%; }
	.element-7.active { top: 44.5%; left: 70%; }
	.element-8.active { top: 55%; left: 74%; }
	.element-9.active { top: 60.5%; left: 50%; }
	.element-10.active { top: 50%; left: 26%; }
}

@media (min-width: 351px) and (max-width: 400px) {
	.element-6.active { top: 40%; left: 50%; }
	.element-7.active { top: 44.5%; left: 70%; }
	.element-8.active { top: 55%; left: 74%; }
	.element-9.active { top: 60.5%; left: 50%; }
	.element-10.active { top: 50%; left: 26%; }
}

@media (min-width: 401px) and (max-width: 550px) {
	.element-6.active { top: 40%; left: 50%; }
	.element-7.active { top: 44.5%; left: 70%; }
	.element-8.active { top: 55%; left: 74%; }
	.element-9.active { top: 60.5%; left: 50%; }
	.element-10.active { top: 50%; left: 26%; }
}


@media (min-width: 992px) and (max-width: 1199px) {
	.element-6.active { top: 31.5%; left: 50%; }
	.element-7.active { top: 42.5%; left: 63%; }
	.element-8.active { top: 57%; left: 65%; }
	.element-9.active { top: 69%; left: 50%; }
	.element-10.active { top: 50%; left: 35%; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
	.element-6.active { top: 31.5%; left: 50%; }
	.element-7.active { top: 42.5%; left: 64%; }
	.element-8.active { top: 57%; left: 65%; }
	.element-9.active { top: 69%; left: 50%; }
	.element-10.active { top: 50%; left: 35%; }
}

@media (min-width: 1400px) and (max-width: 1599px) {
	.element-6.active { top: 30.5%; left: 50%; }
	.element-7.active { top: 42.5%; left: 62%; }
	.element-8.active { top: 57%; left: 62%; }
	.element-9.active { top: 70%; left: 50%; }
	.element-10.active { top: 50%; left: 36.5%; }
}

@media (min-width: 1600px) and (max-width: 1850px) {
	.element-6.active { top: 29.5%; left: 50%; }
	.element-7.active { top: 42.5%; left: 62%; }
	.element-8.active { top: 57%; left: 62%; }
	.element-9.active { top: 71%; left: 50%; }
	.element-10.active { top: 50%; left: 37.5%; }
}


.element-4-step {
	width: calc(200px + 70 * ((100vw - 992px) / (1920 - 992)));
	height: calc(200px + 70 * ((100vw - 992px) / (1920 - 992)));
	opacity: 0;
	transition: opacity 0.5s, top 0.5s, left 0.5s, width 0.5s, height 0.5s;
	cursor: pointer;
}

.element-11 { top: 25%; left: -50%; }
.element-12 { top: -50%; left: 67.5%; }
.element-13 { top: 75%; left: 150%; }
.element-14 { top: 150%; left: 32.5%; }

@media (max-width: 992px) {
	.element-mobile-11 { top: 25%; left: -50%; }
	.element-mobile-12 { top: -50%; left: 67.5%; }
	.element-mobile-13 { top: 75%; left: 150%; }
	.element-mobile-14 { top: 150%; left: 32.5%; }
}

.element-4-step.active {
	opacity: 0.9;
}

.element-11.active { top: 25%; left: 32.5%; }
.element-12.active { top: 25%; left: 67.5%; }
.element-13.active { top: 75%; left: 67.5%; }
.element-14.active { top: 75%; left: 32.5%; }

/*.element-mobile-11.active { top: 25%; left: 32.5%; }
.element-mobile-12.active { top: 25%; left: 67.5%; }
.element-mobile-13.active { top: 75%; left: 67.5%; }
.element-mobile-14.active { top: 75%; left: 32.5%; }*/

@media (min-width: 0px) and (max-width: 350px) {
	/*.element-11.active { top: 27%; left: 25%; }
	.element-12.active { top: 27%; left: 75%; }
	.element-13.active { top: 72%; left: 75%; }
	.element-14.active { top: 72%; left: 25%; }*/
	
	.element-mobile-11.active { top: 27%; left: 25%; }
	.element-mobile-12.active { top: 27%; left: 75%; }
	.element-mobile-13.active { top: 70%; left: 75%; }
	.element-mobile-14.active { top: 70%; left: 25%; }
	
	.element-4-step.animation-element {
    width: 130px;
    height: 130px;
	}
}

@media (min-width: 351px) and (max-width: 400px) {
	/*.element-11.active { top: 27%; left: 25%; }
	.element-12.active { top: 27%; left: 75%; }
	.element-13.active { top: 72%; left: 75%; }
	.element-14.active { top: 72%; left: 25%; }*/
	
	.element-mobile-11.active { top: 27%; left: 25%; }
	.element-mobile-12.active { top: 27%; left: 75%; }
	.element-mobile-13.active { top: 70%; left: 75%; }
	.element-mobile-14.active { top: 70%; left: 25%; }
	
	.element-4-step.animation-element {
    width: 140px;
    height: 140px;
	}
}

@media (min-width: 401px) and (max-width: 550px) {
	/*.element-11.active { top: 27%; left: 25%; }
	.element-12.active { top: 27%; left: 75%; }
	.element-13.active { top: 70%; left: 75%; }
	.element-14.active { top: 70%; left: 25%; }*/
	
	.element-mobile-11.active { top: 27%; left: 25%; }
	.element-mobile-12.active { top: 27%; left: 75%; }
	.element-mobile-13.active { top: 70%; left: 75%; }
	.element-mobile-14.active { top: 70%; left: 25%; }
	
	.element-4-step.animation-element {
    width: 150px;
    height: 150px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.element-11.active { top: 24%; left: 31.5%; }
	.element-12.active { top: 24%; left: 68.5%; }
	.element-13.active { top: 76%; left: 68.5%; }
	.element-14.active { top: 76%; left: 31.5%; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
	.element-11.active { top: 23%; left: 31.5%; }
	.element-12.active { top: 23%; left: 68.5%; }
	.element-13.active { top: 77%; left: 68.5%; }
	.element-14.active { top: 77%; left: 31.5%; }
}

@media (min-width: 1400px) and (max-width: 1599px) {
	.element-11.active { top: 23%; left: 31.5%; }
	.element-12.active { top: 23%; left: 68.5%; }
	.element-13.active { top: 77%; left: 68.5%; }
	.element-14.active { top: 77%; left: 31.5%; }
}

@media (min-width: 1600px) and (max-width: 1850px) {
	.element-11.active { top: 22%; left: 31.5%; }
	.element-12.active { top: 22%; left: 68.5%; }
	.element-13.active { top: 78%; left: 68.5%; }
	.element-14.active { top: 78%; left: 31.5%; }
}

.element-5-step {
	width: 162px;
	height: 162px;
	/*opacity: 0;*/
	transition: opacity 0.5s, top 0.5s, left 0.5s, width 0.5s, height 0.5s;
}

.element-5-step.big {
	width: 294px;
	height: 294px;
}

.element-15 { top: -50%; left: 24%; }
.element-16 { top: -50%; left: 41%; }
.element-17 { top: -50%; left: 59%; }
.element-18 { top: -50%; left: 76%; }
.element-19 { top: 30%; left: 150%; }
.element-20 { top: 50%; left: 150%; }
.element-21 { top: 70%; left: 150%; }
.element-22 { top: 88%; left: 150%; }
.element-23 { top: 150%; left: 59%; }
.element-24 { top: 150%; left: 41%; }
.element-25 { top: 150%; left: 24%; }
.element-26 { top: 50%; left: -50%; }

@media (max-width: 992px) {
	.element-mobile-15 { top: 35%; left: -70%; }
	.element-mobile-16 { top: 35%; left: -70%; }
	.element-mobile-17 { top: -70%; left: 10%; }
	.element-mobile-18 { top: -70%; left: 50%; }
	.element-mobile-19 { top: -70%; left: 89%; }
	.element-mobile-20 { top: 35%; left: 170%; }
	.element-mobile-21 { top: 35%; left: 170%; }
	.element-mobile-22 { top: 62%; left: 170%; }
	.element-mobile-23 { top: 170%; left: 90%; }
	.element-mobile-24 { top: 170%; left: 50%; }
	.element-mobile-25 { top: 170%; left: 11%; }
	.element-mobile-26 { top: 62%; left: -70%; }
}

.element-5-step.active {
	opacity: 1;
}

.element-15.active { top: 12%; left: 24%; }
.element-16.active { top: 12%; left: 41%; }
.element-17.active { top: 12%; left: 59%; }
.element-18.active { top: 12%; left: 76%; }
.element-19.active { top: 30%; left: 78%; }
.element-20.active { top: 50%; left: 73%; }
.element-21.active { top: 70%; left: 78%; }
.element-22.active { top: 88%; left: 76%; }
.element-23.active { top: 88%; left: 59%; }
.element-24.active { top: 88%; left: 41%; }
.element-25.active { top: 88%; left: 24%; }
.element-26.active { top: 50%; left: 27%; }

/*.element-mobile-15.active { top: 12%; left: 24%; }
.element-mobile-16.active { top: 12%; left: 41%; }
.element-mobile-17.active { top: 12%; left: 59%; }
.element-mobile-18.active { top: 12%; left: 76%; }
.element-mobile-19.active { top: 30%; left: 78%; }
.element-mobile-20.active { top: 50%; left: 73%; }
.element-mobile-21.active { top: 70%; left: 78%; }
.element-mobile-22.active { top: 88%; left: 76%; }
.element-mobile-23.active { top: 88%; left: 59%; }
.element-mobile-24.active { top: 88%; left: 41%; }
.element-mobile-25.active { top: 88%; left: 24%; }
.element-mobile-26.active { top: 50%; left: 27%; }*/


@media (min-width: 0px) and (max-width: 350px) {
	.element-mobile-15.active { top: 35%; left: 36%; }
	.element-mobile-16.active { top: 35%; left: 11%; }
	.element-mobile-17.active { top: 19%; left: 10%; }
	.element-mobile-18.active { top: 25%; left: 50%; }
	.element-mobile-19.active { top: 19%; left: 89%; }
	.element-mobile-20.active { top: 35%; left: 64%; }
	.element-mobile-21.active { top: 35%; left: 89%; }
	.element-mobile-22.active { top: 62%; left: 89%; }
	.element-mobile-23.active { top: 77%; left: 90%; }
	.element-mobile-24.active { top: 73%; left: 50%; }
	.element-mobile-25.active { top: 77%; left: 11%; }
	.element-mobile-26.active { top: 62%; left: 11%; }
	.element-5-step.animation-element {
		width: 82px;
    height: 82px;
	}
	.element-5-step.big.animation-element {
    width: 144px;
    height: 144px;
	}
}

@media (min-width: 351px) and (max-width: 400px) {
	.element-mobile-15.active { top: 35%; left: 36%; }
	.element-mobile-16.active { top: 35%; left: 11%; }
	.element-mobile-17.active { top: 19%; left: 10%; }
	.element-mobile-18.active { top: 25%; left: 50%; }
	.element-mobile-19.active { top: 19%; left: 89%; }
	.element-mobile-20.active { top: 35%; left: 64%; }
	.element-mobile-21.active { top: 35%; left: 89%; }
	.element-mobile-22.active { top: 62%; left: 89%; }
	.element-mobile-23.active { top: 77%; left: 90%; }
	.element-mobile-24.active { top: 73%; left: 50%; }
	.element-mobile-25.active { top: 77%; left: 11%; }
	.element-mobile-26.active { top: 62%; left: 11%; }
	.element-5-step.animation-element {
		width: 82px;
    height: 82px;
	}
	.element-5-step.big.animation-element {
    width: 144px;
    height: 144px;
	}
}

@media (min-width: 401px) and (max-width: 550px) {
	.element-mobile-15.active { top: 35%; left: 36%; }
	.element-mobile-16.active { top: 35%; left: 11%; }
	.element-mobile-17.active { top: 19%; left: 10%; }
	.element-mobile-18.active { top: 25%; left: 50%; }
	.element-mobile-19.active { top: 19%; left: 89%; }
	.element-mobile-20.active { top: 35%; left: 64%; }
	.element-mobile-21.active { top: 35%; left: 89%; }
	.element-mobile-22.active { top: 62%; left: 89%; }
	.element-mobile-23.active { top: 77%; left: 90%; }
	.element-mobile-24.active { top: 73%; left: 50%; }
	.element-mobile-25.active { top: 77%; left: 11%; }
	.element-mobile-26.active { top: 62%; left: 11%; }
	.element-5-step.animation-element {
		width: 82px;
    height: 82px;
	}
	.element-5-step.big.animation-element {
    width: 144px;
    height: 144px;
	}
}


@media (min-width: 992px) and (max-width: 1199px) {
	.element-15.active { top:  3%; left: 21%; }
	.element-16.active { top:  3%; left: 41%; }
	.element-17.active { top:  3%; left: 59%; }
	.element-18.active { top:  3%; left: 79%; }
	.element-19.active { top: 27%; left: 84%; }
	.element-20.active { top: 50%; left: 82%; }
	.element-21.active { top: 73%; left: 84%; }
	.element-22.active { top: 97%; left: 79%; }
	.element-23.active { top: 97%; left: 59%; }
	.element-24.active { top: 97%; left: 41%; }
	.element-25.active { top: 97%; left: 21%; }
	.element-26.active { top: 50%; left: 18%; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
	.element-15.active { top:  3%; left: 21%; }
	.element-16.active { top:  3%; left: 41%; }
	.element-17.active { top:  3%; left: 59%; }
	.element-18.active { top:  3%; left: 79%; }
	.element-19.active { top: 27%; left: 84%; }
	.element-20.active { top: 50%; left: 82%; }
	.element-21.active { top: 73%; left: 84%; }
	.element-22.active { top: 97%; left: 79%; }
	.element-23.active { top: 97%; left: 59%; }
	.element-24.active { top: 97%; left: 41%; }
	.element-25.active { top: 97%; left: 21%; }
	.element-26.active { top: 50%; left: 18%; }
}

@media (min-width: 1400px) and (max-width: 1599px) {
	.element-15.active { top:  9%; left: 22%; }
	.element-16.active { top:  9%; left: 41%; }
	.element-17.active { top:  9%; left: 59%; }
	.element-18.active { top:  9%; left: 78%; }
	.element-19.active { top: 27%; left: 80%; }
	.element-20.active { top: 50%; left: 78%; }
	.element-21.active { top: 73%; left: 81%; }
	.element-22.active { top: 90%; left: 78%; }
	.element-23.active { top: 90%; left: 59%; }
	.element-24.active { top: 90%; left: 41%; }
	.element-25.active { top: 90%; left: 22%; }
	.element-26.active { top: 50%; left: 22%; }
}

@media (min-width: 1600px) and (max-width: 1850px) {
	.element-15.active { top:  9%; left: 22%; }
	.element-16.active { top:  9%; left: 41%; }
	.element-17.active { top:  9%; left: 59%; }
	.element-18.active { top:  9%; left: 78%; }
	.element-19.active { top: 27%; left: 80%; }
	.element-20.active { top: 50%; left: 78%; }
	.element-21.active { top: 73%; left: 81%; }
	.element-22.active { top: 90%; left: 78%; }
	.element-23.active { top: 90%; left: 59%; }
	.element-24.active { top: 90%; left: 41%; }
	.element-25.active { top: 90%; left: 22%; }
	.element-26.active { top: 50%; left: 22%; }
}


.animation-page-annotation-text {
	color: #134294;
	font-size: 12px;
	/*top: calc(100% + 10px);*/
	top: calc(100% - 12px);
	left: 15%;
}


.btn-page-1 {
	left: 28%;
	bottom: 55%;
}

.btn-page-2 {
	left: 33.2%;
	bottom: 20.6%;
}

.btn-page-3 {
	left: 60.4%;
	bottom: 72.1%;
}

.btn-page-4 {
	left: 66.2%;
	bottom: 26.5%;
}

.btn-page-5 {
	top: 3.5%;
	right: 11.5%;
}

.btn-page-6 {
	top: 7.5%;
	left: 30%;
}

.btn-page-7 {
	right: 26%;
	bottom: 8.5%;
}



.test-page {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	transition: background-color 0.5s;
}

.test-page.hide {
	z-index: -1;
}

.btn-select-test-wrapper {
	transition: width 0.5s;
}

.btn-select-test-wrapper.active {
	width: calc(46vw);
	cursor: default;
}

.btn-select-test-wrapper > *:not(.test-list-wrapper) {
	transition: opacity 0.5s;
}

.btn-select-test-wrapper.active > *:not(.test-list-wrapper) {
	opacity: 0;
}

.btn-select-test-wrapper.hide-element > *:not(.test-list-wrapper) {
	display: none;
}

.test-list-wrapper {
	display: none;
	opacity: 0;
	height: 0px;
	width: 100%;
	overflow: hidden;
	transition: opacity 0.5s, height 0.5s;
	color: #fff;
	font-size: 22px;
	font-weight: 600;
}

.btn-select-test-wrapper.active .test-list-wrapper {
	display: block;
}

.btn-select-test-wrapper.active.hide-element .test-list-wrapper {
	opacity: 1;
}

.btn-select-test-close {
	width: 50px;
	height: 50px;
	background-image: url(../image/detail_page/btn-detail-close.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	top: 0%;
	right: -1%;
	cursor: pointer;
	z-index: 15;
}

.btn-open-test {
	width: 100%;
	background-color: #134294;
	padding: 10px;
	padding-right: 25px;
	border-radius: 30px;
	cursor: pointer;
	position: relative;
	margin-top: auto;
	text-align: center;
	text-transform: uppercase;
}

.btn-open-test:before {
	content: '';
	position: absolute;
	top: 50%;
	right: -5%;
	width: 30px;
	height: 30px;
	transform: translate(-50%, -50%);
	background-image: url(../image/select-test/select-test-play-icon.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.column-btn-test {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.main-page-wrapper.test-page-active {
	opacity: 0;
}

.test-page.active {
	background-color: #DFF2FD;
}

.test-wrapper {
	padding-top: 50px;
	color: #134294;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.test-title {
	font-size: 18px;
	font-weight: 400;
	padding-bottom: 5px;
	text-align: center;
}

.question-dots {
	padding-bottom: 10px;
	padding-top: 10px;
	display: flex;
	justify-content: center;
}

.question-dot {
	width: 20px;
	height: 20px;
	background-color: #ACDCFB;
	opacity: 0.5;
	border-radius: 50%;
	margin: 0 7px;
	transition: background-color 0.5s, opacity 0.5s;
}

.question-dot.active, .question-dot.answer {
	background-color: #134294;
	opacity: 1;
}

.question-dot:hover {
	cursor: pointer;
	opacity: 0.9;
}

.question-container {
	width: 100%;
	height: 600px;
	background-color: #C5E8FD;
	margin-top: 20px;
	border-radius: 30px;
	padding: 40px;
}

.question-wrapper {
	position: relative;
	opacity: 0;
	transition: opacity 0.3s;
}

.question-wrapper.hide {
	z-index: -1;
	display: none;
}

.question-wrapper.active {
	opacity: 1;
}

.question-title {
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 25px;
}

.question-answers {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 20px;
}

.detail-page-annotation-text {
	margin-top: auto;
	padding-bottom: 20px;
	word-wrap: break-word;
}

.question-next-btn {
	width: 180px;
	color: #fff;
	background-color: #134294;
	padding: 10px 15px;
	padding-right: 25px;
	border-radius: 30px;
	cursor: pointer;
	position: relative;
	margin: auto;
	text-align: center;
}

.question-next-btn:before {
	content: '';
	position: absolute;
	top: 50%;
	right: -5%;
	width: 30px;
	height: 30px;
	transform: translate(-50%, -50%);
	background-image: url(../image/select-test/select-test-play-icon.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.question-next-btn.get-result {
	width: 270px;
}


.form-custom-checkbox {
	position: absolute;
  z-index: -1;
  opacity: 0;
}

.checkbox-text {
	font-size: 18px;
}

.form-custom-checkbox+label {
  display: inline-flex;
  align-items: center;
  user-select: none;
	cursor: pointer;
	margin-bottom: 15px;
}

.form-custom-checkbox+label::before {
  content: '';
  display: inline-block;
  width: 35px;
	height: 35px;
  flex-shrink: 0;
  flex-grow: 0;
	background-color: #fff;
  /*border: 1px solid #e5e5e5;*/
  border-radius: 50%;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

.form-custom-checkbox:checked+label::before {
  border-color: #134294;
  background-color: #134294;
}

.btn-test-page-close {
	width: 60px;
	height: 60px;
	background-image: url(../image/detail_page/btn-detail-close.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	top: 7%;
	right: 13.3%;
	cursor: pointer;
	z-index: 15;
}

.result-wrapper {
	width: 100%;
	height: auto;
	min-height: 330px;
	max-height: 600px;
	background-color: #C5E8FD;
	margin-top: 90px;
	border-radius: 30px;
	padding: 60px;
	padding-top: 30px;
	padding-bottom: 30px;
	transition: background-color 0.3s;
}

.result-wrapper.result-good {
	color: #134294;
	background-color: #C5E8FD;
}

.result-wrapper.result-normal {
	color: #fff;
	background-color: #134294;
}

.result-wrapper.result-bad {
	color: #fff;
	background-color: #DD013E;
}

.result-subtitle {
	font-size: 24px;
	font-weight: 600;
}

.result-title {
	font-size: 36px;
	font-weight: 600;
	text-transform: uppercase;
	padding-bottom: 1rem;
}

.result-text {
	font-size: 18px;
}

.result-smile-img {
	width: 100%;
	height: auto;
	padding: 0 15px;
}


.mobile-result-wrapper {
	display: none;
}

.btn-result-sale-wrapper {
	padding-top: 90px;
	display: flex;
	justify-content: center;
}

.btn-result-sale {
	position: relative;
	width: 860px;
	height: 90px;
	background-image: url('../image/test-page/btn-result-sale.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
}

.btn-result-sale > .btn-result-sale-hover {
	width: 460px;
	height: 340px;
	bottom: -100%;
	left: -22%;
	opacity: 0;
	position: absolute;
	background-image: url('../image/btn-sale/sale-hover.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	
	transition: opacity 0.5s, bottom 0.5s;
}

.btn-result-sale:hover > .btn-result-sale-hover, .btn-result-sale.active > .btn-result-sale-hover {
	bottom: calc(100% - 32px);
	opacity: 1;
	cursor: pointer;
}


@media (min-width: 992px) and (max-width: 1199px) {
	.detail-page-wrapper .btn-sale-wrapper {
		right: -6%;
	}
} 


@media (max-width: 1400px) {
	.element-5-step.big {
    width: 244px;
    height: 244px;
	}
	.element-5-step {
    width: 132px;
    height: 132px;
	}
	.element-4-step {
    width: 170px;
		height: 170px;
	}
	.element-1-step {
		width: 260px;
		height: 260px;
	}
	.animation-page-annotation-text {
		top: calc(100% + 50px);
	}
	
	.test-title {
		font-size: 16px;
	}
	
	.question-title {
    font-size: 17px;
	}
	
	.form-custom-checkbox+label::before {
		width: 30px;
		height: 30px;
	}
	
	.checkbox-text {
		font-size: 16px;
	}
	
	.result-subtitle {
    font-size: 20px;
	}
	
	.result-title {
    font-size: 28px;
	}
	
	.result-text {
    font-size: 16px;
	}
	
	.btn-result-sale {
		width: 680px;
		height: 60px;
	}
	
	.btn-result-sale > .btn-result-sale-hover {
		width: 320px;
    height: 233px;
	}
	
	.btn-result-sale:hover > .btn-result-sale-hover, .btn-result-sale.active > .btn-result-sale-hover {
		bottom: calc(100% - 21px);
	}
	
	.result-wrapper {
		padding-top: 20px;
	}
	
	.btn-result-sale-wrapper {
		padding-top: 50px;
	}
	
	.animation-title {
		font-size: 34px;
		top: -1%;
	}
	
	.btn-further {
		bottom: -15%;
	}
	
	.animation-title-3 {
		font-size: 28px;
    top: 66%;
	}
	
}

@media (max-width: 1200px) {
	.element-5-step.big {
    width: 244px;
    height: 244px;
	}
	.element-5-step {
    width: 132px;
    height: 132px;
	}
	.element-4-step {
    width: 170px;
		height: 170px;
	}
	.element-1-step {
		width: 260px;
		height: 260px;
	}
	
	.btn-result-sale {
		width: 630px;
		height: 60px;
	}
	
	.animation-title {
		top: -3%;
	}
	
	.animation-title-3 {
		font-size: 28px;
    top: 66%;
	}
	
}

@media (min-width: 992px) {
	:root {
		--desctop-scale: 0.5;
		--desctop-scale-select-probiotic: 0.8;
	}
	
	.btn-close-select-probiotic-page {
    top: 7%;
    right: 0.3%;
	}
	.btn-page-1 {
		left: 32%;
    bottom: 44%;
	}
	.btn-page-2 {
    left: 34.2%;
    bottom: 8.6%;
	}
	.btn-page-3 {
		left: 61.4%;
    bottom: 51.1%;
	}
	.btn-page-4 {
    left: 65.2%;
    bottom: 15.5%;
	}
	
	/*.btn-page-7 {
		right: 0.5%;
		bottom: 3.5%;
	}*/
	
	.btn-select-test-wrapper.active {
		width: calc(90vw);
	}
	
}

@media (min-width: 1200px) {
	:root {
		--desctop-scale: 0.6;
		--desctop-scale-select-probiotic: 0.8;
	}
	.btn-close-select-probiotic-page {
    top: 7%;
    right: 0.3%;
	}
	.btn-page-1 {
		left: 32%;
    bottom: 44%;
	}
	.btn-page-2 {
    left: 34.2%;
    bottom: 8.6%;
	}
	.btn-page-3 {
		left: 61.4%;
    bottom: 51.1%;
	}
	.btn-page-4 {
    left: 65.2%;
    bottom: 15.5%;
	}
	.btn-select-test-wrapper.active {
		width: calc(90vw);
	}
}

@media (min-width: 1400px) {
	:root {
		--desctop-scale: 0.7;
		--desctop-scale-select-probiotic: 0.85;
	}
	.btn-close-select-probiotic-page {
    top: 7%;
    right: 0.3%;
	}
	.btn-page-1 {
		left: 32%;
    bottom: 44%;
	}
	.btn-page-2 {
    left: 34.2%;
    bottom: 8.6%;
	}
	.btn-page-3 {
		left: 63.4%;
    bottom: 58.1%;
	}
	.btn-page-4 {
    left: 65.2%;
    bottom: 15.5%;
	}
	.btn-select-test-wrapper.active {
		width: calc(67vw);
	}
}

@media (min-width: 1600px) {
	:root {
		--desctop-scale: 0.8;
		--desctop-scale-select-probiotic: 0.9;
	}
	.btn-close-select-probiotic-page {
    top: 7%;
    right: 0.3%;
	}
	.btn-page-1 {
		left: 32%;
    bottom: 44%;
	}
	.btn-page-2 {
    left: 34.2%;
    bottom: 8.6%;
	}
	.btn-page-3 {
		left: 64.4%;
    bottom: 59.1%;
	}
	.btn-page-4 {
    left: 65.2%;
    bottom: 15.5%;
	}
	.btn-select-test-wrapper.active {
		width: calc(55vw);
	}
}

@media (min-width: 1500px) and (max-width: 1849px) {
	.animation-page-annotation-text {
		top: calc(100% + 20px);
	}
}

@media (min-width: 1800px) {
	:root {
		--desctop-scale: 1;
		--desctop-scale-select-probiotic: 1;
	}
	.btn-page-1 {
		left: 28%;
		bottom: 55%;
	}

	.btn-page-2 {
		left: 33.2%;
		bottom: 20.6%;
	}

	.btn-page-3 {
		left: 60.4%;
		bottom: 72.1%;
	}

	.btn-page-4 {
		left: 66.2%;
		bottom: 26.5%;
	}
	
	.btn-select-test-wrapper.active {
		width: calc(46vw);
	}
}

@media (min-width: 992px) {
	main > *:not(.backgroung-block, .detail-page-wrapper, .select-probiotic-page, .test-page) > *:not(.btn-page-5) {
		transform: scale(var(--desctop-scale));
		transform-origin: left top;
	}
	main > *:not(.backgroung-block, .detail-page-wrapper, .select-probiotic-page) > *.tr:not(.btn-page-5) {
		transform: scale(var(--desctop-scale)) translate(-50%, -50%);
	}
	main > *:not(.backgroung-block, .detail-page-wrapper, .select-probiotic-page) > *.trx:not(.btn-page-5) {
		transform: scale(var(--desctop-scale)) translateX(-50%);
	}
	main > *:not(.backgroung-block, .detail-page-wrapper, .select-probiotic-page) > *.try:not(.btn-page-5) {
		transform: scale(var(--desctop-scale)) translateY(-50%);
	}
	main > .detail-page-wrapper {
		transform: translate(-50%, -50%) scale(var(--desctop-scale));
	}
	main > .select-probiotic-page {
		transform: translateY(5%) scale(var(--desctop-scale-select-probiotic));
	}
	main > .select-probiotic-page > * > *:not(.text-lgg); {
		transform: scale(var(--desctop-scale));
	}
	
	.btn-select-test-wrapper {
		transform-origin: right bottom !important;
	}
	
}


/* мобильная вёрстка */

@media (max-width: 991px) {
	.detail-page-wrapper.active, .detail-page-wrapper .detail-page-bg {
		width: 100%;
		height: 100%;
		border-radius: 0%;
	}
	.detail-content {
		width: 95%;
		height: 95%;
	}
	.btn-detail-page-close {
		width: 40px;
		height: 40px;
		top: 30px;
		right: 20px;
	}
	.detail-page-wrapper .btn-sale-wrapper {
		display: none;
	}
	.detail-page-title {
		font-size: 22px;
	}
	.detail-page-text {
		font-size: 14px;
	}
	.detail-page-dropdown span {
		font-size: 16px;
	}
	.detail-page-dropdown span:before {
		width: 20px;
		height: 20px;
	}
	.detail-page-annotation-text {
		font-size: 11px;
		padding-bottom: 20px;
	}
	.icon-text-wrapper div {
		font-size: 14px;
	}
	.btn-image-wrapper > .static {
		display: none;
	}
	.btn-image-wrapper > .hover {
    position: static; 
    opacity: 1; 
    transform: translateX(0%);
    width: 95px;
	}
	
	.btn-open-page-wrapper:hover > .btn-image-wrapper > .hover {
		transform: translateX(0%);
		width: 95px;
	}
	
	.detail-content {
		padding-top: 35px;
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 40px;
	}
	
	.btn-text {
		font-size: 15px;
	}
	.center-lgg-block {
		width: 220px;
	}
	.btn-select-probiotic-wrapper {
		width: 100%;
		max-width: 260px;
		padding: 5px;
	}
	.btn-select-probiotic-wrapper span {
		font-size: 15px;
	}
	.btn-select-probiotic-wrapper img {
		width: 35px;
	}
	
	.btn-select-test-wrapper {
		width: 100%;
		max-width: 310px;
		padding: 7px;
	}
	
	.btn-select-test-wrapper span {
		font-size: 16px;
	}
	.btn-select-test-wrapper img {
		width: 45px;
	}
	
	.btn-close-select-probiotic-page {
		width: 40px;
		height: 40px;
		top: 6%;
    right: -3.7%;
	}
	
	.select-probiotic-page {
		height: 100%;
	}
	
	.animation-page-annotation-text {
		top: auto;
    font-size: 8px;
    left: 5px;
    right: 5px;
	}
	
	.btn-page-1 { left: 20%; bottom: 64%; }
	.btn-page-2 { left: 25.2%; bottom: 17.6%; }
	.btn-page-3 { left: 80%; bottom: 62.1%; }
	.btn-page-4 { left: 79.2%; bottom: 16.5%; }
	.btn-page-5 { top: 2.5%; right: -3%; }
	.btn-page-6 { top: 4.5%; left: 5%; transform: translateX(0); }
	.btn-page-7 { left: 50%; right: auto; bottom: 12.5%;  transform: translateX(-50%); }
	
	.question-title {
		font-size: 18px;
	}
	
	.question-container {
		padding: 20px;
		height: auto;
		max-height: 600px;
	}
	
	.test-annotation {
		padding-bottom: 80px;
	}
	
	.btn-test-page-close {
		width: 40px;
		height: 40px;
		top: 3%;
    right: -1.7%;
	}
	
	.mobile-result-wrapper {
		display: block;
	}
	
	.desctop-result-wrapper {
		display: none;
	}
	
	.result-wrapper {
		padding: 20px;
		height: auto;
		max-height: 600px;
	}
	
	.btn-result-sale {
		width: 100%;
		height: 60px;
	}
	
	.btn-result-sale > .btn-result-sale-hover {
		width: 260px;
    height: 189px;
		left: 0;
	}
	
	.btn-result-sale:hover > .btn-result-sale-hover, .btn-result-sale.active > .btn-result-sale-hover {
		bottom: calc(100% - 25px);
	}
	
	.result-text {
    padding-top: 15px;
	}
	
	
	.animation-title {
		font-size: 20px;
	}
	
	.animation-title-1 {
		top: 7%;
	}
	
	.animation-title-3 {
		top: 57%;
	}
	
	.btn-further {
    bottom: 70px;
	}
	
	.animation-modal-tab-title {
		font-size: 16px;
	}
	
	/*.btn-close-animation-modal-page {
		top: 0;
		right: 0;
	}*/
}


@media (max-width: 500px) {
	.btn-image-wrapper > .hover {
    width: 80px;
	}
	
	.btn-open-page-wrapper:hover > .btn-image-wrapper > .hover {
		width: 80px;
	}
	.btn-select-probiotic-wrapper span {
		font-size: 14px;
	}
	.btn-select-test-wrapper span {
		font-size: 14px;
	}
	.btn-select-test-wrapper img {
		width: 35px;
	}
	.center-lgg-block {
		width: 180px;
	}
	.btn-page-1 { top: 20%; left: 25%; bottom: /*64%*/auto; }
	.btn-page-2 { top: 60%; left: 25.2%; bottom: /*17.6%*/auto; }
	.btn-page-3 { top: 20%; left: 80%; bottom: /*62.1%*/auto; }
	.btn-page-4 { top: 62%; left: 76.2%; bottom: /*16.5%*/auto; }
	.btn-page-5 { top: 2.5%; right: -3%; }
	.btn-page-6 { top: 4.5%; left: 5%; transform: translateX(0); }
	.btn-page-7 { left: 50%; right: auto; bottom: 12.5%; }
	.btn-select-test-wrapper.active {
		width: 95vw;
		max-width: 900px;
	}
	.btn-select-test-wrapper .test-list-wrapper img {
		width: 60px;
	}
	.column-btn-test {
		flex-direction: row;
	}
	.btn-open-test {
		margin-top: 0;
		text-align: center;
		padding-right: 25px;
	}
	.test-list-wrapper {
		font-size: 18px;
	}
	.name-test {
		width: 100%;
	}
}

@media (max-width: 400px) {
	.btn-image-wrapper > .hover {
    width: 80px;
	}
	
	.btn-open-page-wrapper:hover > .btn-image-wrapper > .hover {
		width: 80px;
	}
	.btn-select-probiotic-wrapper span {
		font-size: 14px;
	}
	.btn-select-test-wrapper span {
		font-size: 14px;
	}
	.btn-select-test-wrapper img {
		width: 35px;
	}
	.center-lgg-block {
		width: 180px;
	}
	.btn-page-1 { top: 20%; left: 25%; bottom: /*64%*/auto; }
	.btn-page-2 { top: 60%; left: 25.2%; bottom: /*17.6%*/auto; }
	.btn-page-3 { top: 20%; left: 80%; bottom: /*62.1%*/auto; }
	.btn-page-4 { top: 62%; left: 76.2%; bottom: /*16.5%*/auto; }
	.btn-page-5 { top: 2.5%; right: -5%; }
	.btn-page-6 { top: 4.5%; left: 5%; transform: translateX(0); }
	.btn-page-7 { left: 50%; right: auto; bottom: 12.5%; }
}

@media (max-width: 370px) {
	.btn-image-wrapper > .hover {
    width: 80px;
	}
	
	.btn-open-page-wrapper:hover > .btn-image-wrapper > .hover {
		width: 80px;
	}
	
	.btn-select-probiotic-wrapper {
		max-width: 195px;
	}
	
	.btn-select-probiotic-wrapper span {
		font-size: 12px;
	}
	.btn-select-test-wrapper span {
		font-size: 14px;
	}
	.btn-select-test-wrapper img {
		width: 35px;
	}
	.center-lgg-block {
		width: 160px;
	}
	.btn-page-1 { top: 14%; left: 25%; bottom: /*64%*/auto; }
	.btn-page-2 { top: 60%; left: 25.2%; bottom: /*17.6%*/auto; }
	.btn-page-3 { top: 14%; left: 80%; bottom: /*62.1%*/auto; }
	.btn-page-4 { top: 62%; left: 76.2%; bottom: /*16.5%*/auto; }
	.btn-page-5 { top: 2.5%; right: -3%; }
	.btn-page-6 { top: 4.5%; left: 5%; transform: translateX(0); }
	.btn-page-7 { left: 50%; right: auto; bottom: 12.5%; }
}



@keyframes btn-pulsate{
	0% {
    transform: translateX(-50%) scale(1,1);
	}
	25% {
    transform: translateX(-50%) scale(1.03,1.03);
	}
	75% {
    transform: translateX(-50%) scale(1,1);
	}
}

font.tablebodytext {
	display: none !important;
}