@charset "UTF-8";
/* the following mixins have arguments */
/* You can give row grid lines the same names as column grid lines thereby creating named areas e.g. main. Didn't do that here though. */
/* The same background on all pages 
    with the exception of the 
    home page and the menu page */
/* 
    The breakpoints here can't be 
    set as css variables and then
    used in a media query –
    it just doesn't work :-( 
    Must use SASS variables.
*/
/* 1200px */
/* 900px */
/* in _base.scss 1 rem = 9px, 9/16 = 56.25% */
/* 800px */
/* 600px */
/* in _base.scss 1 rem = 8px, 8/16 = 50% */
/* 414px widest iPhone */
/* 370px */
/* 
    THIS IS A DESKTOP FIRST WEBSITE
    DO THE OPPOSITE FOR A MOBILE FIRST WEBSITE
    NOTE that the order is important 
        (speak out the code and logic to yourself)
        … i.e. when designing Desktop First, 
        list the larger before the smaller
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
:root {
  color-scheme: light dark;
  /* both supported */
  --color-a-lighter: #fdf1ed;
  --color-a-light: #fceae3;
  --color-a-mid: #f7c8b6;
  --color-a-dark: #973711;
  --color-b-light: #eef2f7;
  --color-b-mid: #547dac;
  --color-b-dark: #3a5778;
  --color-c-mid: #4082d4;
  --color-c-dark: #163962;
  --color-c-darker: #0d223a;
  --color-tertiary: #444;
}

body {
  /* THE DEFAULT PROPERTIES WHEN THE USER'S 
     OPERATING SYSTEM APPEARANCE IS SET TO LIGHT */
  /* extremes */
  --color-brightest: #fafafa;
  --color-darkest: #000000;
  /* site logo */
  --color-logo-site: var(--color-a-dark);
  /* settings light dark indictor */
  --toggle-light-dark-counter: rotate(0deg);
  --toggle-light-dark-text: "Light ";
  /* carousel */
  --slick-dots: #ddd;
  /* page-01-start headers */
  --page-headers-text: var(--color-a-dark);
  /* page idents */
  --page-idents-text: var(--color-a-dark);
  /* text color 1 */
  --color-text-1: var(--color-b-dark);
  /* text color 2 */
  --color-text-2: var(--color-darkest);
  /* href color a */
  --color-href-1: var(--color-c-dark);
  /* headings w backgrounds */
  --heading-bg-1: var(--color-text-1);
  --color-text-3: var(--color-brightest);
  /* button default */
  --color-button-1: var(--color-c-dark);
  --color-button-border: var(--color-button-1);
  --width-button: 4px;
  --color-button-text: var(--color-brightest);
  --color-button-text-hover: var(--color-button-1);
  --color-button-bg-linear: linear-gradient(to top,
          var(--color-button-1) 0%, var(--color-button-1) 50%, white 50%, white);
  --color-button-bg-radial: radial-gradient(white,
          white 33%, var(--color-button-1) 33%);
  --faq-answer-bg: var(--color-b-dark);
  --faq-answer-text: var(--color-b-light);
  /* background 1 */
  --gradient-1: radial-gradient(ellipse farthest-corner,
          var(--color-a-lighter) 0%, var(--color-a-lighter) 50%, var(--color-a-mid));
  /* form indicators */
  --color-form-steps-blank: #ccc;
  --color-form-steps-finish: #4CAF50;
  --color-form-steps-onboard-active: var(--color-darkest);
}

body.dark-theme {
  /* PROPERTIES WHEN THE USER'S OPERATING 
     SYSTEM APPEARANCE IS SET TO LIGHT BUT 
     THEY DECIDE TO SWITCH TO A DARK THEME */
  /* extremes */
  --color-brightest: #fdfaf2;
  --color-darkest: #000000;
  /* site logo */
  --color-logo-site: var(--color-a-mid);
  /* settings light dark indictor */
  --toggle-light-dark-counter: rotate(180deg);
  --toggle-light-dark-text: "Dark ";
  /* carousel */
  --slick-dots: #999;
  /* page-01-start headers */
  --page-headers-text: var(--color-a-mid);
  /* page idents */
  --page-idents-text: var(--color-a-mid);
  /* text color 1 */
  --color-text-1: var(--color-b-light);
  /* text color 2 */
  --color-text-2: var(--color-brightest);
  /* href color a */
  --color-href-1: var(--color-brightest);
  /* headings w backgrounds */
  --heading-bg-1: var(--color-text-1);
  --color-text-3: var(--color-c-dark);
  /* button positive */
  --color-button-1: var(--color-brightest);
  --color-button-border: var(--color-button-1);
  --width-button: 2px;
  --color-button-text: var(--color-button-1);
  --color-button-text-hover: var(--color-c-dark);
  --color-button-bg-linear: linear-gradient(to top,
          transparent 0%, transparent 50%, var(--color-brightest) 50%, var(--color-brightest));
  --color-button-bg-radial: radial-gradient(var(--color-brightest),
          var(--color-brightest) 33%, transparent 33%);
  --faq-answer-bg: var(--color-b-light);
  --faq-answer-text: var(--color-b-dark);
  /* background 1 – dark mode */
  --gradient-1: radial-gradient(ellipse farthest-corner,
          var(--color-c-mid), var(--color-c-darker));
  /* form indicators */
  --color-form-steps-blank: #eee;
  --color-form-steps-finish: #5fdb63;
  --color-form-steps-onboard-active: var(--color-brightest);
}

