@media (min-width: 1500px){
main.main .add-2 {
--gap: 120px;
--grid-templete: 1fr / calc(40% - 60px) calc(60% - 60px);
--ikonka-width: 70%;
--plakietka-width: 50%;
}
main.main .add-3 {
--svg-arrow-h-w-scale: 0.2;
--margin-ratio: 3;
}
.house-head .photos .s-1 {
--svg-arrow-h-w-scale: 0.2;
}
.house-head .photos .s-2 {
--svg-arrow-h-w-scale: 0.15;
}
.house-head {
--grid-template: 1fr / 50% 50%;
--margin: 10px;
--text-marg: 50px;
}
.spec-grid {
--grid-template: min-content / 125px 1fr 165px 165px 165px;
}
.step-1 {
--form-gap: 80px;
--form-templete: 1fr / 1fr 1fr;
}
.step-2 {
--form-gap: 50px;
--form-templete: 1fr / 2fr 1fr;
}
.step-3 {
--form-gap: 20px;
--form-templete: 1fr / 1fr 1fr;
}
.step-4 {
--form-gap: 20px;
--form-templete: auto / 1fr 1fr;
}
.step-5 {
--form-gap: 50px;
--form-templete: auto / 1fr 1fr;
}
.step-6 {
--form-gap: 50px;
--form-templete: auto / 1fr 1fr;
}
.step-7 {
--form-gap: 20px;
--form-templete: auto / 1fr 1fr 1fr;
}
.step-8 {
--form-gap: 50px;
--form-templete: auto / 1fr 1fr;
}
.step-9 {
--ikonka-width: 100%;
--form-gap: 20px;
--form-templete: auto / 1fr 1fr;
--iko-templete: 1fr / 1fr 1fr 1fr;
}
.icon-list {
--margin: 250px;
--width: 150px;
}

.konf-show-cena {
--buttons-grid: auto / 30% 30%;
--konf-grid: 1fr / 1fr 1fr;
}
}

@media (min-width: 1200px) and (max-width: 1499px){
main.main .add-2 {
--gap: 50px;
--grid-templete: 1fr / calc(40% - 25px) calc(60% - 25px);
--ikonka-width: 90%;
--plakietka-width: 50%;
}
main.main .add-3 {
--svg-arrow-h-w-scale: 0.18;
--margin-ratio: 3;
}
.house-head .photos .s-1 {
--svg-arrow-h-w-scale: 0.18;
}
.house-head .photos .s-2 {
--svg-arrow-h-w-scale: 0.13;
}
.house-head {
--grid-template: 1fr / 55% 45%;
--margin: 5px;
--text-marg: 30px;
}
.spec-grid {
--grid-template: min-content / 120px 1fr 160px 160px 160px;
}
.step-1 {
--form-gap: 40px;
--form-templete: 1fr / 1fr 1fr;
}
.step-2 {
--form-gap: 40px;
--form-templete: 1fr / 2.5fr 1fr;
}
.step-3 {
--form-gap: 15px;
--form-templete: 1fr / 1fr 1fr;
}
.step-4 {
--form-gap: 15px;
--form-templete: auto / 1fr 1fr;
}
.step-5 {
--form-gap: 40px;
--form-templete: auto / 1fr 1fr;
}
.step-6 {
--form-gap: 40px;
--form-templete: auto / 1fr 1fr;
}
.step-7 {
--form-gap: 15px;
--form-templete: auto / 1fr 1fr 1fr;
}
.step-8 {
--form-gap: 40px;
--form-templete: auto / 1fr 1fr;
}
.step-9 {
--ikonka-width: 100%;
--form-gap: 10px;
--form-templete: auto / 1fr 1fr;
--iko-templete: 1fr / 1fr 1fr 1fr;
}
.icon-list {
--margin: 230px;
--width: 130px;
}
.konf-show-cena {
--buttons-grid: auto / 40% 40%;
--konf-grid: 1fr / 1fr 1fr;
}
}

@media (min-width: 992px) and (max-width: 1199px){
main.main .add-2 {
--gap: 30px;
--grid-templete: 1fr / calc(40% - 15px) calc(60% - 15px);
--ikonka-width: 100%;
--plakietka-width: 50%;
}
main.main .add-3 {
--svg-arrow-h-w-scale: 0.16;
--margin-ratio: 2;
}
.house-head .photos .s-1 {
--svg-arrow-h-w-scale: 0.16;
}
.house-head .photos .s-2 {
--svg-arrow-h-w-scale: 0.13;
}
.house-head {
--grid-template: 1fr / 55% 45%;
--margin: 5px;
--text-marg: 20px;
}
.spec-grid {
--grid-template: min-content / 110px 1fr 150px 150px 150px;
}
.step-1 {
--form-gap: 30px;
--form-templete: 1fr / 1fr 1fr;
}
.step-2 {
--form-gap: 20px;
--form-templete: 1fr / 3fr 1fr;
}
.step-3 {
--form-gap: 15px;
--form-templete: 1fr / 1.5fr 1fr;
}
.step-4 {
--form-gap: 15px;
--form-templete: auto / 1fr 1fr;
}
.step-5 {
--form-gap: 30px;
--form-templete: auto / 1fr 1fr;
}
.step-6 {
--form-gap: 30px;
--form-templete: auto / 1fr 1fr;
}
.step-7 {
--form-gap: 15px;
--form-templete: auto / 1fr 1fr 1fr;
}
.step-8 {
--form-gap: 30px;
--form-templete: auto / 1fr 1fr;
}
.step-9 {
--ikonka-width: 100%;
--form-gap: 5px;
--form-templete: auto / 1fr 1fr;
--iko-templete: 1fr / 1fr 1fr 1fr;
}
.icon-list {
--margin: 210px;
--width: 110px;
}
.konf-show-cena {
--buttons-grid: auto / 1fr 1fr;
--konf-grid: 1fr / 1fr 1fr;
}
}

@media (min-width: 768px) and (max-width: 991px){
main.main .add-2 {
--gap: 50px;
--grid-templete: auto / 100%;
--ikonka-width: 50%;
--plakietka-width: 30%;
}
main.main .add-3 {
--svg-arrow-h-w-scale: 0.16;
--margin-ratio: 2.5;
}
.house-head .photos .s-1 {
--svg-arrow-h-w-scale: 0.16;
}
.house-head .photos .s-2 {
--svg-arrow-h-w-scale: 0.13;
}
.house-head {
--grid-template: auto auto / 100%;
--margin: 10px;
--text-marg: 0px;
}
.step-1 {
--form-gap: 40px;
--form-templete: 1fr / 1fr 1fr;
}
.step-2 {
--form-gap: 40px;
--form-templete: 1fr / 2.5fr 1fr;
}
.step-3 {
--form-gap: 15px;
--form-templete: 1fr / 1fr 1fr;
}
.step-4 {
--form-gap: 15px;
--form-templete: auto / 1fr 1fr;
}
.step-5 {
--form-gap: 40px;
--form-templete: auto / 1fr 1fr;
}
.step-6 {
--form-gap: 40px;
--form-templete: auto / 1fr 1fr;
}
.step-7 {
--form-gap: 15px;
--form-templete: auto / 1fr 1fr 1fr;
}
.step-8 {
--form-gap: 40px;
--form-templete: auto / 1fr 1fr;
}
.step-9 {
--ikonka-width: 100%;
--form-gap: 10px;
--form-templete: auto / 1fr 1fr;
--iko-templete: 1fr / 1fr 1fr 1fr;
}
.icon-list {
--margin: 170px;
--width: 100px;
}
.konf-show-cena {
--buttons-grid: 1fr 1fr / 65%;
--konf-grid: max-content max-content / 1fr;
}
}

