/*GLOBAL*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  /*line-height: 1.15; [> 1 <]*/ /*set in my css*/
  -webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}
/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}
/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,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 */
/*
:root {
  @utopia spaceScale({
    minWidth: 320,
    maxWidth: 1240,
    minSize: 16,
    maxSize: 20,
    positiveSteps: [1.5, 2, 3, 4, 6],
    negativeSteps: [0.75, 0.5, 0.25],
    customSizes: ["s-l"],
    prefix: "space",
  });
}
*/
/*More custom pairs.*/
/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1920,20,1.333,5,3,1366&s=0.75|0.5|0.25,1.5|2|3|4|6,xs-m|2xs-xs|xs-l|s-xl&g=s,l,xl,12 */
:root {--space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);--space-2xs: clamp(0.5625rem, 0.55rem + 0.0625vi, 0.625rem);--space-xs: clamp(0.875rem, 0.8625rem + 0.0625vi, 0.9375rem);--space-s: clamp(1.125rem, 1.1rem + 0.125vi, 1.25rem);--space-m: clamp(1.6875rem, 1.65rem + 0.1875vi, 1.875rem);--space-l: clamp(2.25rem, 2.2rem + 0.25vi, 2.5rem);--space-xl: clamp(3.375rem, 3.3rem + 0.375vi, 3.75rem);--space-2xl: clamp(4.5rem, 4.4rem + 0.5vi, 5rem);--space-3xl: clamp(6.75rem, 6.6rem + 0.75vi, 7.5rem);--space-3xs-2xs: clamp(0.3125rem, 0.25rem + 0.3125vi, 0.625rem);--space-2xs-xs: clamp(0.5625rem, 0.4875rem + 0.375vi, 0.9375rem);--space-xs-s: clamp(0.875rem, 0.8rem + 0.375vi, 1.25rem);--space-s-m: clamp(1.125rem, 0.975rem + 0.75vi, 1.875rem);--space-m-l: clamp(1.6875rem, 1.525rem + 0.8125vi, 2.5rem);--space-l-xl: clamp(2.25rem, 1.95rem + 1.5vi, 3.75rem);--space-xl-2xl: clamp(3.375rem, 3.05rem + 1.625vi, 5rem);--space-2xl-3xl: clamp(4.5rem, 3.9rem + 3vi, 7.5rem);--space-xs-m: clamp(0.875rem, 0.675rem + 1vi, 1.875rem);--space-2xs-xs: clamp(0.5625rem, 0.4875rem + 0.375vi, 0.9375rem);--space-2xs-m: clamp(0.5625rem, 0.3rem + 1.3125vi, 1.875rem);--space-xs-l: clamp(0.875rem, 0.55rem + 1.625vi, 2.5rem);--space-s-xl: clamp(1.125rem, 0.6rem + 2.625vi, 3.75rem);
}
:root {
  --line-height: 1.5rem;
  --header-height: 65vh;
}
:root {
  --text-color: #100f0d;
  --heading-color: #0f4c64;
  --link-color: #0f4c64;
  --link-color-visited: #6093ac;
  --link-color-hover: #6093ac;
}
body {
  background-color: #f3f3ef;
  line-height: var(--line-height);
}
@font-face {
  font-family: "Comfortaa";
  src: url('/static/fonts/Comfortaa-VariableFont_wght.ttf');
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  src: url('/static/fonts/Montserrat-VariableFont_wght.ttf');
}
/*Typescale #1*/
/*
:root {
  @utopia typeScale({
    minWidth: 320,
    maxWidth: 1240,
    minFontSize: 16,
    maxFontSize: 20,
    minTypeScale: 1.2,
    maxTypeScale: 1.25,
    positiveSteps: 5,
    negativeSteps: 2,
    prefix: "step",
  });
}
*/
/*More dramatic typescale #2*/
/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1920,20,1.333,5,3,1366&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {--step-5: clamp(2.7994rem, 2.3071rem + 2.4615vi, 5.2609rem);--step-4: clamp(2.3328rem, 2.01rem + 1.6139vi, 3.9467rem);--step-3: clamp(1.944rem, 1.7407rem + 1.0167vi, 2.9607rem);--step-2: clamp(1.62rem, 1.4998rem + 0.6011vi, 2.2211rem);--step-1: clamp(1.35rem, 1.2868rem + 0.3163vi, 1.6663rem);--step-0: clamp(1.125rem, 1.1rem + 0.125vi, 1.25rem);--step--1: clamp(0.9375rem, 0.9375rem + 0.0002vi, 0.9377rem);--step--2: clamp(0.7035rem, 0.7968rem + -0.0778vi, 0.7813rem);--step--3: clamp(0.5277rem, 0.6757rem + -0.1233vi, 0.651rem);
}
html {
  font-family: "Montserrat", sans-serif;
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--text-color);
}
h1, h2, h3, h4, h5, h6, header, .hero-text {
  font-family: 'Comfortaa';
  color: var(--heading-color);
  line-height: initial;
}
h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}
/*Reset links!*/
/*First, general link styling for the site.*/
a {
  outline-color: transparent;
}
a:link {
  color: var(--link-color);
}
a:hover , a:hover p, a:hover h3{
  color: var(--link-color-hover);
}
/*visited links hover state is inverted to unvisited links.*/
a:visited {
  color: var(--link-color-visited);

  &:hover {
    color: var(--link-color);
  }
}
a:focus {
  text-decoration: none;
  color: var(--link-color);
  background-color:  var(--link-color-visited);
}
a:active {
  background-color:  var(--link-color);
  color: #ffffff;
}
/*override link styling in page header*/
header, footer {
  & a:link {
    /*color: var(--link-color);*/
    color: #f3f3ef;
    text-decoration: none;
  }

  & a:visited {
    color: var(--link-color);
    color: #f3f3ef;
  }

  & a:focus {
    text-decoration: none;
    color: var(--link-color);
    background-color:  var(--link-color-visited);
  }

  & a:hover and :not(#contact) , a:hover:visited, a:hover p, a:hover h3{
    color: #f3f3ef;
    text-decoration: underline;
  }

  & a:active {
    background-color:  var(--link-color);
    color: #6093ac;
  }

  & a.current {
      font-weight: bold;
      text-decoration: underline;
  }
}
/*LAYOUT*/
/*flow: vertical spacing between elements*/
/*.flow * {*/
/*margin-block-end: 0;*/
/*}*/
/*The basics of flowing or flow. All 'joining' elements get a leading margin of line-height.*/
.flow > * + *:not(div, a) {
  --space: var(--line-height);
  margin-block-start:  var(--space);
}
/*Headers should have less space following than preceding*/
h1, h2, h3, h4, h5 {
  margin-block-end: calc(var(--space) * 0.58);
}
/*Now, override the `--space` variable for flow items which should  have more spacing.
 * This is mostly headings.
 * instead of growing from line-height, though, we are going to use the utopia-generated fluid space variables.
 * The key is that the `--space` variable gets reassigned for each type.*/
