* {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

:root {
	--orange: #EF7D26;
	--30-orange: #EF7D2630;
	--green: #8BC832;
	--half-green: rgba(139, 200, 50, 0.5);
	--10-green: rgba(139, 200, 50, 0.1);
	--20-green: rgba(139, 200, 50, 0.2);
	--30-green: rgba(139, 200, 50, 0.3);
	--bg-color: white;
	--font-color: black;
	--light: #EDEDED;
	--dark: #1D1D1B;

	--bg-light: #f5f5f5;

	--error-bg: #ff000030;
}

button, input, optgroup, option, select, textarea {font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;}
body {font-family: var(--font-nunito);}

table {border-collapse: collapse; border-spacing: 0;}
table {width: 100%; border-collapse:collapse; border-spacing:0;}
caption, th {text-align:left;}
ul {list-style: none; padding-left: 0;}

.TextRight {text-align: right;}
.TextCenter {text-align: center;}

.Image {overflow: hidden;}
.Image img {object-position: center; object-fit: cover; width: 100%; height: 100%;}

body {margin: 0;}

.Button {display: inline-grid; align-items: center; justify-content: center; padding: 0 28px; background: var(--green); color: white; font-size: 113%; font-weight: bold; text-transform: uppercase; height: 40px; border-radius: 10px; text-decoration: none; cursor: pointer;}
.SmallerButton {font-size: 100%; padding: 0 15px; height: 30px;}
.SmallButton {font-size: 80%; padding: 0 10px; height: 20px;}
.Button.Invert {background-color: transparent; color: var(--green); border: 1px solid var(--green);}
.Button.Invert.Active, .Button.Invert:hover {background-color: var(--green); color: white;}
.Button.WhiteButton {border: 1px solid var(--green); background: white; color: var(--green);}
.Button.WhiteButton.Active {background-color: var(--green); color: white;}
.DialogModal {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; background: rgba(0,0,0,0.2);}
.DialogBox {padding: 50px; margin: auto; text-align: center;}
.DialogHead {width: 100%; color: white;}
.DialogContent {margin: auto; padding: 20px; background: white; overflow: auto; text-align: left;}
.DialogBox .CloseCross {position: absolute; right: 0; top: 0; width: 30px; height: 30px; background: black; cursor: pointer;}
.DialogBox .CloseCross svg {width: 26px; height: 26px; margin-top: 2px;}
.DialogBox .CloseCross rect {fill: white;}

@media (max-width: 800px) {
	.DialogBox {padding: 20px;}
}

@media (max-width: 460px) {
	.DialogBox {padding: 5px;}
}

.DialogModal {display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(6px); overflow: auto; background: rgba(0,0,0,0.5);}
.DialogBox {padding: 0; margin: auto !important; max-height: 90%;}

.DialogHead {display: flex; background: var(--green); align-items: center; padding: 0 23px 0 86px; min-height: 82px; border-radius: 20px 20px 0 0;}
.DialogHead .Icon {margin-right: 17px;}
.DialogHeadText {flex: 1; font-size: 135%; font-weight: bold; text-align: left; text-transform: uppercase;}
.DialogContent {padding: 43px 86px; border-radius: 0 0 20px 20px; font-size: 120%; background: var(--light);}
.DialogModal .CloseCross {display: none;}
.DialogContent, .DialogHead {width: 925px; margin: auto;}
.DialogHead.DialogForDeletion {background: var(--orange);}

.DialogContent ul, .DialogContent ol {margin: 18px;}
.DialogContent ul {list-style: disc;}
.DialogContent li {padding-left: 10px;}@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 100 900;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-VariableFont_wght.ttf) format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'Nunito';
	font-style: italic;
	font-weight: 100 900;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-Italic-VariableFont_wght.ttf) format('truetype');
	font-display: swap;
}

:root {
	--font-nunito: 'Nunito', sans-serif;
}.LargerLoading {position: fixed; top: calc(50% - 100px); left: 100px; width: calc(100% - 200px); z-index: 999; border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.5); background: rgba(0,0,0,0.5); }
.LargerLoading p {text-align: center; padding: 30px; max-width: 800px; font-size: 20px; color: white; margin-left: auto; margin-right: auto; text-shadow: 1px 1px 1px black;}

.LargerLoading .DatabaseLoadingElement {position: static; margin-left: auto; margin-right: auto; background: none; box-shadow: none;}

