/*! sanitize.css v5.0.0 | CC0 License | github.com/jonathantneal/sanitize.css */
/* Document (https://html.spec.whatwg.org/multipage/semantics.html#semantics)
   ========================================================================== */
/**
 * 1. Remove repeating backgrounds in all browsers (opinionated).
 * 2. Add box sizing inheritence in all browsers (opinionated).
 */
@import url("https://use.typekit.net/khf0zfa.css");
*,
::before,
::after {
  background-repeat: no-repeat;
  /* 1 */
  box-sizing: inherit;
  /* 2 */ }

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritence in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit;
  /* 1 */
  vertical-align: inherit;
  /* 2 */ }

/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Add the default cursor in all browsers (opinionated).
 * 3. Prevent font size adjustments after orientation changes in IE and iOS.
 */
html {
  box-sizing: border-box;
  /* 1 */
  cursor: default;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */ }

/* Sections (https://html.spec.whatwg.org/multipage/semantics.html#sections)
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block; }

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: .67em 0; }

/* Grouping content (https://html.spec.whatwg.org/multipage/semantics.html#grouping-content)
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block; }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
nav ol,
nav ul {
  list-style: none; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics (https://html.spec.whatwg.org/multipage/semantics.html#text-level-semantics)
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ffff00;
  color: #000000; }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

/*
 * Remove the text shadow on text selections (opinionated).
 * 1. Restore the coloring undone by defining the text shadow (opinionated).
 */
::-moz-selection {
  background-color: #b3d4fc;
  /* 1 */
  color: #000000;
  /* 1 */
  text-shadow: none; }

::selection {
  background-color: #b3d4fc;
  /* 1 */
  color: #000000;
  /* 1 */
  text-shadow: none; }

/* Embedded content (https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content)
   ========================================================================== */
/*
 * Change the alignment on media elements in all browers (opinionated).
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
svg {
  fill: currentColor; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Tabular data (https://html.spec.whatwg.org/multipage/tables.html#tables)
   ========================================================================== */
/**
 * Collapse border spacing
 */
table {
  border-collapse: collapse; }

/* Forms (https://html.spec.whatwg.org/multipage/forms.html#forms)
   ========================================================================== */
/**
 * Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  margin: 0; }

/**
 * Inherit styling in all browsers (opinionated).
 */
button,
input,
select,
textarea {
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit; }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * 1. Remove the default vertical scrollbar in IE.
 * 2. Change the resize direction on textareas in all browsers (opinionated).
 */
textarea {
  overflow: auto;
  /* 1 */
  resize: vertical;
  /* 2 */ }

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive elements (https://html.spec.whatwg.org/multipage/forms.html#interactive-elements)
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Scripting (https://html.spec.whatwg.org/multipage/scripting.html#scripting-3)
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block; }

/**
 * Add the correct display in IE.
 */
template {
  display: none; }

/* User interaction (https://html.spec.whatwg.org/multipage/interaction.html#editing)
   ========================================================================== */
/*
 * Remove the tapping delay on clickable elements (opinionated).
 * 1. Remove the tapping delay in IE 10.
 */
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  /* 1 */
  touch-action: manipulation; }

/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none; }

/* ARIA (https://w3c.github.io/html-aria/)
   ========================================================================== */
/**
 * Change the cursor on busy elements (opinionated).
 */
[aria-busy="true"] {
  cursor: progress; }

/*
 * Change the cursor on control elements (opinionated).
 */
[aria-controls] {
  cursor: pointer; }

/*
 * Change the display on visually hidden accessible elements (opinionated).
 */
[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute; }

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements (opinionated).
 */
[aria-disabled] {
  cursor: default; }

.brandon-grotesque, html, section .tips-tricks ul li h4 {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 400;
  font-style: normal; }

.brandon-medium, nav ul li a, header h1 span.sub, section.story article h4.subtitle {
  font-weight: 500; }

.brandon-bold, h1, h2, section .overlay .toggleContainer .toggle, h3 {
  font-weight: 700; }

.brandon-black, section.story article h4.subtitle span span {
  font-weight: 900; }

.tns-outer {
  padding: 0 !important; }

.tns-outer [hidden] {
  display: none !important; }

.tns-outer [aria-controls], .tns-outer [data-action] {
  cursor: pointer; }

.tns-slider {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s; }

.tns-slider > .tns-item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.tns-horizontal.tns-subpixel {
  white-space: nowrap; }

.tns-horizontal.tns-subpixel > .tns-item {
  display: inline-block;
  vertical-align: top;
  white-space: normal; }

.tns-horizontal.tns-no-subpixel:after {
  content: '';
  display: table;
  clear: both; }

.tns-horizontal.tns-no-subpixel > .tns-item {
  float: left; }

.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item {
  margin-right: -100%; }

.tns-no-calc {
  position: relative;
  left: 0; }

.tns-gallery {
  position: relative;
  left: 0;
  min-height: 1px; }

.tns-gallery > .tns-item {
  position: absolute;
  left: -100%;
  -webkit-transition: transform 0s, opacity 0s;
  -moz-transition: transform 0s, opacity 0s;
  transition: transform 0s, opacity 0s; }

