::-webkit-scrollbar {
	width: 4px;
}

::-webkit-scrollbar-track {
	background-color: #EEE;
}

::-webkit-scrollbar-thumb {
	background-color: #C8A2C8;
}

body {
	color: #959595;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 300;
	margin: 0;
}

body.stop {
	overflow: hidden;
}

a,
a:active,
a:hover,
a:link,
a:visited {
	color: inherit;
	text-decoration: inherit;
}

/**/

.title {
	color: #555;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 2px;
	line-height: 24px;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.big-title {
	color: #555;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: 2px;
	line-height: 34px;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.separator {
	background-color: #C8A2C8;
	height: 6px;
	margin: auto auto 20px auto;
	width: 60px;
}

.grid-row-10 {
	display: grid;
	height: max-content;
	row-gap: 10px;
}

.grid-row-20 {
	display: grid;
	height: max-content;
	row-gap: 20px;
}

.grid-row-30 {
	display: grid;
	height: max-content;
	row-gap: 30px;
}

.grid-row-40 {
	display: grid;
	height: max-content;
	row-gap: 40px;
}

.small {
	font-size: 16px;
}

.bold {
	color: #464646;
	font-weight: 700;
}

.darker {
	color: #555;
}

.button {
	background-color: #C8A2C8;
	border-radius: 4px;
	color: #FFF !important;
	cursor: pointer;
	display: block;
	font-weight: 600;
	min-width: 100px;
	padding: 10px;
	text-align: center;
	text-transform: uppercase;
	transition: background-color 0.3s;
	width: fit-content;
}

.button:hover {
	background-color: #A081A0;
}

.close-button {
	cursor: pointer;
	font-size: 30px;
	position: absolute;
	right: 20px;
	top: 20px;
	transition: color 0.3s;
}

.close-button:hover {
	color: #C8A2C8;
}

/**/

#menu-section #content {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: auto;
	padding: 10px 0 10px 0;
	width: 80%;
}

#menu-section #menu-button {
	cursor: pointer;
	font-size: 30px;
	transition: color 0.3s;
	display: none;
}

#menu-section #menu-button:hover {
	color: #A081A0;
}

#menu-section #logo {
	height: 100px;
}

#menu-section #menu {
	align-items: center;
	display: flex;
	justify-content: space-between;
	width: 80%;
}

#menu-section #menu .menu-button {
	color: #555;
	cursor: pointer;
	font-weight: 400;
	text-transform: uppercase;
	transition: color 0.3s;
}

#menu-section #menu .menu-button:hover {
	color: #A081A0;
}

#home-slider .splide__arrow {
	top: 90%;
}

#home-slider .slogan-container {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

#home-slider .slogan-container .slogan-box .slogan-text {
	background-color: rgba(0, 0, 0, 0.5);
	color: #FFF;
	padding: 10px;
	text-align: center;
	text-transform: uppercase;
}

#home-slider .slogan-container .slogan-box .slogan-text-a {
	font-size: 40px;
	font-weight: 800;
	margin: 0 auto 10px auto;
	width: fit-content;
	background-color: rgba(200, 162, 200, 0.5);
}

#home-slider .slogan-container .slogan-box .slogan-text-b {
	font-size: 60px;
	margin: auto;
	width: fit-content;
}

#description-section {
	display: grid;
	padding: 80px 16% 80px 16%;
	row-gap: 40px;
	text-align: center;
}

#description-section .row-b {
	align-items: center;
	display: flex;
	font-weight: 600;
	margin: auto;
}

#description-section .row-b .column-a {
	margin-right: 40px;
	padding: 10px;
}

#description-section .row-b .column-b {
	margin: auto;
}

#company-section {
	background-color: #EEE;
	padding: 80px 20% 80px 20%;
	text-align: center;
}

#services-section {
	background-color: #464646;
	padding: 80px 10% 80px 10%;
	text-align: center;
}

#services-section .title {
	color: #C8A2C8;
}

#services-section .separator {
	margin-bottom: 60px;
}

#services-section .services {
	column-gap: 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	row-gap: 20px;
}

#services-section .services .service {
	margin: auto;
	width: fit-content;
}

#services-section .services .service .square {
	align-items: center;
	background-color: #C8A2C8;
	border-radius: 4px;
	color: #FFF;
	cursor: pointer;
	display: flex;
	height: 200px;
	justify-content: center;
	margin: auto auto 20px auto;
	transition: background-color 0.3s;
	width: 200px;
}

#services-section .services .service .square:hover {
	background-color: #A081A0;
}

#services-section .services .service .square .icon {
	font-size: 70px;
}

#services-section .services .service .title {
	color: #C8A2C8;
	font-size: 20px;
	text-transform: uppercase;
}

#telecommunications-service {
	background-image: url(../img/services/telecommunications.jpg);
}

#electricity-service {
	background-image: url(../img/services/electricity.jpg);
}

#construction-service {
	background-image: url(../img/services/construction.jpg);
}

#maintenance-service {
	background-image: url(../img/services/telecommunications.jpg);
}

.service-section {
	align-items: center;
	background-blend-mode: darken;
	background-color: rgba(0, 0, 0, 0.5);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #FFF;
	display: flex;
	justify-content: center;
	min-height: calc(100vh - 280px);
	padding: 80px 10px 80px 10px;
	text-align: center;
}

.service-section #content .title {
	color: #FFF;
}

.service-section #content .list {
	font-size: 24px;
}

#projects-section {
	padding: 80px 20% 80px 20%;
	text-align: center;
}

#projects-images-section {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
}

#projects-images-section .box {
	cursor: pointer;
	overflow: hidden;
	position: relative;
}

