:root {
    --primary-font: 'Open Sans';
}

html { height: 100%; }

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: var(--s-25);
	color: var(--s-800);
	font-size: 15px;
	font-family: var(--primary-font), sans-serif;
	font-weight: 400;
	overflow-y: scroll;
}

* { margin: 0; padding: 0; outline: 0; }

a { color: var(--s-800); text-decoration: none; }
a img { border: 0; }

h1, h2, h3 { font-weight: 300; }
strong { font-family: var(--primary-font), sans-serif; font-weight: 700; }
input, textarea, button { font-family: var(--primary-font), sans-serif; }

.select { width: 100%; height: 48px; }

.wrap { display: flex; flex-direction: column; width: 100%; min-height: 100%; }
.container { flex-grow: 1; display: flex; flex-direction: column; width: 100%; }
.content { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 1200px; padding: 0 10px; }

.header { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 30px 0; }
.header .content { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-end; gap: 20px; }

.header .logo { flex-shrink: 0; display: flex; }
.header .logo a { display: flex; }
.header .logo img { max-width: 100%; height: 60px; }

.header .menu { display: flex; }
.header .menu nav { display: flex; }
.header .menu nav ul.menu-items { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 40px; list-style: none; }
.header .menu nav ul.menu-items li.menu-item { display: flex; justify-content: center; align-items: stretch; text-align: center; }
.header .menu nav ul.menu-items li.menu-item a { transition: border-color 0.2s ease-in-out; display: flex; align-items: center; box-sizing: border-box; min-height: 48px; border-bottom: 2px solid transparent; color: var(--s-800); font-size: 15px; font-weight: 500; line-height: 24px; }
.header .menu nav ul.menu-items li.menu-item a:hover { border-color: var(--s-200); }
.header .menu nav ul.menu-items li.menu-item.active a { border-color: var(--b-200); }
.header .menu nav ul li .language { display: flex; width: 180px; }

.header .menu .mobile-menu { display: none; margin-right: 20px; color: var(--s-800); font-size: 24px; }
.header .menu nav .mobile-menu { position: absolute; top: 20px; left: 20px; color: var(--s-25); }

.header.transparent { position: absolute; z-index: 2000; top: 0; left: 0; background: var(--s-800-t20); border-bottom: 1px solid var(--s-25-t20); }
.header.transparent .menu nav ul.menu-items li.menu-item a { color: var(--s-25); }
.header.transparent .menu nav ul.menu-items li.menu-item a:hover { border-color: var(--s-25-t20); }
.header.transparent .menu nav ul.menu-items li.menu-item.active a { border-color: var(--s-25); }
.header.transparent .menu .mobile-menu { color: var(--s-25); }

.page-container { flex-grow: 1; display: flex; flex-direction: column; width: 100%; }

.hero { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; box-sizing: border-box; width: 100%; min-height: 810px; padding-top: 120px; background: var(--s-800); }
.hero:after { content: ""; position: absolute; z-index: 40; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, var(--s-800-t70) 0%, rgba(0,0,0,0) 100%);  }
.hero .video { display: flex; position: absolute; z-index: 30; top: 0; left: 0; width: 100%; height: 100%; }
.hero .video video { width: 100%; height: 100%; object-fit: cover; }
.hero .content { gap: 34px; position: relative; z-index: 50; padding-top: 60px; padding-bottom: 60px; }
.hero .text { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 680px; }
.hero .text h1 { color: var(--s-25); font-size: 48px; line-height: 60px; }
.hero .text p { color: var(--s-25); font-size: 15px; line-height: 24px; }

.page { flex-grow: 1; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 50px 0 70px 0; }
.page:not(:last-child) { padding-bottom: 50px; }
.page.grey { background: var(--s-75); }
.page.grey + .page.grey { padding-top: 0; }

.page .title { display: flex; flex-direction: column; align-items: center; width: 100%; padding-bottom: 20px; }
.page .title h2 { color: var(--s-800); font-size: 30px; line-height: 40px; }

.page-head { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 36px 0; background: var(--s-800); }
.page-head h1,
.page-head .text { padding-left: 20px; border-left: 4px solid var(--b-200); }
.page-head h1 { color: var(--s-25); font-size: 30px; line-height: 36px; }
.page-head .text { display: flex; flex-wrap: nowrap; align-items: flex-start; padding-top: 12px; color: var(--s-25); font-size: 15px; line-height: 24px; }
.page-head .text .icon { display: flex; align-items: center; min-height: 24px; margin-right: 10px; color: var(--b-200); font-size: 14px; }

