/* page_systemes.less */

@import "main.less";

.page_systemes {
	.manuals {
		background-color: #EAF0F4;
		padding         : 80px 0;
	}

	.motorized {
		background-color: #D6E0E8;
		padding         : 80px 0;
	}

	.system_section {
		margin: 0;

		.systems_title {
			color         : #445B6D;
			font-size     : 42px;
			font-weight   : bold;
			letter-spacing: 0;
			line-height   : 50px;
			text-transform: capitalize;
			margin        : 0;
			padding       : 0;
		}

		.systems_subtitle {
			color         : #000000;
			font-size     : 20px;
			letter-spacing: 0;
			line-height   : 26px;
			margin        : 20px 0;
		}

		.see_all_btn {
			display: none;

			@media @small {
				display         : block;
				width           : 80%;
				background-color: #445B6D;
				color           : #fff;
				font-size       : 14px;
				font-weight     : 500;
				letter-spacing  : 0.88px;
				line-height     : 17px;
				text-align      : center;
				margin          : 50px auto;
				border          : 1px solid #445B6D;
			}
		}

		.close {
			background-color: transparent;
			color           : #445B6D;
		}

		.system {
			margin: 50px 0;

			@media @small {
				display: none;
				margin : 20px 0;
			}

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

			.system_name {
				color         : #445B6D;
				font-size     : 24px;
				font-weight   : bold;
				letter-spacing: 1.29px;
				line-height   : 28px;
				text-transform: uppercase;

				@media @small {
					margin-top: 25px;
				}
			}

			.system_description {
				color         : #000000;
				font-size     : 20px;
				letter-spacing: 0;
				line-height   : 24px;
			}

			.system_link {
				margin : 50px 0;
				display: block;

				@media @small {
					margin: 20px 0;
				}
			}
		}
	}

	.technologies_section {
		margin: 120px 0;

		@media @small {
			margin: 0;
		}

		.technologies_text {
			@media @small {
				margin: 40px 0;
			}

			.technologies_title {
				color         : #445B6D;
				font-family   : "Barlow Semi Condensed";
				font-size     : 42px;
				font-weight   : bold;
				letter-spacing: 0;
				line-height   : 50px;
				text-transform: uppercase;

				@media @small {
					font-size     : 24px;
					letter-spacing: 0.75px;
					line-height   : 31px;
				}
			}

			.technologies_description {
				color         : #000000;
				font-size     : 20px;
				letter-spacing: 0;
				line-height   : 26px;

				@media @small {
					font-size     : 17px;
					letter-spacing: 0;
					line-height   : 24px;
				}
			}
		}

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

	.cta_banner {

		min-height: 80vh;
		margin    : 0;
		text-align: center;
		position: relative;

		&::after {
			content            : "";
			background         : url(/userfiles/images/altex_video_1.jpg), no-repeat;
			background-size    : cover;
			background-position: center;
			opacity            : 0.5;
			top                : 0;
			left               : 0;
			bottom             : 0;
			right              : 0;
			position           : absolute;
			z-index            : -1;
		}

		@media @small {
			min-height: 30vh;
		}

		.cta_banner_title {
			color         : #2C3944;
			font-size     : 42px;
			font-weight   : bold;
			letter-spacing: 1.68px;
			line-height   : 74px;
			text-align    : center;
			text-transform: uppercase;

			@media @small {
				font-size     : 24px;
				font-weight   : bold;
				letter-spacing: 0.75px;
				line-height   : 27px;
			}
		}

		.learn_btn {
			background-color: #445B6D;
		}
	}
}