@media (min-width: 576px) and (max-width: 767px){
main.main .add-2 {
--gap: 50px;
--grid-templete: auto / 100%;
--ikonka-width: 60%;
--plakietka-width: 40%;
}
main.main .add-3 {
--svg-arrow-h-w-scale: 0.14;
--margin-ratio: 1.2;
}
.house-head .photos .s-1 {
--svg-arrow-h-w-scale: 0.14;
}
.house-head .photos .s-2 {
--svg-arrow-h-w-scale: 0.11;
}
.house-head {
--grid-template: auto auto / 100%;
--margin: 5px;
--text-marg: 0px;
}
.step-1 {
--form-gap: 30px;
--form-templete: 1fr / 1.2fr 1fr;
}
.step-2 {
--form-gap: 30px;
--form-templete: 1fr / 2.5fr 1fr;
}
.step-3 {
--form-gap: 15px;
--form-templete: 1fr / 1.2fr 1fr;
}
.step-4 {
--form-gap: 15px;
--form-templete: auto / 1fr 1fr;
}
.step-5 {
--form-gap: 30px;
--form-templete: auto / 1fr 1fr;
}
.step-6 {
--form-gap: 30px;
--form-templete: auto / 1fr 1fr;
}
.step-7 {
--form-gap: 15px;
--form-templete: auto / 1fr 1fr 1fr;
}
.step-8 {
--form-gap: 30px;
--form-templete: auto / 1fr 1fr;
}
.step-9 {
--ikonka-width: 100%;
--form-gap: 5px;
--form-templete: auto / 1fr 1fr;
--iko-templete: 1fr / 1fr 1fr 1fr;
}
.icon-list {
--margin: 150px;
--width: 80px;
}
.konf-show-cena {
--buttons-grid: 1fr 1fr / 75%;
--konf-grid: max-content max-content / 1fr;
}
}

@media (max-width: 575px){
main.main .add-2 {
--gap: 50px;
--grid-templete: auto / 100%;
--ikonka-width: 100%;
--plakietka-width: 50%;
}
main.main .add-3 {
--svg-arrow-h-w-scale: 0.12;
--margin-ratio: 1.5;
}
.house-head .photos .s-1 {
--svg-arrow-h-w-scale: 0.12;
}
.house-head .photos .s-2 {
--svg-arrow-h-w-scale: 0.10;
}
.house-head {
--grid-template: auto auto / 100%;
--margin: 5px;
--text-marg: 0px;
}
.step-1 {
--form-gap: 10px;
--form-templete: auto / 1fr;
}
.step-2 {
--form-gap: 20px;
--form-templete: auto / 1fr;
}
.step-3 {
--form-gap: 15px;
--form-templete: 1fr / 2fr 1fr;
}
.step-4 {
--form-gap: 15px;
--form-templete: auto / 1fr;
}
.step-5 {
--form-gap: 30px;
--form-templete: auto / 1fr;
}
.step-6 {
--form-gap: 30px;
--form-templete: auto / 1fr;
}
.step-7 {
--form-gap: 30px;
--form-templete: auto / 1fr 1fr;
}
.step-8 {
--form-gap: 30px;
--form-templete: auto / 1fr;
}
.step-9 {
--ikonka-width: 100%;
--form-gap: 5px;
--form-templete: auto / 1fr;
--iko-templete: auto / 1fr 1fr;
}
.icon-list {
--margin: 100px;
--width: 50px;
}
.konf-show-cena {
--buttons-grid: 1fr 1fr / 1fr;
--konf-grid: max-content max-content / 1fr;
}
}




main.main .add-2 {
--icon-width: 36px;
}
main.main .add-2 .grid {
	display: grid;
	grid-template: var(--grid-templete);
	place-items: center stretch;
	column-gap: var(--gap);
}
@media (max-width: 991px){
main.main .add-2 .grid {
	column-gap: 0px;
	row-gap: var(--gap);
}
}
main.main .add-2 .grid > div:first-child > .photo > img {
	width: calc(var(--plakietka-width) - 15%);
}
main.main .add-2 .grid > div:first-child > .plakietka {
	width: var(--plakietka-width);
	padding-left: 0;
	padding-right: 0;
}
main.main .add-2 .grid > div:first-child > * {
	text-align: center;
	margin-bottom: calc(25px / var(--main-ratio));
}
main.main .add-2 .grid > div:first-child > *:last-child {
	margin-bottom: 0;
}
main.main .add-2 .grid > div:first-child > *:first-child {
	margin-bottom: 0;
}
main.main .add-2 p {
	font-size: calc(var(--font-size) - 3px);
}
main.main .add-2 .ikonka, main.main .add-2 [ikonka] {
	width: var(--ikonka-width);
	margin-bottom: calc(10px / var(--main-ratio));
	padding: 0.7em;
	border-radius: calc(15px / var(--main-ratio));
}
main.main .add-2 .ikonka > *, main.main .add-2 [ikonka] > * {
	font-size: calc(var(--font-size) - 4px);
	text-align: left;
}
main.main .add-2 .grid > div:first-child > *:last-child {
	margin-bottom: 0;
}



