:root {
  --color-primary: #ae243b;
  --color-black: #202020;
  --color-white: #ffffff;
  --color-grey: #f4f4f4;

  /* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --step--2: clamp(0.79rem, calc(0.79rem + 0.02vw), 0.8rem);
  --step--1: clamp(0.89rem, calc(0.85rem + 0.19vw), 1rem);
  --step-0: clamp(1rem, calc(0.91rem + 0.43vw), 1.25rem);
  --step-1: clamp(1.13rem, calc(0.97rem + 0.76vw), 1.56rem);
  --step-2: clamp(1.27rem, calc(1.03rem + 1.2vw), 1.95rem);
  --step-3: clamp(1.42rem, calc(1.07rem + 1.77vw), 2.44rem);
  --step-4: clamp(1.6rem, calc(1.1rem + 2.52vw), 3.05rem);
  --step-5: clamp(1.8rem, calc(1.1rem + 3.5vw), 3.82rem);

  --col-padding: clamp(1rem, calc(2rem + 2vw), 2vw);

  --content-container-width: 1300px;
}

/*

888888888888                                                                                           88
     88                                                                                                88
     88                                                                                                88
     88       8b       d8  8b,dPPYba,    ,adPPYba,    ,adPPYb,d8  8b,dPPYba,  ,adPPYYba,  8b,dPPYba,   88,dPPYba,   8b       d8
     88       `8b     d8'  88P'    "8a  a8"     "8a  a8"    `Y88  88P'   "Y8  ""     `Y8  88P'    "8a  88P'    "8a  `8b     d8'
     88        `8b   d8'   88       d8  8b       d8  8b       88  88          ,adPPPPP88  88       d8  88       88   `8b   d8'
     88         `8b,d8'    88b,   ,a8"  "8a,   ,a8"  "8a,   ,d88  88          88,    ,88  88b,   ,a8"  88       88    `8b,d8'
     88           Y88'     88`YbbdP"'    `"YbbdP"'    `"YbbdP"Y8  88          `"8bbdP"Y8  88`YbbdP"'   88       88      Y88'
                  d8'      88                         aa,    ,88                          88                            d8'
                 d8'       88                          "Y8bbdP"                           88                           d8'

*/

@font-face {
  font-family: "Circular";
  src: url("/assets/fonts/CircularXXWeb-Bold.woff2") format("woff2"),
    url("/assets/fonts/CircularXXWeb-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Circular";
  src: url("/assets/fonts/CircularXXWeb-Book.woff2") format("woff2"),
    url("/assets/fonts/CircularXXWeb-Book.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

html {
  font-size: 125%;
}

body {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-family: "Circular", sans-serif;
  background: white;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-black);
  font-size: var(--step-0);
  width: 100%;

}


p {
  margin-bottom: 1rem;
  font-size: var(--step-0);
  line-height: 1.3;
}

p.large-text,
.large-text p {
  font-size: var(--step-1);
  line-height: 1.4;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Circular", sans-serif;
  font-weight: 400;
  line-height: 1.3;
}

h1 {
  margin-top: 0;
  font-size: var(--step-4);
  line-height: 1.1;
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
}

h4 {
  font-size: var(--step-2);
}

h5 {
  font-size: var(--step-1);
}

.looks-like-h1 {
  margin-top: 0;
  font-size: var(--step-4) !important;
  line-height: 1.1;
}

.looks-like-h2 {
  font-size: var(--step-3) !important;
}

.looks-like-h3 {
  font-size: var(--step-2) !important;
}

.looks-like-h4 {
  font-size: var(--step-2) !important;
}

.looks-like-h5 {
  font-size: var(--step-1) !important;
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 0px clamp(7px, 1vw, 14px);
  font-weight: 400;
  line-height: 1;
  box-decoration-break: clone;
}

.looks-like-h1 strong,
.looks-like-h2 strong,
.looks-like-h3 strong,
.looks-like-h4 strong,
.looks-like-h5 strong,
.looks-like-h6 strong {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 0px 14px;
  font-weight: 400;
  line-height: 1;
  box-decoration-break: clone;
}

.color-red,
.color-red p {
  color: var(--color-primary);
}

.color-red strong {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-decoration-break: clone;
}

/*br + strong {
  margin-left: calc(-1 * clamp(7px, 1vw, 14px));
}*/

hgroup span {
  text-transform: uppercase;
}

small,
.text_small {
  font-size: var(--step--1);
}

a {
  box-shadow: inset 0 0 0 0 var(--color-primary);
  color: var(--color-primary);
  padding: 0 0.25rem;
  margin: 0 -0.25rem;
  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  display: inline-block;
}

a:hover,
header nav .mainmenu_item_active a {
  color: var(--color-grey);
  box-shadow: inset 600px 0 0 0 var(--color-primary);
}

figure,
figure img {
  width: 100%;
}

figure figcaption {
  font-size: var(--step--2);
  text-align: right;
  line-height: 1.2;
  padding-top: 5px;
}

/*

88
88                                                                ,d
88                                                                88
88           ,adPPYYba,  8b       d8   ,adPPYba,   88       88  MM88MMM
88           ""     `Y8  `8b     d8'  a8"     "8a  88       88    88
88           ,adPPPPP88   `8b   d8'   8b       d8  88       88    88
88           88,    ,88    `8b,d8'    "8a,   ,a8"  "8a,   ,a88    88,
88888888888  `"8bbdP"Y8      Y88'      `"YbbdP"'    `"YbbdP'Y8    "Y888
                             d8'
                            d8'

*/

.content-container {
  display: grid;
  grid-template-columns:
    1fr min(calc(var(--content-container-width) / 2), 50%) min(
      calc(var(--content-container-width) / 2),
      50%
    )
    1fr;
  grid-template-rows: 1fr;
  max-width: calc(var(--content-container-width) + 4rem);
  margin: 0 auto;
}

.col {
  container-type: inline-size;
  padding-bottom: clamp(1rem, calc(2rem + 2vw), 3rem);
  padding-left: var(--col-padding);
  padding-top: clamp(1rem, calc(1rem + 2vw), 3rem);
  padding-right: var(--col-padding);
  z-index: 2;
  grid-row-start: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.has-background-image .col:first-child {
  min-height: min(400px, 100vw);
}

.right-half-has-background-image .col.right-half-col {
  min-height: min(400px, 100vw);
}

.last-child-bottom .col > *:last-child {
  margin-top: auto;
}

.background {
  background-size: cover;
  grid-row-start: 1;
  background-position: center center;
}

@media (min-width: 1024px) {
  .background {
    background-size: cover;
    grid-row-start: 1;
  }
}

/*

88888888888               88  88      I8,        8        ,8I  88           88           88
88                        88  88      `8b       d8b       d8'  ""           88    ,d     88
88                        88  88       "8,     ,8"8,     ,8"                88    88     88
88aaaaa      88       88  88  88        Y8     8P Y8     8P    88   ,adPPYb,88  MM88MMM  88,dPPYba,
88"""""      88       88  88  88        `8b   d8' `8b   d8'    88  a8"    `Y88    88     88P'    "8a
88           88       88  88  88         `8a a8'   `8a a8'     88  8b       88    88     88       88
88           "8a,   ,a88  88  88          `8a8'     `8a8'      88  "8a,   ,d88    88,    88       88
88            `"YbbdP'Y8  88  88           `8'       `8'       88   `"8bbdP"Y8    "Y888  88       88

*/

.full-width-col,
.col-12 {
  grid-column: 1 / 5;
}

.full-width-background {
  grid-column: 1 / 5;
}

.left-half-grey .full-width-background {
  background-color: var(--color-grey);
}

.left-half-red .full-width-background {
  background-color: var(--color-primary);
}

.left-half-grey .full-width-col  * {
  color: var(--color-black);
}

.left-half-red .full-width-col  * {
  color: var(--color-white);
  border-color: var(--color-white);
}

@media (min-width: 1024px) {
  .full-width-col,
  .col-12 {
    grid-column: 2 / 4;
  }

  .full-width-background {
    grid-column: 1 / 5;
  }
}

/*
888888888888  88                                                     ,ad8888ba,
     88       88                                                    d8"'    `"8b                                          ,d
     88       88                                                   d8'        `8b                                         88
     88       88,dPPYba,   8b,dPPYba,   ,adPPYba,   ,adPPYba,      88          88  88       88  ,adPPYYba,  8b,dPPYba,  MM88MMM   ,adPPYba,  8b,dPPYba,  ,adPPYba,
     88       88P'    "8a  88P'   "Y8  a8P_____88  a8P_____88      88          88  88       88  ""     `Y8  88P'   "Y8    88     a8P_____88  88P'   "Y8  I8[    ""
     88       88       88  88          8PP"""""""  8PP"""""""      Y8,    "88,,8P  88       88  ,adPPPPP88  88            88     8PP"""""""  88           `"Y8ba,
     88       88       88  88          "8b,   ,aa  "8b,   ,aa       Y8a.    Y88P   "8a,   ,a88  88,    ,88  88            88,    "8b,   ,aa  88          aa    ]8I
     88       88       88  88           `"Ybbd8"'   `"Ybbd8"'        `"Y8888Y"Y8a   `"YbbdP'Y8  `"8bbdP"Y8  88            "Y888   `"Ybbd8"'  88          `"YbbdP"'
*/

.three-quarters-col,
.col-9 {
  grid-column: 1 / 5;
}

@media (min-width: 1024px) {
  .three-quarters-col > *,
  .col-9 > * {
    max-width: 75%;
  }
}

.three-quarters-background {
  grid-column: 1 / 5;
}

@media (min-width: 1024px) {
  .three-quarters-col,
  .col-9 {
    grid-column: 2 / 4;
  }

  .three-quarters-background {
    grid-column: 1 / 5;
  }
}

/*

88888888ba   88               88                        88        88              88     ad88
88      "8b  ""               88             ,d         88        88              88    d8"
88      ,8P                   88             88         88        88              88    88
88aaaaaa8P'  88   ,adPPYb,d8  88,dPPYba,   MM88MMM      88aaaaaaaa88  ,adPPYYba,  88  MM88MMM
88""""88'    88  a8"    `Y88  88P'    "8a    88         88""""""""88  ""     `Y8  88    88
88    `8b    88  8b       88  88       88    88         88        88  ,adPPPPP88  88    88
88     `8b   88  "8a,   ,d88  88       88    88,        88        88  88,    ,88  88    88
88      `8b  88   `"YbbdP"Y8  88       88    "Y888      88        88  `"8bbdP"Y8  88    88
                  aa,    ,88
                   "Y8bbdP"

*/

.right-half-col,
.col-6:last-child {
  grid-column: 1 / 5;
  grid-row-start: 2;
}

.right-half-background {
  grid-column: 1 / 5;
  grid-row-start: 2;
}

.right-half-grey .col:last-child {
  color: var(--color-black);
}

.right-half-grey .right-half-background {
  background-color: var(--color-grey);
}

.right-half-red .right-half-col * {
  color: var(--color-white);
  border-color: var(--color-white);
}

.right-half-red .right-half-col a.button:before {
  background-color: var(--color-white);
}
.right-half-red .right-half-col a.button:hover {

  color: var(--color-black);
}

.right-half-red .right-half-background {
  background-color: var(--color-primary);
}

@media (min-width: 1024px) {
  .right-half-col,
  .col-6:last-child {
    grid-column: 3 / 4;
    grid-row-start: 1;
    padding-left: 2rem;
  }

  .right-half-background {
    grid-column: 3 / 5;
    grid-row-start: 1;
  }
}

/*

88                          ad88               88        88              88     ad88
88                         d8"      ,d         88        88              88    d8"
88                         88       88         88        88              88    88
88            ,adPPYba,  MM88MMM  MM88MMM      88aaaaaaaa88  ,adPPYYba,  88  MM88MMM
88           a8P_____88    88       88         88""""""""88  ""     `Y8  88    88
88           8PP"""""""    88       88         88        88  ,adPPPPP88  88    88
88           "8b,   ,aa    88       88,        88        88  88,    ,88  88    88
88888888888   `"Ybbd8"'    88       "Y888      88        88  `"8bbdP"Y8  88    88

*/

.left-half-col,
.col-6:first-child {
  grid-column: 1 / 5;
}

.left-half-background {
  grid-column: 1 /5;
}

.left-half-red .left-half-col > * {
  color: var(--color-white);
}

.left-half-red .left-half-background {
  background-color: var(--color-primary);
}

.left-half-grey .left-half-col > * {
  color: var(--color-black);
}

.left-half-grey .left-half-background {
  background-color: var(--color-grey);
}

/* desktop */

@media (min-width: 1024px) {
  .left-half-col,
  .col-6:first-child {
    grid-column: 2 / 3;
    padding-right: 2rem;
  }

  .left-half-background {
    grid-column: 1 / 3;
  }
}

/*


88888888ba
88      "8b                 ,d       ,d
88      ,8P                 88       88
88aaaaaa8P'  88       88  MM88MMM  MM88MMM   ,adPPYba,   8b,dPPYba,
88""""""8b,  88       88    88       88     a8"     "8a  88P'   `"8a
88      `8b  88       88    88       88     8b       d8  88       88
88      a8P  "8a,   ,a88    88,      88,    "8a,   ,a8"  88       88
88888888P"    `"YbbdP'Y8    "Y888    "Y888   `"YbbdP"'   88       88



*/

a.button {
  box-shadow: none;
  background-color: transparent;
  color: var(--color-black);
  padding: 10px 20px;
  text-decoration: none;
  border: 2px solid var(--color-black);
  border-radius: 100vh;
  display: inline-block;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

a.button {
  /* color: #4f4e57; */
}
a.button:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-black);
  transform: translateX(-100%);
  transition: all 240ms ease-in-out;
  z-index: -1;
}
a.button:hover {
  color: var(--color-white);
}
a.button:hover:before {
  transform: translateX(0);
}

.left-half-red .col:first-child a.button {
  color: var(--color-white);
  border: 2px solid var(--color-white);
}
.left-half-red .col:first-child a.button:before {
  background-color: var(--color-white);
}
.left-half-red .col:first-child a.button:hover {
  color: var(--color-primary);
}

.right-half-red .col:last-child a.button {
  color: var(--color-white);
  border: 2px solid var(--color-white);
}
.right-half-red .col:last-child a.button:before {
  background-color: var(--color-white);
}
.right-half-red .col:last-child a.button:hover {
  color: var(--color-primary);
}
.centered-button {
  width: 100%;
  display: flex;
  justify-content: center;
}

/*

888b      88
8888b     88
88 `8b    88
88  `8b   88   ,adPPYba,  8b      db      d8  ,adPPYba,
88   `8b  88  a8P_____88  `8b    d88b    d8'  I8[    ""
88    `8b 88  8PP"""""""   `8b  d8'`8b  d8'    `"Y8ba,
88     `8888  "8b,   ,aa    `8bd8'  `8bd8'    aa    ]8I
88      `888   `"Ybbd8"'      YP      YP      `"YbbdP"'

*/

.news-item {
  display: flex;
  gap: 2rem;
}

@media (max-width: 1024px) {
  .news-item {
    flex-direction: column;
    gap: 1rem;
  }
}

.news-image {
  max-width: min(100%, 400px);
  min-width: 400px;
}

.news-image img {
  object-fit: cover;
}

@media (max-width: 1024px) {
  .news-image {
    max-width: min(100%, 400px);
    min-width: 100%;
  }
}

.news-content h2.looks-like-h3,
.news-content h3 {
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.news-content p.intro {
  font-weight: bold;
}

.news-content p.news-subline {
  font-weight: normal;
  border-top: 1px solid var(--color-black);
  padding-top: var(--step-0);
  font-size: var(--step--1);
}

/*

88888888ba                               88
88      "8b                              ""                            ,d
88      ,8P                                                            88
88aaaaaa8P'  8b,dPPYba,   ,adPPYba,      88   ,adPPYba,   ,adPPYba,  MM88MMM  ,adPPYba,
88""""""'    88P'   "Y8  a8"     "8a     88  a8P_____88  a8"     ""    88     I8[    ""
88           88          8b       d8     88  8PP"""""""  8b            88      `"Y8ba,
88           88          "8a,   ,a8"     88  "8b,   ,aa  "8a,   ,aa    88,    aa    ]8I
88           88           `"YbbdP"'      88   `"Ybbd8"'   `"Ybbd8"'    "Y888  `"YbbdP"'
                                        ,88
                                      888P"
*/

@media (min-width: 1024px) {
  main#projects .content-container:nth-child(odd) .news-image {
    order: 2;
  }

  main#projects .content-container:nth-child(odd) .news-content {
    order: 1;
  }
}

/*

88888888ba                               88
88      "8b                              ""                            ,d
88      ,8P                                                            88
88aaaaaa8P'  8b,dPPYba,   ,adPPYba,      88   ,adPPYba,   ,adPPYba,  MM88MMM
88""""""'    88P'   "Y8  a8"     "8a     88  a8P_____88  a8"     ""    88
88           88          8b       d8     88  8PP"""""""  8b            88
88           88          "8a,   ,a8"     88  "8b,   ,aa  "8a,   ,aa    88,
88           88           `"YbbdP"'      88   `"Ybbd8"'   `"Ybbd8"'    "Y888
                                        ,88
                                      888P"
*/

main#project .content-container .right-half-col {
  min-height: 40vh;
}
main#project .news-image {
  float: right;
  margin: 0px 0px 0px var(--step-1);
}