.flow h1{
  --space: var(--space-xl-2xl);
}
.flow h2{
  --space: var(--space-l-xl);
}
.flow h3 {
  --space: var(--space-l);
}
.flow h4 {
  --space: var(--space-m);
}
/*This special case seems necessary because the * + * selector doesn't match the first item.*/
.flow > :nth-child(1) {
  margin-block-start: var(--space);
}
.flow.tight * {
  --space: 0;
}
.flow > :last-child {
  margin-block-end: var(--space);
}
/*Choose between .wrapper and .layout-grid.*/
/*Set the max width of the body ...
 * incompatible with later grid-based wrapping*/
.wrapper {
  max-width: calc(var(--space-3xl) * 6);
  margin: 0 auto;
}
/*Variables for grid layout*/
:root {
  --padding-inline: 0.2rem;
  --content-max-width: 900px;
  --breakout-max-width: calc(var(--content-max-width) + 500px);

  --breakout-size: calc(    (var(--breakout-max-width) - var(--content-max-width))   );
  --breakout-size-left: calc(  var(--breakout-size) / 2 );
  --breakout-size-right: calc( var(--breakout-size) - var(--breakout-size-left) );

}
/* layout-grid is meant for page-level layouts.
 * As such it makes use of breakpoints, since
 * layout changes are relative to the window size.*/