form.box-form {
	border-radius: calc(15px / var(--main-ratio));
	background-color: var(--color-2);
	display: block;
	position: relative;
}
form.box-form .steps {
	position: absolute;
	left: 0px;
	top: 0px;
	display: grid;
	grid-template: min-content 12px / repeat(7, max-content);
	justify-content: space-between;
	row-gap: calc(15px / var(--main-ratio));
	margin-bottom: calc(30px / var(--main-ratio));
	width: 100%;
	z-index: 1;
}
form.box-form .steps > p {
	font-weight: 700;
	font-size: calc(var(--font-size) - 1px);
	opacity: 0.25;
	margin-bottom: 0;
	cursor: default;
	color: var(--color-4);
	transition: color var(--transition-duration) var(--transition-timing) 0s, opacity var(--transition-duration) var(--transition-timing) 0s;
}
form.box-form .steps > p.current {
	opacity: 1;
}
form.box-form .steps > p.active {
	opacity: 1;
	cursor: pointer;
	color: var(--color-9);
}
form.box-form .steps > p.active:hover {
	color: var(--color-3);
}
form.box-form .steps > .bar {
	background-color: var(--color-8);
	border-radius: 6px;
	grid-area: 2 / 1 / 3 / 8;
}
form.box-form .steps > .indicator {
	background-color: var(--color-4);
	border-radius: 6px;
	grid-row: 2 / 3;
}
form.box-form .s-1 > .indicator {
	grid-column: 1 / 2;
}
form.box-form .s-2 > .indicator {
	grid-column: 1 / 3;
}
form.box-form .s-3 > .indicator {
	grid-column: 1 / 4;
}
form.box-form .s-4 > .indicator {
	grid-column: 1 / 5;
}
form.box-form .s-5 > .indicator {
	grid-column: 1 / 6;
}
form.box-form .s-6 > .indicator {
	grid-column: 1 / 7;
}
form.box-form .s-7 > .indicator {
	grid-column: 1 / 8;
}
form.box-form .s-8, form.box-form .s-9 {
	display: none;
}
form.box-form .slider-ele {
	display: grid;
	grid-template: min-content min-content min-content / 100%;
	place-content: space-between stretch;
	justify-items: stretch;
}
form.box-form .slider-ele > ol {
	align-self: start;
	counter-reset: count var(--count);
	margin-bottom: calc(30px / var(--main-ratio));
	margin-left: 2.5em;
	list-style-position: outside;
}
form.box-form .slider-ele > ol li {
	font-size: var(--h5-font-size);
	text-align: left;
}
form.box-form .slider-ele > ol li::marker {
	font-size: var(--h5-font-size);
	font-weight: 700;
}
form.box-form .form-content {
	align-self: center;
	display: grid;
	grid-template: var(--form-templete);
	column-gap: var(--form-gap);
}
form.box-form p, form.box-form h5, form.box-form h6 {
	text-align: left;
}
form.box-form .form-content p {
	margin-bottom: 0;
}
form.box-form label {
	line-height: 1.1em;
	font-size: calc(var(--font-size) - 3px);
	margin-bottom: calc(var(--text-margin) / var(--main-ratio));
	display: block;
}
form.box-form .custom-check label, form.box-form .custom-radio label {
	margin-bottom: 0;
	margin-left: 1em;
}
form.box-form .form-button {
	align-self: end;
	display: grid;
	grid-template: 1fr / 1fr 1fr;
	place-items: stretch stretch;
	column-gap: var(--form-gap);
	margin-top: calc(30px / var(--main-ratio));
}
form.box-form .form-button > .button.wstecz {
	grid-area: 1 / 1 / 2 / 2;
}
form.box-form .form-button > .button.dalej {
	grid-area: 1 / 2 / 2 / 3;
}
form.box-form .form-button > .button {
	padding: 0 1em 0 1em;
}
form.box-form .form-button > .button > span {
	text-transform: none;
}
form.box-form .button {
	display: grid;
	place-content: center center;
}
form.box-form .button.dalej.no-active {
	opacity: 0.3;
	cursor: default;
}
form.box-form .button.dalej.no-active:hover {
	background-color: var(--color-4);
	color: var(--color-9);
}
form.box-form .button.dalej.no-active:hover > div.arr-r {
	transform: translateX(0px);
}
form.box-form .button.dalej.no-active:hover > div > svg {
	stroke: var(--color-9);
}

form.box-form .step-1 .form-input > * {
	margin-bottom: calc(20px / var(--main-ratio)) !important;
}
form.box-form .step-1 .form-input > *:last-child {
	margin-bottom: 0 !important;
}
form.box-form .step-1 input[type="range"] {
	margin-bottom: 0 !important;
}
form.box-form .step-1 .range {
	display: grid;
	grid-template: 1fr / 1fr 1fr;
	justify-content: stretch;
	margin-top: calc((var(--text-margin) / var(--main-ratio)) / 3);
}
form.box-form .step-1 .range > * {
	text-align: left;
}
form.box-form .step-1 .range > *:first-child {
	place-self: start start;
}
form.box-form .step-1 .range > *:last-child {
	place-self: start end;
}
form.box-form .step-1 .form-content > .image {
	display: grid;
}
form.box-form .step-1 .form-content > .image > *:first-child {
	grid-area: 1 / 1 / 3 / 2;
	place-self: center start;
	text-align: left;
}
form.box-form .step-1 .form-content > .image > *:nth-child(2) {
	grid-area: 2 / 2 / 3 / 3;
	place-self: start center;
	text-align: center;
}
form.box-form .step-1 .form-content > .image > *:last-child {
	grid-area: 1 / 2 / 2 / 3;
	place-self: center center;
}

form.box-form .step-2 .form-input {
	display: grid;
	row-gap: var(--form-gap);
}

form.box-form .step-3 > div.grid {
	display: grid;
}

form.box-form .step-3 .line {
	place-self: stretch stretch;
	background-color: var(--color-4);
}

form.box-form .step-3 .form-input > * {
	margin-bottom: calc(20px / var(--main-ratio));
}
form.box-form .step-3 .form-input > *:last-child {
	margin-bottom: 0;
}

form.box-form .step-4 .form-content {
	row-gap: var(--form-gap);
}

form.box-form .step-5 .form-content {
	row-gap: var(--form-gap);
}

form.box-form .step-6 .form-content {
	row-gap: var(--form-gap);
}

form.box-form .step-8 .form-content {
	row-gap: var(--form-gap);
}

form.box-form .step-9 .grid-iko {
	display: grid;
	grid-template: var(--iko-templete);
	column-gap: 5px;
	margin-bottom: calc(20px / var(--main-ratio));
}
form.box-form .step-9 .grid-iko > * {
	margin-bottom: 0;
}
form.box-form .step-9 .grid-iko > * > p {
	line-height: 110%;
	font-size: calc(var(--font-size) - 5px)
}
form.box-form .step-9 .form-content {
	justify-content: space-between;
}
form.box-form .step-9 .form-content > label {
	margin: 10px 0 5px calc(15px / var(--main-ratio));
}
form.box-form .step-9 > p {
	margin-top: calc(20px / var(--main-ratio));
}

@media (min-width: 576px){
form.box-form .slider-ele {
	padding: calc(113px / var(--main-ratio)) calc(40px / var(--main-ratio)) calc(30px / var(--main-ratio)) calc(40px / var(--main-ratio));
}
form.box-form .steps {
	padding: calc(30px / var(--main-ratio)) calc(40px / var(--main-ratio)) 0 calc(40px / var(--main-ratio));
	margin-bottom: calc(30px / var(--main-ratio));
}
form.box-form .step-8, form.box-form .step-9 {
	padding-top: calc(30px / var(--main-ratio));
}
form.box-form .form-content > .form-input {
	place-self: center stretch;
}
form.box-form .form-content > .image {
	place-self: center end;
}
form.box-form .step-1 .form-content > .image {
	grid-template: auto min-content / 50px 1fr;
}
form.box-form .step-2 .form-input {
	grid-template-columns: max-content max-content;
	justify-content: space-between;
}
form.box-form .step-2 .form-input > p {
	grid-area: 1 / 1 / 2 / 3;
}
form.box-form .step-3 > div.grid {
	grid-template: 1fr / 1fr 2px 1fr;
	justify-content: space-between;
	place-items: center stretch;
	column-gap: var(--form-gap);
}
form.box-form .step-4 .form-content {
	justify-content: space-between;
}
form.box-form .step-4 .form-content > p {
	grid-area: 1 / 1 / 2 / 3;
}
form.box-form .step-5 .form-content {
	justify-content: space-between;
}
form.box-form .step-5 .form-content > p {
	grid-area: 1 / 1 / 2 / 3;
}
form.box-form .step-6 .form-content {
	justify-content: space-between;
}
form.box-form .step-6 .form-content > p {
	grid-area: 1 / 1 / 2 / 3;
}
form.box-form .step-7 .form-content {
	row-gap: var(--form-gap);
	justify-content: space-between;
}
form.box-form .step-7 .form-content > p {
	grid-area: 1 / 1 / 2 / 4;
}
form.box-form .step-8 .form-content {
	justify-content: space-between;
}
form.box-form .step-9 .form-content > label {
	grid-column: 1 / 3;
}
}

