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

.alert {
	border-radius: 0;
	margin: 25px 0;
	border: 0;
	font-size: 15px;
	font-weight: 600;

	&.alert-success {
		background: $cGrayBg;
		color: #000;
	}
}

body {
	&.nowebp {
		.carousel-banner {
			background: url('/upload/filemanager/images/banner-bg.jpg') no-repeat
				center;
		}

		.item-01 {
			background: url(/upload/filemanager/images/banner-01.jpg) no-repeat center;
		}

		.item-02 {
			background: url('/upload/filemanager/images/banner-02.jpg') no-repeat
				center left;

			@include respond-below(sm) {
				background: url('/upload/filemanager/images/banner-02-mobile.jpg')
					no-repeat center;
			}
		}

		.banner {
			background: url('/upload/filemanager/images/banner-01.jpg') no-repeat
				center;
		}

		.technology {
			background: url(/upload/filemanager/images/technology-bg.png) no-repeat
				center left;
		}

		.modernita-e-design {
			background: url(/upload/filemanager/images/sistemi-scorrevoli-bg2.png)
				no-repeat right;

			@include respond-below(sm) {
				background: url(/upload/filemanager/images/sistemi-scorrevoli-bg2.png)
					no-repeat center;
			}
		}

		.garanzia-di-soddisfazione {
			background: url(/upload/filemanager/images/garanzia-di-soddisfazione2.png)
				no-repeat center;
		}

		.banner-mini {
			background: url(/upload/filemanager/images/subpage/banner-mini.png)
				no-repeat center;
		}

		.tipi-di-montaggio {
			background: url(/upload/filemanager/images/persiane-in-legno/persiane-in-legno-bg.png)
				no-repeat center;
		}

		.tapparelle-controllo-separato {
			background: url(/upload/filemanager/images/tapparelle/tapparelle-bg.png)
				no-repeat center;
		}

		.links {
			background: url(/upload/filemanager/images/subpage/links-bg.png) no-repeat
				center;
		}

		.dettagli-box-bg {
			background: url(/upload/filemanager/images/dettagli-pvc/design-moderno/guarnizioni-bg.png)
				no-repeat center;
		}
	}
}

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

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

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

a {
	transition: all 0.3s ease;

	&:hover {
		text-decoration: none;
	}
}