.tns-gallery > .tns-slide-active {
  position: relative;
  left: auto !important; }

.tns-gallery > .tns-moving {
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  transition: all 0.25s; }

.tns-autowidth {
  display: inline-block; }

.tns-lazy-img {
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
  opacity: 0.6; }

.tns-lazy-img.tns-complete {
  opacity: 1; }

.tns-ah {
  -webkit-transition: height 0s;
  -moz-transition: height 0s;
  transition: height 0s; }

.tns-ovh {
  overflow: hidden; }

.tns-visually-hidden {
  position: absolute;
  left: -10000em; }

.tns-transparent {
  opacity: 0;
  visibility: hidden; }

.tns-fadeIn {
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 0; }

.tns-normal, .tns-fadeOut {
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1; }

.tns-vpfix {
  white-space: nowrap; }

.tns-vpfix > div, .tns-vpfix > li {
  display: inline-block; }

.tns-t-subp2 {
  margin: 0 auto;
  width: 310px;
  position: relative;
  height: 10px;
  overflow: hidden; }

.tns-t-ct {
  width: 2333.3333333%;
  width: -webkit-calc(100% * 70 / 3);
  width: -moz-calc(100% * 70 / 3);
  width: calc(100% * 70 / 3);
  position: absolute;
  right: 0; }

.tns-t-ct:after {
  content: '';
  display: table;
  clear: both; }

.tns-t-ct > div {
  width: 1.4285714%;
  width: -webkit-calc(100% / 70);
  width: -moz-calc(100% / 70);
  width: calc(100% / 70);
  height: 10px;
  float: left; }

/*# sourceMappingURL=sourcemaps/tiny-slider.css.map */
/* Media breakpoints */
/* Container */
/* Simple grid system */
/* Text column position */
/* colors */
html {
  color: #5e6972;
  text-align: left;
  width: 100%;
  height: 100%;
  font-size: 18px;
  line-height: 1.25; }
  @media screen and (min-width: 767px) {
    html {
      font-size: 1.8vw; } }
  @media screen and (min-width: 1500px) {
    html {
      font-size: 27px; } }

body {
  width: 100%;
  height: 100%;
  background: #aae2e3; }
  body:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #64cbbe;
    z-index: 1000;
    transition: 1s;
    pointer-events: none; }
  body.loaded:after {
    opacity: 0; }

h1, h2, section .overlay .toggleContainer .toggle, h3, h4 {
  line-height: 0.9;
  color: #a01ea0;
  margin: 0;
  text-transform: uppercase;
  font-size: 2rem;
  margin-left: 0;
  text-align: center; }
  @media screen and (min-width: 767px) {
    h1, h2, section .overlay .toggleContainer .toggle, h3, h4 {
      font-size: 5rem; } }

h2.smaller, section .overlay .toggleContainer .smaller.toggle {
  font-size: 4rem; }

h3 {
  font-size: 2rem;
  padding: 0 8.33333%; }
  @media screen and (min-width: 767px) {
    h3 {
      font-size: 3.5rem; } }

h4 {
  font-size: 1.5rem;
  text-align: left;
  line-height: 0.9; }
  @media screen and (min-width: 767px) {
    h4 {
      font-size: 2.4rem; } }

.container {
  margin: 0 2.5rem;
  overflow: visible; }
  @media screen and (min-width: 767px) {
    .container {
      margin: 0 3rem; } }
  @media screen and (min-width: 1500px) {
    .container {
      width: 1400px;
      margin: 0 calc((100vw - 1400px) / 2); } }

.introduction, section#disclaimer .text p {
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.4;
  padding: 0 10%;
  color: #fff; }
  @media screen and (min-width: 767px) {
    .introduction, section#disclaimer .text p {
      padding: 0 20%; } }

.scrollmagic-pin-spacer {
  pointer-events: none; }
  .scrollmagic-pin-spacer * {
    pointer-events: all; }

.navToggle {
  color: #a01ea0;
  position: fixed;
  top: 1em;
  right: 1em;
  width: 1rem;
  font-size: 1rem;
  cursor: pointer;
  z-index: 20; }
  .navToggle svg {
    width: 100%; }
    .navToggle svg line {
      transition: all 0.4s ease-out;
      stroke: #a01ea0;
      stroke-width: 15px;
      transform-origin: center; }

