/********************************************************************* BASE ***/

@media (max-width: 768px) {
	html, body {
		width: auto !important;
		overflow-x: hidden !important;
	}
}

body, a {
	font-family: "Source Sans 3", sans-serif;
	font-optical-sizing: auto;
	font-size: clamp(1.125rem, 0.375vw + 1.05rem, 1.5rem);
	line-height: clamp(1.688rem, 0.563vw + 1.575rem, 2.25rem);
	color: #112630;
}

p {
	margin: 0;
	padding: 0;
	margin-top: 32px;
	margin-top: clamp(1.188rem, 1vw + 0.988rem, 2.188rem);
}

h1 {
	font-family: "Barlow Semi Condensed", sans-serif;
	font-weight: 600;
	font-size: clamp(2.5rem, 2vw + 2.1rem, 4.5rem);
	line-height: clamp(2.5rem, 2vw + 2.1rem, 4.5rem);
	letter-spacing: -1px;
	color: #00adee;
}

h2 {
	font-family: "DM Sans", sans-serif;
	font-weight: 400;
	font-size: clamp(2.375rem, 0.75vw + 2.225rem, 3.125rem);
	line-height: clamp(2.613rem, 0.888vw + 2.435rem, 3.5rem);
	letter-spacing: 2px;
	color: #112630;
	padding-bottom: 15px;
}

/******************************************************************* GLOBAL ***/

@media (min-width: 1920px) {

	.container {
		max-width: 1582px;
	}

}

.service .container,
.portfolio .container,
.faq .container,
.footer .container,
.accessories-home .container {
	padding-top: clamp(2.375rem, 3.875vw + 1.6rem, 6.25rem) !important;
	padding-bottom: clamp(2.375rem, 3.875vw + 1.6rem, 6.25rem) !important;
}

.accessories .container,
.machines .container,
.machines-single .container {
	padding-top: clamp(1.9rem, 2.162vw + 1.468rem, 4.063rem) !important;
	padding-bottom: clamp(2.375rem, 3.875vw + 1.6rem, 6.25rem) !important;
}

.about .container {
	padding-top: clamp(2.375rem, 3.875vw + 1.6rem, 6.25rem) !important;
}

.btn-primary {
	font-family: "Source Sans 3", sans-serif;
	font-size: 1.2rem;
	font-weight: 500;
	padding: 0.6rem 1.5rem;
	border-radius: 4px;
	--bs-btn-color: #FFFFFF;
	--bs-btn-bg: #112630;
	--bs-btn-border-color: #112630;
	--bs-btn-hover-color: #FFFFFF;
	--bs-btn-hover-bg: #000000;
	--bs-btn-hover-border-color: #000000;
	--bs-btn-active-color: #FFFFFF;
	--bs-btn-active-bg: #333333;
	--bs-btn-active-border-color: #333333;
}

@media (min-width: 768px) {

	.btn-primary {
		font-size: 1.45rem;
		padding: 0.85rem 2.5rem;
	}

}

@media (min-width: 1400px) {

	.btn-primary {
		font-size: 1.65rem;
		padding: 1.5rem 2.6rem;
	}

}

.btn-secondary {
	font-family: "Source Sans 3", sans-serif;
	font-size: 1.2rem;
	padding: 0.6rem 1.5rem;
	border-radius: 4px;
	--bs-btn-color: #FFFFFF;
	--bs-btn-bg: #00adee;
	--bs-btn-border-color: #00adee;
	--bs-btn-hover-color: #FFFFFF;
	--bs-btn-hover-bg: #0089bd;
	--bs-btn-hover-border-color: #0089bd;
	--bs-btn-active-color: #FFFFFF;
	--bs-btn-active-bg: #000000;
	--bs-btn-active-border-color: #000000;
}

.header .btn-secondary,
.service .btn-secondary {
	--bs-btn-color: #FFFFFF;
	--bs-btn-bg: rgba(0,0,0,0.3);
	--bs-btn-border-color: #455258;
}

@media (min-width: 768px) {

	.btn-secondary {
		font-size: 1.45rem;
		padding: 0.85rem 2.5rem;
	}

}