@media (max-width: 1024px) {
  main#project .news-image {
    float: none;
    margin: 0px;
  }
}

main#project .news-subline {
  border-top: 0px;
}

main#project h2 {
  margin-top: var(--step-2);

  margin-bottom: var(--step-0);
}

/*


88888888ba   88                           88
88      "8b  88                           88                                                  ,d
88      ,8P  88                           88                                                  88
88aaaaaa8P'  88   ,adPPYba,    ,adPPYba,  88   ,d8    ,adPPYb,d8  88       88   ,adPPYba,   MM88MMM   ,adPPYba,
88""""""8b,  88  a8"     "8a  a8"     ""  88 ,a8"    a8"    `Y88  88       88  a8"     "8a    88     a8P_____88
88      `8b  88  8b       d8  8b          8888[      8b       88  88       88  8b       d8    88     8PP"""""""
88      a8P  88  "8a,   ,a8"  "8a,   ,aa  88`"Yba,   "8a    ,d88  "8a,   ,a88  "8a,   ,a8"    88,    "8b,   ,aa
88888888P"   88   `"YbbdP"'    `"Ybbd8"'  88   `Y8a   `"YbbdP'88   `"YbbdP'Y8   `"YbbdP"'     "Y888   `"Ybbd8"'
                                                              88
                                                              88

*/

