/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

@import url('//fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: none; }


/*@import "setup.css";*/

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *:before, *:after { box-sizing: inherit; }

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* @import "hamburgers.css"; */

/* classes */
/*pre.sf-dump { position: absolute;}*/
/* * { font-family: 'Roboto', sans-serif; color: var(--main-font-color); }*/ 
body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1em; color: var(--main-font-color); overflow: initial; letter-spacing: 0.3px; line-height: 1.33 }
strong { font-weight: 500; }
.mobilehidden { }
body.no-scroll { overflow: hidden; }

table { border-top: solid 1px grey; border-right: solid 1px grey; border-collapse: collapse; max-width: 100%; }
table td { border-bottom: solid 1px grey; border-left: solid 1px grey; padding: 0.5rem; }
table tr:first-child td { font-weight: bold; background-color: lightgrey; }

input, select { padding: 4px 8px; }
::placeholder { opacity: .5; font-style: italic; }
p { margin: 0 0 1em 0; line-height: 1.5; }
a { color: var(--nav-font-color); }
a:hover { color: var(--nav-hover-font-color); }

header { width: 100%; height: 75px; padding: 10px var(--left-right-padding); position: fixed; background-color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .05); z-index: 100; transition: transform 0.3s;
}
header.hide { transform: translateY(-75px); transition: transform 0.3s;}

.logo { max-height: 20px; position: absolute; top: 27px; right: var(--left-right-padding); }
.logo img { height: 20px; opacity: .75; }


nav { position: absolute; top: 10px; width: calc(100% - 320px); display: flex; justify-content: space-between; align-items: center; }
nav > ul { display: flex; padding: 18px 0; margin: 0; list-style: none; }
nav > ul > li { margin-left: 30px; }
nav > ul > li:first-child { margin-left: 0; }
nav > ul > li > a { text-decoration: none; text-transform: uppercase; font-size: .85rem; letter-spacing: 1px; 
  padding-bottom: 4px; border-bottom: solid 1px transparent; }
nav > ul > li > a:hover { border-bottom: solid 1px var(--nav-font-color); transition: border-color .75s }
nav > ul > li > a.active { border-bottom: solid 1px var(--nav-font-color); color: var(--nav-font-color); }

.lang > a { text-decoration: none; font-size: 0.75em; text-transform: uppercase; margin: 0; }
.lang > a.active { border-bottom: solid 1px var(--nav-font-color); color: var(--nav-font-color); font-weight:500; }

.hamburger { display: none; }

main { padding-top: 75px; }

section { width: 100%; max-width: 100%; padding: 60px var(--left-right-padding);}
section > * { max-width: 100%; }

.section-project-title { padding: 90px var(--left-right-padding) 30px; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between }
.section-project-title > div { width: 50%; padding-bottom:0; }
.section-project-title > div:last-child { width: 450px;/*24%;*/ display: grid; grid-template-columns: 40% 60%; row-gap: 10px; font-size: 1.2em }
.section-project-title > div:last-child p { font-size: 1em }
.section-project-title > div:last-child > div:nth-child(odd) { font-weight: bold; }
.section-project-title p { font-weight: 100; font-size: 1.3em; }
.section-project-title p:last-child { margin-bottom: 0 }
.section-project-title h1 { font-weight: 500; font-size: 4em; margin:0 }
.section-project-title h2 { font-weight: 500; font-size: 1.8em; margin: 1em 0 }

h1 { font-weight: 900; font-size: 4em; }
h2 { font-weight: 100; font-size: 1.8em; }
h3 { font-weight: 500; }

/* template 1 */
/* single image full width */
.section-template-1-left,
.section-template-1-right { width: 100%; /*aspect-ratio: 16 / 9;*/ overflow: hidden; padding-left:0; padding-right:0  }
.section-template-1-left .text, 
.section-template-1-right .text { display: none; }
.section-template-1-left .image1,
.section-template-1-right .image1 { display: block; width: 100%; height: 100%; object-fit: cover;}
.section-template-1-left .image2,
.section-template-1-right .image2 { display: none; }

/* template 2  */
/* text - 2 images */
/* left */
.section-template-2-left {
  display: grid;
  grid-template-columns: 40% 60px calc(60% - 60px);
  grid-template-rows: max-content auto 10%;
}
.section-template-2-left .text {
  font-size: 1.3vw;
  grid-column-start: 1; grid-column-end: 1;
  grid-row-start: 1; grid-row-end: 1;
}
.section-template-2-left .image1 {
  grid-column-start: 3; grid-column-end: 3;
  grid-row-start: 1; grid-row-end: 3;
}
.section-template-2-left .image2 {
  grid-column-start: 1; grid-column-end: 1;
  grid-row-start: 2; grid-row-end: 3;
  margin-top: 15%;
}

/* right */
.section-template-2-right {
  display: grid;
  grid-template-columns: calc(60% - 60px) 60px 40%;
  grid-template-rows: max-content auto 10%;
}
.section-template-2-right .text {
  font-size: 1.3vw;
  grid-column-start: 3; grid-column-end: 3;
  grid-row-start: 1; grid-row-end: 1;
}
.section-template-2-right .image1 {
  grid-column-start: 1; grid-column-end: 1;
  grid-row-start: 1; grid-row-end: 3;
}
.section-template-2-right .image2 {
  grid-column-start: 3; grid-column-end: 3;
  grid-row-start: 2; grid-row-end: 3;
  margin-top: 15%;
}