@media (max-width: 575px){
form.box-form .slider-ele {
	padding: 60px 15px 15px 15px;
}
form.box-form .steps {
	padding: 10px 15px 15px 15px;
	margin-bottom: 15px;
}
form.box-form .step-8, form.box-form .step-9 {
	padding-top: 15px;
}
main.main .add-2 .box-form .steps > p {
	font-weight: 500;
	font-size: calc(var(--font-size) - 4px);
}
form.box-form .form-content {
	row-gap: var(--form-gap);
}
form.box-form .form-content > .form-input {
	place-self: start stretch;
}
form.box-form .form-content > .image {
	place-self: start center;
}
form.box-form .step-1 .form-content > .image {
	grid-template: auto min-content / 50px 60%;
	place-content: start center;
}
form.box-form .step-2 .form-content > .image {
	text-align: center;
}
form.box-form .step-2 .form-content > .image img {
	max-width: 50%;
}
form.box-form .step-2 .form-input {
	grid-template-columns: 1fr;
	justify-content: stretch;
}
form.box-form .step-3 > div.grid {
	grid-template: auto 2px auto / 1fr;
	justify-content: stretch;
	place-items: start stretch;
	row-gap: var(--form-gap);
}
form.box-form .step-3 .form-input {
	place-self: center stretch;
}
form.box-form .step-3 .image {
	place-self: center stretch;
}
form.box-form .step-4 .form-content {
	justify-content: stretch;
}
form.box-form .step-5 .form-content {
	justify-content: stretch;
}
form.box-form .step-6 .form-content {
	justify-content: stretch;
}
form.box-form .step-7 .form-content {
	justify-content: space-between;
	row-gap: 15px;
	column-gap: 0px;
}
form.box-form .step-7 .form-content > p {
	grid-area: 1 / 1 / 2 / 3;
}
form.box-form .step-7 .custom-radio label {
	margin-left: 0.5em;
}
form.box-form .step-8 .form-content {
	justify-content: stretch;
}
form.box-form .step-9 .grid-iko {
	row-gap: 5px;
}
form.box-form .step-9 .grid-iko > *:first-child {
	grid-area: 1 / 1 / 2 / 3;
}
form.box-form .step-9 h5 {
	font-size: 13px;
	margin-bottom: 5px;
}
form.box-form .step-9 h6 {
	font-size: 13px;
	margin-bottom: 5px;
}
form.box-form .step-9 .custom-text {
	padding: 0.6em calc(15px / var(--main-ratio)) 1em calc(15px / var(--main-ratio));
}
form.box-form .step-9 .custom-text:nth-child(3) {
	grid-area: 2 / 1 / 3 / 2;
}
form.box-form .step-9 .custom-text:nth-child(3) {
	grid-area: 2 / 1 / 3 / 2;
}
form.box-form .step-9 .form-content > * {
	margin-bottom: 0;
}
form.box-form .step-9 button {
	margin-top: 10px;
}
form.box-form .step-9 .form-content > label {
	margin: 5px 0 2px calc(15px / var(--main-ratio));
}
form.box-form .step-9 > p {
	margin-top: 10px;
}
}


main.main .add-3 > div.index {
	display: grid;
	grid-template: 1fr / 1fr;
	place-content: stretch stretch;
}
main.main .add-3 .content {
	margin: 0 calc(((var(--svg-arrow-h-w-height) * var(--svg-arrow-h-w-scale)) + (30px / var(--main-ratio)) * var(--margin-ratio))) 0 calc(((var(--svg-arrow-h-w-height) * var(--svg-arrow-h-w-scale)) + (30px / var(--main-ratio)) * var(--margin-ratio)));
	place-self: stretch stretch;
	grid-area: 1 / 1 / 2 / 2;
	z-index: 1;
}
main.main .add-3 .slider-arrows {
	place-self: center stretch;
	grid-area: 1 / 1 / 2 / 2;
	display: grid;
	grid-template: 1fr / min-content min-content;
	justify-content: space-between;
}
main.main .add-3 .slider-arrows .arrow {
	display: grid;
	grid-template: calc((var(--svg-arrow-h-w-height) * var(--svg-arrow-h-w-scale)) + (30px / var(--main-ratio))) / calc((var(--svg-arrow-h-w-height) * var(--svg-arrow-h-w-scale)) + (30px / var(--main-ratio)));
	place-items: center center;
	border-radius: 100%;
	background-color: transparent;
	transition: background-color var(--transition-duration) var(--transition-timing) 0s, transform var(--transition-duration) var(--transition-timing) 0s;
}
main.main .add-3 .slider-arrows .arrow.active:hover {
	background-color: var(--color-4);
}
main.main .add-3 .slider-arrows .arrow.active:active {
	transform: scale(0.75);
}
main.main .add-3 .slider-arrows .arrow.inactive {
	opacity: 0.25;
}
main.main .add-3 .slider-arrows .arrow:first-child > div {
	transform: rotate(180deg);
}
main.main .add-3 .slider-arrows .arrow > div > svg {
	stroke: var(--color-9);
}

main.main .add-3 .slider-ele {
	background-color: var(--color-2);
	border-radius: calc(15px / var(--main-ratio));
	padding: 5px;
	display: grid;
	grid-template: min-content min-content min-content auto min-content min-content / 1fr;
	place-content: stretch stretch;
	place-items: start stretch;
}
main.main .add-3 .title {
	padding: calc(15px / var(--main-ratio));
	color: var(--color-9);
	text-align: center;
	margin: 0;
	line-height: 1em;
	font-size: calc(var(--h3-font-size) - 2px);
}
main.main .add-3 .grid {
	display: grid;
	grid-template: 1fr / 1fr 2fr 1fr;
	margin: 0 calc(10px / var(--main-ratio)) 0 calc(10px / var(--main-ratio));
	position: relative;
	z-index: 1;
}
main.main .add-3 .grid p {
	line-height: 1.2em;
	font-size: var(--font-low-size);
	color: var(--color-9);
	margin: 0;
	font-weight: 500;
}
main.main .add-3 .grid p:first-child {
	place-self: center start;
	text-align: left;
	font-size: var(--font-size);
}
main.main .add-3 .grid p:first-child > span {
	font-size: var(--h4-font-size);
	font-weight: 700;
}
main.main .add-3 .grid p:nth-child(2) {
	place-self: center center;
	text-align: center;
	background-color: var(--color-4);
	border-radius: calc(10px / var(--main-ratio));
	padding: calc(10px / var(--main-ratio));
	margin-bottom: calc(0px - (10px / var(--main-ratio)));
}
main.main .add-3 .grid p:nth-child(2) > span {
	font-size: var(--font-size);
	line-height: 1.2em;
}
main.main .add-3 .grid p:last-child {
	place-self: center end;
	text-align: right;
}
main.main .add-3 .photo {
	display: grid;
	grid-template: 1fr / 1fr;
	margin-bottom: calc(10px / var(--main-ratio));
}
main.main .add-3 .photo > .house {
--aspect-ratio: 70%;
	place-self: start stretch;
	grid-area: 1 / 1 / 2 / 2;
}
main.main .add-3 .photo > a.house > img {
	transition: transform var(--transition-duration) var(--transition-timing) 0s;
}
main.main .add-3 .photo > a.house:hover > img {
	transform: scale(1.1);
}
main.main .add-3 .photo > .icons {
	place-self: end stretch;
	grid-area: 1 / 1 / 2 / 2;
	z-index: 1;
	background-color: var(--color-a-2-5);
	padding: calc(5px / var(--main-ratio)) 0 calc(5px / var(--main-ratio)) 0;
}
main.main .add-3 .photo > .icons > div {
	padding: 0 calc(10px / var(--main-ratio)) 0 calc(10px / var(--main-ratio));
	text-align: center;
}
main.main .add-3 .photo > .icons img {
	width: 50%;
}
main.main .add-3 .photo > .icons p {
	font-size: calc(var(--font-low-size) - 3px);
	text-align: center;
	font-weight: 600;
	white-space: nowrap;
}
main.main .add-3 .photo > .icons p:first-child {
	margin-bottom: 1px;
	line-height: 0;
}
main.main .add-3 .scheme {
	padding: 0 calc(10px / var(--main-ratio)) 0 calc(10px / var(--main-ratio));
	place-self: center stretch;
}
main.main .add-3 .text {
	padding: calc(15px / var(--main-ratio)) calc(10px / var(--main-ratio)) calc(15px / var(--main-ratio)) calc(10px / var(--main-ratio));
	text-align: center;
	margin: 0;
	place-self: center stretch;
}
main.main .add-3 .button {
	margin: 0 calc(10px / var(--main-ratio)) calc(10px / var(--main-ratio)) calc(10px / var(--main-ratio));
}