.services-boxes { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0; }
.services-boxes .item { flex-grow: 1; flex-basis: 380px; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; padding: 10px 50px; }
.services-boxes .item h2 { color: var(--s-800); font-size: 20px; font-weight: 400; line-height: 30px; }
.services-boxes .item p { color: var(--s-800); font-size: 15px; line-height: 24px; }

.projects-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 30px; box-sizing: border-box; width: 100%; margin-top: 30px; padding: 30px; background: var(--s-50); }
.projects-title .details { display: flex; flex-direction: column; gap: 5px; padding-left: 20px; border-left: 4px solid var(--b-200); }
.projects-title .details h2 { font-size: 24px; font-weight: 400; line-height: 24px; }
.projects-title .details .text { color: var(--s-600); line-height: 20px; }

.projects-overview { flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 20px 0 0 0; }
.projects-overview .item { display: flex; box-sizing: border-box; width: 50%; padding: 10px; }
.projects-overview .box { display: flex; flex-direction: column; justify-content: space-between; position: relative; width: 100%; height: 100%; min-height: 360px; background: var(--s-800); }
.projects-overview .box a.whole { position: absolute; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; }
.projects-overview .box .image { transition: opacity 0.2s ease-in-out; position: absolute; z-index: 30; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.projects-overview .box .details { transition: opacity 0.2s ease-in-out; opacity: 0; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; position: relative; z-index: 40; box-sizing: border-box; width: 100%; padding: 30px; }
.projects-overview .box .details .headline { display: flex; }
.projects-overview .box .details .headline h2 { color: var(--s-25); font-size: 24px; font-weight: 400; line-height: 36px; }
.projects-overview .box .details .location { display: flex; flex-wrap: nowrap; align-items: flex-start; color: var(--s-25); font-size: 15px; line-height: 24px; }
.projects-overview .box .details .location .icon { display: flex; align-items: center; min-height: 24px; margin-right: 10px; color: var(--b-200); font-size: 14px; }

.projects-overview .box:hover .image { opacity: 0.6; }
.projects-overview .box:hover .details { opacity: 1; }

.projects-preview { flex-wrap: nowrap; padding-top: 10px; padding-bottom: 20px; overflow: auto; }
.projects-preview:last-child { padding-bottom: 0; }
.projects-preview .item { flex-basis: 0; flex-grow: 1; width: auto; min-width: 200px; }
.projects-preview .item.preview-button { flex-basis: auto; flex-grow: 0; flex-shrink: 0; width: 100px; min-width: 0; }
.projects-preview .item.preview-button a { transition: background 0.2s ease-in-out; display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 100%; padding: 10px; background: var(--s-800); color: var(--s-25); font-size: 24px; line-height: 36px; text-align: center; }
.projects-preview .item.preview-button a:hover { background: var(--b-200); }

.offices-overview { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 30px 0 0 0; }
.offices-overview .item { display: flex; box-sizing: border-box; width: 50%; padding: 10px; }
.offices-overview .box { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; padding: 10px; background: var(--s-25); }
.offices-overview .box .map { width: 100%; height: 280px; background: var(--s-200); }
.offices-overview .box .details { display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; width: 100%; padding: 20px; }
.offices-overview .box .details .headline { display: flex; }
.offices-overview .box .details .headline h3 { color: var(--s-800); font-size: 24px; line-height: 36px; }
.offices-overview .box .details .location { display: flex; flex-wrap: nowrap; align-items: flex-start; color: var(--s-800); font-size: 15px; line-height: 24px; }
.offices-overview .box .details .location .icon { display: flex; align-items: center; min-height: 24px; margin-right: 10px; color: var(--b-200); font-size: 14px; }

.panel-container { display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px; width: 100%; padding: 10px 0; }
.panel-container .panel { flex-grow: 1; display: flex; flex-direction: column; width: 0; }
.panel-container aside { flex-shrink: 0; display: flex; flex-direction: column; width: 380px; max-width: 100%; }
.panel-container aside .content-box .form-container { gap: 10px; padding: 30px; }
.panel-container aside .content-box .form-container .form-item { width: 100%; padding: 0; }
.panel-container aside .content-box .form-container .form-item .checkbox-container { padding: 10px 0; }
.panel-container aside .button { width: 100%; }
.panel-container aside .sticky-container { flex-grow: 1; display: flex; flex-direction: column; width: 100%; }
.panel-container aside .sticky-container .content-box { position: sticky; top: 20px; }

.content-box { display: flex; flex-direction: column; width: 100%; background: var(--s-25); margin-bottom: 20px; }
.panel-container + .content-box { margin-top: 10px; }
.panel-container .content-box:last-child { margin-bottom: 0; }
.content-box:last-child { margin-bottom: 10px; }
.content-box.stretch { flex-grow: 1; justify-content: space-between; }
.content-box .inner { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; padding: 30px; }
.content-box .inner:not(:first-child) { padding-top: 0; }
.content-box .inner:not(:last-child) { padding-bottom: 0; }
.content-box .inner + .inner { padding-top: 30px; }
.content-box .box-headline + .inner { padding-top: 30px; }

.content-box .box-headline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; padding: 20px 30px; border-bottom: 2px solid var(--s-50); }
.content-box .box-headline h2 { color: var(--s-800); font-size: 18px; font-weight: 400; line-height: 28px; }