@media (prefers-color-scheme: dark) {
  /* THE DEFAULT PROPERTIES WHEN THE USER'S 
     OPERATING SYSTEM APPEARANCE IS SET TO DARK */
  body {
    /* COPIED FROM THE body.dark-theme DARK STYLES SET ABOVE */
    /* extremes */
    --color-brightest: #fdfaf2;
    --color-darkest: #000000;
    /* site logo */
    --color-logo-site: var(--color-a-mid);
    /* settings light dark indictor */
    --toggle-light-dark-counter: rotate(180deg);
    --toggle-light-dark-text: "Dark ";
    /* carousel */
    --slick-dots: #999;
    /* page-01-start headers */
    --page-headers-text: var(--color-a-mid);
    /* page idents */
    --page-idents-text: var(--color-a-mid);
    /* text color 1 */
    --color-text-1: var(--color-b-light);
    /* text color 2 */
    --color-text-2: var(--color-brightest);
    /* href color a */
    --color-href-1: var(--color-brightest);
    /* headings w backgrounds */
    --heading-bg-1: var(--color-text-1);
    --color-text-3: var(--color-c-dark);
    /* button positive */
    --color-button-1: var(--color-brightest);
    --color-button-border: var(--color-button-1);
    --width-button: 2px;
    --color-button-text: var(--color-button-1);
    --color-button-text-hover: var(--color-c-dark);
    --color-button-bg-linear: linear-gradient(to top,
            transparent 0%, transparent 50%, var(--color-brightest) 50%, var(--color-brightest));
    --color-button-bg-radial: radial-gradient(var(--color-brightest),
            var(--color-brightest) 33%, transparent 33%);
    --faq-answer-bg: var(--color-b-light);
    --faq-answer-text: var(--color-b-dark);
    /* background 1 – dark mode */
    --gradient-1: radial-gradient(ellipse farthest-corner,
            var(--color-c-mid), var(--color-c-darker));
    /* form indicators */
    --color-form-steps-blank: #eee;
    --color-form-steps-finish: #5fdb63;
    --color-form-steps-onboard-active: var(--color-brightest);
  }
  /* PROPERTIES WHEN THE USER'S OPERATING 
     SYSTEM APPEARANCE IS SET TO DARK BUT 
     THEY DECIDE TO SWITCH TO A LIGHT THEME */
  body.light-theme {
    /* COPIED FROM THE DEFAULT body STYLES SET ABOVE */
    /* extremes */
    --color-brightest: #fafafa;
    --color-darkest: #000000;
    /* site logo */
    --color-logo-site: var(--color-a-dark);
    /* settings light dark indictor */
    --toggle-light-dark-counter: rotate(0deg);
    --toggle-light-dark-text: "Light ";
    /* carousel */
    --slick-dots: #ddd;
    /* page-01-start headers */
    --page-headers-text: var(--color-a-dark);
    /* page idents */
    --page-idents-text: var(--color-a-dark);
    /* text color 1 */
    --color-text-1: var(--color-b-dark);
    /* text color 2 */
    --color-text-2: var(--color-darkest);
    /* href color a */
    --color-href-1: var(--color-c-dark);
    /* headings w backgrounds */
    --heading-bg-1: var(--color-text-1);
    --color-text-3: var(--color-brightest);
    /* button default */
    --color-button-1: var(--color-c-dark);
    --color-button-border: var(--color-button-1);
    --width-button: 4px;
    --color-button-text: var(--color-brightest);
    --color-button-text-hover: var(--color-button-1);
    --color-button-bg-linear: linear-gradient(to top,
            var(--color-button-1) 0%, var(--color-button-1) 50%, white 50%, white);
    --color-button-bg-radial: radial-gradient(white,
            white 33%, var(--color-button-1) 33%);
    --faq-answer-bg: var(--color-b-dark);
    --faq-answer-text: var(--color-b-light);
    /* background 1 */
    --gradient-1: radial-gradient(ellipse farthest-corner,
            var(--color-a-lighter) 0%, var(--color-a-lighter) 50%, var(--color-a-mid));
    /* form indicators */
    --color-form-steps-blank: #ccc;
    --color-form-steps-finish: #4CAF50;
    --color-form-steps-onboard-active: var(--color-darkest);
  }
}
/* 
Browsers are optimised for animating two properites, 
opacity and transform.
*/
@view-transition {
  navigation: auto;
}
@-webkit-keyframes page-move-out {
  from {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes page-move-out {
  from {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@-webkit-keyframes page-move-in {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes page-move-in {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
::view-transition-old(root) {
  -webkit-animation: 0.4s ease-in both page-move-out;
          animation: 0.4s ease-in both page-move-out;
}

::view-transition-new(root) {
  -webkit-animation: 0.4s ease-in both page-move-in;
          animation: 0.4s ease-in both page-move-in;
}

img.lazy {
  opacity: 0;
}

img:not(.initial) {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

img.initial,
img.loaded,
img.error {
  opacity: 1;
}

img:not([src]) {
  visibility: hidden;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes move-down-1 {
  0% {
    -webkit-transform: translateY(-2rem);
            transform: translateY(-2rem);
  }
  100% {
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
}
@keyframes move-down-1 {
  0% {
    -webkit-transform: translateY(-2rem);
            transform: translateY(-2rem);
  }
  100% {
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
}
@-webkit-keyframes move-down-2 {
  0% {
    -webkit-transform: translateY(-4rem);
            transform: translateY(-4rem);
  }
  100% {
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
}
@keyframes move-down-2 {
  0% {
    -webkit-transform: translateY(-4rem);
            transform: translateY(-4rem);
  }
  100% {
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
}
.page-load-10 {
  -webkit-animation: fade-in, move-down-1;
          animation: fade-in, move-down-1;
  -webkit-animation-duration: 0.4s, 0.2s;
          animation-duration: 0.4s, 0.2s;
  -webkit-animation-timing-function: ease-in, cubic-bezier(0.18, 1.05, 0.73, 1.8);
          animation-timing-function: ease-in, cubic-bezier(0.18, 1.05, 0.73, 1.8);
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}

.page-load-20 {
  -webkit-animation: fade-in, move-down-1;
          animation: fade-in, move-down-1;
  -webkit-animation-duration: 0.8s, 0.4s;
          animation-duration: 0.8s, 0.4s;
  -webkit-animation-timing-function: ease-in, cubic-bezier(0.18, 1.05, 0.73, 1.8);
          animation-timing-function: ease-in, cubic-bezier(0.18, 1.05, 0.73, 1.8);
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}

.fade-in {
  -webkit-animation: fade-in 1s ease infinite;
          animation: fade-in 1s ease infinite;
}

@-webkit-keyframes pulse-external {
  0%, 8% {
    -webkit-transform: translateY(0.3rem) scale(1);
            transform: translateY(0.3rem) scale(1);
  }
  1% {
    -webkit-transform: translateY(0.3rem) scale(1.2);
            transform: translateY(0.3rem) scale(1.2);
  }
}

@keyframes pulse-external {
  0%, 8% {
    -webkit-transform: translateY(0.3rem) scale(1);
            transform: translateY(0.3rem) scale(1);
  }
  1% {
    -webkit-transform: translateY(0.3rem) scale(1.2);
            transform: translateY(0.3rem) scale(1.2);
  }
}
@-webkit-keyframes pulse-external-big {
  0%, 8% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  1% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@keyframes pulse-external-big {
  0%, 8% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  1% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@-webkit-keyframes jog {
  0%, 48% {
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
  16% {
    -webkit-transform: translateY(1.6rem);
            transform: translateY(1.6rem);
  }
}
@keyframes jog {
  0%, 48% {
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
  16% {
    -webkit-transform: translateY(1.6rem);
            transform: translateY(1.6rem);
  }
}
@-webkit-keyframes tribble {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-1.6deg);
            transform: rotate(-1.6deg);
  }
  75% {
    -webkit-transform: rotate(1.6deg);
            transform: rotate(1.6deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes tribble {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-1.6deg);
            transform: rotate(-1.6deg);
  }
  75% {
    -webkit-transform: rotate(1.6deg);
            transform: rotate(1.6deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes spread {
  0%, 94% {
    -webkit-box-shadow: 0 0 0 0 var(--color-button-border);
            box-shadow: 0 0 0 0 var(--color-button-border);
  }
  100% {
    -webkit-box-shadow: 0 0 0 2px var(--color-button-border);
            box-shadow: 0 0 0 2px var(--color-button-border);
  }
}
@keyframes spread {
  0%, 94% {
    -webkit-box-shadow: 0 0 0 0 var(--color-button-border);
            box-shadow: 0 0 0 0 var(--color-button-border);
  }
  100% {
    -webkit-box-shadow: 0 0 0 2px var(--color-button-border);
            box-shadow: 0 0 0 2px var(--color-button-border);
  }
}
@-webkit-keyframes spread-rev {
  0%, 94% {
    -webkit-box-shadow: 0 0 0 0 var(--color-brightest);
            box-shadow: 0 0 0 0 var(--color-brightest);
  }
  100% {
    -webkit-box-shadow: 0 0 0 2px var(--color-brightest);
            box-shadow: 0 0 0 2px var(--color-brightest);
  }
}
@keyframes spread-rev {
  0%, 94% {
    -webkit-box-shadow: 0 0 0 0 var(--color-brightest);
            box-shadow: 0 0 0 0 var(--color-brightest);
  }
  100% {
    -webkit-box-shadow: 0 0 0 2px var(--color-brightest);
            box-shadow: 0 0 0 2px var(--color-brightest);
  }
}
@-webkit-keyframes alert {
  0%, 90% {
    background-color: red;
  }
  100% {
    background-color: darkred;
  }
}
@keyframes alert {
  0%, 90% {
    background-color: red;
  }
  100% {
    background-color: darkred;
  }
}
@-webkit-keyframes pop {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pop {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

/* 
    Having inherit for box-sizing here 
    is considered better practice 
    because it allows for exceptions. 
*/
html {
  /* 
  This defines 1 rem
  1 rem = 10px: 10px/16px = 62.5%
  We use 10px because it is so easy to calculate
  This strategy is widely used but will not work below IE 9
  We don't set it using pixels because it would override 
       …any user browser settings e.g. sight impaired users
  However, we can assume most browser's default font size 
       …is 16px so 62.5% of that is 10px. Voila.
  We could use ems but it is a pain because they are relative 
       …to the parent of a font or parent of a length
  */
  font-size: 62.5%;
}

/* 
THIS IS A DESKTOP FIRST WEBSITE
DO THE OPPOSITE FOR A MOBILE FIRST WEBSITE
Above, we don't use a phone media query 'cos  
    we would set it at 50% and the tab-port 
    already covers that and all sizes below
NOTE that the order is important 
    (speak out the code and logic to yourself)
    … i.e. when designing Destop First, 
    list the larger before the smaller
*/
body {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow-x: hidden;
  /* To prevent horizonatal browser scroll bars appearing while items are kept slightly off-canvas as they wait to make an appearance once the user scrolls down to that point in the document. */
}

::-moz-selection {
  background-color: black;
  color: var(--color-brightest);
}

::selection {
  background-color: black;
  color: var(--color-brightest);
}

@font-face {
  font-family: "museo700";
  src: url("fonts/museo700-regular.woff2") format("woff2"), url("fonts/museo700-regular.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "museo900_italic";
  src: url("fonts/museo-900-italic.woff2") format("woff2"), url("fonts/museo-900-italic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
}
body {
  color: var(--color-text-1);
}

body,
.page-headers .heading-two {
  -webkit-font-smoothing: antialiased;
  /* Stop font looking a bit 'fat' */
  -moz-osx-font-smoothing: grayscale;
  /* Stop font looking a bit 'fat' */
  font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: normal;
  line-height: 1.35;
  /* 
      SEE base partial for global rem definition
      font-size: SEE variables partial for default font size
  */
}

@media only screen and (max-width: 37.5em) {
  #page-01-start .page-headers .heading-one, #page-01-start .page-headers .heading-two {
    text-align: center;
  }
}
.page-headers .heading-two {
  margin-bottom: 0;
  font-size: 2.15rem;
  text-transform: uppercase;
}

.page-headers .heading-one,
.page-headers .heading-two {
  color: var(--page-headers-text);
}

.heading-one,
.heading-two,
.heading-three,
.heading-four {
  position: relative;
  font-family: "museo700", "Rockwell", "Lucida Bright", "Palatino", serif;
  font-style: normal;
  font-weight: bold;
  text-transform: none;
  grid-column: 1/-1;
}

.heading-one {
  margin: 0 0 1.6rem 0;
  font-size: 3.6rem;
}

.heading-two {
  margin: 0 0 1.6rem 0;
  font-size: 2.9rem;
  line-height: 3.4rem;
}

.heading-three {
  display: inline-block;
  justify-self: left;
  /* Constrain background to content width */
  padding: 0.6rem 1rem;
  background-color: var(--heading-bg-1);
  color: var(--color-text-3);
  font-size: 2.4rem;
}

.section-faq-detail .heading-four {
  display: inline-block;
  justify-self: left;
  /* Constrain background to content width */
  margin: 2rem 0 1.6rem 0;
  padding: 0.6rem 1rem;
  background-color: var(--heading-bg-1);
  color: var(--color-text-3);
  border: none;
}

.heading-four {
  font-size: 1.8rem;
  display: inline-block;
  justify-self: left;
  /* Constrain background to content width */
  padding: 0.6rem 1rem;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--color-text-1);
}

.heading-five {
  margin-bottom: 1rem;
  font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--color-text-2);
}

.paragraph,
p {
  font-size: 1.33rem;
}
.paragraph:not(:last-child),
p:not(:last-child) {
  margin-bottom: 1rem;
}
.paragraph strong,
p strong {
  font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: bold;
}

.lead {
  font-size: 1.58rem;
}

.powerful {
  margin: 0 0 1.6rem 0;
  color: var(--color-text-1);
  font-family: "museo700", "Rockwell", "Lucida Bright", "Palatino", serif;
  font-style: normal;
  font-weight: bold;
  font-size: 2.4rem;
}

a {
  color: var(--color-href-1);
  text-decoration: underline;
}

a.clear {
  color: currentColor;
  text-decoration: none;
}

.a-style {
  color: var(--color-href-1);
  text-decoration: underline;
}

a.external {
  display: inline-block;
  /* Necessary to prevent after element wrapping */
  position: relative;
  padding-right: 1.2rem;
  margin-right: 0.8rem;
  /* To maintain the icon within the container width you need to compensate for the margin-right on the icon by adding padding right (same amount) to the text. */
  /* Prevent after element breaking onto new line – partly based on https://stackoverflow.com/questions/16100956/prevent-after-element-from-wrapping-to-next-line#25857961 */
}
a.external::after {
  position: absolute;
  display: inline-block;
  margin-left: 6px;
  /* Make the icon overflow the container, and the line is going to break only when the text meets the end of the line. [ Somehow, with position absolute, I think I've removed the need for this. ] */
  width: 1.2rem;
  height: 1.2rem;
  content: "";
  background-image: url(../img/icon-link.svg);
  background-size: cover;
  -webkit-transform: translateY(0.3rem);
          transform: translateY(0.3rem);
  -webkit-transform-origin: 0 12px;
          transform-origin: 0 12px;
}
@supports ((-webkit-mask-image: url()) or (mask-image: url())) {
  a.external::after {
    background-color: currentColor;
    -webkit-mask-image: url(../img/icon-link.svg);
    -webkit-mask-size: cover;
    mask-image: url(../img/icon-link.svg);
    mask-size: cover;
    background-image: none;
  }
}
a.external:hover::after {
  -webkit-animation: pulse-external 4s 0.2s infinite;
          animation: pulse-external 4s 0.2s infinite;
}

.list-bulleted,
.list-numbered {
  font-size: 1.3rem;
}

.list-bulleted {
  /* Don't be tempted to try negative vertical margins
      they'll get clipped in e.g. macOS Safari */
}
.list-bulleted__item {
  position: relative;
  /* Create a positioning context */
  margin: 0 0 1rem 1.6rem;
  /* Give each list item a left margin 
                      to make room for the numbers */
  /* padding: .4rem 1rem; Add some spacing around the content */
  list-style: none;
  /* Disable the normal bullet */
}
.list-bulleted__item::before {
  /* Position and style the bullet */
  position: absolute;
  /* Some space between the number and the content in browsers that support
          generated content but not positioning it (Camino 2 is one example) */
  margin-right: 8px;
  width: 0.8rem;
  height: 0.8rem;
  left: -1.6rem;
  top: 0.4rem;
  content: "";
  background-image: url(../img/bullet.svg);
  background-size: cover;
}
@supports ((-webkit-mask-image: url()) or (mask-image: url())) {
  .list-bulleted__item::before {
    background-color: var(--color-text-1);
    -webkit-mask-image: url(../img/bullet.svg);
    -webkit-mask-size: cover;
    mask-image: url(../img/bullet.svg);
    mask-size: cover;
    background-image: none;
  }
}
.list-bulleted__item ul li {
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
  list-style: none;
}

.list-numbered {
  counter-reset: myCounter 0;
  /* Initiate a counter, starting at 1 */
  /* Don't be tempted to try negative vertical margins
      they'll get clipped in e.g. macOS Safari */
}
.list-numbered__item {
  position: relative;
  /* Create a positioning context */
  margin: 0 0 1rem 3.2rem;
  /* Give each list item a left margin 
                      to make room for the numbers */
  /* padding: .4rem 1rem; Add some spacing around the content */
  list-style: none;
  /* Disable the normal bullet */
}
.list-numbered__item:before {
  content: counter(myCounter);
  /* Use the counter as content */
  counter-increment: myCounter 1;
  /* Increment the counter by 1 */
  /* Position and style the number */
  position: absolute;
  top: 0rem;
  /* WARNING – Setting top to a negative amount will break the multi-column layout on most macOS browsers with the exception of Firefox */
  left: -3.2rem;
  width: 2.2rem;
  font-family: "museo700", "Rockwell", "Lucida Bright", "Palatino", serif;
  font-style: normal;
  font-weight: bold;
  /* Some space between the number and the content in browsers that support
     generated content but not positioning it (Camino 2 is one example) */
  margin-right: 8px;
  font-size: 4rem;
  line-height: 0.95;
  /* MUST use a line-height of less than 1 rather than changing position top */
  /* counter would be out of position with the cascaded line-height */
  text-align: right;
}
.list-numbered__item ul li {
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
  list-style: none;
}

.quote {
  margin-left: 3.6rem;
  position: relative;
  font-family: "museo900_italic", "Rockwell", "Lucida Bright", "Palatino", serif;
  font-style: italic;
  font-weight: bold;
  font-size: 1.65rem;
  line-height: 1.36;
}
.quote__author {
  margin-bottom: 0 !important;
  font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.35rem;
}
.quote__author-role {
  font-size: 1.1rem;
  font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: normal;
}
.quote + .quote__footer {
  margin-left: 3.6rem;
}

.quote:first-child::before {
  content: "“";
  position: absolute;
  top: -1rem;
  left: -3.6rem;
  line-height: 1;
  font-size: 6.4rem;
  font-family: "museo900_italic", "Rockwell", "Lucida Bright", "Palatino", serif;
  font-style: italic;
  font-weight: bold;
  z-index: 1;
}

blockquote a {
  color: var(--color-text-1);
  text-decoration: none;
}
blockquote a:hover {
  color: var(--color-href-1);
  text-decoration: underline;
}

.screengrab-fig-text {
  margin-top: 8px;
  font-size: 1.5rem;
}

.screengrab-fig-text-b {
  font-size: 1em;
  text-transform: uppercase;
}

/*
It is normal practice to use important 
with utility classes that you want to use 
to override anything else
*/
.u-span-full {
  grid-column: full-start/-1;
}

.u-span-main {
  grid-column: main-start/-1;
}

.u-span-2 {
  grid-column: span 2;
}
@media only screen and (max-width: 37.5em) {
  .u-span-2 {
    grid-column: 1;
  }
}

.u-span-3 {
  grid-column: span 3;
}
@media only screen and (max-width: 37.5em) {
  .u-span-3 {
    grid-column: 1;
  }
}

.u-align-self-start {
  -ms-flex-item-align: start;
      align-self: start;
}

.u-align-self-end {
  -ms-flex-item-align: end;
      align-self: end;
}

.u-always-col-1 {
  grid-column: 1;
}

@media only screen and (max-width: 56.25em) {
  .u-spacer-wide {
    display: none;
  }
}

@media only screen and (max-width: 37.5em) {
  .u-spacer-medium {
    display: none;
  }
}

.u-hidden {
  display: none;
}

@media only screen and (max-width: 37.5em) {
  .u-hidden-small {
    display: none;
  }
}

@media only screen and (max-width: 25.875em) {
  .u-hidden-tiny {
    display: none;
  }
}

/*
It is normal practice to use important 
with utility classes that you want to use 
to override anything else
*/
.u-mt-0 {
  margin-top: 0 !important;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-mb-0_5 {
  margin-bottom: 0.5rem !important;
}

.u-mb-1 {
  margin-bottom: 1rem !important;
}

.u-mt-2_4 {
  margin-top: 2.4rem;
}

.u-mb-2_4 {
  margin-bottom: 2.4rem;
}

.u-multicol-x3 {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3; /* maximum */
  /* you can have either or both of these properties */
  -webkit-column-width: 15rem;
     -moz-column-width: 15rem;
          column-width: 15rem; /* minumum */
  -webkit-column-gap: 4rem;
     -moz-column-gap: 4rem;
          column-gap: 4rem;
}

.u-multicol-x2 {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2; /* maximum */
  /* you can have either or both of these properties */
  -webkit-column-width: 15rem;
     -moz-column-width: 15rem;
          column-width: 15rem; /* minumum */
  -webkit-column-gap: 4rem;
     -moz-column-gap: 4rem;
          column-gap: 4rem;
}

.u-multicol-x2sm {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2; /* maximum */
  /* you can have either or both of these properties */
  -webkit-column-width: 12rem;
     -moz-column-width: 12rem;
          column-width: 12rem; /* minumum */
  -webkit-column-gap: 1.6rem;
     -moz-column-gap: 1.6rem;
          column-gap: 1.6rem;
}
.u-multicol-x2sm .list-bulleted__item {
  margin-bottom: 0.5rem;
}

.u-multicol-rule {
  -webkit-column-rule: 3px dotted var(--color-text-1);
     -moz-column-rule: 3px dotted var(--color-text-1);
          column-rule: 3px dotted var(--color-text-1);
}

ol > li, ul > li, .u-multicol-x2 > p {
  /* prevent list items breaking over columns */
  /* widows and orphans work on paged content only */
  /* display: inline-block;
      and break-inside prevent column break
      within an elements but remove bullets */
  -webkit-column-break-inside: avoid; /* Chrome, Safari */
  page-break-inside: avoid; /* Theoretically FF 20+ */
  -moz-column-break-inside: avoid;
       break-inside: avoid-column; /* IE 11 */
  break-inside: avoid; /* Firefox */
}

/* not Firefox or Safari */
/* in fact, it even fails to become one column even in Chrome,
thereby breaking the layout on mobiles */
.u-center-text {
  text-align: center !important;
}

.u-underline {
  text-decoration: underline;
}

.u-capitals {
  text-transform: uppercase;
}

.u-unset {
  text-transform: unset;
}

.codedirection {
  unicode-bidi: bidi-override;
  direction: rtl;
}

.icon-go,
.icon-prev,
.icon-next,
.flag__icon,
.icon-logo-sm {
  width: 2.2rem;
  height: 2.2rem;
}

.control__pager {
  grid-column: full-start/-1;
  align-self: center;
  /* Change of design to circumvent Safari iOS
      … not respecting 100vh */
  text-align: center;
  color: transparent;
  font-size: 0;
  line-height: 0;
  z-index: 20;
}

.control__pager a {
  padding: 32px 64px;
}

.control__pager a:hover .icon-pager {
  opacity: 1;
  -webkit-animation: jog 4s ease-in-out infinite;
          animation: jog 4s ease-in-out infinite;
}

.icon-pager {
  width: 2.4rem;
  height: 2.4rem;
  fill: var(--color-text-1);
  opacity: 0.5;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

svg {
  max-width: 20rem;
  max-height: 20rem;
}

/* 
The button class definitions should include the 
pseudo class because it is a special state of a selector.
The &, is there so that these styles will be applied to 
a button that isn't an anchor, e.g. a button in a form 
*/
.btn {
  /* See also the .control--phone version of .btn--contact in _page-menu.scss */
}
.btn, .btn:link, .btn:visited {
  padding: 0.8rem 1.4rem;
  border-width: var(--width-button);
  border-style: solid;
  border-color: var(--color-button-border);
  border-radius: 0.8rem;
  outline: none;
  background-color: transparent;
  background-image: var(--color-button-bg-linear);
  background-size: 220% 220%;
  background-position: 0% 98%;
  /* 98% to fix a hairline misplacement in iOS */
  color: var(--color-button-text);
  font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: background-position 0.2s cubic-bezier(0.18, 1.09, 0.24, 1.07);
  transition: background-position 0.2s cubic-bezier(0.18, 1.09, 0.24, 1.07);
}
.btn > svg, .btn:link > svg, .btn:visited > svg {
  fill: var(--color-button-text);
}
.btn:active, .btn:focus {
  outline: none;
}
@media (hover: hover) {
  .btn:hover {
    color: var(--color-button-text-hover);
    -webkit-box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.25), 4px 4px 6px rgba(0, 0, 0, 0.25);
            box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.25), 4px 4px 6px rgba(0, 0, 0, 0.25);
    background-position: 0% 0%;
  }
  .btn:hover > svg {
    fill: var(--color-button-text-hover);
  }
}
.btn--contact, .btn--contact:link, .btn--contact:visited {
  position: relative;
  margin-right: 1.6rem;
  font-size: 18px;
  /* We don't want this button to scale */
  letter-spacing: 0.2rem;
  z-index: 500;
  -webkit-animation: spread 8s linear infinite alternate;
          animation: spread 8s linear infinite alternate;
}
.btn--contact:hover, .btn--contact:link:hover, .btn--contact:visited:hover {
  -webkit-animation: tribble 0.05s 1.2s infinite;
          animation: tribble 0.05s 1.2s infinite;
}
.btn--minor {
  font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: normal;
  text-transform: none;
}
.btn--round, .btn--round:link, .btn--round:visited {
  position: relative;
  /* Without this position: relative, the button is 
  only hoverable and clickable on its border in 
  non-Chromium Microsoft Edge 44 */
  width: 40px;
  /* A minimum touchable size */
  height: 40px;
  border-radius: 50%;
  background-image: var(--color-button-bg-radial);
  background-size: 220% 220%;
  background-position: 50% 145%;
  font-size: 0;
  line-height: 0;
}
.btn--round > svg, .btn--round:link > svg, .btn--round:visited > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media (hover: hover) {
  .btn--round:hover {
    background-position: 50% 50%;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }
}
@media only screen and (hover: hover) and (max-width: 56.25em) {
  .btn--round:hover {
    background-position: 50% 145%;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .btn--round:hover > svg {
    fill: var(--color-button-text);
  }
}

.btn-rev {
  /* Immutable because it will always be on a dark background */
}
.btn-rev, .btn-rev:link, .btn-rev:visited {
  padding: 0.8rem 1.4rem;
  border-width: 2px;
  border-style: solid;
  border-color: var(--color-brightest);
  border-radius: 0.8rem;
  outline: none;
  background-color: transparent;
  background-image: -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(50%, transparent), color-stop(50%, var(--color-c-dark)), to(var(--color-c-dark)));
  background-image: linear-gradient(to top, transparent 0%, transparent 50%, var(--color-c-dark) 50%, var(--color-c-dark));
  background-size: 220% 220%;
  background-position: 0% 98%;
  /* 98% to fix a hairline misplacement in iOS */
  color: var(--color-brightest);
  font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: background-position 0.2s cubic-bezier(0.18, 1.09, 0.24, 1.07);
  transition: background-position 0.2s cubic-bezier(0.18, 1.09, 0.24, 1.07);
}
.btn-rev > svg, .btn-rev:link > svg, .btn-rev:visited > svg {
  fill: var(--color-brightest);
}
@media (hover: hover) {
  .btn-rev:hover {
    color: var(--color-button-text-hover);
    -webkit-box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.25), 4px 4px 6px rgba(0, 0, 0, 0.25);
            box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.25), 4px 4px 6px rgba(0, 0, 0, 0.25);
    color: var(--color-brightest);
    background-position: 0% 0%;
  }
  .btn-rev:hover > svg {
    fill: var(--color-brightest);
  }
}
.btn-rev--round, .btn-rev--round:link, .btn-rev--round:visited {
  width: 40px;
  /* A minimum touchable size */
  height: 40px;
  border-radius: 50%;
  background-image: radial-gradient(var(--color-c-dark), var(--color-c-dark) 33%, transparent 33%);
  background-size: 220% 220%;
  background-position: 50% 145%;
  font-size: 0;
  line-height: 0;
}
@media (hover: hover) {
  .btn-rev--round:hover {
    background-position: 50% 50%;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }
}

.btn-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, -webkit-max-content));
  grid-template-columns: repeat(auto-fit, minmax(80px, max-content));
  grid-gap: 32px;
  justify-items: start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.icon-logo {
  max-height: 100% !important;
  -webkit-transition: all 0.08s ease-in;
  transition: all 0.08s ease-in;
}
.icon-logo--philips {
  fill: #0B5ED7;
}
.icon-logo--this-site {
  fill: var(--color-a-dark);
}
.icon-logo--jext {
  fill: #2D3446;
}
.icon-logo--powerpoint, .icon-logo--macos, .icon-logo--pcos, .icon-logo--macos-and-pcos {
  fill: var(--color-brightest);
}
.icon-logo--linkedin {
  fill: var(--color-text-1);
}
.icon-logo--linkedin:hover {
  fill: #0966C1;
}

.card {
  background: rgba(0, 0, 0, 0.6);
}
.card > * {
  color: var(--color-brightest);
}
.card--study {
  grid-column: full;
  grid-row: 2;
  width: 38%;
  margin-top: 4.8rem;
  padding: 2.4rem;
  display: grid;
  grid-gap: 2.4rem;
  grid-template-columns: 10.4rem 1fr;
  z-index: 10;
}
@media only screen and (max-width: 56.25em) {
  .card--study {
    grid-row: 3;
    width: 100%;
    margin-top: 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .card--study {
    grid-row: 4;
  }
}
@media only screen and (max-width: 25.875em) {
  .card--study {
    grid-row: 4;
    grid-template-columns: 8rem 1fr;
    grid-gap: 1.6rem;
  }
}
.card--carousel {
  padding: 2.4rem;
  position: absolute;
  top: 50%;
  width: 100%;
  max-height: 100%;
  /* to allow autoflow */
  overflow-y: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: grid;
  grid-gap: 2.4rem;
  grid-template-columns: 10.4rem 1fr;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
@media only screen and (max-width: 23.125em) {
  .card--carousel {
    grid-template-columns: 8rem 1fr;
  }
}
.card--studies {
  /* Size varies responsively. Text reflow prevented when the content is revealed on hover by using javascript to set the div containing the text the same width as the hover-triggering outer container. */
  padding: 1.6rem;
  position: absolute;
  top: 50%;
  max-height: 100%;
  overflow-y: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: grid;
  grid-gap: 1.6rem;
  grid-template-columns: 8rem 1fr;
}
.card--studies .flag-text {
  font-size: 1rem;
}

.studies-cards-content {
  position: relative;
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}
.studies-cards-content img {
  width: 100%;
  display: block;
  /* removes sliver of white space */
}
@media (hover: hover) {
  .studies-cards-content:hover {
    -webkit-box-shadow: -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 3px rgba(0, 0, 0, 0.2);
            box-shadow: -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 3px rgba(0, 0, 0, 0.2);
  }
  .studies-cards-content:hover .studies-card-outer {
    width: 100%;
  }
}

.studies-card-outer {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc(8rem + 1.6rem * 2);
  overflow: hidden;
  -webkit-transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.tip-card {
  padding: 2.4rem;
  background: var(--color-brightest);
}
.tip-card .lead,
.tip-card p {
  color: var(--color-b-dark);
}
.tip-card .lead + p strong {
  color: var(--color-darkest);
}
.tip-card a {
  color: var(--color-c-dark);
}

.teaser {
  -ms-flex-item-align: start;
      align-self: start;
  /* Prevent stretching within grid cell */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2.4rem;
  background-color: var(--color-b-mid);
  color: #fff;
}
.teaser .heading-two,
.teaser .heading-three {
  color: #fff;
}
.teaser .flag {
  margin-right: 1.6rem;
}
.teaser .flag-text {
  background-color: var(--color-brightest);
}
.teaser .flag-text,
.teaser .flag-icon {
  width: 10.4rem;
}
.teaser .heading-two {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 140px;
          flex: 1 1 140px;
}
.teaser .heading-three {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  margin-bottom: 1rem;
  padding: 0;
  background-color: transparent;
}
.teaser p:last-of-type {
  margin-bottom: 2rem;
}

.flag {
  display: grid;
  grid-template-rows: repeat(2, -webkit-min-content);
  grid-template-rows: repeat(2, min-content);
  grid-gap: 1.6rem;
}
.flag--study {
  grid-template-rows: repeat(2, -webkit-min-content) 1fr;
  grid-template-rows: repeat(2, min-content) 1fr;
  grid-gap: 1.6rem;
}
.flag--tips {
  width: 8rem;
  float: right;
  margin-left: 2.4rem;
  grid-gap: 0.8rem;
}
.flag--tips .flag-text,
.flag--tips .flag-icon {
  background-color: var(--color-tertiary);
}
@media (min-width: 37.5em) and (max-width: 75em) {
  .flag--tips {
    float: none;
    margin-left: 0;
  }
}
.flag--tips-detail {
  width: 10.4rem;
  grid-gap: 0.8rem;
}
.flag--tips-detail .flag-text,
.flag--tips-detail .flag-icon {
  background-color: var(--color-tertiary);
}
@media only screen and (max-width: 56.25em) {
  .flag--tips-detail {
    display: none;
  }
}

.flag-text {
  padding: 0.8rem 0.25rem;
  background-color: var(--color-brightest);
  font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.05rem;
  color: var(--color-a-dark);
}
@media only screen and (max-width: 25.875em) {
  .flag-text {
    width: 8rem;
    font-size: 1rem;
  }
}
.flag-text--study {
  font-size: 1rem;
}
.flag-text--tips {
  color: var(--color-brightest);
  text-transform: none;
  font-size: 1.1rem;
}

.flag-icon {
  height: 10.4rem;
  max-width: 10.4rem;
  /* Width was 100% but did not work in non-Chromium Edge 44 */
  margin-bottom: 2rem;
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--color-brightest);
}
@media only screen and (max-width: 25.875em) {
  .flag-icon {
    height: 8rem;
    max-width: 8rem;
  }
}
.flag-icon--small {
  height: 8rem;
  max-width: 8rem;
  /* Width required for non-Chromium Edge 44 */
  padding: 0.8rem;
}

.flag-btn--study {
  justify-self: center;
  -ms-flex-item-align: end;
      align-self: end;
  margin-bottom: 1rem;
}
.flag-btn--study > svg {
  width: 20px;
  height: 20px;
  -webkit-transform: translate(-0.6rem, 0.1rem);
          transform: translate(-0.6rem, 0.1rem);
}

@media only screen and (min-width: 56.25em) {
  #page-05-a-1-philips .ident__text,
  #page-05-b-1-this-site .ident__text,
  #page-05-c-1-jext .ident__text {
    display: none;
  }
}

@media only screen and (max-width: 37.5em) {
  #page-01-start .ident__text {
    display: none;
  }
}

.ident {
  grid-row: ymain;
  display: grid;
  grid-gap: 2.4rem;
  -webkit-box-ordinal-group: -2;
      -ms-flex-order: -3;
          order: -3;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  justify-items: center; /* needed with long text */
  -ms-flex-line-pack: start;
      align-content: start;
}
.ident__text {
  text-align: center;
  color: var(--page-idents-text);
}
@media only screen and (max-width: 56.25em) {
  .ident__text {
    text-align: left;
  }
}
@media only screen and (max-width: 37.5em) {
  .ident__text {
    text-align: right;
  }
}
.ident__text--pagenumber {
  display: block;
  font-family: "museo700", "Rockwell", "Lucida Bright", "Palatino", serif;
  font-style: normal;
  font-weight: bold;
  font-size: 14.4rem;
  line-height: 1;
  opacity: 0.05;
}
@media only screen and (max-width: 56.25em) {
  .ident__text--pagenumber {
    display: inline;
    margin-right: 0.8rem;
    font-size: 4.77rem;
    vertical-align: middle;
    opacity: 0.16;
  }
}
@media only screen and (max-width: 37.5em) {
  .ident__text--pagenumber {
    display: block;
    font-size: 3rem;
    vertical-align: baseline;
  }
}
.ident__text--pageclass {
  display: block;
  margin-bottom: 1rem;
  font-family: "museo700", "Rockwell", "Lucida Bright", "Palatino", serif;
  font-style: normal;
  font-weight: bold;
  font-size: 5rem;
  line-height: 1;
  opacity: 0.07;
}
@media only screen and (max-width: 56.25em) {
  .ident__text--pageclass {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 3rem;
    opacity: 0.16;
  }
}
@media only screen and (max-width: 37.5em) {
  .ident__text--pageclass {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 2.8rem;
  }
}
.ident__text--pagename {
  display: block;
  font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  line-height: 1.4;
  opacity: 0.1;
}
@media only screen and (max-width: 56.25em) {
  .ident__text--pagename {
    display: inline;
    vertical-align: middle;
    opacity: 0.2;
  }
}
@media only screen and (max-width: 37.5em) {
  .ident__text--pagename {
    display: block;
    line-height: 1.2;
  }
}
.ident__text--pagename-short {
  font-size: 3.2rem;
}
@media only screen and (max-width: 56.25em) {
  .ident__text--pagename-short {
    font-size: 2.88rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .ident__text--pagename-short {
    font-size: 2.25rem;
  }
}
.ident__text--pagename-long {
  font-size: 2.1rem;
}
.ident__text--pagename-vlong {
  font-size: 2.1rem;
}
@media only screen and (max-width: 56.25em) {
  .ident__text--pagename-vlong {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .ident__text--pagename-vlong {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .ident {
    grid-row: auto;
    grid-column: span 2;
    grid-auto-flow: column;
    grid-gap: 3.2rem;
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media only screen and (max-width: 37.5em) {
  .ident {
    grid-column: span 1;
    grid-gap: 3rem;
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media only screen and (min-width: 56.25em) {
  .page-case-study .ident > .ident__text {
    display: none;
  }
}
@media only screen and (max-width: 56.25em) {
  .page-case-study .ident__text--2 {
    display: none;
  }
}

.logo-site {
  fill: var(--color-logo-site);
  width: 19.2rem;
  height: 6.3rem;
  -webkit-transform: translateY(0.8rem);
          transform: translateY(0.8rem);
}
@media only screen and (max-width: 56.25em) {
  .logo-site {
    width: 18rem;
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
}
@media only screen and (max-width: 37.5em) {
  .logo-site {
    width: 14rem;
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
}

@media only screen and (max-width: 37.5em) {
  #page-01-start .logo-site {
    width: 22rem;
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
  #page-01-start .ident {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.page-headers {
  grid-column: span 3;
}
@media only screen and (min-width: 56.25em) {
  .page-headers {
    grid-column: span 2;
  }
}
@media only screen and (max-width: 37.5em) {
  .page-headers {
    grid-column: span 1;
  }
}

.page-intro {
  grid-column: span 2;
}
@media only screen and (max-width: 37.5em) {
  .page-intro {
    grid-column: span 1;
  }
}

.section-intro {
  grid-column: span 2;
}
@media only screen and (max-width: 37.5em) {
  .section-intro {
    grid-column: span 1;
  }
}

.divider-section {
  grid-column: 1/-1;
  position: relative;
  margin: 0.4rem 0 1.6rem;
  overflow: visible;
  border-style: solid;
  border-color: var(--color-text-1);
  border-width: 4px 0 0 0;
}
.divider-section::before, .divider-section::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 2px;
  height: 12px;
  background-color: var(--color-text-1);
}
.divider-section::before {
  left: 0;
}
.divider-section::after {
  right: 0;
}

/* 
Pseudo elements must have content and display.
*/
/* 
Technically no browser should support pseudo elements 
on self-closing elements (<br/>, <hr/>, <input /> etc) 
as they have no “internal space” to hold them but
….some do so nevertheless.
*/
.divider-theme {
  grid-column: 1/-1;
  margin: 0.4rem 0 1.6rem;
  border-style: dotted;
  border-color: var(--color-text-1);
  border-width: 3px 0 0 0;
}

.boxout-a-x2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: inherit;
  -ms-flex-line-pack: start;
      align-content: start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.boxout-a {
  padding: 1.6rem;
  border: 3px dotted var(--color-text-1);
}

.boxout-b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 1.6rem 0 2.4rem;
  padding: 1.2rem;
  border: 3px dotted var(--color-text-1);
  background-clip: padding-box;
  color: var(--color-a-dark);
  background-color: rgba(255, 255, 255, 0.8);
}
.boxout-b:hover .icon-external-big {
  -webkit-animation: pulse-external-big 4s 0.2s infinite;
          animation: pulse-external-big 4s 0.2s infinite;
}
.boxout-b .text-grouping {
  padding-right: 0.8rem;
}
.boxout-b .heading-five {
  color: var(--color-c-dark);
  text-decoration: underline;
}

.icon-external-big {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  margin-left: auto;
  background-color: darkcyan;
  background-image: url(../img/icon-link.svg);
  background-size: cover;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
@supports ((-webkit-mask-image: url()) or (mask-image: url())) {
  .icon-external-big {
    background-color: var(--color-c-dark);
    -webkit-mask-image: url(../img/icon-link.svg);
    -webkit-mask-size: cover;
    mask-image: url(../img/icon-link.svg);
    mask-size: cover;
    background-image: none;
  }
}

.question {
  position: relative;
  margin-bottom: 1rem;
  border-top: 2px solid var(--color-text-1);
  border-bottom: 2px solid var(--color-text-1);
}

.question.open {
  border-top: 2px solid var(--color-tertiary);
  border-bottom: 2px solid #795934;
}

.answer-text,
.question-text {
  padding: 1.6rem;
}

.question-text {
  width: 100%;
  cursor: pointer;
  padding-right: 4em;
  font-size: 1.8rem;
  -webkit-transition: all 0.12s linear;
  transition: all 0.12s linear; /* How the question changes */
}

.answer::before { /* The little spur under the button */
  content: "";
  display: block;
  position: absolute;
  right: 12px;
  margin-right: 1rem;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--color-tertiary);
  opacity: 0;
  z-index: -1;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

.question.open .answer::before {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  z-index: 2;
}

.question.open .question-text {
  color: #fff;
  background-color: var(--color-tertiary);
}

.question-text:hover {
  color: var(--color-darkest);
  background-color: rgba(255, 255, 255, 0.8);
}
.question-text:hover .btn--faq, .question-text:hover svg {
  border-color: var(--color-darkest);
  fill: var(--color-darkest);
}

.answer {
  height: 0;
  overflow: hidden;
  background-color: var(--faq-answer-bg);
  -webkit-transition: all 0.2s cubic-bezier(0.18, 1.05, 0.73, 1.33);
  transition: all 0.2s cubic-bezier(0.18, 1.05, 0.73, 1.33);
}

.answer-text {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2; /* maximum */
  -webkit-column-width: 15rem;
     -moz-column-width: 15rem;
          column-width: 15rem; /* minumum */
  -webkit-column-gap: 2.4rem;
     -moz-column-gap: 2.4rem;
          column-gap: 2.4rem;
}
.answer-text.no-column {
  -webkit-column-count: 1;
     -moz-column-count: 1;
          column-count: 1;
}

.answer-text p, .answer-text a {
  color: var(--faq-answer-text);
}

.btn--faq {
  position: absolute;
  right: 1.6rem;
  top: 10px;
  margin: 0;
  width: 32px; /* A minimum touchable size */
  height: 32px;
  border-radius: 50%;
  border-width: 3px;
  border-style: solid;
  border-color: var(--color-text-1);
  outline: none;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
}
.btn--faq > svg {
  fill: var(--color-text-1);
}

.question.open .btn--faq {
  border-color: var(--color-brightest);
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.question.open .btn--faq > svg {
  fill: var(--color-brightest);
}

#vt {
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.15s cubic-bezier(0.18, 1.05, 0.73, 1.33);
  transition: -webkit-transform 0.15s cubic-bezier(0.18, 1.05, 0.73, 1.33);
  transition: transform 0.15s cubic-bezier(0.18, 1.05, 0.73, 1.33);
  transition: transform 0.15s cubic-bezier(0.18, 1.05, 0.73, 1.33), -webkit-transform 0.15s cubic-bezier(0.18, 1.05, 0.73, 1.33); /* How the button changes */
}

.question.open #vt {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

@media screen and (max-width: 25.875em) {
  input, select, textarea {
    font-size: 16px !important;
  }
}
input, textarea {
  display: block;
  width: 96%;
  margin-left: 3px;
  padding: 0.8rem;
  border: none;
  background-color: var(--color-darkest);
  color: var(--color-brightest);
  font-size: 1.4rem;
  font-family: inherit;
}

.cta { /* Container for Form module */
  position: relative;
  left: -8px;
  /* Jog to the left to prevent 
      clipping of shadows on hover */
  max-width: 340px;
  height: 14rem;
  overflow: hidden;
}
.cta__checkbox {
  display: none;
}
.cta__checkbox:checked ~ .cta__come-on {
  -webkit-transform: translate(8px, -14rem);
          transform: translate(8px, -14rem);
  opacity: 0;
  visibility: hidden;
}
.cta__checkbox:checked ~ .form-onboard-1 {
  -webkit-transform: translate(8px, -14rem);
          transform: translate(8px, -14rem);
  /* X movement to counteract jogging 
      to the left to prevent 
      clipping of shadows on hover */
  opacity: 1;
  visibility: visible;
}
.cta__initiate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.cta__toggler {
  margin-right: 1.6rem;
}
.cta__come-on {
  height: 14rem;
  -webkit-transform: translate(8px, -1.6rem);
          transform: translate(8px, -1.6rem);
  /* X movement to counteract jogging 
      to the left to prevent 
      clipping of shadows on hover */
  padding-right: 18px; /* Prevent clipping of content */
}

.form-onboard-1 { /* The HTML form */
  font-family: inherit;
  -webkit-transform: translate(8px, 0);
          transform: translate(8px, 0);
  padding-right: 4px; /* Prevent clipping of the button shadow on hover */
  -webkit-transition: all 0.3s cubic-bezier(0.18, 1.09, 0.24, 1.07);
  transition: all 0.3s cubic-bezier(0.18, 1.09, 0.24, 1.07);
}
.form-onboard-1 .step.active::after {
  background-color: var(--color-form-steps-onboard-active);
}

.btn--form-prev {
  margin-right: 1.6rem;
}

.btn--form-next {
  margin-right: 12px;
}

.btn--form-prev > svg, .btn--form-next > svg {
  width: 13px;
  height: 18px;
}

.btn--form-prev > svg {
  -webkit-transform: translate(-60%, -50%);
          transform: translate(-60%, -50%);
}

.btn--form-next > svg {
  -webkit-transform: translate(-40%, -50%);
          transform: translate(-40%, -50%);
}

/*  ADDING OTHER VENDOR PREFIXES
    SEEMS TO BREAK THINGS 
    with the exception of 
    ::-webkit-input-placeholder */
::-webkit-input-placeholder {
  opacity: 1;
  color: #aaa;
  font-size: 1.4rem;
}
::-moz-placeholder {
  opacity: 1;
  color: #aaa;
  font-size: 1.4rem;
}
:-ms-input-placeholder {
  opacity: 1;
  color: #aaa;
  font-size: 1.4rem;
}
::-ms-input-placeholder {
  opacity: 1;
  color: #aaa;
  font-size: 1.4rem;
}
::placeholder {
  opacity: 1;
  color: #aaa;
  font-size: 1.4rem;
}

/* Fix some browsers translucency */
input:-moz-placeholder + .form__label {
  /* 
  Sibling selector works 'cos in the html the 
  label follows the input
  */
  opacity: 0;
  visibility: hidden;
  /* 
  To remove the space it takes, not just make it transparent
  We can't animate visibility (it doesn't have intermediary states) 
  so we must have opacity too.
  */
  transform: translateY(-2.3rem);
}
input:-ms-input-placeholder + .form__label {
  /* 
  Sibling selector works 'cos in the html the 
  label follows the input
  */
  opacity: 0;
  visibility: hidden;
  /* 
  To remove the space it takes, not just make it transparent
  We can't animate visibility (it doesn't have intermediary states) 
  so we must have opacity too.
  */
  transform: translateY(-2.3rem);
}
input:placeholder-shown + .form__label {
  /* 
  Sibling selector works 'cos in the html the 
  label follows the input
  */
  opacity: 0;
  visibility: hidden;
  /* 
  To remove the space it takes, not just make it transparent
  We can't animate visibility (it doesn't have intermediary states) 
  so we must have opacity too.
  */
  -webkit-transform: translateY(-2.3rem);
          transform: translateY(-2.3rem);
}

/* Mark input boxes that do not validate */
.invalid::-webkit-input-placeholder {
  font-weight: 700;
  color: white;
}
.invalid::-moz-placeholder {
  font-weight: 700;
  color: white;
}
.invalid:-ms-input-placeholder {
  font-weight: 700;
  color: white;
}
.invalid::-ms-input-placeholder {
  font-weight: 700;
  color: white;
}
.invalid::placeholder {
  font-weight: 700;
  color: white;
}

.invalid[class^=form__input] {
  -webkit-animation: alert 3s infinite;
          animation: alert 3s infinite;
}

.form__label {
  display: block;
  margin: 0.4rem 0 0 0.8rem;
  font-size: 1.4rem;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.form__vignette {
  position: relative;
  height: 8rem;
  overflow: hidden;
}

.form__radio-set {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.form__radio-group:not(:last-child) {
  margin-right: 3.2rem;
}

.form__radio-group input {
  display: none;
}

.form__radio-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.4rem;
}

.form__radio-button {
  position: relative;
  height: 2.4rem;
  width: 2.4rem;
  aspect-ratio: 1/1;
  margin-left: 0.8rem;
  background-color: var(--color-brightest);
  border: 2px solid var(--color-text-1);
  border-radius: 50%;
  display: inline-block;
}

.form__radio-button::after {
  content: "";
  display: block;
  /*  Pseudo elements must have 
      content property and 
      display declared
  */
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  position: absolute;
  /*  Position on the parent also 
      must to be set but it 
      doesn't have to be relative
  */
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: var(--color-c-dark);
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
  opacity: 1;
}

/* A bizarre fix for a mysterious problem. */
/* In Safari macOS and iOS the radio buttons 
    – ::after pseudo elements on the labels – 
    were not given a visibility of 1 
    when the user checked each radio input. 
    The fix is to use the checking of the 
    radio input to additionallly apply
    a style to the label – in this case
    simply reiterating the text colour. */
.form__radio-input:checked ~ .form__radio-label {
  color: var(--color-text-1);
}

.tab {
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(180px);
          transform: translateY(180px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s cubic-bezier(0.18, 1.09, 0.24, 1.07);
  transition: all 0.3s cubic-bezier(0.18, 1.09, 0.24, 1.07);
}

.reveal {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.indicator-btn-grouping {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* make room for indicator borders */
}

/* Indicate steps of the form: */
span[class^=step] {
  height: 12px;
  width: 24px;
  margin-right: 2px;
  background-color: var(--color-form-steps-blank);
  display: inline-block;
  /* Mark the steps that are finished and valid: */
}
span[class^=step].active::after {
  display: block;
  content: "";
  width: 24px;
  height: 2px;
  -webkit-transform: translateY(14px);
          transform: translateY(14px);
  background-color: var(--color-brightest);
}
span[class^=step]:first-child {
  width: 28px;
  border-radius: 8px 0 0 8px;
}
span[class^=step].active:first-child::after {
  -webkit-transform: translate(4px, 14px);
          transform: translate(4px, 14px);
}
span[class^=step]:last-child {
  width: 28px;
  border-radius: 0 8px 8px 0;
}
span[class^=step].finish {
  background-color: var(--color-form-steps-finish);
}

.form-tips-1__btn-prev,
.form-tips-2__btn-prev,
.form-tips-3__btn-prev,
.form-tips-4__btn-prev {
  margin-right: 4rem;
}

.cta--tips-0,
.cta--tips-1,
.cta--tips-2,
.cta--tips-3,
.cta--tips-4 {
  max-width: 300px;
  height: 15rem;
  overflow: hidden;
  padding: 1.2rem 2rem;
  background-color: var(--color-tertiary);
  color: var(--color-brightest);
}
.cta--tips-0__checkbox,
.cta--tips-1__checkbox,
.cta--tips-2__checkbox,
.cta--tips-3__checkbox,
.cta--tips-4__checkbox {
  display: none;
}
.cta--tips-0__initiate,
.cta--tips-1__initiate,
.cta--tips-2__initiate,
.cta--tips-3__initiate,
.cta--tips-4__initiate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.cta--tips-0__toggler,
.cta--tips-1__toggler,
.cta--tips-2__toggler,
.cta--tips-3__toggler,
.cta--tips-4__toggler {
  margin: 0 0 0 1.6rem;
}
.cta--tips-0__come-on,
.cta--tips-1__come-on,
.cta--tips-2__come-on,
.cta--tips-3__come-on,
.cta--tips-4__come-on {
  height: 14rem;
}

.cta--tips-0__checkbox:checked ~ .cta--tips-0__come-on {
  -webkit-transform: translateY(-14rem);
          transform: translateY(-14rem);
  opacity: 0;
  visibility: hidden;
}
.cta--tips-0__checkbox:checked ~ .form-tips-0 {
  -webkit-transform: translateY(-14rem);
          transform: translateY(-14rem);
  opacity: 1;
  visibility: visible;
}
.cta--tips-0__come-on {
  -webkit-transform: translateY(1.6rem);
          transform: translateY(1.6rem);
}

.cta--tips-1__checkbox:checked ~ .cta--tips-1__come-on {
  -webkit-transform: translateY(-14rem);
          transform: translateY(-14rem);
  opacity: 0;
  visibility: hidden;
}
.cta--tips-1__checkbox:checked ~ .form-tips-1 {
  -webkit-transform: translateY(-14rem);
          transform: translateY(-14rem);
  opacity: 1;
  visibility: visible;
}
.cta--tips-1__come-on {
  -webkit-transform: translateY(1.6rem);
          transform: translateY(1.6rem);
}

.cta--tips-2__checkbox:checked ~ .cta--tips-2__come-on {
  -webkit-transform: translateY(-14rem);
          transform: translateY(-14rem);
  opacity: 0;
  visibility: hidden;
}
.cta--tips-2__checkbox:checked ~ .form-tips-2 {
  -webkit-transform: translateY(-14rem);
          transform: translateY(-14rem);
  opacity: 1;
  visibility: visible;
}
.cta--tips-2__come-on {
  -webkit-transform: translateY(1.6rem);
          transform: translateY(1.6rem);
}

.cta--tips-3__checkbox:checked ~ .cta--tips-3__come-on {
  -webkit-transform: translateY(-14rem);
          transform: translateY(-14rem);
  opacity: 0;
  visibility: hidden;
}
.cta--tips-3__checkbox:checked ~ .form-tips-3 {
  -webkit-transform: translateY(-14rem);
          transform: translateY(-14rem);
  opacity: 1;
  visibility: visible;
}
.cta--tips-3__come-on {
  -webkit-transform: translateY(1.6rem);
          transform: translateY(1.6rem);
}

.cta--tips-4__checkbox:checked ~ .cta--tips-4__come-on {
  -webkit-transform: translateY(-14rem);
          transform: translateY(-14rem);
  opacity: 0;
  visibility: hidden;
}
.cta--tips-4__checkbox:checked ~ .form-tips-4 {
  -webkit-transform: translateY(-14rem);
          transform: translateY(-14rem);
  opacity: 1;
  visibility: visible;
}
.cta--tips-4__come-on {
  -webkit-transform: translateY(1.6rem);
          transform: translateY(1.6rem);
}

form[class^=form-tips-] {
  font-family: inherit;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s cubic-bezier(0.18, 1.09, 0.24, 1.07);
  transition: all 0.3s cubic-bezier(0.18, 1.09, 0.24, 1.07);
}

[class^=tab--tips-] {
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(180px);
          transform: translateY(180px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s cubic-bezier(0.18, 1.09, 0.24, 1.07);
  transition: all 0.3s cubic-bezier(0.18, 1.09, 0.24, 1.07);
}

.reveal--tips-0,
.reveal--tips-1,
.reveal--tips-2,
.reveal--tips-3,
.reveal--tips-4 {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.btn-rev--round.btn--form-prev > svg {
  -webkit-transform: translate(-0.4rem, 0rem);
          transform: translate(-0.4rem, 0rem);
}

.btn-rev--round.btn--form-next > svg {
  -webkit-transform: translate(0.1rem, 0rem);
          transform: translate(0.1rem, 0rem);
}

/* honeypot */
.website {
  opacity: 0;
  visibility: hidden;
  display: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.testimage {
  max-width: 100px;
  -webkit-filter: blur(5px);
          filter: blur(5px);
}

/*
    .avatar mix-blend-mode: luminosity;
    Safari mix-blend-mode luminosity failure on portrait image …
    so had to change from a greyscale image to colour tinted image …
    so that it still looks kinda okay in Safari.
    See Apple note: '#Notes, Udemy - Advanced CSS and Sass' about mix-blend-mode.
    ADDITIONAL - when changing from single-page to multi-page site it 
    became apparent that mix-blend-mode on the avatar prevented backdrop-filter:blur
    on the navigation background being applied. This may be because a new 
    stacking context is generated when applying any blend-mode other than normal. 
    UPDATE – All moot points as user testing indicated that a greyscale or 
    full colour image is much preferred.
    Also, the version where the eyes darted upwards when the user hovered 
    over the contact form was not liked.
*/
.video {
  -ms-flex-item-align: start;
      align-self: start; /* preserves aspect ratio */
  margin-top: 3.2rem;
}

.video-cta {
  position: relative;
}
.video-cta img {
  -webkit-filter: brightness(0.25);
          filter: brightness(0.25);
  -webkit-transition: 1s;
  transition: 1s;
}
.video-cta:hover img {
  -webkit-filter: brightness(0.8);
          filter: brightness(0.8);
}
.video-cta__initiate {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
}
.video-cta__text {
  margin-top: 1rem;
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 0, 0, 0.2);
}
.video-cta__button {
  width: 6rem;
  height: 6rem;
}
.video-cta__button svg {
  width: 2.8rem;
  height: 2.8rem;
}

.video__content {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.video__content--portrait {
  max-width: 60vh;
}

/* Responsive iFrames: https://blog.theodo.com/2018/01/responsive-iframes-css-trick/ */
/* 404 image with colour controllable with css */
.masked {
  display: block;
  width: 366px;
  height: 24px;
  margin: 6em 0 5rem 2rem;
  background-size: cover;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  background-image: url(../img/icon-pencil-broken.svg);
  background-size: cover;
}
@media only screen and (max-width: 56.25em) {
  .masked {
    width: 248px;
    height: 16px;
  }
}
@supports ((-webkit-mask-image: url()) or (mask-image: url())) {
  .masked {
    background-color: var(--color-text-1);
    -webkit-mask-image: url(../img/icon-pencil-broken.svg);
    -webkit-mask-size: cover;
    mask-image: url(../img/icon-pencil-broken.svg);
    mask-size: cover;
    background-image: none;
  }
}

#form-acknowledge {
  display: block;
  margin: 0rem 0 5rem 0;
}
#form-acknowledge #bubble {
  fill: var(--color-text-1);
}
#form-acknowledge #notification {
  -webkit-transform-origin: 178px 54px;
          transform-origin: 178px 54px;
  -webkit-animation: pop 0.2s cubic-bezier(0.18, 1.05, 0.73, 1.33) 1.6s 1 normal backwards;
          animation: pop 0.2s cubic-bezier(0.18, 1.05, 0.73, 1.33) 1.6s 1 normal backwards;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slider { /* the component */
  min-width: 60%;
  /*  I have no idea why, but this 
      min-width is vital or the 
      carousel will be 
      uncontrollably enormous. */
  width: 100%;
  grid-column: main-start/-2;
}
@media only screen and (max-width: 75em) {
  .slider {
    grid-column: main-start/-1;
    justify-self: center;
    width: calc(100% - 14.4rem);
    margin-bottom: 16px;
  }
}
@media only screen and (max-width: 56.25em) {
  .slider {
    grid-column: main;
    justify-self: center;
    margin-bottom: 32px;
  }
}
@media only screen and (max-width: 37.5em) {
  .slider {
    grid-column: full;
    width: calc(100% + 1.6rem * 2);
    margin-bottom: 40px;
  }
}

.slick-loading .slick-list {
  background: #fff url("../img/loading.gif") center center no-repeat;
}

.slick-list { /* the carousel */
  -webkit-box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.2), 4px 4px 6px rgba(0, 0, 0, 0.2);
          box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.2), 4px 4px 6px rgba(0, 0, 0, 0.2);
}

.slide__content {
  position: relative;
}

.slick-slide img {
  width: 100%; /* necessary */
}

.btn--slick-prev,
.btn--slick-next {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: transparent;
  z-index: 10;
}
@media only screen and (max-width: 37.5em) {
  .btn--slick-prev,
  .btn--slick-next {
    top: calc(100% + 32px);
  }
}
.btn--slick-prev > svg,
.btn--slick-next > svg {
  width: 13px;
  height: 18px;
}

.btn--slick-prev {
  left: -7.2rem;
}
.btn--slick-prev > svg {
  -webkit-transform: translate(-60%, -50%);
          transform: translate(-60%, -50%);
}
@media only screen and (max-width: 37.5em) {
  .btn--slick-prev {
    left: 16px;
  }
}

.btn--slick-next {
  right: -7.2rem;
}
.btn--slick-next > svg {
  -webkit-transform: translate(-40%, -50%);
          transform: translate(-40%, -50%);
}
@media only screen and (max-width: 37.5em) {
  .btn--slick-next {
    right: 16px;
  }
}

.slick-dots { /* the UL of indicators */
  width: 100%;
  position: absolute;
  bottom: -32px;
  list-style: none;
  text-align: center;
}
@media only screen and (max-width: 37.5em) {
  .slick-dots {
    bottom: -40px;
  }
}
.slick-dots li {
  position: relative;
  display: inline-block;
  margin: 0 16px;
}
.slick-dots li button {
  display: block;
  margin: 0;
  width: 16px;
  height: 16px;
  border: none;
  outline: none;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  background-color: var(--slick-dots);
  -webkit-transition: background-color 0.1s;
  transition: background-color 0.1s;
}

.slick-dots li.slick-active button {
  background-color: var(--color-text-1);
}

.section {
  display: grid;
  grid-column: main;
}

.section-1-1-1 {
  display: grid;
  grid-gap: inherit;
  grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
}
@media only screen and (max-width: 37.5em) {
  .section-1-1-1 {
    grid-template-columns: [col-start] 1fr [col-end];
  }
}

.section-1-1-1-f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.section-1-1-1-f > * {
  margin-bottom: 1.6rem;
}
.section-1-1-1-f > *:not(:last-child) {
  margin-right: 4rem;
}

.section-1-1 {
  display: grid;
  grid-gap: inherit;
  grid-template-columns: repeat(2, [col-start] 1fr [col-end]);
}
@media only screen and (max-width: 37.5em) {
  .section-1-1 {
    grid-template-columns: [col-start] 1fr [col-end];
  }
}

.section-1-1-b {
  display: grid;
  grid-gap: inherit;
  grid-template-columns: repeat(2, [col-start] 1fr [col-end]);
}
@media only screen and (max-width: 75em) {
  .section-1-1-b {
    grid-template-columns: [col-start] 1fr [col-end];
  }
}

.section-1-1-f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.section-1-1-f > * {
  margin-bottom: 1.6rem;
}
.section-1-1-f > *:not(:last-child) {
  margin-right: 4rem;
}

.group-sm-1-1-1 {
  display: grid;
  grid-column-gap: 1.6rem;
  grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 37.5em) {
  .group-sm-1-1-1 {
    grid-template-columns: [col-start] 1fr [col-end];
  }
}

html {
  background-color: #333;
}

.wrapper {
  /* needed for backdrop-filter:blur to work (in Chrome) on such a long page */
  /* needed for scroll-snap to work */
  /* would have to be removed to allow js 
      to add .show class to back-to-top 
      button when the user scrolls */
  /* don't allow skipping past pages */
  scroll-behavior: smooth;
  /* for smooth scroll when user clicks the 
      control__pager.
      Breaks when put on html element */
}

.page {
  max-width: 144rem;
  min-height: 100vh;
  /* mobile viewpost bug fix */
  margin-left: auto;
  margin-right: auto;
  padding: 3.2rem 5rem;
  display: grid;
  grid-gap: 3.2rem 4rem;
  grid-template-columns: [full-start] 222px [main-start] repeat(3, 1fr) [full-end main-end];
  background-image: var(--gradient-1);
}
@media only screen and (max-width: 56.25em) {
  .page {
    grid-template-columns: [full-start main-start] repeat(3, 1fr) [full-end main-end];
  }
}
@media only screen and (max-width: 37.5em) {
  .page {
    grid-template-columns: [full-start main-start] 1fr [full-end main-end];
    padding: 1.6rem 1.6rem;
  }
}

#page-01-start {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] repeat(2, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] repeat(2, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
@media only screen and (max-width: 56.25em) {
  #page-01-start {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  }
}
@media only screen and (max-width: 37.5em) {
  #page-01-start {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    padding-top: 5rem;
  }
}

#page-02-intro {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] repeat(2, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] repeat(2, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
@media only screen and (max-width: 56.25em) {
  #page-02-intro {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  }
  #page-02-intro .avatar {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  #page-02-intro {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}

#page-03-case-studies {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
@media only screen and (max-width: 56.25em) {
  #page-03-case-studies {
    grid-template-rows: [yfull-start ymain-start] repeat(4, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(4, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  }
}
@media only screen and (max-width: 37.5em) {
  #page-03-case-studies {
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}

.overview-pic {
  grid-column: full;
  grid-row: 2/4;
  justify-self: center;
  max-width: none;
  width: calc(100% + 5rem * 2);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: right top;
     object-position: right top;
  z-index: 5;
}
@media only screen and (max-width: 56.25em) {
  .overview-pic {
    grid-row: 4/6;
  }
}
@media only screen and (max-width: 37.5em) {
  .overview-pic {
    grid-row: 3;
    width: calc(100% + 1.6rem * 2);
  }
}

.overview-card {
  grid-column: full;
  grid-row: 2;
  width: 38%;
  margin-top: 4.8rem;
  padding: 2.4rem;
  display: grid;
  grid-gap: 2.4rem;
  grid-template-columns: 10.4rem 1fr;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
}
@media only screen and (max-width: 56.25em) {
  .overview-card {
    grid-row: 3;
    width: 100%;
    margin-top: 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .overview-card {
    grid-row: 4;
  }
}
.overview-card__text > * {
  color: white;
}
.overview-card__flag {
  display: grid;
  grid-template-rows: repeat(2, -webkit-min-content) 1fr;
  grid-template-rows: repeat(2, min-content) 1fr;
  grid-gap: 1.6rem;
}
.overview-card .flag__text {
  width: 10.4rem;
  padding: 1rem 2rem;
  background: #fff;
  color: #000;
  text-align: center;
}
.overview-card .flag__icon {
  width: 10.4rem;
  height: 10.4rem;
}
.overview-card .btn--scrolldown {
  -ms-flex-item-align: end;
      align-self: end;
  margin-bottom: 1rem;
}

#page-03-philips {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] -webkit-min-content repeat(6, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] min-content repeat(6, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
#page-03-philips .ident {
  grid-row: 1;
}
#page-03-philips .boxout-a-x2 {
  grid-row: span 3;
}
@media only screen and (max-width: 37.5em) {
  #page-03-philips {
    grid-template-rows: [yfull-start ymain-start] -webkit-min-content repeat(8, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] min-content repeat(8, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
  #page-03-philips .boxout-a-x2 {
    grid-row: span 1;
  }
}
@media only screen and (min-width: 37.5em) {
  #page-03-philips .section-1-1-1 {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
#page-03-philips .page-intro {
  display: grid;
  grid-row-gap: 1.6rem;
  -ms-flex-line-pack: start;
      align-content: start;
}

section[class*=section-philips] {
  grid-row-gap: 1.6rem;
}

#page-03-this-site {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] -webkit-min-content repeat(11, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] min-content repeat(11, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
#page-03-this-site .ident {
  grid-row: 1;
}
@media only screen and (max-width: 37.5em) {
  #page-03-this-site {
    grid-template-rows: [yfull-start ymain-start] -webkit-min-content repeat(13, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] min-content repeat(13, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}
@media only screen and (min-width: 37.5em) {
  #page-03-this-site .section-1-1-1, #page-03-this-site .section-2-1 {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
#page-03-this-site .page-intro {
  display: grid;
  grid-row-gap: 1.6rem;
  -ms-flex-line-pack: start;
      align-content: start;
}

section[class*=section-this-site] {
  grid-row-gap: 1.6rem;
}

#page-03-jext {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] -webkit-min-content repeat(6, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] min-content repeat(6, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
#page-03-jext .ident {
  grid-row: 1;
}
#page-03-jext .boxout-a-x2 {
  grid-row: span 3;
}
@media only screen and (max-width: 37.5em) and (max-width: 37.5em) {
  #page-03-jext {
    grid-template-rows: [yfull-start ymain-start] -webkit-min-content repeat(8, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] min-content repeat(8, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}
@media only screen and (min-width: 37.5em) {
  #page-03-jext .section-1-1-1 {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
#page-03-jext .section-intro {
  grid-column: span 2;
}

section[class*=section-jext] {
  grid-row-gap: 1.6rem;
}

#page-04-contact {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] repeat(2, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] repeat(2, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
@media only screen and (max-width: 56.25em) {
  #page-04-contact {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  }
  #page-04-contact .avatar {
    display: none;
  }
  #page-04-contact .avatar--glance {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  #page-04-contact {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}

#page-05-faq {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] repeat(2, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] repeat(2, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
@media only screen and (max-width: 56.25em) {
  #page-05-faq {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  }
  #page-05-faq .portrait {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  #page-05-faq {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}

#page-03-testimonials {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
@media only screen and (max-width: 56.25em) {
  #page-03-testimonials {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  }
}
@media only screen and (max-width: 37.5em) {
  #page-03-testimonials {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}

#page-07-tips {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
@media only screen and (max-width: 56.25em) {
  #page-07-tips {
    grid-template-rows: [yfull-start ymain-start] repeat(4, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(4, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  }
}
@media only screen and (max-width: 37.5em) {
  #page-07-tips {
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}

#page-07-a-powerpoint {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] repeat(4, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] repeat(4, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
@media only screen and (max-width: 56.25em) {
  #page-07-a-powerpoint {
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  }
}
@media only screen and (max-width: 37.5em) {
  #page-07-a-powerpoint {
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}

#page-07-b-location-text {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] repeat(4, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] repeat(4, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
@media only screen and (max-width: 56.25em) {
  #page-07-b-location-text {
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  }
}
@media only screen and (max-width: 37.5em) {
  #page-07-b-location-text {
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}

#page-07-c-menu-help {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] repeat(4, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] repeat(4, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
@media only screen and (max-width: 56.25em) {
  #page-07-c-menu-help {
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  }
}
@media only screen and (max-width: 37.5em) {
  #page-07-c-menu-help {
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(5, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}

#page-minus-1-not-found {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
@media only screen and (max-width: 56.25em) {
  #page-minus-1-not-found {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  }
}
@media only screen and (max-width: 37.5em) {
  #page-minus-1-not-found {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}
@media only screen and (max-width: 25.875em) {
  #page-minus-1-not-found {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 96px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 96px [yfull-end];
  }
}

#page-100-thank-you {
  display: grid;
  grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
}
@media only screen and (max-width: 56.25em) {
  #page-100-thank-you {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) [yfull-end];
  }
  #page-100-thank-you .avatar {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  #page-100-thank-you {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 80px [yfull-end];
  }
}
@media only screen and (max-width: 25.875em) {
  #page-100-thank-you {
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, -webkit-max-content)) [ymain-end] minmax(2rem, 1fr) 96px [yfull-end];
    grid-template-rows: [yfull-start ymain-start] repeat(3, minmax(2rem, max-content)) [ymain-end] minmax(2rem, 1fr) 96px [yfull-end];
  }
}

.control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: start;
  -ms-flex-line-pack: start;
      align-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 56.25em) {
  .control {
    -webkit-box-ordinal-group: -1;
        -ms-flex-order: -2;
            order: -2;
  }
}
@media only screen and (max-width: 37.5em) {
  .control {
    display: none;
    /* See also in this file the .control--phone version of .btn--contact */
    /* See _page-menu.scss for generic button styles  */
  }
  .control.control--phone {
    display: grid;
    position: fixed;
    width: calc(100% - 1.6rem * 2);
    bottom: 0;
    padding-top: 16px;
    padding-bottom: 24px;
    z-index: 500; /* VITAL! */
    /*  Elevate this fixed menu over any flow item that 
        may have a z-index (all other menus hidden in 
        this viewport width).
    */
  }
  .control.control--phone::after {
    content: "";
    position: absolute;
    left: -1.6rem;
    top: 4px;
    width: calc(100% + 1.6rem * 2);
    height: 96px;
    /* Slightly transparent fallback */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0.4)));
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0.4));
    /* If backdrop support: very transparent and blurred */
    /* For backdrop-filter:blur to work – at least in Chrome – on a very long web page, overflow-y: scroll; is needed on a 100vh wrapping element. */
    z-index: 250;
  }
  @supports (backdrop-filter: blur()) {
    .control.control--phone::after {
      background-image: -webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0.4)));
      background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0.4));
      backdrop-filter: blur(4px);
    }
  }
}

/* Immutable because they will always be on a dark background */
@media only screen and (max-width: 37.5em) {
  .control--phone .btn--contact, .control--phone .btn--contact:link, .control--phone .btn--contact:visited,
  .control--phone .navigation__button,
  .control--phone .navigation__button:link,
  .control--phone .navigation__button:visited {
    padding: 0.8rem 1.4rem;
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-brightest);
    border-radius: 0.8rem;
    outline: none;
    background-color: transparent;
    background-image: none;
    background-size: 210% 210%;
    background-position: 0% 100%;
    color: var(--color-brightest);
    font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Helvetica Neue", sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 18px; /* We don't want this button to scale */
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .control--phone .btn--contact > svg, .control--phone .btn--contact:link > svg, .control--phone .btn--contact:visited > svg,
  .control--phone .navigation__button > svg,
  .control--phone .navigation__button:link > svg,
  .control--phone .navigation__button:visited > svg {
    fill: var(--color-brightest);
  }
  .control--phone .btn--contact:hover, .control--phone .btn--contact:focus,
  .control--phone .navigation__button:hover,
  .control--phone .navigation__button:focus {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .control--phone .navigation__button, .control--phone .navigation__button:link, .control--phone .navigation__button:visited {
    border-radius: 50%;
    background-size: 220% 220%;
    background-position: 50% 145%;
    font-size: 0;
    line-height: 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .control--phone .btn--contact, .control--phone .btn--contact:link, .control--phone .btn--contact:visited {
    -webkit-animation: spread-rev 8s ease-in-out infinite alternate;
            animation: spread-rev 8s ease-in-out infinite alternate;
  }
}
.page-00-menu {
  min-height: 90vh;
  display: grid;
  grid-template-rows: [yfull-start ymain-start] -webkit-min-content 1fr -webkit-min-content [ymain-end yfull-end];
  grid-template-rows: [yfull-start ymain-start] min-content 1fr min-content [ymain-end yfull-end];
  background-image: none;
}
@media only screen and (max-width: 56.25em) {
  .page-00-menu {
    padding-bottom: 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .page-00-menu {
    grid-template-columns: [full-start main-start] repeat(2, 1fr) [full-end main-end];
    grid-template-rows: [yfull-start ymain-start] 1fr [ymain-end] -webkit-min-content [yfull-end];
    grid-template-rows: [yfull-start ymain-start] 1fr [ymain-end] min-content [yfull-end];
    grid-gap: 2rem;
    padding-bottom: 5.6rem;
  }
}
.page-00-menu .logo-site {
  fill: var(--color-brightest);
}

.ident--menu {
  grid-row: auto;
  display: grid;
  justify-items: center;
}
@media only screen and (max-width: 56.25em) {
  .ident--menu {
    grid-row: auto;
    grid-column: span 2;
    grid-auto-flow: column;
    grid-gap: 3.2rem;
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media only screen and (max-width: 37.5em) {
  .ident--menu {
    display: none;
  }
}

.ident__menu--text {
  grid-column: 1;
  text-align: center;
  color: #fff;
}
@media only screen and (max-width: 56.25em) {
  .ident__menu--text {
    display: none;
  }
}

.settings {
  grid-column: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 2000;
}
@media only screen and (max-width: 56.25em) {
  .settings {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; /* as flexbox items */
    margin-top: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .settings {
    justify-self: start; /* as grid child */
    height: calc(24px + 6rem);
    margin-top: 0;
  }
}

.setting-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media only screen and (max-width: 56.25em) {
  .setting-group:not(:last-child) {
    margin-right: 3.2rem;
  }
}
.settings__sound, .settings__light-dark {
  position: relative;
  width: 4rem;
  height: 4rem;
}
.settings__sound > svg, .settings__light-dark > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.8rem;
  height: 2.8rem;
}
@media only screen and (max-width: 37.5em) {
  .settings__sound, .settings__light-dark {
    background-image: none;
  }
}

.settings__light-dark svg {
  -webkit-transform: translate(-50%, -50%) var(--toggle-light-dark-counter);
          transform: translate(-50%, -50%) var(--toggle-light-dark-counter);
  -webkit-transition: all 0.12s cubic-bezier(0.1, 1.09, 0.24, 1.07);
  transition: all 0.12s cubic-bezier(0.1, 1.09, 0.24, 1.07);
  -webkit-transform-origin: center;
          transform-origin: center;
}

.settings__sound svg {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.settings__sound svg #waves {
  opacity: 0;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}
.settings__sound svg #off {
  opacity: 1;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}

#settings__sound__checkbox {
  display: none;
}
#settings__sound__checkbox:checked ~ label svg #waves {
  opacity: 1;
}
#settings__sound__checkbox:checked ~ label svg #off {
  opacity: 0;
}
#settings__sound__checkbox:checked ~ .setting-text-sound::after {
  display: inline;
  content: "on";
}

.setting-text-sound::after {
  display: inline;
  content: "off";
}

.setting-text-sound, .setting-text-light-dark {
  margin-top: 8px;
  min-width: 10ch; /* Otherwise Chrome shifts the layout when the text changes. */
  text-align: center;
  color: var(--color-brightest);
  font-size: 1.2rem;
}

.setting-text-light-dark::before {
  display: inline;
  content: var(--toggle-light-dark-text);
}

.navigation {
  display: grid;
  justify-self: end;
}
.navigation__checkbox {
  display: none;
}
.navigation__button {
  /* See also in this file the version for phones 
  i.e. .control--phone .navigation__button */
  grid-column-end: -1;
  grid-row: 1;
  height: 6rem;
  width: 6rem;
  z-index: 2000;
}
.navigation__button > svg {
  width: 3.2rem;
  height: 3.2rem;
}
.navigation__button > svg * {
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.18, 1.09, 0.24, 1.07);
  transition: -webkit-transform 0.1s cubic-bezier(0.18, 1.09, 0.24, 1.07);
  transition: transform 0.1s cubic-bezier(0.18, 1.09, 0.24, 1.07);
  transition: transform 0.1s cubic-bezier(0.18, 1.09, 0.24, 1.07), -webkit-transform 0.1s cubic-bezier(0.18, 1.09, 0.24, 1.07);
  /* Set transition for all constituent parts of the svg */
  /* This is the OUT transition
      … see #wrap.show-menu state (below) for IN transition */
}
.navigation__button #top {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-origin: 45% 30%;
          transform-origin: 45% 30%;
}
.navigation__button #bottom {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-origin: 40% 71%;
          transform-origin: 40% 71%;
}
.navigation__button #tlbr, .navigation__button #bltr {
  opacity: 0;
}
.navigation__button #tlbr {
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.navigation__button #bltr {
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.navigation__background {
  position: fixed;
  grid-column-end: -1;
  grid-row: 1;
  justify-self: end;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0);
  /* Until the wrapper has the class .show-menu */
  -webkit-transition: background-color 0.42s, backdrop-filter 0.3s, -webkit-transform 0.15s;
  transition: background-color 0.42s, backdrop-filter 0.3s, -webkit-transform 0.15s;
  transition: transform 0.15s, background-color 0.42s, backdrop-filter 0.3s;
  transition: transform 0.15s, background-color 0.42s, backdrop-filter 0.3s, -webkit-transform 0.15s;
  /* This is the OUT transition
      … see #wrap.show-menu state (below) for IN transition */
}
@media only screen and (max-width: 37.5em) {
  .navigation__background {
    width: 3rem;
    height: 3rem;
  }
}
.navigation__nav {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  opacity: 0;
  -webkit-transform: translateX(150vw);
          transform: translateX(150vw);
  -webkit-transition: all 0.15s cubic-bezier(0.18, 1.05, 0.73, 1.08);
  transition: all 0.15s cubic-bezier(0.18, 1.05, 0.73, 1.08);
}
.navigation__list {
  grid-column: main;
  grid-row: 2/-1;
  max-height: 60rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.navigation__list__item {
  margin-bottom: 1.5rem;
}
@media only screen and (max-width: 56.25em) {
  .navigation__list {
    grid-row: 2;
  }
}
@media only screen and (max-width: 37.5em) {
  .navigation__list {
    grid-row: 1;
  }
}
.navigation__item {
  list-style: none;
  overflow: hidden;
}
.navigation__link:link, .navigation__link:visited, .navigation__link--2:link, .navigation__link--2:visited {
  display: inline-block;
  position: relative;
  padding: 5px 12px 5px 10px;
  color: var(--color-brightest);
  font-family: "museo700", "Rockwell", "Lucida Bright", "Palatino", serif;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
}
@media (hover: hover) {
  .navigation__link:hover, .navigation__link:active, .navigation__link--2:hover, .navigation__link--2:active {
    color: var(--color-brightest);
  }
}
.navigation__link::before, .navigation__link::after, .navigation__link--2::before, .navigation__link--2::after {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  font-smooth: antialiased;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: border 0.06s ease-out 0.06s, -webkit-transform 0.06s ease-out 0s;
  transition: border 0.06s ease-out 0.06s, -webkit-transform 0.06s ease-out 0s;
  transition: transform 0.06s ease-out 0s, border 0.06s ease-out 0.06s;
  transition: transform 0.06s ease-out 0s, border 0.06s ease-out 0.06s, -webkit-transform 0.06s ease-out 0s;
  /* Slight delay given to the start of the border-color transition */
}
.navigation__link::before, .navigation__link--2::before {
  border-top: 2px solid var(--color-brightest);
  background: transparent;
  /* background: rgba(0,0,255,.5); */
  -webkit-transform: translateY(calc(100% - 2px));
          transform: translateY(calc(100% - 2px));
  /* The full height minus the size of the top border */
}
.navigation__link::after, .navigation__link--2::after {
  z-index: -1;
  /* z-index: 10; */
  background: rgb(0, 0, 0);
  /* background: rgba(255,0,0,.9); */
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition-delay: 0.12s;
          transition-delay: 0.12s;
  /* Let the ::before ascend completely, then make the ::after decend */
}
@media (hover: hover) {
  .navigation__link:hover::before, .navigation__link--2:hover::before {
    border-top: 2px solid rgba(0, 0, 0, 0);
  }
}
@media (hover: hover) {
  .navigation__link:hover::before, .navigation__link:focus::before, .navigation__link:hover::after, .navigation__link:focus::after, .navigation__link--2:hover::before, .navigation__link--2:focus::before, .navigation__link--2:hover::after, .navigation__link--2:focus::after {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.navigation__sublist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  overflow: hidden;
}
@media only screen and (max-width: 25.875em) {
  .navigation__sublist {
    display: none;
  }
}
.navigation__link:link, .navigation__link:visited {
  font-size: 3.6rem;
}
@media only screen and (max-width: 25.875em) {
  .navigation__link:link, .navigation__link:visited {
    font-size: 3.2rem;
  }
}
.navigation__link--2:link, .navigation__link--2:visited {
  display: inline-block;
  position: relative;
  margin-right: 2rem;
  margin-top: 0.8rem;
  padding: 0.5rem 1.2rem 0.5rem 1.2rem;
  background-color: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 2rem;
}
@media only screen and (max-width: 25.875em) {
  .navigation__link--2:link, .navigation__link--2:visited {
    font-size: 1.6rem;
  }
}
@media (hover: hover) {
  .navigation__link--2:hover, .navigation__link--2:active {
    color: rgb(255, 255, 255);
  }
}
.navigation__link--2::before {
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  /* background: rgba(0,0,255,.5); */
  -webkit-transform: translateY(calc(100% - 2px));
          transform: translateY(calc(100% - 2px));
  /* The full height minus the size of the top border */
}
.navigation__link--2:after {
  z-index: -1;
  /* z-index: 10; */
  background: rgb(0, 0, 0);
  /* background: rgba(255,0,0,.9); */
  -webkit-transform: translateY(calc(-100% - 0.8rem));
          transform: translateY(calc(-100% - 0.8rem));
  /* The full height minus the size of the top border */
}

@media only screen and (min-width: 37.5em) {
  #wrap.show-menu {
    position: fixed;
  }
}
#wrap.show-menu .navigation__background {
  -webkit-transform: scale(120);
          transform: scale(120);
  /* Slightly transparent fallback */
  background-color: rgba(0, 0, 0, 0.9);
  /* If backdrop support: very transparent and blurred */
  /* Slightly glitchy in Chrome but no solution found */
  -webkit-transition: background-color 0.4s, backdrop-filter 0.4s, -webkit-transform 0.3s;
  transition: background-color 0.4s, backdrop-filter 0.4s, -webkit-transform 0.3s;
  transition: transform 0.3s, background-color 0.4s, backdrop-filter 0.4s;
  transition: transform 0.3s, background-color 0.4s, backdrop-filter 0.4s, -webkit-transform 0.3s;
  /* This is the IN transition
      … see default state (much higher in this file) for OUT transition */
}
@supports (backdrop-filter: blur()) {
  #wrap.show-menu .navigation__background {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(0.2px);
  }
}
#wrap.show-menu .navigation__button {
  background-image: radial-gradient(var(--color-c-dark), var(--color-c-dark) 33%, transparent 33%);
  background-size: 220% 220%;
  background-position: 50% 145%;
  border-color: var(--color-brightest);
}
@media only screen and (max-width: 37.5em) {
  #wrap.show-menu .navigation__button {
    background-image: none;
  }
}
#wrap.show-menu .navigation__button > svg * {
  -webkit-transition: -webkit-transform 0.12s cubic-bezier(0.18, 1.05, 0.73, 1.33);
  transition: -webkit-transform 0.12s cubic-bezier(0.18, 1.05, 0.73, 1.33);
  transition: transform 0.12s cubic-bezier(0.18, 1.05, 0.73, 1.33);
  transition: transform 0.12s cubic-bezier(0.18, 1.05, 0.73, 1.33), -webkit-transform 0.12s cubic-bezier(0.18, 1.05, 0.73, 1.33);
  /* Set transition for all constituent parts of the svg */
  /* This is the IN transition
      … see default state (much higher in this file) for OUT transition */
}
#wrap.show-menu .navigation__button #top, #wrap.show-menu .navigation__button #middle, #wrap.show-menu .navigation__button #bottom {
  fill: var(--color-brightest);
  opacity: 0;
}
#wrap.show-menu .navigation__button #top, #wrap.show-menu .navigation__button #top02 {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
#wrap.show-menu .navigation__button #bottom {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
#wrap.show-menu .navigation__button #tlbr, #wrap.show-menu .navigation__button #bltr {
  opacity: 1;
  fill: var(--color-brightest);
}
#wrap.show-menu .navigation__button #tlbr {
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#wrap.show-menu .navigation__button #bltr {
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#wrap.show-menu .navigation__button:hover {
  background-position: 50% 50%;
  color: transparent;
}
#wrap.show-menu .navigation__nav {
  -webkit-transform: translateX(0vh);
          transform: translateX(0vh);
  opacity: 1;
  width: 100%;
}/*# sourceMappingURL=main.css.map */