.DatabaseLoadingElement {position: fixed; top: calc(50% - 50px); left: calc(50% - 50px); width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; background: black; border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.5); background: rgba(0,0,0,0.5); z-index: 999;}
.DatabaseLoadingElement svg {width: 45px; height: auto;}
.DatabaseLoadingElement path, .DatabaseLoadingElement line {stroke: white;}

.AresLoading:not(.Hidden) svg, .DatabaseLoadingElement:not(.Hidden) svg {animation: Rotate; animation-iteration-count: infinite; animation-duration: 500ms; animation-timing-function: linear;}
.DatabaseLoadingElement:not(.Hidden) svg {animation-duration: 1s;}
@keyframes Rotate {
	0% {transform: rotate(0);}
	100% {transform: rotate(360deg);}
}
@media (max-width: 800px) {
	.DialogBox {padding: 20px;}
}

@media (max-width: 460px) {
	.DialogBox {padding: 5px;}
}

.GalleryDialog {backdrop-filter: blur(10px); background-color: rgba(0,0,0,0.5);}
.GalleryDialog .DialogBox {padding: 5px;}
.GalleryDialog .DialogBox, .GalleryDialog .DialogContent {height: 100%;}
.GalleryDialog .DialogContent {position: relative; background: none; overflow: hidden;}
.GalleryDialog .GalleryImages {position: absolute; top: 0; right: 0; width: 100px; height: 100%; overflow: auto;}
.GalleryDialog .MainImage, .GalleryDialog .SideImage {background: black no-repeat center center; background-size: contain; border: 2px solid black;}
.GalleryDialog .MainImage {position: absolute; left: 0; top: 0; width: calc(100% - 110px); height: 100%;}
.GalleryDialog .MainImage video {max-width: 100%;}
.GalleryDialog .SideImage {height: 100px; margin-bottom: 10px; cursor: pointer; opacity: 0.5;}
.GalleryDialog .SideImage.Active, .GalleryDialog .SideImage:hover {opacity: 1;}
.GalleryDialog .Arrow {position: absolute; top: 0; height: 100%; width: 100px; background: no-repeat; cursor: pointer; opacity: 0.3;}
.GalleryDialog .Arrow.Previous {left: 0;/* background-image: url(%core-pathi%GalleryArrowPrevious.png); background-position: left center;*/}
.GalleryDialog .Arrow.Next {right: 0;/* background-image: url(%core-pathi%GalleryArrowNext.png); background-position: right center;*/}
.GalleryDialog .MainImage:hover .Arrow {opacity: 1;}
.GalleryDialog [data-type="first"] .Arrow.Previous {display: none;}
.GalleryDialog [data-type="last"] .Arrow.Next {display: none;}

.GalleryDialog[data-view="portrait"] .GalleryImages {right: auto; left: 0; top: auto; bottom: 0; width: 100%; height: 100px; white-space: nowrap; overflow-y: hidden;}
.GalleryDialog[data-view="portrait"] .SideImage {display: inline-block; white-space: nowrap; width: 100px; height: 100%; margin-bottom: 0; margin-right: 10px;}
.GalleryDialog[data-view="portrait"] .MainImage {width: 100%; height: calc(100% - 110px);}

.GalleryDialog .CloseCross {right: 121px; top: 10px; background-color: white;}
.GalleryDialog .CloseCross rect {fill: black;}
.GalleryDialog[data-view="portrait"] .CloseCross {right: 10px;}:root {
	--orange: #EF7D26;
	--30-orange: #EF7D2630;
	--green: #8BC832;
	--half-green: rgba(139, 200, 50, 0.5);
	--10-green: rgba(139, 200, 50, 0.1);
	--20-green: rgba(139, 200, 50, 0.2);
	--30-green: rgba(139, 200, 50, 0.3);
	--bg-color: white;
	--font-color: black;
	--light: #EDEDED;
	--dark: #1D1D1B;

	--bg-light: #f5f5f5;

	--error-bg: #ff000030;
}

body {font-family: var(--font-nunito);}@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 100;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-ExtraLight.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: italic;
	font-weight: 100;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-ExtraLightItalic.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 200;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-Light.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: italic;
	font-weight: 200;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-LightItalic.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: normal;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-Regular.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: italic;
	font-weight: normal;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-Italic.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 500;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-SemiBold.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: italic;
	font-weight: 500;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-SemiBoldItalic.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: bold;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-Bold.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: italic;
	font-weight: bold;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-BoldItalic.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 800;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-ExtraBold.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: italic;
	font-weight: 800;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-ExtraBoldItalic.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 900;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-Black.ttf) format('truetype');
	font-display: fallback;
}
@font-face {
	font-family: 'Nunito';
	font-style: italic;
	font-weight: 900;
	src: url(/Preview/Projects/EPL/Design/Fonts/Nunito-BlackItalic.ttf) format('truetype');
	font-display: fallback;
}