.content-box .headline { display: flex; flex-direction: column; width: 100%; margin-bottom: 16px; }
.content-box .headline:last-child { margin-bottom: 0; }
.content-box .headline h3 { color: var(--s-800); font-size: 20px; font-weight: 400; line-height: 30px; }

.content-box .contact-list { display: flex; width: 100%; }
.content-box .contact-list ul { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.content-box .contact-list ul li,
.content-box .contact-list ul li a { display: flex; flex-wrap: nowrap; align-items: flex-start; color: var(--s-800); font-size: 15px; line-height: 24px; }
.content-box .contact-list ul li .icon { flex-shrink: 0; display: flex; align-items: center; min-height: 24px; margin-right: 10px; color: var(--s-500); font-size: 14px; }

.content-box .icon-list { display: flex; box-sizing: border-box; width: 100%; padding: 20px; }
.content-box .icon-list ul { display: flex; flex-wrap: wrap; width: 100%; list-style: none; }
.content-box .icon-list ul li { display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; width: 25%; padding: 10px; }
.content-box .icon-list.columns-three ul li { width: 33.33%; }
.content-box .icon-list ul li .name { color: var(--s-600); font-size: 15px; line-height: 24px; }
.content-box .icon-list ul li .value { display: flex; flex-wrap: nowrap; align-items: flex-start; color: var(--s-800); font-size: 18px; line-height: 28px; }
.content-box .icon-list ul li .value .icon { flex-shrink: 0; display: flex; align-items: center; min-height: 28px; margin-right: 10px; color: var(--b-200); }

.content-box .list { display: flex; box-sizing: border-box; width: 100%; padding: 20px; }
.content-box .list ul { display: flex; flex-wrap: wrap; width: 100%; list-style: none; }
.content-box .list ul li { box-sizing: border-box; width: 50%; padding: 10px; color: var(--s-600); font-size: 15px; line-height: 24px; }

.content-box.dark { background: var(--s-800); }
.content-box.dark .headline h3 { color: var(--s-25); }
.content-box.dark .contact-list ul li,
.content-box.dark .contact-list ul li a { color: var(--s-25); }
.content-box.dark .text-container p { color: var(--s-400); }

.form-container { display: flex; flex-wrap: wrap; align-items: stretch; box-sizing: border-box; width: 100%; padding: 20px; }
.form-container .form-item { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; box-sizing: border-box; width: 50%; padding: 10px; }
.form-container .form-item.width-full { width: 100%; }
.form-container .form-item .item-heading { color: var(--s-600); font-size: 13px; line-height: 24px; }

.image-text-box { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 20px; width: 100%; padding: 30px 0 10px 0; }
.image-text-box .text { flex-grow: 1; flex-shrink: 0; display: flex; flex-direction: column; width: 100%; max-width: 580px; }
.image-text-box .image { flex-shrink: 1; display: flex; flex-direction: column; width: 100%; max-width: 480px; }
.image-text-box .image img { max-width: 100%; }

.text-container { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.text-container p { color: var(--s-800); font-size: 15px; line-height: 24px; }

.table-container { display: flex; width: 100%; overflow-x: auto; }
table.table tr th,
table.table tr td { padding: 0 20px; }
table.table tr th:first-child,
table.table tr td:first-child { padding-left: 30px; }
table.table tr th:last-child,
table.table tr td:last-child { padding-right: 30px; }
table.table tr th { padding-top: 10px; padding-bottom: 10px; background: var(--s-50); color: var(--s-600); font-size: 13px; font-weight: 400; line-height: 20px; }
table.table tr td { padding-top: 14px; padding-bottom: 14px; background: var(--s-25); border-bottom: 2px solid var(--s-50); color: var(--s-800); font-size: 15px; line-height: 24px; }
table.table tr:hover td { background: var(--s-50-t50); }
table.table tr:last-child td { border-bottom: 0; }

.gallery-container { display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px; width: 100%; height: 520px; margin: 10px 0; }
.gallery-container .labels { position: absolute; top: 0; right: 0; }
.gallery-container .labels .label { z-index: 290; }
.gallery-container .arrow { transition: background 0.2s ease-in-out; display: flex; justify-content: center; align-items: center; position: absolute; z-index: 300; top: 50%; transform: translateY(-50%); width: 54px; height: 56px; background: var(--s-800-t50); border-radius: 50%; color: var(--s-25); font-size: 20px; }
.gallery-container .arrow:hover { background: var(--s-800-t70); }
.gallery-container .arrow.prev { left: 20px; }
.gallery-container .arrow.next { right: 20px; }
.gallery-container .image { flex-grow: 1; display: flex; position: relative; width: 0; }
.gallery-container .image .img { display: flex; position: relative; width: 100%; height: 100%; }
.gallery-container .image img { transition: opacity 0.2s ease-in-out; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery-container .image img:nth-child(1) { z-index: 200; }
.gallery-container .image img:nth-child(2) { z-index: 100; }
.gallery-container .thumbnails { flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; width: 380px; max-width: 100%; }
.gallery-container .thumbnails .image { width: 100%; height: 50%; }

.iframe-container { display: flex; width: 100%; height: 400px; background: var(--s-200); }

.map-container { display: flex; width: 100%; height: 360px; background: var(--s-200); }
.map-container .map { width: 100%; height: 100%; }

.share-container { display: flex; flex-direction: column; align-items: center; gap: 14px; box-sizing: border-box; width: 100%; padding: 20px; text-align: center; }
.share-container span { color: var(--s-500); font-size: 15px; line-height: 24px; }
.share-container ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; }
.share-container ul li { display: flex; }
.share-container ul li a { transition: color 0.2s ease-in-out; display: flex; color: var(--s-400); font-size: 20px; }
.share-container ul li a:hover { color: var(--s-500); }

footer { display: flex; flex-direction: column; width: 100%; }

.footer { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 80px 0; background: var(--s-800); }
.footer .content { gap: 50px; align-items: center; text-align: center; }

.footer .details { display: flex; }
.footer .details ul { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; }
.footer .details ul li { display: flex; align-items: center; }
.footer .details ul li:not(:last-child):after { content: ""; display: flex; width: 1px; height: 18px; margin: 0 6px; background: var(--s-25); }
.footer .details ul li,
.footer .details ul li a { color: var(--s-25); font-size: 15px; line-height: 24px; }

.footer .socials { display: flex; }
.footer .socials ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; list-style: none; }
.footer .socials ul li { display: flex; }
.footer .socials ul li,
.footer .socials ul li a { color: var(--s-25); font-size: 20px; }

.footer .text { display: flex; }
.footer .text ul { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; }
.footer .text ul li:not(:last-child):after { content: "-"; margin: 0 6px; }
.footer .text ul li,
.footer .text ul li a { color: var(--s-400-t80); font-size: 13px; line-height: 20px; }

.labels { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 30px; }
.label { display: flex; position: relative; z-index: 40; padding: 5px 8px; background: var(--s-800); color: var(--s-25); font-size: 12px; font-weight: 600; text-transform: uppercase; text-align: center; }

ul.status-icons { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 10px; list-style: none; }
ul.status-icons li { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; color: var(--s-600); font-size: 15px; line-height: 24px; }

.status-icon { flex-shrink: 0; display: flex; width: 12px; height: 12px; border-radius: 50%; }
.status-icon.green { background: var(--green-100); }
.status-icon.red { background: var(--red-100); }

.paging { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; padding: 50px 0 10px 0; }
.paging a { transition: background 0.2s ease-in-out, color 0.2s ease-in-out; flex-shrink: 0; display: flex; justify-content: center; align-items: center; box-sizing: border-box; min-width: 48px; padding: 12px 14px; background: var(--s-100); border-radius: 24px; color: var(--s-800); font-size: 14px; font-weight: 500; line-height: 24px; text-align: center; }
.paging a:hover { background: var(--s-200); }
.paging a.active { background: var(--b-200); color: var(--s-25); }

.checkbox-container { display: flex; flex-wrap: nowrap; align-items: flex-start; }
.checkbox-container input { display: none; }
.checkbox-container .checkbox { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; background: var(--s-25); border: 1px solid var(--s-200); border-radius: 6px; cursor: pointer; }
.checkbox-container .checkbox span { display: none; color: var(--s-25); font-size: 14px; }
.checkbox-container .checkbox-label { padding-left: 12px; color: var(--s-800); font-size: 15px; line-height: 24px; user-select: none; cursor: pointer; }
.checkbox-container input:checked + .checkbox { background: var(--s-800); border-color: var(--s-800); }
.checkbox-container input:checked + .checkbox span { display: flex; }
.checkbox-container input.error + .checkbox { border-color: var(--red-100); }

.input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; background: var(--s-25); border: 1px solid var(--s-200); border-radius: 6px; color: var(--s-800); font-size: 15px; }
.input:hover { border-color: var(--s-400-t80); }
.input:focus { border-color: var(--b-200); outline: 1.5px solid var(--b-200); }
.input.error { border-color: var(--red-100); }

