vidok.com/layout/style-scss/style.scss

// out: ../style-css/style.css, compress: true, sourceMap: true
@import 'variables';
@import '_mixins';

body {
	font-family: $font1;
	color: $cGrayText;

	&.nowebp {
		.inspiration {
			background-image: url('/upload/filemanager/images/home/vidok-zainspiruj-sie.jpg');
		}
	}

	.alert {
		border-radius: 0;
		top: 50px;
		font-size: 15px;

		&.alert-success {
			background: $cGrayDarkBg;
			color: #fff;
			border: 0;
		}
	}
}

a {
	transition: all 0.3s ease;

	&:hover {
		text-decoration: none;
	}

	@extend .text;
	font-weight: 600;
}

.hidden-above-xs {
	@include respond-above(xs) {
		display: none !important;
	}
}

.hidden-below-xs {
	@include respond-below(xs) {
		display: none !important;
	}
}

@mixin btn_classic($f_size, $color, $h_color, $bg, $h_bg) {
	text-align: center;
	font-size: $f_size;
	font-weight: 700;
	font-family: $font2;
	color: $color;
	background: $bg;
	text-transform: uppercase;
	line-height: 22px;
	padding: 12px 15px;
	display: inline-block;
	min-width: 210px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;

	&:hover {
		background: $h_bg;
		color: $h_color !important;
	}
}

.btn_t1 {
	@include btn_classic(14px, $cGrayText, $cWhite, $cWhite, $cGrayDarkBg);
}

.btn_t2 {
	@include btn_classic(14px, $cWhite, $cGrayText, $cGrayText, $cGrayBg);
}

.btn_t3 {
	@include btn_classic(14px, $cBlack, $cBlack, $cYellow, $cYellow);
	font-weight: 600;
	line-height: 130%;
	letter-spacing: 1.47px;
	font-family: 'URW Form', sans-serif;
	padding: 20px 40px 15px;
}

.btn1 {
	font-size: 14px;
	color: #fff;

	border: solid 1px $cYellow;
	line-height: 30px;

	padding: 5px 10px;
	display: inline-block;

	cursor: pointer;

	&:hover {
		color: #fff;
	}
}

.btn2 {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	font-family: $font2;
	color: $cGrayText;
	background: #fff;
	text-transform: uppercase;
	line-height: 22px;
	padding: 12px 15px;
	display: inline-block;
	border-radius: 0px;
	border: 2px solid $cGrayText;
	min-width: 210px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;

	&:before,
	&:after {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		background-color: #ebebeb;
	}

	&:before {
		left: -115%;
	}

	&:after {
		right: -115%;
	}

	&:hover {
		background: $cGrayText;
		color: #fff;

		&:before {
			animation: btn2-animation-left 1s linear 1;
		}

		&:after {
			animation: btn2-animation-right 1s linear 1;
		}
	}
}

.btn3 {
	background-color: rgb(148, 148, 148);
	color: #fff;
	transition: all 0.3s;
	font-weight: 400;
	padding: 8px 12px;
	font-family: $font2;
	font-size: 14px;
}

.btn4 {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	font-family: $font2;
	color: $cGrayText;
	background: transparent;
	text-transform: uppercase;
	line-height: 22px;
	padding: 12px 15px;
	display: inline-block;
	border-radius: 0px;
	border: 2px solid $cGrayText;
	min-width: 210px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;

	&:hover {
		background: $cGrayText;
		color: #fff !important;
	}
}

.btn5 {
	@extend .btn4;
	display: flex;

	justify-content: space-between;
	align-items: center;
	font-size: 14px;

	img {
		width: 79px !important;
		transition: all 0.3s ease;
		margin-left: 10px;
		margin-bottom: 4px;
		display: block;

		@include respond-between(md, lg) {
			width: 72px !important;
		}
	}

	&:hover {
		img {
			filter: invert(100%);
			transform: translatex(8px);
		}
	}
}

@keyframes btn2-animation-left {
	0% {
		transform: skew(-45deg) translateX(65%);
	}

	100% {
		transform: skew(-45deg) translateX(0);
	}
}

@keyframes btn2-animation-right {
	0% {
		transform: skew(-45deg) translateX(-65%);
	}

	100% {
		transform: skew(-45deg) translateX(0);
	}
}

.btn7 {
	@extend .text;
	background: $cYellow;
	padding: 6px 15px;

	display: inline-block;
	border-radius: 5px;
	transition: all 0.3s;

	&:hover {
		color: $cYellow;
		background: $cBlackText;
	}
}

.btn8 {
	@extend .btn4;
	border-color: $cGrayLightText;

	&:hover {
		color: $cBlackText !important;
		background: $cGrayLightText;
	}
}

.article-box {
	.text {
		table {
			margin-top: 10px;
			margin-bottom: 10px;

			tbody {
				tr {
					&:nth-child(odd) {
						td {
							background: $cGrayLightBg;
						}
					}

					td {
						padding: 10px;
					}
				}
			}
		}
	}
}

.gold-bg-text {
	font-size: 25px;
	margin-top: 7px;
	display: inline-block;
	margin-bottom: 15px;
	padding: 5px;
	color: #fff;
	background: linear-gradient(-183deg, #ceb167 0%, #906a25 100%);
}

.black-bg-text {
	@extend .gold-bg-text;
	color: #fff;
	background: $cBlackText;
}

.table-1 {
	width: auto;
	margin-left: auto;
	margin-right: auto;

	tbody {
		tr {
			&:first-child {
				td {
					border-top: none;
				}
			}

			td {
				vertical-align: middle;
				font-size: 11px;
				line-height: 21px;
				font-weight: 400;
				font-family: $font1;
				padding: 10px 5px 5px;

				img {
					margin-bottom: 0;
				}
			}
		}
	}
}

.text,
p {
	font-size: 14px;
	font-weight: 400;
	font-family: $font1;
	color: $cGrayText;
}

.title {
	color: $cBlackText;
	font-size: 30px;
	font-weight: 400;

	b,
	strong {
		font-weight: 700;
	}

	@include respond-below(xs) {
		font-size: 25px;
	}
}

.title2 {
	font-style: normal;
	font-weight: 600;
	font-size: 40px;
	line-height: 45px;
	color: $cBlackText;
	margin-bottom: 30px;
	display: inline-block;

	@include respond-below(xs) {
		font-size: 28px;
		line-height: 40px;
	}

	span {
		display: inline-block;
		font-style: normal;
		font-weight: 300;
		font-size: 20px;
		line-height: 27px;
		letter-spacing: 0.055em;
		text-transform: uppercase;
		color: $cBlackText;

		padding-bottom: 10px;
	}

	position: relative;

	&:before {
		position: absolute;
		content: '';
		width: 100%;
		left: 0;
		bottom: -10px;
		height: 2px;
		max-width: 100px;
		background: $cBlackText;
	}
}

.title-big {
	font-size: 36px;
	font-weight: 400;
	color: $cBlackText;
	line-height: 46px;
	font-family: $font2;
	margin-bottom: 0;

	@include respond-below(xs) {
		font-size: 30px;
	}
}

.subtitle-big {
	font-size: 24px;
	color: $cBlackText;
	font-weight: 400;
	line-height: 28px;
	font-family: $font2;

	@include respond-below(xs) {
		font-size: 17px;
	}
}

.title50 {
	font-size: 50px;
	font-weight: 600;
	line-height: 46px;
	color: $cBlackText;
	position: relative;
	margin-bottom: 40px;

	@include respond-between(xs, sm) {
		font-size: 44px;
	}

	&:before {
		position: absolute;
		content: '';
		bottom: -20px;
		left: 0;
		width: 300px;
		height: 2px;
		background: $cBlackText;

		@include respond-below(sm) {
			width: 200px;
		}
	}
}

.btn6 {
	@extend .title;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: left;
	border-bottom: 1px solid $cBlackText;
	transition: all 0.3s ease;

	display: inline-block;

	&:hover {
		border-bottom: none;
		color: #ceb167;
		transform: translateY(-2px);
	}
}

.top-content {
	margin-top: -40px;
}

.gold {
	color: #b3993f;
}

.color-gray {
	color: #d3d3d3;
}

.gray-bg {
	background: $cGrayLightBg;
}

.top-margin {
	margin-top: 100px;

	@include respond-below(xs) {
		margin-top: 80px;
	}
}

.bottom-margin {
	margin-bottom: 100px;

	@include respond-below(xs) {
		margin-bottom: 80px;
	}
}

.top-bottom-margin {
	margin-top: 100px;
	margin-bottom: 100px;

	@include respond-below(xs) {
		margin-top: 80px;
		margin-bottom: 80px;
	}
}

.top-bottom-margin200 {
	margin-top: 200px;
	margin-bottom: 200px;

	@include respond-below(lg) {
		margin-top: 150px;
		margin-bottom: 150px;
	}

	@include respond-below(xs) {
		margin-top: 100px;
		margin-bottom: 100px;
	}
}

.top-margin200 {
	margin-top: 200px;

	@include respond-below(lg) {
		margin-top: 100px;
	}
}

.bottom-margin200 {
	margin-bottom: 200px;

	@include respond-below(lg) {
		margin-bottom: 100px;
	}
}

.top-bottom-padding {
	padding-top: 100px;
	padding-bottom: 100px;

	@include respond-below(xs) {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

.top-padding {
	padding-top: 100px;

	@include respond-below(xs) {
		padding-top: 80px;
	}
}

.bottom-padding {
	padding-bottom: 100px;

	@include respond-below(xs) {
		padding-bottom: 80px;
	}
}

.left-right-margin {
	margin-left: 150px;
	margin-right: 150px;

	@include respond-between(xs, sm) {
		margin-left: 50px;
		margin-right: 50px;
	}

	@include respond-below(xs) {
		margin-left: 0px;
		margin-right: 0px;
	}
}

.container {
	@include respond-above(lg) {
		max-width: 1300px;
	}
}

#main-menu {
	@include respond-below(md) {
		position: absolute;
		top: 110px;
		left: 0;
		right: 0;
		height: 0;
		overflow: hidden;
		// height: 100%;
		// width: 100%;
		// position: fixed;
		// z-index: 10;
		// background: #fff;
		// display: none;
		// width: 100%;
		// height: 100%;
		// left: 0;
		// right: 0;
		// top: 0;
		// bottom: 0;
		transition: all 250ms ease-in-out;

		&.visible {
			// @include flexbox;
			height: calc(100dvh - 110px) !important;
			overflow: auto;
		}
	}

	div[id^='menu-container-'] {
		@include respond-below(md) {
			position: relative;
			width: 100%;
			border-bottom: 1px solid #3f3f3f;
			padding: 20px 0;
			@include flexbox;
			@include align-items(center);
			@include justify-content(center);

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				background: rgba(255, 255, 255, 0.5);
				backdrop-filter: blur(10px);
			}
		}

		> ul {
			margin: 0;
			padding: 0;
			list-style-type: none;

			@include respond-above(md) {
				@include flexbox;
			}

			@include respond-below(md) {
				width: 100%;
				text-align: center;
			}

			> li {
				position: relative;

				&:first-child {
					display: none;
				}

				&:hover {
					> a {
						color: #1d1d1e;

						@include respond-below(sm) {
							color: $cBlackText;
							font-weight: 700;
						}
					}
				}

				> a {
					display: block;
					color: #1d1d1e;
					font-weight: 700;
					text-transform: uppercase;

					@include respond-above(lg) {
						// padding: 20px 8px;
						padding: 0px 20px;
						font-size: 15px;
					}

					@include respond-between(md, lg) {
						// padding: 20px 5px;
						padding: 0px 15px;
						font-size: 13px;
					}

					@include respond-between(sm, md) {
						// padding: 20px 6px;
						font-size: 14px;
					}

					@include respond-below(md) {
						padding: 5px;
						font-size: 17px;
					}

					i {
						margin-left: 7px;
						// @include respond-below(sm) {
						// 	margin-left: 10px;
						// }
					}
				}

				&.parent {
					> a {
						@include respond-above(md) {
							pointer-events: none;

							// i {
							// 	display: none;
							// }
						}
					}
				}

				&#link-8 {
					&.parent {
						> a {
							@include respond-above(md) {
								// i {
								// 	display: none;
								// }
							}
						}
					}
				}

				ul {
					position: absolute;
					display: none;

					@include respond-above(md) {
						background: #fff;
						padding-inline-start: 0;
						list-style-type: none;
						box-shadow: 0 0 1px 0 #c0c0c0;
					}

					@include respond-below(md) {
						position: static;

						@include respond-below(md) {
							padding-top: 5px;
							padding-bottom: 5px;
						}
					}

					li {
						a {
							white-space: nowrap;
							color: $cGrayText;
							font-size: 12px;
							font-weight: 400;
							padding: 5px 20px;
							display: block;

							&:hover {
								@include respond-above(md) {
									color: #fff;
									background: #000;
								}
							}

							@include respond-below(md) {
								font-size: 15px;
								padding: 0;
							}
						}
					}
				}

				@include respond-above(md) {
					&:hover {
						ul {
							display: block;
						}
					}
				}

				&.active {
					ul {
						display: block;

						@include respond-below(md) {
							list-style-type: none;
							padding-inline-start: 0;
						}
					}
				}
			}

			// #link-5 {
			// 	display: none;
			// }
		}
	}
}

#main-menu-btn {
	position: relative;
	height: 20px;
	width: 33px;
	// position: fixed;
	// bottom: 10px;
	// right: 10px;
	// color: #fff;
	// background: #000;
	display: none;
	z-index: 9999;
	// line-height: 50px;
	// text-align: center;
	// font-size: 25px;
	cursor: pointer;
	// @include border-radius(50%);
	overflow: hidden;

	&.active {
		&::before {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(45deg);
		}
		&::after {
			bottom: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(-45deg);
		}

		span.line {
			transform: translateX(calc(100% + 2px));
		}
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: #000;
		transition: all 250ms ease-in-out;
	}
	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: #000;
		transition: all 250ms ease-in-out;
	}

	span.line {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 1px;
		background: #000;
		transition: all 250ms ease-in-out;
	}

	@include respond-below(md) {
		display: block;
	}
}

.nav-tabs-style {
	margin-top: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: none;

	@include respond-below(xs) {
		justify-content: space-around;
	}

	li {
		&:not(:last-child) {
			margin-right: 30px;

			@include respond-below(sm) {
				margin-right: 2px;
			}
		}

		margin-bottom: 20px;

		a {
			font-size: 27px;
			font-weight: 700;
			text-transform: uppercase;
			color: $cBlackText;

			padding: 63px 10px 30px 10px;
			display: block;
			border: 1px solid $cBlackText;
			position: relative;
			text-align: center;

			@include respond-between(xs, lg) {
				font-size: 20px;
			}

			@include respond-below(xs) {
				min-width: 264px;
				font-size: 22px;
			}

			&:before {
				position: absolute;
				content: 'MODEL';
				top: 32px;
				left: calc(50% - 35px);
				font-size: 20px;
				font-weight: 400;
				z-index: -1;
			}

			&.show {
				@include respond-above(xs) {
					padding: 63px 40px 30px 40px;
				}

				@include respond-below(xs) {
					background: $cBlackText;
					color: #fff;
					opacity: 0.95;

					&:before {
						color: #fff;
					}
				}
			}
		}
	}
}

.header-container {
	background: $cGrayDarkBg;
	transition: 0.3s all ease;

	&.top-scroll {
		background-color: rgba(35, 35, 35, 0.7);
	}

	.header {
		min-height: 59px;
		transition: 0.3s all ease;

		> .container {
			> .row {
				@include respond-below(sm) {
					height: 60px;
				}

				> div[class^='col-']:nth-child(2) {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					@include respond-between(md, lg) {
						padding-left: 0;
						padding-right: 0;
					}

					@include respond-between(sm, md) {
						padding-left: 0;
						padding-right: 0;
					}

					@include respond-between(xs, sm) {
						padding-right: 0;
					}

					@include respond-below(xs) {
						padding-left: 0;
					}

					a {
						&.btn1 {
							@include respond-between(md, lg) {
								font-size: 12px;
							}

							@include respond-between(sm, md) {
								display: none;
							}
						}
					}

					> img {
						@include respond-above(lg) {
							width: 145px;
							height: 38px;
						}

						@include respond-between(md, lg) {
							width: 88px;
						}

						@include respond-between(xs, md) {
							display: none;
						}

						@include respond-below(xs) {
							display: none;
						}
					}
				}
			}
		}

		.logo-container {
			perspective: 600px;

			.box-logo {
				position: relative;
				transform-style: preserve-3d;
				width: 100%;
				height: 100%;

				.logo-front {
					position: absolute;
					top: 0;
					left: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 61px;
					backface-visibility: hidden;
					-webkit-backface-visibility: hidden;
					-moz-animation: logo-front 4s linear infinite alternate;
					-webkit-animation: logo-front 4s linear infinite alternate;
					-ms-animation: none;

					img {
						width: 63px;
						height: 39px;
					}
				}

				.logo-back {
					position: absolute;
					top: 0;
					left: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 61px;
					backface-visibility: hidden;
					-webkit-backface-visibility: hidden;

					transform: rotateY(180deg);
					-moz-animation: logo-back 4s linear infinite alternate;
					-webkit-animation: logo-back 4s linear infinite alternate;
					-ms-animation: none;

					img {
						width: 109px;
						height: 39px;
					}
				}
			}
		}
	}
}