:root {
	--font-nunito: 'Nunito', sans-serif;
}
.FormItem {display: flex; margin-bottom: 10px; align-items: center; padding-right: 80px;}
.ButtonItem {margin-top: 20px;}
.FormLabel {flex: 0 0 130px; font-weight: bold; padding-right: 15px;}
.FormInput {flex: 1; min-height: 50px; border-radius: 10px; display: flex;}
.FormInput:not(.CustomInput) {background: white; width: 100%; align-items: center;}
.FormInput .Icon {flex: 0 0 78px; display: grid; justify-content: center; align-items: center;}
.FormInput:not(.CustomInput) input, .FormInput:not(.CustomInput) select, .FormInput:not(.CustomInput) textarea {flex: 1; width: 100%; height: 100%; padding-left: 19px; padding-right: 19px;}
.FormInput:not(.CustomInput) textarea {height: 80px; padding-top: 8px; padding-bottom: 8px;}
.FormInput input.DigitsShortInput {flex: 0 0 120px;}
.FormInput + .FormInput {margin-left: 10px;}

.FormItem.Invalid {color: red;}
.FormItem.Invalid input, .FormItem.Invalid select {box-shadow: 0 0 10px red;}

.FormItem td.NoPadding {padding: 0;}
.FormItem td input[type="text"], .FormItem td input[type="number"] {width: calc(100% - 6px); height: 38px; margin: 1px 3px; background: white; padding: 0 19px;}

.FormItem .TimeInput {max-width: 300px;}
.FormItem .TimeInput input {background: white; width: 100px; height: 100%; border-radius: 10px; padding: 0 19px;}

.FormItem .PriceInput input {max-width: 100px;}