.textarea { box-sizing: border-box; width: 100%; height: 122px; padding: 12px 14px; background: var(--s-25); border: 1px solid var(--s-200); border-radius: 6px; color: var(--s-800); font-size: 15px; line-height: 24px; resize: none; }
.textarea:hover { border-color: var(--s-400-t80); }
.textarea:focus { border-color: var(--b-200); outline: 1.5px solid var(--b-200); }
.textarea.error { border-color: var(--red-100); }

.button { transition: background 0.2s ease-in-out; align-self: flex-start; flex-shrink: 0; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; padding: 12px 20px; background: var(--s-800); border: 0; border-radius: 24px; color: var(--s-25); font-size: 15px; font-weight: 500; line-height: 24px; cursor: pointer; }
.button:hover { background: var(--b-200); }
.button .icon { flex-shrink: 0; display: flex; margin-left: 10px; }

.button.brand { background: var(--b-200); }
.button.brand:hover { background: var(--b-100); }

::placeholder { opacity: 1; color: var(--s-400); }

#email { position: absolute; z-index: -100; width: 1px; height: 1px; opacity: 0; }

.preload { display: none; }

.success { flex-grow: 1; display: none; box-sizing: border-box; width: 100%; padding: 30px; color: var(--s-800); font-size: 15px; line-height: 24px; }
.success .success-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; }