.breadcrumbs {
	overflow: auto;
	margin-bottom: clamp(1.425rem, 1.075vw + 1.21rem, 2.5rem);
}

.breadcrumbs ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
}

.breadcrumbs ul li {
	padding: 0;
	margin: 0;
}

.breadcrumbs ul li a {
	color: #112630;
	text-decoration: none;
	white-space: nowrap;
	padding: 0 26px 0 0;
	margin: 0 14px 0 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23464646' class='bi bi-caret-right-fill' viewBox='0 0 16 16'%3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E");;
	background-position: right center;
	background-repeat: no-repeat;
}

.breadcrumbs ul li a:hover {
	color: #0087ba;
}

/******************************************************************* HEADER ***/

.header {
	background-color: #000000;
	background-image: none;
	background-size: cover;
	background-position: center 70%;
	background-repeat: no-repeat;
	border-bottom: 16px solid #00adee;
}

.header-home {
	background-position: center center;
}

.header .container {
	min-height: 340px;
}

.header .logo img {
	max-width: 260px;
}

@media (min-width: 768px) {

	.header .container {
		min-height: 310px;
	}

	.header .logo img {
		max-width: 310px;
	}

}

@media (min-width: 1200px) {

	.header .container {
		min-height: 340px;
	}

}

@media (min-width: 1400px) {

	.header .container {
		min-height: 440px;
	}

}

@media (min-width: 1920px) {

	.header .container {
		min-height: 570px;
	}

	.header .row {
		padding-top: 4.5rem !important;
	}

}

.header-home .contact-us {
	padding-bottom: 260px;
}

.header .intro {
	color: #FFFFFF;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 50px;
}

.header .intro h1 {
	color: #FFFFFF;
}

.header .intro h1 span {
	color: #00adee;
}

@media (min-width: 768px) {

	.header .intro {
		padding-top: 40px;
		padding-bottom: 100px;
	}

}

@media (min-width: 1200px) {

	.header-home .contact-us {
		padding-bottom: 0;
	}
	
	.header .intro {
		text-align: left;
		padding-top: 120px;
		padding-bottom: 340px;
	}

}

@media (min-width: 1920px) {

	.header .intro {
		padding-top: 150px;
		padding-bottom: 450px;
	}

}


/******************************************************************* FOOTER ***/

.footer {
	background-color: #112630;
	color: #FFFFFF;
}

.footer a {
	color: #FFFFFF;
	text-decoration: none;
}

.footer a:hover {
	color: #dddddd;
}

.footer p:first-child {
	margin-top: 0;
}

.footer a.social {
	float: left;
	margin-right: 20px;
}

.footer a.social img {
	width: 34px;
}

/******************************************************************* GRENKE ***/

.grenke {
	background-color: #d8f2fc;
}

.grenke .container {
	max-width: 650px;
}

.grenke img {
	max-width: 230px;
}

/******************************************************************** ABOUT ***/

.about {
	background-color: #FFFFFF;
}

.about .row {
	--bs-gutter-x: 6rem;
}

/****************************************************************** SERVICE ***/

.service {
	background-color: #112630;
	color: #FFFFFF;
	background-image: none;
	background-image: url('../images/temp_1.png') !important;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: -9999px;
}

.service .row {
	--bs-gutter-x: 6rem;
}

@media (min-width: 768px) {

	.service {
		background-size: cover;
		background-position: -700px center;
	}

}

@media (min-width: 1500px) {

	.service {
		background-position: -800px center;
	}

}

@media (min-width: 1700px) {

	.service {
		background-position: -900px center;
	}

}

@media (min-width: 1920px) {

	.service {
		background-size: contain;
		background-position: -200px center;
	}

}

.service h2 {
	color: #FFFFFF;
}

.service .btn-secondary {
	float: left;
	margin-top: 20px;
	margin-right: 20px;
}

@media (min-width: 1920px) {

	.service .btn-secondary {
		margin-right: 50px;
	}

}

/**************************************************************** PORTFOLIO ***/