@keyframes logo-back {
	0% {
		transform: rotateY(180deg);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	40% {
		transform: rotateY(180deg);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	61% {
		transform: rotateY(0);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	100% {
		transform: rotateY(0);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
}

@keyframes logo-front {
	0% {
		transform: rotateY(0);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	40% {
		transform: rotateY(0);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	61% {
		transform: rotateY(180deg);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	100% {
		transform: rotateY(180deg);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
}

.lang-change {
	position: relative;
	margin-right: 10px;
	cursor: pointer;

	@include respond-between(sm, md) {
		margin-right: 0px;
		margin-left: 10px;
	}

	.over {
		font-size: 12px;
		color: #1d1d1e;
		font-family: $font3;
		font-weight: 800;
		text-transform: uppercase;

		img {
			width: 10px;
			height: 10px;
			filter: invert(100%);
		}

		i {
			padding-left: 8px;
		}
	}

	ul {
		display: none;
		position: absolute;
		padding-inline-start: 0;
		list-style-type: none;
		border-radius: 5px;
		background: #fff;
		border: 0.5px solid #d8d8d8;
		box-shadow: 0 4px 4px #e9e3de;
		padding: 4px 0;

		min-width: max-content;
		right: 0;

		li {
			a {
				font-size: 12px;
				color: $cGrayText;
				padding: 5px;
				margin: 2px 5px;
				border-radius: 3px;
				display: block;
				transition: all 250ms ease-in-out;

				&:hover {
					background: $cYellow;
				}
			}
		}
	}

	&.open {
		ul {
			display: block;
		}
	}
}

#scontainer-1 {
	a {
		img {
			width: 16px;
			height: 16px;
			margin: 0 10px;

			@include respond-between(md, lg) {
				margin: 0 5px;
			}

			@include respond-between(sm, md) {
				display: none;
			}

			@include respond-below(xs) {
				display: none;
			}
		}

		&:first-child {
			img {
				width: 25px;
				height: 25px;
				margin-right: 0;

				@include respond-between(md, lg) {
					width: 23px;
					height: 23px;
				}
			}
		}

		&:last-child {
			img {
				width: 16px;
				height: 16px;

				@include respond-between(md, lg) {
					width: 14px;
					height: 14px;
					margin-left: 0;
				}
			}
		}
	}
}

.search {
	line-height: 0;
	margin-left: 10px;

	@include respond-below(xs) {
		margin-left: 10px;
		margin-right: 10px;
	}

	img {
		width: 20px;
		height: 20px;
	}
}

.search-box {
	height: 0;
	transition: all 0.3s ease;
	overflow: hidden;

	.search-box-wrapper {
		margin-top: 25px;
		background: $cGrayDarkBg;
	}

	.search-close {
		margin-left: 10px;
	}

	.input-group {
		display: flex;
		align-items: center;

		.input-group-prepend {
			.input-group-text {
				padding: 0;
				border: none;
				background: transparent;

				img {
					width: 13px;
					height: 13px;
				}
			}
		}
	}

	#search-input {
		background: transparent;
		border: none;
		font-size: 14px;
		color: #fff;

		&:focus {
			box-shadow: none;
		}
	}

	&.search-open {
		// height: 43px;
		height: 61px;
	}
}

.banner-container {
	// margin-top: 60px;

	.banner.mobile {
		display: block;

		@include respond-above(xs) {
			display: none !important;
		}
	}

	.banner.desktop {
		display: none;

		@include respond-above(lg) {
			display: block;
		}
	}

	.banner.tablet {
		display: none;

		@include respond-above(xs) {
			display: block;
		}

		@include respond-above(md) {
			display: none;
		}
	}

	.banner.laptop {
		display: none;

		@include respond-above(md) {
			display: block;
		}

		@include respond-above(lg) {
			display: none;
		}
	}

	.banner {
		.slick-prev,
		.slick-next {
			background: rgba(0, 0, 0, 0.5);
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}

		.slick-prev {
			left: 25px;
			z-index: 5;

			&:before {
				content: url(/upload/filemanager/icon/left-white.svg);
			}
		}

		.slick-next {
			right: 25px;
			z-index: 5;

			&:before {
				content: url(/upload/filemanager/icon/right-white.svg);
			}
		}
	}
}

#scontainer-3 {
	h1 {
		@extend .title;
		text-align: center;
		margin-bottom: 50px;
		margin-top: 30px;
	}
}

.image-link-container {
	@extend .bottom-margin;

	.container {
		> .row {
			> div[class^='col-'] {
				&:first-child {
					@include respond-below(sm) {
						margin-bottom: 30px;
					}
				}
			}
		}
	}

	div[class^='col-'] {
		div[class^='col-'] {
			&:nth-child(1),
			&:nth-child(2) {
				margin-bottom: 30px;
			}

			@include respond-below(xs) {
				&:not(:last-child) {
					margin-bottom: 30px;
				}
			}
		}
	}

	.link-img {
		position: relative;

		.dark-bg {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0);
			transition: all 0.7s ease;
		}

		h2 {
			position: absolute;
			bottom: 0;
			left: 30px;
			font-size: 80px;
			line-height: 90px;
			color: $cGrayDarkBg;
			text-transform: uppercase;
			font-family: $font2;
			font-weight: 400;
			margin-bottom: 10px;
			transition: all 0.7s ease;

			@include respond-between(sm, md) {
				left: 20px;
				font-size: 60px;
				line-height: 60px;
			}

			@include respond-below(xs) {
				position: absolute;
				bottom: 0;
				left: 15px;
				font-size: 36px;
				line-height: 36px;
				margin-bottom: 5px;
			}
		}

		&:hover {
			.dark-bg {
				background: rgba(0, 0, 0, 0.4);
			}

			h2 {
				font-size: 100px;
				color: #fff;
			}
		}
	}

	.link-img-small {
		position: relative;

		.dark-bg {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0);
			transition: all 0.7s ease;
		}

		h2 {
			position: absolute;
			bottom: 0;
			left: 30px;
			font-size: 26px;
			line-height: 30px;
			color: $cGrayDarkBg;
			text-transform: uppercase;
			font-family: $font2;
			font-weight: 400;
			margin-bottom: 16px;
			transition: all 0.7s ease;

			@include respond-between(sm, md) {
				left: 12px;
				font-size: 24px;
				margin-bottom: 5px;
			}

			@include respond-below(xs) {
				position: absolute;
				bottom: 0;
				left: 15px;
				font-size: 36px;
				line-height: 36px;

				margin-bottom: 5px;
			}

			&.white {
				color: #fff;
			}
		}

		&:hover {
			.dark-bg {
				background: rgba(0, 0, 0, 0.4);
			}

			h2 {
				font-size: 39px;
				color: #fff;
			}
		}
	}
}

#scontainer-4 {
	h4,
	h2 {
		font-family: $font2;
		text-transform: uppercase;
	}

	h4 {
		font-size: 24px;
		color: $cGrayLightText;
		font-weight: 400;
		line-height: 28px;
		margin-bottom: 0;
	}

	h2 {
		font-size: 36px;
		font-weight: 400;
		color: $cBlackText;
		line-height: 46px;
		margin-bottom: 15px;
	}

	.row {
		&:nth-child(2) {
			div[class^='col-'] {
				> div {
					background: $cGrayBg;
					padding: 100px 50px 90px;

					@include respond-above(md) {
						min-height: 497px;
					}

					@include respond-below(md) {
						margin-bottom: 30px;
					}

					@include respond-below(xs) {
						padding: 50px 28px 50px;
					}

					img {
						margin-bottom: 25px;
						width: 83px;
						height: 83px;
					}

					h4 {
						color: $cBlackText;
						margin-bottom: 25px;
					}

					p {
						font-size: 14px;
						font-weight: 400;

						b,
						strong {
							font-weight: 700;
						}
					}
				}

				&:last-child {
					> div {
						margin-bottom: 0;
					}
				}
			}
		}
	}
}

#scontainer-5 {
	margin-top: 70px;
	text-align: center;

	h3 {
		text-transform: uppercase;
		font-family: $font2;
		font-size: 30px;
		font-weight: 400;
		margin-bottom: 45px;
	}

	img {
		margin-bottom: 30px;
		max-width: 100%;

		@include respond-between(sm, md) {
			margin-bottom: 25px;
		}
	}

	h4 {
		font-family: $font2;
		font-size: 24px;
		font-weight: 400;
		margin-bottom: 15px;

		@include respond-between(xs, sm) {
			margin-bottom: 5px;
		}
	}

	p {
		font-weight: 400;
		font-size: 14px;
		font-family: $font1;

		@include respond-between(xs, sm) {
			font-size: 13px;
		}
	}

	.row {
		&:nth-child(2) {
			@extend .bottom-margin;

			@include respond-below(xs) {
				margin-bottom: 50px;
			}

			div[class^='col-'] {
				&:first-child,
				&:nth-child(2) {
					@include respond-between(xs, md) {
						margin-bottom: 50px;
					}
				}
			}
		}
	}

	margin-bottom: 30px;

	@include respond-below(xs) {
		margin-bottom: 50px;
	}
}

#scontainer-7 {
	text-align: center;

	img {
		max-width: 890px;
		width: 100%;

		@include respond-between(md, lg) {
			width: 696px;
		}

		@include respond-between(sm, md) {
			width: 582px;
		}

		@include respond-between(xs, sm) {
			width: 421px;
		}
	}

	p {
		@extend .text;
		margin-bottom: 30px;
		margin-top: 30px;
	}

	margin-bottom: 30px;
}

.inspiration {
	background-image: url('/upload/filemanager/images/home/vidok-zainspiruj-sie.webp');
	height: 890px;
	background-size: cover;

	@include respond-between(sm, md) {
		height: 700px;
	}

	@include respond-between(xs, sm) {
		height: 600px;
	}

	@include respond-below(xs) {
		height: 515px;
	}

	#scontainer-8 {
		padding-top: 100px;
		padding-right: 100px;
		text-align: right;

		@include respond-between(xs, md) {
			padding-top: 70px;
			padding-right: 40px;
		}

		@include respond-below(xs) {
			padding-top: 50px;
			padding-right: 0px;
		}

		p {
			font-weight: 400;
			font-family: $font2;
			margin-bottom: 0;

			&:first-child {
				font-size: 48px;
				line-height: 58px;
				text-transform: uppercase;

				@include respond-below(xs) {
					font-size: 40px;
					line-height: 50px;
				}
			}

			&:nth-child(2) {
				line-height: 60px;
				font-size: 50px;

				@include respond-below(xs) {
					font-size: 40px;
					line-height: 50px;
				}
			}

			&:nth-child(3) {
				line-height: 100px;
				font-size: 90px;
				text-transform: uppercase;
				margin-bottom: 30px;

				@include respond-between(xs, sm) {
					line-height: 80px;
					font-size: 70px;
				}

				@include respond-below(xs) {
					font-size: 40px;
					line-height: 50px;
				}
			}
		}

		.btn2 {
			background: transparent;

			&:hover {
				background: $cBlackText;
			}
		}
	}
}

#scontainer-9 {
	text-align: center;
	margin-top: 45px;

	img {
		width: 105px;
		height: 98px;
	}

	h3 {
		font-size: 28px;
		font-weight: 400;
		font-family: $font2;
	}

	p {
		@extend .text;
		margin-bottom: 0;
		line-height: 26px;
	}

	.row {
		&:first-child {
			margin-bottom: 45px;

			@include respond-below(xs) {
				margin-bottom: 20px;
			}
		}

		&:nth-child(2) {
			p {
				padding: 5px 25px 0 25px;
				margin-bottom: 10px;

				@include respond-below(lg) {
					padding: 5px 0px 0 0px;
				}
			}
		}
	}
}

.news {
	.article {
		@include respond-below(md) {
			margin-bottom: 50px;
		}

		.img {
			img {
				width: 100%;
				height: 220px;
				object-fit: cover;
				margin-bottom: 30px;
			}
		}

		.article-content {
			.title {
				font-size: 16px;
				text-transform: uppercase;
				font-weight: 400;
				font-family: $font1;
				color: $cGrayText;
				line-height: 28px;
				margin-bottom: 15px;
				display: block;
			}

			.entry {
				p {
					font-size: 14px;
					font-weight: 300;
					color: #929292;
				}
			}

			.more {
				color: $cBlackText;
				font-size: 14px;
				font-weight: 600;
			}
		}
	}

	h2 {
		font-weight: 400;
		font-size: 30px;
		font-family: $font2;
	}

	h6 {
		font-family: $font1;
		font-size: 18px;
		font-weight: 400;
		max-width: 500px;
		margin: 0 auto;
		line-height: 29px;
	}

	.row {
		&:first-child {
			margin-top: 70px;
			text-align: center;
			margin-bottom: 50px;
		}
	}
}

#scontainer-10 {
	@extend .top-bottom-margin;

	@include respond-below(md) {
		margin-top: 0;
	}

	p {
		font-size: 12px;
		font-weight: 400;
		line-height: 25px;
		text-align: justify;
	}
}

#cookie-information {
	padding: 10px;
	font-size: 10px;
	text-align: center;
	font-family: $font1;
	color: #fff;
	background: $cGrayDarkBg;

	a {
		font-size: 10px;
		text-transform: uppercase;
		color: #fff;

		&:hover {
			color: $cYellow;
		}
	}
}

.footer {
	background: $cGrayBg;
	padding-top: 60px;
	padding-bottom: 60px;

	div[class^='col-']:last-child {
		@include respond-between(xs, sm) {
			margin-top: 30px;
		}
	}

	div[class^='col-']:first-child {
		#menu-container-1 {
			> ul {
				> li {
					display: none;

					&:nth-child(2) {
						display: block;
					}
				}
			}
		}

		@include respond-below(xs) {
			margin-bottom: 30px;
		}
	}

	div[class^='col-']:nth-child(2) {
		#menu-container-1 {
			> ul {
				> li {
					display: none;

					&:nth-child(5),
					&:nth-child(9) {
						display: block;
					}

					&:nth-child(5) {
						margin-bottom: 25px;
					}
				}
			}
		}

		@include respond-below(xs) {
			margin-bottom: 30px;
		}
	}

	#menu-container-1 {
		> ul {
			margin-bottom: 0;
			padding-inline-start: 0;
			list-style-type: none;

			> li {
				> a {
					.fa {
						display: none;
					}

					font-size: 12px;
					color: $cBlackText;
					line-height: 22px;
					font-weight: 700;
					margin-bottom: 15px;
					display: block;
					pointer-events: none;
				}

				> ul {
					padding-inline-start: 0;
					list-style-type: none;

					> li {
						> a {
							font-size: 12px;
							color: #7a7a7a;
							font-weight: 400;
							line-height: 22px;

							&:hover {
								color: $cBlackText;
							}
						}
					}
				}
			}
		}

		// #link-5 {
		// 	a {
		// 		pointer-events: initial;
		// 	}
		// }
	}

	p {
		font-size: 12px;
		color: $cBlackText;
		line-height: 22px;
		font-weight: 700;
		margin-bottom: 15px;
	}

	#menu-container-5 {
		ul {
			padding-inline-start: 0;
			list-style-type: none;
			margin-bottom: 0;

			li {
				a {
					font-size: 12px;
					color: #7a7a7a;
					font-weight: 400;
					line-height: 22px;

					&:hover {
						color: $cBlackText;
					}
				}
			}
		}
	}

	img {
		width: 210px;

		@include respond-between(sm, md) {
			width: 150px;
		}

		@include respond-below(xs) {
			width: 100%;
		}
	}
}

.subpage-content {
	padding-top: 100px;

	h1,
	h2 {
		@extend .title;
		margin-bottom: 20px;
	}
}

.subpage-image-container {
	margin-top: 34px;

	margin-left: auto;

	margin-right: auto;

	@include respond-above(lg) {
		width: 80%;
	}

	.subpage-image-link {
		margin-bottom: 50px;
		position: relative;

		a {
			display: block;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		p {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			background: rgba(255, 255, 255, 0.75);

			margin-bottom: 0;

			text-align: center;
			padding: 10px;
			transition: all 0.3s ease;

			a {
				font-family: $font1;
				font-size: 24px;
				transition: all 0.3s ease;
				color: $cBlackText;

				@include respond-below(xs) {
					font-size: 20px;
				}
			}
		}

		&:hover {
			p {
				a {
					color: #fff;
				}

				background: rgba(0, 0, 0, 0.5);
			}
		}
	}
}

.article-185 {
	.subpage-image-container {
		@include respond-above(lg) {
			width: 100%;
		}
	}
}

.subpage-content2 {
	margin-top: 60px;

	#scontainer-12,
	#scontainer-17,
	#scontainer-18,
	#scontainer-21,
	#scontainer-24,
	#scontainer-26,
	#scontainer-35,
	#scontainer-37,
	#scontainer-38,
	#scontainer-42,
	#scontainer-45,
	#scontainer-53,
	#scontainer-64 {
		div[class^='col-'] {
			padding: 0;
			position: relative;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.text-center-box {
				position: absolute;

				background: rgba(255, 255, 255, 0.9);
				box-shadow: rgb(35, 35, 35) 0px 0px 10px 0px;
				padding: 70px 80px;

				@include respond-below(xs) {
					padding: 20px;
				}

				h1 {
					@extend .title;
					margin-bottom: 12px;
				}

				p {
					@extend .text;
				}

				h2 {
					@extend .title;
					margin-bottom: 12px;
				}

				ul {
					list-style-type: square;
					margin-bottom: 0;

					li {
						margin-bottom: 15px;
					}
				}
			}

			.text-right-box {
				position: absolute;

				background: rgba(255, 255, 255, 0.9);
				box-shadow: rgb(35, 35, 35) 0px 0px 10px 0px;
				padding: 50px 60px;

				@include respond-below(xs) {
					padding: 15px;
				}

				h1 {
					@extend .title;
					font-weight: 700;
					margin-bottom: 12px;
				}

				p {
					@extend .text;
					font-size: 22px;

					@include respond-below(sm) {
						font-size: 19px;
					}
				}
			}
		}
	}

	#scontainer-12 {
		div[class^='col-'] {
			@include respond-between(sm, md) {
				height: 600px;
			}

			@include respond-between(xs, sm) {
				height: 600px;
			}

			@include respond-below(xs) {
				height: 600px;
			}

			.text-center-box {
				top: calc(50% - 173px);
				left: calc(50% - 295px);

				width: 590px;

				@include respond-between(xs, sm) {
					top: calc(50% - 173px);
					left: calc(50% - 250px);

					width: 500px;
				}

				@include respond-below(xs) {
					top: calc(50% - 173px);
					left: calc(50% - 140px);

					width: 280px;
				}
			}
		}
	}

	#scontainer-17 {
		div[class^='col-'] {
			height: 700px;

			@include respond-between(sm, md) {
				height: 800px;
			}

			@include respond-between(xs, sm) {
				height: 900px;
			}

			@include respond-below(xs) {
				height: 1000px;
			}

			.text-center-box {
				top: calc(50% - 279px);
				left: calc(50% - 400px);
				width: 800px;

				@include respond-between(sm, md) {
					top: calc(50% - 308px);
					left: calc(50% - 350px);
					width: 700px;
				}

				@include respond-between(xs, sm) {
					top: calc(50% - 407px);
					left: calc(50% - 250px);
					width: 500px;
				}

				@include respond-below(xs) {
					top: calc(50% - 488px);
					left: calc(50% - 140px);
					width: 280px;
				}

				ul {
					list-style-type: square;
					margin-bottom: 0;

					li {
						margin-bottom: 15px;
					}
				}
			}
		}
	}

	#scontainer-18 {
		div[class^='col-'] {
			@include respond-between(md, lg) {
				height: 500px;
			}

			@include respond-between(sm, md) {
				height: 600px;
			}

			@include respond-between(xs, sm) {
				height: 700px;
			}

			@include respond-below(xs) {
				height: 700px;
			}

			.text-center-box {
				top: calc(50% - 204px);
				left: calc(50% - 295px);

				width: 590px;

				@include respond-between(xs, sm) {
					top: calc(50% - 225px);
					left: calc(50% - 250px);

					width: 500px;
				}

				@include respond-below(xs) {
					top: calc(50% - 245px);
					left: calc(50% - 140px);

					width: 280px;
				}
			}
		}
	}

	#scontainer-21 {
		div[class^='col-'] {
			@include respond-above(lg) {
				height: 800px;
			}

			@include respond-between(md, lg) {
				height: 800px;
			}

			@include respond-between(sm, md) {
				height: 800px;
			}

			@include respond-between(xs, sm) {
				height: 800px;
			}

			@include respond-below(xs) {
				height: 800px;
			}

			.text-center-box {
				top: calc(50% - 244px);
				left: calc(50% - 295px);

				width: 590px;

				@include respond-between(xs, sm) {
					top: calc(50% - 244px);
					left: calc(50% - 250px);

					width: 500px;
				}

				@include respond-below(xs) {
					top: calc(50% - 290px);
					left: calc(50% - 140px);

					width: 280px;
				}
			}
		}
	}

	#scontainer-53 {
		div[class^='col-'] {
			height: 756px;

			@include respond-between(xs, sm) {
				height: 862px;
			}

			@include respond-below(xs) {
				height: 987px;
			}

			img {
			}

			.text-center-box {
				h1 {
					text-transform: uppercase;
				}

				top: calc(50% - 313px);
				left: calc(50% - 316px);
				width: 633px;

				@include respond-between(xs, sm) {
					top: 10%;
					left: calc(50% - 274px);
					width: 549px;
				}

				@include respond-below(xs) {
					top: 5%;
					left: 5%;
					right: 5%;
					width: auto;
					padding: 15px;
				}
			}
		}

		.btn4 {
			margin-top: 20px;
		}
	}

	#scontainer-64 {
		div[class^='col-'] {
			height: 800px;

			@include respond-below(xs) {
				height: 1070px;
			}

			.text-center-box {
				h1 {
					text-transform: uppercase;
				}

				top: calc(50% - 316px);

				left: calc(50% - 316px);
				width: 633px;

				@include respond-between(xs, sm) {
					width: 500px;
					left: calc(50% - 250px);
					top: calc(50% - 366px);
				}

				@include respond-below(xs) {
					width: 80%;
					left: 10%;
					top: 5%;
					padding: 20px;
				}
			}
		}

		.btn4 {
			margin-top: 20px;
		}
	}
}

#scontainer-37 {
	div[class^='col-'] {
		@include respond-between(md, lg) {
			height: 600px;
		}

		@include respond-between(sm, md) {
			height: 700px;
		}

		@include respond-between(xs, sm) {
			height: 700px;
		}

		@include respond-below(xs) {
			height: 700px;
		}

		.text-center-box {
			top: calc(50% - 238px);
			left: calc(50% - 400px);

			width: 800px;

			@include respond-between(sm, md) {
				top: calc(50% - 238px);
				left: calc(50% - 350px);
				width: 700px;
			}

			@include respond-between(xs, sm) {
				top: calc(50% - 280px);
				left: calc(50% - 250px);
				width: 500px;
			}

			@include respond-below(xs) {
				top: calc(50% - 275px);
				left: calc(50% - 140px);
				width: 280px;
			}

			ul {
				li {
					@extend .text;
				}
			}

			h1 {
				@extend .title;
			}
		}
	}
}

#scontainer-38 {
	div[class^='col-'] {
		@include respond-between(md, lg) {
			height: 600px;
		}

		@include respond-between(sm, md) {
			height: 700px;
		}

		@include respond-between(xs, sm) {
			height: 700px;
		}

		@include respond-below(xs) {
			height: 700px;
		}

		.text-center-box {
			top: calc(50% - 244px);
			left: calc(50% - 295px);

			width: 590px;

			@include respond-between(xs, sm) {
				top: calc(50% - 238px);
				left: calc(50% - 250px);
				width: 500px;
			}

			@include respond-below(xs) {
				top: calc(50% - 238px);
				left: calc(50% - 140px);
				width: 280px;
			}

			ul {
				li {
					@extend .text;
				}
			}

			h1 {
				@extend .title;
			}
		}
	}
}

#scontainer-42 {
	div[class^='col-'] {
		@include respond-above(lg) {
			height: 700px;
		}

		@include respond-between(md, lg) {
			height: 700px;
		}

		@include respond-between(sm, md) {
			height: 700px;
		}

		@include respond-between(xs, sm) {
			height: 700px;
		}

		@include respond-below(xs) {
			height: 750px;
		}

		.text-center-box {
			h1 {
				text-transform: uppercase;
			}

			top: calc(50% - 240px);
			left: calc(50% - 400px);

			width: 800px;

			@include respond-between(sm, md) {
				top: calc(50% - 261px);
				left: calc(50% - 350px);

				width: 700px;
			}

			@include respond-between(xs, sm) {
				top: calc(50% - 303px);
				left: calc(50% - 250px);

				width: 500px;
			}

			@include respond-below(xs) {
				top: calc(50% - 320px);
				left: calc(50% - 140px);

				width: 280px;
			}
		}
	}
}