.fancybox-show-thumbs .fancybox-inner { right: 0; bottom: 104px; }
.fancybox-thumbs.fancybox-thumbs-x { top: auto; width: 100%; background: transparent; text-align: center; }
.fancybox-thumbs.fancybox-thumbs-x .fancybox-thumbs__list { display: inline-block; }
.fancybox-thumbs.fancybox-thumbs-x .fancybox-thumbs__list a::before { border: 2px solid var(--b-200); }

@media (max-width: 1000px) {
    .header { padding: 20px 0; }
    .header .content { align-items: center; }
    
    .header .logo { flex-shrink: 1; }
    .header .logo img { height: 50px; }
    
    .header .menu nav { justify-content: flex-end; position: fixed; z-index: 3000; top: 0; left: 0; width: 100%; height: 100%; background: var(--s-800-t70); }
    .header .menu nav:not(.visible) { display: none; }
    .header .menu nav ul.menu-items { flex-direction: column; gap: 0; width: 400px; max-width: 80%; height: 100%; background: var(--s-800); overflow-y: auto; }
    .header .menu nav ul.menu-items li.menu-item { justify-content: flex-start; width: 100%; text-align: left; }
    .header .menu nav ul.menu-items li.menu-item a { width: 100%; min-height: 0; padding: 20px; border-bottom: 0; border-left: 2px solid transparent; color: var(--s-25); }
    .header .menu nav ul.menu-items li.menu-item a:hover { border-color: var(--s-25-t20); }
    .header .menu nav ul.menu-items li.menu-item.active a { border-color: var(--s-25); }
    .header .menu nav ul li .language { box-sizing: border-box; width: 220px; max-width: 100%; padding: 20px; }
    
    .header .menu .mobile-menu { display: flex; }
    
    .hero { min-height: 200px; padding-top: 90px; }
    .hero .text h1 { font-size: 32px; line-height: 40px; }
    
    .page { padding: 20px 0; }
    .page:not(:last-child) { padding-bottom: 20px; }
    
    .page .title h2 { font-size: 22px; line-height: 28px; }
    
    .page-head { padding: 20px 0; }
    .page-head h1 { font-size: 22px; line-height: 28px; }
    
    .services-boxes .item { padding: 10px 20px; }
    
    .projects-title { gap: 20px; margin-top: 10px; padding: 20px; }
    .projects-title .details { gap: 2px; padding-left: 14px; border-left: 3px solid var(--b-200); }
    .projects-title .details h2 { font-size: 20px; line-height: 20px; }
    
    .projects-overview { padding: 0 5px; }
    .projects-overview .item { padding: 5px; }
    .projects-overview .box { min-height: 30vw; }
    .projects-overview .box .image { opacity: 0.6; }
    .projects-overview .box .details { opacity: 1; padding: 20px; }
    .projects-overview .box .details .headline h2 { font-size: 18px; line-height: 28px; }
    
    .offices-overview { padding: 0 5px; }
    .offices-overview .item { padding: 5px; }
    .offices-overview .box .details { padding: 10px; }
    .offices-overview .box .details .headline h3 { font-size: 20px; line-height: 26px; }
    
    .gallery-container { flex-direction: column; gap: 10px; height: auto; }
    .gallery-container .arrow { width: 38px; height: 40px; font-size: 16px; }
    .gallery-container .image { width: 100%; height: 65vw; }
    .gallery-container .thumbnails { flex-direction: row; flex-wrap: nowrap; gap: 10px; width: 100%; height: 32vw; }
    .gallery-container .thumbnails .image { width: 50%; height: 100%; }
    
    .panel-container { flex-direction: column; gap: 10px; }
    .panel-container .panel { width: 100%; }
    .panel-container aside { width: 100%; }
    .panel-container aside .content-box .form-container { padding: 20px; }
    
    .content-box { margin-bottom: 10px; }
    .content-box .inner { padding: 20px; }
    
    .content-box .icon-list { padding: 10px; }
    .content-box .icon-list ul li .name { font-size: 14px; line-height: 22px; }
    .content-box .icon-list ul li .value { font-size: 16px; line-height: 26px; }
    .content-box .icon-list ul li .value .icon { min-height: 26px; }
    
    .content-box .list { padding: 10px; }
    
    .content-box .headline h3 { font-size: 18px; line-height: 26px; }
    
    .content-box .box-headline { padding: 15px 20px; }
    .content-box .box-headline h2 { font-size: 16px; line-height: 22px; }
    
    .form-container { padding: 10px; }
    
    .image-text-box { flex-direction: column; padding: 10px 0; }
    .image-text-box .text { max-width: 100%; }
    .image-text-box .image { max-width: 100%; }
    
    .footer { padding: 30px 0; }
    .footer .content { gap: 20px; }
    
    .paging { padding-top: 20px; }
    
    .labels { padding: 20px; }
}

@media (max-width: 800px) {
    .projects-overview .item { width: 100%; }
    .projects-overview .box { min-height: 60vw; }
    
    .offices-overview .item { width: 100%; }
    
    .content-box .icon-list ul li { width: 50%; }
    .content-box .icon-list.columns-three ul li { width: 50%; }
}

@media (max-width: 600px) {
    .form-container .form-item { width: 100%; }
    .form-container .form-item .button { width: 100%; }
}

@media (max-width: 380px) {
    .content-box .icon-list ul li { width: 100%; }
    .content-box .icon-list.columns-three ul li { width: 100%; }
    .content-box .list ul li { width: 100%; }
}