.title {
	font-family: $font-2;
	font-weight: 400;
	font-size: 60px;
	line-height: 73px;
	letter-spacing: 0.1em;
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 30px;

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

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

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

	&:before {
		position: absolute;
		content: '';
		width: 142px;
		left: calc(50% - 71px);
		background: #000;
		height: 1px;
		bottom: 0;
	}

	a {
		color: $cBlackText;

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

.subtitle {
	font-family: $font-2;
	font-weight: 400;
	font-size: 40px;
	line-height: 48px;
	color: #000;

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

	a {
		color: $cBlackText;

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

.subtitle-line {
	@extend .subtitle;
	padding-bottom: 20px;
	margin-bottom: 30px;
	text-align: center;
	position: relative;

	&:before {
		position: absolute;
		content: '';
		width: 142px;
		left: calc(50% - 71px);
		background: #000;
		height: 1px;
		bottom: 0;
	}
}

.subtitle-level-3 {
	font-family: $font-3;
	font-weight: 300;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	position: relative;
	margin-bottom: 15px;
	padding-bottom: 15px;

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

	&:before {
		position: absolute;
		content: '';
		width: 142px;
		left: 0;
		background: #000;
		height: 2px;
		bottom: 0;
	}
}

.text {
	font-family: $font-3;
	font-weight: 300;
	font-size: 14px;
	line-height: 21px;
	color: #000000;

	strong {
		font-weight: 500;
	}
}

.text20 {
	font-family: $font-3;
	font-size: 20px;
	font-style: normal;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0.055em;
	text-align: left;
}

.text16 {
	font-family: $font-3;
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0em;
	text-align: left;
}

.btn {
	font-family: $font-1;
	font-weight: 600;
	font-size: 14px;
	line-height: 19px;
	color: #000;
	text-transform: uppercase;
	border: 1px solid #000000;
	border-radius: 0;
	display: inline-block;
	padding: 6px 10px;
	background: transparent;
	transition: all 0.3s ease;

	img {
		margin: 0 0 0 10px;
		width: 40px !important;
		height: 7px;
		margin-bottom: 2px;
		filter: invert(0%);
		transition: all 0.3s ease;
	}

	&:hover {
		color: #fff;
		text-decoration: none;
		background: #000;

		img {
			filter: invert(100%);
		}
	}

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

.btn-yellow {
	color: #000000;
	font-family: $font-1;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 8px 20px;
	background-color: #fff200;
	display: inline-flex;
	margin-left: 20px;

	&:hover {
		color: #000;
	}
}

.btn-black {
	border: none;
	border-radius: 0;
	background: #000;
	color: #fff;
	font-family: $font-1;
	padding: 8px 20px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 16px;
}

.tab {
	font-family: $font-1;
	font-size: 18px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0;
	text-align: center;
	color: #000;
	text-transform: uppercase;

	span {
		font-family: Alegreya Sans;
		font-size: 14px;
		font-style: normal;
		font-weight: 300;
		line-height: 21px;
		letter-spacing: 0.135em;
		text-align: center;
	}
}

.tab-content-title {
	font-family: $font-1;
	font-size: 30px;
	font-weight: 400;
	line-height: 41px;
	letter-spacing: 0em;
	text-align: right;
	color: #fff;
	background: #000;
	text-transform: uppercase;
}

.box50 {
	padding-top: 50px;
	padding-bottom: 50px;
}

.box-text-right {
	@extend .box;

	h3 {
		@extend .subtitle;
		text-align: right;
	}

	h4 {
		@extend .subtitle-level-3;
		text-align: right;

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

	p {
		@extend .text;
		text-align: justify;
	}

	img {
		max-width: 100%;
	}

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

		div {
			width: 400px;
		}
	}
}

.box-text-left {
	@extend .box;

	h3 {
		@extend .subtitle;
	}

	h4 {
		@extend .subtitle-level-3;
	}

	p {
		@extend .text;
		text-align: justify;

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

	img {
		max-width: 100%;
	}

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

		div {
			width: 400px;
		}

		&:first-child {
			@include respond-below(sm) {
				order: 2;
			}
		}

		&:last-child {
			@include respond-below(sm) {
				order: 1;
			}
		}
	}
}

#main-menu {
	@include respond-below(xs) {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 10;
		background: #fff;
		display: none;
		left: 0;
		top: 0;

		&.visible {
			@include flexbox;
		}
	}

	div[id^='menu-container-'] {
		@include respond-below(xs) {
			width: 100%;
			@include flexbox;
			@include align-items(center);
			@include justify-content(center);
		}

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

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

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

			> li {
				position: relative;

				&:first-child {
					display: none;
				}

				> a {
					font-family: $font-1;
					font-weight: 400;
					font-size: 14px;
					line-height: 19px;
					color: #000;
					padding: 10px 7px;
					display: block;
					text-transform: uppercase;

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

					@include respond-between(xs, md) {
						padding: 10px 4px;
					}

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

					&:hover {
						text-decoration: none;
					}

					.fa-caret-down {
						display: none;
					}
				}

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

				> ul {
					position: absolute;
					display: none;
					list-style-type: none;
					padding-inline-start: 0;
					background: #fff;
					padding: 18px 24px;
					box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
					z-index: 999;

					@include respond-above(lg) {
						left: 12px;
					}

					@include respond-between(md, lg) {
						left: 7px;
					}

					@include respond-between(xs, md) {
						left: 4px;
					}

					@include respond-below(xs) {
						position: static;
						padding: 0;
						box-shadow: none;
					}

					li {
						a {
							font-family: $font-1;
							font-size: 14px;
							font-weight: 400;
							color: $cGrayText;
							text-transform: uppercase;
							white-space: nowrap;
							padding: 6px 0;
							display: block;
							position: relative;
							transition: all 0.3s ease;

							@include respond-above(xs) {
								&:before {
									position: absolute;
									content: '';
									width: 50px;
									height: 1px;
									background: #939393;
									bottom: 0;
									opacity: 0;
									transition: all 0.3s ease;
								}
							}

							&:hover {
								&:before {
									opacity: 1;
								}
							}

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

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

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

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

	img {
		width: 20px;
	}

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

.top {
	padding-top: 15px;
	padding-bottom: 15px;
	background: #fff;

	div[class^='col-']:first-child {
		@include respond-between(sm, md) {
			display: flex;
			align-items: center;
		}

		@include respond-below(xs) {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		a {
			display: inline-block;

			img {
				width: 145px;
				height: 47px;
			}
		}
	}

	div[class^='col-']:last-child {
		display: flex;
		justify-content: space-between;

		> div {
			display: flex;
			align-items: center;

			&.social {
				a {
					display: block;
					border: 1px solid #000;
					height: 33px;
					width: 33px;
					text-align: center;
				}
			}
		}

		@include respond-between(sm, lg) {
			flex-direction: column-reverse;
		}

		@include respond-between(xs, sm) {
			flex-direction: column-reverse;
		}

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

		> div {
			&:first-child {
				display: flex;
				align-items: center;
				justify-content: center;

				@include respond-between(sm, md) {
					justify-content: center;
				}
			}

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

				@include respond-between(sm, lg) {
					justify-content: flex-end;
				}

				@include respond-between(xs, sm) {
					justify-content: flex-end;
				}

				.btn {
					margin-left: 25px;
					padding: 3px 6px;

					@include respond-between(xs, lg) {
						margin-bottom: 10px;
						margin-top: -32px;
					}

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

.banner,
.carousel-banner {
	background: url('/upload/filemanager/images/banner-bg.webp') no-repeat bottom
		left;
	min-height: 737px;
	text-align: center;

	// @include respond-below(sm) {
	//   background: url('/upload/filemanager/images/banner-sm.webp') no-repeat center;
	//   min-height: 0;
	//   background-size: cover;
	// }

	h1 {
		font-size: 100px;
		color: #fff;
		font-family: $font-2;
		font-weight: 400;
		line-height: 121px;

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

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

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

	h2 {
		font-family: $font-1;
		color: #fff;
		text-transform: uppercase;
		font-weight: 300;
		font-size: 40px;
		line-height: 54px;
		letter-spacing: 0.055em;
		position: relative;
		padding-bottom: 30px;
		margin-bottom: 30px;

		&:before {
			position: absolute;
			content: '';
			width: 348px;
			left: calc(50% - 174px);
			background: #fff;
			height: 1px;
			bottom: 0;
		}

		@include respond-between(sm, md) {
			font-size: 32px;
			line-height: 42px;
			padding-bottom: 20px;
			margin-bottom: 20px;
		}

		@include respond-between(xs, sm) {
			font-size: 28px;
			line-height: 38px;
			padding-bottom: 20px;
			margin-bottom: 20px;
		}

		@include respond-below(xs) {
			font-size: 16px;
			line-height: 22px;
			padding-bottom: 10px;
			margin-bottom: 10px;

			&:before {
				width: 145px;
				left: calc(50% - 72px);
			}
		}
	}

	p {
		font-family: $font-3;
		font-weight: 300;
		font-size: 20px;
		line-height: 30px;
		text-align: center;
		color: #ffffff;

		@include respond-between(sm, md) {
			font-size: 19px;
			line-height: 27px;
		}

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

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

.carousel-banner {
	min-height: 37vw;
	text-align: center;
	padding-left: 80px;
	padding-right: 80px;
	padding-bottom: 150px;

	@include respond-below(md) {
		padding-left: 30px;
		padding-right: 30px;
		min-height: 45vw;
	}

	@include respond-below(sm) {
		padding-left: 25px;
		padding-right: 25px;
		padding-bottom: 0;
		background: none;
	}

	@include respond-below(xs) {
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;
		background: none;
	}

	.owl-item,
	.item {
		min-height: 37vw;
		display: flex;
		align-items: flex-start;
		justify-content: center;

		@include respond-below(lg) {
			min-height: 42vw;
		}

		@include respond-below(md) {
			min-height: 45vw;
		}

		@include respond-below(md) {
			min-height: 45vw;
		}

		@include respond-below(sm) {
			min-height: 44vw;
		}

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

	.item-01 {
		background: url('/upload/filemanager/images/banner-01.webp') no-repeat
			center;
		background-size: cover;
		width: 100vw;

		@include respond-above(xs) {
			display: flex;
			align-items: center;
		}

		@include respond-below(sm) {
			padding-top: 144%;
			position: relative;
		}

		#scontainer-1 {
			width: 90%;
			padding-right: 15px;
			padding-left: 15px;
			margin-right: auto;
			margin-left: auto;
			max-width: 1140px;

			@include respond-below(sm) {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.item-02 {
		background: url('/upload/filemanager/images/banner-02.webp') no-repeat
			center left;
		background-size: cover;
		width: 100vw;

		@include respond-below(sm) {
			background: url('/upload/filemanager/images/banner-02-mobile.webp')
				no-repeat center;
			background-size: cover;
			padding-top: 144%;
		}
	}
}

.benefits {
	margin-top: -132px;
	position: relative;
	z-index: 10;

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

	div[class^='col-'] {
		display: flex;
		justify-content: center;

		@include respond-between(xs, sm) {
			flex-flow: row wrap;
		}

		@include respond-below(xs) {
			flex-flow: row wrap;
		}

		.benefits-content {
			background: #fff;
			box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
			width: calc(20% - 26px);
			text-align: center;
			padding: 35px 20px;
			margin: 0 13px;

			@include respond-between(sm, md) {
				width: calc(20% - 7px);
				padding: 35px 10px;
				margin: 0 5px;
			}

			@include respond-between(xs, sm) {
				width: calc(33% - 20px);
				margin: 0 10px 20px 10px;
			}

			@include respond-below(xs) {
				width: calc(50% - 10px);
				margin: 0 5px 20px 5px;
				padding: 25px 10px;
			}

			p {
				color: $cBlackText;
				margin-bottom: 0;
				font-family: $font-1;
				font-weight: 600;
				font-size: 16px;
				line-height: 22px;
				height: 44px;
				display: flex;
				align-items: center;
				justify-content: center;

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

				@include respond-below(xs) {
					font-size: 14px;
					line-height: 19px;
					height: auto;
				}
			}

			img {
				width: 65px;
				height: 65px;
				margin-bottom: 15px;

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

			&:first-child {
				@include respond-between(sm, md) {
					margin-left: 0;
				}
			}

			&:last-child {
				@include respond-between(sm, md) {
					margin-right: 0;
				}
			}
		}
	}
}

#scontainer-3,
#scontainer-6,
#scontainer-8,
#scontainer-11 {
	text-align: center;
	@extend .box;

	div[class^='col-']:last-child {
		p {
			max-width: 650px;
			margin: 0 auto 40px auto;
		}
	}

	div[class^='col-'] {
		> img {
			width: 515px;
			height: auto;
			margin-top: 20px;
			margin-bottom: 40px;

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

			@include respond-between(sm, md) {
				width: 350px;
				height: auto;
				margin-top: 5px;
				margin-bottom: 20px;
			}

			@include respond-between(xs, sm) {
				width: 350px;
				height: auto;
				margin-top: 5px;
				margin-bottom: 20px;
			}

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

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

	p {
		@extend .text;
		text-align: center;
	}

	.btn {
		padding: 6px 10px;

		img {
			margin-left: 10px;
			width: 40px;
			height: 7px;
		}
	}
}

#scontainer-6 {
	div[class^='col-'] {
		> img {
			@include respond-above(lg) {
				width: 515px;
				height: 584px;
			}

			@include respond-below(xs) {
				width: 270px;
				height: 306px;
			}
		}
	}
}

#scontainer-8 {
	border-top: 1px solid #000;
	margin-top: 100px;
	padding-top: 80px;

	div[class^='col-'] {
		> img {
			@include respond-above(lg) {
				width: 448px;
				height: 561px;
			}

			@include respond-below(xs) {
				width: 270px;
				height: 338px;
			}
		}
	}
}

#scontainer-11 {
	padding-top: 80px;
	margin-top: 100px;
	border-top: 1px solid #000;

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

	div[class^='col-'] {
		> img {
			@include respond-above(md) {
				width: 403px;
				height: 647px;
			}

			@include respond-below(xs) {
				width: 270px;
				height: 433px;
			}
		}
	}

	.btn {
		@include respond-above(xs) {
			margin-top: 30px;
		}
	}

	.buttons {
		@include respond-below(xs) {
			margin-top: 30px;
		}
	}
}

#scontainer-3 {
	div[class^='col-'] {
		> img {
			@include respond-above(lg) {
				width: 503px;
				height: 603px;
			}

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

			@include respond-below(xs) {
				width: 270px;
				height: 323px;
			}
		}
	}
}

.technology {
	min-height: 497px;
	background: url(/upload/filemanager/images/technology-bg.webp) no-repeat
		center left;
	background-size: cover;
	display: flex;
	align-items: center;

	@include respond-between(md, lg) {
		background-position: -54px center;
	}

	@include respond-between(sm, md) {
		background-position: -60px center;
	}

	@include respond-between(xs, sm) {
		background-position: -157px -43px;
		align-items: flex-start;
		justify-content: flex-end;
		min-height: 600px;
	}

	@include respond-below(xs) {
		background-position: center;
		align-items: flex-start;
		justify-content: flex-end;
		min-height: 475px;
	}

	#scontainer-4 {
		div[class^='col-'] {
			div {
				@include respond-between(xs, sm) {
					max-width: 247px;
					margin: 0 0 0 auto;
				}
			}
		}
	}

	h3 {
		@extend .subtitle;
		color: #fff;
	}

	h4 {
		color: #fff;
		@extend .subtitle-level-3;

		&:before {
			background: #fff;
		}
	}

	p {
		@extend .text;
		color: #fff;

		@include respond-below(xs) {
			max-width: 300px;
		}
	}
}

#scontainer-5 {
	margin-top: -280px;
	padding-bottom: 100px;
	border-bottom: 1px solid #000;

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

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

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

	div[class^='col-']:first-child {
		display: flex;
		justify-content: center;

		div {
			margin: 0 20px;

			&:first-child {
				@include respond-below(lg) {
					margin: 0 20px 0 0;
					width: calc(50% - 10px);
				}
			}

			&:last-child {
				@include respond-below(lg) {
					margin: 0;
					width: calc(50% - 10px);
				}
			}

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

			img {
				width: 260px;
				height: 330px;

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

				@include respond-below(md) {
					width: 100%;
					height: auto;
				}
			}
		}
	}

	p {
		@extend .text;
		color: #fff;
		font-weight: 700;

		@include respond-between(xs, lg) {
			min-height: 42px;
			display: flex;
			align-items: flex-end;
		}

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

.la-bellezza {
	text-align: right;

	h3 {
		@extend .subtitle;
	}

	h4 {
		@extend .subtitle-level-3;

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

	p {
		@extend .text;
		margin-bottom: 0;
	}

	#scontainer-7 {
		div[class^='col-']:first-child {
			div {
				background: $cGrayBg;
				padding: 50px 90px 50px 60px;
				width: 518px;
				height: 378px;

				@include respond-between(md, lg) {
					padding: 50px 45px 50px 40px;
					width: 432px;
				}

				@include respond-between(sm, md) {
					padding: 35px 36px 35px 25px;
					width: 100%;
					height: auto;
				}

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

				@include respond-below(xs) {
					padding: 50px 20px 50px 20px;
					width: 100%;
					height: auto;
				}
			}
		}

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

.la-bellezza-img {
	margin-top: -278px;

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

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

	img {
		margin-left: 100px;
		width: calc(100% - 100px);

		@include respond-above(lg) {
			width: 1010px;
			height: 574px;
		}

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

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

		@include respond-between(xs, sm) {
			width: 510px;
			height: 290px;
			margin-left: 0;
		}

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

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

			h2 {
				@extend .title;
			}

			p {
				@extend .text;
				max-width: 650px;
				margin: 0 auto 0px auto;
			}
		}
	}
}

.modernita-e-design {
	margin-top: 40px;
	background: url(/upload/filemanager/images/sistemi-scorrevoli-bg2.webp)
		no-repeat right;
	background-size: 58% 100%;

	@include respond-between(md, lg) {
		background-size: 72% 100%;
	}

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

	@include respond-below(sm) {
		background-size: cover;
		background: url(/upload/filemanager/images/sistemi-scorrevoli-bg2.webp)
			no-repeat center;
		margin-top: 140px;
	}

	#scontainer-10 {
		padding-top: 100px;
		padding-bottom: 100px;

		@include respond-below(sm) {
			padding-top: 0;
		}
	}

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

		> img {
			width: 100%;

			@include respond-above(lg) {
				width: 608px;
				height: 439px;
			}

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

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

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

			@include respond-below(xs) {
				width: 270px;
				height: 194px;
			}

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

		h3 {
			@extend .subtitle;
			color: #fff;
			position: relative;
			padding-bottom: 18px;
			margin-bottom: 18px;

			&:before {
				position: absolute;
				content: '';
				width: 142px;
				left: 0;
				background: #fff;
				height: 1px;
				bottom: 0;
			}

			a {
				color: #fff;
			}
		}

		p {
			@extend .text;
			color: #fff;
			text-align: justify;
		}

		.btn {
			color: #fff;
			border-color: #fff;

			&:first-child {
				margin-top: 15px;
			}

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

		&:first-child {
			@include respond-between(sm, lg) {
				display: flex;
				align-items: center;
			}
		}

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

			@include respond-above(lg) {
				justify-content: flex-start;
			}

			@include respond-between(md, lg) {
				justify-content: flex-start;
			}

			@include respond-between(sm, md) {
				justify-content: flex-start;
			}

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

		> div {
			max-width: 330px;

			@include respond-above(lg) {
				margin-left: 50px;
			}

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

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

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

#scontainer-12 {
	img {
		max-width: 100%;
		margin-top: 40px;

		@include respond-above(lg) {
			width: 1110px;
			height: 452px;
		}

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

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

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

		@include respond-below(xs) {
			width: 270px;
			height: 109px;
		}
	}

	h2 {
		@extend .title;
		letter-spacing: 0.05em;
		margin-bottom: 0;
		padding-bottom: 0;
		text-align: center;
		margin-right: 150px;

		&:before {
			display: none;
		}

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

	h3 {
		font-size: 90px;
		font-weight: 700;
		line-height: 90px;
		text-align: center;
		margin-left: 150px;
		letter-spacing: 0.05em;
		margin-bottom: 40px;

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

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

		@include respond-below(xs) {
			margin-left: 110px;
			font-size: 55px;
			line-height: 60px;
			margin-bottom: 15px;
		}
	}

	p {
		@extend .text;
		text-align: center;
		margin-bottom: 10px;

		strong {
			font-weight: 500;
		}
	}

	h5 {
		text-align: center;
		margin-bottom: 10px;
		font-family: $font-3;
		font-size: 20px;
		font-weight: 300;
		line-height: 31px;
		letter-spacing: 0em;
	}

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

.persiane-in-legno,
.tapparelle-box-01 {
	padding-top: 100px;

	@include respond-above(md) {
		padding-top: 200px;
	}

	#scontainer-13,
	#scontainer-27 {
		h3 {
			@extend .subtitle;
			position: relative;

			&:before {
				position: absolute;
				left: -80px;
				top: -140px;
				content: '';
				height: 340px;
				width: 1px;
				background: $cGrayText;

				@include respond-between(md, lg) {
					left: -45px;
				}

				@include respond-between(sm, md) {
					left: -40px;
				}

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

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

		h4 {
			@extend .subtitle-level-3;
		}

		p {
			@extend .text;
		}

		div[class^='col-']:first-child {
			background: $cGrayBg;
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;
			padding: 80px 150px 80px 190px;
			text-align: justify;

			@include respond-between(md, lg) {
				padding: 80px 108px 80px 90px;
			}

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

			@include respond-between(xs, sm) {
				padding: 50px 15px 50px 60px;
			}

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

		div[class^='col-']:nth-child(2) {
			position: relative;
			background: $cGrayBg;

			@include respond-between(xs, md) {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-right: 0;
			}

			img {
				@include respond-above(md) {
					top: -100px;
					position: absolute;
					right: -60px;
				}

				@include respond-above(lg) {
					width: 500px;
					height: 500px;
					object-fit: cover;
				}

				@include respond-between(md, lg) {
					width: 430px;
					height: 430px;
					object-fit: cover;
					top: -50px;
				}

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

				@include respond-below(xs) {
					width: 100%;
					height: 300px;
					object-fit: cover;
				}
			}
		}

		div[class^='col-']:nth-child(3) {
		}
	}

	#scontainer-27 {
		p:first-child {
			position: relative;

			&:before {
				position: absolute;
				left: -80px;
				top: -180px;
				content: '';
				height: 340px;
				width: 1px;
				background: $cGrayText;

				@include respond-between(md, lg) {
					left: -45px;
				}

				@include respond-between(sm, md) {
					left: -40px;
				}

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

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

		div[class^='col-']:nth-child(2) {
			img {
				@include respond-above(lg) {
					width: 448px;
					height: 385px;
					object-fit: cover;
				}
			}
		}
	}
}

.sistemi-di-oscuramento {
	@extend .box;

	h3 {
		@extend .subtitle;

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

	h4 {
		@extend .subtitle-level-3;
	}

	p {
		@extend .text;
	}

	div[class^='col-']:first-child {
		img {
			width: 100%;

			@include respond-above(lg) {
				width: 540px;
				height: 499px;
			}

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

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

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

			@include respond-below(xs) {
				width: 100%;
				height: 400px;
				object-fit: cover;
			}
		}

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

		@include respond-below(sm) {
			order: 2;
		}
	}

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

		@include respond-above(lg) {
			padding: 80px 90px 80px 50px;
		}

		@include respond-between(md, lg) {
			padding: 0px 85px 0px 15px;
		}

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

		@include respond-below(sm) {
			padding: 0px 15px 50px 15px;
			order: 1;
		}
	}
}

.garanzia-di-soddisfazione {
	margin-left: 80px;
	margin-right: 80px;
	background: url(/upload/filemanager/images/garanzia-di-soddisfazione2.webp)
		no-repeat center;
	background-size: cover;

	@include respond-between(xs, lg) {
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 40px;
		padding-right: 40px;
	}

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

	#scontainer-15 {
		h2 {
			@extend .title;
			color: #fff;
			padding-bottom: 0;
			text-align: center;

			&:before {
				display: none;
			}
		}

		p {
			@extend .text;
			text-align: center;
			color: #fff;
			position: relative;
			padding-bottom: 40px;

			@include respond-above(lg) {
				max-width: 820px;
			}

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

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

			@include respond-below(sm) {
			}

			&:before {
				position: absolute;
				content: '';
				width: 142px;
				left: calc(50% - 71px);
				background: #fff;
				height: 1px;
				bottom: 0;
			}
		}

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

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

.brands {
	@extend .box;

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

		img {
			max-width: 100%;

			@include respond-below(xs) {
				max-width: 120px;
			}
		}

		&:nth-child(even) {
			@include respond-below(xs) {
				justify-content: flex-start;
			}
		}

		&:nth-child(odd) {
			@include respond-below(xs) {
				justify-content: flex-end;
			}
		}
	}
}

.vi-invitiamo-a-collaborare {
	h3 {
		@extend .subtitle;
		position: relative;
		padding-bottom: 15px;
		margin-bottom: 20px;

		&:before {
			position: absolute;
			content: '';
			width: 142px;
			left: 0;
			background: #000;
			height: 1px;
			bottom: 0;

			@include respond-below(xs) {
				left: calc(50% - 71px);
			}
		}
	}

	p {
		@extend .text;
		margin-bottom: 0;
	}

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

				a {
					color: #000;

					&:hover {
						color: $cGrayDarkBg;
					}
				}

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

				.row {
					div[class^='col-'] {
						margin-top: 40px;
					}
				}
			}

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

				@include respond-between(xs, sm) {
					justify-content: flex-end;
					margin-top: -223px;
				}

				@include respond-below(xs) {
					justify-content: center;
					margin-top: 50px;
				}

				img {
					max-width: 100%;

					@include respond-above(lg) {
						width: 175px;
					}

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

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

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

					@include respond-below(xs) {
						width: 175px;
					}
				}
			}
		}
	}
}

#scontainer-17 {
	.tiles {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: 50px;
		margin-top: 30px;

		.tile {
			display: flex;
			column-gap: 10px;
			flex-direction: row-reverse;

			.tile-data {
				margin: 10px 0;
			}
		}

		@include respond-below(lg) {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			row-gap: 50px;
		}
	}
}

.scrivici {
	@extend .box;

	.alert {
		max-width: 828px;
		margin-left: auto;
		margin-right: auto;
	}

	h3 {
		text-align: center;
		@extend .subtitle;
		position: relative;
		padding-bottom: 15px;
		margin-bottom: 30px;

		&:before {
			position: absolute;
			content: '';
			width: 142px;
			left: calc(50% - 71px);
			background: #000;
			height: 1px;
			bottom: 0;
		}
	}

	form {
		max-width: 828px;
		margin-left: auto;
		margin-right: auto;

		.form-group {
			margin-bottom: 10px;

			.form-control {
				@extend .text;
				border-radius: 0;
				padding: 8px 12px;
				height: 100%;
				min-height: 40px;
				border-color: #cacaca;

				&::placeholder {
					@extend .text;
					color: $cGrayText;
				}

				&:focus {
					box-shadow: none;
					border-color: #cacaca;
				}
			}

			.form-check-label {
				@extend .text;
			}
		}

		.btn {
			width: 200px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-right: 0;
			margin-left: auto;

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

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

		.form-check {
			position: relative;
			display: flex;
			align-items: flex-start;
		}

		.form-check > input {
			height: 15px;
			width: 15px;
			-webkit-appearance: none;
			-moz-appearance: none;
			-o-appearance: none;
			appearance: none;
			border: 1px solid $cGrayText;
			border-radius: 0px;
			outline: none;
			transition-duration: 0.3s;
			background-color: transparent;
			margin-top: 2px;
		}

		.form-check > .form-check-label {
			@extend .text;

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

		.form-check > input:checked {
			border: 1px solid $cGrayText;
			background-color: transparent;
		}

		.form-check > input:checked + label::before {
			content: '\2713';
			display: block;
			text-align: center;
			color: #000;
			position: absolute;
			left: 3px;
			top: 0px;

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

		.form-check > input:active {
			border: 1px solid $cGrayText;
		}
	}
}

.footer {
	background: #000;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;

	img {
		@include respond-above(md) {
			width: 172px;
			height: 56px;
		}

		@include respond-below(md) {
			width: 130px;
			height: 42px;
		}
	}
}

#cookie-information {
	@extend .text;
	font-size: 11px;
	line-height: 14px;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;

	a {
		@extend .text;
		font-size: 11px;
		line-height: 12px;
		text-transform: uppercase;
	}
}

.banner-mini {
	text-align: center;
	background: url(/upload/filemanager/images/subpage/banner-mini.webp) no-repeat
		center;
	background-size: cover;
	margin-left: 80px;
	margin-right: 80px;
	padding-top: 90px;
	padding-bottom: 90px;

	@include respond-below(md) {
		margin-left: 20px;
		margin-right: 20px;
	}

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

	h1 {
		@extend .subtitle;
		color: #fff;
	}

	h2 {
		@extend .subtitle-level-3;
		color: #fff;
		padding-bottom: 0;
		margin-bottom: 0;

		&:before {
			display: none;
		}
	}
}

.tab-container {
	.nav-tabs {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 0;

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

		@extend .box;

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

		li {
			margin-right: 8px;

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

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

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

			a {
				@extend .tab;
				background: #fff;
				width: 150px;
				height: 60px;
				display: block;
				padding: 5px;
				border: 1px solid $cGrayBorder;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				flex-direction: column;

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

				@include respond-between(sm, md) {
					width: 105px;
					padding: 10px;
					min-height: 86px;
					height: auto;
				}

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

				&.active {
					background: #000;
					color: #fff;
				}
			}
		}
	}

	.tab-content1 {
		.row {
			&:first-child {
				> 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: flex-start;
						}

						h4 {
							@extend .tab-content-title;
							margin-right: 0;
							margin-left: auto;
							padding-left: 10px;
							padding-right: 10px;

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

						h5 {
							@extend .subtitle-level-3;
							text-align: right;
							padding-bottom: 10px;

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

							&:before {
								left: auto;
								right: 0;
								width: 35px;

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

						p {
							text-align: right;

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

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

						img {
							max-width: 100%;

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

			p {
				strong {
					font-weight: 500;
				}
			}
		}
	}

	.tab-content2 {
		.row {
			&:first-child {
				> div[class^='col-'] {
					&:nth-child(2) {
						display: flex;
						align-items: flex-start;
						flex-wrap: wrap;
						flex-direction: column;
						justify-content: center;

						h4 {
							@extend .tab-content-title;
							margin-left: 0;
							margin-right: auto;
							padding-left: 10px;
							padding-right: 10px;
						}

						h5 {
							@extend .subtitle-level-3;
							text-align: left;
							padding-bottom: 10px;

							&:before {
								left: auto;
								right: 0;
								width: 35px;
							}
						}

						p {
							text-align: left;
						}

						@include respond-below(sm) {
							order: 1;
						}
					}

					&:first-child {
						display: flex;
						justify-content: center;
						align-items: center;

						img {
							max-width: 100%;

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

						@include respond-below(sm) {
							order: 2;
						}
					}
				}
			}
		}
	}

	.tab-content1,
	.tab-content2 {
		.row {
			&.details {
				> div[class^='col-'] {
					background: $cGrayBg;
					display: flex;
					justify-content: center;
					align-items: center;
					padding-top: 3px;
					padding-bottom: 3px;
					margin-bottom: 25px;
					margin-top: 50px;

					@include respond-below(sm) {
						display: block;
						text-align: center;
						padding-top: 20px;
					}

					p {
						margin-bottom: 0;
						font-size: 14px;
						font-family: $font-3;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0em;
						text-align: left;

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

						@include respond-below(sm) {
							text-align: center;
							margin-bottom: 20px;
						}
					}

					img {
						margin-right: 14px;
						margin-left: 65px;
						width: 30px;
						height: auto;

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

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

						&:first-child {
							margin-left: 0px;
						}
					}
				}
			}

			&.content-schema {
				margin-bottom: 60px;

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

					p {
						@extend .text;
						font-size: 16px;
						text-align: center;

						@include respond-below(md) {
							min-height: 42px;
						}
					}

					.schema {
						text-align: center;
						margin-left: 10px;

						p {
							margin-left: auto;
							margin-right: auto;
							max-width: 150px;
							min-height: 42px;
						}

						&:first-child {
							margin-left: 0;
						}

						img {
							height: 70px;
							margin-bottom: 5px;
						}
					}

					&:first-child {
						padding-top: 80px;
						border-top: 1px solid #979797;
						margin-top: 80px;
					}
				}
			}

			&.more-schema {
				margin-bottom: 100px;

				.row {
					&:first-child {
						> div[class^='col-']:last-child {
							img {
								margin-top: 0;

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

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

					p {
						font-family: $font-3;
						font-size: 16px;
						font-weight: 300;
						line-height: 24px;
						letter-spacing: 0em;
						text-align: left;
						margin-bottom: 25px;

						strong {
							font-weight: 500;
						}
					}

					img {
						max-width: 100%;
					}

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

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

						div[class^='col-'] {
							display: block;

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

							p {
								text-align: left;

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

					&:nth-child(2) {
						display: flex;
						align-items: center;
						justify-content: center;

						p {
							@extend .text16;
							line-height: 15px;
							position: absolute;

							&:nth-child(2) {
								top: 67px;
								left: 167px;

								@include respond-between(md, lg) {
									top: 64px;
									left: 137px;
								}

								@include respond-between(sm, md) {
									left: 99px;
								}

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

								@include respond-below(xs) {
									top: 12px;
									left: 45%;
								}
							}

							&:nth-child(3) {
								top: 135px;
								left: 228px;

								@include respond-between(md, lg) {
									top: 136px;
									left: 195px;
								}

								@include respond-between(sm, md) {
									left: 123px;
								}

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

								@include respond-below(xs) {
									top: 81px;
									left: 50%;
								}
							}

							&:nth-child(4) {
								top: 282px;
								left: 167px;

								@include respond-between(md, lg) {
									top: 273px;
									left: 167px;
								}

								@include respond-between(sm, md) {
									left: 97px;
								}

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

								@include respond-below(xs) {
									top: 232px;
									left: 48%;
								}
							}
						}
					}
				}
			}

			&:nth-child(3) {
				> div[class^='col-'] {
					p {
						@extend .text;
					}
				}
			}

			&.tab-img {
				margin-bottom: 80px;

				img {
					width: 100%;
				}
			}
		}
	}
}

.tab-long {
	.nav-tabs {
		li {
			a {
				width: 350px;
				height: 60px;

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

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

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

				@include respond-below(xs) {
					width: 230px;
				}
			}
		}
	}
}

.tab-4 {
	.nav-tabs {
		li {
			a {
				width: 250px;
				height: 60px;

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

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

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

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

.more {
	background: $cGrayBg;
	margin-left: 100px;
	margin-right: 100px;
	margin-top: 180px;
	padding-bottom: 100px;
	padding-left: 30px;
	padding-right: 30px;

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

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

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

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

	div[class^='col-'] {
		@include respond-between(sm, md) {
			padding-right: 7px;
			padding-left: 7px;
		}

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

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

		div {
			background: #fff;
			position: relative;
			min-height: 550px;
			margin-top: -100px;

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

			@include respond-between(xs, sm) {
				min-height: 1px;
				margin-top: 0;
				margin-bottom: 50px;
			}

			@include respond-below(xs) {
				min-height: 1px;
				margin-top: 0;
				margin-bottom: 50px;
			}

			> img {
				width: 100%;
			}

			h3 {
				color: #101010;
				font-family: $font-2;
				font-size: 23px;
				font-style: normal;
				font-weight: 400;
				line-height: 28px;
				letter-spacing: 0em;
				text-align: left;
				margin: 40px 40px 15px 40px;

				@include respond-between(md, lg) {
					margin: 40px 25px 15px 25px;
				}

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

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

			p {
				@extend .text;
				margin: 0px 40px 20px 40px;

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

				@include respond-between(sm, md) {
					margin: 0px 15px 20px 15px;
				}

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

			.btn {
				margin: 0px 0px 40px 40px;
				position: absolute;
				bottom: 0;

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

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

				@include respond-below(sm) {
					position: relative;
				}

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

.porte-porte-in-pvc {
	#scontainer-21 {
		@extend .box;
		padding-bottom: 0;

		.row {
			/* &:first-child{
               h2{
                 @extend .title;
                 text-align: center;
               }
               p{
                 @extend .text;
                 text-align: center;
                 margin-bottom: 60px;
               }
             }*/
			&:nth-child(2) {
				div[class^='col-'] {
					&:nth-child(1) {
						display: flex;
						justify-content: center;
						align-items: center;
					}

					&:nth-child(2) {
						@include respond-below(sm) {
							margin-top: 60px;
						}
					}

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

			/*&:nth-child(3){
                div[class^="col-"]{
                    text-align: center;
                    @extend .box;
                    @include respond-below( sm ) {
                        padding-top: 60px;
                    }
                    img{
                        max-width: 900px;
                        width: 100%;
                    }
                }
            }*/
		}
	}
}

#scontainer-21,
#scontainer-22,
#scontainer-23 {
	.row {
		&:nth-child(1) {
			h2 {
				@extend .title;
				text-align: center;
			}

			p {
				@extend .text;
				text-align: center;
				margin-bottom: 60px;

				@include respond-below(xs) {
					text-align: justify;
				}
			}
		}
	}

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

		thead {
			tr {
				th {
					font-family: Alegreya Sans;
					font-size: 16px;
					font-style: normal;
					font-weight: 300;
					line-height: 24px;
					letter-spacing: 0em;
					text-align: center;
					color: #fff;
					background: #000;
					text-transform: uppercase;
					padding: 8px 15px;

					&:empty {
						visibility: hidden;
					}

					&:blank {
						visibility: hidden;
					}

					&:first-child {
						visibility: hidden;
					}

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

		tbody {
			border: 1px solid #000;
			padding-left: 20px;

			tr {
				&:first-child {
					td {
						padding-top: 100px;

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

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

				&:last-child {
					td {
						padding-bottom: 100px;

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

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

				td {
					padding: 10px 20px;
					font-size: 14px;
					font-weight: 500;

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

					text-align: center;

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

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

#scontainer-22 {
	.row {
		&:nth-child(2) {
			div[class^='col-'] {
				&:first-child {
					display: flex;
					justify-content: center;
					align-items: center;

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

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

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

			@include respond-below(sm) {
				padding-top: 60px;
			}

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

					img {
						max-width: 100%;
						width: 420px;
						height: 627px;

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

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

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

						@include respond-below(xs) {
							width: 200px;
							height: 298px;
						}
					}

					p {
						position: absolute;
						left: 442px;
						@extend .text;
						font-weight: 400;
						text-transform: uppercase;
						line-height: 19px;

						@include respond-between(md, lg) {
							left: 356px;
							font-size: 13px;
						}

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

						@include respond-below(xs) {
							left: 215px;
							line-height: 14px;
							font-size: 13px;
						}

						&:nth-child(2) {
							top: 100px;

							@include respond-between(md, lg) {
								top: 80px;
							}

							@include respond-between(sm, md) {
								top: 61px;
							}

							@include respond-between(xs, sm) {
							}

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

						&:nth-child(3) {
							top: 186px;

							@include respond-between(md, lg) {
								top: 152px;
							}

							@include respond-between(sm, md) {
								top: 114px;
							}

							@include respond-between(xs, sm) {
							}

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

						&:nth-child(4) {
							top: 254px;

							@include respond-between(md, lg) {
								top: 200px;
							}

							@include respond-between(sm, md) {
								top: 152px;
							}

							@include respond-between(xs, sm) {
							}

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

						&:nth-child(5) {
							top: 337px;

							@include respond-between(md, lg) {
								top: 260px;
							}

							@include respond-between(sm, md) {
								top: 193px;
							}

							@include respond-between(xs, sm) {
							}

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

						&:nth-child(6) {
							top: 401px;

							@include respond-between(md, lg) {
								top: 316px;
							}

							@include respond-between(sm, md) {
								top: 231px;
							}

							@include respond-between(xs, sm) {
							}

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

						&:nth-child(7) {
							top: 486px;

							@include respond-between(md, lg) {
								top: 384px;
							}

							@include respond-between(sm, md) {
								top: 277px;
							}

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

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

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

					h3 {
						@extend .subtitle;
						position: relative;
						padding-bottom: 15px;
						margin-bottom: 20px;

						&:before {
							position: absolute;
							content: '';
							width: 142px;
							left: 0;
							background: #000;
							height: 1px;
							bottom: 0;
						}
					}

					p {
						@extend .text;
					}

					div {
						margin-left: 50px;
						padding: 80px;
						background: $cGrayBg;

						@include respond-between(xs, md) {
							margin-left: 0px;
							padding: 50px 30px;
						}

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

#scontainer-23 {
	padding-bottom: 100px;

	.row {
		&:nth-child(2) {
			div[class^='col-'] {
				&:nth-child(1) {
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				&:nth-child(2) {
					display: flex;
					justify-content: center;
					align-items: center;

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

#scontainer-24 {
	@extend .box;

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

	h2 {
		@extend .subtitle;
		text-align: center;
		position: relative;
		padding-bottom: 20px;
		margin-bottom: 30px;

		&:before {
			position: absolute;
			content: '';
			width: 142px;
			left: calc(50% - 71px);
			background: #000;
			height: 1px;
			bottom: 0;
		}
	}

	p {
		@extend .text20;
		text-align: center;
		margin-bottom: 0;

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

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

.tipi-di-montaggio {
	background: url(/upload/filemanager/images/persiane-in-legno/persiane-in-legno-bg.webp)
		no-repeat center;
	background-size: cover;
	margin-left: 80px;
	margin-right: 80px;
	padding-top: 80px;
	padding-bottom: 80px;

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

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

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

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

	p {
		@extend .text20;
		color: #fff;
		margin-bottom: 0;
		text-align: center;

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

	h2 {
		@extend .subtitle;
		color: #fff;
		position: relative;
		padding-bottom: 20px;
		margin-bottom: 30px;

		&:before {
			position: absolute;
			content: '';
			width: 142px;
			left: calc(50% - 71px);
			background: #fff;
			height: 1px;
			bottom: 0;
		}
	}

	img {
		max-width: 100%;
	}
}

#scontainer-26 {
	margin-top: 80px;
	text-align: center;

	h2 {
		@extend .subtitle;
		position: relative;
		padding-bottom: 20px;
		margin-bottom: 30px;
		text-align: center;

		&:before {
			position: absolute;
			content: '';
			width: 142px;
			left: calc(50% - 71px);
			background: #000;
			height: 1px;
			bottom: 0;
		}
	}

	p {
		@extend .text20;
		font-size: 19px;
		text-transform: uppercase;
		text-align: center;
		margin-bottom: 80px;

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

	img {
		margin-bottom: 20px;
		max-height: 300px;
		max-width: 100%;
	}
}

.tapparelle-img {
	.box {
		@include respond-below(xs) {
			padding-bottom: 64px;
		}
	}

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

		.scontainer-content {
		}

		div[class^='col-'] {
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			margin-bottom: 38px;

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

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

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

			img {
				height: 98px;
				margin-left: 40px;

				@include respond-between(sm, md) {
					margin-left: 5px;
					height: 80px;
				}

				@include respond-between(xs, sm) {
					margin-left: 2px;
					height: 60px;
				}

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

			p {
				@extend .text;
				//  font-weight: 500;
				margin-bottom: 0;
				width: 170px;
				text-align: right;

				@include respond-between(sm, md) {
					font-size: 14px;
					line-height: 17px;
				}

				@include respond-between(xs, sm) {
					width: 95px;
					font-size: 12px;
					line-height: 12px;
				}
			}
		}

		.row:last-child {
			p {
				@extend .text20;
				background: $cGrayDarkBg;
				width: 100%;
				text-align: center;
				padding: 20px;
				color: #fff;

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

				@include respond-between(xs, sm) {
					padding: 5px 20px;
					font-size: 16px;
				}
			}
		}
	}

	.hidden-above-xs {
		text-align: center;
	}

	div[class^='col-'] {
		overflow: hidden;
		/* &:last-child{
             img{
                 @include respond-below( xs ) {
                     margin-top: 50px;
                 }
             }
         }*/
	}

	img {
		height: 490px;

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

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

		@include respond-below(xs) {
			height: auto;
			width: 230px;
			margin-right: 20px;
		}
	}

	#scontainer-42 {
		@include respond-below(xs) {
			margin-top: 30px;
			display: flex;
			justify-content: center;
			background: $cGrayBg;
			padding-top: 20px;
			padding-bottom: 20px;
		}

		p {
			@extend .text;
			//   font-weight: 500;
			margin-bottom: 0;

			@include respond-above(md) {
				left: 409px;
			}

			@include respond-above(xs) {
				position: absolute;
			}

			@include respond-between(sm, md) {
				left: 296px;
				//   font-size: 15px;
			}

			@include respond-between(xs, sm) {
				font-size: 12px;
				line-height: 14px;
				left: 215px;
			}

			@include respond-below(xs) {
				position: relative;
				padding-left: 40px;
				line-height: 16px;
				text-align: left;

				&:before {
					position: absolute;
					content: 'a';
					left: 10px;
				}
			}

			&:first-child {
				@include respond-above(xs) {
					top: 0;
				}
			}

			@include respond-below(xs) {
				&:before {
					content: '1';
				}
			}

			&:nth-child(2) {
				@include respond-above(md) {
					top: 30px;
				}

				@include respond-between(sm, md) {
					top: 19px;
				}

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

				@include respond-below(xs) {
					&:before {
						content: '2';
					}
				}
			}

			&:nth-child(3) {
				@include respond-above(md) {
					top: 57px;
				}

				@include respond-between(sm, md) {
					top: 36px;
				}

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

				@include respond-below(xs) {
					&:before {
						content: '3';
					}
				}
			}

			&:nth-child(4) {
				@include respond-above(md) {
					top: 167px;
				}

				@include respond-between(sm, md) {
					top: 116px;
				}

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

				@include respond-below(xs) {
					&:before {
						content: '4';
					}
				}
			}

			&:nth-child(5) {
				@include respond-above(md) {
					top: 247px;
				}

				@include respond-between(sm, md) {
					top: 173px;
				}

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

				@include respond-below(xs) {
					&:before {
						content: '5';
					}
				}
			}

			&:nth-child(6) {
				@include respond-above(md) {
					top: 290px;
				}

				@include respond-between(sm, md) {
					top: 205px;
				}

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

				@include respond-below(xs) {
					&:before {
						content: '6';
					}
				}
			}

			&:nth-child(7) {
				@include respond-above(md) {
					top: 326px;
				}

				@include respond-between(sm, md) {
					top: 230px;
				}

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

				@include respond-below(xs) {
					&:before {
						content: '7';
					}
				}
			}

			&:nth-child(8) {
				@include respond-above(md) {
					top: 361px;
				}

				@include respond-between(sm, md) {
					top: 256px;
				}

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

				@include respond-below(xs) {
					&:before {
						content: '8';
					}
				}
			}

			&:nth-child(9) {
				@include respond-above(md) {
					top: 400px;
				}

				@include respond-between(sm, md) {
					top: 283px;
				}

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

				@include respond-below(xs) {
					&:before {
						content: '9';
					}
				}
			}

			&:nth-child(10) {
				@include respond-above(md) {
					top: 427px;
				}

				@include respond-between(sm, md) {
					top: 303px;
				}

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

				@include respond-below(xs) {
					&:before {
						content: '10';
					}
				}
			}
		}
	}

	#scontainer-43 {
		p {
			position: absolute;
			@extend .text16;
			font-weight: 500;
			margin-bottom: 0;
			top: 0;

			@include respond-below(xs) {
				left: calc(50% + 118px);
			}

			&:first-child {
				top: 0;
			}

			&:nth-child(2) {
				@include respond-below(xs) {
					top: 20px;
				}
			}

			&:nth-child(3) {
				@include respond-below(xs) {
					top: 39px;
				}
			}

			&:nth-child(4) {
				@include respond-below(xs) {
					top: 124px;
				}
			}

			&:nth-child(5) {
				@include respond-below(xs) {
					top: 185px;
				}
			}

			&:nth-child(6) {
				@include respond-below(xs) {
					top: 219px;
				}
			}

			&:nth-child(7) {
				@include respond-below(xs) {
					top: 246px;
				}
			}

			&:nth-child(8) {
				@include respond-below(xs) {
					top: 274px;
				}
			}

			&:nth-child(9) {
				@include respond-below(xs) {
					top: 304px;
				}
			}

			&:nth-child(10) {
				@include respond-below(xs) {
					top: 325px;
				}
			}
		}
	}
}

#scontainer-28 {
	h2 {
		@extend .subtitle-line;
		margin-bottom: 40px;
	}

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

		div {
			margin-left: 6px;
			margin-right: 6px;
		}

		p {
			@extend .text;
			max-width: 111px;
			min-height: 50px;
			margin-bottom: 0;
			background: $cGrayBg;
			display: flex;
			justify-content: center;
			text-align: center;
			align-items: center;
			padding: 2px;
			margin-bottom: 20px;
		}

		img {
			width: 110px;
			height: 103px;
			object-fit: cover;
		}
	}
}

#scontainer-33,
#scontainer-34,
#scontainer-37,
#scontainer-38,
#scontainer-39,
#scontainer-60 {
	margin-top: 80px;

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

	h4 {
		@extend .subtitle-level-3;
		text-transform: none;
		margin-bottom: 20px;

		&:before {
			width: 90px;
		}

		span {
			font-size: 30px;
			font-family: $font-1;
			font-weight: 600;
			text-transform: uppercase;
			margin-left: 5px;
			margin-right: 5px;
		}
	}

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

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

		div {
			margin-left: 6px;
			margin-right: 6px;
		}

		p {
			@extend .text;
			max-width: 111px;
			min-height: 67px;
			margin-bottom: 0;
			background: $cGrayBg;
			display: flex;
			justify-content: center;
			text-align: center;
			align-items: center;
			padding: 2px;
			margin-bottom: 20px;
			text-transform: uppercase;
		}

		img {
			width: 110px;
			height: 103px;
			object-fit: cover;
		}
	}
}

#scontainer-33,
#scontainer-37 {
	margin-top: 100px;

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

#scontainer-39 {
	h4 {
		@include respond-below(xs) {
			display: flex;
			flex-direction: column;
		}

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

#scontainer-29 {
	padding-top: 80px;

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

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

		div {
			max-width: 300px;
		}
	}

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

		img {
			max-width: 100%;
		}
	}

	h3 {
		@extend .subtitle-line;
		text-align: right;

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

	p {
		@extend .text16;
		text-align: right;
		margin-bottom: 50px;

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

.tapparelle-controllo-separato {
	background: url(/upload/filemanager/images/tapparelle/tapparelle-bg.webp)
		no-repeat center;
	background-size: cover;
	height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 100px;
	margin-top: -120px;

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

	@include respond-below(xs) {
		height: 720px;
		padding-top: 80px;
		padding-left: 30px;
		padding-right: 30px;
	}

	h3 {
		@extend .subtitle-line;
		text-align: left;
		color: #fff;

		&:before {
			left: 0;
			right: auto;
			background: #fff;
		}
	}

	p {
		@extend .text;
		color: #fff;

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

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

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

		@include respond-below(xs) {
			order: 2;
			justify-content: center;
		}
	}

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

		@include respond-below(xs) {
			order: 1;
		}

		justify-content: center;

		div {
			max-width: 473px;
			margin-left: 68px;

			@include respond-between(sm, md) {
				max-width: 320px;
				margin-left: 40px;
			}

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

			@include respond-below(xs) {
				margin-left: 0;
				max-width: 100%;
			}
		}
	}
}

#scontainer-31 {
	margin-bottom: 100px;

	h3 {
		@extend .subtitle-line;
	}

	p {
		@extend .text16;
	}

	.row {
		padding-top: 80px;

		&:last-child {
			div[class^='col-'] {
				&:first-child {
					@include respond-below(sm) {
						order: 2;

						img {
							margin-top: 30px;
						}
					}
				}

				&:last-child {
					@include respond-below(sm) {
						order: 1;
					}
				}
			}
		}
	}

	div[class^='col-'] {
		img {
			max-width: 100%;
		}

		&:first-child {
			text-align: right;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			@include respond-between(xs, sm) {
				justify-content: center;
			}

			h3,
			p {
				text-align: right;

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

			div {
				max-width: 300px;
				margin-left: auto;
				margin-right: 50px;

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

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

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

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

		&:last-child {
			text-align: left;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			@include respond-between(xs, sm) {
				justify-content: center;
			}

			h3,
			p {
				text-align: left;

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

			div {
				max-width: 350px;
				margin-left: 50px;
				margin-right: auto;

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

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

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

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

.modal-contact {
	.modal-lg {
		@include respond-above(lg) {
			max-width: 1000px;
		}

		.modal-content {
			border-radius: 0;

			.modal-header {
				border-bottom: none;
				padding: 0;

				.close {
					position: absolute;
					right: 16px;
					top: 6px;
					z-index: 500;

					span {
						font-size: 40px;
					}
				}
			}

			.modal-body {
				max-width: 700px;
				margin: 0 auto;
				padding: 40px 20px 168px 20px;

				h5 {
					font-family: $font-1;
					font-size: 22px;
					font-weight: 600;
					text-transform: uppercase;
					margin-bottom: 30px;
				}

				.btn-black {
					margin-top: 10px;

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

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

				form {
					.form-row > .col,
					.form-row > [class*='col-'] {
						padding-right: 3px;
						padding-left: 3px;
					}

					.form-row {
						&:last-child {
							.form-group {
								text-align: right;
							}
						}
					}

					.form-group {
						margin-bottom: 10px;

						.form-check {
							.form-check-label {
								font-size: 13px;
								font-weight: 300;
								font-family: $font-3;
								line-height: 15px;
							}
						}

						p {
							font-size: 13px;
							font-weight: 300;
							font-family: $font-3;
							line-height: 15px;
							margin-bottom: 5px;
							maegin-top: 5px;
						}

						.form-control {
							@extend .text16;
							font-family: $font-1;
							border: 1px solid #000;
							border-radius: 0;
							padding: 8px;
							height: auto;

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

						.file {
							border: 2px dashed #c5c5c5;
							border-radius: 5px;
							margin-bottom: 0px;
							padding: 10px 15px;

							@include respond-above(xs) {
								display: flex;
								justify-content: space-between;
								align-items: center;
							}

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

							img {
								max-width: 50px;

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

							h4 {
								font-size: 14px;
								font-weight: 700;
								font-family: $font-1;
								margin-bottom: 0;
								color: #000;
								text-transform: uppercase;

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

							div {
								@include respond-above(xs) {
									display: flex;
									align-items: center;
									justify-content: flex-end;
								}
							}
						}
					}
				}
			}
		}
	}
}

#scontainer-32,
#scontainer-36 {
	.row {
		&:first-child {
			div[class^='col-'] {
				text-align: right;

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

				h3 {
					font-size: 30px;
					font-family: $font-1;
					font-weight: 400;
					line-height: 41px;
					letter-spacing: 0em;
					margin-bottom: 20px;
				}
			}
		}

		&:nth-child(2) {
			div[class^='col-'] {
				text-align: center;

				img {
					max-width: 100%;

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

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

				p {
					@extend .text;
					text-transform: uppercase;
					margin-top: 20px;
					margin-bottom: 20px;
				}
			}
		}
	}
}

.links {
	background: url(/upload/filemanager/images/subpage/links-bg.webp) no-repeat
		center;
	background-size: cover;
	margin-left: 80px;
	margin-right: 80px;
	text-align: center;
	@extend .box;

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

	@include respond-below(xs) {
		margin-left: 15px;
		margin-right: 15px;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	#scontainer-35 {
		@include respond-above(lg) {
			padding-left: 20px;
			padding-right: 20px;
		}

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

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

	h3 {
		@extend .subtitle;
		text-align: center;
		color: #fff;
		margin-bottom: 30px;
	}

	.row {
		div[class^='col-'] {
			div {
				background: rgba(255, 255, 255, 0.75);
				padding: 40px 33px;

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

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

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

				> img {
					margin-bottom: 30px;
					width: 100%;
					height: auto;

					@include respond-above(lg) {
						height: 270px;
						width: auto;
						max-width: 100%;
					}

					@include respond-between(md, lg) {
						height: 256px;
						width: auto;
						max-width: 100%;
					}

					@include respond-between(sm, md) {
						height: 207px;
						width: auto;
						max-width: 100%;
					}

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

					@include respond-below(xs) {
						width: auto;
						height: 254px;
						max-width: 100%;
					}
				}

				.btn {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 15px;

					@include respond-between(sm, md) {
						padding: 15px 10px;
						font-size: 12px;
					}
				}

				@include respond-between(xs, sm) {
					max-width: 350px;
					margin: 0 auto 30px auto;
				}
			}
		}
	}
}

.dettagli-pvc-verto {
	background: $cGrayBg;
	margin-top: 80px;
	padding-top: 40px;
	padding-bottom: 40px;

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

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

		@include respond-above(lg) {
			width: 509px;
			height: 382px;
		}

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

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

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

		@include respond-below(xs) {
			max-width: 509px;
			height: auto;
		}
	}

	h2 {
		@extend .subtitle-line;
		text-align: left;

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

		@include respond-between(xs, sm) {
			text-align: right;

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

	p {
		@extend .text;
		margin-bottom: 0;
		position: relative;

		@include respond-between(xs, sm) {
			text-align: right;
		}

		&:before {
			position: absolute;
			right: -80px;
			top: -250px;
			content: '';
			height: 350px;
			width: 1px;
			background: $cGrayText;

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

			@include respond-between(sm, md) {
				right: -10px;
				height: 217px;
				top: -196px;
			}

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

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

			@include respond-above(lg) {
				padding-right: 70px;
			}

			@include respond-between(xs, sm) {
				justify-content: flex-end;
				margin-top: 50px;
				margin-bottom: 30px;
			}

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

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

			div {
				max-width: 250px;

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

				@include respond-between(xs, sm) {
					margin-right: 50px;
					max-width: 300px;
					margin-top: -39px;
				}
			}
		}
	}
}

.verto-1-2-3 {
	@extend .box;

	h2 {
		font-family: $font-4;
		font-size: 40px;
		font-style: normal;
		font-weight: 400;
		line-height: 53px;
		letter-spacing: 0em;
		text-align: left;
		border: 1px solid $cGrayBorder;
		display: inline-block;
		padding: 4px 20px;
		margin-bottom: 30px;
	}

	h3 {
		font-family: $font-4;
		font-size: 23px;
		font-style: normal;
		font-weight: 400;
		line-height: 30px;
		letter-spacing: 0em;
		text-align: left;
		margin-bottom: 20px;

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

	p {
		@extend .text;
		margin-bottom: 0;
	}

	div[class^='col-'] {
		&:first-child {
			border-right: 1px solid #d9d9d9;

			@include respond-above(md) {
				padding-right: 40px;
			}

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

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

				p {
					border-bottom: 1px solid #d9d9d9;
					padding-bottom: 30px;
					margin-bottom: 30px;
				}
			}
		}

		&:nth-child(2) {
			border-right: 1px solid #d9d9d9;

			@include respond-above(md) {
				padding-right: 40px;
				padding-left: 40px;
			}

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

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

				p {
					border-bottom: 1px solid #d9d9d9;
					padding-bottom: 30px;
					margin-bottom: 30px;
				}
			}
		}

		&:last-child {
			@include respond-above(md) {
				padding-left: 40px;
			}

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

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

.dettagli-pvc-ferramenta {
	h3 {
		@extend .subtitle;
		text-align: right;
	}

	h4 {
		@extend .subtitle-level-3;
		text-align: right;

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

	p {
		@extend .text;
		text-align: right;
		max-width: 250px;
		margin-left: auto;
		margin-right: 0;

		@include respond-below(sm) {
			text-align: center;
			margin-left: auto;
			margin-right: auto;
		}
	}

	img {
		max-width: 100%;
	}

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

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

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

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

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

			p {
				text-align: center;
				margin-left: auto;
				margin-right: auto;
				margin-top: 10px;
			}
		}
	}
}

.dettagli-pvc-maniglia {
	padding-top: 100px;

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

	h3 {
		@extend .subtitle;
		text-align: right;
	}

	h4 {
		@extend .subtitle-level-3;
		text-align: right;

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

	p {
		@extend .text;
		text-align: justify;
		max-width: 320px;
		margin-left: auto;
		margin-right: 0;
		position: relative;

		&:before {
			position: absolute;
			right: -40px;
			top: -122px;
			content: '';
			height: 350px;
			width: 1px;
			background: $cGrayText;

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

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

	> div[class^='col-']:last-child {
		background: $cGrayBg;
		padding: 80px 130px;
		z-index: 9;

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

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

.dettagli-pvc-maniglia-img {
	margin-top: -320px;
	z-index: -1;
	margin-bottom: 0px;

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

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

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

	img {
		width: 100%;
	}
}

.ricevi-box {
	text-align: center;
	padding-top: 50px;
	padding-bottom: 100px;

	&.funzionale {
		padding-top: 0;
	}
}

.a-risparmio-energetico-verto {
	background: $cGrayBg;
	margin-top: 80px;
	padding-top: 40px;
	padding-bottom: 50px;

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

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

	h3 {
		@extend .subtitle-line;
		text-align: right;

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

	p {
		@extend .text;
		text-align: right;
		margin-bottom: 0;
	}

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

			div {
				max-width: 300px;
			}
		}

		&:last-child {
			@include respond-below(xs) {
				text-align: center;
			}

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

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

				@include respond-below(xs) {
					width: 270px;
				}
			}

			p {
				@extend .text16;
				position: absolute;
				text-transform: uppercase;
				font-weight: 600;
				top: 0;
				line-height: 18px;

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

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

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

				@include respond-below(xs) {
					font-size: 10px;
					line-height: 10px;
					left: 0;
				}

				&:nth-child(2) {
					top: -109px;
					left: 289px;

					@include respond-between(md, lg) {
						left: 242px;
					}

					@include respond-between(sm, md) {
						left: 176px;
					}

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

					@include respond-below(xs) {
						top: 49px;
						left: calc(50% - 33px);
					}
				}

				&:nth-child(3) {
					top: 58px;
					left: -33px;
					text-align: right;

					@include respond-between(md, lg) {
						top: 29px;
						left: -29px;
					}

					@include respond-between(sm, md) {
						max-width: 87px;
						top: -6px;
						left: -8px;
					}

					@include respond-between(xs, sm) {
						top: 169px;
						left: 13px;
						max-width: 86px;
					}

					@include respond-below(xs) {
						top: 114px;
						left: calc(50% - 170px);
						max-width: 92px;
					}
				}

				&:nth-child(4) {
					top: -8px;
					left: 525px;

					@include respond-between(md, lg) {
						top: -47px;
						left: 444px;
					}

					@include respond-between(sm, md) {
						top: -45px;
						left: 330px;
					}

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

					@include respond-below(xs) {
						top: 79px;
						left: calc(50% + 68px);
						max-width: 79px;
					}
				}

				&:nth-child(5) {
					top: 132px;
					left: 525px;

					@include respond-between(md, lg) {
						top: 93px;
						left: 437px;
					}

					@include respond-between(sm, md) {
						top: 45px;
						left: 326px;
					}

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

					@include respond-below(xs) {
						top: 151px;
						left: calc(50% + 81px);
					}
				}

				&:nth-child(6) {
					top: 253px;
					left: 472px;

					@include respond-between(md, lg) {
						top: 193px;
						left: 398px;
					}

					@include respond-between(sm, md) {
						top: 118px;
						left: 292px;
					}

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

					@include respond-below(xs) {
						top: 204px;
						left: calc(50% + 67px);
					}
				}

				&:nth-child(7) {
					top: 234px;
					text-align: right;
					left: 0;

					@include respond-between(md, lg) {
						top: 177px;
					}

					@include respond-between(sm, md) {
						top: 109px;
						left: 9px;
					}

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

					@include respond-below(xs) {
						top: 197px;
						left: calc(50% - 148px);
					}
				}
			}
		}
	}
}

.vetri-selettivi {
	@extend .box;

	h3 {
		@extend .subtitle;
		text-align: left;
		margin-bottom: 0;
	}

	h4 {
		@extend .subtitle-line;
		text-align: left;

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

	img {
		width: 100%;

		@include respond-below(md) {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	p {
		@extend .text;
		max-width: 325px;
	}

	div[class^='col-'] {
		&:first-child {
			@include respond-below(sm) {
				order: 2;
			}
		}

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

			@include respond-between(xs, sm) {
				order: 1;
			}
		}
	}
}

.canalina-calda {
	background: $cGrayBg;

	h3 {
		@extend .subtitle-line;
		text-align: right;
		margin-top: 60px;

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

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

	p {
		@extend .text;
		text-align: right;
		max-width: 300px;
		margin-bottom: 60px;
	}

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

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

	div[class^='col-']:last-child {
		padding-right: 0;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;

		img {
			max-width: 100%;
		}
	}
}

.dettagli-legno-canalina-calda {
	margin-bottom: 0px;

	h3 {
		@extend .subtitle-line;
		text-align: left;
		margin-top: 60px;

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

	p {
		@extend .text;
		text-align: left;
		max-width: 300px;
		margin-bottom: 60px;
		position: relative;

		&:before {
			position: absolute;
			left: -70px;
			top: -86px;
			content: '';
			height: 350px;
			width: 1px;
			background: #bebebe;

			@include respond-between(sm, md) {
				left: -27px;
			}

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

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

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

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

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

	div[class^='col-']:last-child {
		padding-right: 0;
		display: flex;
		justify-content: center;
		align-items: flex-end;

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

.profili-slim {
	h3 {
		@extend .subtitle;
		text-align: right;
	}

	h4 {
		@extend .subtitle-level-3;
		text-align: right;

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

	p {
		@extend .text;
		text-align: right;
	}

	div[class^='col-'] {
		&:first-child {
			background: $cGrayBg;
			padding: 50px 60px;
			z-index: 2;

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

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

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

		&:last-child {
			@include respond-below(sm) {
				display: none;
			}
		}
	}
}

.profili-slim-img {
	img {
		width: 100%;
		margin-top: -195px;

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

.porte-dettagli {
	@extend .box;
	padding-top: 136px;

	#scontainer-41 {
		@include respond-above(md) {
			padding-right: 70px;
		}

		.row {
			&:first-child {
				div[class^='col-'] {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					position: relative;

					@include respond-between(xs, sm) {
						justify-content: flex-start;
					}

					@include respond-below(xs) {
						justify-content: flex-start;
					}

					img {
						z-index: 5;
						margin-right: 40px;
						width: 134px;
						height: 184px;

						&:last-child {
							width: 136px;
							height: 185px;
						}

						@include respond-below(md) {
							margin-right: 0px;

							&:last-child {
								margin-left: 20px;
							}
						}
					}

					p {
						position: absolute;
						top: -35px;
						left: 170px;
						@extend .text;
						font-weight: 500;

						@include respond-between(md, lg) {
							left: 83px;
						}

						@include respond-between(sm, md) {
							left: 55px;
						}

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

						@include respond-below(xs) {
							left: 16px;
							top: -26px;
						}
					}
				}
			}

			&:nth-child(2) {
				div[class^='col-'] {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-top: -155px;

					@include respond-between(xs, sm) {
						justify-content: flex-end;
						margin-top: -33px;
					}

					@include respond-below(xs) {
						margin-top: -12px;
						justify-content: flex-end;
					}

					img {
						max-width: 100%;

						@include respond-above(lg) {
							width: 422px;
							height: 292px;
						}

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

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

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

						@include respond-below(xs) {
							width: 280px;
							height: 186px;
						}
					}

					p {
						position: absolute;
						top: 15px;
						left: 78px;
						@extend .text;
						font-weight: 500;

						@include respond-between(sm, md) {
							left: 53px;
						}

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

						@include respond-below(xs) {
							top: 7px;
							left: auto;
							right: 0;
							max-width: 258px;
							line-height: 13px;
						}
					}
				}
			}

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

					@include respond-between(xs, sm) {
						justify-content: flex-start;
					}

					@include respond-below(xs) {
						justify-content: flex-start;
					}

					img {
						margin-top: -97px;
						width: 145px;
						height: 215px;

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

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

						@include respond-below(xs) {
							margin-top: -6px;
							margin-left: 126px;
						}
					}

					p {
						transform: rotate(-90deg);
						position: absolute;
						top: -30px;
						left: 90px;
						@extend .text;
						font-weight: 500;

						@include respond-between(md, lg) {
							left: 30px;
						}

						@include respond-between(sm, md) {
							top: 28px;
							left: -31px;
						}

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

						@include respond-below(xs) {
							top: 82px;
							left: 40px;
							line-height: 13px;
						}
					}

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

						h2 {
							font-family: $font-3;
							font-size: 100px;
							font-style: normal;
							font-weight: 300;
							line-height: 120px;
							letter-spacing: 0.05em;
							text-align: left;
							text-transform: uppercase;
							color: #e1e1e1;
							margin-bottom: 0;

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

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

							@include respond-below(xs) {
								font-size: 70px;
								line-height: 70px;
								margin-top: 20px;
							}
						}
					}
				}
			}
		}
	}
}

.una-marea-img {
	img {
		max-width: 100%;
	}
}

.una-marea {
	h3 {
		@extend .subtitle;
	}

	h4 {
		@extend .subtitle-level-3;
	}

	p {
		@extend .text;
		text-align: justify;
		position: relative;

		&:before {
			position: absolute;
			right: -40px;
			top: -10px;
			content: '';
			height: 350px;
			width: 1px;
			background: #bebebe;

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

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

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

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

		&:first-child {
			height: 1px;
		}

		div {
			margin-top: -682px;
			background: $cGrayBg;
			padding: 130px 90px;

			@include respond-between(md, lg) {
				padding: 40px 90px;
				margin-top: -560px;
			}

			@include respond-between(sm, md) {
				margin-top: -412px;
				padding: 25px 40px;
			}

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

			@include respond-below(xs) {
				padding: 70px 25px;
				margin-top: -25px;
			}
		}
	}
}

.dettagli-maniglia,
.dettagli-legno-maniglia {
	@extend .box;
	padding-bottom: 0;

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

	h3 {
		@extend .subtitle;
	}

	h4 {
		@extend .subtitle-level-3;
	}

	p {
		@extend .text;
		text-align: justify;
		max-width: 400px;
		margin-bottom: 30px;
	}

	img {
		max-width: 100%;
	}

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

		div {
		}

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

	.dettagli-colori-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		div {
			display: block;
			width: 17%;
			text-align: center;

			img {
				max-width: 100%;
			}

			p {
				@extend .text20;
				text-transform: uppercase;
				text-align: center;
				margin-bottom: 0;

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

.dettagli-legno-maniglia {
	h3 {
		@extend .subtitle-line;
		text-align: left;

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

.dettagli-box-bg {
	margin-top: 120px;
	background: url(/upload/filemanager/images/dettagli-pvc/design-moderno/guarnizioni-bg.webp)
		no-repeat center;
	background-size: cover;

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

	img {
		max-width: 100%;
	}

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

		div {
			margin-top: 80px;
			margin-bottom: 80px;

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

	h3 {
		@extend .subtitle-line;
		color: #fff;
		text-align: left;

		&:before {
			background: #fff;
			left: 0;
			right: auto;
		}
	}

	h4 {
		@extend .subtitle-level-3;
		color: #fff;
		padding-bottom: 0;

		&:before {
			display: none;
		}
	}

	p {
		@extend .text;
		color: #fff;
		max-width: 400px;
		position: relative;

		&:before {
			position: absolute;
			left: -637px;
			top: -248px;
			content: '';
			height: 340px;
			width: 1px;
			background: #bebebe;

			@include respond-between(md, lg) {
				left: -540px;
			}

			@include respond-between(sm, md) {
				left: -407px;
			}

			@include respond-between(xs, sm) {
				left: -32px;
				top: -486px;
				height: 565px;
			}

			@include respond-below(xs) {
				left: 9px;
				top: -369px;
				height: 243px;
			}
		}
	}

	&.freno {
		p {
			&:before {
				left: -558px;
				top: -256px;

				@include respond-between(md, lg) {
					left: -441px;
				}

				@include respond-between(sm, md) {
					left: -298px;
				}

				@include respond-between(xs, sm) {
					left: -8px;
					top: -678px;
					height: 424px;
				}

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

		div[class^='col-'] {
			&:first-child {
				@include respond-between(xs, sm) {
					padding-top: 80px;
					padding-bottom: 60px;
				}

				@include respond-below(sm) {
					padding-top: 60px;
					padding-bottom: 60px;
				}
			}
		}
	}
}

.dettagli-3-box {
	padding-top: 100px;
	padding-bottom: 60px;

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

	img {
		width: 100%;
	}

	h3 {
		@extend .subtitle;
		margin-top: 20px;

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

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

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

	p {
		@extend .text;
		text-align: justify;
		margin-bottom: 40px;

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

	a {
		@extend .text20;
		color: #000;
		letter-spacing: 0;

		@include respond-above(sm) {
			position: absolute;
			bottom: 0;
		}

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

.dettagli-finitura-ultra-opaca {
	padding-bottom: 100px;

	h3 {
		@extend .subtitle;
		text-align: center;
		margin-bottom: 30px;
	}

	p {
		@extend .text;
		text-align: center;
		max-width: 750px;
		margin-left: auto;
		margin-right: auto;
	}

	div[class^='col-']:nth-child(2) {
		padding-top: 30px;
		display: flex;
		justify-content: space-between;
		margin-bottom: 50px;
		flex-wrap: wrap;

		div {
			display: block;

			img {
				width: 105px;
			}

			p {
				text-transform: uppercase;
				margin-top: 20px;
				line-height: 18px;
			}
		}
	}

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

.soglia-bassa {
	h3 {
		@extend .subtitle;
	}

	h4 {
		@extend .subtitle-level-3;
	}

	p {
		@extend .text;
	}

	div[class^='col-'] {
		z-index: 5;

		div {
			background: $cGrayBg;
			padding: 50px 60px;

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

.soglia-bassa-img {
	img {
		width: 100%;
		margin-top: -195px;

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

	div[class^='col-'] {
		&:last-child {
			@include respond-below(sm) {
				height: 1px;
			}
		}
	}
}

.salatura {
	@extend .box-text-left;
	padding-bottom: 0;

	div[class^='col-'] {
		&:first-child {
			@include respond-below(sm) {
				order: 2;
			}
		}

		&:last-child {
			@include respond-below(sm) {
				order: 1;
			}
		}
	}
}

.box-right {
	@extend .box-text-right;
	padding-top: 100px;
	padding-bottom: 0;

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

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

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

.box-left {
	@extend .box-text-left;
	padding-top: 100px;
	padding-bottom: 0;
}

.dettagli-legno-legno {
	h3 {
		@extend .subtitle;
	}

	h4 {
		@extend .subtitle-level-3;

		@include respond-below(sm) {
			&:before {
				left: calc(50% - 71px);
			}
		}
	}

	p {
		@extend .text;
		max-width: 260px;

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

	img {
		max-width: 100%;
	}

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

		@include respond-below(sm) {
			order: 1;
			align-items: center;
			text-align: center;
			padding-left: 15px;
		}
	}

	div[class^='col-']:first-child {
		@include respond-below(sm) {
			order: 2;
		}
	}
}

.colori-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 520px;
	padding-left: 50px;

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

	@include respond-between(sm, md) {
		max-width: 326px;
		padding-left: 20px;
	}

	div {
		display: block;
		width: 17%;
		text-align: center;

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

		p {
			@extend .text;
			text-transform: uppercase;
			text-align: center;
			margin-bottom: 0px;
		}
	}
}

.dettagli-pvc {
	.dettagli-pvc-maniglia-img {
		margin-bottom: 0;
	}
}

.no-touchevents {
	div[id^='menu-container-'] {
		> ul {
			> li {
				&.parent {
					> a {
						@include respond-above(xs) {
							pointer-events: none;
						}
					}
				}
			}
		}
	}
}

.touchevents {
	.top {
		#main-menu {
			div[id^='menu-container-'] {
				> ul {
					> li:hover {
						ul {
							display: none;
						}
					}

					> li {
						&.open-menu {
							ul {
								display: block !important;
							}
						}
					}
				}
			}
		}
	}
}

.files {
	margin-bottom: 0;
}

.file-cover {
	background: #fff;
	height: 30px;
	margin-top: -30px;
	position: relative;
	z-index: 10;
}

.captcha.error {
	.check {
		border: 2px solid #cc0000;
	}
}

.buttons {
	@include respond-below(xs) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.btn {
		&:first-child {
			margin-right: 10px;

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

.buttons2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;

	.btn {
		&:first-child {
			margin-bottom: 20px;
		}

		&:nth-child(2) {
			margin-top: 0px;
		}
	}
}

#fancybox-buttons.top {
	background: transparent !important;
}

.color-container {
	position: relative;
	padding-top: 90px;
	width: 115px;
	@include transition;

	&:hover {
		p {
			background: #000 !important;
			color: #fff !important;
		}
	}

	a {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		overflow: hidden;
		z-index: 10;

		img {
			height: 90px !important;
		}
	}
}

.map-adres {
	iframe {
		width: 100%;
		margin-bottom: 30px;
	}
}

.footer-big {
	background: #231f20;
	@extend .box;
	color: #fff;
	font-size: 15px;

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

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

	.column-right {
		@include respond-above(sm) {
			padding-left: 50px;
		}

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

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

			li {
				margin-bottom: 10px;
			}
		}

		a {
			color: #fff;
			font-weight: 200;
		}
	}

	.column-left {
		font-weight: 200;

		@include respond-above(sm) {
			padding-right: 50px;
		}

		@include respond-below(sm) {
			text-align: center;
			padding-bottom: 25px;
		}

		img {
			max-width: 200px !important;
			margin-bottom: 50px;
		}
	}
}

.footer_top_box {
	padding-bottom: 80px;

	.footer_top_box__wrapper {
		.footer_top_data {
			.footer_top_title {
				text-align: center;

				h2 {
					@extend .subtitle;
					position: relative;
					padding-bottom: 15px;
					margin-bottom: 30px;

					&:before {
						position: absolute;
						content: '';
						width: 142px;
						left: calc(50% - 71px);
						background: #000;
						height: 1px;
						bottom: 0;
					}
				}
			}

			.footer_top_tiles {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				column-gap: 100px;
				row-gap: 40px;

				.tile {
					display: block;

					a {
						color: #000;
						font-family: 'Open Sans', sans-serif;
						font-weight: 600;
						font-size: 14px;
						line-height: 19px;

						display: flex;
						flex-direction: row;
						align-items: center;
						column-gap: 20px;
						padding: 15px;
						background-color: #ebebeb;
						width: 360px;
						text-transform: uppercase;

						img {
							width: 100%;
							max-width: 32px;
						}
					}
				}
			}
		}
	}
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/fonts/URWForm-LightItalic.woff2') format('woff2'),
		url('/layout/fonts/URWForm-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/fonts/URWForm-ExtraLightItalic.woff2') format('woff2'),
		url('/layout/fonts/URWForm-ExtraLightItalic.woff') format('woff');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/fonts/URWForm-Medium.woff2') format('woff2'),
		url('/layout/fonts/URWForm-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/fonts/URWForm-MediumItalic.woff2') format('woff2'),
		url('/layout/fonts/URWForm-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form Demi';
	src: url('/layout/fonts/URWForm-Demi.woff2') format('woff2'),
		url('/layout/fonts/URWForm-Demi.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/fonts/URWForm-Italic.woff2') format('woff2'),
		url('/layout/fonts/URWForm-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/fonts/URWForm-Light.woff2') format('woff2'),
		url('/layout/fonts/URWForm-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/fonts/URWForm-ThinItalic.woff2') format('woff2'),
		url('/layout/fonts/URWForm-ThinItalic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/fonts/URWForm-Bold.woff2') format('woff2'),
		url('/layout/fonts/URWForm-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/fonts/URWForm-BoldItalic.woff2') format('woff2'),
		url('/layout/fonts/URWForm-BoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/fonts/URWForm-Thin.woff2') format('woff2'),
		url('/layout/fonts/URWForm-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/fonts/URWForm-Regular.woff2') format('woff2'),
		url('/layout/fonts/URWForm-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form Extra';
	src: url('/layout/fonts/URWForm-ExtraBoldItalic.woff2') format('woff2'),
		url('/layout/fonts/URWForm-ExtraBoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form Extra';
	src: url('/layout/fonts/URWForm-ExtraBold.woff2') format('woff2'),
		url('/layout/fonts/URWForm-ExtraBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

.footer-big * {
	font-family: 'URW Form';
}

#scontainer-47 {
	height: 630px;
	display: flex;
	align-items: center;
	margin-top: 100px;
	margin-bottom: 100px;

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

	h2 {
		@extend .subtitle-line;
		margin-bottom: 40px;

		&::before {
			width: 80%;
			left: 0;
			height: 2px;
		}
	}

	h3 {
		@extend .subtitle;
		position: relative;

		&:before {
			position: absolute;
			left: -80px;
			top: -140px;
			content: '';
			height: 340px;
			width: 1px;
			background: $cGrayText;

			@include respond-between(md, lg) {
				left: -45px;
			}

			@include respond-between(sm, md) {
				left: -40px;
			}

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

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

	h4 {
		@extend .subtitle-level-3;
	}

	p {
		@extend .text;
	}

	div[class^='col-']:first-child {
		background: $cGrayBg;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		padding: 80px 150px 80px 60px;
		text-align: justify;

		@include respond-between(md, lg) {
			padding: 80px 108px 80px 90px;
		}

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

		@include respond-between(xs, sm) {
			padding: 50px 15px 50px 60px;
		}

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

	div[class^='col-']:nth-child(2) {
		position: relative;
		background: $cGrayBg;

		@include respond-between(xs, md) {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-right: 0;
		}

		img {
			@include respond-above(md) {
				top: 50%;
				position: absolute;
				right: -60px;
				transform: translateY(-50%);
			}

			@include respond-above(lg) {
				width: 500px;
				height: 630px;
				object-fit: cover;
			}

			@include respond-between(md, lg) {
				width: 430px;
				height: 530px;
				object-fit: cover;
			}

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

			@include respond-below(xs) {
				width: 100%;
				height: 300px;
				object-fit: contain;
				margin-bottom: 50px;
			}
		}
	}

	div[class^='col-']:nth-child(3) {
	}
}

#scontainer-48 {
	margin-bottom: 100px;

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

	h2 {
		@extend .subtitle-line;
		margin-bottom: 40px;
	}

	p {
		@extend .text;
	}

	img {
		margin-bottom: 24px;
	}

	.single-col {
		text-align: center;
	}
}

#scontainer-49,
#scontainer-50 {
	margin-bottom: 100px;

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

	h2 {
		@extend .subtitle-line;
		margin-bottom: 40px;
	}

	.single-col {
		a {
			display: block;
			height: 100%;
			position: relative;
			cursor: pointer;

			&:hover {
				&::before,
				&::after {
					opacity: 1;
				}
			}

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				background: rgba(0, 0, 0, 0.6);
				opacity: 0;
				transition: all 250ms ease-in-out;
			}

			&::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 55px;
				height: 55px;
				background: url('/upload/filemanager/images/cassonetto/material-symbols_search.png');
				opacity: 0;
				transition: all 250ms ease-in-out;
				transform: translate(-50%, -50%);
			}
		}

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

#scontainer-51 {
	padding: 100px 70px;
	margin-bottom: 100px;
	background: #fafafa;

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

	p {
		@extend .text;
	}

	.row {
		align-items: center;
	}

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

	.single-col-2 {
		position: relative;
		padding-bottom: 50px;

		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 15px;
			width: 100%;
			max-width: 190px;
			height: 1px;
			background: #000;
		}
	}
}

#scontainer-52 {
	margin-bottom: 100px;

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

	.row {
		align-items: center;
	}

	.single-col {
		display: flex;
		align-items: center;
		justify-content: center;

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

#scontainer-53 {
	margin-bottom: 100px;

	h2 {
		@extend .subtitle-line;
		margin-bottom: 40px;
	}

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

		div {
			margin-left: 6px;
			margin-right: 6px;
		}

		p {
			@extend .text;
			max-width: 106px;
			min-height: 50px;
			margin-bottom: 0;
			background: $cGrayBg;
			display: flex;
			justify-content: center;
			text-align: center;
			align-items: center;
			padding: 2px;
			margin-bottom: 20px;
			text-transform: uppercase;
		}

		img {
			width: 106px;
			height: 106px;
			object-fit: cover;
		}
	}

	.color-container {
		padding-top: 0;
	}
}

.home_slider {
	.swiper-slide {
		overflow: hidden;

		.slide-data {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.slide-text {
				position: absolute;
				max-width: 1100px;
			}
		}
	}

	.swiper-pagination {
		position: absolute;
		right: 50px;
		bottom: 50px;
		width: auto;
		display: flex;
		justify-content: flex-end;
		gap: 30px;

		.swiper-pagination-bullet {
			color: #fff;
			background: transparent !important;
			position: relative;
			display: block;
			height: 30px;
			width: 30px;
			opacity: 1 !important;

			&::before {
				display: block;
				height: 30px;
				width: 30px;
				position: absolute;
				top: 0;
				left: 0;
				font-size: 22px;
			}

			&:first-child::before {
				content: '01';
			}

			&:nth-child(2)::before {
				content: '02';
			}

			&:nth-child(3)::before {
				content: '03';
			}

			//   &:nth-child(4)::before {
			//     content: "04";
			//   }

			//   &:nth-child(5)::before {
			//     content: "05";
			//   }

			&.swiper-pagination-bullet-active {
				margin-right: 70px;
				position: relative;

				&::after {
					content: '';
					display: block;
					height: 1px;
					width: 50px;
					background: #fff;
					position: absolute;
					top: 50%;
					right: -75px;
				}

				&:last-child {
					margin-right: 0 !important;
				}

				&:nth-child(2) {
					margin-left: 70px;
					// margin-right: 4px;

					&::after {
						// display: none;
						right: auto;
						left: -80px;
					}
				}
			}
		}
	}
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

#nav_tabs {
	max-width: 980px;
	// padding-bottom: 120px;
	margin-bottom: 90px;
	margin-left: auto;
	margin-right: auto;

	// &::before {
	// 	content: '';
	// 	position: absolute;
	// 	bottom: 0;
	// 	left: 0;
	// 	height: 1px;
	// 	width: 100vw;
	// 	background-color: $cBlack;
	// }
}

#nav_tabs,
#nav_tabs_colors {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 17px;
	list-style: none;
	padding-left: 0;
	padding-right: 0;
	// width: fit-content;

	li {
		position: relative;
		min-width: fit-content;
		width: 200px;
		border: 1px solid $cBlack;
		background: $cWhite;
		transition: background 250ms ease;

		&.new {
			&::before {
				content: url('/upload/filemanager/Icons/new-icon.png');
				position: absolute;
				top: -10px;
				right: -15px;
			}
		}

		&.active {
			background: $cBlack;

			a {
				color: $cTxtWhite;
			}
		}

		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			text-transform: uppercase;
			row-gap: 3px;

			color: $cTxtBlack;
			font-weight: 400;
			font-size: 14px;
			line-height: 1;
			margin-bottom: 0;

			padding: 12px 20px;
			cursor: pointer;
			transition: color 250ms ease;

			u {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-weight: 400;
				font-size: 18px;
				line-height: 1.3;
				margin-bottom: 0;
				letter-spacing: 0.05em;
				text-decoration: none;

				span {
					margin-top: -4px;
					font-size: 14px;
				}
			}
		}
	}
}

#product-preview-box {
	margin-bottom: 100px;

	.product-preview-box {
		.scontainer-content {
			// padding-left: 250px;

			.product-preview {
				display: none;
				// padding-left: 250px;

				&.active {
					display: block;
				}

				.product_info_img {
					padding-top: 15px;

					.product-emblem {
						position: absolute;
						left: 0;
						transform: translateX(-95%);
						z-index: 3;

						width: 240px;
						height: 240px;
						text-align: center;
						padding: 15px;
						background: $cWhite;
						border: 5px solid #d8d8d8;
						border-radius: 100%;

						&::before {
							content: '';
							position: absolute;
							inset: -10px;
							border: 5px solid #e6e6e6;
							border-radius: 100%;
						}

						&::after {
							content: '';
							position: absolute;
							inset: -15px;
							border: 5px solid #f4f4f4;
							border-radius: 100%;
							box-shadow: 0 0 0px 5px #fbfbfb;
						}

						img {
							margin-bottom: 14px;
						}

						p {
							font-weight: 300;
							font-size: 18px;
							line-height: 20px;
							letter-spacing: 0.05em;
							margin-bottom: 0;

							strong {
								display: block;
								position: relative;
								font-weight: 700;
								font-size: 16px;
								line-height: 20px;
								text-align: center;
								letter-spacing: 0.05em;
								text-transform: uppercase;
								color: $cTxtLightBlue;
								margin-bottom: 14px;

								&::before {
									content: '';
									position: absolute;
									bottom: -6px;
									left: 50%;
									height: 1px;
									width: 100%;
									max-width: 110px;
									background: $cLightBlue;
									transform: translateX(-50%);
								}
							}
						}

						@include respond-below(md) {
							transform: translateX(0);
							left: 15px;
						}

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

					.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;
								}
							}
						}
					}

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

				.product_info_text {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					h3 {
						font-weight: 700;
						font-size: 35px;
						line-height: 37px;
						letter-spacing: 0.15em;
						text-transform: uppercase;
						margin-bottom: 25px;
					}

					ul {
						border: 1px solid #f4f4f4;
						padding: 15px 20px;

						/* width */
						&::-webkit-scrollbar {
							width: 3px;
						}

						/* Handle */
						&::-webkit-scrollbar-thumb {
							background: #dadada;
							border-radius: 0px;
						}

						/* Track */
						&::-webkit-scrollbar-track {
							box-shadow: inset 0 0 5px rgba(grey, 0.1);
							border-radius: 0px;
						}

						/* Handle on hover */
						&::-webkit-scrollbar-thumb:hover {
							background: #000000;
						}

						li {
							&:not(:last-child) {
								margin-bottom: 25px;
							}

							h4 {
								font-weight: 700;
								font-size: 16px;
								line-height: 26px;
								letter-spacing: 0.05em;
								margin-bottom: 0;
							}

							p {
								font-weight: 300;
								font-size: 16px;
								line-height: 26px;
								letter-spacing: 0.05em;
								margin-bottom: 0;
							}
						}
					}

					&__footer {
						display: grid;
						grid-template-columns: 1fr 1fr;
						align-items: center;
						column-gap: 55px;
						row-gap: 15px;
						padding-top: 45px;
						padding-left: 20px;

						.btn8 {
						}

						img {
							width: 100%;
							max-width: fit-content;
						}
					}

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

						.btn8 {
							margin-top: 40px;
							margin-left: auto;
							margin-right: auto;
						}
					}
				}

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

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

#product-colors-preview-box {
	margin-bottom: 70px;

	.scontainer-content {
		.colors-box-header {
			margin-bottom: 50px;

			h2 {
				font-size: 30px;
				font-weight: 300;
				line-height: 25px;
				letter-spacing: 0.15em;
			}

			p {
				font-size: 16px;
				font-weight: 300;
				line-height: 25px;
				letter-spacing: 0.05em;
				margin-bottom: 0;
			}

			.c-row {
				display: flex;
				flex-direction: row;
				column-gap: 40px;
				justify-content: center;

				.c-col {
					&-2 {
						display: flex;
						justify-content: center;
						flex: 1;
					}
				}
			}
		}

		.colors-preview {
			display: none;

			&.active {
				display: block;
			}

			.color-tiles-rows {
				.color-tiles {
					&:not(:last-child) {
						margin-bottom: 100px;
					}

					.color-tiles-title {
						margin-bottom: 30px;

						h2 {
							margin: 0;
							font-size: 20px;
							font-weight: 700;
							letter-spacing: 1px;
							text-transform: uppercase;
						}
					}
					.color-tiles-data {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						column-gap: 23px;
						row-gap: 15px;
						align-items: flex-start;
						overflow: hidden;
						padding: 0;
						margin: 0;
						flex-wrap: wrap;
						list-style: none;

						li {
							list-style: none;
							flex: 0 0 97px;

							@include respond-below(md) {
								&.empty {
									display: none;
								}
							}
							@include respond-below(sm) {
								flex: 0 0 100%;
							}

							p {
								font-size: 12px;
								font-weight: 700;
								letter-spacing: 1px;
								margin-bottom: 0;
								text-transform: uppercase;
							}
						}
					}
				}
			}
		}
	}
}