#scontainer-45 {
	div[class^='col-'] {
		@include respond-below(sm) {
			height: 350px;
			/*okna drewniane*/
		}

		.text-right-box {
			h1 {
				text-transform: uppercase;
			}

			p {
			}

			top: auto;
			left: auto;
			width: 515px;
			bottom: 50px;
			right: 50px;

			@include respond-below(sm) {
				top: 20%;
				left: 10%;
				width: auto;
				bottom: 20%;
				right: 10%;

				display: flex;
				align-items: flex-start;

				flex-direction: column;
				justify-content: center;
			}
		}
	}
}

#scontainer-13,
#scontainer-14,
#scontainer-15,
#scontainer-16 {
	@extend .top-bottom-margin;

	img {
		width: 100%;
	}

	h4 {
		@extend .subtitle-big;
		margin-bottom: 0;
	}

	h3 {
		@extend .title;
		margin-bottom: 30px;
	}

	h2 {
		@extend .title-big;
		margin-bottom: 30px;
	}

	p {
		@extend .text;
	}
}

#scontainer-14 {
	text-align: center;

	p {
		max-width: 920px;
		margin-left: auto;
		margin-right: auto;
	}
}

#scontainer-15 {
	img {
		max-width: 100%;

		@include respond-below(sm) {
			margin-bottom: 50px;
		}
	}

	div[class^='col-'] {
		&:first-child {
			@include respond-above(md) {
				padding-left: 0;
			}

			@include respond-between(sm, md) {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;
			}
		}

		&:last-child {
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;

			p {
				width: 55%;
				margin-left: auto;
				margin-right: auto;

				@include respond-between(md, lg) {
					width: 80%;
				}

				@include respond-between(sm, md) {
					width: 100%;
				}

				@include respond-between(xs, sm) {
					width: 80%;
				}

				@include respond-below(xs) {
					width: 100%;
				}
			}

			h3 {
				width: 55%;
				margin-left: auto;
				margin-right: auto;
				text-align: left;

				@include respond-between(md, lg) {
					width: 80%;
				}

				@include respond-between(sm, md) {
					width: 100%;
				}

				@include respond-between(xs, sm) {
					width: 80%;
				}

				@include respond-below(xs) {
					width: 100%;
				}
			}
		}
	}
}

#scontainer-16 {
	img {
		max-width: 100%;

		@include respond-below(sm) {
			margin-top: 50px;
		}
	}

	div[class^='col-'] {
		&:last-child {
			@include respond-above(md) {
				padding-right: 0;
			}

			@include respond-between(sm, md) {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;
			}
		}

		&:first-child {
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;

			p {
				width: 55%;
				margin-left: auto;
				margin-right: auto;
				text-align: right;

				@include respond-between(md, lg) {
					width: 80%;
				}

				@include respond-between(sm, md) {
					width: 100%;
				}

				@include respond-between(xs, sm) {
					width: 80%;
				}

				@include respond-below(xs) {
					width: 100%;
				}
			}

			h3 {
				width: 55%;
				margin-left: auto;
				margin-right: auto;
				text-align: right;

				@include respond-between(md, lg) {
					width: 80%;
				}

				@include respond-between(sm, md) {
					width: 100%;
				}

				@include respond-between(xs, sm) {
					width: 80%;
				}

				@include respond-below(xs) {
					width: 100%;
				}
			}
		}
	}
}

#scontainer-19 {
	h3,
	p {
		@include respond-above(md) {
			width: 440px;
			margin-left: auto;
			margin-right: auto;
		}
	}

	h3 {
		@extend .title;
	}

	p {
		@extend .text;
	}

	.row:nth-child(even) {
		@extend .top-margin;
		margin-top: 100px;

		@include respond-below(sm) {
			flex-direction: column-reverse;
		}

		div[class^='col-'] {
			&:first-child {
				display: flex;
				align-items: center;

				justify-content: center;
			}

			&:last-child {
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;

				@include respond-below(sm) {
					margin-bottom: 50px;
				}
			}
		}
	}

	.row:nth-child(odd) {
		@extend .top-margin;

		div[class^='col-'] {
			&:last-child {
				display: flex;
				align-items: center;

				justify-content: center;
			}

			&:first-child {
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;

				@include respond-below(sm) {
					margin-bottom: 50px;
				}
			}
		}
	}

	.row:last-child {
		@extend .bottom-margin;
	}
}

#scontainer-20,
#scontainer-66 {
	@extend .top-bottom-margin;

	div[class^='col-'] {
		text-align: center;

		h6 {
			font-size: 18px;
			font-weight: 400;
			font-family: $font1;
			margin-bottom: 30px;
		}

		h2 {
			@extend .title-big;
			font-size: 30px;
			margin-bottom: 15px;
		}

		.btn2:first-child {
			margin-right: 25px;

			@include respond-below(xs) {
				margin-right: 0;
			}
		}
	}

	.row {
		&:last-child {
			div[class^='col-'] {
				@include respond-below(xs) {
					display: block;
				}
			}
		}
	}
}

#scontainer-22 {
	background: $cGrayBg;
	padding-top: 100px;
	padding-bottom: 100px;
	text-align: center;
	@extend .bottom-margin;

	img {
		max-width: 100%;
	}

	.row {
		&:last-child {
			div[class^='col-'] {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

#scontainer-23 {
	img {
		width: 100%;

		@include respond-below(sm) {
			margin-bottom: 30px;
		}
	}

	div[class^='col-'] {
		&:first-child {
			text-align: right;
		}
	}
}

#scontainer-25,
#scontainer-50,
#scontainer-54,
#scontainer-65,
#scontainer-161 {
	@extend .top-bottom-margin;

	h2 {
		@extend .title-big;
		text-align: center;
	}

	.nav-tabs {
		@extend .nav-tabs-style;
	}

	.tab-content {
		div[class^='col-'] {
			@extend .top-margin;

			&:first-child {
				@include respond-above(md) {
					border-right: 1px solid $cBlackText;
				}

				table {
					tbody {
						tr {
							td {
								border-top: none;

								&:first-child {
									color: #ffffff;
									background-color: $cGrayText;
									text-align: right;
									font-size: 14px;
									line-height: 24px;
									font-weight: 400;
									font-family: $font2;
								}
							}

							&:first-child {
								td {
									padding: 100px 40px 20px;

									@include respond-below(xs) {
										padding: 100px 20px 20px;
									}
								}
							}

							&:nth-child(2) {
								td {
									padding: 60px 40px;

									@include respond-below(xs) {
										padding: 60px 20px;
									}
								}
							}

							&:last-child {
								td {
									padding: 20px 40px 100px;

									@include respond-below(xs) {
										padding: 20px 20px 100px;
									}
								}
							}
						}
					}
				}
			}

			&:last-child {
				text-align: center;

				> img {
					margin-bottom: 30px;
					width: 179px;
				}

				table {
					@extend .table-1;

					tr {
						td {
							&:first-child {
								text-align: left;
							}

							&:last-child {
								text-align: right;
							}
						}
					}
				}

				p {
					text-align: left;
					margin-left: 100px;
					margin-top: 30px;

					@include respond-below(md) {
						margin-left: 0px;
						text-align: center;
					}
				}
			}
		}
	}
}

#scontainer-50,
#scontainer-54,
#scontainer-65,
#scontainer-161 {
	.tab-content {
		div[class^='col-'] {
			&:first-child {
				table {
					tbody {
						tr {
							td {
								padding: 15px 40px;

								@include respond-below(xs) {
									padding: 15px 15px;
								}
							}

							&:first-child {
								td {
									padding: 100px 40px 20px;

									@include respond-below(xs) {
										padding: 100px 15px 15px;
									}
								}
							}

							&:nth-child(2) {
								td {
									padding: 15px 40px;

									@include respond-below(xs) {
										padding: 15px 15px;
									}
								}
							}

							&:last-child {
								td {
									padding: 20px 40px 100px;

									@include respond-below(xs) {
										padding: 15px 15px 100px;
									}
								}
							}
						}
					}
				}
			}

			&:last-child {
				> img {
					width: 240px;
				}
			}
		}
	}
}

#scontainer-27 {
	text-align: center;
	@extend .top-bottom-margin;
}

#scontainer-28,
#scontainer-47 {
	img {
		width: 100%;
	}
}

#scontainer-28,
#scontainer-47,
.box26 {
	p {
		padding-left: 55px;
		position: relative;
		margin-bottom: 0;
		margin-top: 16px;

		span {
			position: absolute;
			left: 0;

			padding: 3px 10px;

			border: 1px solid $cBlackText;
			display: inline-block;
		}
	}
}

.box26 {
	@extend .bottom-margin;

	@include respond-above(lg) {
		margin-bottom: 0;
	}

	img {
		max-width: 100%;
	}

	div[class^='col-'] {
		&:first-child {
			@include respond-below(md) {
				text-align: center;
			}
		}
	}
}

#scontainer-29 {
	background: $cGrayBg;

	img {
		width: 100%;
	}

	@extend .top-bottom-margin;

	div[class^='col-']:first-child {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;

		@include respond-below(md) {
			padding-top: 50px;
			padding-bottom: 50px;
		}
	}

	div[class^='col-']:last-child {
		display: flex;
		align-items: center;

		justify-content: center;
	}

	h3,
	h2 {
		@extend .subtitle-big;
	}

	h2 {
		margin-bottom: 60px;
	}
}

#scontainer-30 {
	h2 {
		@extend .title;
		margin-bottom: 30px;
	}

	.row {
		&:first-child {
			margin-bottom: 50px;
		}

		&:nth-child(2),
		&:nth-child(4) {
			img {
				width: 100%;

				@include respond-below(md) {
					margin-bottom: 30px;
				}
			}
		}

		&:nth-child(4) {
			margin-top: 30px;
			margin-bottom: 50px;
		}

		&:nth-child(5) {
			margin-bottom: 50px;

			@include respond-below(sm) {
				flex-direction: column-reverse;

				img {
					margin-bottom: 30px;
					max-width: 100%;
				}
			}

			div[class^='col-'] {
				&:first-child {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
					border-right: 1px solid $cBlackText;

					@include respond-below(sm) {
						border-right: none;
					}
				}

				&:last-child {
					display: flex;
					align-items: center;

					justify-content: center;
				}
			}

			table {
				@extend .table-1;
				margin-bottom: 30px;
			}
		}

		&:nth-child(6) {
			margin-bottom: 50px;

			div[class^='col-'] {
				div {
					background: $cGrayBg;
					padding: 30px;
					min-height: 208px;

					@include respond-below(md) {
						margin-bottom: 30px;
						display: flex;
						align-items: flex-start;
						flex-wrap: wrap;
						flex-direction: column;
						justify-content: center;
					}

					p {
						margin-bottom: 10px;

						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}

	ul {
		margin-top: 30px;

		li {
			margin-bottom: 20px;
		}
	}
}

#scontainer-31 {
	@extend .top-bottom-margin;
	padding-top: 100px;
	padding-bottom: 100px;

	background-image: url('/upload/filemanager/images/produkty/gold-energy-pvc/vidok-gold-energy-70.jpg');
	background-size: cover;
	color: #fff;

	h2 {
		@extend .title;
		color: #fff;
		text-align: center;
		margin-bottom: 50px;
	}

	p {
		@extend .text;
		color: #fff;
		text-align: center;
		margin-bottom: 0;
		line-height: 25px;
	}
}

#scontainer-32 {
	.row {
		margin-bottom: 50px;

		&:first-child {
			img {
				width: 100%;
			}
		}

		&:nth-child(2) {
			text-align: center;
		}

		&:nth-child(3) {
			@extend .bottom-margin;

			img {
				height: 231px;
				text-align: center;
				max-width: 100%;

				@include respond-below(xs) {
					height: auto;
				}
			}
		}
	}
}

#scontainer-33 {
	background: #f7f6f6;
	padding-top: 100px;
	padding-bottom: 100px;

	img {
		max-width: 100%;

		@include respond-below(sm) {
			margin-bottom: 30px;
		}
	}

	h2 {
		@extend .title;
		text-align: center;
		margin-bottom: 50px;
	}

	.row {
		&:first-child,
		&:nth-child(2),
		&:nth-child(3) {
			margin-bottom: 50px;
		}

		&:nth-child(4),
		&:nth-child(7) {
			margin-bottom: 20px;

			h2 {
				text-align: left;
				margin-bottom: 20px;
			}
		}

		&:nth-child(5),
		&:nth-child(6),
		&:nth-child(8) {
			div[class^='col-'] {
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					margin-bottom: 50px;
				}
			}
		}

		&:nth-child(5),
		&:nth-child(6) {
			border-bottom: 1px solid $cBlackText;
			margin-bottom: 50px;
		}

		&:nth-child(3) {
			div[class^='col-'] {
				@include respond-below(sm) {
					text-align: center;
				}
			}
		}
	}
}

#scontainer-34 {
	text-align: center;
	@extend .top-margin;

	h4 {
		@extend .subtitle-big;

		a {
			@extend .subtitle-big;
		}
	}

	.row {
		&:last-child {
			@extend .top-margin;

			div[class^='col-'] {
				padding: 0;

				img {
					width: 100%;
					object-fit: cover;
				}
			}
		}
	}
}

#scontainer-36 {
	@extend .top-bottom-margin;

	h2 {
		@extend .title;
		margin-bottom: 30px;
	}

	h3 {
		@extend .title;
		font-size: 25px;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.row {
		&:nth-child(2) {
			text-align: center;

			p {
				margin-bottom: 30px;
			}
		}

		&:nth-child(3) {
			a {
				@extend .text;
			}

			.btn3 {
				color: #fff;
				margin-top: 20px;
				display: inline-block;
			}

			div[class^='col-'] {
				div {
					background: rgb(244, 244, 244);
					padding: 40px 50px;
					height: 100%;
				}
			}
		}
	}
}

#scontainer-39 {
	@extend .top-bottom-margin;

	img {
		max-width: 100%;
	}

	div[class^='col-'] {
		&:first-child {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;

			img {
				width: 288px;
				margin-bottom: 50px;
			}

			p {
				max-width: 300px;

				&:last-child {
					@include respond-below(sm) {
						margin-bottom: 50px;
					}
				}
			}
		}
	}
}

.portfolio {
	div[class^='col-'] {
		padding-bottom: 70px;

		img {
			max-width: 100%;
			margin-bottom: 60px;

			@include respond-below(xs) {
				margin-bottom: 30px;
			}
		}

		h6 {
			color: $cGrayText;
			font-family: $font1;
			font-size: 18px;
			line-height: 29px;
			font-weight: 400;
			letter-spacing: 0px;
			text-transform: none;
		}
	}
}

.article-9 {
	padding-top: 100px;
	padding-bottom: 100px;
	background-image: url('/upload/filemanager/images/strefa-partnerstwa/strefa-partnerstwa-bg.jpg');
	background-size: cover;

	.row {
		&:first-child {
			text-align: center;

			h3 {
				@extend .title;
				margin-bottom: 70px;
			}
		}

		&:nth-child(2) {
			div[class^='col-'] {
				@extend .download-box;
			}
		}
	}
}

.article-10,
.article-15,
.article-16,
.article-17,
.article-18,
.article-20 {
	h1 {
		color: #000000;
		font-family: $font1;
		font-size: 40px;
		font-weight: 300;

		text-align: center;

		margin-bottom: 0;
		padding: 40px 20px;
	}

	.window-construction {
		@extend .top-bottom-margin;
		position: relative;

		&:before {
			position: absolute;
			content: '';
			width: 600px;
			height: 400px;
			background: $cGrayBg;
			left: 21%;
			bottom: -32px;

			@include respond-below(md) {
				display: none;
			}
		}

		img {
			width: 80%;
		}

		p {
			padding-left: 55px;
			position: relative;
			margin-bottom: 0;
			margin-top: 16px;

			span {
				position: absolute;
				left: 0;

				padding: 3px 10px;
				color: #fff;
				background: $cBlackText;
				border: 1px solid $cBlackText;
				display: inline-block;
			}
		}
	}

	.gray-bg {
		@extend .left-right-margin;
	}

	.solid {
		background-image: url('/upload/filemanager/images/produkty/linia-extreme-pvc/tlo.jpg');
		background-size: cover;
		@extend .top-bottom-padding;
		@extend .left-right-margin;

		.container {
			> .row {
				> div[class^='col-'] {
					&:first-child {
						padding-right: 80px;

						h2 {
							@extend .title50;
							color: #fff;

							margin-bottom: 50px;

							@include respond-below(xs) {
								font-size: 27px;
							}

							&:before {
								background: #fff;
							}
						}

						p {
							color: #fff;
							margin-bottom: 40px;
						}

						h3 {
							font-size: 18px;
							color: #fff;
							font-family: $font2;
							font-weight: 500;
							margin-bottom: 10px;
						}

						img {
							margin-bottom: 20px;
						}

						.row {
							div[class^='col-'] {
								p {
									color: $cBlackText;
									background: $cGrayBg;

									padding: 60px 40px;

									min-height: 185px;
									display: flex;
									justify-content: flex-start;
									align-items: center;
								}

								&:last-child {
									p {
										margin-top: 30px;
										padding: 40px;
									}
								}
							}
						}
					}

					&:last-child {
						text-align: center;
						position: relative;
						padding-left: 80px;

						img {
							max-width: 100%;
						}

						&:before {
							position: absolute;
							content: '';
							left: 0;
							top: 20%;
							height: 60%;
							width: 2px;
							background: #fff;

							@include respond-below(md) {
								display: none;
							}
						}
					}
				}
			}
		}
	}

	.technology {
		@extend .top-bottom-margin;

		div[class^='col-'] {
			> img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: right;
			}

			&:last-child {
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;

				@include respond-below(sm) {
					margin-top: 30px;
				}

				h2 {
					@extend .title50;
				}

				p {
					margin-bottom: 30px;
				}

				h2,
				p,
				a {
					margin-left: -100px;

					@include respond-below(sm) {
						margin-left: 0;
					}
				}
			}
		}
	}
}

.article-10 {
	.window-construction {
		div[class^='col-'] {
			@include respond-below(md) {
				text-align: center;
				margin-bottom: 30px;
			}
		}
	}

	.solid {
		padding-left: 0;
		padding-right: 0;
		max-width: 2220px;
		margin-left: auto;
		margin-right: auto;
	}
}

.article-15,
.article-16,
.article-17,
.article-18 {
	.solid {
		background-image: url('/upload/filemanager/images/produkty/okna/Okna-PVC/pvc-70/vp-70-bg.png');
		background-position: center right;
	}

	#scontainer-41 {
		h2 {
			@extend .title50;
			text-align: left;
			margin-bottom: 100px;
		}
	}
}

#scontainer-40,
#scontainer-63 {
	margin-top: 150px;
	@extend .left-right-margin;
	background-image: url('/upload/filemanager/images/produkty/linia-extreme-pvc/bg.jpg');
	background-size: cover;
	@extend .bottom-padding;

	div[class^='col-'] {
		&:first-child {
			> div {
				margin-top: -70px;
			}
		}

		&:not(:last-child) {
			@include respond-below(lg) {
				margin-bottom: 50px;
			}
		}

		> div {
			background: #fff;
			margin-top: -70px;

			@include respond-below(lg) {
				max-width: 70%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 0px;
			}

			@include respond-below(xs) {
				max-width: 95%;
			}

			img {
				width: 100%;
			}

			div {
				padding: 50px 25px 35px 25px;

				h2 {
					font-size: 25px;
					font-weight: 300;
					font-style: normal;
					letter-spacing: normal;
					text-align: left;
					text-transform: uppercase;
					font-family: $font1;
					color: $cBlackText;
					position: relative;
					margin-bottom: 40px;

					&:before {
						position: absolute;
						content: '';
						bottom: -20px;
						height: 2px;
						width: 100px;
						background: $cBlackText;
					}
				}

				p {
					margin-bottom: 40px;

					@include respond-above(sm) {
						min-height: 189px;
					}
				}

				.btn5 {
					width: 219px;
				}
			}
		}
	}
}

#scontainer-63 {
	div[class^='col-'] {
		> div {
			div {
				p {
					min-height: 209px;
				}
			}
		}
	}
}

#scontainer-41 {
	@extend .top-bottom-margin;

	div[class^='col-'] {
		text-align: center;
		position: relative;

		&:not(:last-child) {
			&:before {
				right: 0;
				top: 20%;
				position: absolute;
				content: '';
				height: 60%;
				width: 2px;
				background: $cGrayBg;
			}
		}

		&:first-child {
			img {
				&:first-child {
					position: absolute;
					left: 0;
					top: 0;
				}
			}
		}

		h3 {
			font-family: $font1;
			font-size: 18px;
			font-weight: 400;
			color: $cBlackText;
			text-transform: uppercase;
			text-align: left;

			span {
				/* font-size: 25px;
                 margin-top: 7px;
                 display: inline-block;
                 margin-bottom: 15px;
                 padding: 5px;
                 color: #fff;
                 background: linear-gradient(-183deg, #ceb167 0%, #906a25 100%);*/
				@extend .gold-bg-text;
			}
		}

		p {
			text-align: left;
			min-height: 105px;
		}

		> div {
			position: relative;
			border: 2px solid #fff;
			transition: all 0.3s ease;
			padding: 15px;

			img {
				margin-bottom: 50px;
			}

			a {
				@extend .btn6;
			}

			div {
				text-align: left;
			}

			&:hover {
				border: 2px solid $cYellow;
			}
		}
	}
}