.pageOverlay {
  z-index: 10;
  transform: translate3d(100%, 0, 0);
  position: fixed;
  top: 0;
  right: 0;
  background: rgba(160, 30, 160, 0.95);
  width: 100vw;
  height: 100vh;
  padding: 2em;
  transition: 0.4s;
  overflow: scroll;
  -webkit-overflow-scrolling: touch; }
  @media screen and (min-width: 767px) {
    .pageOverlay {
      width: 80vw; } }
  .pageOverlay .loadingScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    align-items: center;
    pointer-events: none;
    opacity: 0; }
    .pageOverlay .loadingScreen .loadingbar {
      position: absolute;
      top: 50%;
      left: 10%;
      width: 80%;
      height: 0.2em;
      border-radius: 0.1em;
      background: rgba(255, 255, 255, 0.2); }
      .pageOverlay .loadingScreen .loadingbar .progress {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: #fff; }
  .pageOverlay .content {
    opacity: 1;
    transition: 1s;
    pointer-events: all;
    color: #fff; }
    @media screen and (min-width: 767px) {
      .pageOverlay .content {
        padding: 1rem; } }
    .pageOverlay .content h1, .pageOverlay .content h2, .pageOverlay .content section .overlay .toggleContainer .toggle, section .overlay .toggleContainer .pageOverlay .content .toggle, .pageOverlay .content h3, .pageOverlay .content h4, .pageOverlay .content h5, .pageOverlay .content h6, .pageOverlay .content p {
      text-align: left;
      color: inherit;
      margin-bottom: 0.2em; }
    .pageOverlay .content h1 {
      font-size: 2rem; }
    .pageOverlay .content h2, .pageOverlay .content section .overlay .toggleContainer .toggle, section .overlay .toggleContainer .pageOverlay .content .toggle {
      font-size: 1rem;
      line-height: 1.25; }
    .pageOverlay .content h3 {
      font-size: 0.7rem;
      padding: 0; }
    .pageOverlay .content .block {
      margin: 1em 0;
      font-size: 0.8em; }
    .pageOverlay .content ul {
      padding-left: 1em; }
    .pageOverlay .content a {
      color: #fff; }
    .pageOverlay .content .images {
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .pageOverlay .content .images .image {
        padding: 0.2em; }
        .pageOverlay .content .images .image:first-of-type {
          padding-left: 0; }
        .pageOverlay .content .images .image:last-of-type {
          padding-right: 0; }
        .pageOverlay .content .images .image img {
          max-width: 100%;
          height: auto; }
    .pageOverlay .content .downloads a {
      text-decoration: underline;
      font-size: 0.8em;
      color: #fff;
      display: block;
      margin-bottom: 0.5em; }
      .pageOverlay .content .downloads a:before {
        content: "";
        height: 2.2em;
        width: 2em;
        vertical-align: top;
        margin: 0 1em 0 0;
        padding: 0.5em 0.2em;
        background-color: #fff;
        border: 1px solid grey;
        border-top-right-radius: 7px;
        box-shadow: 1px 1px #ccc;
        font-size: 0.4em;
        font-weight: 700;
        font-family: sans-serif;
        line-height: 2em;
        text-decoration: none;
        display: inline-block;
        box-sizing: content-box; }
      .pageOverlay .content .downloads a[href$=".pdf"]:before {
        color: red;
        border-color: red;
        content: 'PDF'; }
      .pageOverlay .content .downloads a[href$=".doc"]:before, .pageOverlay .content .downloads a[href$=".docx"]:before {
        color: blue;
        border-color: blue;
        content: 'DOC'; }
  .pageOverlay.loading .loadingScreen {
    opacity: 1; }
  .pageOverlay.loading .content {
    opacity: 0;
    pointer-events: none; }

nav {
  z-index: 10;
  transform: translate3d(100%, 0, 0);
  position: fixed;
  top: 0;
  right: 0;
  background: rgba(160, 30, 160, 0.95);
  width: 90vw;
  height: 100vh;
  overflow: auto;
  padding: 2em 0 5em 0;
  transition: 0.2s; }
  @media screen and (min-width: 767px) {
    nav {
      width: 40vw; } }
  nav ul {
    position: relative;
    padding: 0 1.3rem; }
    nav ul:before {
      content: "";
      display: block;
      position: absolute;
      width: 0.1em;
      height: calc(100% - 0.5em);
      top: 0.2em;
      left: 1.3rem;
      background: #fff; }
    nav ul li {
      margin: 1em 0;
      padding: 0 1em;
      position: relative; }
      nav ul li:before {
        content: "";
        display: block;
        width: 1rem;
        height: 1rem;
        background: #a01ea0;
        border: 0.1rem solid #fff;
        border-radius: 50%;
        position: absolute;
        left: calc( (1rem / 2 * -1) + 0.1rem / 2);
        top: 0.2em; }
      nav ul li:after {
        content: "";
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background: #ffff64;
        border-radius: 50%;
        position: absolute;
        top: calc((1rem - 0.6rem) * 0.5 + 0.2em);
        left: calc( (1rem / 2 * -1) + 0.1rem / 2 + ((1rem - 0.6rem) * 0.5));
        opacity: 0;
        transition: 0.2s; }
      nav ul li a {
        color: #fff;
        text-transform: uppercase;
        text-decoration: none; }
      nav ul li:hover:after {
        opacity: 1; }

body:before {
  content: "";
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 9;
  transition: 0.2s;
  pointer-events: none; }

body.navOpen nav {
  display: block;
  pointer-events: all;
  transform: translate3d(0, 0, 0); }

body.pageOpen .pageOverlay {
  display: block;
  pointer-events: all;
  transform: translate3d(0, 0, 0); }

body.overlayOpen {
  overflow: hidden; }

body.navOpen, body.pageOpen {
  overflow: hidden; }
  body.navOpen .navToggle svg line, body.pageOpen .navToggle svg line {
    stroke: #fff; }
    body.navOpen .navToggle svg line.first, body.pageOpen .navToggle svg line.first {
      transform: rotate(45deg) translateY(35%); }
    body.navOpen .navToggle svg line.second, body.pageOpen .navToggle svg line.second {
      opacity: 0; }
    body.navOpen .navToggle svg line.third, body.pageOpen .navToggle svg line.third {
      transform: rotate(-45deg) translateY(-35%); }
  body.navOpen:before, body.pageOpen:before {
    opacity: 1; }

header {
  padding: 3rem 0 0 0; }
  @media screen and (min-width: 767px) {
    header {
      height: 100vh; } }
  header > div {
    position: relative;
    height: 100%; }
  header .schoolIntro {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 2em;
    align-items: center;
    flex-wrap: wrap; }
    @media screen and (min-width: 767px) {
      header .schoolIntro {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 70%;
        flex-wrap: nowrap; } }
    header .schoolIntro div {
      width: 20%;
      order: 10; }
      @media screen and (max-width: 767px) {
        header .schoolIntro div {
          transform: translateY(-5em); } }
      @media screen and (min-width: 767px) {
        header .schoolIntro div {
          width: 80%; } }
      header .schoolIntro div.school {
        order: 1;
        width: 80%;
        margin: 0 10%;
        text-align: center; }
        @media screen and (min-width: 767px) {
          header .schoolIntro div.school {
            width: 300%;
            order: 10; } }
        @media screen and (max-width: 767px) {
          header .schoolIntro div.school {
            transform: translateY(-3em); } }
        header .schoolIntro div.school svg {
          max-width: 100%;
          perspective: 30px; }
  header h1 span.sub {
    font-size: .5em;
    display: block;
    margin-bottom: 0.7em;
    color: #fff; }
    @media screen and (min-width: 767px) {
      header h1 span.sub {
        font-size: .3em; } }

.scrollArrow {
  display: block;
  text-align: center;
  padding-top: 2em;
  position: absolute;
  bottom: 1em;
  left: calc(50% - 1rem); }
  .scrollArrow svg {
    width: 2rem; }

section {
  overflow-x: hidden;
  overflow: hidden;
  position: relative; }
  section h2, section .overlay .toggleContainer .toggle {
    margin: 0rem 0 10rem 0; }
  section div.largeTile {
    position: relative; }
    @media screen and (min-width: 767px) {
      section div.largeTile {
        margin-bottom: 4rem;
        align-self: flex-start;
        padding-top: 14rem; } }
    section div.largeTile svg {
      width: 100%;
      min-height: 60vw; }
      @media screen and (min-width: 767px) {
        section div.largeTile svg {
          width: 110%;
          position: absolute;
          bottom: 0em;
          left: 0;
          min-height: 40vw; } }
      @media screen and (min-width: 1500px) {
        section div.largeTile svg {
          width: 100%;
          height: 570px;
          min-height: unset; } }
  section .text-column {
    position: relative; }
    section .text-column div.school {
      pointer-events: none;
      display: none;
      vertical-align: top; }
      @media screen and (min-width: 767px) {
        section .text-column div.school {
          display: inline-block;
          position: absolute;
          width: calc(100vw - 6rem);
          top: 10%;
          left: 0; } }
      section .text-column div.school .school-container {
        pointer-events: none;
        width: 100%; }
        @media screen and (min-width: 767px) {
          section .text-column div.school .school-container {
            height: 0;
            padding-top: 33.05369%;
            position: relative; }
            section .text-column div.school .school-container svg {
              pointer-events: none;
              position: absolute;
              bottom: 0;
              left: 0;
              max-width: 100%;
              width: 100%;
              height: auto; } }
    @media screen and (min-width: 767px) and (min-width: 1500px) {
      section .text-column div.school .school-container svg {
        max-width: none;
        width: auto; } }
        @media screen and (min-width: 1800px) {
          section .text-column div.school .school-container {
            transform: scale(1.2) translateX(5%); } }
      section .text-column div.school img {
        max-width: 100%; }
    section .text-column .content {
      display: inline-block;
      vertical-align: top; }
      @media screen and (min-width: 767px) {
        section .text-column .content {
          width: 37.5%;
          margin-left: 58.33333%; } }
      section .text-column .content.section-intro {
        font-size: 1.2rem;
        color: #a01ea0; }
      section .text-column .content h4 {
        margin-top: 1em; }
        section .text-column .content h4:first-of-type {
          margin-top: 3em; }
      section .text-column .content h5 {
        margin: 0;
        font-size: 1.5rem;
        text-transform: uppercase;
        color: #fff;
        padding-top: 1em; }
      section .text-column .content p {
        display: block;
        padding-bottom: 1em; }
        section .text-column .content p.dotted {
          padding: 2em 0;
          margin-top: -0.5em; }
          @media screen and (max-width: 767px) {
            section .text-column .content p.dotted {
              margin-bottom: 2em; } }
          section .text-column .content p.dotted:after {
            content: "...........................";
            display: block;
            letter-spacing: 0.2em;
            /* increase space between dots */
            font-size: 1.3em;
            /* increase size of dots */
            font-weight: bold;
            padding-top: 2em;
            color: #fff; }
          section .text-column .content p.dotted:last-of-type:after {
            display: none; }
      section .text-column .content a {
        color: inherit; }
        section .text-column .content a.readmore {
          display: inline-block;
          background-color: #64cbbe;
          padding: 0.5em;
          font-size: 0.6em;
          text-transform: uppercase;
          color: #fff;
          text-decoration: none;
          margin-top: 2em; }
          section .text-column .content a.readmore:after {
            content: ">";
            display: inline-block;
            margin-left: 0.5em;
            padding-top: 0;
            line-height: 1.2;
            vertical-align: top;
            transition: 0.2s; }
          section .text-column .content a.readmore:hover:after {
            margin-left: 1em; }
    @media screen and (min-width: 767px) {
      section .text-column.textcolumn-size-middle .school {
        width: 45.83333%; } }
    @media screen and (min-width: 767px) {
      section .text-column.textcolumn-size-middle .content {
        width: 54.16667%;
        margin-left: 45.83333%; } }
    section .text-column.textcolumn-size-large .school {
      width: 37.5%; }
    section .text-column.textcolumn-size-large .content {
      width: 58.33333%;
      margin-left: 37.5%; }
  section h3 {
    margin: 0;
    position: relative;
    padding-left: 2.5rem;
    margin-left: 0.3em;
    text-align: left; }
    @media screen and (min-width: 767px) {
      section h3 {
        margin: 2em 0; } }
    section h3[data-number]:before {
      content: attr(data-number);
      display: block;
      width: 3.2rem;
      height: 3.2rem;
      line-height: 3.2rem;
      border-radius: 50%;
      color: #fff;
      background: #64cbbe;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(-50%, 30%);
      transform: translate(-50%, -120%);
      left: 50%;
      font-size: 0.75em; }
      @media screen and (min-width: 767px) {
        section h3[data-number]:before {
          transform: translate(-50%, -120%);
          left: 50%; } }
  section.researchResults {
    display: block; }
    section.researchResults .bmi {
      min-height: 100vh;
      text-align: center; }
      @media screen and (min-width: 767px) {
        section.researchResults .bmi {
          min-height: auto;
          width: 58.33333%;
          position: absolute;
          top: 0;
          left: 0;
          width: 36%; } }
      section.researchResults .bmi svg {
        margin-top: 10vh;
        max-height: 100%;
        height: auto;
        width: calc(100vw / 2); }
        @media screen and (min-width: 767px) {
          section.researchResults .bmi svg {
            max-height: 80vh; } }
        @media screen and (min-width: 1800px) {
          section.researchResults .bmi svg {
            width: 900px;
            margin-left: -10vw; } }
      section.researchResults .bmi span {
        font-size: 0.6em;
        margin-left: calc(100vw / 6);
        display: block; }
    @media screen and (min-width: 767px) {
      section.researchResults .text-column {
        width: auto;
        padding-left: 0; } }
    section.researchResults .text-column .content h4:first-of-type {
      margin-top: 10vh; }
    section.researchResults .text-column .content p:last-of-type {
      margin-bottom: 30vh; }
  section .tips-tricks {
    background: rgba(255, 255, 255, 0.15);
    padding: 2em 0 3em 0;
    font-size: 0.9rem;
    margin-top: 2rem; }
    section .tips-tricks h3 {
      margin: 0.5em 0 1em 0 !important;
      padding: 0;
      font-size: 1.5rem !important;
      text-align: left !important; }
      @media screen and (min-width: 767px) {
        section .tips-tricks h3 {
          font-size: 2em; } }
    section .tips-tricks ul {
      list-style: none;
      margin: 0;
      padding: 0; }
      section .tips-tricks ul li {
        padding: 1em 2em;
        border-top: 1px solid #fff;
        cursor: pointer; }
        section .tips-tricks ul li h4 {
          color: #fff;
          font-size: 1em;
          position: relative; }
          section .tips-tricks ul li h4:before {
            content: "+";
            position: absolute;
            top: -0.2em;
            left: -1em;
            transition: 0.4s;
            font-size: 1.5em; }
        section .tips-tricks ul li div.hiddenContent {
          display: none; }
          section .tips-tricks ul li div.hiddenContent h2, section .tips-tricks ul li div.hiddenContent .overlay .toggleContainer .toggle, section .overlay .toggleContainer .tips-tricks ul li div.hiddenContent .toggle {
            font-size: 2rem; }
          section .tips-tricks ul li div.hiddenContent h3 {
            font-size: 1rem;
            padding: 0; }
          section .tips-tricks ul li div.hiddenContent .block {
            margin: 1em 0; }
          section .tips-tricks ul li div.hiddenContent .images {
            display: flex;
            justify-content: space-between;
            align-items: center; }
            section .tips-tricks ul li div.hiddenContent .images .image {
              padding: 0.2em; }
              section .tips-tricks ul li div.hiddenContent .images .image:first-of-type {
                padding-left: 0; }
              section .tips-tricks ul li div.hiddenContent .images .image:last-of-type {
                padding-right: 0; }
              section .tips-tricks ul li div.hiddenContent .images .image img {
                max-width: 100%;
                height: auto; }
          section .tips-tricks ul li div.hiddenContent .video-container {
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 30px;
            height: 0;
            overflow: hidden; }
          section .tips-tricks ul li div.hiddenContent .video-container iframe,
          section .tips-tricks ul li div.hiddenContent .video-container object,
          section .tips-tricks ul li div.hiddenContent .video-container embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%; }
        section .tips-tricks ul li.active h4:before {
          transform: rotate(45deg); }
        section .tips-tricks ul li:last-child {
          border-bottom: 1px solid #fff; }
  section.story {
    padding-top: 8rem;
    background: #ecc1cb; }
    section.story h2, section.story .overlay .toggleContainer .toggle {
      color: #ff7d14;
      margin-bottom: 3rem; }
    section.story h3 {
      margin-top: 2em;
      text-align: center;
      margin-left: 0;
      padding-left: 0;
      padding-right: 0;
      font-size: 2.2rem;
      margin-bottom: 1em; }
      @media screen and (min-width: 767px) {
        section.story h3 {
          margin: 4em 10% 2em 10%;
          padding: 0;
          width: 80%;
          font-size: 3.2rem;
          text-align: center; } }
    section.story .centered p {
      font-size: 1.5rem;
      line-height: 1.4;
      color: #fff; }
      @media screen and (min-width: 767px) {
        section.story .centered p {
          text-align: center;
          padding: 0 10%; } }
    section.story article {
      position: relative;
      overflow: hidden; }
      section.story article:first-of-type {
        background: #ecc1cb; }
      section.story article:nth-of-type(2) {
        background: #fa876c; }
        section.story article:nth-of-type(2) h3, section.story article:nth-of-type(2) .intro p, section.story article:nth-of-type(2) h4 {
          color: #ffff64; }
          section.story article:nth-of-type(2) h3[data-number]:before, section.story article:nth-of-type(2) .intro p[data-number]:before, section.story article:nth-of-type(2) h4[data-number]:before {
            background: #0014dc; }
        section.story article:nth-of-type(2) p {
          color: #fff; }
      section.story article:nth-of-type(3) {
        background: #f3cd84; }
      section.story article:nth-of-type(4) {
        background: #64cbbe; }
        section.story article:nth-of-type(4) h3, section.story article:nth-of-type(4) .intro p, section.story article:nth-of-type(4) h4 {
          color: #fff; }
          section.story article:nth-of-type(4) h3[data-number]:before, section.story article:nth-of-type(4) .intro p[data-number]:before, section.story article:nth-of-type(4) h4[data-number]:before {
            background: #a01ea0; }
        section.story article:nth-of-type(4) p {
          color: #fff; }
          section.story article:nth-of-type(4) p a.readmore {
            background: #a01ea0; }
      section.story article h4.subtitle {
        margin: 8rem 0 0rem 0;
        text-align: center;
        color: #fff;
        font-size: 1.2rem;
        width: auto; }
        @media screen and (min-width: 767px) {
          section.story article h4.subtitle {
            margin: 8rem 0 -2rem 0; } }
        section.story article h4.subtitle span {
          position: relative; }
          @media screen and (min-width: 767px) {
            section.story article h4.subtitle span:after {
              content: "";
              display: block;
              position: absolute;
              bottom: 0em;
              left: 0;
              width: 100%;
              height: 0.1em;
              background: #fff; } }
      section.story article .parallaxContainer {
        overflow: hidden; }
        section.story article .parallaxContainer .parallax {
          position: absolute;
          top: 0;
          right: -10vh;
          max-width: 75vw;
          height: auto;
          opacity: 0.2; }
      section.story article .intro {
        font-size: 1.2rem;
        color: #a01ea0;
        display: flex;
        flex-direction: column; }
        @media screen and (min-width: 767px) {
          section.story article .intro {
            flex-direction: row;
            margin-bottom: 5rem; } }
        section.story article .intro > div {
          width: 100%;
          display: inline-block; }
    section.story:after {
      content: "";
      display: block;
      height: 5rem;
      width: 100%;
      background: #fff; }
  section .overlay {
    transform: translateX(100%);
    transition: 1s;
    z-index: 100;
    background: #fff;
    width: 90%;
    margin: 0;
    color: #000;
    padding: 2em 0;
    -webkit-box-shadow: 10px 10px 28px 6px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 10px 10px 28px 6px rgba(0, 0, 0, 0.07);
    box-shadow: 10px 10px 28px 6px rgba(0, 0, 0, 0.07); }
    section .overlay.open {
      transform: translateX(0%); }
      section .overlay.open .toggleContainer .toggle {
        color: transparent; }
        section .overlay.open .toggleContainer .toggle:after {
          transform: rotate(180deg); }
        section .overlay.open .toggleContainer .toggle.open {
          display: none; }
        section .overlay.open .toggleContainer .toggle.close {
          display: block; }
    section .overlay .toggleContainer {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 20; }
      section .overlay .toggleContainer .open {
        width: 6rem; }
      section .overlay .toggleContainer .toggle {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 30;
        z-index: 40;
        transform: translateX(-100%);
        background: #fff;
        display: block;
        border-top-left-radius: 1em;
        border-bottom-left-radius: 1em;
        text-align: left;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.6rem;
        line-height: 1;
        padding: 1em 1em 1em 3em;
        color: #0014dc; }
        section .overlay .toggleContainer .toggle.close {
          height: 4em;
          display: none;
          transform: translateX(-99%);
          padding: 1em; }
          section .overlay .toggleContainer .toggle.close:after {
            position: static; }
        section .overlay .toggleContainer .toggle:after {
          content: "";
          background: url("../img/arrow-left.svg");
          background-position: left center;
          background-repeat: no-repeat;
          background-size: 01em auto;
          display: block;
          position: absolute;
          top: 50%;
          left: 0.75em;
          width: 2em;
          height: 100%;
          transform: translateY(-50%); }
    section .overlay .navigation {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      z-index: 10;
      width: 10em;
      cursor: pointer;
      background: -moz-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%);
      background: -webkit-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%);
      background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
      outline: none;
      transition: 0.1s; }
      section .overlay .navigation.invisible {
        opacity: 0;
        cursor: default; }
      section .overlay .navigation:before {
        content: url("../img/button-prev.svg");
        display: block;
        position: absolute;
        top: 50%;
        left: 1em;
        width: 2em;
        transform: translateY(-50%); }
      section .overlay .navigation.nav-next {
        left: auto;
        right: 0;
        background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); }
        section .overlay .navigation.nav-next:before {
          content: url("../img/button-next.svg");
          left: auto;
          right: 1em;
          transform: translateY(-50%); }
    section .overlay .tns-item {
      padding: 0 2em;
      font-size: 0.7rem !important; }
      section .overlay .tns-item h2, section .overlay .tns-item .toggleContainer .toggle, section .overlay .toggleContainer .tns-item .toggle {
        color: #0014dc;
        font-size: 2rem;
        text-align: left;
        margin: 0; }
      section .overlay .tns-item h4 {
        font-size: 1rem;
        color: #000; }
        @media screen and (min-width: 767px) {
          section .overlay .tns-item h4 {
            font-size: 1.2rem; } }
  section#disclaimer {
    overflow-x: hidden; }
    section#disclaimer .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 3rem; }
      @media screen and (min-width: 767px) {
        section#disclaimer .text {
          min-height: 100vh; } }
    section#disclaimer .backgroundInformation {
      position: absolute;
      top: 12vh;
      right: 0; }
      @media screen and (min-width: 767px) {
        section#disclaimer .backgroundInformation {
          top: 20vh; } }
  @media screen and (min-width: 767px) {
    section#introduction1 {
      padding-top: 4rem; } }
  section#introduction1 h2, section#introduction1 .overlay .toggleContainer .toggle {
    margin-bottom: 0; }
  section#introduction1 h4 {
    font-size: 1.2rem; }
    @media screen and (min-width: 767px) {
      section#introduction1 h4 {
        font-size: 2.8rem;
        margin-top: 1em; }
        section#introduction1 h4:first-of-type {
          margin-top: 35vh; } }
  section#introduction2 {
    position: relative;
    margin-bottom: 3rem;
    overflow: hidden; }
    @media screen and (min-width: 767px) {
      section#introduction2 {
        height: 100vh;
        margin-bottom: 0; } }
    section#introduction2 strong {
      font-size: 2rem;
      text-align: center;
      display: block;
      text-align: center;
      width: 100%;
      color: #fff;
      text-transform: uppercase;
      line-height: 0.9;
      margin: 2em 0; }
      @media screen and (min-width: 767px) {
        section#introduction2 strong {
          margin: 0;
          font-size: 3rem;
          position: absolute;
          bottom: 2.5em;
          left: 0; } }
    section#introduction2 .text-centered {
      font-size: 1.2rem;
      line-height: 1.4;
      color: #fff; }
      @media screen and (min-width: 767px) {
        section#introduction2 .text-centered {
          padding: 8.33333%;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%); } }
      section#introduction2 .text-centered i {
        display: inline-block;
        position: relative;
        z-index: 2; }
  section#doorpakken {
    background: #fff;
    min-height: 100vh;
    position: relative;
    padding-bottom: 0;
    padding-top: 1rem;
    text-align: center; }
    section#doorpakken .school {
      text-align: center;
      display: block;
      position: relative; }
      @media screen and (min-width: 767px) {
        section#doorpakken .school {
          margin-bottom: 30vh; } }
      section#doorpakken .school .schoolContainer svg {
        position: absolute;
        left: 0;
        top: 0;
        max-width: 100%; }
        section#doorpakken .school .schoolContainer svg.original {
          position: relative; }
      section#doorpakken .school .schoolContainer .grid {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 100vw;
        background-image: url("../img/school-grid.svg");
        background-position: center;
        background-size: 200%;
        max-width: 100%;
        transform: translateY(-50%); }
        @media screen and (min-width: 767px) {
          section#doorpakken .school .schoolContainer .grid {
            height: calc(0.3598582474 * 100vw);
            background-size: 100%; } }
      section#doorpakken .school .schoolgrid {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 60vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        z-index: 1;
        transform: translateY(-50%); }
        section#doorpakken .school .schoolgrid > div {
          height: 33%;
          position: relative; }
          section#doorpakken .school .schoolgrid > div:nth-child(odd) {
            left: -30%; }
          section#doorpakken .school .schoolgrid > div:nth-child(even) {
            left: -15%; }
          section#doorpakken .school .schoolgrid > div svg {
            position: absolute; }
    section#doorpakken h2, section#doorpakken .overlay .toggleContainer .toggle {
      position: relative;
      z-index: 2;
      margin-bottom: 2rem;
      margin-top: 1rem; }
    section#doorpakken h1 {
      padding: 3rem 0; }
    section#doorpakken .content {
      color: #000; }
  section#joinus {
    background: #fff;
    color: #000;
    padding-top: 5rem;
    padding-bottom: 2rem;
    font-size: 0.8em; }
    section#joinus .container {
      display: flex;
      justify-content: space-between;
      flex-direction: column; }
      @media screen and (min-width: 767px) {
        section#joinus .container {
          flex-direction: row; } }
      section#joinus .container > div {
        padding: 3rem 0; }
        @media screen and (min-width: 767px) {
          section#joinus .container > div {
            width: 50%;
            padding: 3rem; } }
        section#joinus .container > div h4 {
          margin: 0; }
        section#joinus .container > div p {
          font-size: 0.9em; }
        section#joinus .container > div ul {
          list-style: none;
          padding: 0; }
          section#joinus .container > div ul li {
            margin-bottom: 1em; }
            section#joinus .container > div ul li label {
              text-transform: uppercase;
              display: block;
              padding: 0.5em 0 0.2em 0;
              font-size: 0.7em; }
            section#joinus .container > div ul li input, section#joinus .container > div ul li textarea {
              border: 2px solid #a01ea0;
              width: 100%; }
              @media screen and (min-width: 767px) {
                section#joinus .container > div ul li input, section#joinus .container > div ul li textarea {
                  width: 80%; } }
        section#joinus .container > div input[type=submit] {
          background: #a01ea0;
          color: #fff;
          border: none;
          text-transform: uppercase;
          padding: 0.2em 0.6em; }
        section#joinus .container > div:first-of-type:after {
          content: "...........................";
          display: block;
          letter-spacing: 0.2em;
          /* increase space between dots */
          font-size: 1.3em;
          /* increase size of dots */
          font-weight: bold;
          padding-top: 4em;
          color: #a01ea0;
          font-size: 1.3rem; }
        @media screen and (min-width: 767px) {
          section#joinus .container > div:first-of-type {
            border-bottom: none;
            border-right: 2px solid #a01ea0; }
            section#joinus .container > div:first-of-type:after {
              display: none; } }