blockquote {
  display: flex;
  flex-direction: column;
}

blockquote p {
  font-size: var(--step-0);
  line-height: 1.4;
  font-weight: normal;
}

blockquote .cite-image {
  width: 100px;
  height: 100px;
  border-radius: 100vh;
  overflow: hidden;
}
blockquote .cite-image img {
  object-fit: cover;
}

blockquote cite {
  font-style: normal;
  display: flex;
  flex-direction: row;
  align-items: center;
}

blockquote cite .cite-name {
  font-weight: bold;
  display: block;
}

blockquote cite .cite-title {
}

blockquote cite .cite-author {
  border-left: 2px solid var(--color-primary);
  padding-left: 1rem;
  margin-left: 1rem;
}

@container (min-width: 700px) {
  blockquote {
    flex-direction: row;
  }

  blockquote p {
    margin-right: 2rem;
    font-size: var(--step-2);
  }

  blockquote cite .cite-author {
    margin-top: 40px;
    border-left: 0px;
    padding-left: 0px;
    margin-left: 0px;
  }

  blockquote cite .cite-author:before {
    border-top: 2px solid var(--color-primary);
    content: "";
    height: 1px;
    display: block;
    width: 50px;
    padding-bottom: 10px;
  }

  blockquote .cite-image {
    width: 200px;
    height: 200px;
    border-radius: 100vh;
    overflow: hidden;
  }

  blockquote cite {
    font-style: normal;
    display: flex;
    flex-direction: column;
  }
}