.article-11 {
	text-align: center;

	.container-fluid {
		.row {
			&:first-child {
				div[class^='col-'] {
					padding: 0;
				}

				margin-bottom: 50px;

				img {
					width: 100%;

					@include respond-below(xs) {
						height: 250px;
						object-fit: cover;
						object-position: right;
					}
				}
			}
		}
	}

	p {
		margin-bottom: 30px;

		a {
			@extend .text;
		}
	}
}

.article-11 {
	margin-top: -50px;
}

#scontainer-43 {
	@extend .top-bottom-margin;

	.row {
		&:first-child {
			text-align: center;

			h2 {
				@extend .title;
				text-transform: uppercase;
				margin-bottom: 15px;
			}

			p {
				max-width: 680px;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 70px;
			}
		}

		&:last-child {
			max-width: 950px;
			margin-left: auto;
			margin-right: auto;

			div[class^='col-'] {
				div {
					border: 1px solid $cBlackText;
					padding: 50px 20px;
					margin-bottom: 30px;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
					min-height: 295px;

					p {
						text-align: center;

						a {
							@extend .text;
							font-weight: 600;

							&:hover {
								color: #000;
							}
						}
					}
				}
			}
		}
	}
}

.download-box {
	text-align: center;
	margin-bottom: 30px;

	div {
		padding-top: 100px;
		padding-bottom: 100px;
		background: #f7f6f6;
		transition: all 0.3s ease;

		&:hover {
			background-image: url('/upload/filemanager/images/strefa-partnerstwa/download.jpg');

			box-shadow: 0 0 5px 5px #d5d5d5;
		}
	}
}

.download-box2 {
	text-align: left;
	margin-bottom: 30px;

	div {
		padding: 50px 30px;
		background: #f7f6f6;
		transition: all 0.3s ease;
		background-image: url('/upload/filemanager/images/strefa-partnerstwa/download.jpg');
	}
}

.article-13 {
	h1 {
		@extend .title-big;
		text-align: center;
	}

	.row {
		margin-bottom: 30px;
	}

	img {
		margin-bottom: 10px;
		max-width: 100%;
	}

	p {
		@extend .text;

		a {
			@extend .text;
			word-wrap: break-word;
		}
	}

	div[class^='col-'] {
		> img {
			max-height: 111px;
		}
	}
}

.salony {
	> .row {
		div[class^='col-'] {
			&:last-child {
				display: flex;
				align-items: flex-start;
				justify-content: center;

				.mapa-swiata-kontener {
					@include respond-above(lg) {
						transform: scale(0.9);
						margin-top: -60px;
					}

					@include respond-between(md, lg) {
						transform: scale(0.7);
						margin-top: -150px;
					}

					@include respond-between(sm, md) {
						transform: scale(0.8);
						margin-top: -100px;
					}

					@include respond-between(xs, sm) {
						transform: scale(0.5);
						margin-top: -200px;
					}

					@include respond-below(xs) {
						transform: scale(0.3);
						margin-top: -353px;
					}
				}
			}
		}
	}

	h1 {
		@extend .title-big;
		text-align: center;
		text-transform: uppercase;
		margin-top: 50px;
	}

	img {
		width: 960px;
	}

	#scontainer-44 {
		.voivodeship {
			display: none;
		}

		.visible-box {
			display: block;
		}

		.hidden-box {
			display: none;
		}

		h2 {
			@extend .subtitle-big;
			padding: 20px 10px;
			text-align: center;
			background: $cGrayBg;
		}

		.store {
			text-align: center;
			padding-top: 30px;
			padding-bottom: 30px;

			.btn {
				border: 2px solid #000;
				background: #fff;
				color: #000;
				@include transition;
				font-size: 11px;
				padding: 10px 25px;
				text-transform: uppercase;

				&:hover {
					background: #000;
					color: #fff;
				}
			}

			&:not(:last-child) {
				border-bottom: 1px solid $cGrayBg;
			}

			p {
				a {
					@extend .text;
				}
			}
		}
	}

	title {
		text-decoration: none;
		color: red;
	}
}

.box01 {
	.row {
		@extend .top-bottom-padding;

		div[class^='col-'] {
			div {
				background: $cGrayLightBg;
				max-width: 600px;
				margin-left: 50px;
				padding-right: 100px;
				@extend .top-bottom-padding;
				position: relative;

				@include respond-below(xs) {
					margin-right: 10px;

					max-width: 100%;
					margin-left: 0;

					padding: 20px;
				}

				&:before {
					position: absolute;
					content: '';
					width: 200px;
					height: 200px;
					border: 4px solid $cYellow;
					right: -40px;
					top: -40px;
					z-index: -1;

					@include respond-below(xs) {
						right: -12px;
					}
				}

				h1,
				p {
					margin-left: -50px;

					@include respond-below(xs) {
						margin-left: 0;
					}
				}
			}
		}
	}
}

.article-19 {
	h1 {
		font-style: normal;
		font-weight: 600;
		font-size: 60px;
		line-height: 82px;
		color: $cBlackText;
		margin-bottom: 24px;

		@include respond-below(xs) {
			font-size: 38px;
		}
	}
}

.article-14 {
	h1 {
		font-style: normal;
		font-weight: 600;
		font-size: 60px;
		line-height: 82px;
		color: $cBlackText;
		margin-bottom: 24px;

		@include respond-below(xs) {
			font-size: 35px;
		}
	}

	p {
		@extend .text;
	}

	.nav-tabs {
		border-bottom: none;

		li {
			margin-right: 12px;
			width: 279px;

			@include respond-between(md, lg) {
				margin-right: 12px;
				width: 212px;
			}

			@include respond-below(md) {
				margin-bottom: 15px;
			}

			@include respond-between(xs, sm) {
				width: 229px;
			}

			a {
				padding: 7px 12px;
				font-style: normal;
				font-weight: 700;
				font-size: 18px;
				line-height: 1.3;
				color: $cBlackText;
				text-transform: uppercase;
				border: 1px solid #cccccc;
				background: transparent;
				transition: all 0.3s ease;
				display: block;

				@include respond-between(md, lg) {
					min-height: 63px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}

				@include respond-between(xs, sm) {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					min-height: 63px;
				}

				@include respond-below(xs) {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					min-height: 63px;
				}

				&:hover,
				&.active {
					background: #000;
					border: 1px solid #000;
					color: #fff;
				}
			}
		}
	}

	.box02 {
		img {
			width: 485px;

			@include respond-below(lg) {
				width: 100%;
			}

			@include respond-below(sm) {
				margin-bottom: 50px;
			}
		}

		@extend .top-bottom-margin;

		div[class^='col-'] {
			&:last-child {
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;

				h2 {
					@extend .title50;
					font-size: 40px;
					text-transform: uppercase;

					&:before {
						width: 150px;
					}
				}

				p {
					max-width: 300px;

					@include respond-below(sm) {
						max-width: 100%;
					}
				}
			}
		}
	}

	.box03 {
		background: $cGrayLightBg;
		@extend .top-bottom-padding;

		div[class^='col-'] {
			&:not(:last-child) {
				@include respond-above(sm) {
					border-right: 1px solid #ccc;
				}

				@include respond-below(sm) {
					margin-bottom: 50px;
				}
			}

			h2 {
				@extend .subtitle-big;

				span {
					font-size: 40px;
					padding-left: 5px;
					position: relative;

					&:before {
						position: absolute;
						content: '';
						width: 50px;
						height: 50px;
						border: 2px solid $cYellow;
						top: -11px;
						left: 0;
					}
				}
			}

			padding: 0 50px;

			@include respond-between(sm, md) {
				padding: 0px 25px;
			}
		}
	}

	.box04 {
		@extend .top-bottom-padding;

		img {
			max-width: 100%;
		}

		div[class^='col-'] {
			&:first-child {
				display: flex;
				align-items: flex-end;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;
				text-align: right;

				@include respond-below(sm) {
					align-items: center;
					text-align: center;
				}
			}

			&:nth-child(2),
			&:nth-child(3) {
				text-align: center;

				p {
					font-size: 30px;
					font-weight: 300;
				}
			}
		}

		h2 {
			@extend .title2;

			&:before {
				left: auto;
				right: 0;

				@include respond-below(sm) {
					right: calc(50% - 50px);
				}
			}
		}
	}

	.box05 {
		h2 {
			@extend .title2;
		}

		div[class^='col-'] {
			&:first-child {
				img {
					&:first-child {
						margin-bottom: 50px;

						@include respond-between(md, lg) {
							width: 87%;
						}

						@include respond-between(xs, md) {
							width: 100%;
						}

						@include respond-below(xs) {
							width: 100%;
						}
					}

					&:last-child {
						margin-left: 10%;
						width: 90%;

						@include respond-between(sm, md) {
							margin-left: 0;
							width: 118%;
						}

						@include respond-below(sm) {
							margin-bottom: 50px;
						}
					}
				}
			}

			&:last-child {
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;

				div {
					background: $cGrayLightBg;
					padding: 80px;
					max-width: 500px;
					margin-left: -80px;
					position: relative;

					@include respond-between(sm, md) {
						padding: 38px;
						max-width: 500px;
						margin-left: 0px;
						position: relative;
					}

					@include respond-below(sm) {
						margin-left: 0px;
					}

					@include respond-below(xs) {
						margin-left: 0px;
						width: 80%;
						padding: 20px;
					}

					&:before {
						position: absolute;
						content: '';
						width: 200px;
						height: 200px;
						border: 4px solid $cYellow;
						right: -40px;
						top: -40px;
						z-index: -1;

						@include respond-between(md, lg) {
							right: -21px;
						}

						@include respond-between(sm, md) {
							right: -30px;
						}

						@include respond-below(xs) {
						}
					}
				}
			}
		}
	}

	.box08 {
		margin-top: 200px;
		background: $cGrayLightBg;
		padding: 60px 70px;
		@extend .bottom-margin;

		@include respond-below(lg) {
			margin-top: 100px;
		}

		@include respond-below(xs) {
			padding: 50px 25px;
		}

		div[class^='col-']:first-child {
			padding-right: 50px;
			display: flex;
			align-items: flex-end;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;

			@include respond-below(md) {
				margin-bottom: 50px;
			}

			@include respond-below(xs) {
				padding-right: 15px;
			}
		}

		img {
			margin-top: -150px;
			width: 100%;

			@include respond-below(lg) {
				margin-top: 0px;
			}
		}

		h2 {
			@extend .title2;

			&:before {
				left: auto;
				right: 0;
			}
		}

		text-align: right;
	}

	.box09 {
		img {
			width: 100%;
		}

		div[class^='col-'] {
			&:last-child {
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;

				h2 {
					@extend .title2;

					&:before {
						max-width: 150px;
					}
				}
			}
		}
	}

	.box10 {
		@extend .top-bottom-margin;
		@extend .top-bottom-padding;
		background: $cGrayLightBg;

		img {
			width: 100%;
		}

		div[class^='col-']:first-child {
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;
			padding-left: 100px;
			padding-right: 30px;

			@include respond-below(lg) {
				padding-left: 20px;
			}

			@include respond-below(md) {
				margin-bottom: 50px;
			}

			h2 {
				@extend .title2;

				@include respond-below(xs) {
					line-height: 20px;
				}
			}

			p {
				margin-bottom: 0;
			}
		}
	}

	.box11 {
		img {
			margin-bottom: 20px;
			width: 100%;
		}

		h2 {
			@extend .title;
			position: relative;
			display: inline-block;
			margin-bottom: 30px;

			&:before {
				position: absolute;
				content: '';
				bottom: -10px;
				width: 100%;
				height: 2px;
				background: $cBlackText;
			}
		}

		div[class^='col-'] {
			@include respond-below(sm) {
				margin-bottom: 50px;
			}
		}
	}

	.box12 {
		@extend .bottom-margin;
		margin-top: 200px;

		div[class^='col-'] {
			&:first-child {
				div {
					background: $cGrayLightBg;
					padding: 50px 40px;
					text-align: right;
					margin-top: -100px;

					@include respond-between(md, lg) {
						padding: 50px 27px;
					}

					@include respond-between(sm, md) {
						padding: 50px 20px;
					}

					h2 {
						@extend .title2;

						&:before {
							left: auto;
							right: 0;
						}
					}
				}
			}

			&:last-child {
				img {
					margin-left: -20%;
					width: 120%;
					z-index: -1;
					position: relative;

					@include respond-between(sm, md) {
						height: 378px;
						object-fit: cover;
					}

					@include respond-between(xs, sm) {
						margin-left: 0;
						width: 100%;
						margin-top: 0px;
					}
				}
			}
		}
	}

	.box13 {
		img {
			width: 100%;
		}

		div[class^='col-'] {
			&:first-child {
				display: flex;
				align-items: flex-end;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;

				@include respond-below(sm) {
					align-items: center;
				}

				h2 {
					@extend .title2;
					text-align: right;

					@include respond-below(sm) {
						text-align: center;
					}

					&:before {
						left: auto;
						right: 0;

						@include respond-below(sm) {
							left: calc(50% - 50px);
							right: auto;
						}
					}
				}

				p {
					text-align: justify;
					max-width: 400px;
				}

				@include respond-below(sm) {
					margin-bottom: 50px;
				}
			}

			&:last-child {
				text-align: right;
			}
		}
	}

	.box14 {
		@extend .top-bottom-margin;

		div[class^='col-'] {
			div {
				padding: 30px 100px;
				background: $cGrayLightBg;
				max-width: 500px;
				margin-left: -200px;
				margin-top: 120px;
				position: relative;

				@include respond-below(sm) {
					margin-left: 0px;
				}

				@include respond-below(xs) {
					padding-left: 20px;
					padding-right: 20px;
				}

				&:before {
					position: absolute;
					content: '';
					width: 200px;
					height: 200px;
					border: 4px solid $cYellow;
					right: -40px;
					top: -40px;
					z-index: -1;

					@include respond-between(sm, md) {
						right: -30px;
					}

					@include respond-below(xs) {
						right: -9px;
					}
				}
			}

			&:first-child {
				img {
					width: 100%;
				}
			}
		}

		h2 {
			@extend .title2;
		}
	}

	.box15 {
		img {
			width: 100%;
		}

		div[class^='col-'] {
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;

			h2 {
				@extend .title2;
			}
		}

		p {
			max-width: 400px;
			text-align: justify;
		}
	}

	.box16 {
		img {
			width: 100%;
		}

		@extend .top-bottom-margin;

		h4 {
			@include respond-below(sm) {
				text-align: center;
			}
		}

		.col-xs-6 {
			@include respond-below(sm) {
				width: 33%;
				max-width: 33%;
			}

			@include respond-below(xs) {
				width: 50%;
			}
		}

		h2 {
			@extend .title2;
		}
	}

	.box17 {
		background-image: url('/upload/filemanager/images/produkty/dodatki/dark-bg.png');
		background-size: cover;
		@extend .top-bottom-padding;
		@extend .bottom-margin;

		img {
			width: 100%;

			@include respond-below(sm) {
				margin-bottom: 30px;
			}
		}

		div[class^='col-'] {
			&:first-child {
				text-align: center;
			}

			&:last-child {
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;

				p {
					color: #fff;
					max-width: 400px;
					text-align: justify;
				}

				h2 {
					@extend .title2;
					color: #fff;

					span {
						color: #fff;
					}

					&:before {
						background: #fff;
					}
				}
			}
		}
	}

	.box18 {
		background: $cGrayLightBg;
		@extend .top-bottom-padding;
		padding-left: 100px;
		padding-right: 100px;
		text-align: center;

		@include respond-below(xs) {
			padding-left: 20px;
			padding-right: 20px;
		}

		h2 {
			font-size: 40px;
		}

		div[class^='col-'] {
			&:first-child {
				margin-bottom: 50px;
			}

			&:last-child {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				@include respond-below(lg) {
					justify-content: center;
				}

				div {
					width: 11%;
					margin-bottom: 30px;

					@include respond-between(md, lg) {
						width: calc(100% / 6);
					}

					@include respond-between(sm, md) {
						width: calc(100% / 4);
					}

					@include respond-between(xs, sm) {
						width: calc(100% / 2);
					}

					@include respond-below(xs) {
						width: calc(100% / 2);
					}

					img {
						margin-bottom: 20px;
					}
				}

				p {
					text-transform: uppercase;
				}
			}
		}
	}

	.box19 {
		@extend .bottom-margin;
		margin-top: 200px;

		@include respond-below(sm) {
			margin-top: 100px;
		}

		img {
			width: 135%;

			@include respond-between(md, lg) {
			}

			@include respond-between(sm, md) {
				width: 130%;
				height: 500px;
				object-fit: cover;
			}

			@include respond-between(xs, sm) {
				width: 100%;
				margin-bottom: 50px;
			}

			@include respond-below(xs) {
				width: 100%;
				margin-bottom: 50px;
			}
		}

		div[class^='col-'] {
			div {
				text-align: right;

				background: $cGrayLightBg;
				padding: 50px 40px;
				margin-top: -100px;
				margin-left: -80px;

				@include respond-between(xs, sm) {
					margin-top: 0px;
					margin-left: 0px;
				}

				@include respond-below(xs) {
					margin-top: 0px;
					margin-left: 0px;
					padding: 40px 20px;
				}

				p {
					text-align: right;
				}

				h2 {
					@extend .title2;
					text-align: right;

					&:before {
						left: auto;
						right: 0;
					}
				}
			}
		}
	}
}

.files {
	margin-bottom: 0;

	li {
		a {
			margin-bottom: 15px;
			display: block;
			@extend .text;
			font-weight: 600;
		}
	}
}

.gallery {
	.image {
		img {
			margin-bottom: 15px;
		}
	}
}

.article {
	.text {
		h2 {
			font-size: 1.25rem;
		}
	}

	.products {
		h2 {
			font-size: 1.5rem;
			line-height: 1.5;

			strong {
				padding: 0 5px;
				background: #000;
				color: #fff;
				display: inline-block;
			}
		}

		a {
			display: inline-block;
			font-weight: 600 !important;
			border-bottom: 2px solid #000;
		}
	}

	h1 {
		font-size: 1.75rem !important;
		margin: 25px 0 !important;
		font-weight: 600 !important;
	}

	.date-add {
		@extend .text;
		font-weight: 600;
		margin-bottom: 10px;

		img {
			width: 20px;
			height: 20px;
			margin-right: 10px;
		}
	}
}

#scontainer-46 {
	@extend .top-bottom-margin;
}

#scontainer-48 {
	background-image: url('/upload/filemanager/images/produkty/okna/okna-drewniane/okna-drewniane-zalety.jpg');

	background-size: cover;
	@extend .top-bottom-padding;
	@extend .top-bottom-margin;

	div[class^='col-'] {
		&:nth-child(odd) {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		div {
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;
			background: rgba(255, 255, 255, 0.9);
			width: 500px;
			height: 250px;
			padding: 20px 20px 20px 40px;

			@include respond-between(sm, lg) {
				width: calc(100% - 15px);
			}

			@include respond-between(xs, sm) {
				width: calc(100% - 30px);
				margin: auto;
			}

			@include respond-below(xs) {
				width: 100%;
				padding: 15px;
			}

			img {
				margin-bottom: 20px;
			}

			h3 {
				@extend .title;
				font-size: 26px;
				font-weight: 700;

				@include respond-below(md) {
					font-size: 22px;
				}
			}

			p {
				@extend .text;
				margin-bottom: 0;
			}
		}

		&:first-child,
		&:nth-child(2) {
			margin-bottom: 30px;
		}

		@include respond-below(sm) {
			margin-bottom: 30px;
		}
	}
}

#scontainer-49 {
	text-align: center;

	p {
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}
}

#scontainer-51 {
	#scontainer-51-content {
		> .row {
			> div[class^='col-'] {
				> img {
					width: 100%;

					object-fit: cover;

					@include respond-between(sm, md) {
						height: 340px;
					}

					@include respond-between(xs, sm) {
						height: 240px;
					}

					@include respond-below(xs) {
						height: 200px;
					}
				}
			}
		}
	}

	img {
		max-width: 100%;
		min-width: 100px;
	}

	.row-list {
		img {
			width: 100px;
			height: 100px;
			object-fit: cover;
		}
	}

	h2 {
		@extend .title-big;
		text-align: center;
	}

	.gray-bg {
		.row {
			@extend .top-padding;

			&:nth-child(2) {
				max-width: 70%;
				justify-content: center;
				margin: auto;

				div[class^='col-'] {
					text-align: center;
				}
			}
		}
	}
}

.color-box {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	.color-content {
		width: 12.5%;
		text-align: center;
		@extend .bottom-margin;

		@include respond-between(sm, md) {
			width: 18.5%;
		}

		@include respond-between(xs, sm) {
			width: 24.5%;
		}

		@include respond-below(xs) {
			width: 49.5%;
		}
	}
}

