@font-face {
    font-family: '5ka Sans Design';
    src: url('fonts/5kaSansDesign-Regular.eot');
    src: local('5ka Sans Design Regular'), local('5kaSansDesign-Regular'),
        url('fonts/5kaSansDesign-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/5kaSansDesign-Regular.woff2') format('woff2'),
        url('fonts/5kaSansDesign-Regular.woff') format('woff'),
        url('fonts/5kaSansDesign-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: '5ka Sans Design';
    src: url('fonts/5kaSansDesign-SemiBold.eot');
    src: local('5ka Sans Design SemiBold'), local('5kaSansDesign-SemiBold'),
        url('fonts/5kaSansDesign-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/5kaSansDesign-SemiBold.woff2') format('woff2'),
        url('fonts/5kaSansDesign-SemiBold.woff') format('woff'),
        url('fonts/5kaSansDesign-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

html {
    min-width: 320px;
}

body {
    position: relative;
    background: url(img/corn-bg.svg) bottom right no-repeat, linear-gradient(180deg, #FFEEE0 0%, #FFFFFF 84.5%);
    margin: 0;
    padding: 0px 0 0 0;
    min-height: 100dvh;
    font-family: '5ka Sans Design', 'Helvetica', sans-serif;
}


html > body {
    padding: 0;
}

img {
    padding: 0;
    margin: 0;
    border: 0;
}

.cleaner {
    clear: both;
}

a:hover {
    text-decoration: none;
}

input::-moz-placeholder {
    opacity: 0.5;
}

input::-webkit-input-placeholder {
    opacity: 0.5;
}

input:focus::-moz-placeholder {
    opacity: 0;
}

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

a {
    color: #006BCF;
}

* {
    box-sizing: border-box;
    outline: none;
    max-height: 9999999px;
    -webkit-appearance: none !important;
}

.all {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

form {
    padding: 0;
    margin: 0;
    border: 0;
}

form fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

button, a {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.container {
    position: relative;
    width: 100%; 
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    max-width: 100%; height: 100dvh; display: flex; justify-content: center; overflow: auto;
}


p {
    padding: 0;
    margin: 0;
}

.wrap {position: relative; max-width: 1400px; width: 100%; padding: 46px 40px 40px; display: flex;}
.step-block {min-height: 575px; display: flex; flex-direction: column; width: 100%; position: absolute; top: -999999999px; left: -9999999px; opacity: 0; transition: opacity 0.3s ease;}
.step-block.active {opacity: 1; position: static; top: auto; left: auto;}

.step-block.first .txt {
    margin-top: 70px;
    margin-bottom: 40px;
}

.step-block header {margin: 0 0 50px; width: 100%; display: flex; align-items: center; justify-content: space-between;}
.step-block.first header {margin: 0 0 20px;}
.step-block header .logo {display: block; height: 90px;}
.step-block header .right {display: flex; align-items: center; column-gap: 40px;}
.step-block header .right .tel {margin: 0 10px 0 0;}
.step-block header .right .ic img {display: block; height: 40px;}
.step-block header .right .tel {font-size: 20px; color: #000; text-decoration: none; }
.step-block header .right .tel:hover {color: #54A76F;}
.step-block header .title {font-size: 60px; color: #FE7701; line-height: 100%;}
.step-block:not(.first) header .logo {display: none;}
.step-block.finish header {justify-content: flex-end;}

.first .question {font-size: 30px; margin-top: 20px;}

h1 {font-size: 46px; line-height: 130%; margin: 0 0 30px; padding: 0; }
h1 span {color: #54A76F;}

.step-block.first {font-size: 30px; line-height: 110%; padding-bottom: 100px;}
.step-block.first.active:before {visibility: visible; opacity: 1;}
.step-block > * {position: relative;}

.step-block .bg {min-height: 700px; transition: all 0.3s ease; visibility: hidden; opacity: 0; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100dvh;}
.step-block .bg img {width: 100%; display: block; height: 100%; object-fit: cover; object-position: bottom center;}
.step-block.active .bg {visibility: visible; opacity: 1;}
.step-block .bg.opacity {background: linear-gradient(180deg, #FFEEE0 0%, #FFFFFF 84.5%);}
.step-block.active .bg.opacity img {opacity: 0.1;}


.step-block.first .start-btn {transition: all 0.3s ease; cursor: pointer; display: table; line-height: 100px; background: #FE7701; width: 100%; max-width: 500px; text-align: center; border-radius: 15px; font-size: 40px; text-decoration: none; color: #fff; margin-left: auto;}
.step-block.first .start-btn:hover {background: #54A76F;}

.step-block .bottom-btns {
    display: flex; justify-content: space-between; 
    width: 100%; 
    max-width: calc(100vw - 40px);
    margin: auto 0 0 0; padding-bottom: 76px;}
.step-block .btn {transition: all 0.3s ease; cursor: pointer; display: table; line-height: 60px; background: #FE7701; width: 100%; max-width: 250px; text-align: center; border: 0; border-radius: 10px; font-size: 25px; text-decoration: none; color: #fff; margin-left: auto;}
.step-block > .btn {margin-bottom: 40px;}
.step-block .btn:hover {background: #54A76F;}
.step-block .btn.disabled {cursor: default; background: #D7D7D7; color: #7C7C7C; user-select: none;}
.step-block .btn.prev-btn, .step-block .btn.more {line-height: 56px; border: 2px solid #54A76F; color: #54A76F; background: none; margin: 0;}
.step-block .btn.prev-btn:hover, .step-block .btn.more:hover {color: #FE7701; border-color: #FE7701;}

.question {font-size: 45px; line-height: 100%; margin: 0 0 50px; color: #3E170C;}

.labels-pics {display: flex; margin: 0 -30px 20px 0; width: calc(100% + 30px);}
.labels-pics label {display: block; position: relative; cursor: pointer; width: calc(25% - 30px); margin: 0 30px 0 0;}
.labels-pics label input {position: absolute; top: 0; left: 0; bottom: 0; width: 100%; cursor: pointer; opacity: 0; z-index: 2;}
.labels-pics label .i {margin: 0 0 10px; border-radius: 10px; display: block; overflow: hidden; position: relative; height: 280px;}
.labels-pics label .i:after {border-radius: 10px; box-sizing: border-box; content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; bottom: 0; background: rgba(84, 167, 111, 0.76); opacity: 0; transition: opacity 0.3s ease;}
.labels-pics label:hover .i:after {opacity: 1;}
.labels-pics label .i img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center;}
.labels-pics label .t {border-radius: 5px; transition: all 0.3s ease; display: block; width: 100%; line-height: 57px; font-size: 26px; color: #3E170C; text-align: center;}
.labels-pics label:hover input:not(:checked) + .i + .t {background: rgba(84, 167, 111, 0.3);}
.labels-pics label input:checked + .i:after {opacity: 1; border: 2px solid #54A76F; background: none;}
.labels-pics label input:checked + .i + .t {color: #54A76F;}

.labels {padding: 0 0 20px;}
.labels label {display: table; position: relative; cursor: pointer; padding: 10px 15px 10px 55px; font-size: 28px; color: #3E170C; border-radius: 5px;}
.labels:not(.flex) label + label {margin-top: 20px;}
.labels label:not(.checked):hover {background: #54A76F4D;}
.labels label input {width: 30px; height: 30px; position: absolute; left: 15px; top: 50%; margin-top: -15px; z-index: 2; cursor: pointer; opacity: 0;}
.labels label input:checked + .i {background-image: url(img/checked-f-ic.svg);}
.labels label .i {display: block; width: 30px; height: 30px; position: absolute; left: 15px; top: 50%; margin-top: -14px; background: url(img/check-ic.svg) center center no-repeat;}
.labels label input[type="radio"] + .i {background-image: url(img/check-r-ic.svg);}
.labels label input[type="radio"]:checked + .i {background-image: url(img/check-rf-ic.svg);}

.labels.flex {display: flex; align-items: center; column-gap: 10px; flex-wrap: wrap;}
.labels.flex label .t {white-space: nowrap;}
.labels label.download {transition: opacity 0.3s ease; margin: 0 0 0 10px; padding: 0; color: #7C7C7C; text-decoration: underline; font-size: 22px;}
.labels label.download:not(.visible) {position: absolute; left: -99999px; top: -99999px; opacity: 0;}
.labels label.download:hover {background: none; color: #54A76F;}
.labels .name {display: flex; align-items: center; color: #FE7701; font-size: 22px; margin: 0 0 0 10px;}
.labels .name .remove {margin: 0 0 0 10px; transition: all 0.3s ease; width: 30px; height: 30px; display: block; cursor: pointer; border-radius: 50%; background: #7C7C7C url(img/remove-ic.svg) center center no-repeat;}
.labels .name .remove:hover {background-color: #F44336;}

.fields .outer {position: relative; margin: 0 0 30px;}
.fields .outer.file p, .fields p.dark  {color: #3E170C; font-size: 26px;}
.fields p.dark.margin {margin: 0 0 20px;}
.fields p {color: #747272; font-size: 22px; line-height: 130%; margin: 0 0 10px;}
.fields p sup {color: #FF0000;}
.fields input {max-width: 450px; font-size: 28px; color: #3E170C; background: none; display: block; width: 100%; font-family: inherit; transition: all 0.3s ease; height: 65px; padding: 0 20px; border-radius: 10px; border: 3px solid rgba(84, 167, 111, 0.3);}
.fields input:focus, .fields input.ok {border-color: rgba(84, 167, 111, 1);}
.fields input:not(:focus).ok {background: rgba(84, 167, 111, 0.3);}

.btn {margin: auto 0 0 auto;}

.thanks {color: #3E170C; font-size: 60px; line-height: 110%; text-align: center;}
.thanks h2 {font-size: 60px; color: #FE7701; line-height: 110%; margin: 0 0 60px; font-weight: normal; padding: 0;}
.thanks .t {margin: 0 0 80px;}
.thanks .bottom-btns {margin: 0 auto; max-width: 700px;}



@media all and (max-height: 850px) {
	.labels-pics {margin-bottom: 0;}
	h1 {font-size: 40px;}
	.step-block.first {padding-bottom: 150px;}
	.wrap { padding-top: 40px;}
	.labels-pics label .t {font-size: 25px;}
	.question {font-size: 32px; margin: 0 0 30px;}
	.step-block header .title {font-size: 40px;}


@media all and (min-width: 1001px) {
		.fields .outer.file p, .fields p.dark {font-size: 24px;}
		.step-block .bottom-btns {padding-bottom: 60px;}
		.fields .outer {margin-bottom: 20px;}
		h1 {font-size: 45px; margin: 0 0 30px;}
		.step-block.first {font-size: 30px; line-height: 130%; padding-bottom: 100px;}
		.step-block.first .start-btn {font-size: 30px; line-height: 80px; max-width: 400px;}
		.labels-pics {padding-bottom: 30px;}
		.labels-pics label .i {max-height: 22vw;}
		.labels label {font-size: 20px;}
		.labels:not(.flex) label + label {margin-top: 10px;}
		.fields p {font-size: 18px;}
		.fields input {height: 50px; font-size: 18px;}
	}
}

@media all and (max-height: 750px) {
	@media all and (min-width: 1001px) {
		.thanks {font-size: 50px;}
		.step-block.first {font-size: 25px; padding-bottom: 50px;}
		.step-block header .logo {height: 80px;}
		h1 {font-size: 35px;}
		.step-block.first .start-btn {font-size: 22px; line-height: 60px; max-width: 300px;}
		.question {font-size: 26px;}
	}
}

@media all and (max-width: 1400px) {
.step-block header .logo {height: 90px;}
.thanks {font-size: 40px;}
.labels-pics label .t {font-size: 22px;}
body {background: url(img/corn-bg.svg) bottom right/auto 70% no-repeat, linear-gradient(180deg, #FFEEE0 0%, #FFFFFF 84.5%);}
}


@media all and (max-width: 1200px) {
h1 {font-size: 46px;}
.step-block.first:before {background-position: bottom left -250px;}
.labels-pics label .t {font-size: 18px;}
.labels-pics label .i {max-height: 22vw;}
}


@media all and (max-width: 1000px) {
.step-block:not(.first) header .title {margin-top: 30px;}
.step-block:not(.first) header .logo {display: block;}
.fields .outer.file p, .fields p.dark {font-size: 24px;}
.fields input {font-size: 20px;}
.step-block .btn.prev-btn, .step-block .btn.more {line-height: 46px;}
.container {height: auto; min-height: 100dvh;}
.step-block .btn {width: 300px; max-width: calc(50% - 10px); font-size: 20px; line-height: 50px;}
.labels-pics label .i {height: 45vw; max-height: 45vw;}
.labels-pics {flex-wrap: wrap;}
.labels-pics label {width: calc(50% - 20px); margin: 0 20px 40px 0;}
.step-block.first header {margin-bottom: 40px;}
.step-block:not(.first) header {flex-wrap: wrap;}
.step-block:not(.first) header .title {order: 2; width: 100%;}
.step-block:not(.first) header .right {margin: 0 0 20px auto;}
h1 {font-size: 40px;}
.step-block.first {font-size: 28px;}
.step-block.first:before {background-position: left -200px bottom;}
.step-block.first .start-btn {font-size: 25px; line-height: 60px; padding: 0 40px; width: auto;}
.step-block.first {padding-bottom: 100px;}
.step-block header .title {font-size: 30px;}
.question {font-size: 26px;}
.step-block > .btn {margin-bottom: 0;}
.labels label {font-size: 20px;}
.step-block .bottom-btns {padding-bottom: 0;}
.step-block.active:not(.finish) .bg {background: linear-gradient(180deg, #FFEEE0 0%, #FFFFFF 84.5%);}
.step-block.active:not(.finish) .bg img {opacity: 0.1;}
}

@media all and (max-width: 700px) {
.fields .outer.file p, .fields p.dark {font-size: 22px;}
.fields input {height: 50px;}
.thanks h2 {font-size: 40px; margin: 0 0 30px;}
.step-block:not(.first) header {margin-bottom: 30px;}
h1 {font-size: 27px;}
.wrap {padding: 30px 20px;}
.step-block.first {font-size: 22px;}
.question {margin: 0 0 30px;}
.thanks {font-size: 26px;}

.step-block.finish .bottom-btns {display: block;}
.step-block.finish .bottom-btns .btn {width: 100%; max-width: 250px; margin: 0 auto 20px!important;}
.fields input {background: #fff7f0;}
.step-block .btn {padding: 0; max-width: calc(50% - 5px); width: calc(50% - 5px)!important;}
}

@media all and (max-width: 500px) {
.question {font-size: 22px;}
.labels-pics label .t {line-height: 125%;}
.step-block header .logo {height: 80px;}
.step-block header .right {text-align: right; display: block;}
.step-block header .right .ic {display: inline-block;}
.step-block header .right .ic img {height: 36px; margin: 0 0 0 15px;}
.step-block header .right .tel {margin: 0 0 10px; display: block;}
.labels label input {left: 10px;}
.labels label .i {left: 10px;}
.fields p {font-size: 18px;}
.thanks {font-size: 22px;}
.thanks .t {margin-bottom: 40px;}
.step-block.first .start-btn {font-size: 20px;}
.labels:not(.flex) label + label {margin-top: 10px;}
.labels label {font-size: 18px;}
	@media all and (min-height: 800px) {
	.labels:not(.flex) label + label {margin-top: 15px;}
	.labels label {font-size: 20px;}
	.question {font-size: 26px;}
	}
}

@media (pointer:coarse) {
   .labels label:not(.checked):hover {background: none;}
}
.txt.privacy p {
    margin: 30px 0;
}