@font-face {
	font-family: 'Manrope';
	src: url('../fonts/manrope-medium.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Manrope';
	src: url('../fonts/manrope-bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}


*{
	margin:0;
	padding:0
}

body,input,select,select option,textarea{
	font-family: Manrope,'trebuchet ms',arial,sans-serif;
	font-size:10px;
}


:root{
	--main-padding: 30%; /* 36.27% */
	--main-gap: calc(1.5vw + 1px);
}
@media( max-width: 600px ){
	:root{
		--main-gap: 10px;
	}
}
@media( min-width: 1601px ){
	:root{
		--main-gap: 25px;
	}
}


html{
	height:100%;
	background: #fff;
}

body{
	min-height:100%;
	line-height:1.4;
	color:#fff
}

img{border:0}

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner{
	border:none;
}

select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus{
	outline:none
}
select option{
	padding-left:3px;
}

table{
	border-collapse:collapse
}

a:link,
a:visited{
	color:#00f;
	text-decoration:underline
}
a:hover{
	color:#c00;
	text-decoration:none
}


.cfx:after{
	content:' ';clear:both;display:block;width:0;height:0;overflow:hidden;font-size:0
}


.manual p{
	padding-bottom:1em;
}


.Main{
  min-width: 600px;
}


.Head{
  background: #1c304e;
  padding: 15px 20px;
}
.Head img{
  display: block;
}


.Body{
	display: grid;
	place-items: center;
  min-height: calc(100vh - 92px);
  position: relative;
  overflow: hidden;
	background: #225058 url('../images/kaleidoscope.svg') 0 0 no-repeat;
	background-size: 100% 100%;
}


.Body > .In{
	position: relative;
	/*width: 100%;
	height: 100%;
	display: flex;
	align-items: center;*/
}
.Body > .In > .In{
	/*flex-grow: 1;
	padding: 25px 0;*/
}


.PriceColumns{
	position: absolute;
	top: 0;
	bottom: var(--main-padding);
	left: 0;
	right: 0;
	color: #173f46;
	text-align: center;
	font-size: calc(3.917525773195876vmin - 3.670103092783505px);
}
@media( max-height: 400px ){
	.PriceColumns{
		font-size: 12px;
	}
}
@media( min-height: 885px ) and ( min-width: 885px ){
	.PriceColumns{
		font-size: 31px;
	}
}

.PriceColumns > .In{
	width: 60%;
	max-width: 1043px;
	/*max-width: 890px;
	max-width: calc(163.07692307692307vmin - 292.3076923076923px);*/
	min-width: 360px;
	height: 100%;
	margin: 0 auto;
	display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--main-gap);
  justify-content: stretch;
}
@media( max-height: 400px ){
	.PriceColumns > .In{
		/*max-width: 360px;*/
	}
}

.PriceColumns > .In > .E{
	background: #F2F2F3;
	display: flex;
	align-items: flex-end;
	border-radius: 0 0 calc(1.0309278350515463vmin - 1.1237113402061856px) calc(1.0309278350515463vmin - 1.1237113402061856px);
}
@media( max-height: 400px ){
	.PriceColumns > .In > .E{
		border-radius: 0 0 3px 3px;
	}
}
@media( min-height: 885px ) and ( min-width: 885px ){
	.PriceColumns > .In > .E{
		border-radius: 0 0 8px 8px;
	}
}

.PriceColumns > .In > .E > .In{
	flex-grow: 1;
}


.Period{
	line-height: 1;
}


.Price{
	font-size: 200%;
	font-weight: bold;
	line-height: 1;
	padding: calc(5.154639175257732vmin - 8.618556701030927px) 0;
}
@media( max-height: 400px ){
	.Price{
		padding: 12px 0;
	}
}
@media( min-height: 885px ) and ( min-width: 885px ){
	.Price{
		padding: 37px 0;
	}
}


.PerMonth{
	line-height: 1;
	padding: 0 0 calc(7.422680412371134vmin - 5.690721649484536px);
}
@media( max-height: 400px ){
	.PerMonth{
		padding: 0 0 24px;
	}
}
@media( min-height: 885px ) and ( min-width: 885px ){
	.PerMonth{
		padding: 0 0 60px;
	}
}

.Discount{
	position: relative;
	font-size: calc(100% * 28 / 31);
}
.Discount > .In{
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.93em;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	color: #fff;
	line-height: 1.86;

}
.Discount > .In > .In{
	background: #f16f3f;
	padding: 0 calc( 1em * 20 / 28 );
	border-radius: 0.93em;
}


.Overlay{
	position: absolute;
	top: 0;
	bottom: 68%;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.Overlay > .T{
	flex-grow: 1;
	background: #f16f3f;
}
.Overlay > .B{
	flex-grow: 0;
	flex-shrink: 0;
	height: calc( 100% * 24 / 149 );
	background: url('../images/overlay.svg') 0 0 no-repeat;
	background-size: 100% 100%;
}


.Overlay_Snow{
	position: absolute;
}
.Overlay_Snow::after{
	content: '';
	display: block;
	padding-top: 100%;
	height: 0;
	overflow: hidden;
	background: url('../images/snowflake.svg') 0% 0 no-repeat;
	background-size: contain;
	opacity: 0.17;
}
.Overlay_Snow.sn1{
	top: 18.96%;
	left: 7.9375%;
	width: 8.25%;
}
.Overlay_Snow.sn2{
	top: 12.267%;
	right: 13.687%;
	width: 5.312%;
}
.Overlay_Snow.sn3{
	top: 10.78%;
	right: -1.8%;
	width: 9.187%;
}


.ButtonOut{
	text-align: center;
	position: absolute;
	bottom: 0;
	top: calc( 100% - var(--main-padding) );
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc( 1.2164948453608246vmin - 0.7659793814432999px );
}
@media( max-height: 400px ){
	.ButtonOut{
		font-size: 4.1px;
	}
}
@media( min-height: 885px ) and ( min-width: 885px ){
	.ButtonOut{
		font-size: 10px;
	}
}

.ButtonOut > .In{}
.Button{
	display: inline-block;
	vertical-align: top;
	background: #e9bd40;
	line-height: 4.000em;
	border-radius: 66px;
	padding: 0.125em calc(1em * 120 / 32) 0;
	color: #6c331d;
	font-size: 3.2em;
	font-weight: bold;
	text-transform: uppercase;
}


.Title{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 71%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc( 1.1546391752577319vmin - 0.2185567010309269px );
}
.Title:lang(ru){
	font-size: 4.2px;
	font-size: calc(0.597938144329897vmin + 1.7082474226804114px); /*4.1 - 10*/
}
@media( max-height: 400px ){
	.Title{
		font-size: 4.4px;
	}
	.Title:lang(ru){
		font-size: 4.1px;
	}
}
@media( min-height: 520px ) and ( min-width: 520px ){
	.Title{
		font-size: calc(0.7031666666666667vw + 1.562px); /* 5.781 -> 10 / 600 -> 1200 */
	}
}
@media( min-height: 500px ) and ( min-width: 600px ){
	.Title:lang(ru){
		font-size: calc(0.43633333333333335vw + 2.0729999999999986px); /* 4.691 - 6 / 600 -> 900 */
	}
}
@media( min-height: 500px ) and ( min-width: 900px ){
	.Title:lang(ru){
		font-size: calc(0.5223376623376624vmin + 3.377311688311689px); /* 5,989 - 10 / 500 - 885 */
	}
}
@media( min-height: 700px ) and ( min-width: 900px ){
	.Title:lang(ru){
		font-size: calc(0.596vw + 1.656px); /* 7,02 - 10 / 900 - 1400 */
	}
}
@media( min-height: 520px ) and ( min-width: 1200px ){
	.Title{
		font-size: 10px;
	}
}

@media( min-height: 700px ) and ( min-width: 1400px ){
	.Title:lang(ru){
		font-size: 10px;
	}
}

.Title > .In{
	position: relative;
}


.Logo{
  text-align: center;
	color: #fff;
	text-transform: uppercase;
}

.LogoEn{
	width: calc(1em * 68.6);
}
.LogoEn::after{
	content: '';
	display: block;
	padding-top: calc(100% * 69.355 / 358.858);
	height: 0;
	overflow: hidden;
	background: url('../images/logo_en.svg') 0 0 no-repeat;
	background-size: contain;
}


.LogoRu{
	width: calc(1em * 97.7);
}
.LogoRu::after{
	content: '';
	display: block;
	padding-top: calc(100% * 133.261 / 973.086);
	height: 0;
	overflow: hidden;
	background: url('../images/logo_ru.svg') 0 0 no-repeat;
	background-size: contain;
}


.Badge{
	position: absolute;
	top: 77.2%;
	left: 94.6%;
	width: calc(100% * 226 / 970);
	color: #6C331D;
}
.Badge:lang(ru){
	top: 60.8%;
	left: 96.6%;
}
.Badge::before{
	content: '';
	display: block;
	padding-top: calc(100% * 188 / 187);
	height: 0;
	overflow: hidden;
	background: url('../images/badge.svg') 0 0 no-repeat;
	background-size: contain;
}
.Badge > .In{
	position: absolute;
	top: calc(100% * 110 / 283.5);
	left: calc(100% * 60 / 282);
	line-height: 1;
}
.Badge > .In > .In{
	font-weight: bold;
	font-size: 3.6em;
	transform: rotate(55deg);
}
.Badge > .In > .In:lang(ru){
	font-size: 5.4em;
}

.Content {
	z-index: 1;
}

.title-img-discount {
	background-image: url('../images/title-img-discount.svg');
}

.compare-cards {
	font-size: 16px;
	margin-top: 22%;
}

.compare-cards,
.compare-cards * {
	box-sizing: border-box;
}

.cards {
	display: flex;
	gap: 40px;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
}

.card {
	background: linear-gradient(180deg, rgba(198, 198, 198, 0.22) 0%, rgba(255, 255, 255, 0.22) 100%);
	border-radius: 8px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	color: #ffffff;
	padding: 30px;
	min-width: 420px;
	position: relative;
}

.card-header {
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 32px;
}

.card-title {
	font-size: 34px;
	margin-bottom: 4px;
	color: #fff;
	font-weight: 600;
}

.card-subtitle {
	font-size: 16px;
	color: #FFF;
	font-weight: 500;
}

.card-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.card-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
}

.card-item-icon {
	font-size: 16px;
}

.card-actions {
	margin-top: 40px;
	width: 100%;
}

a.card-button {
	width: 100%;
	text-align: center;
	padding: 12px;
	background: #fff;
	color: rgb(16, 98, 144);
	border-radius: 6px;
	display: block;
	text-decoration: none !important;
	font-size: 18px;
	transition: box-shadow 0.3s ease, background 0.3s ease;
	font-weight: 600;
	text-transform: uppercase;
}

a.card-button:hover {
	background: #e3e3e3;
}

.card-button:not(#purchase-button) {
	background: none;
	border: 2px solid #fff;
	color: #fff;
}

.card-button#purchase-button {
	background: rgba(255, 255, 255, 1);
}

.card-button#purchase-button:hover {
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 1);
}