#scontainer-52 {
	@extend .top-margin;
	@extend .bottom-margin;

	img {
		max-width: 100%;
	}

	h2 {
		@extend .title-big;

		line-height: 40px;
		margin-bottom: 40px;

		@include respond-below(md) {
			margin-top: 50px;
		}

		strong {
			font-size: 42px;

			@include respond-below(xs) {
				font-size: 30px;
			}
		}
	}

	.row {
		&:first-child {
			div[class^='col-'] {
				&:last-child {
					@include respond-above(lg) {
						padding: 90px;
					}

					padding: 0 15px;
				}
			}
		}

		&:nth-child(2) {
			@extend .top-margin;
		}

		&:last-child {
			div[class^='col-'] {
				text-align: center;
			}

			h3 {
				@extend .subtitle-big;

				&:first-child {
					@extend .top-padding;
					margin-bottom: 20px;
				}

				&:last-child {
					@extend .bottom-padding;
					margin-bottom: 0;
				}

				a {
					@extend .subtitle-big;
				}
			}
		}
	}
}

#scontainer-55 {
	.gray-bg {
		@extend .top-padding;
		text-align: center;

		.row {
			&:not(:last-child) {
				@extend .bottom-margin;
			}

			&:nth-child(2) {
				margin-left: auto;
				margin-right: auto;

				@include respond-above(md) {
					max-width: 70%;
				}
			}
		}

		img {
			margin-bottom: 20px;
		}
	}

	#scontainer-55-content {
		> p {
			&:last-child {
				margin-bottom: 0;
			}

			> img {
				width: 100%;
				object-fit: cover;
			}
		}
	}
}

#scontainer-56 {
	background-image: url('/upload/filemanager/images/produkty/okna/Okna-PVC/okna-pvc-banner.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	height: 588px;
	display: flex;
	align-items: center;
	justify-content: center;

	#scontainer-56-content {
		width: 100%;

		.row {
			div[class^='col-'] {
				&:last-child {
					padding-left: 200px;
					padding-right: 100px;

					@include respond-between(sm, lg) {
						padding-left: 50px;
						padding-right: 30px;
					}

					@include respond-below(sm) {
						background: rgba(255, 255, 255, 0.5);
						padding: 15px;
						margin: auto;
						max-width: 80%;
					}

					h1 {
						@extend .title50;
					}

					p {
					}
				}
			}
		}
	}
}

#scontainer-57 {
	@extend .top-bottom-margin200;

	h2 {
		@extend .title50;
	}

	h3 {
		@extend .subtitle-big;
		font-size: 20px;

		@include respond-between(md, lg) {
			min-height: 56px;
		}

		@include respond-between(xs, sm) {
			min-height: 56px;
		}
	}

	#scontainer-57-content {
		> .row {
			@include respond-above(xs) {
				background-image: url('/upload/filemanager/images/produkty/okna/Okna-PVC/back.jpg');
				background-repeat: no-repeat;
				background-size: auto;
				background-position: 70px 20px;

				@include respond-between(sm, md) {
					background-position: center;
				}
			}

			> div[class^='col-'] {
				&:first-child {
					display: flex;
					align-items: flex-start;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
					padding-right: 100px;

					@include respond-below(xs) {
						padding-right: 15px;
						margin-bottom: 30px;
					}
				}

				&:last-child {
					div[class^='col-'] {
						&:nth-child(3),
						&:nth-child(4) {
							padding-top: 20px;
						}
					}

					p {
						padding: 60px 40px;
						background: #f2f2f2;
						color: #9c9b9b;

						@include respond-between(md, lg) {
							height: 204px;
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}

						@include respond-between(xs, sm) {
							height: 204px;
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}
					}
				}
			}
		}
	}
}

#scontainer-58 {
	.row {
		&:first-child {
			div[class^='col-'] {
				display: flex;
				justify-content: center;
				align-items: center;

				@include respond-below(xs) {
					display: block;
				}

				&:first-child {
					.model-box {
						@include respond-below(xs) {
							margin-top: 80px;
						}
					}

					@include respond-above(md) {
						border-right: 2px solid $cBlackText;
					}

					@include respond-below(md) {
						margin-bottom: 40px;
					}
				}

				&:last-child {
					.img {
						@include respond-below(xs) {
							margin-top: 40px;
						}
					}
				}

				.img {
					@include respond-below(xs) {
						text-align: center;
					}
				}

				.model-box {
					padding-left: 40px;
					padding-right: 40px;
					position: relative;

					@include respond-below(xs) {
						padding-left: 0px;
						padding-right: 0px;
					}

					.bestseller {
						position: absolute;
						top: -56px;
						left: 40px;
						@extend .text;

						font-weight: 700;
						padding: 7px 10px;
						border: 1px solid $cBlackText;

						@include respond-below(xs) {
							left: 0px;
						}
					}
				}
			}
		}

		&:nth-child(2) {
			@extend .top-bottom-margin;

			div[class^='col-'] {
				@include respond-below(xs) {
					margin-bottom: 30px;
				}

				.img {
					@include respond-below(md) {
						text-align: center;
					}
				}
			}

			img {
				margin-bottom: 30px;

				@include respond-between(sm, md) {
					margin-top: 30px;
				}
			}
		}
	}

	h4 {
		@extend .text;
		font-size: 18px;
	}

	a {
		@extend .btn6;
	}
}

#scontainer-59 {
	h3 {
		font-size: 43px;
		font-weight: 400;
	}

	h2 {
		@extend .title50;
	}

	#scontainer-59-content {
		> .row {
			background-image: url('/upload/filemanager/images/produkty/okna/Okna-PVC/back3.png');
			background-repeat: no-repeat;
			background-size: auto;
			background-position: right bottom;

			@include respond-between(sm, md) {
				flex-direction: column-reverse;
			}

			> div[class^='col-'] {
				&:first-child {
					display: flex;
					align-items: center;
				}

				&:last-child {
					display: flex;
					align-items: flex-start;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
					padding-right: 100px;
					padding-top: 150px;
					padding-bottom: 150px;

					@include respond-between(sm, md) {
						padding-top: 0px;
						padding-bottom: 50px;
					}

					@include respond-below(xs) {
						padding-right: 15px;
						padding-top: 108px;
					}
				}

				.row {
					div[class^='col-'] {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						img {
							margin-right: 50px;
						}

						&:not(:last-child) {
							margin-bottom: 55px;
						}
					}
				}
			}
		}
	}
}

#scontainer-60 {
	@extend .top-margin;

	.btn5 {
		width: 250px;
	}

	.row {
		@include respond-above(xs) {
			background-image: url('/upload/filemanager/images/produkty/okna/Okna-PVC/okna-pvc.jpg');

			background-repeat: no-repeat;
			background-size: contain;
			background-position: left bottom;
		}

		@include respond-between(sm, md) {
			background-size: cover;
		}

		@include respond-below(xs) {
			background-size: cover;
		}

		@include respond-above(lg) {
			min-height: 700px;
		}

		div[class^='col-'] {
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;

			@include respond-above(lg) {
				padding-left: 40px;
			}

			div {
				@include respond-between(xs, lg) {
					background: rgba(255, 255, 255, 0.6);
					padding: 20px;
				}

				@include respond-below(xs) {
					background: rgba(255, 255, 255, 0.8);
					padding: 0px;
				}
			}

			&:last-child {
				@include respond-between(sm, md) {
					margin-top: 50px;
				}
			}
		}
	}

	h2 {
		@extend .title50;
	}
}

.box06 {
	@extend .top-padding;

	padding-bottom: 30px;

	h2 {
		@extend .title50;
		margin-bottom: 40px;
	}
}

.box07 {
	background-image: url('/upload/filemanager/images/produkty/dodatki/dark-bg.png');
	background-size: cover;
	padding-top: 80px;
	padding-bottom: 80px;

	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;

	div[class^='col-'] {
		&:not(:last-child) {
			> div {
				@include respond-below(md) {
					margin-bottom: 30px;
				}
			}
		}

		&:last-child {
			> div {
				.btn5 {
					img {
						@include respond-below(xs) {
							width: 54px !important;
						}
					}
				}
			}
		}

		> div {
			background-color: rgba(255, 255, 255, 0.87);
			padding: 50px 20px;
			text-align: center;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;

			> img {
				margin-bottom: 40px;
			}

			.btn5 {
			}
		}
	}
}

.box20 {
	div[class^='col-'] {
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
	}

	h2 {
		@extend .title;
		font-size: 50px;
		text-transform: uppercase;
		font-weight: 600;
		position: relative;
		margin-bottom: 40px;

		@include respond-below(xs) {
			font-size: 32px;
		}

		&:before {
			position: absolute;
			content: '';
			left: -10px;
			top: -18px;
			width: 212px;
			height: 100px;
			border: 2px solid $cYellow;
			z-index: -1;

			@include respond-below(xs) {
				top: -35px;
			}
		}
	}
}

.box21 {
	div[class^='col-'] {
		text-align: center;

		img {
			max-width: 100%;
			margin-bottom: 30px;

			@include respond-between(md, lg) {
				height: 234px;
			}

			@include respond-between(sm, md) {
				height: 167px;
			}
		}

		h4 {
			font-size: 20px;
			font-weight: 600;
		}

		&:first-child,
		&:nth-child(2) {
			@include respond-between(xs, sm) {
				margin-bottom: 30px;
			}
		}

		@include respond-below(xs) {
			margin-bottom: 30px;
		}
	}

	@extend .bottom-margin;
}

.box22 {
	h3 {
		@extend .title2;
	}
}

.box23 {
	p {
		padding-top: 15px;
		padding-bottom: 15px;
		margin-bottom: 0;
		min-height: 72px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-transform: uppercase;
	}

	div[class^='col-'] {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;

		div {
			width: calc((100% / 9) - 12px);
			margin: 0 6px 15px;
			background: $cGrayBg;
			text-align: center;

			@include respond-between(md, lg) {
				width: calc((100% / 6) - 12px);
			}

			@include respond-between(sm, md) {
				width: calc((100% / 5) - 12px);
			}

			@include respond-between(xs, sm) {
				width: calc((100% / 3) - 12px);
			}

			@include respond-below(xs) {
				width: calc((100% / 2) - 12px);
			}

			img {
				width: 100%;
				height: 137px;
				object-fit: cover;
			}
		}
	}
}

.box24 {
	margin-top: 20px;
	margin-bottom: 20px;

	h4 {
		@extend .text;
		font-size: 18px;
	}

	p {
	}
}

.img-100 {
	img {
		width: 100%;
		object-fit: cover;
	}
}

.article-20,
.article-21 {
	h1 {
		text-align: center;
		@extend .title-big;

		@extend .top-margin;
	}
}

.article-20,
.article-21,
.article-22 {
	h1 {
		@extend .title-big;
	}

	.nav-tabs {
		@extend .nav-tabs-style;

		a {
			&:before {
				content: 'drzwi' !important;
				left: calc(50% - 30px) !important;
			}
		}
	}

	.tab-content {
		@extend .top-bottom-margin;
	}

	.box25 {
		img {
			width: 100%;
			@extend .bottom-margin;

			@include respond-below(xs) {
				width: 100%;
				height: 249px;
				object-fit: cover;
				object-position: right;
			}

			@include respond-between(xs, sm) {
				width: 100%;
				height: 449px;
				object-fit: cover;
				object-position: right;
			}

			@include respond-between(sm, md) {
				width: 100%;
				height: 449px;
				object-fit: cover;
				object-position: right;
			}
		}

		h2 {
			@extend .title;
			margin-bottom: 5px;
		}

		h3 {
			@extend .text;
			font-size: 15px;
		}

		p {
			margin-bottom: 50px;
		}
	}
}

.article-22 {
	.nav-tabs {
		a {
			padding: 63px 25px 30px 25px !important;

			&:before {
				content: 'rolety' !important;
				left: calc(50% - 35px) !important;
			}
		}
	}
}

.box27 {
	.row {
		&:nth-child(4) {
			img {
				max-height: 438px;
			}
		}
	}

	div[class^='col-'] {
		text-align: center;
		@extend .bottom-margin;

		img {
			margin-bottom: 30px;
			width: auto;
			max-width: 100%;
		}

		p {
			@extend .text;
			font-weight: 700;
			text-transform: uppercase;
			position: relative;

			&:before {
				content: '';
				position: absolute;
				bottom: -14px;
				left: calc(50% - 12px);
				font-weight: 700;
				width: 24px;
				height: 3px;
				background: $cBlackText;
			}
		}

		h5 {
			@extend .text;
			font-weight: 700;
			text-transform: uppercase;
			position: relative;
		}

		h2 {
			margin-bottom: 0;
			text-transform: uppercase;
		}
	}
}

.box28 {
	.row {
		@extend .bottom-margin;
	}

	div[class^='col-'] {
		&:first-child {
			display: flex;
			align-items: flex-end;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;
			text-align: right;
			padding: 0 50px;

			@include respond-below(lg) {
				text-align: center;
				align-items: center;
				margin-bottom: 20px;
			}

			@include respond-below(xs) {
				padding: 0px 15px;
			}
		}

		&:last-child {
			text-align: left;

			@include respond-below(lg) {
				text-align: center;
			}
		}
	}

	img {
		max-width: 100%;
	}

	h2 {
		@extend .title-big;
		font-size: 30px;
	}
}

.box29 {
	h2 {
		@extend .title50;

		&:before {
			display: none;
		}
	}

	@extend .bottom-margin;
}

.box30 {
	position: relative;

	> div[class^='col-'] {
		> img {
			width: 100%;
			object-fit: cover;
			height: 500px;
		}
	}

	div[class^='col-'] {
		&:nth-child(2) {
			padding-left: 250px;
			padding-top: 30px;

			@include respond-below(xs) {
				padding-left: 15px;
			}
		}
	}

	.img-line {
		position: absolute;
		left: 50px;
		bottom: 0;

		@include respond-below(xs) {
			display: none;
		}
	}
}

.box31 {
	@extend .top-bottom-margin;

	img {
		max-height: 480px;
		margin-bottom: 20px;
		max-width: 100%;
	}

	div[class^='col-'] {
		@include respond-below(sm) {
			margin-bottom: 30px;
			text-align: center;
		}
	}
}

.box32 {
	position: relative;

	> div[class^='col-'] {
		> img {
			width: 100%;
			object-fit: cover;
			height: 500px;
		}
	}

	div[class^='col-'] {
		&:nth-child(2) {
			padding-left: 50px;
			padding-top: 30px;

			@include respond-below(xs) {
				padding-left: 15px;
			}
		}
	}

	.img-line {
		position: absolute;
		right: 250px;
		top: -50px;

		@include respond-below(xs) {
			display: none;
		}
	}
}

.box33 {
	@extend .top-bottom-margin;

	img {
		margin-top: 30px;
		width: 100%;
	}

	h2 {
		@extend .title;
	}
}

.box34 {
	> .row {
		img {
			max-width: 100%;
			margin-bottom: 30px;
		}

		&:first-child {
			> div[class^='col-'] {
				&:first-child {
					@include respond-below(md) {
						text-align: center;
					}
				}

				&:nth-child(2) {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
					padding-left: 100px;
					padding-right: 150px;
					padding-bottom: 200px;

					@include respond-below(lg) {
						padding-bottom: 100px;
					}

					@include respond-below(md) {
						padding-left: 15px;
						padding-right: 15px;
					}
				}

				div[class^='col-'] {
					img {
						margin-bottom: 0;
					}

					@include respond-between(xs, md) {
						margin-bottom: 30px;
					}
				}
			}
		}
	}

	div[class^='col-'] {
	}
}

.box35,
.box40,
.box42,
.box44,
.box47,
.box47-2,
.box47-3,
.box47-4,
.box47-5,
.box47-6,
.box47-7,
.box47-8 {
	div[class^='col-'] {
		padding: 0;
		position: relative;
	}

	img {
		width: 100%;
		object-fit: cover;

		@include respond-between(sm, md) {
			height: 450px;
		}

		@include respond-between(xs, sm) {
			height: 450px;
		}

		@include respond-below(xs) {
			height: 450px;
		}
	}

	.text-center-box {
		position: absolute;
		top: 0;
		left: 50%;

		background: #ebebeb;
		padding: 70px 80px;

		@include respond-between(xs, sm) {
			padding: 20px;
		}

		@include respond-below(xs) {
			padding: 10px;
		}

		h1 {
			@extend .title;
			margin-bottom: 12px;
			text-transform: uppercase;
		}

		p {
			@extend .text;
		}

		h2 {
			@extend .title;
			margin-bottom: 12px;
		}
	}
}

.box47-8 {
	img {
		height: 900px;

		@include respond-between(sm, md) {
			height: 800px;
		}

		@include respond-between(xs, sm) {
			height: 800px;
		}

		@include respond-below(xs) {
			height: 1200px;
		}
	}

	.text-center-box {
		top: calc(50% - 342px);
		left: calc(50% - 400px);
		width: 800px;

		@include respond-between(sm, md) {
			top: calc(50% - 373px);
			left: calc(50% - 350px);
			width: 700px;
		}

		@include respond-between(xs, sm) {
			top: calc(50% - 355px);
			left: calc(50% - 250px);
			width: 500px;
		}

		@include respond-below(xs) {
			top: calc(50% - 538px);
			left: calc(50% - 140px);
			width: 280px;
		}
	}

	.btn4 {
		margin-top: 20px;
	}

	h1 {
		@extend .title;
	}
}

.box47-7 {
	img {
		height: 900px;

		@include respond-between(sm, md) {
			height: 800px;
		}

		@include respond-between(xs, sm) {
			height: 700px;
		}

		@include respond-below(xs) {
			height: 700px;
		}
	}

	.text-center-box {
		top: calc(50% - 202px);
		left: calc(50% - 400px);
		width: 800px;

		@include respond-between(sm, md) {
			top: calc(50% - 202px);
			left: calc(50% - 350px);
			width: 700px;
		}

		@include respond-between(xs, sm) {
			top: calc(50% - 162px);
			left: calc(50% - 250px);
			width: 500px;
		}

		@include respond-below(xs) {
			top: calc(50% - 233px);
			left: calc(50% - 140px);
			width: 280px;
		}
	}

	.btn4 {
		margin-top: 20px;
	}

	h1 {
		@extend .title;
	}
}

.box42 {
	.text-center-box {
		top: calc(50% - 200px);
		left: auto;
		right: 15%;
		width: 633px;

		@include respond-between(sm, md) {
			top: calc(50% - 200px);
			left: calc(50% - 316px);
			right: auto;
			width: 633px;
		}

		@include respond-between(xs, sm) {
			top: calc(50% - 172px);
			left: calc(50% - 250px);
			right: auto;
			width: 500px;
		}

		@include respond-below(xs) {
			top: calc(50% - 257px);
			left: calc(50% - 135px);
			right: auto;
			width: 270px;
		}
	}

	img {
		height: 737px;
	}
}

.box47 {
	img {
		height: 900px;

		@include respond-between(xs, sm) {
			height: 800px;
		}

		@include respond-below(xs) {
			height: 800px;
		}
	}

	.text-center-box {
		top: calc(50% - 305px);
		left: calc(50% - 400px);
		width: 800px;

		@include respond-between(sm, md) {
			top: calc(50% - 275px);
			left: calc(50% - 350px);
			width: 700px;
		}

		@include respond-between(xs, sm) {
			top: calc(50% - 223px);
			left: calc(50% - 250px);
			width: 500px;
		}

		@include respond-below(xs) {
			top: calc(50% - 320px);
			left: calc(50% - 140px);
			width: 280px;
		}
	}

	.btn4 {
		margin-top: 20px;
	}

	h1 {
		@extend .title;
	}
}

.box47-2 {
	img {
		height: 900px;

		@include respond-between(sm, md) {
			height: 800px;
		}

		@include respond-between(xs, sm) {
			height: 700px;
		}

		@include respond-below(xs) {
			height: 700px;
		}
	}

	.text-center-box {
		top: calc(50% - 240px);
		left: calc(50% - 400px);
		width: 800px;

		@include respond-between(sm, md) {
			top: calc(50% - 250px);
			left: calc(50% - 350px);
			width: 700px;
		}

		@include respond-between(xs, sm) {
			top: calc(50% - 223px);
			left: calc(50% - 250px);
			width: 500px;
		}

		@include respond-below(xs) {
			top: calc(50% - 320px);
			left: calc(50% - 140px);
			width: 280px;
		}
	}

	.btn4 {
		margin-top: 20px;
	}

	h1 {
		@extend .title;
	}
}

.box47-5 {
	img {
		height: 900px;

		@include respond-between(sm, md) {
			height: 800px;
		}

		@include respond-between(xs, sm) {
			height: 700px;
		}

		@include respond-below(xs) {
			height: 700px;
		}
	}

	.text-center-box {
		top: calc(50% - 172px);
		left: calc(50% - 400px);
		width: 800px;

		@include respond-between(sm, md) {
			top: calc(50% - 194px);
			left: calc(50% - 350px);
			width: 700px;
		}

		@include respond-between(xs, sm) {
			top: calc(50% - 144px);
			left: calc(50% - 250px);
			width: 500px;
		}

		@include respond-below(xs) {
			top: calc(50% - 194px);
			left: calc(50% - 140px);
			width: 280px;
		}
	}

	.btn4 {
		margin-top: 20px;
	}

	h1 {
		@extend .title;
	}
}