/* template 3  */
/* text - 2 images */
/* left */
.section-template-3-left {
  display: grid;
  grid-template-columns: 60% 60px calc(40% - 60px);
  grid-template-rows: max-content auto 10%;
}
.section-template-3-left .text {
  font-size: 1.3vw;
  grid-column-start: 1; grid-column-end: 1;
  grid-row-start: 1; grid-row-end: 1;
}
.section-template-3-left .image1 {
  grid-column-start: 3; grid-column-end: 3;
  grid-row-start: 1; grid-row-end: 3;
}
.section-template-3-left .image2 {
  grid-column-start: 1; grid-column-end: 1;
  grid-row-start: 2; grid-row-end: 3;
  margin-top: 10%;
}

/* right */
.section-template-3-right {
  display: grid;
  grid-template-columns: calc(40% - 60px) 60px 60%; 
  grid-template-rows: max-content auto 10%;
}
.section-template-3-right .text {
  font-size: 1.3vw;
  grid-column-start: 3; grid-column-end: 3;
  grid-row-start: 1; grid-row-end: 1;
}
.section-template-3-right .image1 {
  grid-column-start: 1; grid-column-end: 1;
  grid-row-start: 1; grid-row-end: 3;
  margin-bottom: 10%;
}
.section-template-3-right .image2 {
  grid-column-start: 3; grid-column-end: 3;
  grid-row-start: 2; grid-row-end: 3;
  margin-top: 10%;
}

/* template 4  */
/* text - 1 image */
/* left */
.section-template-4-left {
  display: grid;
  grid-template-columns: 30% 60px calc(70% - 60px);
  grid-template-rows: max-content auto 10%;
}
.section-template-4-left .text {
  font-size: 1.3vw;
  grid-column-start: 1; grid-column-end: 1;
  grid-row-start: 1; grid-row-end: 1;
}
.section-template-4-left .image1 {
  grid-column-start: 3; grid-column-end: 3;
  grid-row-start: 1; grid-row-end: 3;
}
.section-template-4-left .image2 {
  display:none;
}

/* right */
.section-template-4-right {
  display: grid;
  grid-template-columns: calc(70% - 60px) 60px 30%;
  grid-template-rows: max-content auto 10%;
}
.section-template-4-right .text {
  font-size: 1.3vw;
  grid-column-start: 3; grid-column-end: 3;
  grid-row-start: 1; grid-row-end: 1;
}
.section-template-4-right .image1 {
  grid-column-start: 1; grid-column-end: 1;
  grid-row-start: 1; grid-row-end: 3;
}
.section-template-4-right .image2 {
  display:none;
}

/* template 5  */
/* no text - 2 images */
/* left */
.section-template-5-left {
  display: grid;
  grid-template-columns: 25% 60px calc(75% - 60px);
}
.section-template-5-left .text,
.section-template-5-right .text { display: none; }
.section-template-5-left .image1 {
  grid-column-start: 1; grid-column-end: 1;
  margin-top: 15%;
  align-self: end;
}
.section-template-5-left .image2 {
  grid-column-start: 3; grid-column-end: 3;
  margin-bottom: 10%;
}

/* right */
.section-template-5-right {
  display: grid;
  grid-template-columns: calc(75% - 60px) 60px 25%;
}
.section-template-5-right .image1 {
  grid-column-start: 1; grid-column-end: 1;
  align-self: end;
  margin-top: 10%;
}
.section-template-5-right .image2 {
  grid-column-start: 3; grid-column-end: 3;
  margin-bottom: 10%;
}

/* template 6 */
/* single image full width with padding */
.section-template-6-left,
.section-template-6-right { width: 100%; /*aspect-ratio: 16 / 9;*/ overflow: hidden; padding-left:80px; padding-right:80px; }
.section-template-6-left .text, 
.section-template-6-right .text { display: none; }
.section-template-6-left .image1,
.section-template-6-right .image1 { display: block; width: 100%; height: 100%; object-fit: cover;}
.section-template-6-left .image2,
.section-template-6-right .image2 { display: none; }


.project-data { width: 100%; padding: 60px var(--left-right-padding); }

.project-data .data-columns { columns: 4; column-gap: 20px; margin-bottom: 60px; }
.project-data .data-columns > div { margin-bottom: 1.8em; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column;}
.project-data .data-columns > div > p { margin: 0; font-size: 1.2em; line-height: 1.4; }
.project-data .data-columns > div > p:first-child { font-weight: bold; }
.project-data .data-columns > div > p:first-child:first-letter { text-transform: uppercase; }

.project-data .data-columns.closable { transition: all 0.35s ease-out; transform-origin: top center; opacity:1 }
.project-data .data-columns.closable.closed { transform: scaleY(0.5); opacity: 0; transition: all 0s; height: 0; overflow-y: hidden; }