.layout-grid {
  display: grid;
  grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(auto, var(--breakout-size-left))    /*the auto seems to help it jump when menu jumps*/
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size-right)) [breakout-end]
    /*minmax(0, .5fr) [breakout-end]*/
    minmax(var(--padding-inline), 1fr) [full-width-end];
  grid-template-rows: var(--header-height) 1fr auto;
  min-height: 100vh;


}
.layout-grid > :not(.breakout, .full-width, .hero-grid),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}
.breakout {
  grid-column: breakout;
}
.full-width {
  grid-column: full-width;
}
main, div.full-width, header.full-width, main.full-width, footer.full-width {
  display: grid;
  grid-template-columns: subgrid;
}
main {
  grid-row: 2;
}
footer {
  grid-row: 3;
}
/* A 'sidebar'-like layout (every-layout.dev) with items which should stack or go side-by-side.
 * */
.flipflop {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}
.flipflop > :first-child {
  /*flex-grow: 1;*/
}
.flipflop > :last-child {
  /*flex-basis: 0;*/
  /*flex-grow: 999;*/
  /*min-inline-size: 50%;*/
}
/*A utility class. Maybe move somewhere else?*/
/*For stretching flex items.*/
.stretch {
  justify-content: space-between;
}
/*override stretch for header-sidebar*/
/*.header-sidebar.stretch {*/
/*justify-content: start;*/
/*align-items: start;*/
/*}*/
/*continue the override. To get it to justify to the top,
 * it needs to be flex-direction column when in sidebar mode. */
/*@media screen and (min-width: tkn('breakpoints.menu-side-top')) {*/
/*.header-sidebar.stretch {*/
/*flex-direction: column;*/
/*& > * {*/
/*flex-grow: 0;*/
/*}*/
/*}*/
/*}*/
/*Another utility class: flex alignment.*/
.align-end {
  justify-content: flex-end;
}
.spread-across {
  justify-content: space-between;
}
/*utility: align-items start*/
.tighten-accross {
  align-items: start;
}
.flex {
  display: flex;
}
.flexwrap {
  flex-wrap: wrap;
}
.item-grid {
  /*reset top margin: not a flow container!*/
  & > * + * {
    margin-block-start: 0;
    margin-block-end: 0;
  }


}
.grid-item {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  max-height: 100%;
  min-height: 18rem;

  & * {
    padding: var(--space-xs);
  }

  & > img {
    max-width: 90%;
    padding: 0 var(--space-xs);
    -o-object-fit: cover;
       object-fit: cover;
    max-height: 11rem;
    flex: 0 3 auto;
  }

  @media screen and (min-width: 767px) {

    & > img {
      max-height: 8rem 
    }
  }


  & > h3 {
    font-size: var(--step-1);
    margin: 0; flex: 2 0 2rem;
  }

  & > :last-child {
    flex: 1 0 2rem;
    margin: 0;
    

  }
}
/*.grid-item {*/
/*max-width: fit-content;*/
/*}*/
.fab-four {
  --threshold: 700px;
  --gap: 1rem;
  --gap-spacing: calc(var(--gap) * (var(--items, 3) - 1));
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap);
}
.fab-four > * {
  /*min-width: calc((100% - var(--gap-spacing)) / var(--items));*/
  min-width: 10rem;
  max-width: 15rem;
  width: calc((var(--threshold) - 100%) * var(--threshold));
  /*width: calc((var(--threshold) - 100%) * 10000);*/
  flex-grow: 1;
  flex-basis: 0;
  min-height: 20rem;
}
/*This solves it immediately: https://stackoverflow.com/questions/43129360/css-grid-wrapping*/
.fab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  grid-gap: 1rem;
}
/*BLOCKS -- INTERNAL SPECIALISED STYLING*/
/* 'item-grid' needs its own link styles,
 * because it has an inverted color-scheme.*/