.box47-6 {
	img {
		height: 900px;

		@include respond-between(sm, md) {
			height: 800px;
		}

		@include respond-between(xs, sm) {
			height: 700px;
		}

		@include respond-below(xs) {
			height: 700px;
		}
	}

	.text-center-box {
		top: calc(50% - 133px);
		left: calc(50% - 400px);
		width: 800px;

		@include respond-between(sm, md) {
			top: calc(50% - 133px);
			left: calc(50% - 350px);
			width: 700px;
		}

		@include respond-between(xs, sm) {
			top: calc(50% - 83px);
			left: calc(50% - 250px);
			width: 500px;
		}

		@include respond-below(xs) {
			top: calc(50% - 102px);
			left: calc(50% - 140px);
			width: 280px;
		}
	}

	.btn4 {
		margin-top: 20px;
	}

	h1 {
		@extend .title;
	}
}

.box47-3 {
	img {
		height: 700px;

		@include respond-between(sm, md) {
			height: 700px;
		}

		@include respond-between(xs, sm) {
			height: 700px;
		}

		@include respond-below(xs) {
			height: 700px;
		}
	}

	.text-center-box {
		position: relative;
		margin-top: 25px;
		top: 0;
		left: 0;

		@include respond-between(xs, sm) {
			top: calc(50% - 175px);
			left: calc(50% - 250px);
			width: 500px;
		}

		@include respond-below(xs) {
			top: calc(50% - 246px);
			left: calc(50% - 130px);
			width: 260px;
		}
	}

	.btn4 {
		margin-top: 20px;
	}

	h1 {
		@extend .title;
	}
}

.box47-4 {
	img {
		height: 700px;

		@include respond-below(xs) {
			height: 850px;
		}
	}

	.text-center-box {
		top: calc(50% - 272px);
		left: calc(50% - 400px);
		width: 800px;

		@include respond-between(sm, md) {
			top: calc(50% - 293px);
			left: calc(50% - 350px);
			width: 700px;
		}

		@include respond-between(xs, sm) {
			top: calc(50% - 264px);
			left: calc(50% - 250px);
			width: 500px;
		}

		@include respond-below(xs) {
			top: calc(50% - 379px);
			left: calc(50% - 140px);
			width: 280px;
		}
	}

	.btn4 {
		margin-top: 20px;
	}

	h1 {
		@extend .title;
	}
}

.box35 {
	.text-center-box {
		top: calc(50% - 131px);
		left: calc(50% - 316px);
		width: 633px;

		@include respond-between(xs, sm) {
			width: 500px;
			top: calc(50% - 81px);
			left: calc(50% - 250px);
		}

		@include respond-below(xs) {
			width: 280px;
			top: calc(50% - 94px);
			left: calc(50% - 140px);
		}
	}
}

.box40 {
	.text-center-box {
		top: calc(50% - 283px);
		left: calc(50% - 316px);
		width: 633px;

		@include respond-between(sm, md) {
		}

		@include respond-between(xs, sm) {
			top: calc(50% - 233px);
			left: calc(50% - 250px);
			width: 500px;
		}

		@include respond-below(xs) {
			top: calc(50% - 335px);
			left: calc(50% - 140px);
			width: 280px;
		}
	}

	img {
		@include respond-above(lg) {
			height: 1000px;
		}

		@include respond-between(md, lg) {
			height: 900px;
		}

		@include respond-between(sm, md) {
			height: 900px;
		}

		@include respond-between(xs, sm) {
			height: 700px;
		}

		@include respond-below(xs) {
			height: 800px;
		}
	}
}

.box36 {
	@extend .top-bottom-margin;

	img {
		max-width: 100%;
		margin-bottom: 20px;
	}

	h2 {
		@extend .title;
	}

	div[class^='col-'] {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
	}
}

.box37 {
	margin-bottom: 70px;

	h2 {
		@extend .title;
		text-align: center;
		margin-bottom: 10px;
	}

	h3 {
		@extend .title;
		font-size: 18px;
		font-weight: 400;
		color: #929292;
		text-align: center;
		margin-bottom: 20px;
	}

	h4 {
		@extend .title;
		font-size: 24px;
	}

	img {
		margin-top: 30px;
		width: 100%;
	}
}

.box38 {
	@extend .top-margin;

	h2 {
		@extend .title;
	}

	img {
		max-width: 100%;
	}
}