footer {
  background: #a01ea0;
  color: #fff;
  text-align: center;
  padding: 1rem 0;
  position: relative; }
  footer .logos > div {
    display: inline-block;
    width: 20%;
    padding: 1em; }
    footer .logos > div img {
      max-width: 100%; }

.grid-debug .container {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% - 3rem * 2);
  height: 100%;
  pointer-events: none; }
  .grid-debug .container .line {
    font-size: 0.8rem;
    position: absolute;
    height: 100%;
    border-left: 2px solid #fff;
    padding-top: 1em;
    padding-left: 0.5em; }
    .grid-debug .container .line.text-column {
      color: red;
      border-color: red;
      left: 58.33333%; }
    .grid-debug .container .line.text-column-middle {
      color: green;
      border-color: green;
      left: 45.83333%;
      padding-top: 2em; }
    .grid-debug .container .line.text-column-large {
      color: blue;
      border-color: blue;
      left: 37.5%; }

.grid-debug .container-left {
  top: 0;
  height: 100%;
  position: fixed;
  left: 3rem;
  color: black;
  border-left: 2px solid black;
  font-size: 0.8rem;
  padding: 1em 0.5em; }

.grid-debug .container-right {
  top: 0;
  height: 100%;
  position: fixed;
  right: 3rem;
  left: auto;
  color: black;
  border-right: 2px solid black;
  font-size: 0.8rem;
  padding: 1em 0.5em; }

div.page {
  width: 80vw;
  background: rgba(160, 30, 160, 0.9);
  height: 100%;
  color: #fff;
  padding: 3rem;
  position: fixed;
  top: 0;
  right: 0; }
  div.page:before {
    content: "";
    position: absolute;
    top: 0;
    left: -20vw;
    width: 20vw;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    transition: 0.2s; }