/*
88        88  88888888ba
88        88  88      "8b
88        88  88      ,8P
88aaaaaaaa88  88aaaaaa8P'
88""""""""88  88""""88'
88        88  88    `8b
88        88  88     `8b
88        88  88      `8b
*/

hr {
  grid-column: 2 / 4;
  grid-row-start: 1;
  height: 1px;
  margin: 0px var(--col-padding);
  border: 0px;
  border-top: 1px solid var(--color-black);
}

hr.red-hr {
  border-top: 1px solid var(--color-primary);
}

/*
88        88                                   88
88        88                                   88
88        88                                   88
88aaaaaaaa88   ,adPPYba,  ,adPPYYba,   ,adPPYb,88   ,adPPYba,  8b,dPPYba,
88""""""""88  a8P_____88  ""     `Y8  a8"    `Y88  a8P_____88  88P'   "Y8
88        88  8PP"""""""  ,adPPPPP88  8b       88  8PP"""""""  88
88        88  "8b,   ,aa  88,    ,88  "8a,   ,d88  "8b,   ,aa  88
88        88   `"Ybbd8"'  `"8bbdP"Y8   `"8bbdP"Y8   `"Ybbd8"'  88
*/

header {
  flex-shrink: 0;
}

header .col {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: row;
}

header .header-container {
  max-width: var(--content-container-width);
  margin: 0 auto;
  padding: var(--step-0) var(--col-padding);

  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.logo {
  text-indent: -99999px;
  width: auto;
  height: min(150px, 12vh);
  box-shadow: none;
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 99;
}

.logo svg {
  width: 100%;
  max-height: 100%;
}

.logo:hover {
  box-shadow: none;
}

input#checkbox_toggle,
input.submenu_toggle {
  display: none;
}

.nav-box {
  width: 100%;
}

nav ul {
  display: flex;
  list-style: none;
  display: flex;
  gap: 15px;
  font-size: var(--step--2);
}

header nav > ul > li {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  line-height: 1;
  margin-bottom: -7px;
}

header nav .mainmenu_item a,
header nav .mainmenu_item label,
header nav .submenu_item a {
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 9px 10px 5px 10px;
}
header nav .mainmenu_item label {
  color: var(--color-primary);
  position: relative;
}

header nav .mainmenu_item_active a {
  color: var(--color-white);
}

header ul.subnav .submenu_item_active a {
  color: var(--color-white);
  text-decoration: underline;
}

header nav .mainmenu_item label:hover {
  cursor: pointer;
}

header nav .mainmenu_item label:hover:after {
  content: "";
  position: absolute;

/*  top: 54%;
  left: 50%;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: var(--color-grey);
  border-width: 15px;
  margin-left: -15px;
  */

  width: 26px;
  height: 26px;
  border: 0;
  left:0px;
  background: var(--color-grey);
  left: calc(50% - 13px);
  aspect-ratio: 1;
  transform: rotate(45deg);
  top: 40px;
}

header nav > ul > li.spacer,
.menuitem_type-spacer{
  margin-left: auto;
}

header nav a {
  color: var(--color-primary);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 9px 10px 5px 10px;
}
@media (min-width: 1025px) {

/*  .menuitem_type-submenu:hover .subnav-container {
    display:block;
  }*/
  header nav .subnav-container {
    position: absolute;
    top: calc(min(150px, 12vh) + 2 * var(--step-0));
    background: var(--color-primary);
    margin: 0;
    padding: 0;
    z-index: 999;
    /*  extend the background ribbon over the original size of the list */
    box-shadow: -10vw 0px 0px 0px var(--color-primary),
      -20vw 0px 0px 0px var(--color-primary),
      -30vw 0px 0px 0px var(--color-primary),
      -40vw 0px 0px 0px var(--color-primary),
      -50vw 0px 0px 0px var(--color-primary),
      -60vw 0px 0px 0px var(--color-primary),
      -70vw 0px 0px 0px var(--color-primary),
      -80vw 0px 0px 0px var(--color-primary),
      -90vw 0px 0px 0px var(--color-primary),
      -100vw 0px 0px 0px var(--color-primary),
      10vw 0px 0px 0px var(--color-primary),
      20vw 0px 0px 0px var(--color-primary),
      30vw 0px 0px 0px var(--color-primary),
      40vw 0px 0px 0px var(--color-primary),
      50vw 0px 0px 0px var(--color-primary),
      60vw 0px 0px 0px var(--color-primary),
      70vw 0px 0px 0px var(--color-primary),
      80vw 0px 0px 0px var(--color-primary),
      90vw 0px 0px 0px var(--color-primary),
      100vw 0px 0px 0px var(--color-primary);
    width: 100%;
  }

  header ul.subnav {
    position: relative;
    width: auto;
    padding: 0;
    display: inline-flex;
    /*
    margin-left: min(calc(-50% + var(--char-count) * 1ch + 21px), -40%);
    */
    /*
    margin-left: calc(-50% + var(--char-count) * 1ch + 21px);
    */
    margin-left: -4ch;
  }

  header ul.subnav a {
    color: var(--color-grey);
    padding: var(--step--2) var(--step--1);
  }


  header ul.subnav:after {
    bottom: 100%;
    /* left: 50%; */

    left: calc(var(--char-count) * 1ch / 2 + 11px + 4ch);
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: var(--color-primary);
    border-width: 15px;
    margin-left: -15px;
    margin-left: -15px;
  }

  .subnav-container {
    display: none;
  }

  input.submenu_toggle:checked ~ .subnav-container {
    display: block;
  }


}

/* header nav > ul > li:last-child a {
  padding-right: 4px;
} */
/*
header nav li:after {
  content: "|";
  padding-left: 15px;
  color: var(--color-primary);
}

header nav li:last-child:after {
  content: "";
  padding-left: 0px;
} */

@media (max-width: 1024px) {
  body.nav_open {
    height: 100vh;
    overflow-y: hidden;
    padding-right: 15px; /* Avoid width reflow */
    position: fixed;
  }
  header nav {
    position: fixed;
    right: 0px;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
    bottom: 0px;
    z-index: -1;
  }

  header nav > ul {
    position: absolute;

    width: auto;
    display: none;
    z-index: -1;
    height: 100vh;
    width: 100vw;
    top: 0rem;
    right: 0px;
    margin: 0;
    padding: 0.5rem;
    background-color: var(--color-primary);
    border-radius: 5px;
    padding-top: calc(min(150px, 10vh) + 30px);
  }

  header nav .subnav {
    margin: 0;
    padding: 0;
  }

  header nav .mainmenu_item label {
    color: var(--color-black);
    text-decoration: underline;
    display: none;
  }

  header nav > ul > li {
    display: block;
    width: 100%;
    text-align: right;
    line-height: 2;
    margin-bottom: 5px;
    text-align: center;
    border-bottom: none;
  }

  header nav > ul > li:first-child {
    border-top: none;
  }

  header nav a {
    padding: 3px 10px 2px 10px;
    color: var(--color-white);
    font-size: var(--step-1);
  }
  header nav ul li:last-child {
    margin-bottom: 0px;
  }

  header nav li:last-child a {
    padding-right: 10px;
  }

  input[type="checkbox"]:checked ~ nav ul {
    display: block;
    z-index:999;
  }

    input[type="checkbox"]:checked ~ nav {
        z-index:999;

    }


  .hamburger {
    display: block;
    position: absolute;
    height: 27px;
    width: 27px;
    cursor: pointer;
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    margin-left: auto;
    top: 80px;
    right: 30px;
    z-index: 99999;
  }

  .line {
    position: absolute;
    display: block;
    background: var(--color-primary);
    width: 28px;
    height: 0.15rem;
    border-radius: 0.2rem;
    left: 0;
    transition: all 0.6s cubic-bezier(0.5, 0.1, 0, 1.2);
  }

  .line-1 {
    top: 0;
  }

  .line-2 {
    top: 7px;
    width: 24px;
    transform: translateX(2px);
    -webkit-transform: translateX(2px);
  }

  .line-3 {
    top: 14px;
  }

  input[type="checkbox"]:checked ~ label .line-1 {
    top: 0px;
    width: 28px;
    transform: translateX(-11px) rotate(-45deg) translateY(12px);
    background: var(--color-white);
  }

  input[type="checkbox"]:checked ~ label .line-2 {
    opacity: 0;
    background: var(--color-white);
  }

  input[type="checkbox"]:checked ~ label .line-3 {
    top: 14px;
    width: 28px;
    transform: translateX(-8px) rotate(45deg) translateY(-8px);
    background: var(--color-white);
  }
}

/*
88b           d88              88
888b         d888              ""
88`8b       d8'88
88 `8b     d8' 88  ,adPPYYba,  88  8b,dPPYba,
88  `8b   d8'  88  ""     `Y8  88  88P'   `"8a
88   `8b d8'   88  ,adPPPPP88  88  88       88
88    `888'    88  88,    ,88  88  88       88
88     `8'     88  `"8bbdP"Y8  88  88       88
*/

/* this pushes the footer down */
main {
  flex: 1 0 auto;
  position: relative;
  z-index: 1;
  padding-top: calc(2*var(--step-4));
}

/*
88888888888
88                                       ,d
88                                       88
88aaaaa       ,adPPYba,    ,adPPYba,   MM88MMM   ,adPPYba,  8b,dPPYba,
88"""""      a8"     "8a  a8"     "8a    88     a8P_____88  88P'   "Y8
88           8b       d8  8b       d8    88     8PP"""""""  88
88           "8a,   ,a8"  "8a,   ,a8"    88,    "8b,   ,aa  88
88            `"YbbdP"'    `"YbbdP"'     "Y888   `"Ybbd8"'  88
*/

footer {
  flex-shrink: 0;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 1rem 0;
  font-size: var(--step--1);
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  margin-top: var(--step-3);
}

footer p {
  font-size: var(--step--1);
}

footer h2 {
  font-size: var(--step--1);
  border-bottom: 1px solid var(--color-white);
  display: block;
  width: 100%;
  text-transform: uppercase;
}

footer ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  column-count: 2;
  column-gap: clamp(1rem, 1vw, 3rem);
  width: 100%;
}