.box39 {
	img {
		max-width: 100%;
	}

	h2 {
		@extend .title;

		margin-bottom: 10px;
	}

	h3 {
		@extend .title;
		font-size: 18px;
		font-weight: 400;
		color: #929292;
		margin-bottom: 20px;
	}

	h4 {
		@extend .title;
		font-size: 24px;
	}

	div[class^='col-'] {
		&:first-child {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.box41 {
	@extend .bottom-margin;

	.row {
		&:first-child {
			margin-bottom: 50px;
		}
	}

	h2 {
		@extend .title;
		text-align: center;
		margin-bottom: 50px;
	}

	img {
		max-width: 100%;
	}
}

.box43 {
	@extend .top-bottom-margin;

	div[class^='col-'] {
		text-align: right;
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;

		img {
			max-width: 100%;
		}
	}
}

.box44 {
	h3 {
		@extend .subtitle-big;
		margin-bottom: 20px;
	}

	.text-center-box {
		top: calc(50% - 135px);
		left: auto;
		right: 15%;
		width: 633px;

		@include respond-between(sm, md) {
			top: calc(50% - 123px);
			left: calc(50% - 316px);
			right: auto;
			width: 633px;
		}

		@include respond-between(xs, sm) {
			top: calc(50% - 83px);
			left: calc(50% - 250px);
			right: auto;
			width: 500px;
		}

		@include respond-below(xs) {
			top: calc(50% - 88px);
			left: calc(50% - 135px);
			right: auto;
			width: 270px;
		}
	}

	img {
		height: 560px;
	}
}

.box45 {
	@extend .top-bottom-padding;

	h4 {
		@extend .subtitle-big;
		margin-bottom: 20px;
	}
}

.box46 {
	@extend .top-margin;

	h3 {
		@extend .title;
		@extend .bottom-margin;
	}

	div[class^='col-'] {
		text-align: center;
	}

	img {
		margin-bottom: 20px;
	}
}

.box48 {
	@extend .top-padding;
	text-align: center;

	h2 {
		@extend .title;
	}
}

.box49 {
	img {
		max-width: 100%;
	}

	.row {
		&:first-child {
			@extend .bottom-margin;

			div[class^='col-'] {
				&:last-child {
					text-align: center;
				}
			}
		}

		&:last-child {
			h3 {
				text-align: center;
				margin-bottom: 70px;
			}

			li {
				margin-bottom: 20px;
			}

			img {
				margin-bottom: 50px;
			}
		}
	}

	h3 {
		@extend .title;
		margin-bottom: 20px;
	}

	p {
		margin-bottom: 20px;
	}
}

.window-blind-colors {
	@extend .top-bottom-padding;

	.row {
		&:first-child {
			div[class^='col-'] {
				text-align: center;

				h2 {
					@extend .title;
				}
			}
		}

		&:last-child {
			padding-top: 50px;

			div[class^='col-'] {
				margin-top: 50px;
				margin-bottom: 50px;

				@include respond-below(xs) {
					margin-top: 25px;
					margin-bottom: 25px;
					text-align: center;
				}

				img {
					width: 244px;
					max-width: 100%;
				}
			}
		}
	}
}

.box-center-text {
	@extend .top-bottom-margin;

	p {
		text-align: center;
		@extend .left-right-margin;
	}
}

.article-26 {
	.row {
		&:nth-child(2) {
			@extend .top-margin;

			h2 {
				@extend .title;
				text-align: center;
				margin-bottom: 50px;
			}
		}

		&:nth-child(3) {
			h3 {
				@extend .title;
				margin-bottom: 20px;
				padding-bottom: 20px;
				position: relative;

				&:before {
					position: absolute;
					content: '';
					bottom: 0;
					width: 200px;
					height: 2px;
					background: $cBlackText;
				}
			}

			p {
				margin-bottom: 20px;
			}

			div[class^='col-'] {
				&:first-child {
					display: flex;
					align-items: flex-start;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
				}
			}

			img {
				max-width: 100%;
			}
		}

		&:nth-child(4) {
			@extend .top-bottom-margin;

			div[class^='col-'] {
				background: $cGrayBg;
				padding: 25px;

				&:nth-child(2) {
					background: #dbdbdb;
				}

				p {
					position: relative;
					margin-bottom: 0;
					padding-bottom: 5px;

					&:before {
						position: absolute;
						content: '';
						width: 25px;
						height: 1px;
						background: #bdbdbd;
						bottom: 0;
					}
				}
			}
		}

		&:nth-child(5) {
			img {
				max-width: 100%;

				@include respond-below(sm) {
					margin-bottom: 30px;
				}
			}

			div[class^='col-'] {
				&:last-child {
					display: flex;
					align-items: flex-start;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
				}

				div {
					background: $cGrayBg;
					display: inline-block;
					padding: 25px;
					margin-bottom: 30px;

					p {
						margin-bottom: 0;
						text-align: center;
					}
				}

				> p {
					max-width: 450px;
				}
			}
		}

		&:nth-child(6) {
			@extend .top-bottom-margin;

			@include respond-above(sm) {
				height: 550px;
				background-image: url('/upload/filemanager/images/gwarancja/img3.png');
				background-position: center right;
				background-repeat: no-repeat;
				background-size: contain;
			}

			div[class^='col-'] {
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;

				div {
					background: $cGrayBg;
					padding: 30px;
					text-align: center;

					h5 {
						@extend .text;
						font-size: 18px;
						margin-bottom: 15px;
					}

					p {
						margin-bottom: 0;
					}
				}
			}
		}

		&:nth-child(7) {
			@extend .bottom-margin;

			img {
				max-width: 100%;

				@include respond-below(sm) {
					margin-bottom: 30px;
				}
			}

			div[class^='col-'] {
				&:last-child {
					display: flex;
					align-items: flex-start;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
				}
			}
		}
	}
}

.article-27 {
	.container {
		.row {
			&:first-child {
				@extend .top-margin;

				div[class^='col-'] {
					margin-bottom: 60px;
				}

				h3 {
					@extend .title;
					margin-bottom: 10px;
				}

				p {
					max-width: 460px;
				}
			}

			&:last-child {
				@extend .bottom-margin;
				margin-top: 50px;
				text-align: center;

				img {
					max-width: 106px;
					margin-bottom: 30px;
				}

				h4 {
					@extend .subtitle-big;
					margin-bottom: 30px;
				}
			}
		}
	}
}

.article-29,
.article-31 {
	@extend .bottom-margin;

	h1 {
		@extend .title;
		text-align: center;
		@extend .top-margin;
		margin-bottom: 70px;
	}

	p {
		margin-bottom: 30px;
	}

	a {
		@extend .text;
		font-weight: 700;
		text-decoration: underline;
	}

	ol {
		> li {
			margin-bottom: 20px;

			> ul {
				list-style-type: disc;

				li {
					margin-bottom: 10px;

					ul {
						list-style-type: circle;
					}
				}
			}
		}
	}
}

ul {
	padding-inline-start: 36px;
}

.article-30 {
	@extend .bottom-margin;

	h1 {
		@extend .title;
		text-align: center;
		@extend .top-margin;
		margin-bottom: 10px;
	}

	h6 {
		@extend .text;
		font-size: 18px;
		text-align: center;
		margin-bottom: 70px;
	}

	p {
		margin-bottom: 30px;
	}

	a {
		@extend .text;
		font-weight: 700;
		text-decoration: underline;
	}

	ul {
		li {
			margin-bottom: 20px;
		}
	}

	.row:last-child {
		margin-top: 30px;

		p {
			margin-bottom: 0;
		}

		div[class^='col-'] {
			&:first-child {
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;

				img {
					margin-bottom: 15px;
				}
			}

			&:last-child {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;

				@include respond-between(xs, lg) {
					align-items: flex-end;
				}

				@include respond-below(xs) {
					align-items: flex-start;
					margin-top: 50px;
				}

				img {
					margin-top: 15px;
				}
			}
		}
	}
}

.guide {
	text-align: center;
	@extend .bottom-margin;

	h1 {
		@extend .title;
		text-transform: uppercase;
		@extend .top-margin;
	}

	p {
		max-width: 680px;
		margin: auto;
	}
}

.article-entry {
	margin-bottom: 30px;

	.img {
		height: 330px;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.article-content {
		.article-title {
			margin-top: 30px;
			margin-bottom: 15px;

			a {
				@extend .subtitle-big;
				text-transform: uppercase;
				display: block;

				@include respond-below(sm) {
					font-weight: 700;
				}
			}
		}

		.entry {
			display: -webkit-box;
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
			overflow: hidden;
			margin-bottom: 20px;
			font-weight: 400;

			strong {
				font-weight: 400;
			}
		}

		.more {
			@extend .text;
			text-decoration: underline;
			padding: 6px 12px 6px 0px;
			transition: all 0.5s ease;
			border-radius: 4px;

			&:hover {
				padding: 6px 12px;
				border: 1px solid $cBlackText;
			}
		}
	}
}

div[class^='col-'] {
	&:not(:last-child) {
		.article-entry {
			margin-bottom: 50px;
		}
	}
}

.pager {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-inline-start: 0;
	list-style-type: none;

	@extend .top-bottom-margin;

	li {
		&:not(:last-child) {
			margin-right: 10px;
		}

		a {
			width: 48px;
			height: 48px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #ededef;
			border-radius: 2px;

			&.inactive {
				opacity: 0.3;
				pointer-events: none;
			}
		}
	}
}

.article-box-container {
}

.article-box {
	@include respond-above(md) {
		padding-right: 40px;
	}

	@extend .bottom-margin;

	.article-title {
		@extend .title;
		font-weight: 700;
		margin-bottom: 30px;
	}

	img {
		max-width: 100%;
	}
}

.right-box-title {
	background: $cGrayBg;
	padding: 8px;
	margin-bottom: 15px;
	text-align: center;

	h3 {
		@extend .title;
		font-size: 26px;
		margin: 0;

		text-transform: uppercase;
	}

	img {
		max-width: 100%;
	}

	p {
		margin: 10px 0;
	}

	&:nth-child(3) {
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;

		h3 {
			margin-bottom: 8px;
		}
	}

	&:last-child {
		padding: 20px 8px;
	}
}

.news-list {
	padding-inline-start: 0;

	li {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10px;

		@include respond-between(md, lg) {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			margin-bottom: 20px;
			flex-direction: column;
		}

		a {
			font-size: 11px;
			line-height: 15px;
			color: $cBlackText;
			font-weight: 600;
			text-transform: uppercase;
			display: grid;
			grid-auto-flow: column;
			gap: 10px;
			width: 100% !important;
		}

		.text {
			line-height: 1.5;
			font-size: 0.8rem;
		}

		.img {
			width: 120px;
			position: relative;
			height: 100%;

			@include respond-between(md, lg) {
				margin-bottom: 5px;
			}

			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
		}
	}
}

.article-32 {
	.text {
		> .row {
			&:first-child {
				text-align: center;
				@extend .bottom-margin;
				padding-top: 50px;

				img {
					max-width: 100%;
				}
			}

			&:last-child {
				text-align: center;

				h5 {
					@extend .top-bottom-margin;
					@extend .title;
				}
			}
		}
	}
}

.timeline {
	div[class^='col-'] {
		&:first-child {
			border-right: 4px solid $cBlackText;
			padding-top: 50px;
			padding-bottom: 50px;
			padding-right: 35px;
			position: relative;

			@include respond-below(xs) {
				padding-right: 11px;
			}

			&:before {
				position: absolute;
				content: '';
				width: 20px;
				height: 20px;
				border-radius: 50%;
				border: 3px solid $cBlackText;
				right: -12px;
				top: -14px;

				background: #fff;
			}

			&:after {
				position: absolute;
				content: '';
				width: 20px;
				height: 20px;
				border-radius: 50%;
				border: 3px solid $cBlackText;
				right: -12px;
				bottom: -14px;

				background: #fff;
			}
		}

		&:last-child {
			padding-left: 35px;
			padding-bottom: 50px;

			@include respond-below(xs) {
				padding-left: 11px;
			}
		}
	}

	.calendar-title {
		padding: 10px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		font-weight: 700;
		position: relative;

		&:before {
			position: absolute;
			content: '';
			top: 9px;
			width: 0;
			height: 0;
			border-top: 12px solid transparent;
			border-bottom: 12px solid transparent;
			border-left: 12px solid $cBlackText;
			right: -12px;
		}

		&.yellow-bg {
			background: $cYellow;
			color: #000;

			&:before {
				border-left: 12px solid $cYellow;
			}
		}

		&.black-bg {
			background: $cBlackText;
			color: #fff;

			&:before {
				border-left: 12px solid $cBlackText;
			}
		}

		&.gray-bg {
			background: $cGrayLightText;
			color: $cBlackText;

			&:before {
				border-left: 12px solid $cGrayLightText;
			}
		}
	}

	.calendar-text {
		background: $cGrayLightBg;
		padding: 30px 15px;

		@include respond-below(xs) {
			padding: 30px 8px;
		}

		p {
			&:last-child {
				margin-bottom: 0;
			}

			@include respond-below(xs) {
				font-size: 12px;
			}
		}
	}

	.calendar-img {
		width: 100%;
		height: 250px;

		@include respond-below(sm) {
			height: 100px;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.left-calendar {
		background: gray;
		position: relative;
		border-radius: 5px;
		margin-bottom: 40px;

		@include respond-above(md) {
			margin-left: 100px;
		}

		&:before {
			position: absolute;
			content: '';
			width: 40px;

			height: 40px;
			border-radius: 50%;
			border: 3px solid $cBlackText;
			right: -57px;
			top: 0px;
			background: #fff;

			@include respond-below(xs) {
				display: none;
			}
		}

		.calendar-title {
			text-align: right;
		}
	}

	.right-calendar {
		background: gray;
		position: relative;
		border-radius: 5px;
		margin-bottom: 40px;

		@include respond-above(md) {
			margin-right: 100px;
		}

		&:first-child {
			margin-top: 105px;
		}

		&:before {
			position: absolute;
			content: '';
			width: 40px;
			background: #fff;
			height: 40px;
			border-radius: 50%;
			border: 3px solid $cBlackText;
			left: -57px;
			top: 0px;

			@include respond-below(xs) {
				display: none;
			}
		}

		.calendar-title {
			text-align: left;

			&:before {
				border-left: none;
				border-right: 12px solid $cBlackText;
				left: -12px;
				right: auto;
			}

			&.yellow-bg {
				&:before {
					border-left: none;
					border-right: 12px solid $cYellow;
				}
			}

			&.black-bg {
				&:before {
					border-left: none;
					border-right: 12px solid $cBlackText;
				}
			}

			&.gray-bg {
				&:before {
					border-left: none;
					border-right: 12px solid $cGrayLightText;
				}
			}
		}
	}
}

.contact-new-form {
	form {
		.form-check-label {
			@extend .text;
			font-size: 11px;
		}

		input,
		textarea {
			@extend .text;
			font-size: 13px;
			border: 1px solid #606060;
			border-radius: 0;

			&:focus {
				box-shadow: none;
			}
		}

		a {
			@extend .text;
			font-weight: 600;
		}

		.btn4 {
			float: right;
		}

		p:last-child {
			margin-top: 10px;
		}
	}
}

.contact-new {
	background-image: url('/upload/filemanager/images/kontakt-nowy/Vidok-o-nas-firma-image-4.jpg');

	background-size: cover;

	#scontainer-67 {
		@extend .top-bottom-padding;

		> #scontainer-67-content {
			> .row {
				background-color: rgba(255, 255, 255, 0.9);
				box-shadow: 0 0 10px 0 #232323;
				padding: 40px 20px;
				margin-bottom: 20px;
				margin-left: 0;
				margin-right: 0;

				&:last-child {
					@include respond-below(md) {
						flex-direction: column-reverse;
					}
				}

				h1 {
					@extend .title;
					text-align: center;
					margin-bottom: 15px;
				}

				&:first-child {
					div[class^='col-'] {
						.row {
							div[class^='col-'] {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								margin-bottom: 20px;

								div {
									p {
										margin-bottom: 5px;
									}

									a {
										@extend .text;
										font-weight: 600;
									}

									&:first-child {
										img {
											width: 26px;
											height: 26px;
										}
									}

									&:last-child {
										margin-left: 15px;
									}
								}
							}
						}
					}
				}

				&:last-child {
					.collapse-box {
						transition: all 0.3s ease;

						.collapse-content {
							height: 0;
							overflow: hidden;
						}

						.collapse-title {
							transition: all 0.3s ease;
							cursor: pointer;

							h2 {
								@extend .title;
								font-size: 27px;
								color: $cBlackText;
								margin-bottom: 0;
								position: relative;
								padding-right: 20px;

								@include respond-between(md, lg) {
									font-size: 20px;
									padding-right: 20px;
								}

								@include respond-between(md, lg) {
									padding-right: 20px;
								}

								@include respond-between(xs, sm) {
									font-size: 20px;
									padding-right: 15px;
								}

								@include respond-below(xs) {
									font-size: 15px;
									padding-right: 15px;
								}

								&:before {
									content: '+';
									position: absolute;
									top: 0;
									right: 0;
									color: $cBlackText;
									font-size: 30px;

									@include respond-between(md, lg) {
										font-size: 20px;
									}

									@include respond-between(xs, sm) {
										font-size: 20px;
									}

									@include respond-below(xs) {
										font-size: 15px;
									}
								}
							}

							padding: 15px 20px;
							background: #fff;

							&:hover {
								h2 {
									color: #fff;

									&:before {
										color: #fff;
									}
								}

								background: $cBlackText;
							}
						}

						.collapse-content {
							a {
								@extend .text;
								font-weight: 600;
							}

							h3 {
								@extend .title;
								font-size: 23px;
								margin-bottom: 15px;
								padding-top: 10px;
								font-weight: 600;
							}

							img {
								margin-right: 10px;
								width: 15px;
								height: 15px;
							}
						}

						&.open {
							.collapse-title {
								h2 {
									color: #fff;

									&:before {
										content: '-';
										color: #fff;
									}
								}

								background: $cBlackText;
							}

							.collapse-content {
								height: 100%;
								padding: 20px;
							}
						}
					}
				}
			}
		}
	}
}

.button-contact {
	position: fixed;
	bottom: 65px;
	right: 65px;
	z-index: 1000;
	animation: action-box-special-contact-icon-1 10s linear infinite;
	transition: background-color 0.4s linear 0s;

	@include respond-between(sm, lg) {
		bottom: 40px;
		right: 40px;
	}

	@include respond-below(sm) {
		bottom: 75px;
		right: 10px;
	}

	&:hover {
		background-color: #fff;
		animation: action-box-special-contact-icon-2 1.5s linear 1;
	}

	img {
		width: 80px;
		height: 80px;

		@include respond-below(sm) {
			width: 50px;
			height: 50px;
		}
	}
}

@keyframes action-box-special-contact-icon-1 {
	0% {
		transform: translateY(0);
		background-color: #999999;
	}

	25% {
		transform: translateY(-10px);
		background-color: #eeeeee;
	}

	50% {
		transform: translateY(0);
		background-color: #999999;
	}

	75% {
		transform: translateY(10px);
		background-color: #eeeeee;
	}

	100% {
		transform: translateY(0);
		background-color: #999999;
	}
}

@keyframes action-box-special-contact-icon-2 {
	0% {
		transform: rotate(0) scale(1);
	}

	33% {
		transform: rotate(360deg) scale(1);
	}

	66% {
		transform: rotate(360deg) scale(1.05);
	}

	100% {
		transform: rotate(360deg) scale(1.05);
	}
}

.article-5,
.article-6 {
	margin-bottom: 50px;
}

.article-187 {
	.container {
		> .row:first-child {
			@extend .top-margin;

			h3 {
				@extend .title;
			}

			p {
				max-width: 450px;
			}
		}
	}
}

.article-188 {
	.klamki {
		@extend .top-margin;
		text-align: center;

		h2 {
			@extend .title;
			margin-bottom: 0;
		}

		p {
			text-align: center;
			margin-bottom: 0;

			@include respond-below(sm) {
				margin-bottom: 50px;
			}
		}

		img {
			box-shadow: 0 0 4px 4px #aaa;
			width: 100%;
			margin-bottom: 20px;
		}

		.row {
			&:first-child,
			&:nth-child(2),
			&:nth-child(3) {
				margin-bottom: 50px;
			}
		}
	}
}

.store-page {
	.gray-bg {
		@extend .top-bottom-padding;
	}

	.shop-name-title {
		background: $cBlackText;
		opacity: 0.7;
		margin-top: -40px;

		h1 {
			@extend .title-big;
			color: #fff;
			margin-bottom: 0;
			padding: 45px 0;
		}
	}

	.store-details {
		@extend .top-bottom-margin;

		h2 {
			@extend .subtitle-big;
			font-size: 26px;
			line-height: 40px;
			margin-bottom: 50px;
		}

		div[class^='col-'] {
			> div {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				margin-bottom: 30px;

				p {
					&:last-child {
						margin-bottom: 0;
					}
				}

				img {
					margin-right: 15px;
				}

				&.opening-hours {
					display: block;
				}
			}

			&:last-child {
				text-align: right;
			}
		}

		a {
			@extend .text;
			font-size: 18px;

			&.btn8 {
				text-transform: uppercase;
				font-size: 14px;
				margin-bottom: 20px;
			}
		}
	}

	.contact-box-03 {
		h2 {
			@extend .title;
			text-align: center;
			text-transform: uppercase;
			margin-bottom: 50px;
		}
	}

	.contact-box-01 {
		@extend .top-bottom-padding;

		img {
			margin-bottom: 20px;
		}

		h3 {
			@extend .title;
			margin-bottom: 30px;
		}

		h2 {
			@extend .subtitle-big;
			font-size: 26px;
			line-height: 40px;
			margin-bottom: 50px;
		}

		div[class^='col-'] {
			text-align: center;
		}

		.col-lg-3 {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: flex-end;

			@include respond-below(sm) {
				&:first-child,
				&:nth-child(2) {
					margin-bottom: 30px;
				}
			}
		}
	}

	.contact-box-02 {
		@extend .top-bottom-padding;

		h3 {
			@extend .subtitle-big;
			font-size: 26px;
			line-height: 40px;
			margin-bottom: 50px;
		}

		h2 {
			@extend .text;
			text-transform: uppercase;
			font-weight: 600;
			margin-top: 50px;
		}

		p {
			margin-top: 30px;
			padding-bottom: 50px;

			&:not(:last-child) {
				border-bottom: 1px solid $cBlackText;
			}
		}
	}
}

.gray-bg {
	.contact-box-01 {
		padding-top: 0;
		padding-bottom: 0;
	}
}

.opening-hours {
	padding: 30px;
	border: 1px solid $cBlackText;
	max-width: 300px;
	display: block;
	margin-right: auto;

	p {
		font-size: 18px;
	}
}

/* POPUP */
.box-popup {
	display: none;

	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.72);
	z-index: 9999;
	transition: all 0.3s;

	/* popup display none */
	.modal-step-1 {
		display: none;
	}

	.modal-step-2 {
		display: none;

		.modal-step-2-wrap {
			.modal-tabs-content {
				.content-1 {
					display: none;
				}

				.content-2 {
					display: none;
				}
			}
		}
	}

	.modal-step-3 {
		display: none;
	}

	/***/

	.modal-container {
		position: fixed;
		width: 1000px;
		max-width: 1000px;
		height: 630px;
		max-height: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;

		.modal-close {
			position: absolute;
			top: 15px;
			right: 15px;
			display: flex;
			justify-content: flex-end;
			width: 100%;
			z-index: 3;

			img {
				cursor: pointer;
			}
		}

		.step-back {
			display: flex;
			justify-content: flex-start;
			position: absolute;
			bottom: 40px;
			left: 30px;

			button {
				background-color: $cGrayBg2;
				border: none;
				outline: 0;
				color: $cBlack;
				padding: 8px 20px;
				cursor: pointer;
				height: 45px;
				font-size: 15px;
				text-transform: uppercase;
				font-weight: 700;
				font-family: 'Open Sans', sans-serif !important;
				transition: all 0.3s;
			}
		}

		.step-send {
			position: absolute;
			bottom: 40px;
			right: 30px;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 10px;

			.form-send-content {
				background-color: $cBlack;
				border: none;
				outline: 0;
				color: $cWhite;
				padding: 8px 20px;
				cursor: pointer;
				height: 45px;
				font-size: 15px;
				text-transform: uppercase;
				font-weight: 700;
				font-family: 'Open Sans', sans-serif !important;
				transition: all 0.3s;
			}
		}
	}

	.modal-step-1 {
		.modal-step-1-wrap {
			padding: 3px;
			height: 100%;
			display: flex;

			.box-left {
				background: url('/images/popup/popup-1.jpg') no-repeat;
				background-position: top left;
				background-size: cover;
				cursor: pointer;

				.title-text {
					color: $cWhite;
					font-family: 'Open Sans', sans-serif;
					font-size: 45px;
					text-transform: none;
					position: absolute;
					left: 0;
					bottom: 40%;

					span {
						padding-left: 50px;
						font-weight: 300;
					}

					.white-title {
						display: block;
						background-color: $cWhite;
						color: $cBlack;
						padding-left: 50px;
						font-size: 60px;
						line-height: 65px;
						font-weight: 300;
						padding-top: 10px;
						padding-bottom: 10px;
						padding-right: 20px;
					}
				}

				.subtitle-text {
					position: absolute;
					right: 20px;
					bottom: 0;
					padding: 17px 0;
					border-top: 2px solid $cWhite;
					font-size: 21px;
					font-weight: 400;
					font-style: normal;
					letter-spacing: normal;
					line-height: normal;
					text-align: center;
					color: $cWhite;
					text-transform: uppercase;
					font-family: 'Open Sans', sans-serif;
					cursor: pointer;
				}
			}

			.box-right {
				background: url('/images/popup/popup-2.jpg') no-repeat;
				background-position: top right;
				background-size: cover;
				cursor: pointer;

				.title-text {
					color: $cBlack;
					font-family: 'Open Sans', sans-serif;
					font-size: 45px;
					text-transform: none;
					position: absolute;
					left: 0;
					bottom: 40%;

					span {
						padding-left: 50px;
						display: block;
						font-size: 35px;
						font-weight: 300;
						line-height: 26px;
					}

					.yellow-title {
						display: inline-flex;
						background-color: $cYellow2;
						color: $cBlack;
						padding-left: 50px;
						font-size: 60px;
						line-height: 65px;
						font-weight: 300;
						padding-top: 10px;
						padding-bottom: 10px;
						padding-right: 20px;
						margin-top: 15px;
					}
				}

				.subtitle-text {
					position: absolute;
					right: 20px;
					bottom: 0;
					padding: 17px 0;
					border-top: 2px solid $cBlack;
					font-size: 21px;
					font-weight: 400;
					font-style: normal;
					letter-spacing: normal;
					line-height: normal;
					text-align: center;
					color: $cBlack;
					text-transform: uppercase;
					font-family: 'Open Sans', sans-serif;
					cursor: pointer;
				}
			}

			.box-col {
				width: 50%;
				position: relative;
				height: 100%;
			}
		}
	}

	.modal-step-2 {
		.modal-tabs {
			display: flex;
			justify-content: center;
			margin-top: 50px;

			.item {
				font-size: 15px;
				line-height: 15px;
				font-weight: 700;
				text-align: left;
				text-transform: uppercase;
				padding: 16px 24px;
				margin-right: 10px;
				margin-left: 10px;
				color: $cWhite;
				background-color: $cBlack;
				cursor: pointer;
			}

			.active {
				color: #000;
				background-color: $cYellow2;
			}
		}

		.modal-tabs-content {
			.content-1 {
				display: flex;
				justify-content: space-between;
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;

				.phone-col {
					width: 45%;
					display: flex;
					flex-direction: column;

					.item {
						display: flex;
						justify-content: space-between;
						padding: 11px 20px;

						span {
							color: $cBlack;
							font-family: 'Open Sans', sans-serif;
							font-size: 14px;
							line-height: 15px;
							font-weight: 400;
							text-align: left;
							text-transform: uppercase;
						}

						&.item-gray {
							background-color: $cGrayBg2;
						}

						a {
							font-family: 'Open Sans', sans-serif;
							font-size: 14px;
							line-height: 15px;
							font-weight: 700;
							text-align: left;
							text-transform: uppercase;
							color: $cGrayText;
						}
					}
				}
			}

			.content-2 {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 50px;
				font-family: 'Open Sans', sans-serif;
				margin-bottom: 50px;

				.title {
					text-align: center;
					font-size: 21px;
					font-weight: 300;
					margin-bottom: 40px;
					color: $cBlack;
				}

				.mail {
					font-size: 24px;
					font-weight: 600;
					color: $cBlack;
					text-decoration: none;
					text-align: center;
				}

				.phone {
					padding: 5px 8px;
					background-color: $cBlack;
					color: $cWhite;
					text-decoration: none;
					font-size: 24px;
					font-weight: 400;
					display: inline-flex;
					margin-top: 25px;
				}
			}
		}
	}

	.modal-step-3 {
		height: max-content;

		.modal-step-3-wrap {
			form {
				margin: 50px auto 0;
				padding-bottom: 100px;
				max-width: 800px;
				position: relative;

				.form-title {
					margin-bottom: 7px;
					padding-left: 3px;
					color: $cBlack;
					font-family: 'Open Sans', sans-serif;
					font-size: 22px;
					font-weight: 600;
					text-transform: uppercase;
				}

				.form-row {
					input {
						display: block;
						margin: 10px 3px 0;
						width: calc(50% - 6px);
						outline: 0;
						resize: none;
						line-height: 17px;
						background-color: #fff;
						color: #818181;
						font-weight: 400;
						font-family: 'Open Sans', sans-serif;
						font-size: 16px;
						padding: 20px 8px;
						padding-left: 15px;
						height: 30px;
						border-radius: 0;
						border: 1px solid #a7a7a7;
						-webkit-appearance: none;
					}

					.column-full {
						padding: 3px;
						width: 100%;
					}

					textarea {
						display: block;
						width: 100%;
						margin: 5px 0 0;
						padding: 15px;
						border: 1px solid #a7a7a7;
						font-family: 'Open Sans', sans-serif;
						font-size: 16px;
						height: 90px;
						color: #000;
						font-weight: 300;
						border-radius: 0;
						outline: 0;
						resize: none;
						line-height: 17px;
						background-color: #fff;
						box-sizing: border-box;
						-webkit-appearance: none;
					}
				}

				.confirm-data {
					margin: 0 0 0 1em;

					span {
						color: #272727;
						font-family: 'Open Sans', sans-serif;
						font-size: 15px;
						font-weight: 300;
						margin-top: 10px;
					}
				}

				.codedropz-upload-wrapper {
					.form-group {
						.fileuploader {
							display: block;
							width: 100%;
							margin: 35px 0 15px;
							background: #fff;
							border: 2px dashed #c5c5c5;
							border-radius: 5px;
							padding: 10px 15px;
							font-family: 'Open Sans', sans-serif;
							font-weight: 400;
							font-size: 14px;
							line-height: normal;
							text-align: left;

							.files {
								position: absolute;
								z-index: -9999;
								height: 0px;
								width: 0px;
								padding: 0px;
								margin: 0px;
								line-height: 0;
								outline: 0px;
								border: 0px;
								opacity: 0;
							}

							.fileuploader-input {
								position: relative;
								display: flex;
								border: 1px solid transparent;
								border-radius: 30px;
								cursor: pointer;

								.fileuploader-input-caption {
									position: relative;
									display: inline-block;
									flex: 1;
									align-self: flex-start;
									padding: 13px 16px;
									margin-right: 16px;
									border-radius: 30px;
									font-weight: 700;
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
									text-align: right;
									background: url('../../images/popup/popup-cloud-computing.png')
										no-repeat center left;
									background-size: contain;
									cursor: pointer;

									span {
										font-weight: 700;
										white-space: nowrap;
										text-align: right;
									}
								}

								.fileuploader-input-button {
									background: #fff200;
									color: #000;
									border-radius: 0;
									user-select: none;
									border: none;
									cursor: pointer;

									span {
										font-weight: 700;
									}
								}
							}

							.fileuploader-items {
								.fileuploader-items-list {
									display: block;
									margin: 0 -16px;
									padding: 0;
									list-style: none;
								}
							}
						}
					}
				}

				.inner-data {
					width: 100%;
					color: #232323;
					font-size: 14px;
					font-family: 'Open Sans', sans-serif;
					line-height: 26px;
					font-weight: 400;

					textarea {
						display: block;
						width: 100%;
						margin: 5px 0 0;
						padding: 15px;
						border: 1px solid #a7a7a7;
						font-family: 'Open Sans', sans-serif;
						font-size: 16px;
						height: 90px;
						color: #000;
						font-weight: 300;
						border-radius: 0;
						outline: 0;
						resize: none;
						line-height: 17px;
						background-color: #fff;
						-webkit-box-sizing: border-box;
						box-sizing: border-box;
						-webkit-appearance: none;
					}
				}
			}

			.step-actions {
				position: absolute;
				padding-top: 20px;
				left: 0;
				right: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.step-send {
					position: relative !important;
					bottom: auto !important;
					right: auto !important;
				}

				.step-back {
					position: relative !important;
					bottom: auto !important;
					left: auto !important;
				}
			}
		}
	}

	@media (max-width: 1000px) {
		.modal-container {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			transform: none;
			height: auto;
			width: auto;
		}
	}

	@media (max-width: 820px) {
		.modal-container {
			&.modal-step-3 {
				.modal-step-3-wrap {
					padding: 0 20px;
				}
			}
		}
	}

	@media (max-width: 767px) {
		.modal-container {
			&.modal-step-1 {
				.modal-step-1-wrap {
					flex-direction: column;

					.box-col {
						width: 100%;
					}
				}
			}

			&.modal-step-2 {
				.modal-tabs {
					margin: 50px 15px 0;
				}

				.modal-step-2-wrap {
					overflow: auto;
					position: relative;
					height: 100%;
					min-height: 100%;

					.modal-tabs-content {
						.content-1 {
							flex-direction: column;

							.phone-col {
								width: 100%;
							}
						}

						.content-2 {
							.mail {
								font-size: 18px;
							}
						}
					}

					.step-back {
						position: relative;
						bottom: 0;
						left: 5%;
						padding-top: 20px;
						padding-bottom: 20px;
					}
				}
			}

			&.modal-step-3 {
				.modal-step-3-wrap {
					overflow: auto;
					position: relative;
					height: 100%;
					min-height: 100%;
				}
			}
		}
	}

	@media (max-width: 500px) {
		.modal-container {
			&.modal-step-3 {
				.modal-step-3-wrap {
					form {
						.form-row {
							flex-direction: column;

							input {
								width: calc(100% - 6px);
							}
						}

						.fileuploader {
							.fileuploader-input {
								flex-direction: column;

								.fileuploader-input-caption {
									padding: 75px 0px 15px !important;
									background-position-x: center !important;
									background-position-y: top !important;
									background-size: 75px !important;
									margin: 0 auto !important;
									border-radius: 0 !important;
								}
							}
						}
					}

					.step-actions {
						button,
						input {
							font-size: 14px !important;
							padding: 8px 10px !important;
						}
					}
				}
			}
		}
	}
}

.article-207 {
	.gray-bg-2 {
		background-color: #e4e2e3;
		padding: 70px 0;
	}

	.container {
		h1 {
			margin-bottom: 60px;
		}
	}

	.box-01 {
		p {
			margin-bottom: 50px;
		}
	}

	.box-02 {
		margin-bottom: 80px;

		@media (max-width: 1200px) {
			text-align: center;
			margin-bottom: 36px !important;

			.sepparator {
				width: 360px !important;
				height: 2px !important;
				margin: 0 auto;
			}
		}

		@media (max-width: 440px) {
			.sepparator {
				width: 260px !important;
			}
		}

		h3 {
			font-size: 1.4rem;
		}

		.sepparator {
			width: 2px;
			height: calc(100% - 0.5rem);
			background-color: $cBlack;
		}
	}

	.box-03 {
		margin-bottom: 90px;

		@media (max-width: 1200px) {
			margin-bottom: 36px !important;

			.title {
				margin-bottom: 36px !important;
			}
		}

		.title {
			margin-bottom: 40px;

			h2 {
				margin-bottom: 0;
			}
		}

		.sub-title {
			margin: 0;
		}
	}

	.box-04 {
		margin-bottom: 50px;

		@media (max-width: 1200px) {
			h2 {
				margin-bottom: 36px !important;
			}
		}

		h2 {
			margin-bottom: 50px;
		}
	}

	.box-05 {
		margin-bottom: 90px;
	}

	.box-06 {
		margin-bottom: 90px;

		.nav-tabs {
			border: none;

			.bootstrapTab {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $cGrayBg;

				a {
					width: 100%;
					text-align: center;
					padding: 30px 60px 20px;
					margin-bottom: 0;
					font-size: 1.4rem;
					font-weight: 500;

					&.active {
						background-color: #c9c9c9;
					}

					&:hover {
						color: $cBlack;
					}

					span {
						font-size: 1rem;
						font-weight: 300;
					}
				}
			}
		}

		.tab-content {
			background-color: #c9c9c9;
			padding: 60px 70px 50px;

			.p-link {
				margin: 40px 0 0 0;
				font-size: 1rem;
				font-weight: 500;

				a {
					text-decoration: revert;
				}
			}
		}
	}

	.box-07 {
		margin-bottom: 90px;

		@media (max-width: 1200px) {
			margin-bottom: 60px !important;
		}
	}

	.box-08 {
		margin-bottom: 100px;

		@media (max-width: 1200px) {
			margin-bottom: 50px !important;
		}

		h2 {
			margin-bottom: 30px;
		}
	}

	.box-09 {
		margin-bottom: 150px;

		@media (max-width: 1200px) {
			margin-bottom: 50px !important;

			h2 {
				position: relative !important;
				display: inline-block !important;
				margin-bottom: 36px !important;
				font-size: 1.6rem !important;
			}

			p {
				padding-top: 0 !important;
			}
		}

		h2 {
			position: absolute;
			margin-bottom: 60px;
			padding: 30px;
			border: 2px solid $cBlack;
			background-color: $cGrayLightBg;
			z-index: 100;
		}

		p {
			padding-top: 170px;
		}
	}

	.box-10 {
		margin-bottom: 150px;

		@media (max-width: 1200px) {
			margin-bottom: 50px !important;

			.title {
				margin-bottom: 36px !important;
			}

			.h2-button {
				font-size: 1.6rem !important;
			}
		}

		.title {
			margin-bottom: 50px;
		}

		p {
			margin-bottom: 45px;
		}

		.sub-box {
			text-align: center;
		}

		.h2-button {
			line-height: 25px;
			margin-bottom: 0 !important;
			display: inline-block;
			text-align: center;
			padding: 20px;
			border: 2px solid #000;
			background-color: #f5f5f5;
			z-index: 100;

			span {
				font-size: 1.2rem;
			}
		}
	}

	.box-11 {
		margin-bottom: 140px;

		@media (max-width: 1200px) {
			margin-bottom: 50px !important;

			h2 {
				position: relative !important;
				display: inline-block !important;
				margin-bottom: 36px !important;
				font-size: 1.6rem !important;
			}

			p {
				padding-top: 0 !important;
			}
		}

		h2 {
			position: absolute;
			margin-bottom: 60px;
			padding: 30px;
			border: 2px solid $cBlack;
			background-color: $cGrayLightBg;
			z-index: 100;
		}

		p {
			padding-top: 150px;
		}
	}

	.box-12 {
		@media (max-width: 1200px) {
			.p-big-text {
				margin-bottom: 36px !important;
			}

			h2 {
				margin-bottom: 36px !important;
			}

			.text-2 {
				margin-bottom: 40px !important;
			}

			.text-2 {
				margin-bottom: 60px !important;
			}

			.blocks-panel {
				margin-bottom: 40px !important;
			}
		}

		@media (max-width: 768px) {
			.p-big-text {
				font-size: 2rem !important;
			}
		}

		.p-big-text {
			font-size: 2.5rem;
			margin-bottom: 60px;
		}

		h2 {
			margin-bottom: 55px;
		}

		.text-1 {
			margin-bottom: 50px;
		}

		.text-2 {
			margin-bottom: 110px;
		}

		.blocks-panel {
			margin-bottom: 55px;
			padding: 25px 45px;
			background-color: #e4e2e3;

			h3 {
				font-size: 1.4rem;
				margin: 0;
			}

			.sepparator {
				width: 2px;
				background-color: #000;
			}
		}

		@media (max-width: 1200px) {
			.sepparator {
				width: 100% !important;
				height: 2px !important;
				margin: 0 auto;
			}

			h3 {
				margin-bottom: 0.5rem !important;
			}
		}
	}

	.box-13 {
		@media (max-width: 1200px) {
			h2 {
				margin: 20px 0 36px 0 !important;
			}
		}

		@media (max-width: 768px) {
			.p-big-text {
				font-size: 2rem !important;
				margin-bottom: 15px !important;
			}

			p {
				font-size: 1rem;
			}

			h2 {
				font-size: 1.2rem;
			}
		}

		.p-big-text {
			font-size: 2.5rem;
			margin: 0;
		}

		p {
			font-size: 1.2rem;
		}

		h2 {
			margin: 30px 0 50px 0;
			font-size: 1.5rem;
		}
	}

	.box-14 {
		padding: 100px 0;

		@media (max-width: 1200px) {
			padding: 70px 0 40px !important;

			h2 {
				margin-bottom: 36px !important;
			}
		}

		h2 {
			margin-bottom: 60px;
		}
	}

	.box-15 {
		margin-bottom: 50px;

		@media (max-width: 1200px) {
			margin-bottom: 36px !important;

			.title {
				margin-bottom: 26px !important;
			}

			.p-text {
				margin-bottom: 36px !important;
			}
		}

		.title {
			margin-bottom: 40px;
		}

		.p-text {
			margin-bottom: 60px;
		}
	}

	.box-16,
	.box-18 {
		@media (max-width: 1200px) {
			h2 {
				margin-bottom: 50px !important;
				font-size: 1.6rem !important;
			}
		}

		h2 {
			display: inline-block;
			margin-bottom: 80px;
			padding: 25px;
			border: 2px solid $cBlack;
			background-color: $cGrayLightBg;
		}
	}

	.box-17 {
		margin-bottom: 80px;

		@media (max-width: 1200px) {
			margin-bottom: 36px !important;

			.title {
				margin-bottom: 26px !important;
			}

			.p-text {
				margin-bottom: 36px !important;
			}
		}

		.title {
			margin-bottom: 40px;
		}

		.p-text {
			margin-bottom: 60px;
		}
	}

	.box-19 {
		margin-bottom: 80px;

		@media (max-width: 1200px) {
			margin-bottom: 36px !important;

			.title {
				margin-bottom: 26px !important;
			}

			.p-text {
				margin-bottom: 36px !important;
			}
		}

		.title {
			margin-bottom: 40px;
		}

		.p-text {
			margin-bottom: 60px;
		}
	}

	.box-20 {
		margin-bottom: 80px;

		@media (max-width: 1200px) {
			margin-bottom: 36px !important;

			.title {
				margin-bottom: 26px !important;
			}
		}

		.title {
			margin-bottom: 40px;
		}
	}

	.box-21 {
		margin-bottom: 80px;

		@media (max-width: 1200px) {
			margin-bottom: 36px !important;

			.title {
				margin-bottom: 26px !important;
			}
		}

		.title {
			margin-bottom: 40px;
		}
	}

	.box-22 {
		margin-bottom: 40px;

		@media (max-width: 1200px) {
			margin-bottom: 36px !important;
		}
	}
}

//* Custom global class
.numeric_list {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-weight: 300;
	font-size: 0.875rem;

	li {
		position: relative;
		padding-left: 46px;
		counter-increment: step-counter;

		&:not(:last-child) {
			margin-bottom: 20px;
		}

		&::before {
			position: absolute;
			content: counter(step-counter);
			color: $cGrayDarkBg;
			padding: 0 6px;
			border: 0.5px solid $cGrayDarkBg;
			font-weight: 300;
			font-size: 0.875rem;
			left: 0;
			top: 0;
		}
	}
}

//* Silver line page
.silver-line-page {
	padding-top: 60px;
	margin-top: 35px;

	.content_wrapper_1 {
		background: url('/images/pages/silver-line/silver-line-bg.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	#scontainer-68 {
		background: url('/images/pages/silver-line/silver-line-header.jpg');
		background-repeat: no-repeat;
		background-position: center;

		.col-6 {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
		}

		h1 {
			color: $cWhite;
			font-size: 4.375rem;
			text-transform: uppercase;
			margin-bottom: 12px;
		}

		h2 {
			color: $cWhite;
			font-size: 1.5rem;
			font-weight: 300;
			text-transform: uppercase;
			margin-bottom: 24px;
			width: 100%;
			max-width: 300px;
		}

		@media (max-width: 992px) {
			.col-12 {
				padding-top: 25px;
				padding-bottom: 25px;
			}
		}
	}

	#scontainer-69 {
		text-align: center;
		font-weight: 300;
		font-size: 0.875rem;
		line-height: 25px;
		padding: 100px 0 60px 0;
	}

	#scontainer-70 {
		font-weight: 300;
		font-size: 0.875rem;
		line-height: 25px;
		padding-bottom: 90px;
	}

	#scontainer-71 {
		margin-bottom: 80px;

		.container {
			background: #f7f6f6;
			padding-top: 115px;
			padding-bottom: 115px;
		}

		h2 {
			font-weight: 600;
			font-size: 2.5rem;
			line-height: 54px;
		}

		h3 {
			position: relative;
			font-weight: 300;
			font-size: 1.25rem;
			line-height: 27px;
			letter-spacing: 0.055em;
			margin-bottom: 40px;

			&:before {
				position: absolute;
				content: '';
				bottom: -20px;
				left: 0;
				width: 142px;
				height: 2px;
				background: $cBlackText;

				@include respond-below(sm) {
					width: 200px;
				}
			}
		}

		@media (max-width: 992px) {
			.container {
				padding-top: 25px;
				padding-bottom: 25px;
			}
		}
	}

	#scontainer-72 {
		padding-bottom: 200px;

		h2 {
			font-weight: 600;
			font-size: 2.5rem;
			line-height: 54px;
		}

		h3 {
			position: relative;
			font-weight: 300;
			font-size: 1.25rem;
			line-height: 27px;
			letter-spacing: 0.055em;
			margin-bottom: 40px;

			&:before {
				position: absolute;
				content: '';
				bottom: -20px;
				left: 0;
				width: 142px;
				height: 2px;
				background: $cBlackText;

				@include respond-below(sm) {
					width: 200px;
				}
			}
		}

		h4 {
			font-weight: 600;
			font-size: 1.25rem;
			line-height: 27px;
			letter-spacing: 0.055em;
		}

		p {
			font-weight: 300;
			font-size: 0.875rem;
		}

		.right-col {
			position: relative;

			&::before {
				position: absolute;
				content: '';
				left: -20%;
				width: 1px;
				height: 100%;
				background: #dadada;
			}
		}
	}

	#scontainer-73 {
		padding-bottom: 40px;

		h2 {
			font-weight: 600;
			font-size: 2.5rem;
			line-height: 54px;
		}

		h3 {
			position: relative;
			font-weight: 300;
			font-size: 1.25rem;
			line-height: 27px;
			letter-spacing: 0.055em;
			margin-bottom: 40px;

			&:before {
				position: absolute;
				content: '';
				bottom: -20px;
				left: 0;
				width: 142px;
				height: 2px;
				background: $cBlackText;

				@include respond-below(sm) {
					width: 200px;
				}
			}
		}
	}
}