main.main .add-5 .slider-container {
	grid-template-rows: var(--slider-ele-width);
}
main.main .add-5 .slider-ele {
	display: grid;
	place-items: center center;
	grid-template: 100% / 70%;
	place-content: center center;
}
main.main .add-5 img {
	max-width: 100%;
	max-height: 100%;
}



main.main .add-7 {
--icon-width: 60px;
	background-image: linear-gradient(rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), var(--url);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
main.main .add-7.line {
	border-bottom: solid calc(20px / var(--main-ratio)) var(--color-4);
}
main.main .add-7 .grid-main {
	place-items: end stretch;
}
main.main .add-7 .grid-main > * {
	position: relative;
	text-align: center;
}
main.main .add-7 .frame {
	background-color: var(--color-8);
	border-radius: 5px;
	box-shadow: 15px 15px 0 0 rgba(244,241,237,0.5);
}
main.main .add-7 .grid-main > div:first-child .frame {
	padding: 8% 10% 10% 10%;
}
main.main .add-7 .frame p {
	line-height: 1.4em;
}
main.main .add-7 .frame > * {
	margin-top: 0;
	text-align: center;
	margin-bottom: calc(30px / var(--main-ratio));
}
main.main .add-7 .frame > *:first-child {
	margin-bottom: calc(5px / var(--main-ratio));
}
main.main .add-7 .frame > *:last-child {
	margin-bottom: 0;
}
main.main .add-7 .photo > img {
	width: 40%;
}
main.main .add-7 .icon {
	position: absolute;
	top: calc(0px - ((120px / var(--main-ratio)) / 2));
	left: calc(50% - ((120px / var(--main-ratio)) / 2));
	background-color: var(--color-4);
	display: grid;
	grid-template: calc(120px / var(--main-ratio)) / calc(120px / var(--main-ratio));
	place-items: center center;
	border-radius: 100%;
	box-shadow: 4px 4px 4px 0 var(--color-a-4-1);
}
main.main .add-7 .icon > img {
	width: 60%;
}
main.main .add-7 .grid-main > div:last-child .frame {
	padding: calc(3% + ((120px / var(--main-ratio)) / 2)) 10% 10% 10%;
}
main.main .add-7 ul > li {
	text-align: left;
}
@media (min-width: 992px){
main.main .add-7.left .grid-main > *:first-child {
	grid-area: 1 / 1 / 2 / 2;
}
main.main .add-7.left .grid-main > *:last-child {
	grid-area: 1 / 2 / 2 / 3;
}
main.main .add-7.right .grid-main > *:first-child {
	grid-area: 1 / 2 / 2 / 3;
}
main.main .add-7.right .grid-main > *:last-child {
	grid-area: 1 / 1 / 2 / 2;
}
}



.house-head > .grid {
	display: grid;
	grid-template: var(--grid-template);
	place-items: stretch stretch;
	column-gap: 0px;
}
.house-head .photos .slider {
	display: grid;
	grid-template: 1fr / 1fr;
	place-content: stretch stretch;
}
.house-head .photos .content {
	place-self: stretch stretch;
	grid-area: 1 / 1 / 2 / 2;

}
.house-head .photos .slider-arrows {
	grid-area: 1 / 1 / 2 / 2;
	z-index: 1;
}
.house-head .photos .slider-arrow-l {
	place-self: center start;
	transform: rotate(180deg);
	margin-left: var(--margin);
}
.house-head .photos .slider-arrow-r {
	place-self: center end;
	margin-right: var(--margin);
}
.house-head .photos .slider-arrows .arrow {
	display: grid;
	place-items: center center;
	border-radius: 100%;
	background-color: var(--color-a-2-4);
	transition: background-color var(--transition-duration) var(--transition-timing) 0s, transform var(--transition-duration) var(--transition-timing) 0s;
}
.house-head .photos .s-1:hover .slider-arrows .arrow, .house-head .photos .s-2:hover .slider-arrows .arrow {
	background-color: var(--color-2);
}
.house-head .photos .s-1 .slider-arrows .arrow {
	grid-template: calc((var(--svg-arrow-h-w-height) * var(--svg-arrow-h-w-scale)) + (30px / var(--main-ratio))) / calc((var(--svg-arrow-h-w-height) * var(--svg-arrow-h-w-scale)) + (30px / var(--main-ratio)));
}
.house-head .photos .s-2 .slider-arrows .arrow {
	grid-template: calc((var(--svg-arrow-h-w-height) * var(--svg-arrow-h-w-scale)) + (20px / var(--main-ratio))) / calc((var(--svg-arrow-h-w-height) * var(--svg-arrow-h-w-scale)) + (20px / var(--main-ratio)));
}
.house-head .photos .slider-arrows .arrow.active:hover {
	background-color: var(--color-4);
}
.house-head .photos .slider-arrows .arrow > div > svg {
	stroke: var(--color-9);
}
.house-head .photos .slider-arrows .arrow.active:active {
	transform: scale(0.75);
}
.house-head .photos .slider-arrows .arrow.inactive {
	opacity: 0;
}
.house-head .photos .s-1 {
	margin-bottom: var(--margin);
}
.house-head .photos .s-1 img {
	cursor: zoom-in;
}
.house-head .photos .s-2 img {
	cursor: pointer;
}
.house-head .text {
	display: grid;
	grid-template: max-content max-content / 1fr;
	align-content: space-between;
	row-gap: calc(20px / var(--main-ratio));
}
.house-head .text > .top {
	place-self: start stretch;
}
.house-head .icons > div > * {
	text-align: center;
	line-height: 1.2em;
	font-size: calc(var(--font-low-size) - 1px);
	margin-bottom: calc(5px / var(--main-ratio));
	font-weight: 600;
}
.house-head .icons > div > *:last-child {
	margin-bottom: 0;
}
.house-head .icons img {
	width: 70%;
}
.house-head .icons p {
	white-space: nowrap;
}
.house-head .text > .bottom {
	place-self: end stretch;
	display: grid;
	grid-template: auto / 1fr 1fr;
	column-gap: calc(50px / var(--main-ratio));
	place-items: start stretch;
}
.house-head .text > .bottom > .toge {
	grid-column: 1 / 3;
}
.house-head .text > .bottom > * {
	line-height: 100%;
}
.house-head .text > .bottom > .e-1, .house-head .text > .bottom > .e-2 {
	margin-bottom: calc(15px / var(--main-ratio));
}
.house-head .text > .bottom > .e-1 {
	margin-left: calc(30px / var(--main-ratio));
}
.house-head .text > .bottom > .e-2 {
	margin-right: calc(30px / var(--main-ratio));
}
.house-head .text > .bottom > .e-1 > * {
	line-height: 100%;
	margin-bottom: calc(5px / var(--main-ratio));
	color: var(--color-9);
	text-align: left;
}
.house-head .text > .bottom > .e-2 > * {
	line-height: 100%;
	margin-bottom: calc(5px / var(--main-ratio));
	text-align: right;
}
.house-head .text > .bottom > .e-3, .house-head .text > .bottom > .e-4 {
	margin-bottom: calc(20px / var(--main-ratio));
}
@media (max-width: 575px){
.house-head .text > .bottom > .e-3, .house-head .text > .bottom > .e-4 {
	grid-column: 1 / 3;
}
}
.house-head .text > .bottom > .e-5 {
	margin-bottom: calc(5px / var(--main-ratio));
}
.house-head .text > .bottom > .e-6 {
	color: var(--color-9);
	margin-bottom: calc(5px / var(--main-ratio));
}
.house-head .text > .bottom *:last-child {
	margin-bottom: 0;
}
@media (min-width: 992px){
.house-head .photos .s-2 {
	margin-left: var(--margin);
}
.house-head .text {
	margin: calc(30px / var(--main-ratio)) var(--container-param-right) 0 var(--text-marg);
}
}
@media (max-width: 991px){
.house-head .photos .s-2 {
	margin: 0 var(--margin) 0 var(--margin);
}
.house-head .text {
	margin: calc(30px / var(--main-ratio)) var(--container-param-right) 0 var(--container-param-left);
}
.house-head .text > .top > *, .house-head .text > .bottom > .e-5, .house-head .text > .bottom > .e-6, .house-head .text > .bottom > .e-7 {
	text-align: center;
}
}

.ikonki > div > * {
	text-align: center;
	line-height: 1.2em;
	font-size: calc(var(--font-low-size) - 1px);
	margin-bottom: calc(5px / var(--main-ratio));
	font-weight: 600;
}
.ikonki > div > *:last-child {
	margin-bottom: 0;
}
.ikonki img {
	width: 50%;
}

.belka {
	text-align: center;
	background-color: var(--color-4);
	color: var(--color-2);
	font-size: calc(var(--font-size) - 2px);
	font-weight: 600;
	line-height: 1.2em;
	padding: 0.75em 1em 0.75em 1em;
	margin-bottom: 5px;
}

.table-grid {
	display: grid;
	column-gap: 5px;
	row-gap: 5px;
	place-items: start stretch;
}
.table-grid > .naglowek {
	background-color: var(--color-4);
	color: var(--color-2);
	font-size: calc(var(--font-size) - 2px);
	font-weight: 600;
	line-height: 1.2em;
	padding: 0.75em 1em 0.75em 1em !important;
}
.table-grid > .naglowek:first-of-type {
	text-align: left;
}
.table-grid > .naglowek:last-of-type {
	text-align: right;
}

.tabela-2 {
	width: 100%;
	font-size: calc(var(--font-size) - 3px);
	table-layout: auto;
}
.tabela-2 td {
	border: solid 5px var(--color-8);
	background-color: var(--color-9);
	padding: 0.75em 1em 0.75em 1em !important;
}
.tabela-2 td:first-child {
	border-left: none;
	text-align: left;
}
.tabela-2 td:last-child {
	border-right: none;
}
.tabela-2 td:first-child {
	width: 100%;
}
.tabela-2 tr:first-child td {
	border-top: none;
}
.tabela-2 tr:last-child td {
	border-bottom: none;
}
.tabela-2 td:last-child {
	white-space: nowrap;
	text-align: right;
}
.tabela-2 tr.naglowek td {
	background-color: var(--color-4);
	color: var(--color-2);
	font-size: calc(var(--font-size) - 2px);
	font-weight: 600;
}

@media (min-width: 576px){
.table-grid {
	grid-template: max-content max-content / 1fr 1fr;
}
.table-grid .tabela-2 td:first-child {
	width: 100%;
}
}

@media (max-width: 575px){
.table-grid {
	grid-template: max-content max-content max-content / calc(70% - 2.5px) calc(30% - 2.5px);
}
.table-grid > .tabela-2 {
	grid-column: 1 / 3;
}
.table-grid .tabela-2 td:first-child {
	width: 70%;
}
.table-grid .tabela-2 td:last-child {
	width: 30%;
}
}



@media (min-width: 992px) {
.spec-grid .stan {
	display: none;
}
.spec-grid > div {
	display: grid;
	grid-template: var(--grid-template);
	place-items: stretch stretch;
}
.spec-grid > div > div {
	padding: calc(20px / var(--main-ratio));
	border-left: solid 2px var(--color-4);
	border-bottom: solid 2px var(--color-4);
	display: grid;
	grid-template: 1fr / 1fr;
	place-items: center center;
}
.spec-grid > div > div:first-child {
	border-left: none;
}
.spec-grid > div.naglowek > div {
	place-items: end stretch;
	padding-top: 0;
}
.spec-grid > div.naglowek > div > * {
	text-align: center;
}
.spec-grid > div.naglowek > div:nth-child(2) > * {
	text-align: left;
}
.spec-grid > div.naglowek h6 {
	margin-bottom: 0px;
}
.spec-grid > div.naglowek p:first-child {
	line-height: 1.3em;
}
.spec-grid > div.cont > div:nth-child(2) {
	place-items: start stretch;
	grid-template: min-content min-content / 1fr;
}
.spec-grid > div.cont > div:nth-child(2) * {
	text-align: left;
}
.spec-grid > div.cont h6 {
	margin-bottom: 8px;
}
.spec-grid > div.cont ul {
	font-size: var(--font-low-size);
}
.spec-grid > div.cont li {
	margin-bottom: 0;
}
.spec-grid > div.cont li::marker {
	font-size: calc(var(--font-low-size) + 2px);
}
.spec-grid > div.cont img {
	width: 50%;
}
.spec-grid > div.cont > div:first-child > img {
	width: 100%;
}
.spec-grid > div.stopka > div {
	border-bottom: none;
	place-items: start stretch;
	padding-bottom: 0;
}
.spec-grid > div.stopka > div > * {
	text-align: center;
}
.spec-grid > div.stopka > div:first-child {
	grid-column: 1 / 3;
}
.spec-grid > div.stopka > div:first-child > * {
	text-align: right;
}
.spec-grid > div.stopka h6 {
	margin-bottom: 0px;
}
}

@media (max-width: 991px) {
.spec-grid .naglowek {
	display: none;
}
.spec-grid > div {
	display: grid;
	grid-template: max-content max-content min-content min-content / 1fr 1fr 1fr;
	place-items: start stretch;
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: solid 2px var(--color-4);
}
.spec-grid > div * {
	text-align: center;
	margin-bottom: 0;
}
.spec-grid > div.cont h6 {
	margin-bottom: 5px;
}
.spec-grid > div.cont ul {
	font-size: var(--font-low-size);
	list-style-position: inside;
}
.spec-grid > div.cont li::marker {
	font-size: calc(var(--font-low-size) + 2px);
}
.spec-grid > div.cont img {
	width: 20%;
}
.spec-grid > div.cont > div:first-child > img {
	width: 20%;
}
.spec-grid > div.cont > div:first-child {
	grid-area: 1 / 1 / 2 / 4;
	padding-bottom: 10px;
}
.spec-grid > div.cont > div:nth-child(2) {
	grid-area: 2 / 1 / 3 / 4;
	padding-bottom: 20px;
}
.spec-grid > div.cont > div.stan {
	grid-row: 3 / 4;
	padding-bottom: 10px;
}
.spec-grid > div > div.stan > p {
	line-height: 1.3em;
}
.spec-grid > div.stopka {
	grid-template: min-content min-content min-content / 1fr 1fr 1fr;
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.spec-grid > div.stopka > div:first-child {
	grid-area: 1 / 1 / 2 / 4;
	padding-bottom: 10px;
}
.spec-grid > div.stopka > div.stan {
	grid-row: 2 / 3;
	padding-bottom: 10px;
}
}

@media (max-width: 575px){
.spec-grid > div > div.stan > p {
	font-size: calc(var(--font-size) - 2px);
}
.spec-grid > div.cont img {
	width: 25%;
}
.spec-grid > div.cont > div:first-child > img {
	width: 20%;
}
}

.poznajmy.p1 {
	background-color: var(--color-10);
	margin: 0 0 0 0;
}
.poznajmy.p1 > div {
	padding: var(--space-low) 0 var(--space-low) 0;
}
.poznajmy a * {
	transition: color var(--transition-duration) var(--transition-timing) 0s;
}
.poznajmy a:hover * {
	color: var(--color-3);
}

.poznajmy {
	margin: calc(0px - var(--space-low)) 0 var(--space-big) 0;
}

ol.icon-list {
	margin-left: 0px;
	list-style-position: outside;
}
ol.icon-list > li {
	position: relative;
	margin-left: var(--margin);
	margin-bottom: 4em;
	text-align: left;
}
ol.icon-list > li::marker {
	color: var(--color-9);
}
ol.icon-list > li:last-child {
	margin-bottom: 0;
}
ol.icon-list > li > p:first-child {
	position: absolute;
	left: calc(0px - var(--margin));
	top: 0px;
	display: block;
	width: var(--width);
	z-index: 1;
	text-align: left;
}
ol.icon-list > li > h5 {
	font-weight: 700;
	color: var(--color-9);
	text-align: left;
}
ol.icon-list > li > ul > li {
	text-align: left;
}
ol.icon-list > li > ul {
	list-style-position: outside;
}


/* Konfigurator */
.konf-title {
	padding: 0.5em;
}
.konf-show-cena {
	display: block;
}
.konf-buttons {
	display: grid;
	grid-template: var(--buttons-grid);
	place-items: start stretch;
	justify-content: center;
	column-gap: calc(40px / var(--main-ratio));
	row-gap: calc(20px / var(--main-ratio));
}
.konf-buttons > .button {
	grid-template: auto / 1fr;
	grid-auto-flow: row;
	padding: 1em;
	row-gap: 0.5em;
	text-transform: none;
	cursor: pointer;
	color: var(--color-4);
	background-color: var(--color-10);
	white-space: normal;
	text-align: center;
}
.konf-buttons > .button:not(.active):hover {
	color: var(--color-4);
	background-color: var(--color-9);
}
.konf-buttons > .button.active {
	cursor: default;
	color: var(--color-9);
	background-color: var(--color-4);
}
.konf-buttons > .button > span:first-child {
	text-transform: uppercase;
}
.konf-buttons > .button > span:last-child {
	font-size: calc(var(--font-size) - 3px);
	font-weight: 500;
}
.konf-grid {
	position: relative;
}
.konf-cena-div {
	position: fixed;
	bottom: 30px;
	right: 0px;
	background-color: var(--color-4);
	color: var(--color-9);
	z-index: 3;
	display: grid;
	grid-template: 1fr / 1fr;
	border-left: calc(10px / var(--main-ratio)) solid var(--color-9);
	transition: bottom var(--transition-duration) var(--transition-timing) 0s;
}
.konf-cena-div.hidden {
	bottom: 2000px;
}
.konf-cena-opis {
	text-align: right;
	padding: 1em 1em 1em calc(((40px / var(--main-ratio)) / 2) + (5px / var(--main-ratio)));
	grid-area: 1 / 2 / 1 / 2;
	place-self: stretch stretch;
	max-width: 500px;
	overflow: hidden;
	transition: max-width var(--transition-duration) var(--transition-timing) 0s;
}
.konf-cena-opis > * {
	margin-bottom: 0;
	text-align: right;
	white-space: nowrap;
}
.konf-cena-opis > p {
	font-size: calc(var(--font-size) - 2px);
	line-height: 100%;
}
.konf-cena-opis > h3 {
	font-weight: 700;
}
.konf-cena-ster {
	background-color: var(--color-9);
	grid-area: 1 / 2 / 1 / 2;
	z-index: 1;
	place-self: center start;
	display: grid;
	grid-template: calc(40px / var(--main-ratio)) / calc(40px / var(--main-ratio));
	place-items: center center;
	border-radius: 100%;
	position: relative;
	left: calc(0px - ((40px / var(--main-ratio)) / 2));
	cursor: pointer;
	box-shadow: 0px 0px 5px 0px var(--color-a-1-5);
}
.konf-cena-ster img {
	width: 30%;
	transition: transform var(--transition-duration) var(--transition-timing) 0s;
}
.konf-cena-div.close .konf-cena-ster img {
	transform: rotate(180deg);
}
.konf-cena-div.close .konf-cena-opis {
	max-width: 0px;
	padding: 1em 0 1em 0;
}
.konf-grid {
	display: grid;
	grid-template: var(--konf-grid);
	place-items: start stretch;
	column-gap: calc(40px / var(--main-ratio));
	row-gap: calc(40px / var(--main-ratio));
}
.konf-element {
	box-shadow: 0px 0px 10px 0px var(--color-a-1-2);
	padding: calc(30px / var(--main-ratio));
	background-color: var(--color-2);
	position: relative;
	display: grid;
	grid-template: 1fr / 1fr;
	place-items: stretch stretch;
}
.konf-element > div:not(.konf-spec-ster) {
	position: relative;
	grid-area: 1 / 1 / 2 / 2;
	transition: max-height var(--transition-duration) var(--transition-timing) 0s;
	overflow: hidden;
	max-height: 5000px;
	background-color: var(--color-2);
}
.konf-element > div.hidden {
	max-height: 0px;
}
.konf-element > div > h5 {
	font-weight: 700;
	border-bottom: 3px solid var(--color-9);
	padding-bottom: 0.5em;
	text-align: left;
}
.konf-spec > div > div {
	display: grid;
	grid-template: min-content min-content / calc(30px / var(--main-ratio)) 1fr;
	column-gap: calc(10px / var(--main-ratio));
	row-gap: calc(3px / var(--main-ratio));
	place-items: start start;
	border-bottom: 1px solid var(--color-10);
	padding-bottom: 0.8em;
	margin-bottom: 0.8em;
}

.konf-spec > div > div.info {
	grid-template: min-content min-content / calc(30px / var(--main-ratio)) 1fr min-content;
}

.konf-spec > div > div:last-child {
	padding-bottom: 0;
	margin-bottom: 0.2em;
	border-bottom: none;
}
.konf-spec > div > div > div {
	background-color: var(--color-10);
	width: calc(30px / var(--main-ratio));
	height: calc(30px / var(--main-ratio));
	border-radius: calc(10px / var(--main-ratio));
	position: relative;
	grid-area: 1 / 1 / 3 / 2;
}
.konf-spec > div > div > div > img {
	position: absolute;
	left: calc(5px / var(--main-ratio));
	top: 0px;
}
.konf-spec > div > div > * {
	margin-bottom: 0;
	text-align: left;
}
.konf-spec > div > div > h6 {
	font-weight: 600;
	line-height: 1.2em;
	font-size: calc(var(--font-size) - 2px);
	grid-area: 1 / 2 / 2 / 3;
}
.konf-spec > div > div > p {
	font-size: calc(var(--font-size) - 3px);
	color: var(--color-11);
	line-height: 1.2em;
	grid-area: 2 / 2 / 3 / 3;
}
.konf-spec > div > div > span {
	grid-area: 1 / 3 / 3 / 4;
}
@media (max-width: 991px){
.konf-spec-content {
	overflow: hidden;
	max-height: 5000px;
	transition: max-height var(--transition-duration) var(--transition-timing) 0s;
}
.konf-spec-content.hidden {
	max-height: 0px;
}
}
.konf-spec-ster {
	position: absolute;
	left: calc(50% - ((40px / var(--main-ratio)) / 2));
	bottom: calc(0px - ((40px / var(--main-ratio)) / 2));
	width: calc(40px / var(--main-ratio));
	height: calc(40px / var(--main-ratio));
	background-color: var(--color-9);
	z-index: 1;
	place-self: center start;
	display: grid;
	grid-template: calc(40px / var(--main-ratio)) / calc(40px / var(--main-ratio));
	place-items: center center;
	border-radius: 100%;
	cursor: pointer;
	box-shadow: 0px 0px 5px 0px var(--color-a-1-5);
}
.konf-spec-ster img {
	width: 40%;
	transition: transform var(--transition-duration) var(--transition-timing) 0s;
}
.konf-spec-ster.open img {
	transform: rotate(180deg);
}
@media (min-width: 992px){
.konf-spec-ster {
	display: none;
}
}
.konf-opcje .opcja {
	border-bottom: 1px solid var(--color-10);
	padding-bottom: 1em;
	margin-bottom: 1em;
}
.konf-opcje .opcja:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
.konf-opcje .opcja > h6 {
	font-weight: 700;
	line-height: 1.2em;
	font-size: var(--font-size);
	background-color: var(--color-8);
	padding: 0.5em;
	border-left: 5px solid var(--color-9);
	text-align: left;
}
.konf-opcje .opcja > div {
	display: grid;
	grid-template: 1fr / calc(30px / var(--main-ratio)) 1fr min-content;
	place-items: center start;
	column-gap: calc(10px / var(--main-ratio));
	row-gap: calc(3px / var(--main-ratio));
	margin-bottom: 0.5em;
}
.konf-opcje .opcja > div:last-child {
	margin-bottom: 0;
}
.konf-opcje .opcja > div.info {
	grid-template: auto / calc(30px / var(--main-ratio)) 1fr min-content min-content;
}
.konf-opcje .opcja > div > p {
	white-space: nowrap;
	place-self: center end;
	text-align: right;
	line-height: 1.2em;
	font-size: calc(var(--font-size) - 2px);
	font-weight: 700;
	color: var(--color-7);
	margin-bottom: 0;
}
.konf-opcje .opcja > div > p > span {
	font-weight: 400;
	color: var(--color-11);
}
.konf-opcje .opcja .custom-radio {
	grid-template: auto / calc(30px / var(--main-ratio));
}
.konf-opcje .opis > * {
	text-align: left;
	margin-bottom: 0;
}
.konf-opcje .opis label {
	line-height: 1.2em;
	font-size: calc(var(--font-size) - 2px);
	cursor: pointer;
	font-weight: 600;
}
.konf-opcje .opis p {
	font-size: calc(var(--font-size) - 3px);
	color: var(--color-11);
	line-height: 1.2em;
	cursor: default;
}
.konf-opcje .opcja > div > .info-button {
	place-self: center center;
}
.konf-podsumowanie {
	background-color: var(--color-10);
	box-shadow: 0px 0px 10px 0px var(--color-a-1-2);
	padding: calc(30px / var(--main-ratio));
}
.konf-podsumowanie > h4 {
	font-weight: 700;
	border-bottom: 3px solid var(--color-9);
	padding-bottom: 0.5em;
}
.konf-podsumowanie-grid > div {
	display: grid;
	grid-template: 1fr / 1fr max-content;
	place-items: start start;
	border-bottom: 1px solid var(--color-9);
	padding-bottom: 0.8em;
	margin-bottom: 0.8em;
	position: relative;
	overflow: hidden;
	max-height: 300px;
	transition: all var(--transition-duration) var(--transition-timing) 0s;
	column-gap: calc(20px / var(--main-ratio));
}
.konf-podsumowanie-grid > div.close {
	max-height: 0px;
	border-bottom: none;
	padding-bottom: 0em;
	margin-bottom: 0em;
}
.konf-podsumowanie-grid > div:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
.konf-podsumowanie-grid > div > * {
	margin-bottom: 0;
}
.konf-podsumowanie-grid > div > *:first-child {
	text-align: left;
}
.konf-podsumowanie-grid > div > *:last-child {
	text-align: right;
}
.konf-podsumowanie-grid > div:first-child > * {
	font-weight: 600;
}
.konf-podsumowanie-grid > div:first-child > h6 > b {
	font-weight: 700;
	text-transform: uppercase;
}
.konf-podsumowanie-grid > div > p:first-child > span {
	font-weight: 700;
	color: var(--color-4);
	padding-right: 1em;
}
.konf-podsumowanie .konf-suma {
	display: grid;
	grid-template: 1fr / 1fr max-content;
	place-items: center start;
	background-color: var(--color-9);
	margin: 1em calc(0px - (30px / var(--main-ratio))) calc(0px - (30px / var(--main-ratio))) calc(0px - (30px / var(--main-ratio)));
	padding: 0.5em calc(30px / var(--main-ratio)) 0.3em calc(30px / var(--main-ratio));
}
.konf-podsumowanie .konf-suma > * {
	margin-bottom: 0;
	color: var(--color-2);
}
.konf-podsumowanie .konf-suma > *:first-child {
	text-align: left;
}
.konf-podsumowanie .konf-suma > *:last-child {
	text-align: right;
}
.konf-podsumowanie .konf-suma > h6 {
	font-weight: 600;
}
.konf-podsumowanie .konf-suma > h2 {
	font-weight: 700;
}
.konf-podsumowanie .konf-suma > h2 > span {
	font-weight: 400;
	font-size: var(--font-size);
}