footer li {
  width: 100%;
}

footer a {
  color: var(--color-white);
}

/*

  ,ad8888ba,
 d8"'    `"8b                              ,d                               ,d
d8'                                        88                               88
88              ,adPPYba,   8b,dPPYba,   MM88MMM  ,adPPYYba,   ,adPPYba,  MM88MMM
88             a8"     "8a  88P'   `"8a    88     ""     `Y8  a8"     ""    88
Y8,            8b       d8  88       88    88     ,adPPPPP88  8b            88
 Y8a.    .a8P  "8a,   ,a8"  88       88    88,    88,    ,88  "8a,   ,aa    88,
  `"Y8888Y"'    `"YbbdP"'   88       88    "Y888  `"8bbdP"Y8   `"Ybbd8"'    "Y888


*/

.contact {
  display: flex;
  gap: var(--step--1);
}

.contact-image {
  min-width: 30%;
  max-width: 30%;
}

.contact-image img {
  object-fit: cover;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
}

.contact p {
  font-size: var(--step--1);
}

/*  icons: https://icones.js.org/collection/charm?s=phone */
.contact .contact-link {
  display: flex;
  gap: var(--step--2);
}



/***
 *
 *    88           88                           88
 *    88           88                           88
 *    88           88                           88
 *    88,dPPYba,   88   ,adPPYba,    ,adPPYba,  88   ,d8
 *    88P'    "8a  88  a8"     "8a  a8"     ""  88 ,a8"
 *    88       d8  88  8b       d8  8b          8888[
 *    88b,   ,a8"  88  "8a,   ,a8"  "8a,   ,aa  88`"Yba,
 *    8Y"Ybbd8"'   88   `"YbbdP"'    `"Ybbd8"'  88   `Y8a
 *
 *
 *
 *             88  88                         88
 *             88  ""                         88
 *             88                             88
 *     ,adPPYb,88  88  ,adPPYYba,  ,adPPYba,  88,dPPYba,    ,adPPYba,   8b      db      d8
 *    a8"    `Y88  88  ""     `Y8  I8[    ""  88P'    "8a  a8"     "8a  `8b    d88b    d8'
 *    8b       88  88  ,adPPPPP88   `"Y8ba,   88       88  8b       d8   `8b  d8'`8b  d8'
 *    "8a,   ,d88  88  88,    ,88  aa    ]8I  88       88  "8a,   ,a8"    `8bd8'  `8bd8'
 *     `"8bbdP"Y8  88  `"8bbdP"Y8  `"YbbdP"'  88       88   `"YbbdP"'       YP      YP
 *
 *
 */

/*
essential styles:
these make the slideshow work
*/


.block-slideshow {
  width: 100%;
  position: relative;
}

.block-slideshow .slide {
  line-height:0;
  width: 100%;
  height: 100%;

  position: absolute;
  top:0;
  left:0;


  opacity: 0;
  z-index: 1;
  background-size: cover;
  background-color: black;
  background-position: center;
}

.block-slideshow.diashow-automatic .slide{
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}

.block-slideshow .slide img {
  width: 100%;
  object-fit:cover;
  height: auto;
}

.block-slideshow .slide.showing {
  opacity: 1;
  z-index: 2;
}