@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
* {
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
}
html, body{
	font-family: 'Satoshi', Arial, sans-serif;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background-color: var(--background-main);
}
div.limiter{
	width:100%;
	max-width: 1600px;
	margin:0 auto;
	overflow: hidden;
}
.nowrap{
	white-space: nowrap;
}
/*------------Button------------*/
.slider_container {
  position: absolute;
  bottom: 50px;
  right: 50px;
  height: 500px;
  width: 500px;
  max-width: 100%;
  z-index: 99;
}
.slider{
	position: relative;
	height: 500px;
	width: 500px;
}
.slider > div{
	height: 500px;
	width: 500px;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position:absolute;
	top:0;
	left:0;
	opacity: 0;
	animation: spin 9s infinite;
	animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.slider > div:nth-child(1){
	animation-delay: 0s;
}
.slider > div:nth-child(2){
	animation-delay: 3s;
}
.slider > div:nth-child(3){
	animation-delay: 6s;
}
@keyframes spin {
  0%   { opacity: 0; transform: translate(40%, 100%); }  /* before entry */
  3%   { opacity: 0; }                                   /* still invisible */
  8%   { opacity: 1; transform: translate(0%, 0%); }     /* fully entered */
  32%  { opacity: 1; transform: translate(0%, 0%); }     /* stay visible */
  37%  { opacity: 0; transform: translate(-100%, 60%); } /* exit */
  100% { opacity: 0; transform: translate(-100%, 60%); } /* wait */
}

/*------------Button------------*/
a.button, span.button{
	display: inline-flex;
	margin:15px auto;
	background-color: var(--font-accent);
	border:1px solid var(--font-accent);
	font-weight: 500;
	color: #fff;
	height: 52px;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	padding: 0 20px;
	border-radius: var(--button-radius, 3px);
	transition: all linear 0.2s;
	user-select: none;
}
a.button.arrow {
	position: relative;
}
a.button.arrow::after {
	content:'';
	width: 20px;
	height: 20px;
	mask-image: url('../svg/arrow-circle.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	position: relative;
	background-color: #fff;
	margin-left: 10px;
	transition: all linear 0.2s;
}
a.button:hover, span.button:hover{
	background-color: #fff;
	color: var(--font-accent);
}
a.button.arrow:hover::after{
	background-color: var(--font-accent);
}
/*------------------------------*/
nav{
	background-color: var(--background-secondary);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 70px;
	gap: 20px;
	padding: 0 200px;
}
nav > a{
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #fff;
	border-radius: 3px;
	height: 35px;
	font-size: 14px;
	text-decoration:none;
	color: #fff;
	font-weight:500;
	padding: 0 35px;
	cursor: pointer;
}
nav > a:last-child{
	background-color: #fff;
	color: var(--background-secondary);
}
@media (max-width: 768px) {
	nav{
		padding: 0 20px;
	}
}
/*------------------------------*/
header{
	height: 670px;
	padding: 70px 45% 0 200px;
	position: relative;
	user-select: none;
}
header > picture{
	position: absolute;
	z-index:1;
	left:0;
	top:0;
}
header > h1, header > p, header > a, header img{
	position: relative;
	z-index:99;
}
header.light > h1, header.light > p{
	color: #fff;
}
header img{
	max-width: 100%;
	display: block;
}
header > h1{
	font-weight: 700;
	font-size: 46px;
	line-height: 64px;
	text-transform: uppercase;
}
header > p{
	font-size: 18px;
	line-height: 129%;
	text-transform: capitalize;
	color: var(--font-secondary);
}
header > a.button{
	border:1px solid var(--special-color);
	background-color: var(--special-color);
	color: #fff;
	text-align: center;
}
header > a.button:hover{
	background-color: #fff;
	color: var(--special-color);
}
header > a.button.arrow:hover::after{
	background-color: var(--special-color);
}
@media (max-width: 768px) {
	header{
		padding: 50px 20px 0 20px;
		height: 550px;
		overflow: hidden;
	}
	header > h1{
		font-size: 30px;
		line-height: 45px;
	}
}
/*------------------------------*/
section {
	text-align: center;
	width: 1200px;
	max-width: 100%;
	margin: 80px auto;
}
section > h3 {
	font-weight: 500;
	font-size: 20px;
}
section > h1 {
	font-weight: 700;
	font-size: 34px;
	display: inline-block;
	color: var(--font-color);
	text-decoration: underline var(--font-accent) 4px;
	text-underline-offset: 15px;
	user-select: none;
	line-height: 180%;
}
section > p {
	font-weight: 400;
	font-size: 18px;
	line-height: 140%;
	user-select: none;
	margin-bottom: 50px;
}
@media (max-width: 768px) {
	section{
		padding: 0 20px;
		margin: 40px auto;
	}
}
/*------------------------------*/
section.why > div, section.how > div{
	display:flex;
	gap: 30px;
	margin: 30px 0;
}
section.how > div > div{
	flex: 1;
}
section.why > div{
	flex-wrap: wrap;
	justify-content: center;
}
section.why > div > div{
	width: calc(25% - 30px);
}
section.why > div > div, section.how > div > div{
	background-color: #FFFFFF;
	padding: 10px;
	box-shadow: 0px 2px 8px 0px #E8E8E8CC;
	border-radius: 8px;
}
section.why > div > div > div:first-child{	
	font-weight: 500;
	font-size: 18px;
	text-align: center;
}
section.why > div > div > div:last-child{
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	text-align: center;
}
section.why span, section.how span{
	width: 100px;
	height: 100px;
	background-color: var(--background-main);
	border-radius: 50%;
	font-weight: 700;
	font-size: 55px;
	line-height: 55px;
	text-align: center;
	color: var(--icon-color);
	user-select: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 10px 0 20px 0;
}
@media (max-width: 768px) {
	section.why > div, section.how > div{
		flex-direction: column;
	}
	section.why > div > div{
		width: 100%;
	}
}
/****************************/
section.use{
	background-color: var(--background-accent);
	width: 100%;
	padding: 20px 0 60px 0;
}
section.use :is(h1, p) {
	color: #fff;
}
section.use > div{
	display:flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
	width: 60%;
	margin: 0 auto;
}
section.use > div .icon::before{
	content:'';
	background-color: var(--background-accent);
	width: 40px;
	height: 40px;
	mask-repeat:no-repeat;
	mask-size: contain;
	display: block;
}
section.use > div > div{
	user-select: none;
	display:flex;
	align-items: center;
	border-radius: 8px;
	background-color: #fff;
	height: 50px;
	padding: 0 20px;
	gap: 10px;
	font-size:18px;
	color: var(--background-accent);
}
@media (max-width: 768px) {
	section.use > div{
		width: calc(100% - 40px);
	}
	section.use > div > div{
		width: 100%;
	}
}
/****************************/
section.category > div{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}
section.category > div > div{
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0px 2px 8px 0px #E8E8E8CC;
	padding: 25px 50px 25px 40px;
	display: flex;
	gap: 30px;
	align-items: center;
	text-align: left;
}
section.category > div .icon::before{
	content:'';
	background-color: var(--icon-color);
	width: 40px;
	height: 40px;
	mask-repeat:no-repeat;
	mask-size: contain;
	display: block;
}
section.category > div .title{
	font-size: 18px;
	font-weight: 500;
}
section.category > div .description{
	color: var(--font-secondary);
}
@media (max-width: 768px) {
	section.category > div{
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
	}
}
/****************************/
.empty{
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
	margin: 40px 0;
}
.empty img{
	user-select:none;
	max-width: 80%;
}
.formbox{
	display: flex;
	flex-direction: column;
	box-shadow: 7px 4px 7.2px 0px #00000005;
	background-color: #fff;
	border-radius: 20px;
	width: 860px;
	max-width: 100%;
	padding: 40px;
	gap: 40px;
}
.formbox .error {
	background: #e37e8a;
	color: #fff;
	padding: 20px;
	border-radius: 5px;
	user-select: none;
}
.formbox .double{
	display: flex;
	gap: 40px;
}
.formbox .double > div{
	flex: 1;
	position: relative;
}
.formbox > div{
	position: relative;
}
.formbox h2{
	margin: 0;
	text-align: center;
	font-weight: 500;
	font-size: 24px;
	color: #333333;
	user-select:none;
}
.empty a{
	color: var(--font-accent);
	text-decoration: none;
}
.empty a:hover{
	text-decoration: underline;
}
.empty .subtitle{
	font-size: 20px;
	color: var(--font-secondary);
}
.empty .center{
	text-align: center;
}
.empty .back{
	color: #333333;
	font-size: 20px;
	position: relative;
}
.empty .back::before{
	content:'';
	width:24px;
	min-width:24px;
	max-width:24px;
	height: 24px;
	background-color: #333333;
	mask-size: contain;
	mask-repeat: no-repeat;
	display: inline-block;
	mask-image: url('../svg/arrow-back.svg');
	position: relative;
	top: 5px;
	left: -10px;
}
.formbox span{
	color: #333333;
	user-select:none;
}
.formbox input[type=submit]{
	display: flex;
	margin:0 auto;
	background-color: var(--font-accent);
	border:1px solid var(--font-accent);
	font-weight: 500;
	font-size: 20px;
	color: #fff;
	height: 52px;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	padding: 0 20px;
	border-radius: 5px;
	transition: all linear 0.2s;
	width: 50%;
}
.formbox input[type=submit]:hover{
	background-color: #fff;
	color: var(--font-accent);
}
.formbox input[type=text], .formbox input[type=password], .formbox input[type=phone], .formbox input[type=email], .formbox select{
	background-color: #F3F3F5;
	border: 1px solid #2C3E501C;
	border-radius: 10px;
	outline: none;
	padding: 9px 12px;
	width: 100%;
	margin-top:10px;
	height: 63px;
	font-size: 16px;
	padding-left: 15px;
}
.formbox input::placeholder {
  color: #949494;
}
.formbox .agree{
	display: flex;
	flex-direction: column;
	gap:10px;
}
.formbox .icon::before{
	content:'';
	width:24px;
	min-width:24px;
	max-width:24px;
	height: 24px;
	background-color: #717182;
	mask-size: contain;
	mask-repeat: no-repeat;
	display: block;
	position: absolute;
	left: 15px;
	bottom: 19px;
}
.formbox .icon.email::before{mask-image: url('../svg/mail.svg');}
.formbox .icon.phone::before{mask-image: url('../svg/phone.svg');}
.formbox .icon.lock::before{mask-image: url('../svg/lock.svg');}
.formbox .icon input{
	padding-left: 50px;
}
input[type=checkbox].new, input[type=radio].new{display:none;}
input[type=checkbox].new + label, input[type=radio].new + label{
	cursor: pointer;
	user-select: none;
	position: relative;
	padding-left: 30px;
	display:block;
}
input[type="checkbox"].new + label::before, input[type="checkbox"] + label::after,
input[type="radio"].new + label::before{
	content: '';
	position: absolute;
	top: 0;
	left:0;
	display: block;
	width: 20px;
	height: 20px;
}
input[type="checkbox"].new + label::before, input[type="radio"].new + label::before{
	border:1px solid #212529;
	border-radius: 2px;
	display: block;
}
input[type="radio"].new + label::before{
	border-radius: 50%;
}
input[type="checkbox"].new + label:hover::before, input[type="radio"].new + label:hover::before{
	border:1px solid var(--font-accent);
}
input[type="checkbox"].new:checked + label::before, input[type="radio"].new:checked + label::before{
	background-color: var(--font-accent);
	border:1px solid var(--font-accent);
}
input[type="checkbox"].new:checked + label::after{
	mask-image: url('../svg/check.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: #fff;
	mask-size: 14px;
}
.toggle-eye {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 17px;
	right: 15px;
	cursor: pointer;
	background-color: #56565491;
	mask-size: contain;
}
.toggle-eye.opened{
	mask-image: url('../svg/eye-open.svg');
}
.toggle-eye.closed{
	mask-image: url('../svg/eye-close.svg');
}
.formbox .error-input{
	border: 1px solid #da2361 !important;
}
.formbox .error-message{
	position: absolute;
	right: 0;
	top: -8px;
	color: #da2361;
	font-weight: bold;
	border: 1px solid #da2361;
	padding: 5px 10px;
	background: #fde9f0;
	border-radius: 20px;
	height: 35px;
}
@media (max-width: 768px) {
	.empty{
		padding: 0 20px;
	}
	.formbox{
		padding: 20px;
		gap: 20px;
	}
	.formbox .double {
		flex-direction: column;
		gap: 20px;
	}
}
/****************************/
.request{
	background-color: #fff;
	border-radius: 8px;
	border: 1px solid #F2F2F2;
	padding:30px;
	margin-bottom: 30px;
	box-shadow: 0px 2px 8px 0px #E8E8E8CC;
}
.request h3 {
	font-weight: 500;
	font-size: 20px;
}
.request > form > div{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	text-align: left;
	color: var(--font-secondary);
	margin: 40px 0;
}
.request > form > div span{
	color: var(--font-accent);
}
.request > form > div > div{
	font-size: 18px;
	flex: 40%;
}
.request :is(input, textarea){
	background-color: #F3F3F5;
	border: 1px solid #2C3E501C;
	border-radius: 4px;
	outline: none;
	padding: 9px 12px;
	width: 100%;
	margin-top:10px;
	height: 36px;
	font-size: 18px;
}
.request :is(input, textarea)::placeholder {
  color: #949494;
}
.request textarea{
	height: 108px;
	min-height: 108px;
	max-height: 324px;
	resize: vertical;
}
@media (max-width: 768px) {
	.request > form > div{
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(5, 1fr);
		grid-row-gap: 20px;
	}
}
/****************************/
.infos{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 30px;
}
.infos h3{
	font-weight: 700;
	font-size: 20px;
	margin: 0 0 25px 0;
}
.infos > div{
	background-color: #fff;
	border-radius: 8px;
	border: 1px solid #F2F2F2;
	padding:30px;
	text-align: left;
	box-shadow: 0px 2px 8px 0px #E8E8E8CC;
}
.infos .contact > div{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.infos .contact span{
	font-weight: 500;
}
.infos .contact p{
	margin: 0;
	color: var(--font-secondary);
}
.infos .contact .icon{
	display: flex;
	gap:10px;
}
.infos .contact .icon::before{
	content:'';
	width:24px;
	min-width:24px;
	max-width:24px;
	height: 24px;
	background-color: var(--font-accent);
	mask-size: contain;
	mask-repeat: no-repeat;
	display: block;
}
.infos .contact .icon.address::before{mask-image: url('../svg/map.svg');}
.infos .contact .icon.phone::before{mask-image: url('../svg/phone.svg');}
.infos .contact .icon.email::before{mask-image: url('../svg/mail.svg');}
.infos .contact .icon > div{
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.infos .timeline > div{
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.infos .timeline > div > div{
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--font-secondary);
}
@media (max-width: 768px) {
	.infos{
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
	}
	.infos .contact > div{
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
	}
}
/****************************/
.reviews{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 30px;
	grid-row-gap: 30px; 
}
.reviews > div{
	border-radius: 8px;
	box-shadow: 0px 2px 8px 0px #E8E8E8CC;
	background-color: #fff;
	padding: 80px 20px 30px 20px;
	text-align: left;
	position:relative;
}
.reviews > div:last-child:nth-child(odd) {
  grid-column: span 2;
}
.reviews > div::before{
	content:'';
	background-color: var(--font-accent);
	width: 40px;
	height: 40px;
	mask-image: url('../svg/quote.svg');
	display: block;
	position: absolute;
	top: 20px;
	left: 20px;
}
.reviews > div > div{
	font-weight: 500;
}
.reviews > div > div > span{
	display: block;
	font-weight: 400;
	color:var(--font-secondary);
}
@media (max-width: 768px) {
	.reviews{
		grid-template-columns: repeat(1, 1fr);
	}
	.reviews > div:last-child:nth-child(odd) {
	  grid-column: 1;
	}
}
/****************************/
.partners .pins{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	justify-content: center;
	flex-wrap: wrap;
}
.partners .pins > div{
	line-height: 30px;
	border-radius: 8px;
	box-shadow: 0px 2px 8px 0px #E8E8E8CC;
	background-color: #fff;
	padding: 10px 20px;
	user-select: none;
	font-weight: 500;
	font-size: 18px;
	white-space: nowrap;
}
@media (max-width: 768px) {
	.partners .pins{
		flex-direction: column;
	}
	.partners .pins > div{
		white-space: break-spaces;
	}
}
/***********Icon*************/
section.why .icon::before{
	content:'';
	background-color: var(--icon-color);
	width: 54px;
	height: 54px;
	mask-repeat: no-repeat;
	mask-size: contain;
}
.icon.speed::before{mask-image: url('../svg/speed.svg');}
.icon.medal::before{mask-image: url('../svg/medal.svg');}
.icon.settings::before{mask-image: url('../svg/settings.svg');}
.icon.eco::before{mask-image: url('../svg/eco.svg');}
.icon.box::before{mask-image: url('../svg/box.svg');}
.icon.service::before{mask-image: url('../svg/service.svg');}
.icon.payment::before{mask-image: url('../svg/payment.svg');}
.icon.printer::before{mask-image: url('../svg/printer.svg');}
.icon.lines::before{mask-image: url('../svg/lines.svg');}
.icon.energy::before{mask-image: url('../svg/energy.svg');}
.icon.safety::before{mask-image: url('../svg/safety.svg');}
.icon.mobile::before{mask-image: url('../svg/mobile.svg');}
.icon.solar-panel::before{mask-image: url('../svg/solar-panel.svg');}
.icon.med::before{mask-image: url('../svg/med.svg');}
.icon.pos::before{mask-image: url('../svg/pos.svg');}
.icon.cashier::before{mask-image: url('../svg/cashier.svg');}
.icon.truck::before{mask-image: url('../svg/truck.svg');}
.icon.receipt::before{mask-image: url('../svg/receipt.svg');}
.icon.check-one::before{mask-image: url('../svg/check-one.svg');}
.icon.cloud-security::before{mask-image: url('../svg/cloud-security.svg');}
.icon.hammer::before{mask-image: url('../svg/hammer.svg');}
.icon.savings::before{mask-image: url('../svg/savings.svg');}
.icon.user-heart::before{mask-image: url('../svg/user-heart.svg');}
.icon.transparency::before{mask-image: url('../svg/transparency.svg');}
.icon.vote::before{mask-image: url('../svg/vote.svg');}
.icon.remote::before{mask-image: url('../svg/remote.svg');}
.icon.chip::before{mask-image: url('../svg/chip.svg');}
.icon.e-commerce::before{mask-image: url('../svg/e-commerce.svg');}
.icon.inventory::before{mask-image: url('../svg/inventory.svg');}
.icon.offline::before{mask-image: url('../svg/offline.svg');}
.icon.pay-pos::before{mask-image: url('../svg/pay-pos.svg');}
.icon.reverse-operation::before{mask-image: url('../svg/reverse-operation.svg');}
.icon.scale::before{mask-image: url('../svg/scale.svg');}
.icon.support::before{mask-image: url('../svg/support.svg');}
.icon.auto-mode::before{mask-image: url('../svg/auto-mode.svg');}
.icon.category-light::before{mask-image: url('../svg/category-light.svg');}
.icon.team::before{mask-image: url('../svg/team.svg');}
.icon.shop::before{mask-image: url('../svg/shop.svg');}
.icon.food::before{mask-image: url('../svg/food.svg');}

section.why .title, section.how .title{
	font-size:18px;
	font-weight:500;
}
section.why .description, section.how .description{
	color: var(--font-secondary);
}
/***************Accordeon*****************/
.accordeon {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.accordeon > div .title{
	cursor:pointer;
	user-select:none;
	padding: 25px 60px 25px 20px;
	color: var(--font-color);
	text-align: left;
	font-weight: 500;
	font-size: 18px;
	position: relative;
}
.accordeon > div .title:after{
	content: '';
	display: block;
	width: 24px;
	height: 12px;
	mask-image: url('../svg/arrow.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 16px;
	position: absolute;
	top: 30px;
	right: 24px;
	transition: all 0.3s linear;
}
.accordeon > div.closed .title:after{
	transform: rotate(180deg);
	background-color: var(--font-color);
}
.accordeon > div.opened .title:after{
	transform: rotate(360deg);
	background-color: var(--font-light);
}
.accordeon > div .content{
	padding: 0 70px 20px 20px;
	color: var(--font-color);
	text-align: left;
	font-size: 18px;
}
.accordeon > div{
	transition: 0.2s linear all;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0px 2px 8px 0px #E8E8E8CC;
}
.accordeon > div.opened{
	background-color: var(--background-secondary);
}
.accordeon > div.opened .title, .accordeon > div.opened .content{
	color: #fff;
}
.accordeon > div.closed .content{
	display: none;
}
/*------------Offer------------*/
section.offer.default picture{
	display: none;
}
section.offer.default{
	position: relative;
	width: 100%;
	background-color: var(--background-accent);
	padding: 75px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
section.offer.default > div.box > span{
	display: block;
	text-align: center;
	color: var(--font-secondary);
}
section.offer.default > div.box > p{
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	text-align: center;
	color: var(--font-secondary);
}
section.offer.default > div.box > p > span{
	color: var(--font-accent);
}
section.offer.default > div.box{
	background-color: #fff;
	border-radius: 8px;
	width: 780px;
	max-width: 100%;
	padding: 145px 180px 40px;
	z-index:99;
	position: relative;
}
section.offer.default > div.box::before{
	width:77px;
	height:86px;
	position: absolute;
	content:'';
	display:block;
	mask-image: url('../svg/gift.svg');
	background: var(--font-accent);
	mask-size: contain;
	mask-repeat: no-repeat;
	left:50%;
	top: 60px;
	transform: translateX(-50%);
}
@media (max-width: 768px) {
	section.offer.default {
		padding: 75px 20px;
	}
	section.offer.default > div.box{
		padding: 146px 20px 40px;
	}
}
/*------------Offer2------------*/
section.offer.imager picture{
  position: absolute;
  left: 0;
  width: 100%;
}
section.offer.imager{
	position: relative;
	width: 100%;
	padding: 125px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
section.offer.imager h3{
	font-size: 24px;
}
section.offer.imager > div.box > span{
	display: block;
	text-align: center;
	color: #FFF;
	margin-top: 15px;
}
section.offer.imager > div.box > p{
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	text-align: center;
	color: #fff;
}
section.offer.imager > div.box{
	width: 500px;
	max-width: 100%;
	z-index: 99;
	position: relative;
	color: #FFF;
}
@media (max-width: 768px) {
	section.offer.imager {
		padding: 65px 20px;
	}
	section.offer.imager > div.box{
		padding: 0px 20px 220px;
	}
}
/*------------Footer------------*/
footer {
	padding: 10px 0;
	color: var(--font-light);
	background-color: var(--background-secondary);
}
footer h1{
	font-weight: 700;
	font-size: 34px;
	display: inline-block;
	text-decoration: underline var(--font-accent) 4px;
	text-underline-offset: 15px;
	user-select: none;
}
footer p{
	user-select: none;
	margin: 0;
	width: 40%;
}
footer a{
	color: var(--font-light);
	text-decoration: none;
}
footer a:hover{
	text-decoration: underline;
}
footer .container{
	width: 1200px;
	max-width: 100%;
	margin:0 auto;
}
footer .copyright{
	text-align: center;
	padding:30px 0;
	border-top: 1px solid var(--font-light);
	margin-top:90px;
}
footer .fgroup{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 70px;
	padding: 20px 0;
}
footer .links {
	display: flex;
	gap: 5px;
	flex-direction: column;
	flex: 1;
}
footer .rounds{
	align-self: center;
	display: flex;
	gap: 20px;
}
@media (max-width: 768px) {
	footer {
		padding: 10px 20px;
	}
	footer p{
		width: 100%;
	}
	footer .fgroup{
		flex-direction: column;
		align-items: flex-start;
		gap:20px;
	}
	footer .copyright{
		margin-top: 40px;
	}
}
/***********Social*************/
a.social{
	width: 50px;
	height:50px;
	display:block;
	mask-size:contain;
	mask-repeat: no-repeat;
	background-color: var(--font-light);
}
a.social:hover{
	opacity: 0.8;
}
a.social.facebook{
	mask-image: url('../svg/facebook.svg');
}
a.social.instagram{
	mask-image: url('../svg/instagram.svg');
}
a.social.youtube{
	mask-image: url('../svg/youtube.svg');
}
/***********survey*************/
.survey-modal {
	position:fixed; 
	left:0; 
	top:0; 
	right:0; 
	bottom:0;
	background:rgba(0,0,0,0.5);
	display:flex; align-items:center; justify-content:center;
	z-index:9999;
}
.survey-title {
	font-weight: 700;
	font-size: 18px;
	margin-bottom:10px;
}
.survey-description {
	color: var(--font-secondary);
}
.survey-dialog {
	background:#fff; 
	border-radius:10px; 
	width:800px; 
	max-width:95%;
	padding:20px 30px; 
	position:relative; 
	box-shadow:0 5px 15px rgba(0,0,0,.3);
}
.survey-close {
	width: 17px;
	height: 17px;
	mask-image: url('../svg/times.svg');
	mask-size: contain;
	background-color: #000;
	cursor:pointer; 
	transition: all 0.4s ease-in-out;
}
.survey-close:hover{
	transform: rotate(180deg);
}
.survey-header, .survey-status {
	display:flex; 
	justify-content:space-between; 
	align-items:center; 
	margin-bottom:15px; 
}
.survey-progress .dot {
	height:12px; 
	width:12px; 
	margin:0 3px;
	display:inline-block; 
	border-radius:50%; 
	background: #ECECEC;
}
.survey-progress .dot.active { 
	background: var(--font-accent); 
}
.survey-body {
	max-height: 60vh;
	overflow-y: scroll;
}
.survey-body h3 {
	font-weight: 400;	
	margin:0 0 10px; 
	font-size:18px;
	color: var(--font-secondary);
}
.survey-body p { 
	margin:0 0 15px; 
	font-weight: 500;
	font-size:18px;
	color:#212529;
}
.survey-answers label { 
	background-color: #5C656C0D;
	color: #212529;
	display:block; 
	padding: 14px; 
	border: 1px solid #E8E8E8CC;
	border-radius:8px; 
	margin:20px 0;
	cursor:pointer; 
	user-select: none;
	position: relative;
}
.survey-answers input[type=checkbox].new + label, .survey-answers input[type=radio].new + label{
	padding-left: 50px;
}
.survey-answers input[type=checkbox].new + label::before, .survey-answers input[type=checkbox].new + label::after,
.survey-answers input[type=radio].new + label::before{
	top: 15px;
	left: 15px;
}
.survey-answers input {
	margin-right:8px;
}
.survey-footer {
	text-align:right; 
	margin-top:15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.survey-error{
	color: #f00;
}
.survey-footer button {
	background: var(--font-accent);  
	color:#fff; 
	border: 1px solid var(--font-accent); 
	padding:13px 26px; 
	border-radius:3px;
	cursor:pointer; 
	font-size:18px;
	font-weight:700;
	transition: all linear 0.2s;
}
.survey-footer button:hover{
	background-color: #fff;
	color: var(--font-accent);
}
.survey-footer .survey-prev {
	border: 1px solid #2C3E501C; 
	background: #F3F3F5;
	color: #a8a8a8;
	margin-right:10px;
}
/*-------------------------------------*/
.rules section{
	margin: 60px auto;
}
.rules a.return{
	display: block;
	text-align: left;
	font-weight: 500;
}
.rules a.return::before{
	content:'';
	width:12px;
	min-width:24px;
	max-width:24px;
	height: 24px;
	background-color: #F7941D;
	mask-size: contain;
	mask-repeat: no-repeat;
	display: inline-block;
	mask-image: url('../svg/arrow-left.svg');
	position: relative;
	top: 6px;
}
.rules img{
	display: block;
	margin: 0 auto;
	user-select:none;
	max-width: 100%;
}
.rules p{
	text-align: justify;
	color: #5C656C;
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 18px;
}
.rules h2{
	text-decoration: underline #F7941D 4px;
	text-underline-offset: 20px;
	margin: 20px 0 60px 0;
	user-select: none;
	line-height: 240%;
}
.rules a{
	color: #F7941D;
	text-decoration: none;
	white-space: nowrap;
}
.rules a:hover{
	text-decoration: underline;
}
.rules .card{
	border-radius: 8px;
	border: 1px solid #F2F2F2;
	box-shadow: 0px 2px 8px 0px #E8E8E8CC;
	display:flex;
	padding: 60px 50px;
	gap: 40px;
	justify-content: space-between;
}
.rules .card p{
	text-align: left; 
	font-size: 16px;
	margin:0;
}
.rules .card .group{
	display: flex;
	gap: 30px;
	align-items: center;
}
.rules .card .icon::before{
	content:'';
	width:24px;
	min-width:24px;
	max-width:24px;
	height: 24px;
	background-color: #F7941D;
	mask-size: contain;
	mask-repeat: no-repeat;
	display: inline-block;
	position: relative;
	top: 7px;
	left: -5px;
}
.rules .card .icon{user-select: none;}
.rules .card .icon.fax::before{mask-image: url('../svg/fax.svg');}
.rules .card .icon.phone::before{mask-image: url('../svg/phone.svg');}
.rules .card .icon.email::before{mask-image: url('../svg/mail.svg');}
.rules .card .icon > div{
	display: flex;
	flex-direction: column;
	gap: 6px;
}
@media (max-width: 768px) {
	.rules a{
		white-space: wrap;
	}
}
/*-----------------------------*/
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
}
.modal-box p{
	user-select: none;
	font-size:20px;
}
.modal-box h1{
	user-select: none;
	font-weight: 500;
	margin-top: 60px;
}
.modal-box {
    width: 800px;
    background: #0b72b5;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    color: white;
    box-shadow: 0px 1px 15.4px 0px #00000024;
	position: relative;
}
.modal-box .modal-gift {
	height: 258px;
	width: 258px;
	background-color: #ffffff;
	border-radius: 50%;
	margin: 40px auto;
	position: relative;
}
.modal-box .modal-gift::before {
  width: 130px;
  height: 146px;
  position: absolute;
  content: '';
  display: block;
  mask-image: url('../svg/gift.svg');
  background: var(--font-accent);
  mask-size: contain;
  mask-repeat: no-repeat;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.modal-box .close {
	position: absolute;
    top: 15px;
    right: 15px;
	width: 17px;
	height: 17px;
	mask-image: url('../svg/times.svg');
	mask-size: contain;
	background-color: #fff;
	cursor:pointer; 
	transition: all 0.4s ease-in-out;
}
.modal-box .close:hover{
	transform: rotate(180deg);
}
.modal-box .button {
	height:50px;
	width:50%;
    margin: 50px auto 0 auto;
}
/*-------------------------*/
.profile {
	background-color: #f1f1f1;
}
.profile > div.limiter{
	display: flex;
	width: 100%;
	max-width: 1180px !important;
	margin: 0 auto;
	background-color: #f1f1f1;
	padding:0 30px;
}
.profile .left_bar {
	width: 420px;
	display: flex;
	flex-direction: column;
	gap:20px;
}
.profile .left_bar > div{
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 4px 8px 24px 0px #F0F0F026;
	padding: 20px 30px;
}
.profile .left_bar .info{
	display: flex;
	justify-content: space-between;
	color: var(--font-accent);
}
.profile .left_bar .help {
  width: 20px;
  height: 20px;
  content: '';
  mask-image: url('../svg/help.svg');
  background-color: var(--font-accent);
  display: block;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.profile .left_bar ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.profile .left_bar li {
  color: #8D8D8D;
  font-size: 18px;
  text-decoration: none;
  user-select: none;
  display: flex;
  gap: 20px;
  align-items: center;
}
.profile .left_bar li a{
	color: #8D8D8D;
	text-decoration: none;
	line-height: 30px;
}
.profile .left_bar li a:hover{
	color: #303030;
}
.profile .left_bar ul ul {
  padding-left: 35px;
  border-left: 1px solid var(--font-accent);
  margin: 0 0 10px 15px;
}
.profile .tabs > input[type="radio"] {
  display: none !important;
}
.profile .tabs > input[type="radio"] + label {
	display: inline-block;
	border-bottom: 1px solid var(--font-accent);
	padding: 9px 20px;
	text-align: center;
	cursor: pointer;
	user-select: none;
	opacity: 0.3;
	margin-right: 20px;
}
.profile .tabs > input[type="radio"]:checked + label {
	border-bottom: 2px solid var(--font-accent);
	opacity:1;
}
.profile .tabs > label:before, .tabs > label:after{
	display:none;
}
.profile .tabcontent > div{
	display: none;
}
.profile .tabs > #tab1:checked ~ .tabcontent > div:nth-child(1),
.profile .tabs > #tab2:checked ~ .tabcontent > div:nth-child(2),
.profile .tabs > #tab3:checked ~ .tabcontent > div:nth-child(3),
.profile .tabs > #tab4:checked ~ .tabcontent > div:nth-child(4){
	display: block;
}
.profile .left_bar .button{
	height: 48px;
	border-radius: 30px;
	width: 100%;
}
.profile .main_bar {
	text-align: left;
	padding-left: 30px;
}
.profile .main_bar .button{
	height: 52px;
	border-radius: 30px;
	padding: 0 60px;
}
.profile .main_bar table{
	text-align: center;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 4px 8px 24px 0px #F0F0F026;
	width: 100%;
	color: #333;
}
.profile .main_bar table tr{
	height: 50px;
}
.profile .fields .grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}
.profile .fields .grid > div, .profile .fields .inrow > div{
	position: relative;
}
.profile .fields input[type=text], .profile .fields input[type=password]{
	height: 60px;
	border-radius: 9px;
	font-size: 18px;
	color: #303030;
	background-color: #fff;
	border: none;
	padding: 0 30px;
	width: 100%;
}
.profile .fields input[type=text]:focus, .profile .fields input[type=password]:focus{
	outline: 2px solid #8D8D8D;
}
.profile .fields input[type=text]::placeholder {
	color: #8D8D8D;
}
.profile .fields input[type=text]:disabled {
	color: #8D8D8D;
	user-select: none;
	pointer-events: none;
}
.profile .fields select {
	height: 60px;
	border-radius: 9px;
	background-color: #fff;
	border: none;
	width: 100%;
	padding: 0 30px;
	cursor: pointer;
	font-size: 18px;
	color: #303030;
}
.profile .fields label {
	color: #303030;
}
.profile .fields .span{
	grid-column: span 2;
	text-align: left;
	margin-bottom: 15px;
}
.profile .fields .inrow{
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.profile .cards{
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-top: 30px;
}
.profile .cards > a{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	background-color: #DEDEDE;
	border-radius: 20px;
	padding: 20px;
	height: 330px;
	text-decoration: none;
	overflow:hidden;
	gap:10px;
}
.profile .cards > a:hover{
	outline: 2px solid var(--font-accent);
}
.profile .cards picture{
	position: absolute;
	z-index:1;
	left:0;
	top:0;
	width: 100%;
}
.profile .cards picture > img{width: 100%;}
.profile .cards h2{font-size: 22px;}
.profile .cards p{font-size: 14px;}
.profile .cards span{height: 48px !important;}
.profile .cards > a > img{
	max-width:200px;
	max-height: 40px;
}
.profile .cards > a > :is(h2,p,span,img){
	z-index:99;
	position: relative;
	margin:0;
}
.profile .cards > a > :is(h2,p){
	color: #fff;
	width: 55%;
}
.profile .cards > a.dark > :is(h2,p){
	color: #333;
}