.project-data .accordion { display: flex; justify-content: space-between; align-items: flex-start; }
.project-data .accordion hr { border-top: 1px solid #aaa; width: calc(100% - 50px); }
.project-data .accordion img { width: 22px; transform: rotate(0deg); cursor: pointer; }
.project-data .accordion.closed img { transform: rotate(-180deg); }


.thumbs.thumbs-notopmargin { padding-top: 0 }
.thumbs > div:first-of-type { width: 66% }
.thumbs > div:last-of-type { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; margin: 60px auto 0px auto; }
.thumbs > div > p { font-weight: 100; font-size: 1.3em; }
.thumbs > div > h1 { font-weight: 500; font-size: 4em; margin:0 }
.thumbs > div > h2 { font-weight: 500; font-size: 1.8em; margin: 1em 0 }

.thumb { display: inline-block; text-decoration: none; height: auto; cursor: pointer; position: relative; }
.thumb.active { text-decoration: underline; }
.thumb.active > img { opacity:0.3; }
.thumb.video { grid-column: 1 / 4; }
/*.thumb.video:after { content: '';
    display: block; position: absolute;
    width: 0; height: 0; left: calc(50% - 15px);top: calc(50% - 30px);
    border-top: 30px solid transparent; border-bottom: 30px solid transparent;
    border-left: 30px solid rgba(255,255,255,.8);
    cursor: pointer; pointer-events: none;
}*/
.thumb h3 { font-size: 1.6em; font-weight: 500; /*text-transform: capitalize;*/}
.thumb img { width: 100%; object-fit: cover; aspect-ratio: 16/9; /*filter: grayscale(1); transition: filter 1s;*/ }
/*.thumb:hover img { filter: grayscale(0); }*/

.footer { position: relative; width: 100%; padding: /*90px*/ 30px var(--left-right-padding); background-color: var(--footer-bgcolor); color: #EDEDED;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  box-shadow: 0 0 20px rgba(0, 0, 0, .05); 
}
.footer .footer-left > img { width: 180px; margin-bottom: 60px }
.footer a { text-decoration: none; color: #EDEDED }
.footer-social { display: flex; justify-content: start; width: 180px; }
.footer-social a { margin-right: 16px; }
.footer-social img { height: 26px; fill: #EDEDED; }
.footer .footer-right { text-align: right; }
.footer .footer-right p:last-child { margin-bottom:0; }
.footer .footer-right h4 { font-size: 1.25em; letter-spacing: 1.75px }


.gototop { position: absolute; display: block; 
  width: 60px; height: 25px; left: calc(50% - 30px); top: -15px; 
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .05);
}
.gototop:before { position: absolute; content: ''; left: 11px; top: 10px; display: block; width: 20px; border-top: solid 1px var(--main-font-color); transform: rotate(-20deg); }
.gototop:after { position: absolute; content: ''; right: 10px; top: 10px; display: block; width: 20px; border-top: solid 1px var(--main-font-color); transform: rotate(20deg); }

.section-general-text { padding: var(--left-right-padding); }
.section-general-text:before { display: block; position: absolute; width: 150px; top: 0; content: ''; border-top: solid 1px var(--table-border); }
.section-general-text h2 { font-weight: 500; font-size: 2.6em; padding-bottom: 20px; border-bottom: solid 1px #ccc }
.section-general-text p { font-size: 1.3em; width: 70% }


.section-contact { width: calc(100% - 2 * var(--left-right-padding)); margin: var(--left-right-padding); padding: var(--left-right-padding); font-size: 1em; position: relative; 
  background-color: var(--dashboard-block-color);
  column-count: 4; column-gap: var(--left-right-padding); 
}
.section-contact > p { break-inside: avoid-column; }
.section-contact b { font-weight: 600 }
.section-contact > h2 { width: 100%; }
.location { margin-top: 60px; }
.location img { width: 26px; margin-right: 20px; opacity: .5; }
.location a { text-decoration: none; }
.section-contact > div { width: 25%; margin-top: 1em; }
  
.section-projects-filter { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; margin-top: 90px; }
.section-projects-filter div { width:40%; }
.section-projects-filter h2 { font-weight: 500; font-size: 2.2em; margin-top:0 }
.section-projects-filter p { font-size: 1.2em; margin-bottom:0 }
.section-projects-filter a { font-size: 1.3em; line-height: 2; margin: 0.3em 1em 0.3em 0; text-decoration: none; padding-bottom: 2px; border-bottom: solid 1px var(--main-font-color) }
.section-projects-filter a.active { font-weight: 900; }

.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.projects-grid-thumb { text-decoration: none; margin-bottom: 30px; width: 100%; }
.projects-grid-thumb .thumb-image-wrapper { aspect-ratio: 16 / 9; }
.projects-grid-thumb > p { font-size: 1.2em; font-weight: 500; margin: 1em 0; max-width: fit-content; line-height: 1; }
.projects-grid-thumb img { width: 100%; height: 100%; object-fit: cover; }
img.contain { object-fit: contain !important; border: solid 1px #eeeeee; }

.back-to-top { position: relative; width: 100%; padding: 120px var(--left-right-padding) 90px; text-align: right; 
  display: flex; flex-direction: row-reverse; justify-content: flex-start; }
.back-to-top a:last-of-type { margin-right: auto; margin-left: 30px }
.back-to-top a:first-of-type { margin-right: 0; margin-left: 100px; }
.back-to-top a { position: relative; text-decoration: none; font-size: 1.3em; font-weight: 100; margin-left:100px }
.back-to-top a:before { content: ''; position: absolute; top: 4px; left: -50px; width: 50px; height: 16px; background: url(../img/back-to-top.svg) no-repeat; background-size: contain; }
.back-to-top a.back:before { transform: rotate(-90deg); top: -10px; left: -50px; }
.back-to-top a.next:before { transform: rotate(90deg); top: 20px; left: -50px; }


.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.team-grid-thumb { text-decoration: none; margin-bottom: 30px; width: 100%; }
.team-grid-thumb .thumb-image-wrapper { aspect-ratio: 16 / 9; }
.team-grid-thumb p { font-size: 1.2em; font-weight: 500; margin: 1em 0; max-width: fit-content; line-height: 1.2; }
.team-grid-thumb img { width: 100%; height: 100%; object-fit: cover; }
p.team-name { font-size: 1.3em; margin: 20px 20px 8px 0px; }
p.team-function { font-size: 0.95em; font-weight: 100; text-transform: uppercase; letter-spacing: 0.2px; margin: 0 0px; }
p.team-mail { margin: 0 0px;}
p.team-mail a { font-size: .8em; font-weight: 100; text-decoration: none; }

.products-grid { width: calc(100% - 30px); display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 60px 0 60px 30px; }
.products-grid-thumb { text-decoration: none; margin-bottom: 30px; padding-right: 30px; width: 50%; }
.products-grid-thumb .thumb-image-wrapper { aspect-ratio: 16 / 9; }
.products-grid-thumb p { font-size: 1.4em; font-weight: 100; margin: 0.5em 0; max-width: fit-content; line-height: 1; }
.products-grid-thumb img { width: 100%; height: 100%; object-fit: cover; }

.first-news { margin-top: 60px; }
.first-news { display:flex; justify-content: space-between; }
.first-news > a { width: calc(55% - var(--left-right-padding)) }
.first-news > a > img { width: 100%; height: 100%; object-fit: cover; }
.first-news > div { width: 45%; font-size: /*1.3vw;*/ 1.3em; }
.first-news > div h2 { font-weight: 500;}
.first-news > div a.button { font-size: 1em;}

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.news-grid-thumb { text-decoration: none; margin-bottom: 30px; width: 100%; }
.news-grid-thumb .thumb-image-wrapper { aspect-ratio: 16 / 9; }
.news-grid-thumb span { display: block; font-size: .9em; font-weight: 100; margin: 1em 0 0; max-width: fit-content; line-height: 1.2; }
.news-grid-thumb h3 { font-size: 1.3em; font-weight: 500; margin: .3em 0 0; line-height: 1.2; }
.news-grid-thumb p { font-size: 1.2em; font-weight: 500; margin: 1em 0; max-width: fit-content; line-height: 1.2; }
.news-grid-thumb img { width: 100%; height: 100%; object-fit: cover; }

.news-grid > .news-grid-thumb p { display: none; }
.news-grid > .news-grid-thumb.active { width: calc(100% - 30px); border-top: solid 1px var(--table-border); border-bottom: solid 1px var(--table-border); 
  background-color: rgb(255,255,255); padding: 60px 0; display: flex; justify-content: flex-start; 
  position: fixed; height: calc(100vh - 75px); top: 75px;
  transition: background-color .4s; z-index: 9; overflow-y: auto;
}
.news-grid > .news-grid-thumb.active p { display: initial; }
.news-grid > .news-grid-thumb.active > .thumb-image-wrapper { width: 38%; margin-right: 30px; margin-top: 4em; }
.news-grid > .news-grid-thumb.active h3 { font-size: 2em; margin: 1em 0 1.5em 0; }
.news-grid > .news-grid-thumb.active p { display: inline-block; font-size: 1.2em; margin: 0.5em 0; line-height: 1.6; }
.news-grid > .news-grid-thumb.active > .thumb-image-wrapper > img { height: auto;  }
.news-grid > .news-grid-thumb.active > .news-grid-data { width: calc(62% - 60px); }

/*.news-item { margin-top: 60px; display:block }
.news-item {  }
.news-item { width: 100% }
.news-item > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.news-item > div { width: 100%; margin-bottom: var(--left-right-padding); }
.news-item .title { display:flex; justify-content: space-between; }
.news-item .text { column-count: 2; column-gap: var(--left-right-padding); }
.news-item h1 { font-size: 2.4em; font-weight: 500; margin-top: 0}
.news-item span { display: block; font-size: 1em; font-weight: 500; margin-top: 14px }*/

.news-item { margin-top: 60px; display:block }
.news-item > div { width: 100%; margin-bottom: var(--left-right-padding); display: flex; flex-wrap: wrap; justify-content: space-between; }
.news-item > div > .title { width: 100%; display:flex; justify-content: space-between; }
.news-item > div > .text { width: 30%; font-size: /*1.3vw*/ 1.3em; }
.news-item > div > img { width: calc(70% - var(--left-right-padding)); object-fit: contain; object-position: top; }
.news-item > div > .title div { width: calc(70% - var(--left-right-padding)); margin-bottom: .67em }
.news-item > div > .title div h1 { font-size: 2.4em; font-weight: 500; margin-top: 0; }
.news-item > div > .title span { display: block; font-size: 1em; font-weight: 300; margin-top: 14px; width: 30%; text-align: right; }

.news-item.article > div { display: block; font-size: 1.3em; }
.news-item.article > div > img { float: left; margin: 0 var(--left-right-padding) var(--left-right-padding) 0; }

.news-slider { box-sizing: border-box; padding:0 }
.news-slider .news-slider-header { display: flex; justify-content: flex-start; padding: 0 var(--left-right-padding); position: relative; margin: 30px 0; }
.news-slider .news-slider-header h4 { font-size: 3em; margin:0 1em 0 0 }
.news-slider .swiper-button-prev { position: relative; top: 24px; left: 0; width: calc(var(--swiper-navigation-size)/ 44 * 87); height: calc(var(--swiper-navigation-size)/2); margin-top: 0; }
.news-slider .swiper-button-next { position: relative; top: 24px; left: 0; width: calc(var(--swiper-navigation-size)/ 44 * 87); height: calc(var(--swiper-navigation-size)/2); margin-top: 0; }
.news-slider .swiper-button-prev:after, .news-slider .swiper-button-next:after { font-weight: bold; font-size: 1.4em }
.news-slider .news-grid-thumb { display: flex; }
.news-slider .thumb-image-wrapper { width: 50%; aspect-ratio: 2/1; }
.news-slider .thumb-image-wrapper img { width: 100%; height:100%; object-fit: cover; }
.news-slider .news-grid-data { width: calc(50% - 180px); background-color: #F2F2F2; padding: 90px; aspect-ratio: 2/1; }
.news-slider .news-grid-data span { font-weight: bold; }
.news-slider .news-grid-data h3 { font-size: 2em }
.news-slider .news-grid-data p { font-size: 1.15em; line-height:1.8; display: -webkit-box; text-overflow: ellipsis; overflow: hidden;
  -webkit-box-orient: vertical; -webkit-line-clamp: 6; /* this can be any value you want */
}
@media only screen and (max-width: 1300px) {
  .news-slider .news-grid-data { width: calc(50% - 120px); padding: 60px;}
  .news-slider .news-grid-data p { -webkit-line-clamp: 4; }
}
.news-slider .news-grid-data a.more { display: block; text-decoration: underline; text-align: right; text-underline-offset: 12px; font-weight: bold; }

.newsletter-form { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-start; padding: /*180px*/ 30px var(--left-right-padding) 0px; 
    background-color: var(--footer-bgcolor); color: #EDEDED;}
.newsletter-form .newsletter-up { display: flex; justify-content: space-between; border-bottom: solid 1px #626262; padding-bottom: 10px; margin-bottom:0px; }
.newsletter-form .newsletter-up h2 { font-size: 48px; font-weight: 500; letter-spacing: 3.75px; margin:0 }
.newsletter-form form { margin: 0; padding: 0; display: flex;}
.newsletter-form form input[type='email'] { background-color: var(--footer-bgcolor); width: auto; border: none; padding: 0px 30px; 
    color: #EDEDED; font-size: 1.2em; font-weight: 300; outline: none }
.newsletter-form form input[type='email']::placeholder { color: #EDEDED; opacity: 1; }
.newsletter-form form button { position: relative; background-color: var(--footer-bgcolor); width: auto; border: none; padding: 0px 30px; 
    color: #EDEDED; font-size: 1.2em; font-weight: 300; cursor: pointer;  outline: none}
.newsletter-form form button::after { content: ''; display: block; position:absolute; 
    top: 24px; right: 0; width: 16px; height: 16px; background: url(../img/send.svg) top right; background-size: contain; }

.section-about-header { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 1.3em}
.section-about-header div:first-of-type { width: 60% }
.section-about-header div:last-of-type { width: 30%; text-align: right; }
.section-about-header .logo-big { width: 100%; margin-bottom: 30px; padding-right: calc(100% - 200px)  }
.section-about-header a { font-size: 0.9em; line-height: 1.9; text-underline-offset: 5px }


.section-awards-list { width: 100%; margin: 0px 0 60px 0; padding: 0 var(--left-right-padding); }
.awards-list-item-header { display: flex; justify-content: flex-start; }
.awards-list-item-header > div { padding: 18px; border-bottom: solid 1px #aaa; font-size: 1.4em; font-weight: 500 }
.awards-list-item { display: flex; justify-content: flex-start; text-decoration: none; transition: none; }
.awards-list-item:first-of-type { margin-top: 30px; }
.awards-list-item:hover > div { background-color: #f8f8f8; }
.awards-title { cursor: pointer; font-weight: 500; padding: 12px 18px; width: calc(60% - 50px); }
.awards-issuer { cursor: pointer; padding: 12px 18px; width: calc(40% - 50px); }
.awards-year { cursor: pointer; padding: 12px 18px; width: 100px; }

.see-all { position: relative; display: block; width: calc(100% - 40px); height: 30px;
  text-decoration: none; border-top: solid 1px #aaa; margin-top: 30px; margin-right: 40px }
.see-all:after { content: ''; display: block; position:absolute; top: -10px; right:-40px; 
  width: 22px; height: 22px; background-image: url(../img/arrow.svg); background-position: center center;
  background-size: 22px; background-repeat: no-repeat;
}
/*.see-all > img { width: 22px; }*/


.section-eu-projects { background-color: var(--main-bgcolor); }
.section-eu-projects h2 { font-weight: 500 }
.section-eu-projects a { display:block; position: relative; border-bottom: solid 1px #aaa; padding: 20px 0; text-decoration: none;
font-size: 1.3em; font-weight: 500; margin-bottom: 20px; }
.section-eu-projects a:after { content:''; display: block; position:absolute;
bottom: 14px; right: 0; width: 16px; height: 16px; background: url(../img/submit.svg) top right; background-size: contain; }

.section-ugly { width: 100%; margin: 0 0 60px 0; padding: 0 30px; }
.ugly-image { width: 100%; aspect-ratio: 16 / 3; object-fit: cover; }
.columns-2 { width: 60%; margin: 60px 0 60px 40%; columns: 2; }

.section-ugly-inline { width: 100%; margin: 0 0 120px 0; padding: 0 var(--left-right-padding); display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
.section-ugly-inline h2 { display: block; width: 100%; font-weight: 600; margin-top:0 }
.section-ugly-inline p { font-size: 1.3em; }
.section-ugly-inline .ugly-image { width: calc(50% - 30px); aspect-ratio: 8 / 5; object-fit: cover; }
.section-ugly-inline .columns-2 { width: calc(50% - 30px); margin: 0; columns: 1 }
.section-ugly-inline .columns-2 a { display: block; position: relative; font-size: 1.4em; text-decoration: none;
  border-bottom: solid 1px #ccc; width: fit-content; margin: 2em 0 0 auto; padding: 8px 32px 8px 0;
}
.section-ugly-inline .columns-2 a:after { content:''; display: block; position:absolute;
top: 16px; right: 0; width: 16px; height: 16px; background: url(../img/submit.svg) top right; background-size: contain; }

a.button { display: block; position: relative; font-size: 1.4em; text-decoration: none;
  border-bottom: solid 1px #ccc; width: fit-content; margin: 2em 0 0 auto; padding: 8px 32px 8px 0;
}
a.button:after { content:''; display: block; position:absolute;
top: 16px; right: 0; width: 16px; height: 16px; background: url(../img/submit.svg) top right; background-size: contain; }


.lightbox-overlay { position:fixed; top: 0; left: 0; width:100%; height:100%; background-color: #000000; z-index: 101; display: none; }
.lightbox-overlay.show { display: block; }
.lightbox-overlay .lightbox-image { position:relative; width:100%; height:calc(100% - 75px); }
.lightbox-overlay .lightbox-image img { width: 100%; height: 100%; object-fit: contain; }
.lightbox-overlay .lightbox-footer { position:relative; width:100%; height: 75px; background-color: #ffffff; 
  display: flex; justify-content: space-between; padding: 25px var(--left-right-padding); }
.lightbox-overlay .prev { width: 24px; height: 24px; border: solid 3px #000; 
  border-bottom: none; border-right: none; display: block; transform: rotate(-45deg); }
.lightbox-overlay .counter { font-size: 1.4em; font-weight: 400; flex-grow:1; text-align: center; }
.lightbox-overlay .next {  width: 24px; height: 24px; border: solid 3px #000; 
  border-bottom: none; border-right: none; display: block; transform: rotate(135deg); }
.lightbox-overlay .close { width: 32px; height: 32px; position: relative; margin-left: var(--left-right-padding) }
.lightbox-overlay .close:before { content: ""; display: block; position: absolute; top: -9px; left: 13px;
  width: 3px; height: 44px; background-color: #000; transform: rotate(-45deg);
 }
 .lightbox-overlay .close:after { content: ""; display: block; position: absolute; top: -9px; left: 13px;
  width: 3px; height: 44px; background-color: #000; transform: rotate(45deg);
 }


.cookies { display: block; background-color: rgba(17, 22, 28, 0.89); position: fixed; bottom: 0; left: 0; width: 100vw; padding: 40px; z-index: 999; }
.cookies p { color: #fff; }
.cookies .agree { background-color: var(--blue); color: #fff; border: none; padding: 0/*8px 32px 8px 32px*/; text-transform: uppercase; cursor: pointer; }*/
.cookies .agree { margin-top:  20px; } 


@media only screen and (max-width: 1000px) {

  main { padding-top: 45px; }
  header { padding: 10px 15px; }
  .logo { right: 30px; z-index: 3; }
  .footer .footer-right { text-align: left; }
  .footer-right { margin-top: 32px; }
  .newsletter-form .newsletter-up h2 { font-size: 32px; font-weight: 500; letter-spacing: 3.75px; margin:0 }

  nav { display: block; position: absolute; background-color: rgba(255,255,255,0.98); top: 75px; left: 0px; width: 100%; 
    padding-bottom: 30px; border-bottom: solid 1px #555; opacity: 0; transform: translateY(calc(-100% - 80px)); 
    transition: transform .4s ease-out, opacity .4s ease-out; z-index: 1; }
  nav.is-active { /*display: initial;*/ opacity: 1; transform: translateY(0); }
  nav > ul { display: flex; flex-direction: column; padding: 18px; margin: 0; list-style: none; }
  nav > ul > li { margin-left: 70px; margin-top: 20px; }
  nav > ul > li:first-child { margin-left: 70px; }
  nav > ul > li > a { text-decoration: none; font-size: 0.9em; }

  .lang { margin: 20px 73px; }
  .lang > a { margin: 0px 15px; font-size: 0.8em; }

  .hamburger { position: relative; display: block; z-index: 2; }
  .mobilehidden { display: none; }

  section { padding: var(--left-right-padding); }
  
  .section-project-title { padding: var(--left-right-padding); flex-direction: column; align-items: flex-start; }
  .section-project-title > div { width: 100%; padding-bottom: 30px; }
  .section-project-title > div:last-child { width: 100%; }
  .section-project-title h1 { font-size: 2.4em; margin: 0.3em 0; }
  .section-project-title h2 { font-size: 1.4em; }
  .section-project-title p { font-size: 1.2em; }

  .section-template-1-right { display: block; }
  .section-template-1-right .text { font-size: 1em; }
  .section-template-1-right .image2 { margin-top: 30px; }

  .section-template-1-left { display: block; }
  .section-template-1-left .text { font-size: 1em; }
  .section-template-1-left .image2 { margin-top: 30px; }

  .section-template-2-right { display: block; }
  .section-template-2-right .text { font-size: 1em; }
  .section-template-2-right .image2 { margin-top: 30px; }

  .section-template-2-left { display: block; }
  .section-template-2-left .text { font-size: 1em; }
  .section-template-2-left .image2 { margin-top: 30px; }

  .section-template-3-right { display: block; }
  .section-template-3-right .text { font-size: 1em; }
  .section-template-3-right .image2 { margin-top: 30px; }

  .section-template-3-left { display: block; }
  .section-template-3-left .text { font-size: 1em; }
  .section-template-3-left .image2 { margin-top: 30px; }

  .section-template-4-right { display: block; }
  .section-template-4-right .text { font-size: 1em; }
  .section-template-4-right .image2 { margin-top: 30px; }

  .section-template-4-left { display: block; }
  .section-template-4-left .text { font-size: 1em; }
  .section-template-4-left .image2 { margin-top: 30px; }

  .section-template-5-right { display: block; }
  .section-template-5-right .text { font-size: 1em; }
  .section-template-5-right .image2 { margin-top: 30px; }

  .section-template-5-left { display: block; }
  .section-template-5-left .text { font-size: 1em; }
  .section-template-5-left .image2 { margin-top: 30px; }

  .section-template-6-right { display: block; padding: var(--left-right-padding); }
  .section-template-6-right .text { font-size: 1em; }
  .section-template-6-right .image2 { margin-top: 30px; }

  .section-template-6-left { display: block; padding: var(--left-right-padding); }
  .section-template-6-left .text { font-size: 1em; }
  .section-template-6-left .image2 { margin-top: 30px; }

  .news-slider .news-slider-header { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--left-right-padding); position: relative; margin: 30px 0; }
  .news-slider .news-slider-header h4 { font-size: 2em; margin:0 1em 0 0 }
  .news-slider .swiper-button-prev { position: relative; top: 0px; left: 0; width: calc(var(--swiper-navigation-size)/ 44 * 47); height: calc(var(--swiper-navigation-size)/2); margin-top: 0; }
  .news-slider .swiper-button-next { position: relative; top: 0px; left: 0; width: calc(var(--swiper-navigation-size)/ 44 * 47); height: calc(var(--swiper-navigation-size)/2); margin-top: 0; }
  .news-slider .news-grid-thumb { display: flex; flex-direction: column; }
  .news-slider .thumb-image-wrapper { width: 100%; aspect-ratio: 16/9; }
  .news-slider .news-grid-data { width: calc(100% - 60px); background-color: #ffffff; padding: 30px }
  .news-slider .news-grid-data span { font-weight: bold; }
  .news-slider .news-grid-data h3 { font-size: 1.4em }
  .news-slider .news-grid-data p { font-weight: 100; font-size: 1em; line-height:1.4 }
  .news-slider .news-grid-data a.more { display: block; text-decoration: underline; text-align: right; text-underline-offset: 12px; font-weight: 500; }

  .image2, .image1 { margin-top: 30px; }
  .image2:first-child, .image1:first-child { margin-top: 0; }

  .thumb { width: 47%; display: block; text-decoration: none; height: auto; margin-bottom: 30px; }

  .projects-grid { padding: 30px; display: block; }
  .projects-grid-thumb { display: block; width: 100%; margin-bottom: 30px; }
  .section-projects-filter { flex-direction: column; padding: 30px }
  .section-projects-filter div { width:100%; margin-bottom: 30px }

  .products-grid-thumb { width: 100%; }

  .team-grid-thumb { width: 100%; }

  .news-grid-thumb { width: 100%; }

  .news-grid > .news-grid-thumb.active { flex-direction: column; }
  .news-grid > .news-grid-thumb.active > .thumb-image-wrapper { width: calc(100% - 30px); margin-right: 0; margin-bottom: 30px; margin-top: 0; }
  .news-grid > .news-grid-thumb.active > .news-grid-data { width: calc(100% - 30px); }

  .newsletter-form { flex-direction: column; padding: 30px; }

  .newsletter-form .newsletter-up { flex-direction: column; }
  .newsletter-form form { flex-direction: column; }
  .newsletter-form form input[type='email'],
  .newsletter-form form button { height: 2em; text-align: left; padding:0; margin: 0.5em 0; }
  .newsletter-form form button::after { top: 10px; text-align: left; }
  

  .project-data .data-columns { columns: 1; column-gap: 10px; margin-bottom: 30px; }
  .project-data .data-columns > div { width: 100%; margin-bottom: 10px; }
  .project-data .data-columns > div > p { display: inline-block; }
  .project-data .data-columns > div > p:first-of-type:after { content:':' }


  .thumbs > div:first-of-type { width: 100% }
  .thumbs > div:last-of-type { display: block; margin: 30px auto 0px auto; }

  .thumb { display: block; width: 100%;  }
  .thumb img { aspect-ratio: 16/7 }
  .thumb h3 { font-size: 1.4em; }

  .back-to-top { padding: 60px var(--left-right-padding) 60px; text-align: right; 
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; }
  .back-to-top a:last-of-type { margin-right: 0; margin-left: 0px }
  .back-to-top a:first-of-type { margin-right: 0; margin-left: 0px; }
  .back-to-top a { display: block; position: relative; width: fit-content; margin-bottom: 30px;}
  .back-to-top a:before { content: ''; position: absolute; top: 4px; left: -35px; width: 50px; height: 16px; background: url(../img/back-to-top.svg) no-repeat; background-size: contain; }
  .back-to-top a.back:before { transform: rotate(-90deg); top: -10px; left: -50px; }
  .back-to-top a.next:before { transform: rotate(90deg); top: 20px; left: -50px; }

  .team-grid { display: block; }

  .section-general-text h2 { font-size: 2.2em; }
  .section-general-text p {  font-size: 1.2em; width: 100%; }


  .section-about-header { flex-direction: column; }
  .section-about-header div:first-of-type { width: 100% }
  .section-about-header div:last-of-type { display: flex; width: 100%; justify-content: space-between; font-size: 0.8em }
  .section-about-header div:last-of-type br { display: none; }
  .section-about-header .logo-big { width: 100%; margin-bottom: 30px; padding-right: calc(100% - 200px)  }
  .section-about-header a { font-size: 0.9em; line-height: 1.9; text-underline-offset: 5px }

  .section-awards-list { width: 100%; margin: 0 0 60px 0; padding: 0 30px; }
  .section-awards-list h2 { border-bottom: solid 1px var(--main-border-color); padding-bottom:30px; font-weight: bold; }
  .awards-list-item-header { display: none;  }
  .awards-list-item { flex-wrap: wrap; flex-direction: column-reverse; padding: 10px 0; }
  .awards-list-item:first-of-type { margin-top: 0 }
  .awards-year { width: 100%; padding: 3px 0px; font-size: .85em;}
  .awards-issuer { width: 100%; padding: 3px 0px; font-size: .85em;}
  .awards-title { width: 100%; padding: 3px 0px; font-size: 1.2em;}

  .section-eu-projects a { padding: 20px 30px 20px 0; font-size: 1.1em; }

  .first-news { margin-top: 60px; }
  .first-news { flex-direction: column; }
  .first-news > a { width: 100%; margin-bottom: 30px }
  .first-news > div { width: 100%; font-size: 1em;}

  .news-grid { display: block; grid-template-columns: repeat(3, 1fr); gap: 24px;}
  .news-grid-thumb { display: block; text-decoration: none; margin-bottom: 30px; width: 100%; }
  .news-grid-thumb .thumb-image-wrapper { aspect-ratio: 16 / 9; }
  .news-grid-thumb span { display: block; font-size: .9em; font-weight: 100; margin: 1em 0 0; max-width: fit-content; line-height: 1.2; }
  .news-grid-thumb h3 { font-size: 1.3em; font-weight: 500; margin: .3em 0 0; line-height: 1.2; }
  .news-grid-thumb p { font-size: 1.2em; font-weight: 500; margin: 1em 0; max-width: fit-content; line-height: 1.2; }
  .news-grid-thumb img { width: 100%; height: 100%; object-fit: cover; }

  .news-item { width: 100%; margin-top: 60px; display:flex; flex-direction: column-reverse; }
  .news-item .title { flex-direction: column-reverse; }
  .news-item .text { column-count: 1; }
  .news-item h1 { font-size: 2em; margin-top: 16px;}

  .news-item > div > .title span { text-align: left; margin-bottom: 1.5em }
  .news-item > div > .title h1 { width: 100%; }
  .news-item > div > .text { width: 100%; font-size: 1em; }
  .news-item > div > img { width: 100%; margin-bottom: 2em }



  .section-ugly { width: 100%; margin: 0 0 60px 0; padding: 0 30px; }
  .ugly-image { width: 100%; aspect-ratio: 16 / 6; object-fit: cover; }
  .columns-2 { width: 100%; margin: 30px 0 60px 0; columns: 1; }

  .section-ugly-inline { flex-direction: column; }
  .section-ugly-inline .ugly-image { width: 100%; aspect-ratio: 16 / 6; }
  .section-ugly-inline .columns-2 { width: 100%; margin: 30px 0 0 0;columns: 1; }

  .section-contact { column-count: 1; }
  .section-contact > div { width: 100%; }

  .lightbox-overlay .lightbox-image { position:relative; width:100%; height:calc(100% - 60px); }
  .lightbox-overlay .lightbox-footer { position:relative; width:100%; height: 60px; background-color: #ffffff; 
  display: flex; justify-content: space-between; padding: 18px var(--left-right-padding); }


}


@media only screen and (max-width: 800px) {
  .footer { flex-direction: column; }
}

@media only screen and (max-width: 350px) {
  .section-project-title > div:last-child { display:block; }
}

nav { align-items: flex-start; }
.lang { padding-top: 17px }
.search { /*border: solid 1px red;*/ margin: 0; padding: 14px 0; margin-right: auto; margin-left: 30px; display: flex; justify-content: flex-start; align-items: center; }
.search > img { height: 12px; opacity: 0.5; margin-right: 4px; }
.search form.search-form { padding: 0 }
.search form.search-form > input { border: solid 1px transparent; padding: 6px 12px 6px 4px; width: 130px; 
  text-decoration: none; text-transform: uppercase; font-style: normal; font-weight: 300;
  font-size: .85rem; letter-spacing: 1px; color: var(--nav-font-color); margin-top:1px; background-color: transparent; }
.search form.search-form > input:focus { border: solid 1px #787878; border-radius: 5px; outline: none; }
.search form.search-form > input::placeholder { text-decoration: none; text-transform: uppercase; font-style: normal; font-weight: 300;
  font-size: .85rem; letter-spacing: 1px; color: rgba(35,35,35,0.65); opacity:1 }
.search form.search-form > input:focus::placeholder { opacity: .5; text-transform: capitalize; }

@media only screen and (max-width: 1000px) {
  .search { margin-left: 66px; margin-top:0 }
  nav > ul { padding-bottom:0 }
}