@media (min-width: 1920px) {

	.portfolio .row {
		--bs-gutter-x: 5rem;
		--bs-gutter-y: 5rem;
	}

}

/********************************************************************** FAQ ***/

.faq {
	background-color: #eceeef;
}

.faq .container {
	max-width: 960px;
}

.faq .accordion {
	--bs-accordion-border-color: #c7c7c7;
	border-top: 1px solid #c7c7c7;
	border-bottom: 1px solid #c7c7c7;
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23112630' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23112630' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}

.faq .accordion-button {
	background-color: #eceeef;
	font-size: clamp(1.125rem, 0.375vw + 1.05rem, 1.5rem);
}

.faq .accordion-button:not(.collapsed) {
	color: #000000;
}

.faq .accordion-body p:first-child {
	margin-top: 0;
}

/***************************************************************** MACHINES ***/

.machines-home {
	margin-top: -230px;
}

@media (min-width: 1200px) {

	.machines-home {
		margin-top: -320px;
	}

}

@media (min-width: 1920px) {

	.machines-home {
		margin-top: -400px;
	}

}

.machines .item {
	background-color: #FFFFFF;
	border: 1px solid #ace5fb;
	border-radius: 5px;
}

.machines .item:hover {
	border: 1px solid #112630;
	cursor: pointer;
}

.machines .item .photo {
	aspect-ratio: 4 / 3;
}

.machines .item .name {
	background-image: url('../images/name-decoration.png');
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 6px 0 0 6px;
	font-size: clamp(1.125rem, 0.75vw + 0.975rem, 1.875rem);
	line-height: clamp(2.025rem, 2.006vw + 1.624rem, 4.031rem);
	display: inline-block;
	font-weight: 500;
	background-color: #00adee;
	color: #FFFFFF;
	padding: 0 30px 0 20px;
	margin-left: -20px;
}

@media (min-width: 576px) {

	.machines .item .name {
		padding: 0 34px 0 28px;
		margin-left: -28px;
	}

}

@media (min-width: 1200px) {

	.machines .item .name {
		padding: 0 58px 0 52px;
		margin-left: -52px;
	}

}

.machines .item .more a {
	font-size: 0.9em;
	color: #112630;
}

.machines .item .more a:hover {
	color: #00adee;
}


.machines .items {
	--bs-gutter-x: 2.625rem;
	--bs-gutter-y: 2rem;
}

@media (min-width: 1200px) {

	.machines .items {
		--bs-gutter-x: 3.625rem;
		--bs-gutter-y: 3rem;
	}

}

@media (min-width: 1920px) {

	.machines .items {
		--bs-gutter-x: 5.625rem;
		--bs-gutter-y: 5rem;
	}

}

.machines-single .go-back {
	text-align: right;
	border-bottom: 1px solid #e1e4e5;
	margin-bottom: clamp(1.425rem, 1.075vw + 1.21rem, 2.5rem);
}

.machines-single .go-back a {
	text-decoration: none;
	font-weight: 600;
	color: #3e4f57;
	line-height: clamp(2.5rem, 2.05vw + 2.09rem, 4.55rem);
}

.machines-single .go-back a:hover {
	color: #00adee;
}

.machines-single .gallery a {
	display: block;
	border: 1px solid #b2e6fa;
	border-radius: 5px;
}

.machines-single .gallery div:first-child a {
	display: block;
	border: 0;
	border-radius: 0;
}

.cats-cycle {
	overflow: auto;
	border-bottom: 1px solid #e1e4e5;
	margin-bottom: clamp(1.425rem, 1.075vw + 1.21rem, 2.5rem);
}

.cats-cycle ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
}

.cats-cycle ul li {
	padding: 0;
	margin: 0;
}

.cats-cycle ul li a {
	color: #3e4f57;
	text-decoration: none;
	white-space: nowrap;
	padding: 0 32px 0 0;
	margin: 0 14px 0 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dot' viewBox='0 0 16 16'%3E%3Cpath d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3'/%3E%3C/svg%3E");
	background-position: right center;
	background-repeat: no-repeat;
}

.cats-cycle ul li:last-child a {
	background-image: none;
}