.item-grid {
  & a:link, a:link:visited {
    text-decoration: none;
  }

  & a:visited {
    color: var(--link-color);
  }

  & a:focus {
    text-decoration: none;
    color: var(--link-color);
  }

  & a:hover , a:hover p, a:hover h3{
    color: #f3f3ef;
    text-decoration: none;
  }

  & a:hover .grid-item {
    background-color: #0f4c64;
  }

  & a:active, a:active * {
    background-color:  transparent;
  }
}
.grid-item {
  background-color: #f3f3ef;
  border-radius: 20px;
  box-shadow: 0 1px 1px 1px #8f9295;
}
/*Zoom image as hover effect*/
.item-grid {
& a:hover img{
    transition: all 300ms ease-out;
  }
  & a:hover img {
    transform: scale(1.04)
  }
}
header.full-width {
  display: contents;
}
/*For images part of template, not content*/
.template-img {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
ul.menu {
  background-color: tkn('colors.text.main');
  list-style: none;
}
/*ul.menu li {*/
/*padding: 0 var(--space-2xs);*/
/*}*/
/*Now add flex for menu*/
/*ul.menu {*/
/*display: flex;*/
/*flex-direction: row;*/
/*justify-content: space-between;*/
/*flex-wrap: wrap;*/
/*padding: 0 var(--space-xs);*/
/*}*/
/*Could we make the menu wrap with the same kind of technique?*/
/*
nav {
  max-width: 90%;
}

ul.menu {
  width: 100%;
  --modifier: calc(650px - 100%);
}
ul.menu li {
  min-width: fit-content;
  flex-grow: 1;
  padding: var(--space-xs);
  flex-basis: calc(var(--modifier) * 999);
}


*/
header.full-width  .img-crop {
  grid-row: 1 / span 1;
  grid-column: 1 / span 5;
  max-height: var(--header-height);

}
.header-img {
  width: 100%;
  height: 100%;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
}
/*I think the menu needs some breakpointing ...*/
/*header, not nav*/
nav {
  /*background-color: tkn('colors.deep-sea');*/
  background-color: #1c3e4b;
  color: #f3f3ef;
  width: 100%;
  /*margin-top: var(--space-m);*/
}
ul.menu {
  gap: var(--space-xs-s);

  transition: display 1s, height 1s, width 1s;
}
.current-page {
  font-weight: bold;
  text-decoration: underline;
}
header a.current-page {
  text-decoration: underline;
}
/*pad everything in nav to prevent jump when menu hidden/shown*/
nav > .menu-button-container, nav > ul.menu {
  padding: 0 var(--space-xs);
}
nav > .menu-button-container {
  display: block;
  text-align: center;
}
nav > .menu-button-container {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
#menu-toggle {
  display: none;
}
footer h1 {
  font-size: 1.5rem;
  color: #f3f3ef;
}
footer a {
  text-decoration: none;
}
footer {
  background-color: #0f4c64;
  color: #fff;
  margin-top: var(--space-xl-2xl);
  border-top: 1px solid #6093ac;
  position: sticky;
  /*bottom: calc(-9.5rem - 4.5rem);*/
  bottom: -10.5rem;
  /* To take into account header growing in height */
  @media screen and (max-width: 800px) {
    & {
      bottom: -12.5rem;
    }
  }
  @media screen and (max-width: 463px) {
    & {
      bottom: -14.5rem;
    }
  }
}
.bg-deep-sea {
  background-color: #0f4c64;
}
.bg-light {
  background-color: #6093ac;
  color: #f3f3ef;
}
footer .flow.tight *{
  margin-top: .5rem;
  margin-bottom: .5rem;
}
.wrap {
  flex-wrap: wrap;
}
.small-text {
  font-size: var(--step--2);
}
.foo {
  align-items: center;
}
.bar {
  align-items: end;
  -moz-column-gap: var(--space-m);
       column-gap: var(--space-m);
}
.bar-end {
  justify-content: end;
}
.wave {
  grid-column: full-width / span 1;
  grid-row: 1 / span 1;
  align-self: end;
  max-width: 100vw;
  height: auto;
  max-height: 4rem;
  margin-bottom: -.1rem;
}
.small-wave-fill {
  width: calc(100% + 20px);
  height: 2rem;
  margin-top: -1rem;
  position: relative;
  left: -10px;
  z-index: 9;
}
.small-wave-line {
  width: calc(100% + 20px);
  left: -10px;
  position: absolute;
  bottom: -2.72rem;
  z-index: 10;
}
#svg1 #path2 {
  stroke: blue;
}
/* @media screen and (min-width: tkn('breakpoints.widest')) { */
/* @media screen and (min-width: tkn('breakpoints.menu-side-top')) { */
@keyframes waves {
    from {
      transform:  scaleY(1);
    }

    to {
      transform: scaleY(1.5);
    }
  }