#projects-images-section .box:hover .overlay {
	opacity: 1;
}

#projects-images-section .box:hover .image {
	transform: scale(1.2);
}

#projects-images-section .box .overlay {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.6);
	color: #FFF;
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity 0.3s;
	width: 100%;
}

#projects-images-section .box .image {
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	transition: transform 0.3s;
	width: 100%;
}

#clients-section {
	padding: 80px 20% 80px 20%;
	text-align: center;
}

#clients-images-section {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	column-gap: 10px;
}

#clients-images-section .box .image {
	height: 100%;
	object-fit: fill;
	width: 100%;
}

#contact-section {
	background-color: #EEE;
	padding: 80px 20% 80px 20%;
	text-align: center;
}

#contact-section .description {
	margin-bottom: 80px;
}

#contact-section .columns {
	color: #555;
	column-gap: 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 80px;
	row-gap: 80px;
	text-align: left;
}

#contact-section #map {
	border-radius: 4px;
	height: 447px;
	width: 100%;
}

#contact-section .input {
	-webkit-appearance: none;
	border-radius: 4px;
	border: 1px solid #FFF;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 300;
	padding: 10px;
	transition: border-color 0.3s;
	width: 100%;
}

#contact-section .input:focus {
	border-color: #C8A2C8;
	outline: none;
}

#contact-section #message-input {
	height: 200px;
	resize: none;
}

#contact-section #legal-text {
	font-size: 12px;
}

#contact-section .message {
	display: none;
}

#contact-section #privacy-row {
	display: flex;
	font-size: 12px;
}

#contact-section #success-message {
	color: green;
}

#contact-section #error-message {
	color: red;
}

#contact-section #send-button {
	background-color: grey;
	cursor: not-allowed;
	transition: background-color 0.3s;
}

#contact-section #send-button.selected {
	background-color: #C8A2C8;
	cursor: pointer;
}

#contact-section #send-button.selected:hover {
	background-color: #A081A0;
}

#contact-section #phone-number {
	margin-bottom: 80px;
}

#contact-section #footer {
	font-size: 12px;
}

#contact-form {
	margin-bottom: 80px;
}

#contact-form #send-button {
	margin: auto;
}

#go-up-button {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 100%;
	border: 1px solid whitesmoke;
	bottom: 90px;
	cursor: pointer;
	display: none;
	padding: 10px;
	position: fixed;
	right: 10px;
	transition: background-color 0.1s;
	z-index: 9999;
}

#go-up-button:hover {
	background-color: whitesmoke;
}

#image-popup {
	background-color: #464646;
	display: none;
	height: 100vh;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 0;
	width: 100vw;
	z-index: 9999;
}

#image-popup #image {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

#sidebar-background {
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 9999;
}

#sidebar {
	align-items: center;
	background-color: #464646;
	box-shadow: 5px 5px 5px 0px rgb(51 51 51 / 20%);
	color: #FFF;
	display: flex;
	height: 100vh;
	justify-content: center;
	left: -90vw;
	position: fixed;
	top: 0;
	width: 80vw;
	z-index: 9999;
}

#sidebar #content {
	display: grid;
	row-gap: 20px;
}

#sidebar #content .menu-button {
	cursor: pointer;
	transition: color 0.3s;
}

#sidebar #content .menu-button:hover {
	color: #C8A2C8;
	display: grid;
	row-gap: 20px;
}

#cookies-banner {
	background-color: rgba(0, 0, 0, 0.6);
	bottom: 0;
	color: #FFFF;
	display: none;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 9999;
}

#cookies-banner #cookies-rows {
	display: grid;
	padding: 10px;
	row-gap: 10px;
}

#cookies-banner #cookies-text {
	font-size: 12px;
}

#cookies-banner #cookies-ok-button {
	background-color: #C8A2C8;
	border-radius: 4px;
	cursor: pointer;
	margin: auto;
	transition: background-color 0.3s;
	width: 100px;
}

#cookies-banner #cookies-ok-button:hover {
	background-color: #A081A0;
}

.grecaptcha-badge {
	visibility: hidden;
}

@media screen and (max-width: 1151px) {
	#menu-section #content {
		width: 90%;
	}

	#description-section {
		padding: 80px 10% 80px 10%;
	}

	#company-section {
		padding: 80px 10% 80px 10%;
	}

	#services-section .services {
		grid-template-columns: repeat(2, 1fr);
	}

	#projects-section {
		padding: 80px 10% 80px 10%;
	}

	#projects-images-section {
		grid-template-columns: repeat(3, 1fr);
	}

	#clients-section {
		padding: 80px 10% 80px 10%;
	}

	#clients-images-section {
		grid-template-columns: repeat(4, 1fr);
	}

	#contact-section {
		padding: 80px 10% 80px 10%;
	}
}

@media screen and (max-width: 861px) {
	#menu-section #menu-button {
		display: block;
	}

	#menu-section #menu {
		display: none;
	}

	#home-slider .slogan-container .slogan-box .slogan-text-a {
		font-size: 20px;
	}

	#home-slider .slogan-container .slogan-box .slogan-text-b {
		font-size: 40px;
	}
}

@media screen and (max-width: 681px) {
	#description-section .row-b {
		display: block;
	}

	#description-section .row-b .column-a {
		margin-right: 0;
		margin-bottom: 40px;
	}

	#services-section .services {
		grid-template-columns: repeat(1, 1fr);
	}

	#projects-images-section {
		grid-template-columns: repeat(1, 1fr);
	}

	#contact-section .columns {
		grid-template-columns: repeat(1, 1fr);
	}
}