//*deklaracje

.deklaracje {
	display: flex;
	flex-direction: column;
	justify-content: center;

	.title {
		text-align: center;
		padding: 10px;
	}

	.form-row {
		.form-control {
			width: 100%;
			max-width: 720px;
			margin: 0 auto;
		}

		&:focus,
		&:active {
			outline: 1px solid lightblue;
		}
	}

	.form-row--btn {
		align-self: center;
		padding: 20px 0 60px;

		.btn {
			@extend .btn4;
		}
	}

	.declarations-list {
		.content {
			display: block;

			@include respond-above(xs) {
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
				box-sizing: border-box;
				justify-content: center;
			}

			p {
				text-align: center;
				font-weight: 700;
				padding-top: 20px;
				width: 100%;
			}

			&__file {
				width: 100%;
				padding: 10px;
				margin: 5px;
				background-color: #ebebeb;
				text-align: center;
				max-height: 50px;

				a {
					text-decoration: none;
					color: black;
					transition: color 0.3s;

					&:hover {
						color: lighten($color: black, $amount: 50%);
					}

					i {
						padding-right: 5px;
					}
				}

				@include respond-above(xs) {
					width: calc(50% - 10px);
				}

				@include respond-above(sm) {
					width: 30%;
					max-height: 80px;
				}

				@include respond-above(md) {
					width: 20%;
				}

				@include respond-above(lg) {
					max-height: 50px;
				}
			}
		}
	}
}

//* wyszukiwarka

.search-form {
	display: flex;
	background-color: $cGrayDarkBg;
	width: 100%;
	color: white;
	font-size: 14px;

	&__btn {
		background-color: transparent;
		width: 4%;
		border: none;
		color: white;
		margin-right: 5px;
	}

	input {
		background-color: transparent;
	}

	&__txt {
		width: 92%;
		border: none;
		color: white;

		&:focus {
			outline: none;
		}

		&:active {
			outline: none;
		}
	}

	&__clear {
		width: 4%;
		color: white;
		font-weight: 700;
		border: none;
		cursor: pointer;
	}
}

//* wyniki wyszukiwania

.search-results__list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;

	.search-results__list-item {
		background-color: #ebebeb;
		margin-bottom: 10px;
		max-width: 100%;

		.article-title {
			font-weight: 700;
			padding-left: 40px;
			font-size: 24px;
			margin: 0;
			line-height: 46px;

			a {
				text-decoration: none;
				color: black;
				display: block;

				&:hover {
					color: lighten($color: black, $amount: 50%);
				}
			}
		}
	}
}

//documents

.documents {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-height: 58vh;

	.site-title {
		border-bottom: 1px dotted black;
		width: 100%;
		padding-bottom: 20px;
		text-align: center;
		margin-bottom: 50px;
	}

	.article {
		.files {
			list-style: none;
			display: grid;
			gap: 10px;
			grid-template-columns: 1fr 1fr 1fr;
			margin: 0;

			li {
				background-color: #ebebeb;
				border-radius: 3px;
				transition: background-color 0.3s;

				a {
					margin: 0;
					padding: 20px;

					i {
						font-size: 22px;
						margin-right: 10px;
						top: 5px;
						position: relative;
					}
				}

				&:hover {
					background-color: lighten($color: #ebebeb, $amount: 5%);

					a {
						color: lighten($color: black, $amount: 50%);
					}
				}
			}
		}
	}
}

//service form
.collapse-box {
	.contact-new-form {
		display: none;
	}
}

.collapse-box.open {
	.contact-new-form {
		display: block;
	}
}

.article {
	.text {
		a {
			font-weight: 600;
			color: #0056b3;
		}
	}
}

#scontainer-58 {
	.c-tiles {
		display: flex;
		column-gap: 30px;
		row-gap: 50px;
		justify-content: center;
		flex-wrap: wrap;

		.c-tile {
			display: flex;
			flex-direction: column;
			// min-width: 220px;
			width: clamp(220px, 230px, 274px);

			.black-bg-text {
				width: fit-content;
			}

			a {
				width: fit-content;
			}

			p {
				flex: 1;
			}
		}
	}
}

.g-colors {
	display: flex;
	flex-direction: column;
	row-gap: 40px;

	.g-color {
		width: 100%;
		max-width: 900px;

		.g-color-head {
			margin-bottom: 20px;

			h3 {
				color: #000;
				font-size: 14px;
				font-weight: 700;
				font-family: 'URW Form', sans-serif;
				margin-bottom: 0;
				text-transform: uppercase;
			}
		}

		ul {
			padding: 0;
			margin: 0;
			list-style: none;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 33px;

			li {
				display: flex;
				flex-direction: column;
				row-gap: 2px;

				img {
					width: 98px;
					height: 98px;
				}

				span {
					color: #000;
					font-size: 12px;
					font-family: 'URW Form', sans-serif;
					font-weight: 300;
					text-transform: uppercase;
				}
			}
		}
	}
}

#scontainer-158 {
	padding-top: 120px;
	padding-bottom: 120px;

	h2 {
		margin-bottom: 48px;
	}

	h4 {
		font-size: 20px;
		font-weight: 300;
		text-transform: uppercase;
		margin-bottom: 48px;
	}

	.btn {
		display: inline-flex;
		height: 60px;
		padding: 0 36px;
		border-radius: 0;
		border-radius: 0;
		border: 0;
		align-items: center;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: 700;
		gap: 10px;
		transition: all 0.3s ease-in;
	}

	.btn-success {
		margin-left: 7px;
		background: #fbf27a;
		color: #000;

		@include respond-below(sm) {
			margin-left: 0;
		}

		&:hover {
			background: rgba(251, 242, 122, 0.8);
		}

		&::after {
			content: '';
			display: inline-flex;
			background: url('/images/icon-check.png') no-repeat center;
			height: 24px;
			width: 24px;
			align-items: center;
			justify-content: center;
		}
	}

	.btn-primary {
		background: #000;
		margin-right: 7px;

		@include respond-below(sm) {
			margin-right: 0;
			margin-bottom: 10px;
		}

		&:hover {
			background: rgba(0, 0, 0, 0.8);
		}

		&::after {
			content: '';
			display: inline-flex;
			background: url('/images/icon-arrow-right.png') no-repeat center;
			height: 24px;
			width: 24px;
			align-items: center;
			justify-content: center;
		}
	}
}

.faq {
	background: url('/images/faq-background.png') no-repeat center center;
	padding-top: 120px;
	padding-bottom: 120px;
	color: #fff;

	@include respond-below(md) {
		background: #000;
		padding-top: 60px;
		padding-bottom: 60px;
	}

	h2 {
		color: #fff;
		margin-bottom: 50px;
	}

	.panel-group {
		.panel {
			margin-bottom: 10px;

			div[role='tabpanel'] {
				display: none;
				color: #fff;
				padding-top: 30px;
				padding-bottom: 30px;

				@include respond-below(md) {
					padding-top: 15px;
					padding-bottom: 15px;
				}

				p {
					color: #fff;
					font-size: 16px;
					font-family: 'URW Form';
					line-height: 1.5;
					font-weight: 200;

					&:last-child {
						margin-bottom: 0;
					}
				}

				&.show {
					display: block;
				}
			}

			.panel-heading {
				.panel-title {
					a {
						display: flex;
						color: #fff;
						height: 60px;
						padding: 0 25px;
						border: 1px solid #fff;
						font-family: 'URW Form', sans-serif;
						font-weight: 700;
						font-size: 24px;
						letter-spacing: 2px;
						align-items: center;
						text-decoration: none;
						text-transform: uppercase;
						justify-content: space-between;
						column-gap: 10px;

						@include respond-below(md) {
							height: auto;
							padding: 10px 15px;
							font-size: 18px;
						}

						@include respond-below(sm) {
							font-size: 16px;
						}

						&.active {
							&::after {
								background: url('/images/icon-arrow-up-white.png') no-repeat
									center;
							}
						}

						&::after {
							content: '';
							display: block;
							height: 15px;
							width: 15px;
							background: url('/images/icon-arrow-down-white.png') no-repeat
								center;
						}
					}
				}
			}
		}
	}
}

.illustration_product_slider {
	.swiper-wrapper {
		.swiper-slide {
			text-align: center;
		}
	}

	.swiper-navigation {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: center;
		gap: 60px;

		.swiper-button-disabled {
			opacity: 0.6;
		}

		.swiper-slide-next {
			position: relative;
			cursor: pointer;
			transition: opacity 250ms ease-in;

			img {
				width: 50px;
				height: 50px;
			}
		}

		.swiper-slide-prev {
			position: relative;
			cursor: pointer;
			transition: opacity 250ms ease-in;

			img {
				width: 50px;
				height: 50px;
			}
		}
	}
}

header#header {
	padding-top: 25px;
	padding-bottom: 25px;
	background: rgba(255, 255, 255, 0.5);
	// backdrop-filter: blur(10px);
	box-shadow: 0 1.5px 4px 0 rgba(0, 0, 0, 0.05);

	position: sticky;
	top: 0;
	z-index: 100;

	&::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		// width: calc(100% - (30px * 2));
		width: 100%;
		height: 1px;
		background: #dcdcdc;
		transform: translateX(-50%);
	}

	&::after {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10px);
		z-index: -1;
	}

	@include respond-below(md) {
		height: 110px;
	}

	.container {
		// @include respond-above(xxl) {
		// 	max-width: 1500px;
		// }
		// @include respond-above(xxxl) {
		// 	max-width: 1780px;
		// }
	}

	.header-data {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		column-gap: 30px;

		@include respond-below(lg) {
			column-gap: 20px;
		}

		.header-logo {
			width: 100%;
			max-width: fit-content;

			@include respond-below(md) {
				flex: 1;
				max-width: unset;
			}

			img {
				width: 100%;
				max-width: 93px;
			}
		}

		#header-nav {
			@include respond-below(md) {
				order: 3;
			}

			#main-menu {
				// margin-right: 60px;
			}
		}

		.header-action {
			display: flex;
			flex-direction: row;
			align-items: center;

			#header-action-btns {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 16px;
				margin-right: 15px;

				> * {
					margin: 0;
				}

				.search {
					padding: 0 8px;
					border-left: 1px solid $cBlack;
					border-right: 1px solid $cBlack;
				}

				@include respond-below(lg) {
					gap: 30px;
				}
				@include respond-below(sm) {
					gap: 20px;
					margin-right: 0;
				}
			}

			.btn-popup-oferta {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 10px;
				padding: 17px 20px 13px 38px;
				background: #fff246;
				border-radius: 6px;

				color: #1d1d1e;
				font-size: 13px;
				font-family: $font3;
				font-weight: 700;
				letter-spacing: 1px;
				text-transform: uppercase;
				line-height: 1;

				box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);

				img {
					padding-bottom: 6px;
					width: 16px;
				}

				@include respond-between(md, lg) {
					padding: 17px 15px 13px 28px;
					max-width: 150px;
				}
				@include respond-below(sm) {
					display: none;
				}
			}

			img.unia-img {
				width: 100%;
				max-width: 170px;
			}
		}
	}
}