@keyframes ridingWaves {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(var(--wave-height))
    }
  }
@keyframes waves2 {
    from {
      transform:  scaleY(1);
    }

    to {
      transform: scaleY(1.3);
    }
  }
@keyframes ridingWaves2 {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(var(--wave-height-diminished))
    }
  }
/* [>unused<] */
@keyframes waves3 {
    from {
      transform:  scaleY(1);
    }

    to {
      transform: scaleY(1.1);
    }
  }
/* [>unused</* ] */
@keyframes ridingWaves3 {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(var(--wave-height-diminished))
    }
  }
.wave {
    animation-duration: 3s;
    animation-name: waves, waves2;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.45,.05,.55,.95);

  }
main > h1:first-child {
    z-index: 90;
    transform: translate(0,0); /* to get it above the wave animation. */
    /* Below: was for making the header 'ride' the wave */
  /*   --wave-height: calc(-1 * var(--space-xs)); */
  /*   --wave-height-diminished: calc(var(--wave-height) * .3); */
  /*   --wave-height-diminished-again: calc(var(--wave-height) * .1); */
  /*   animation-duration: 3s; */
  /*   animation-name: ridingWaves, ridingWaves2; */
  /*   animation-iteration-count: 4; */
  /*   animation-direction: alternate; */
  /*   animation-timing-function: cubic-bezier(.45,.05,.55,.95); */
  /*   background-color: tkn('colors.sea'); */
  /*   padding: var(--space-s); */
  /*   width: fit-content; */
  }
/* } */
/*wavy top of body*/
/* A rather specific layout: a header which should jump to a sidebar on wide widths,
 * but leave its vertical space for the header (background) image.
 * Make use of grid for this (hence fluid-page.css, and not the 'sidebar pattern' from every-layout.dev with flexbox),
 * because the header still needs to take up space for the background image.*/
/*NOTE! This does assume the grid defined in fluid-page.css.*/
.header-sidebar {
  grid-row: 1;
  grid-column: 3;             /*The header/sidebar in 'contents' column at narrow screens*/
  display: flex;
  flex-direction: column;
  border-top-left-radius: var(--space-2xl);
  border-top-right-radius: var(--space-2xl);
  border-bottom-left-radius: var(--space-2xs);
  border-bottom-right-radius: var(--space-2xs);
  height: -moz-min-content;
  height: min-content;
  width: calc(var(--space-3xl) + 1.5rem);
  position: sticky;
  top: -8.4rem; /*is hard-coded, but since its rem it actually scales pretty well ...*/
  background-color: #ffffff;

  
  & .logo-group {
    width: var(--space-3xl);
    margin: 0 auto;
    height: -moz-min-content;
    height: min-content;
    /*border-radius: 50%;*/
    /*background-color: tkn('colors.mist');*/
    /*position: sticky;*/
  }

  & nav {
    justify-self: end;
    height: -moz-min-content;
    height: min-content;
    align-self: start;
    /*border-bottom-left-radius: var(--space-2xs);*/
    /*border-bottom-right-radius: var(--space-2xs);*/
    width: 100%;
  }
}
.menu-button-container {
    position: sticky;
    top: 0;
    cursor: pointer;
  }