.cats-cycle ul li a span {
	white-space: nowrap;
	display: inline-block;
}

.cats-cycle ul li,
.cats-cycle ul li a {
	font-size: clamp(1.25rem, 0.375vw + 1.175rem, 1.625rem);
	line-height: clamp(2.5rem, 2.05vw + 2.09rem, 4.55rem);
}

.cats-cycle ul li a:hover {
	color: #000000;
}

.cats-cycle ul li a.active {
	font-weight: bold;
}

.machine-cycle {
	--bs-gutter-y: 1rem;
	margin-bottom: clamp(1.425rem, 1.075vw + 1.21rem, 2.5rem);
}

.machine-cycle a {
	display: block;
	border: 1px solid #a2aaae;
	color: #838e93;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
	padding: 0.3rem;
	padding-right: 0;
	color: #FFFFFF;
	color: #112630;
	border: 1px solid #112630;
}

.machine-cycle a:hover {
	border: 1px solid #00adee;
	color: #00adee;
}

.machine-cycle a.active {
	border: 2px solid #00adee;
	color: #00adee;
	background-color: #FFFFFF;
}

.machine-cycle a img {
	height: 42px;
	margin-right: 5px;
}

@media (min-width: 768px) {

	.machine-cycle {
		--bs-gutter-y: 1rem;
	}

	.machine-cycle a {
		padding: 0.3rem;
		padding-right: 0;
	}

	.machine-cycle a img {
		height: 42px;
		margin-right: 5px;
	}

}

@media (min-width: 992px) {

	.machine-cycle {
		--bs-gutter-y: 1rem;
		--bs-gutter-x: 1rem;
	}

	.machine-cycle a {
		padding: 0.4rem;
		padding-right: 0;
	}

	.machine-cycle a img {
		height: 46px;
		margin-right: 5px;
	}

}

@media (min-width: 1920px) {

	.machine-cycle {
		--bs-gutter-y: 1.5rem;
		--bs-gutter-x: 1.5rem;
	}

	.machine-cycle a {
		padding: 0.7rem;
		padding-right: 0;
	}

	.machine-cycle a img {
		height: 52px;
		margin-right: 5px;
	}

}

/************************************************************** ACCESSORIES ***/

.accessories-home {
	background-image: none;
	background-position: -5000px -5000px;
	background-repeat: no-repeat;
	background-size: contain;
}

.accessories-home ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.accessories-home a:hover {
	color: #00adee;
}

@media (min-width: 768px) {

	.accessories-home {
		background-position: right center;
	}

}

.accessories .item .photo {
	aspect-ratio: 4 / 3;
	border: 1px solid #ace5fb;
}

.accessories .item .name a {
	font-size: 1.15em;
	color: #112630;
	text-decoration: none;
	font-weight: 500;
}

.accessories .item .name a:hover {
	color: #00adee;
}


.accessories .items {
	--bs-gutter-x: 1.625rem;
	--bs-gutter-y: 1rem;
}

@media (min-width: 1200px) {

	.accessories .items {
		--bs-gutter-x: 2.625rem;
		--bs-gutter-y: 2rem;
	}

}

@media (min-width: 1920px) {

	.accessories .items {
		--bs-gutter-x: 3.625rem;
		--bs-gutter-y: 3rem;
	}

}

/**************************************************************** SIGNATURE ***/

.signature {
	padding: 30px 0;
	text-align: center;
	background-color: #FFFFFF;
}

.signature a {
	text-decoration: none;
}

.signature a img {
	height: 20px;
}

@media (min-width: 1500px) {

	.signature {
		padding: 40px 0;
	}
	
	.signature a img {
		height: 24px;
	}

}

/* **************************** BACK TO TOP */

.back-to-top {
	position: fixed;
	right: 15px;
	bottom: 15px;
	z-index: 9999;
	background-color: #112630;
	color: #FFFFFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: rgba(0, 0, 0, 1) 0px 22px 70px 4px;
	font-size: 36px;
	width: 50px;
	height: 50px;
}

.back-to-top:hover {
	color: #FFFFFF;
}