.FormItemFullWidth {padding-right: 0;}
.FormItemFullWidth table {flex: 0 0 100%;}.Web .ReferencesHeading {margin-bottom: 52px; padding-top: 92px;}
.ReferencesHeading::after {display: block; margin-left: auto; margin-right: auto; max-width: 240px; height: 3px; background: #8BC832; content: ''; margin-top: 20px;}
.UnderReferencesLine {height: 1px; background: black; margin-top: 52px; margin-bottom: 122px;}

.ReferencesList {
	--cols: 3;
	--gap: 50px;
}

.ReferencesList {display: flex; gap: var(--gap); min-width: min(100%, 450px); max-width: 460px; align-items: start; justify-content: center; flex-wrap: wrap;}

.ReferencesItem {background: white; border-radius: 20px; border: 3px solid var(--green); padding: 29px 42px 26px 42px; flex: 0 1 400px;}
.ReferenceName {font-size: 24px; font-weight: bold;}
.ReferenceJob {margin-bottom: 9px; font-size: 16px; opacity: 0.8;}
.ReferenceText {font-size: 15px;}
.ReferenceText p {margin-top: 10px;}
.ReferenceLink:not(:empty) {margin-top: 18px; color: #bbc832; font-weight: 800; display: inline-block; font-size: 16px; text-decoration: none;}
.ReferenceLink:hover {text-decoration: underline;}

@media (max-width: 1100px) {
	.ReferencesList {
		--gap: 20px;
	}

	.ReferencesItem {padding: 15px 21px 15px 21px;}
}body:has(.Web), html:has(.Web), .Web {scroll-behavior: smooth;}

.Hidden {display: none;}
button, input, optgroup, option, select, textarea {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	border: 0;
}
.TextCenter {text-align: center;}
p, h1, h2, h3, h4, h5, h6 {margin-top: 0;}

.Web {font-size: 18px; background: var(--bg-light);}

.Web .Button {border-radius: 99px; font-weight: 900; transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.Web .Button:hover {background: #6cae1f; color: white; box-shadow: 0 8px 24px rgba(139,200,50,0.35); transform: translateY(-2px);}
.Web .Button.WhiteButton:hover {background: var(--orange); color: white; border-color: var(--orange); box-shadow: 0 8px 24px rgba(239,125,38,0.35);}
.Web .Button .ButtonArrow {transition: transform .25s ease;}
.Web .Button:hover .ButtonArrow {transform: translateX(4px);}

.Web .BackgroundLogo {position: fixed;}

.Web h1 {font-weight: 900;}
.Web h2 {font-size: 30px; font-weight: 800; text-align: center; margin-bottom: 20px;}

.Web .Container {max-width: 1500px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}
.Web .LittleContainer {max-width: 740px;}
.Web .SmallContainer {max-width: 911px;}

.Web {padding-top: 80px;}
.Web .Head {position: fixed; left: 0; top: 0; right: 0; border-bottom: 3px solid var(--green); z-index: 2; background-color: white;}
.Web .Head .Container {display: flex; align-items: center; padding-top: 12px; padding-bottom: 12px;}
.Web .Head a {text-decoration: none; color: var(--font-color);}
.Web .Head .Logo img {max-height: 52px;}
.Web .LogoBox {flex: 1;}

.Web .Head nav {text-align: center; flex: 1 1 30%;}
.Web .Head nav a {display: inline-block; text-transform: none; font-size: 16px; font-weight: bold; position: relative; padding: 0 25px;}
.Web .Head nav a::after {position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; content: '';}
.Web .Head nav a:hover::after {background-color: var(--orange);}

.Web .Foot {background: var(--green); color: white; padding: 35px 0 70px 0; height: auto;}
.Web .Foot a {color: white; text-decoration: none;}
.Web .Foot .Container {display: flex; align-items: center;}
.Web .Foot .Container > * {flex: 1;}
.Web .Foot path {fill: white;}

.Web .Intro {display: flex; position: relative; align-items: center;}
.Web .IntroImage {width: 40%; aspect-ratio: 100/94; background-size: contain; position: relative; margin-top: 70px;}
.Web .IntroImage img {width: 100%; height: auto; object-fit: contain;}
.Web .Intro h1 {position: relative; font-size: 40px; font-weight: 800; display: flex; align-items: center; margin-bottom: 30px; }
.Web .Intro h1 svg {margin-right: 20px; margin-left: -20%;}
.Web .IntroClaim {font-size: 34px; color: white; padding: 25px 40px; font-weight: 800; background: var(--green); border-radius: 0 40px 40px 0; width: 150%; margin-left: -50%; text-align: right;}

.Web .WarningBlock {display: flex; align-items: center; padding: 60px 0; font-size: 26px; font-weight: 500;}
.Web .WarningBlock .BiggerText {font-size: 35px; font-weight: 800;}
.Web .WarningBlock .Image {width: 50%; height: 30%; margin-left: 56px; margin-top: -20%;}

.Web .FAQ {padding: 40px 0 60px; background: white; position: relative;}
.Web .FAQHead {text-align: center; margin-bottom: 34px;}
.Web .FAQIcon {margin-bottom: 14px;}
.Web .FAQ h2 {margin-bottom: 12px; font-weight: 900;}
.Web .FAQIntro {font-size: 15px; margin: 0;}
.Web .FAQList {position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px;}
.Web .FAQItem {border: 2px solid var(--green); border-radius: 16px; background: white; overflow: hidden; transition: box-shadow .25s ease, border-color .25s ease;}
.Web .FAQItem:hover {box-shadow: 0 10px 30px rgba(29,29,27,0.08);}
.Web .FAQItem.Open:hover {border-color: #6cae1f;}
.Web .FAQQuestion {display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 18px 26px; background: none; cursor: pointer; text-align: left; transition: background-color .25s ease;}
.Web .FAQItem:hover .FAQQuestion {background: var(--10-green);}
.Web .FAQName {color: var(--green); font-weight: 900; font-size: 16px;}
.Web .FAQToggle {position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--green); transition: transform .25s ease, background-color .25s ease;}
.Web .FAQItem:hover .FAQToggle {background: #6cae1f;}
.Web .FAQToggle::before, .Web .FAQToggle::after {content: ''; position: absolute; left: 50%; top: 50%; background: white; border-radius: 2px; transform: translate(-50%, -50%);}
.Web .FAQToggle::before {width: 14px; height: 2px;}
.Web .FAQToggle::after {width: 2px; height: 14px;}
.Web .FAQItem.Open .FAQToggle {transform: rotate(135deg);}
.Web .FAQAnswer {max-height: 0; overflow: hidden; transition: max-height .3s ease;}
.Web .FAQAnswer .TextContent {padding: 0 26px 20px; font-size: 15px; color: var(--dark);}
.Web .FAQChart {position: absolute; right: 60px; bottom: 0; transform: translateY(50%); z-index: 0; pointer-events: none;}
.Web .FAQChart img {max-width: 216px; height: auto;}

.Web .AppApplication {background: var(--bg-light); padding: 50px 0; margin-bottom: 20px;}
.Web .AppApplication h2 {margin-bottom: 12px;}
.Web .AppApplication > .Container > .TextContent {margin-bottom: 35px;}
.Web .AppApplication form {max-width: 600px; margin-left: auto; margin-right: auto; padding: 34px 40px; border-radius: 24px; border: 3px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #a7dc5a, #6cae1f) border-box; box-shadow: 0 10px 30px rgba(29, 29, 27, 0.06); transition: box-shadow .25s ease;}
.Web .AppApplication form:focus-within {box-shadow: 0 14px 40px rgba(29,29,27,0.1);}
.Web .AppApplication .FormItem {display: block; padding-right: 0; margin-bottom: 20px; align-items: stretch; transition: color .2s ease;}
.Web .AppApplication .FormItem:focus-within .FormLabel {color: var(--green);}
.Web .AppApplication .FormLabel {flex: none; padding-right: 0; margin-bottom: 8px; font-weight: 800; color: var(--dark); font-size: 14px; transition: color .2s ease;}
.Web .AppApplication .FormLabel span {font-weight: normal; font-size: 90%;}
.Web .AppApplication input:not([type="checkbox"]) {width: 100%; background: white; border: 1px solid var(--green); border-radius: 10px; padding: 0 20px; color: var(--dark); min-height: 44px; font-size: 14px; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;}
.Web .AppApplication input:not([type="checkbox"])::placeholder {color: #b7b7b7;}
.Web .AppApplication input:not([type="checkbox"]):hover {border-color: #6cae1f; background: var(--10-green);}
.Web .AppApplication input:not([type="checkbox"]):focus {outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--20-green); background: white;}
.Web .AppApplication .PasswordField {position: relative; display: flex; align-items: center;}
.Web .AppApplication .PasswordField input {padding-right: 52px;}
.Web .AppApplication .PasswordToggle {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: 0; border-radius: 8px; cursor: pointer; color: #9a9a9a; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;}
.Web .AppApplication .PasswordToggle:hover {color: var(--green); background: var(--10-green);}
.Web .AppApplication .PasswordToggle:focus-visible {outline: none; color: var(--green); background: var(--10-green); box-shadow: 0 0 0 3px var(--20-green);}
.Web .AppApplication .PasswordToggle .EyeOpen {display: none;}
.Web .AppApplication .PasswordToggle .EyeClosed {display: flex;}
.Web .AppApplication .PasswordToggle.Visible .EyeOpen {display: flex; align-items: center;}
.Web .AppApplication .PasswordToggle.Visible .EyeClosed {display: none;}
.Web .AppApplication .CustomInput {display: flex; align-items: flex-start; margin-top: 4px;}
.Web .AppApplication .Button {display: flex; width: 100%; height: auto; margin-top: 12px; padding: 12px 16px; gap: 7px; font-size: 18px; font-weight: 800; text-transform: none; color: white; background: linear-gradient(135deg, #9bd645, var(--green)); transition: background .25s ease, box-shadow .25s ease, transform .25s ease;}
.Web .AppApplication .Button:hover, .Web .AppApplication .Button:focus-visible {outline: none; color: white; background: linear-gradient(135deg, var(--green), #6cae1f); box-shadow: 0 8px 24px rgba(139,200,50,0.35); transform: translateY(-2px);}
.Web .AppApplication .Button:focus-visible {box-shadow: 0 8px 24px rgba(139,200,50,0.35), 0 0 0 3px var(--30-green);}
.Web .AppApplication .Invalid {color: red;}
.Web .AppApplication .Invalid input {box-shadow: 0 0 10px red;}
.Web .AppApplication .Invalid input:hover, .Web .AppApplication .Invalid input:focus {border-color: red; background: #fff5f5; box-shadow: 0 0 0 3px rgba(255,0,0,0.15);}
.Web .AppApplication .ChkInput {margin-right: 12px; padding-top: 2px;}
.Web .AppApplication .ChkInput input {width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; transition: box-shadow .2s ease;}
.Web .AppApplication .ChkInput input:hover {box-shadow: 0 0 0 3px var(--20-green);}
.Web .AppApplication .ChkInput input:focus-visible {outline: none; box-shadow: 0 0 0 3px var(--30-green);}
.Web .AppApplication .ChkInput + div {padding-top: 0; font-size: 13px; line-height: 1.5; color: #8a8a8a;}
.Web .AppApplication .CustomInput a {color: var(--green); text-decoration: none; transition: color .2s ease, text-decoration-color .2s ease;}
.Web .AppApplication .CustomInput a:hover {text-decoration: underline;}
.Web .AppApplication .CustomInput a:focus-visible {outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px;}
.RegistrationProvider {font-size: 12px; margin-top: 25px; text-align: center; color: #8a8a8a;}

.Web .LicencesTables {margin-bottom: 50px;}
.Web .LicencesTables .TextContent {text-align: center;}
.Web .LicencesTables .Tables {display: flex; justify-content: space-between; margin-top: 50px; max-width: 1200px; margin-left: auto; margin-right: auto;}
.Web .LicenceTable {position: relative; border-radius: 19px; box-shadow: 0 0 30px rgba(29,29,27,0.1); flex: 0 0 28%; padding: 40px 0; background: rgba(255,255,255,0.3);}
.Web .LicenceTable .PriceSide {height: 65px; transform: rotate(-90deg); color: white; background: var(--green); transform-origin: bottom left; left: 0; bottom: 5%; position: absolute; width: 90%; display: grid; align-items: center; justify-content: center; border-radius: 22px 22px 0 0; font-size: 30px; font-weight: 500;}
.Web .LicenceTable:nth-of-type(2) .PriceSide {background-color: #F65966;}
.Web .LicenceTable:nth-of-type(3) .PriceSide {background-color: var(--orange);}
.Web .LicenceRow {padding: 10px 30px;}
.Web .LicenceRow svg {margin-right: 9px;}
.Web .LicenceHeading {font-size: 34px; font-weight: 500; color: var(--green); text-align: center;}
.Web .LicenceTable:nth-of-type(2) .LicenceHeading {color: #F65966;}
.Web .LicenceTable:nth-of-type(3) .LicenceHeading {color: var(--orange);}

.Web .BetweenTableLicence {font-size: 25px; padding: 40px; background: var(--green); color: var(--bg-light); font-weight: bold; margin-top: 30px;}
.Web .BetweenTableLicence .Container {max-width: 800px;}
.Web .LicencePricingTables {text-align: center; margin-top: 0; padding-top: 20px;}
.Web .LicencePricingTables .LicenceRow {padding-bottom: 0;}
.Web .LicencePricingTables .LicencePrice {font-size: 120%; border-bottom: 1px solid var(--20-green);}
.Web .LicencePricingTables .LicencePrice:last-of-type {border-bottom: none;}
.Web .LicencePricingTables .LicenceTopPrice {font-size: 150%; font-weight: bold;}
.Web .LicenceTable {border-left: 10px solid var(--green);}
.Web .LicenceTable:nth-of-type(2) {border-left-color: #F65966;}
.Web .LicenceTable:nth-of-type(3) {border-left-color: var(--orange);}

.Web .Advantages {margin-bottom: 50px; padding-bottom: 50px; border-bottom: 2px solid var(--dark);}
.Web .Advantages > .Container {max-width: 1100px;}
.Web .AdvantagesItem {display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.Web .AdvantagesItem + .AdvantagesItem {margin-top: 20px;}
.Web .AdvantagesItem .Video {width: 413px; height: 305px; border: 5px solid var(--green); border-radius: 40px; position: relative; background: no-repeat left center; background-size: cover; cursor: pointer;}
.Web .AdvantagesItem .Video::before {content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--dark); opacity: 0.4;}
.Web .AdvantagesItem .Video svg {position: absolute; left: calc(50% - 125px / 2); top: calc(50% - 125px / 2);}
.Web .AdvantagesItem .TextContent {flex: 1; max-width: 60%; text-align: left; padding: 24px; background: white; border-radius: 20px; border: 3px solid var(--green);}
.Web .AdvantagesItem .TextContent h2 {text-align: left;}
.Web .AdvantagesItem .TextContent p {margin-bottom: 14px;}

.Web .DoBetterItem {display: flex; align-items: flex-start; justify-content: space-between; position: relative; margin-bottom: 50px;}
.Web .DoBetterSide {flex: 0 0 47%;}
.Web .DoBetterSide.LeftSide {text-align: right;}
.Web .DoBetterSide .Image {padding-top: 70%; background-size: auto 100%;}
.Web .LeftSide .Image {background-position: right center;}
.Web .RightSide .Image {background-position: left center;}
.Web .DoBetterNumber {font-size: 72px; font-weight: 200; color: #706F6F;}
.Web .DoBetterNumber, .Web .DoBetterItem .TextContent {height: 100px;}
.Web .DoBetterItem .TextContent {padding-top: 20px;}
.Web .DoBetterItem::after {content: ''; position: absolute; top: 100px; left: 50%; height: calc(100% - 100px); width: 2px; background: repeating-linear-gradient(to bottom, transparent 0%, transparent 1.5%, var(--dark) 1.5%, var(--dark) 3%, transparent 3%);}
.Web .DoBetterItemHeading {font-size: 22px; font-weight: 800; color: var(--green);}

.Web .CTAButtonBlock {padding: 50px 0; text-align: center; background: var(--green); margin-bottom: 100px; color: var(--bg-light);}

.Web .GalleryOfScreens {display: flex; flex-wrap: wrap; justify-content: space-evenly; margin-bottom: 80px;}
.Web .GalleryOfScreens .GalleryItem {margin: 10px 10px 30px 10px; display: flex; flex: 0 0 48%; gap: 20px; align-items: center;}
.Web .GalleryOfScreens .Image {display: block; flex: 1; border-radius: 20px; border: 1px solid var(--green);}
.Web .GalleryOfScreens .GalleryContent {flex: 1; display: flex; justify-content: center; flex-direction: column; border-radius: 20px; border: 3px solid var(--green); padding: 24px; background: white;}
.Web .GalleryOfScreens .GalleryOld {opacity: 0.5; margin-bottom: 20px;}
.Web .GalleryOfScreens .GalleryNew {color: var(--orange); font-weight: bold;}

.Web .GalleryOfScreens .GalleryItem:nth-of-type(4n) .Image {order: 2;}
.Web .GalleryOfScreens .GalleryItem:nth-of-type(4n-1) .Image {order: 2;}

.GalleryDialog .DialogContent {width: 90vw;}
.GalleryDialog .MainImage, .GalleryDialog .SideImage {background: transparent; border: none;}
.GalleryDialog .SideImage {background-position: center center; background-size: cover;}
.GalleryDialog .GalleryImages {width: 200px;}
.GalleryDialog .SideImage {height: 100px;}
.GalleryDialog .MainImage {width: calc(100% - 210px); border: 3px solid var(--green); border-radius: 30px;}
.GalleryDialog .DialogBox .CloseCross {display: block; right: 320px; top: 20px; box-shadow: 0 0 20px black;}

.NoteStar {font-weight: normal; font-size: 20px;}

.SmallerTextInDialog {font-size: 15px;}

.GalleriesBlock {padding: 0 7%;}

@media (max-width: 1300px) {
	.Web .Intro h1 {padding-left: 10%; font-size: 32px;}
	.Web .Intro h1 svg {height: auto; width: 140px;}
	.Web .IntroClaim {font-size: 28px;}

	.Web .HeadContacts {font-size: 16px;}
}

@media (max-width: 1200px) {
	.GalleriesBlock {padding: 0 1%;}
	.Web .GalleryOfScreens .GalleryItem {margin-left: 0; margin-right: 0;}
}

@media (max-width: 1170px) {
	.Web .Intro h1 {font-size: 30px;}
	.Web .IntroClaim {font-size: 24px; padding: 15px 40px;}

	.Web .Head nav a {padding: 0 15px;}
}

@media (max-width: 1024px) {
	.Web .LicencesTables {font-size: 16px;}
	.Web .LicenceHeading {font-size: 28px;}
	.Web .LicenceTable {flex-basis: 31%;}

	.Web .GalleryOfScreens {display: block;}

	.Web .GalleryOfScreens .GalleryItem:nth-of-type(2n) .Image {order: 2;}
	.Web .GalleryOfScreens .GalleryItem:nth-of-type(2n+1) .Image {order: 1;}
	.Web .GalleryOfScreens .GalleryItem:nth-of-type(2n) .GalleryContent {order: 1;}
	.Web .GalleryOfScreens .GalleryItem:nth-of-type(2n+1) .GalleryContent {order: 2;}

	.Web .AdvantagesItem:nth-of-type(2n+1) .Video {margin-left: 10px;}
	.Web .AdvantagesItem:nth-of-type(2n) .Video {margin-right: 10px;}

	.Web .IntroImage {display: none;}
	.Web .Intro {display: block;}
	.Web .Intro h1 {padding-left: 0; text-align: center; display: block; padding-top: 100px;}
	.Web .IntroClaim {margin-left: 0; text-align: center; background: none; color: var(--green); width: 100%;}
	.Web .CTAButtonBlock .Button {height: auto;}
}

@media (max-width: 900px) {
	.Web .LicencesTables .Tables {display: block;}
	.Web .LicenceTable {margin-bottom: 30px;}
}

@media (max-width: 750px) {
	.Web .AdvantagesItem {flex-wrap: wrap; margin-bottom: 35px;}
	.Web .AdvantagesItem .Video, .Web .AdvantagesItem .TextContent {flex: 0 0 100%; max-width: none;}
	.Web .AdvantagesItem .Video {margin-bottom: 20px;}
	.Web .AdvantagesItem:nth-of-type(2n+1) .Video {margin-left: 0; order: 1;}
	.Web .AdvantagesItem:nth-of-type(2n) .Video {margin-right: 0; order: 1;}
	.Web .AdvantagesItem .TextContent {order: 2;}

	.Web .Head .Container nav {display: none;}
}

@media (max-width: 650px) {
	.Web .WarningBlock {display: block; text-align: center; padding-top: 0;}
	.Web .WarningTexts {position: relative; z-index: 2;}
	.Web .WarningBlock .Image {margin-top: -10%;}
}

@media (max-width: 600px) {
	.Web .AppApplication form {max-width: 440px; padding: 24px 22px;}
	.Web .FormItem {display: block; max-width: 400px; margin-left: auto; margin-right: auto; padding-right: 0;}
	.Web .AppApplication .CustomInput {display: flex;}
}

@media (max-width: 520px) {
	.Web .GalleryOfScreens .GalleryItem {display: block;}
	.Web .FAQQuestion {padding: 14px 18px;}
	.Web .FAQAnswer .TextContent {padding: 0 18px 16px;}
	.Web .FAQChart {display: none;}

	.Web .Head .Container .HeadContacts {display: none;}
}.Web .ArticlesLast {padding: 50px 0 70px; background: var(--bg-light);}
.Web .ArticlesLastHead {text-align: center; margin-bottom: 40px;}
.Web .ArticlesLastIcon {display: inline-flex; margin-bottom: 12px;}
.Web .ArticlesLast h2 {margin-bottom: 12px; font-weight: 900;}
.Web .ArticlesLastIntro {font-size: 15px; margin: 0; color: var(--dark);}

.Web .ArticlesGrid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;}

.Web .ArticleCard {display: flex; flex-direction: column; border: 3px solid var(--green); border-radius: 30px; background: white; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; padding: 24px;}
.Web .ArticleCard a {text-decoration: none;}
.Web .ArticleCard:hover {box-shadow: 0 14px 34px rgba(29,29,27,0.1);}
.Web .ArticleCardImage {display: flex; align-items: center; justify-content: center; height: 157px; margin-bottom: 19px; border-radius: 15px; background: var(--20-green); overflow: hidden;}
.Web .ArticleCardImage img {width: 100%; height: 100%; object-fit: cover;}
.Web .ArticleBookIcon {opacity: .85;}

.Web .ArticleCardDate {align-self: flex-start; margin-bottom: 8px; padding: 4px 11px; border-radius: 99px; background: var(--green); color: white; font-size: 14px; font-weight: 800; width: max-content;}
.Web .ArticleCardTitle {font-size: 20px; font-weight: 900; margin-bottom: 15px; line-height: 28px; color: var(--green); text-decoration: none;}
.Web .ArticleCardPerex {flex: 1; font-size: 16px; line-height: 28px; color: black; margin-bottom: 15px;}
.Web .ArticleCardLink {display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--green); font-weight: 800; font-size: 14px; text-decoration: none; transition: 0.25s ease gap; line-height: normal;}
.Web .ArticleCard:hover .ArticleCardLink {gap: 12px;}
.Web .ArticleCardArrow {transition: transform .2s ease;}

@media (max-width: 900px) {
	.Web .ArticlesGrid {grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto;}
}