/*.ugly-visual-background-hack {*/
/*display: none;*/
/*}*/
@media screen and (max-width: 1068px) {
  .header-sidebar  {
      width: 120px;      /*this keeps the height fixed so I can position:sticky top:X reliably*/
      & #menu-toggle:not(:checked) ~ ul.menu {
        display: none;
      }

      & nav {
        font-size: 16px;
      }

      & .logo-group {
        width: 90%;

        & .logo-img {
          width: 100%;
        }
      }
      & .template-img {
        padding-top: 14px;
        padding-bottom: 14px;
      }


  }

  nav > .menu-button-container {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  #menu-toggle:checked + .menu-button-container {

    & .menu-closed {
      display: none;
    }

    & .menu-open {
      display: block;
    }
  }
  #menu-toggle:not(:checked) + .menu-button-container {

    & .menu-open {
      display: none;
    }

    & .menu-closed {
      display: block;
    }
  }

}
.ugly-visual-background-hack {
  width: 100%;
  height: -moz-min-content;
  height: min-content;
  overflow: hidden;
  background-color: transparent;
  display: block;
  margin-bottom: -3rem;
  z-index: 10;
}
@media screen and (min-width: 1068px) {
  .ugly-visual-background-hack {
    flex-grow: 4;
    width: 100%;
  }
  .header-sidebar {
  --height: 80vh;
    grid-column: breakout-start / span 1;
    /*could also do 1 / span 2 with a top margin of around 50vh*/
    grid-row: 2;
    /*margin-top: calc(var(--header-height) / 6);*/
    /*border: 1px solid tkn('colors.deck-gray');*/
    /*border-top-left-radius: 20px;*/
    /*border-top-right-radius: 20px;*/
    /*justify-content: flex-start;*/
    justify-content: space-between;
    align-items: center;
    /*top: calc(var(--header-height) / 6); [>position from top same as initial margin<]*/
    bottom: 0; /*position from top same as initial margin*/
    align-self: end;
    margin-bottom: -6rem;
  }

  .header-sidebar {
    
    & .logo-group {
      position: initial;
      margin: 0;
    }
    & .align-end {
      justify-content: start;
    }

    & ul.menu {
      padding:  0 var(--space-xs-s);
    }
    & ul.menu li {
      text-align: left;
      font-size: var(--step--1);
      width: 100%;
    }


    & nav {
      width: 100%;
      padding-bottom: 0;
      /*position: sticky;*/
      /*top: 9rem;*/
    }

    & .menu-button-container {
      display: none;
    }
  }
  

}
/*There's also the issue of min-height.*/
/*@media screen and (max-height: tkn('breakpoints.menu-vert-fit')) {*/
/*.header-sidebar nav {*/
/*width: max-content;*/
/*}*/
/*.header-sidebar nav ul.menu {*/
/*flex-wrap: wrap;*/
/*}*/
/*}*/
/*EXTERNAL*/
/*note: using float now for simplicity, could go to a grid or flex layout for more control.*/
.wikkel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-m);
  /*text-align: center;*/
  line-height: initial;

  & img {
    max-width: 100%;
  }
}
.wikkel.callout {
  font-size: 2rem;
}
.imgfloatright {
  clear: right;

}
figure.imgfloatright img {
  max-width: 100%;
}
@media only screen and (min-width: 650px) {
  .wikkel.naast-elkaar {
    flex-direction: row;
  }

  .wikkel.naast-elkaar.callout {
      align-items: center;
      justify-content: start;
  }

  .wikkel.naast-elkaar > p:nth-child(1) {
    max-width: 50%;
    min-width: 45%;
    flex-grow: 2;
  }

  .imgfloatright {
    float: right;
    max-width: 50%;
  }
  
  .imgfloatright.img-keep-small {
    max-width: 30%;
  }
}
.wikkel-docs h2 {
  border-top: 3px solid #333;
  padding-top: 1rem;
  font-size: 3rem;
}
.wikkel-docs pre {
  background-color: #555;
  color: #fff;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 5px;
  clear: both;
}
.wikkel-note {
  border-left: .3rem solid #be7a61;
  padding-left: var(--space-s);
  margin-block-start: var(--space-l);
}
.groter {
  font-size: var(--step-1);
  line-height: var(--step-2);
}
.grootst {
  font-size: var(--step-3);
  line-height: var(--step-4);
}
.kleur-mist {color:#f3f3ef}
.kleur-zee {color:#6093ac}
.kleur-diep-zee{color:#0f4c64}
.kleur-meerpaal{color:#1c3e4b}
.kleur-wit{color:#ffffff}
.kleur-lucht{color:#c4e0ed}
.kleur-romp-zwart{color:#100f0d}
.kleur-romp-grijs{color:#505256}
.kleur-dek-grijs{color:#8f9295}
.kleur-roest{color:#be7a61}
.kleur-zon{color:#eb6332}
.kleur-morgenlucht{color:#edcfc4}
.achtergrond-mist {background-color:#f3f3ef}
.achtergrond-zee {background-color:#6093ac}
.achtergrond-diep-zee{background-color:#0f4c64}
.achtergrond-meerpaal{background-color:#1c3e4b}
.achtergrond-wit{background-color:#ffffff}
.achtergrond-lucht{background-color:#c4e0ed}
.achtergrond-romp-zwart{background-color:#100f0d}
.achtergrond-romp-grijs{background-color:#505256}
.achtergrond-dek-grijs{background-color:#8f9295}
.achtergrond-roest{background-color:#be7a61}
.achtergrond-zon{background-color:#eb6332}
.achtergrond-morgenlucht{background-color:#edcfc4}
.centreer {
  text-align: center;
}
.wikkel-centreer {
  margin-inline: auto;
  width: -moz-max-content;
  width: max-content;
  padding-inline: var(--space-s);
}
/*third-party content layout*/
.recras-container {
  width: 100%;
  min-height: 500px;
  border: none;
}
/*A single top-level import of design tokens suffices.
 * All @import-ed files have access to the `tkn()` function,
 * because design-tokens processes all @design-tokens declarations
 * in one go and thus they are available to entire final CSS.*/
/*EXCEPTIONS*/
/* PAGE TITLE VERTICAL ALIGNMENT
 * ----------
 * override the spacing set by .flow.
 * modify the top-margin to space the title
 * relative to the wave/top of body.*/
main > h1:first-child {
  margin-top: -.2em !important;
}
/* LOGO IMG SPACING
 * The logo img isn't centered on its own whitespace.
 * So add a little bit of padding to line it up with border.*/
.logo-group {
  padding-right: var(--space-3xs);
}
.logo-img {
  width: var(--space-3xl);

}
/* NAV Z-INDEX
 * -----------
 * Prevent overlay when/if the wave is animated
 * (which changes stacking context)*/
.header-nav {
  z-index: 999;
}
.stick-to-top {
  position: sticky;
  top: 0;

  /*& .logo-group {*/
    /*top: 1rem;*/
  /*}*/
}
/*.snap-to-top {*/
/*top: -2rem;*/
/*}*/
.stick-to-bottom {
  position: sticky;
}
.snap-to-bottom {
 bottom: 0rem;
}
.small-text {
  font-size: var(--step--2);
}
.align-end {
  text-align: end;
}
.pad-outer {
  padding-right: 1rem;
  padding-left: 1rem;
}
.maker-colophon-text {
  color: #100f0d;

  & a, & a:visited {
    color: #100f0d;
  }
}
img {
  max-width: 100%;
}