/* ===========================================================================
   Colour palette — C-Media / Tutor
   Brand hues: 185° aqua (#79D5DE) and 210° blue (#80A8D7).
   In light mode the raw brand colours appear only as fills; text and buttons
   use darkened members of the same hues. In dark mode the raw brand colours
   come forward as text/links/buttons. See temp/colour-scheme-instruction_1.md.
   =========================================================================== */

:root {
  --bg:                 #FFFFFF;
  --bg-subtle:          #F4FAFB;
  --bg-accent:          #E6F5F7;
  --bg-accent-strong:   #79D5DE;

  --ink:                #17232E;
  --ink-muted:          #52646F;
  --heading:            #3574B5;
  --link:               #0D7480;
  --link-hover:         #0A6570;

  --border:             #DCE7EA;
  --border-strong:      #BFD3D8;
  --border-accent:      #0D7480;

  --btn-bg:             #0D7480;
  --btn-bg-hover:       #0A6570;
  --btn-text:           #FFFFFF;

  --on-accent:          #17232E;
  --on-accent-heading:  #0E383F;
  --on-accent-muted:    #155159;
  --btn-on-accent-bg:   #17232E;
  --btn-on-accent-text: #FFFFFF;

  --focus:              #0D7480;

  --danger:             #B4322A;
  --warning:            #8F5A0D;
  --success:            #4E7A2E;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:                 #0F171B;
    --bg-subtle:          #162127;
    --bg-accent:          #0F3238;
    --bg-accent-strong:   #0F3238;

    --ink:                #DDE7EB;
    --ink-muted:          #93A6AE;
    --heading:            #79D5DE;
    --link:               #80A8D7;
    --link-hover:         #9DC0E4;

    --border:             #26343C;
    --border-strong:      #36474F;
    --border-accent:      #3E5C64;

    --btn-bg:             #79D5DE;
    --btn-bg-hover:       #92E0E8;
    --btn-text:           #0F171B;

    --on-accent:          #DDE7EB;
    --on-accent-heading:  #79D5DE;
    --on-accent-muted:    #93A6AE;
    --btn-on-accent-bg:   #79D5DE;
    --btn-on-accent-text: #0F171B;

    --focus:              #79D5DE;

    --danger:             #E88178;
    --warning:            #DDA64A;
    --success:            #9BC470;
  }
}


/* !Normalize v3.0.2 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}


/* !Reset */

html, body, form, input {
	font-size:100%;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

h1,h2 {
	margin:0;
	padding:0;
	text-rendering:optimizeLegibility;
}

div,img a {
	text-decoration:none;
	margin-top:0px;
}

body {
	
	font-size:100%;
	-webkit-text-size-adjust:100%;
}

#body_wrapper {
	width:100%;
}

textarea, input {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   line-height:inherit;
}

textarea {
	display:block;
}

p {
	text-rendering:optimizeLegibility;
}

img {
	border-width:0px;
	max-width:100%;
}

ul {
	margin:0px;
	padding:0px;
	margin-left:0.6em;
	padding-left:0.6em;
	list-style-position: outside;
}

li {
	margin:0px;
	padding:0px;
	padding-left:10px;
}

table, td, tr {
	border-spacing: 0;
	border-collapse:collapse;
	margin:0px;
	padding:0px;
	vertical-align: top;	
}

*:focus {
	outline:none;
}

*, *:before, *:after {
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
  box-sizing:border-box;
}

.preload {
	transition:none !important;
	-webkit-transition:none !important;
	-moz-transition:none !important;
	-ms-transition:none !important;
	-o-transition:none !important;
}





/* !KEYFRAMES */
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes slideDown {
  0% {
    -moz-transform: translateY(-100%);
  }

  100% {
    -moz-transform: translateY(0);
  }
}

@-o-keyframes slideDown {
  0% {
    -o-transform: translateY(-100%);
  }

  100% {
    -o-transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-100%);
  }
}
@-moz-keyframes slideUp {
  0% {
    -moz-transform: translateY(0);
  }

  100% {
    -moz-transform: translateY(-100%);
  }
}
@-o-keyframes slideUp {
  0% {
    -o-transform: translateY(0);
  }

  100% {
    -o-transform: translateY(-100%);
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 25%, 0);
    transform: translate3d(0, 25%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 25%, 0);
    transform: translate3d(0, 25%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}


@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  40% {
    -webkit-transform: scale3d(1.06, 1.06, 1.06);
    transform: scale3d(1.06, 1.06, 1.06);
  }
  
  60% {
    -webkit-transform: scale3d(1.06, 1.06, 1.06);
    transform: scale3d(1.06, 1.06, 1.06);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  40% {
    -webkit-transform: scale3d(1.06, 1.06, 1.06);
    transform: scale3d(1.06, 1.06, 1.06);
  }
  
  60% {
    -webkit-transform: scale3d(1.06, 1.06, 1.06);
    transform: scale3d(1.06, 1.06, 1.06);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}





.bouncejs {
  -webkit-animation: bouncejs 1000ms linear both;
  animation: bouncejs 1000ms linear both;
}

/* Generated with Bounce.js. Edit at https://goo.gl/VuGq6m */

@-webkit-keyframes bouncejs { 
  0% { -webkit-transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5.81% { -webkit-transform: matrix3d(0.923, 0, 0, 0, 0, 0.923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.923, 0, 0, 0, 0, 0.923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  11.61% { -webkit-transform: matrix3d(0.982, 0, 0, 0, 0, 0.982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.982, 0, 0, 0, 0, 0.982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.42% { -webkit-transform: matrix3d(1.013, 0, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.013, 0, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.12% { -webkit-transform: matrix3d(1.021, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.021, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30.33% { -webkit-transform: matrix3d(1.015, 0, 0, 0, 0, 1.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.015, 0, 0, 0, 0, 1.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  37.44% { -webkit-transform: matrix3d(1.005, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.005, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.54% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  51.65% { -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80.28% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

@keyframes bouncejs { 
  0% { -webkit-transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5.81% { -webkit-transform: matrix3d(0.923, 0, 0, 0, 0, 0.923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.923, 0, 0, 0, 0, 0.923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  11.61% { -webkit-transform: matrix3d(0.982, 0, 0, 0, 0, 0.982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.982, 0, 0, 0, 0, 0.982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.42% { -webkit-transform: matrix3d(1.013, 0, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.013, 0, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.12% { -webkit-transform: matrix3d(1.021, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.021, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30.33% { -webkit-transform: matrix3d(1.015, 0, 0, 0, 0, 1.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.015, 0, 0, 0, 0, 1.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  37.44% { -webkit-transform: matrix3d(1.005, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.005, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.54% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  51.65% { -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80.28% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}


.bouncejs_fadeinup {
  -webkit-animation: bouncejs_fadeinup 1000ms linear infinite both;
  animation: bouncejs_fadeinup 1000ms linear infinite both;
}

/* Generated with Bounce.js. Edit at https://goo.gl/N2UwKE */

@-webkit-keyframes bouncejs_fadeinup { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 62, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 62, 0, 1); }
  7.61% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 28.752, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 28.752, 0, 1); }
  11.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 16.267, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 16.267, 0, 1); }
  15.12% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 7.358, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 7.358, 0, 1); }
  18.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.248, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.248, 0, 1); }
  22.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.34, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.34, 0, 1); }
  30.23% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.485, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.485, 0, 1); }
  50.25% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.943, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.943, 0, 1); }
  70.27% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.215, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.215, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

@keyframes bouncejs_fadeinup { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 62, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 62, 0, 1); }
  7.61% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 28.752, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 28.752, 0, 1); }
  11.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 16.267, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 16.267, 0, 1); }
  15.12% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 7.358, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 7.358, 0, 1); }
  18.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.248, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.248, 0, 1); }
  22.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.34, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.34, 0, 1); }
  30.23% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.485, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.485, 0, 1); }
  50.25% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.943, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.943, 0, 1); }
  70.27% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.215, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.215, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}



@keyframes chosen-drop {
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); opacity: 0; }
  4% { transform: matrix3d(0.96758, 0, 0, 0, 0, 0.96758, 0, 0, 0, 0, 1, 0, 0, -6.46592, 0, 1); }
  8% { transform: matrix3d(0.96176, 0, 0, 0, 0, 0.96176, 0, 0, 0, 0, 1, 0, 0, -2.91725, 0, 1); }
  12% { transform: matrix3d(0.96958, 0, 0, 0, 0, 0.96958, 0, 0, 0, 0, 1, 0, 0, -0.25224, 0, 1); opacity: 1; }
  16% { transform: matrix3d(0.98144, 0, 0, 0, 0, 0.98144, 0, 0, 0, 0, 1, 0, 0, 1.26207, 0, 1); }
  20% { transform: matrix3d(0.99188, 0, 0, 0, 0, 0.99188, 0, 0, 0, 0, 1, 0, 0, 1.76942, 0, 1); }
  24% { transform: matrix3d(0.99884, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 1.60106, 0, 1); }
  28% { transform: matrix3d(1.0023, 0, 0, 0, 0, 1.0023, 0, 0, 0, 0, 1, 0, 0, 1.10713, 0, 1); }
  32% { transform: matrix3d(1.00324, 0, 0, 0, 0, 1.00324, 0, 0, 0, 0, 1, 0, 0, 0.56005, 0, 1); }
  36% { transform: matrix3d(1.00278, 0, 0, 0, 0, 1.00278, 0, 0, 0, 0, 1, 0, 0, 0.12148, 0, 1); }
  40% { transform: matrix3d(1.00181, 0, 0, 0, 0, 1.00181, 0, 0, 0, 0, 1, 0, 0, -0.14782, 0, 1); }
  44% { transform: matrix3d(1.00088, 0, 0, 0, 0, 1.00088, 0, 0, 0, 0, 1, 0, 0, -0.25729, 0, 1); }
  48% { transform: matrix3d(1.00021, 0, 0, 0, 0, 1.00021, 0, 0, 0, 0, 1, 0, 0, -0.25225, 0, 1); }
  52% { transform: matrix3d(0.99986, 0, 0, 0, 0, 0.99986, 0, 0, 0, 0, 1, 0, 0, -0.18613, 0, 1); }
  56% { transform: matrix3d(0.99973, 0, 0, 0, 0, 0.99973, 0, 0, 0, 0, 1, 0, 0, -0.10336, 0, 1); }
  60% { transform: matrix3d(0.99975, 0, 0, 0, 0, 0.99975, 0, 0, 0, 0, 1, 0, 0, -0.03233, 0, 1); }
  64% { transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99983, 0, 0, 0, 0, 1, 0, 0, 0.01446, 0, 1); }
  68% { transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0.03631, 0, 1); }
  72% { transform: matrix3d(0.99997, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0.03908, 0, 1); }
  76% { transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0.03077, 0, 1); }
  80% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0.01851, 0, 1); }
  84% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0.00719, 0, 1); }
  88% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00078, 0, 1); }
  92% { transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, -0.00493, 0, 1); }
  96% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00594, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; }
}









.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.shake, .animated.bounceIn {
	-webkit-animation-duration: 0.75s;
	animation-duration: 0.75s;
}

.animated.pulse {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
}
.wow {
	visibility: hidden;
}

.animate_hover_zoom {
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	
	-webkit-transform-style: preserve-3d;
}
.animate_hover_zoom:hover {
	-moz-transform: scale(1.06);
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}


























/* !GENERAL */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	font-weight:300;
	text-decoration:none;
	
	width:100%;
	height:100%;
}


html {
    content: "";
}

/* Light mode */
@media (prefers-color-scheme: light) {
    html {
        content: "light";
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    html {
        content: "dark";
        background-color: #161616;
    }
}








/* !FONTS */

@font-face {
	font-family: 'MinionPro-Regular';
	src: url('fonts/MinionPro-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/MinionPro-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MinionPro-Medium';
	src: url('fonts/MinionPro-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/MinionPro-Medium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'SuperGrotesk-Regular';
	src: url('fonts/SuperGrotesk-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/SuperGrotesk-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'SuperGrotesk-Medium';
	src: url('fonts/SuperGrotesk-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/SuperGrotesk-Medium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'eqc_regular';
	src: url('fonts/equity_caps_a_regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'eqc_italic';
	src: url('fonts/equity_caps_a_italic.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'eqc_bold';
	src: url('fonts/equity_caps_a_bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'eqt_regular';
	src: url('fonts/equity_text_b_regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'eqt_italic';
	src: url('fonts/equity_text_b_italic.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'eqt_bold';
	src: url('fonts/equity_text_b_bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}




@font-face {
	font-family: 'coc_regular';
	src: url('fonts/concourse_c3_regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'coc_bold';
	src: url('fonts/concourse_c3_bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'cot3_regular';
	src: url('fonts/concourse_t3_regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'cot4_regular';
	src: url('fonts/concourse_t4_regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'cot_bold';
	src: url('fonts/concourse_t4_bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}




@font-face {
	/* in use */
    font-family: 'hmt2_regular';
    src: url('fonts/hermes_maia_t2_regular-webfont.woff2') format('woff2'),
         url('fonts/hermes_maia_t2_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
	/* in use */
    font-family: 'hmt4_regular';
    src: url('fonts/hermes_maia_t4_regular-webfont.woff2') format('woff2'),
         url('fonts/hermes_maia_t4_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
	/* in use */
    font-family: 'hmt6_regular';
    src: url('fonts/hermes_maia_t6_regular-webfont.woff2') format('woff2'),
         url('fonts/hermes_maia_t6_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'hmt_regular';
    src: url('fonts/hermes_maia_t3_regular-webfont.woff2') format('woff2'),
         url('fonts/hermes_maia_t3_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'hmt_bold';
    src: url('fonts/hermes_maia_t6_regular-webfont.woff2') format('woff2'),
         url('fonts/hermes_maia_t6_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'hmt_italic';
    src: url('fonts/hermes_maia_t3_italic-webfont.woff2') format('woff2'),
         url('fonts/hermes_maia_t3_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'cst_regular';
    src: url('fonts/century_supra_t3_regular-webfont.woff2') format('woff2'),
         url('fonts/century_supra_t3_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'cst_bold';
    src: url('fonts/century_supra_t3_bold-webfont.woff2') format('woff2'),
         url('fonts/century_supra_t3_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




html, .font_default {
	font-family:'cot3_regular', Helvetica, Arial, sans-serif; 
	font-size:12px;
	font-size: min(calc(15px + (5) * (100vw - 777px) / (1740 - 777)), 18.23px);
	color:#30343F;
	color:#333333;
	color:#19231a;
	line-height:1.5;
}

.font_s {
	font-family:'cot4_regular', Helvetica, Arial, sans-serif; 
	line-height:1.7;
	font-size:.8em;
}

/*
.font_footer {
	font-size:8px;
	font-size: calc(6px + (5 * (100vw - 777px) / (1440 - 777)) );
	line-height:1;
}
*/

html *, p, a, li, ul, ol {
	font-weight:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	
}



strong, b {
	font-family:Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-family:'coc_regular', Helvetica, Arial, sans-serif; 
}

p {
	margin-top:0;
	margin-bottom:1em;
}
p:first-child {
	margin-top:0;
}
ul, ol {
	margin-top:-0.618em;
	padding-top:0;
	margin-bottom:1em;
}

#content_side_column p {
	margin-left:0;
}

/*
h1, .font_pagetitle {
	font-size:2.618em;
	font-weight:normal;
	color:#0F0F0F;
}
*/

h2, .h2, .font_questions {
	font-family:'hmt_bold', Arial, sans-serif;
	font-size:1.5em;
	font-weight:normal;
	margin-bottom:.38em;
	color:#0D7480;
}

h1 {
	font-family:'hmt2_regular', Arial, sans-serif;
	font-size:1.8em;
	font-weight:normal;
	margin-bottom:.38em;
	color:#0D7480;
}
h1 strong {
	font-family:'hmt4_regular', Arial, sans-serif;
}

#section_news_text h1 {
	font-family:'hmt_bold', Arial, sans-serif;
}

.button {
	font-family:'hmt6_regular', Arial, sans-serif;
}
.button.button_l {
	font-size:20px;
}
.button.button_m, .button.button_menu_alt {
	font-size:16px;
}


.font_label {
	font-family:'hmt4_regular', Arial, sans-serif;
	font-size:16px;
}



.font_sans, .font_sans a, .font_sans a:visited {
	font-family:'cot3_regular', Arial, sans-serif;
}


h3, .h3 {
	font-family:'cot3_regular', Arial, sans-serif;
	font-size:1.25em;
	font-weight:normal;
	margin-top:1.618em;
	margin-bottom:0;
}

h3 {
	/* gebruik bij tekstblokken met icons */
	margin-top:.38em;
	font-family:'cot3_regular', Arial, sans-serif;
}	
h3.emphasis {
	color:#0D7480;
}

h4 {
	font-family:'cot3_regular', Arial, sans-serif;
	font-size:1.1em;
	font-weight:normal;
	margin-top:1em;
	margin-bottom:0;
}
h5, h6 {
	font-family:'cot3_regular', Arial, sans-serif;
	font-size:1em;
	font-weight:normal;
	margin-top:1em;
	margin-bottom:0;
}


.font_s h2, .font_s .h2 {
	font-size:1.25em;
}
.font_s h3, .font_s .h3 {
	font-family:'hmt_bold', Arial, sans-serif;
	font-size:1.1em;
	margin-bottom:.38em;
}
.font_s h4, .font_s h5, .font_s h6 {
	font-size:1em;
}
.side_block h3 {
	color:#333333;
}

.news h2 {
	font-size:1.2em !important;
	margin-top:2.618em;
}
.news h2:first-of-type {
	font-size: 1.618em !important;
	margin-top:0;
}
.news .font_summary {
	font-family:'cot4_regular';
	/*
	border-width:0 0 0 .1em;
	border-style:solid;
	border-color:#000000;
	padding-left:1em;
	margin-left:-1em;
	display:block;
	position:relative;
	*/
}


.font_detail {
	font-family:'cot3_regular', Arial, sans-serif;
	opacity:.6;
	font-size:.618em;
}

.font_newsdate {
	font-family:'cot3_regular', Arial, sans-serif;
	opacity:.6;
	font-size:.618em;
}



.font_bottom_nav_l {
	font-size:1.618em;
	font-weight:normal;
}
.font_bottom_nav_s {
	font-size:1em;
	font-weight:normal;
}



h1:first-child, h2:first-child, h3:first-child {
	margin-top:0;
}



a, a:visited {
	text-decoration:none;
	color:inherit;
	
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}	
a:hover {
	text-decoration:none;
}

p a, p a:visited {
	color:#0D7480;
}
p a:hover {
	color:#3e9ba6;
}




ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\25CF";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color:#3e9ba6; /* Change the color */
  font-weight: 900; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width:1.618em; /* Also needed for space (tweak if needed) */
  margin-left:-1.618em; /* Also needed for space (tweak if needed) */
}




blockquote, .font_blockquote {
	font-family:'flamabook', 'AvenirNext-DemiBold', Helvetica, Arial, sans-serif;
	font-size:1.382em;
	margin-left:-3%;
	color:#88AB75;
}
center blockquote, .font_blockquote {
	margin-left:auto;
}
.s2 blockquote {
	color:#2D93AD;
}

.font_white, .font_white a, .font_white a:hover, .font_white a:visited, .font_white p, .font_white blockquote {
	color:#FFFFFF;
} 



main, .bg_default {
	background-color:#FFFFFF;
	
	-moz-transition: background .6s ease-in-out, color .3s ease-in-out;
	-webkit-transition: background .6s ease-in-out, color .3s ease-in-out;
	-ms-transition: background .6s ease-in-out, color .3s ease-in-out;
	transition: background .6s ease-in-out, color .3s ease-in-out;
}
main.dark_mode, .dark_mode .bg_default {
	background-color:#161616;
	color:#B0B0B0;
	
	-moz-transition: background .6s ease-in-out, color .3s ease-in-out;
	-webkit-transition: background .6s ease-in-out, color .3s ease-in-out;
	-ms-transition: background .6s ease-in-out, color .3s ease-in-out;
	transition: background .6s ease-in-out, color .3s ease-in-out;
}
.dark_mode a, .dark_mode a:visited, .dark_mode a:hover {
	color:#B0B0B0;
}
@media (prefers-color-scheme: dark) {
	html, .font_default {
		color:#B0B0B0;§
	}
	.section_intro {
		/* Boven foto gelijke kleur als achtergrond */
		color:#161616;
	}
	html .dark_mode, .dark_mode .font_default {
		color:#333333;
	}
	main, .bg_default {
		background-color:#161616;
		color:#B0B0B0;
	}
	main.dark_mode, .dark_mode .bg_default {
		background-color:#FFFFFF;
		color:#333333;
	}
	a, a:visited {
		color:#B0B0B0;
	}
	.dark_mode a, .dark_mode a:visited {
		color:#666666;
	}
	.ignore_a_markup a, .ignore_a_markup a:visited, .ignore_a_markup a:hover {
		color:#B0B0B0;
	}
	.dark_mode .ignore_a_markup a, .dark_mode .ignore_a_markup a:visited, .dark_mode .ignore_a_markup a:hover {
		color:#333333;
	}
	
	.side_block h3 {
		color:#0D7480;
		color:#B0B0B0; 
	}
}

/* mobile s */
@media only all and (max-width: 767px) {
	
	
	html, .font_default {
		font-size:18px;
		line-height:1.5;
	}

	.font_s {
		font-size:15px;
		line-height:1.6;
	}
	
	html *, p, a, li, ul, ol {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		
			
	}
	
	h1, .font_pagetitle {
		font-size:26px;
		font-weight:normal;
	}
	
	h2, .h2, .font_questions {
		font-size:1.4em;
		font-weight:normal;
		margin-bottom:.5em;
	}

	.font_questions {
		font-size:1em;
	}

	h3, .h3 {
		font-size:1.2em;
		font-weight:normal;
		margin-top:1.618em;
		margin-bottom:0;
	}
	
/*
	h3 span {
		color:#AA9789;
	}
*/
	
	blockquote, .font_blockquote {
		font-size:1.382em;
		margin-left:0;
		text-align:center;
		width:80%;
		margin-left:10%;
	}
	center blockquote, .font_blockquote {
		margin-left:auto;
	}

	
	.font_bottom_nav_l {
		font-size:1.4em;
		font-weight:normal;
	}
	.font_bottom_nav_s {
		font-size:1em;
		font-weight:normal;
	}
	
	.font_footer {
		text-align:center;
		padding-top:2.618em;
	}
	
	
}

/* mobile xs */
@media only all and (max-width: 321px) {
	
	html, .font_default {
		font-size:15px;
	}
	
	.font_s {
		font-size:10px;
		line-height:1.5;
	}
	
	h1, .font_pagetitle {
		font-size:28px;
		font-weight:normal;
	}
	
}







/* !BUTTONS */










/* !BASIC LYAOUT */

.view_desktop_only {
	display:block;
}
.view_mobile_only {
	display:none;
}

body {
	width:100%;
	height:100%;
	position:relative;
	border:0;
	left:0;
	top:0;
}

.has_padding_top {
	padding-top:3.5em;
}
.has_padding_bottom {
	padding-bottom:3em;
}
.has_padding {
	padding-top:4em;
	padding-bottom:4em;
}
.has_padding_xtop {
	padding-top:7em;
}
.has_padding_stop {
	padding-top:1em;
}


.inline_block {
	margin-bottom:2.62em;
	position:relative;
	display:block;
}
.inline_block.xmargin_bottom {
	margin-bottom:4.3em;
}
.inline_block_padding {
	padding:8% 8% 8% 8%;
}


section {
	width:100%;
	position:relative;
	display:block;
}


section.has_padding {
	padding-top:4em;
	padding-bottom:3em;
}
section.has_padding_xbottom {
	padding-bottom:7em;
}
section.has_padding_xtop {
	padding-top:5em;
}

.container {
	width:93%;
	margin-left:auto;
	margin-right:auto;
	display:block;
	position:relative;
	max-width:1380px;
}
.container.full_height {
	height:100%;
}
.container.has_padding_side {
	padding-left:7.5%;
	padding-right:7.5%;
}

.column_wrapper {
	width:100%;
	clear:both;
	display:table;
}
.column_wrapper:after {
	clear:both;
	content:'';
}
.column_wrapper.has_padding_top {
	padding-top:4em;
}
.column_wrapper.has_padding {
	padding-top:4em;
	padding-bottom:4em;
}
.column_wrapper.has_padding_side {
	padding-left:7.5%;
	padding-right:7.5%;
}
.column_wrapper.has_padding_bottom {
	padding-bottom:0.618em;
}

.column_wrapper.grid3 {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	row-gap:2vw;
	column-gap:2vw;
}

.column_2-3 {
	position: relative;
	display:block;
	float:left;
	width:61.8%;
}
.column_2-3_center {
	margin-left:19.1%;
}
.column_2-3 .column_single {
	width:50%;
	margin-left:23%;
}


.column_1-3 {
	position: relative;
	display:table;
	float:left;
	width:38.2%;
}
.column_1-3.same_height, .column_2-3.same_height {
	display:table-cell;
	float:none;
	vertical-align:middle;
}

.column_1-3_ss {
	/* screenshots */
	position:relative;
	display:block;
	float:left;
	width:31.6%;
	margin-left:2.5%;
}
.column_1-3_ss:first-child {
	margin-left:0;
}

.column_1-5 {
	/* screenshots */
	position:relative;
	display:block;
	float:left;
	width:18%;
	margin-left:2.5%;
}
.column_1-5:first-child {
	margin-left:0;
}

.column_1-4 {
	/* screenshots */
	position:relative;
	display:block;
	float:left;
	width:23.5%;
	margin-left:2%;
}
.column_1-4:first-child {
	margin-left:0;
}

.column_1-2n {
	/* gebruikt in nieuwsberichten */
	position:relative;
	display:block;
	float:left;
	width:43%;
	margin-left:0; 
}
.column_1-2n:nth-of-type(even) {
	margin-left:14%;
}
.column_1-2n:nth-of-type(odd) {
	margin-left:0;
}	
	

.column_1-2s {
	/* quad info blokken */
	position:relative;
	display:block;
	float:left;
	width:30.9%;
	margin-left:14.21%; /* align met column_2-3 .column_single */
}
.column_1-2s:nth-of-type(odd) {
	margin-left:14.21%;
}
.column_1-2s:nth-of-type(even) {
	margin-left:9.78%;
}

.column_1-text {
	/* wordt gebruikt voor nieuwsartikelen */
	/*width:71.6%; width is ,618* breedte ,716 */
	width:44.8%;
	margin-left:14.21%;
	
	position:relative;
	display:block;
	float:left;
	
}
.column_1-text p, .column_1-text h1, .columnt_1-text h2 {
	
	margin-left:0;
}
.column_1-side {
	width:26.7%;
	margin-left:14.21%;
	margin-left:0;
	
	position:relative;
	display:block;
	float:right;
}


.flex {
  display: flex;
  align-items: center;
  justify-content: center;
 
}

.flex_column {
	 flex-direction: column;
	 flex-wrap:wrap;
}

.flex_left {
	justify-content:flex-start;
}
.flex_right {
	justify-content:flex-end;
}

.flex_item_top {
  align-self: flex-start;
}

.flex_item_bottom {
  align-self: flex-end;
}





.bg_white {
	background-color:#FFFFFF;
}
.color_white {
	color:#FFFFFF;
}
.bg_aqua {
	background-color:#79D5DE;
	color:#17232E;
}
.color_link {
	color:#0D7480;
}
.bg_ink {
	background-color:#17232E;
	color:#DDE7EB;
}
.color_ink {
	color:#17232E;
}

.bg_grey {
	background-color:#e7e7e7;
}
.bg_lgrey {
	background-color:#F4FAFB;
	
	-moz-transition: background .6s ease-in-out, color .3s ease-in-out;
	-webkit-transition: background .6s ease-in-out, color .3s ease-in-out;
	-ms-transition: background .6s ease-in-out, color .3s ease-in-out;
	transition: background .6s ease-in-out, color .3s ease-in-out;
}
.dark_mode .bg_lgrey {
	background-color:#1F1F1F;

	-moz-transition: background .6s ease-in-out, color .3s ease-in-out;
	-webkit-transition: background .6s ease-in-out, color .3s ease-in-out;
	-ms-transition: background .6s ease-in-out, color .3s ease-in-out;
	transition: background .6s ease-in-out, color .3s ease-in-out;
}
.bg_llgrey {
	background-color:#F4FAFB;
	
	-moz-transition: background .6s ease-in-out, color .3s ease-in-out;
	-webkit-transition: background .6s ease-in-out, color .3s ease-in-out;
	-ms-transition: background .6s ease-in-out, color .3s ease-in-out;
	transition: background .6s ease-in-out, color .3s ease-in-out;
}
.dark_mode .bg_llgrey {
	background-color:#1B1B1B;
	
	-moz-transition: background .6s ease-in-out, color .3s ease-in-out;
	-webkit-transition: background .6s ease-in-out, color .3s ease-in-out;
	-ms-transition: background .6s ease-in-out, color .3s ease-in-out;
	transition: background .6s ease-in-out, color .3s ease-in-out;
}
.bg_dgrey {
	background-color:#1F1F1F;
}




@media (prefers-color-scheme: dark) {
	.bg_grey {
		background-color:#707070;
	}
	.dark_mode .bg_grey {
		background-color:#e7e7e7;
	}
	
	.color_ink {
		color:#B0B0B0;
	}
	
	.bg_lgrey {
		background-color:#1F1F1F;
	}
	.dark_mode .bg_lgrey {
		background-color:#F4FAFB;
	}
	.bg_llgrey {
		background-color:#1B1B1B;
	}
	.dark_mode .bg_llgrey {
		background-color:#F4FAFB;
	}

	.bg_gradient_ppveerkr {
		background:#736F6E;
	}	
	.bg_belaji {
		background:#707072;
	}
}

.card {
	display:block;
	position:relative;
	float:left;
	width:100%;
	clear:both;
		
	-webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0);
	-moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0);
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0);
	
	-webkit-backface-visibility: hidden;
	transition: box-shadow 0.2s ease-in-out;
}
.card:hover, .card:focus, .card.has_shadow {
	-webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
}

.card.no_hover:hover, .card.no_hover:focus {
	-webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0);
	-moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0);
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0);

}

.card_portrait {
	width:100%;
	height:0;
	padding-bottom:138%;
}

.card_landscape {
	width:100%;
	height:0;
	padding-bottom:62%;
}

.card_square {
	width:100%;
	height:0;
	padding-bottom:100%;
}

.card_tall {
	width:100%;
	height:0;
	padding-bottom:162%;
}

.card_xtall {
	width:100%;
	height:0;
	padding-bottom:262%;
}

.bg_card {
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
	
.border-r {
	-moz-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:13px;
	
}

.border-r1 {
	-moz-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:13px;
}

.border-r1-top {
	border-top-right-radius:13px;
	border-top-left-radius:13px;
	
	-moz-border-radius-topleft:13px;
	-moz-border-radius-topright:13px;
	-webkit-border-top-left-radius:13px;
	-webkit-border-top-right-radius:13px;
}

.border-r2 {
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius:25px;
}

.border-r2-top {
	border-top-right-radius:25px;
	border-top-left-radius:25px;
	
	-moz-border-radius-topleft:25px;
	-moz-border-radius-topright:25px;
	-webkit-border-top-left-radius:25px;
	-webkit-border-top-right-radius:25px;
}
.border-sq-topleft {
	border-top-left-radius:0;
	-webkit-border-top-left-radius:0;
	-moz-border-radius-topleft:0;
}


.concept_card {
	position: relative;
	display:block;
	float:left;
	clear:inherit;
	width:30%;
	margin-right:5%;
	margin-bottom:5%;
	height:0;
	padding-bottom:18.6%;
	
	background-size:cover;
}
.concept_card:nth-of-type(3n+0) {
	margin-right:0;
}

@media (prefers-color-scheme: dark) {

	.card {
		opacity:.8;
	}
}


/* mobile s */
@media only all and (max-width: 767px) {
	
	
	.view_desktop_only {
		display:none;
	}
	.view_mobile_only {
		display:block;
	}
	
	
	.inline_block {
		margin-bottom:2em;
	}
	.inline_block_padding {
		padding:5% 8% 8% 8%;
	}

	.container {
		width:95%;
		margin-left:2.5%;
	}
	.column_wrapper {
		width:100%;
		clear:both;
		display:table;
	}
	
	.column_wrapper.grid3 {
		display:grid;
		grid-template-columns:1fr;
		row-gap:8.5vw;
		column-gap:0
	}
	
	
	.column_2-3 {
		position: relative;
		display:block;
		float:left;
		width:100%;
	}
	.column_2-3_center {
		margin-left:0;
	}
	.column_2-3 .column_single {
		width:62%;
		margin-left:19%;
		padding-top:2em;
	}
	
	
	.column_1-3 {
		display:block;
		float:left;
		width:100%;
	}
	.column_1-3.same_height {
		display:block;
		float:left;
		vertical-align:top;
	}
	.column_2-3.same_height {
		display:block;
		float:right;
		vertical-align:top;
	}
	
	.column_1-text {
		/* wordt gebruikt voor nieuwsartikelen */
		/*width:71.6%; width is ,618* breedte ,716 */
		width:83%;
		margin-left:8.5%;
		margin-bottom:8em;
	}
	.column_1-text p, .column_1-text h1, .columnt_1-text h2 {
		
		margin-left:0;
	}
	.column_1-side {
		width:83%;
		margin-left:8.5%;
		margin-right:8.5%;
		float:left;
	}

	#section_content .container {
		width:90%;
		margin-left:5%;
	}
	#section_content .column_1-text,
	#section_content .column_1-side {
		width:100%;
		margin-left:0;
		margin-right:0;
	}
	#section_content .column_1-side {
		margin-bottom:3.5em;
	}


	
	.column_wrapper.mobile_reverse {
		display: flex;
		flex-direction: column-reverse;
	}
	
	.column_wrapper.has_padding_side {
		/* container + padding side = 83 width */
		padding-left:0;
		padding-right:0;
	}
	
	
	.mobile_90width {
		width:90% !important;
		margin-left:5% !important;
		padding-top:0 !important;
	}
	.mobile_85width {
		/* houdt rekening met containermarge van 5% */
		width:85% !important;
		margin-left:7.5% !important;
	}
	
	
	
	
	.card_portrait.mobile_square {
		padding-bottom:100%;
	}
	
	.column_1-2s {
		/* quad info blokken */
		position:relative;
		display:block;
		float:left;
		width:83%;
		margin-left:8.5%; /* align met column_2-3 .column_single */
	}
	.column_1-2s:nth-of-type(odd) {
		margin-left:8.5%;
	}
	.column_1-2s:nth-of-type(even) {
		margin-left:8.5%;
	}
	
	section.has_padding_xbottom {
		padding-bottom:0;
	}
	
	
}




/* !SINGLE COLUMN ELEMENTS */
.column_single .client_logo {
	width:50%;
	height:0;
	padding-bottom:25%;
	margin-bottom:1em;
	display:block;
	position:relative;
	margin-left:0;
	margin-right:auto;
	
	background-position: center center;
	background-size:contain;
	background-repeat: no-repeat;
}
.column_single .screenshot_wrapper, .column_1-text .screenshot_wrapper {
	width:100%;
	height:6.18vw;
	left:-9%;
	
	margin-top:.618em;
	
	position:relative;
	float:left;
}
.column_single .screenshot_s, .column_1-text .screenshot_s {
	width:10vw;
	height:6.18vw;
	
	display:block;
	position:relative;
	float:left;
		
	background-position: center center;
	background-size:cover;
	background-repeat: no-repeat;
}
.column_single .screenshot_s .overlay {
	display:block;
	width:100%;
	height:100%;
	position: absolute;
	left:0;
	top:0;
	opacity:0;
	
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.column_single .screenshot_s .overlay .favicon_s {
	width:3.8vw;
	height:3.8vw;
	position: absolute;
	display:block;
	top:1.19vw;
	left:3.1vw;
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center center;
}
.column_single .screenshot_wrapper:hover .overlay {
	opacity:1;
}

.column_single .screenshot_s_text, .column_1-text .screenshot_s_text {
	width:auto;
	margin-left:4.5%;	
}

.column_2-3 .favicon_full_wrapper {
	width:auto;
	display:flex;
	position:relative;
	float:right;
	right:-4.5%;
	/*right:14%;*/
	top:2vw;
	overflow:visible;
}
.column_2-3 .favicon_full {
	width:4.3vw;
	height:4.3vw;
	width:3.8vw;
	height:3.8vw;
	position: relative;
	display:block;
	
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center center;
	margin-left:.68em;
}
.column_2-3 .favicon_full .image {
	width:86%;
	height:86%;
	top:7%;
	left:7%;
	position:absolute;
	display:block;
	
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center center;
}

@media (prefers-color-scheme: dark) {
	.column_single .screenshot_s, .column_1-text .screenshot_s {
		opacity:.8;
	}

}
/* mobile s */
@media only all and (max-width: 767px) {
	.column_1-text {
		width:100%;
		margin-left:0;
		margin-right:0;
	}
	.column_2-3 .favicon_full {
		width:8vw;
		height:8vw;
		background-size:cover;
		}
	
	.column_single .screenshot_wrapper, .column_1-text .screenshot_wrapper {
		width:100%;
		margin-left:5vw;
		height:16vw;
		left:5vw;
	}
	.column_1-text .screenshot_wrapper {
		margin-top:2.618em;
	}
	.column_single .screenshot_s, .column_1-text .screenshot_s {
		height:16vw;
		width:25.84vw;
	}
	.column_single .screenshot_s .overlay .favicon_s {
		width:5vw;
		height:5vw;
		position: absolute;
		display:block;
		top:1.5vw;
		left:3.97vw;
	}
}












.skewed {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  transform: skewY(-4deg);
  transform-origin: top left;
}








/* !ICONS */
a .icon_chevron_right {
	height:.618em;
	width:.618em;
}

a .icon_chevron_right .tofill {
	fill:#666666;
}

@media (prefers-color-scheme: dark) {
	a .icon_chevron_right .tofill {
		fill:#B0B0B0;
	}


}










/* !MENU */
#section_menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 200;
	display: none;
}
#section_menu .menu_inner {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-top: 100px;
	padding-right: 5%;
	gap: 16px;
}
#section_menu .menu_inner a {
	display: block;
}
#section_menu .menu_inner .button {
	margin-right: 0;
}

.hamburger_toggle {
	display: none;
	cursor: pointer;
	width: 30px;
	height: 30px;
	position: relative;
	flex-shrink: 0;
	overflow:visible;
}
.header_top .hamburger_toggle .icon_menu {
	position: absolute;
	overflow:visible;
	width: 90%;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}
.header_top .hamburger_toggle .icon_menu .stroke {
	stroke: #0a6570;
}

/* Hamburger → cross animation */
.hamburger_toggle .icon_menu g path {
	transform-box: view-box;
	transform-origin: 50% 50%;
	transition: transform 0.3s ease, opacity 0.3s ease;
	stroke-linecap: round;
}
.hamburger_toggle.open .icon_menu g path:nth-child(1) {
	transform: rotate(45deg) translateY(35.71%);
}
.hamburger_toggle.open .icon_menu g path:nth-child(2) {
	opacity: 0;
}
.hamburger_toggle.open .icon_menu g path:nth-child(3) {
	transform: rotate(-45deg) translateY(-35.71%);
}









/* !HEADER */
#section_header_top {
	position: relative;
	z-index: 300;
}
.header_top {
	width:100%;
	height:80px;
	z-index:10;
}
.header_top .container {
	height:80px;
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.header_top .right {
	display:flex;
	align-items: center;
	flex-direction: row;
	flex-wrap: nowrap;
}

.header_top #logo {
	width:auto;
	height:30px;
}


.header_top .icon_search {
	width:35px;
	height:35px;
	margin-left:15px;
	margin-right:0;
	display:block;
	cursor:pointer;
}

.header_top .icon_search .tofill {
	fill:#17232E;
}


.header_top .icon_menu {
	width:62%;
	height:62%;
	display:inline-block;
	position: absolute;
	top:19%;
	left:19%;
	margin:0 auto;
	-webkit-backface-visibility: hidden;
}

.header_top .icon_menu .stroke {
	stroke:#17232E;
}





.header {
	height:400px;
	width:100%;
	display:block;
	position: relative;
	overflow:hidden;
}
.header .container {
	display:flex;
	flex-direction: column-reverse;
}
.header .container .bottom {
	padding-top:10px;
	padding-bottom:20px;
	position:relative;
}
.header .container .bottom .gradient_left {
	display:none;
}
.header h1 {
	color:#FFFFFF;
	font-size:2em;
	line-height:1.2;
	padding-bottom:50px;
}
.header .line2 {
	display:block;
	margin-left:14.21%;
	margin-left:7.5%;
	width:100%;
}





.header_image {
	background-size:cover;
	background-position: center center;
	
	width:50%;
	height:100%;
	position:absolute;
	right:0;
	top:0;
}
.header_image_area {
	max-width:690px; /* ! helft vamn max width container 1380 */
	width:93%; /* gelijk aan breedte container 93 % */
	
	position:absolute;
	height:100%;
	left:0;
}




.header_image_shape_wrapper {
	display:block;
	position: relative;
	margin-left:-50px;
	width:400px;
	height:400px;
}
.header_image_shape1 {
	width:600px;
	height:400px;
	transform: skew(-27deg);
	opacity:.3;
	position: absolute;
	left:-200px;
}
.header_image_shape2 {
	width:400px;
	height:400px;
	transform: skew(27deg);
	opacity:0.5;
	left:-204px;
	position: absolute;
}
.header_image_shape3 {
	width:400px;
	height:265px;
	transform: skew(27deg);
	opacity:1;
	left:-238px;
	position: absolute;
}
.header_image_shape4 {
	width:400px;
	height:135px;
	transform: skew(-27deg);
	opacity:1;
	left:-205px;
	top:265px;
	position: absolute;
}
.header_image_overlay {
	width:100%;
	height:100%;
	position:absolute;
	opacity:0;
}

.header_image.invisible .header_image_shape1, .header_image.invisible .header_image_shape2, .header_image.invisible .header_image_shape3, .header_image.invisible .header_image_shape4, .header_image.invisible .header_image_overlay {
	opacity:1;
}



.header_bottom {
	height:75px;
	width:100%;
	display:block;
	position: relative;
}
.header_bottom .container {
	height:100%;
	overflow:auto;
	
}
.header_bottom .container .inner {
	height:100%;
	display:flex;
	flex-direction: row;
	justify-content:flex-start;
	
	
	align-items:center;
	
	overflow:auto;
	white-space: nowrap;
	padding-left:7.5%;
	padding-right:7.5%;
}
.header_bottom .gradient_left {
	width:4%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	z-index:5;
	background: linear-gradient(90deg, rgba(246,238,233,1) 0%, rgba(246,238,233,0.8) 34%, rgba(246,238,233,0) 100%);
}
.header_bottom .gradient_right {
	width:4%;
	height:100%;
	position: absolute;
	top:0;
	right:0;
	z-index:5;
	background: linear-gradient(270deg, rgba(246,238,233,1) 0%, rgba(246,238,233,0.8) 34%, rgba(246,238,233,0) 100%);
}
.header_bottom .label {
	margin-right:15px;
	
}
/* Hide scrollbar for Chrome, Safari and Opera */
.header_bottom .container::-webkit-scrollbar, .header_bottom .container .inner::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.header_bottom .container, .header_bottom .container .inner {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}




@media (prefers-color-scheme: dark) {
	.header_image {
		background-color:rgba(22,22,22,.40);
		background-blend-mode:multiply;
	}
	.header_image.invisible {
		background-color:transparent;
		background-blend-mode:normal;
	}
	.header h1 {
		color:#000000;
	}
	
	.header_bottom .gradient_left {
		background: linear-gradient(90deg, rgba(31,31,31,1) 0%, rgba(31,31,31,0.8) 34%, rgba(31,31,31,0) 100%);
	}
	.header_bottom .gradient_right {
		background: linear-gradient(270deg, rgba(31,31,31,1) 0%, rgba(31,31,31,0.8) 34%, rgba(31,31,31,0) 100%);
	}
}

@media (prefers-color-scheme: dark) {
	.header_top .hamburger_toggle .icon_menu .stroke {
		stroke: #B0B0B0;
	}
}

@media only all and (max-width: 767px) {
	.header_top .container {
		width:100%;
		margin-left:0;
		
	}
	.header h1 {
		font-size:28px;
		padding-bottom:22px;
	}
	.header .line2 {
		display:inline;
		margin-left:0;
		width:auto;
	}
	.header .line2::before {
		content:" ";
	}
	.header h1 br {
		display:none;
	}
	
	.header_image_shape_wrapper {
		margin-left:-75px;
	}
	
	.header {
		height:400px;
		width:100%;
		display:block;
		position: relative;
		overflow:hidden;
		margin-top:-50px;
	}
	.header .container {
		padding-left:2.5vw;
	}
	.header .container .bottom {
		width:100vw;
		margin-left:-5vw;
	}
	.header .container .bottom .inner {
		overflow-x:auto;
		white-space:nowrap;
		padding-left:5vw;
		padding-top:4px;
		padding-bottom:4px;
		-ms-overflow-style:none;
		scrollbar-width:none;
		touch-action:pan-x;
	}
	.header .container .bottom .inner::-webkit-scrollbar {
		display:none;
	}
	.header .container .bottom .inner .button {
		display:inline-block;
		white-space:nowrap;
	}
	.header .container .bottom .inner .button.button_l {
		height:42px;
		line-height:42px;
		padding-left:26px;
		padding-right:26px;
		font-size:17px;
		border-radius:21px;
	}
	.header .container .bottom .inner .button.button_l .button_bg {
		border-radius:21px;
	}
	.header .container .bottom .gradient_left {
		display:block;
		width:5vw;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		z-index:5;
		pointer-events:none;
		background:linear-gradient(90deg, rgba(228,47,55,1) 0%, rgba(228,47,55,0.8) 34%, rgba(228,47,55,0) 100%);
	}
	.header_top .right a {
		display: none;
	}
	.hamburger_toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.header_top .hamburger_toggle .icon_menu {
		left: unset;
		right: 0;
		transform: translateY(-50%);
	}
}






/* !HOME SPLASH */
.home_splash_wrapper {
	width:100%;
	height:475px;
	width:100%;
	display:block;
	position: relative;
	overflow:hidden;
}

.splash_image {
	display:block;
	width:62%;
	position:absolute;
	right:0;
	height:100%;
	background-size:cover;
	background-position:center center;
}

/* Slide-in transition overlay */
.splash_image_next {
	display:block;
	width:62%;
	position:absolute;
	right:0;
	height:100%;
	background-size:cover;
	background-position:center center;
	border-radius:25px;
	z-index:1;
	opacity:0;
	transform:translateX(-18px);
}
.splash_image_next--active {
	opacity:1;
	transform:translateX(0);
	transition:transform 0.4s ease, opacity 0.4s ease;
}

.home_splash_text_wrapper {
	width:62%;
	display:flex;
	flex-direction:row;
	align-items:stretch;
	position:absolute;
	height:295px;
	top:14.4%;
	z-index:2;
	left:0;
	overflow:hidden;
}

.home_splash_text {
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	padding:24px 28px;
}
.home_splash_text_group {
	flex:1;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:10;
	z-index:10;
}
.home_splash_heading {
	font-size:2rem;
	line-height:1.2;
	margin:0;
}
.home_splash_body {
	font-size:1em;
	line-height:1.5;
	
}
.home_splash_body p {
	margin:0;
}
.home_splash_text_group > a {
	margin-top:8px;
}

.home_splash_shape_wrapper {
	overflow:hidden;
	width:155px;
	flex-shrink:0;
	z-index:0;
}
.home_splash_shape1 {
	width:100px;
	height:400px;
	transform: skew(-27deg);
	opacity:.3;
	position: absolute;
	right:103px;
}
.home_splash_shape2  {
	width:400px;
	height:400px;
	transform: skew(27deg);
	opacity:0.5;
	right:0px;
	position: absolute;
}
.home_splash_shape3  {
	width:400px;
	height:97px;
	transform: skew(27deg);
	opacity:1;
	right:75px;
	position: absolute;
}
.home_splash_shape4  {
	width:400px;
	height:235px;
	transform: skew(-27deg);
	opacity:1;
	right:111px;
	top:97px;
	position: absolute;
}

/* Proposition nav */
.home_splash_nav {
	display:flex;
	align-items:center;
	gap:8px;
	position:absolute;
	top:calc(14.4% + 330px);  /* 35px below splash_text_wrapper */
	bottom:auto;
	left:0;
	width:24%;
	padding:0;
	box-sizing:border-box;
	z-index:3;
}

/* Play / pause button */
.splash_playpause {
	flex-shrink:0;
	width:auto;
	height:18px;
	cursor:pointer;
	display:flex;
	align-items:left;
	justify-content:flex-start;
}
.splash_playpause svg {
	height:100%;
	width:auto;
}
.splash_playpause .icon_play  { display:none; }
.splash_playpause .icon_pause { display:block; }
.splash_playpause.paused .icon_play  { display:block; }
.splash_playpause.paused .icon_pause { display:none; }

/* SVG colour */
.splash_playpause .stroke { stroke:#17232E; }
.splash_playpause .fill   { fill:#17232E; }

/* Indicator lines */
.splash_indicator {
	flex:1;
	height:3px;
	background:rgba(78,48,59,0.25);
	border-radius:2px;
	overflow:hidden;
	cursor:pointer;
}
.splash_indicator_fill {
	height:100%;
	width:0%;
	background:#17232E;
	border-radius:2px;
}

/* Dark mode: lighten indicators against dark bg */
@media (prefers-color-scheme:dark) {
	.splash_playpause .stroke { stroke:#F4FAFB; }
	.splash_playpause .fill   { fill:#F4FAFB; }
	.splash_indicator          { background:rgba(246,238,233,0.25); }
	.splash_indicator_fill     { background:#F4FAFB; }
}

/* Dark mode: dim splash image to match header_image treatment */
/* Dark mode: heading and body invert like .header h1 */
@media (prefers-color-scheme:dark) {
	.splash_image, .splash_image_next {
		background-color:rgba(22,22,22,.40);
		background-blend-mode:multiply;
	}
	.home_splash_heading,
	.home_splash_body {
		color:#000000;
	}
}

/* Mobile: stack image → text wrapper → nav vertically */
@media only all and (max-width: 767px) {

	/* Wrapper: fixed height (425px content + 35px nav) */
	.home_splash_wrapper {
		height: 460px;
		display: flex;
		flex-direction: column;
		overflow: visible;
	}
	
	

	/* Image: fixed height */
	.splash_image {
		position: relative;
		width: 100%;
		height: 264px;
		right: auto;
		flex-shrink: 0;
	}

	/* Transition overlay: matches image dimensions */
	.splash_image_next {
		position: absolute;
		top: 0;
		left: 0;
		right: auto;
		width: 100%;
		height: 264px;
	}

	/* Text wrapper: shifted up 103px, above splash_image_next (z-index:1) */
	.home_splash_text_wrapper {
		position: relative;
		width: 90%;
		top: auto;
		left: 5%;
		height: 264px;
		margin-top: -103px;
		z-index: 2;
		overflow:hidden;
	}

	/* Text box: side margins so image is visible left and right */
	.home_splash_text {
		position: relative;
		top: auto;
		padding:24px 0 28px 5vw;
	}
	


	/* Shapes: absolute at right side of text wrapper, above text background */
	.home_splash_shape_wrapper {
		overflow:hidden;
		width:90px;
		flex-shrink:0;
		z-index:0;
	}

	/* Nav: aligned with text box left edge, 62% wide, fixed height */
	.home_splash_nav {
		position: relative;
		top: auto;
		bottom: auto;
		width: 62%;
		height: 35px;
		margin-left: 5%;
		padding: 0;
	}

	.home_splash_heading {
		font-size: 26px;
	}
	
	.home_splash_shape3  {
		right:27px;
		height:104px;
	}
	.home_splash_shape4  {
		right:61px;
		top:104px;
	}

	.home_splash_body p {
		display:inline;
	}

}





/* !CONTENT */
#section_content_body {
	
}
.section_content_overlay{
	width:100%;
	height:100%;
	background-color:#FFFFFF;
	opacity:0;
	z-index:10;
	position:absolute;
	display:block;
	visibility:hidden;
	
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-ms-transition: all .2s linear;
	transition: all .2s linear;
}
.section_content_overlay.visible{
	opacity:1;
	visibility: visible;

/*
	-moz-transition: all .2s ease-in;
	-webkit-transition: all .2s ease-in;
	-ms-transition: all .2s ease-in;
	transition: all .2s ease-in;
*/
}

@media (prefers-color-scheme: dark) {
	.section_content_overlay {
		background-color:#161616;
	}
}








/* !INTRO */
section.section_intro {
	height:100vh;
	overflow:visible;
	margin-bottom:-20vh;
}
.section_intro.nopev {
	pointer-events: none;
}
section.section_intro_news {
	display:block; 
	position:relative; 
	margin-bottom:-200vh;
	z-index:200;
}
.section_intro_news_fill {
	width:100%;
	display:block;
	position:relative;
	height:100vh;
}
.section_intro.section_intro_small {
	height:62vh;
	margin-bottom:0;
}
section.section_afterintro {
	opacity:0;
}
section.section_intro .bg {
	width:100%;
	height:120vh;
	position:absolute;
	left:0;
	top:0;
	opacity:1;
	
	background-image:url('bg_water_color.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}
.section_intro_small .bg {
	height:62vh !important;
}
section.section_intro .overlay, section.section_intro .overlay_scroll {
	background-color:#FFFFFF;
	width:100%;
	height:120vh;
	position:absolute;
	left:0;
	top:0;
	opacity:1;
	z-index:0;
}
.section_intro_small .overlay, .section_intro_small .overlay_scroll {
	height:74.4vh !important;
}
.section_intro_news .overlay {
	height:100vh !important;
}
section.section_intro .overlay_scroll {
	opacity:0;
}
section.section_intro .overlay_scroll_trigger {
	width:100%;
	height:1px;
	top:20vh;
	left:0;
	position:absolute;
}
.section_intro_small .overlay_scroll_trigger {
	top:12vh !important;
}
section.section_intro .overlay_gradient {
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

	width:100%;
	height:70vh;
	bottom:-20vh;
	left:0;
	position: absolute;
	opacity:0;
}
.section_intro_small .overlay_gradient {

	height:24vh !important;
	bottom:0 !important;
	opacity:1 !important;
}
section.section_intro .slogan {
	width:80%;
	height:auto;
	position:absolute;
	
	top:50vh;
	left:10%;
	padding-top:12vw;
	padding-top:13vw;
	opacity:0;
	text-align:center;
}
section.section_intro .slogan .line1, section.section_intro .slogan .line2 {
	display:block;
	position:relative;
	width:auto;
	margin-left:auto;
	margin-right:auto;
}
section.section_intro .slogan .line_contrast {
/*	padding:.2em; 
	border-radius:3px; 
	background-color:#FFFFFF;
	color:#000000; 
	z-index:1;


	-webkit-text-fill-color: transparent; 
	-webkit-background-clip: text; 
*/


  mix-blend-mode: lighten;

}


section.section_intro .portfolio_text {
	opacity:0;
}
section.section_intro .portfolio_link_wrapper {
	width:100%;
	height:auto;
	position:absolute;
	left:0;
	bottom:30vh;
	z-index:200;
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
	-ms-transition: opacity .3s ease-in-out;
	transition: opacity .3s ease-in-out;
	
}
section.section_intro .portfolio_link_wrapper.hidden {
	opacity:0;
	
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
	-ms-transition: opacity .3s ease-in-out;
	transition: opacity .3s ease-in-out;
}
section.section_intro .portfolio_link {
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	opacity:0;
	width:100%;
	text-align:center;
	
	opacity:0;
}
section.section_intro .portfolio_link.hidden {
	opacity:0;
	
}
section.section_intro .portfolio_link .inner {
/* 	margin-top:1.36em; */
	width:auto;
	margin-left:auto;
	margin-right:auto;
	display:block;
	position:relative;
	opacity:1;
}
section.section_intro .portfolio_link .icon_chevron_right {
	width:2.4vw;
	height:2.4vw;
	
	margin-top:-.38em;
	
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform:rotate(90deg);
}
section.section_intro .portfolio_link .icon_chevron_right .tofill  {
	fill:#000000;
}
.home_link .icon_chevron_right .tofill {
	fill:#333333;
}
home_link .inner {
	color:#333333;
}
section.section_intro .portfolio_link.font_white .icon_chevron_right .tofill, .home_link.font_white .icon_chevron_right .tofill {
	fill:#FFFFFF;
}
.home_link.font_white .inner {
	color:#FFFFFF;
}
.home_link {
	width:auto;
	height:auto;
	position:absolute;
	left:3.5%;
	top:1.3vw;
	top:3.5vw;
	opacity:1;
	z-index:100;
	line-height:1.5vw;
	
	opacity:0;
}
.home_link_text {
	opacity:1;
	display:block;
	position:relative;
	z-index:10;
}

.home_link .inner {
	align-items:center; 
	display:flex; 
	justify-content: flex-start; 
	flex-direction:row;
	color:#333333;
}
.home_link .icon_chevron_right {
/*
	width:2.4vw !important;
	height:2.4vw !important;
	
*/
	width:1.5vw;
	height:1.5vw;
	margin-right:.5vw;
	
	top:0;
	display:inline-block;
	
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(190deg);
	-o-transform: rotate(180deg);
	transform:rotate(180deg);
}

	
.intro_spinner {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:10;
	opacity:1;
	
	border-width:0px;
	
	border-radius:18px;
	
	 -webkit-transition: opacity 0.3s;
	 -moz-transition: opacity 0.3s;
	 transition: opacity 0.3s;
}

.intro_spinner.visible {
	opacity:1;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border-top: 2px solid #405998;
  border-right: 2px solid transparent;
  animation: spinner .6s linear infinite;
}

@media (prefers-color-scheme: dark) {
	section.section_intro .overlay, section.section_intro .overlay_scroll {
		background-color:#161616;
	}
	section.section_intro .overlay_gradient {
		background: -moz-linear-gradient(top, rgba(22, 22, 22,0) 0%, rgba(22, 22, 22,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(22, 22, 22,0) 0%,rgba(22, 22, 22,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(22, 22, 22,0) 0%,rgba(22, 22, 22,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00161616', endColorstr='#161616',GradientType=0 );
	}

	.spinner:before {
		border-top: 2px solid #3574b5;
	}
		
	.home_link_blog .icon_chevron_right .tofill {
		fill:#B0B0B0;
	}
	.home_link_blog .inner {
		color:#B0B0B0;
	}
}



/* mobile s */
@media only all and (max-width: 767px) {

	section.section_intro .slogan {
		width:80%;
		height:auto;
		position:absolute;
		
		top:60vh;
		left:10%;
		padding-top:12vw;
		padding-top:13vw;
		opacity:0;
		text-align:center;
	}
	.home_link {
		width:auto;
		height:auto;
		position:absolute;
		left:2%;
		top:5vw;
		opacity:1;
		z-index:100;
		line-height:5vw;
		
		opacity:0;
	}
	.home_link .icon_chevron_right {
		width:5vw;
		height:5vw;
	}
	
	section.section_intro .portfolio_link .icon_chevron_right {
		width:7vw;
		height:7vw;
	}

}




/* !LOGO INTRO */

#logo .tofill {
	fill:#0D7480;
}



/* !SECTION MISSION */





/* !Forms */






/* !Screenshot Wall (diagonal) */

section.section_sswall {
	width:100%;
	height:62vw;
	padding:0;
	overflow:hidden;
}
.sswall_column_wrapper {
	margin-top:-10%;
	-ms-transform: rotate(-20deg) scale(1.2); /* IE 9 */
    -webkit-transform: rotate(-20deg) scale(1.2); /* Safari */
    transform: rotate(-20deg) scale(1.2);
}

.sswall_card {
	/* column_1-5 margin-left * column_1-5 width) */
	margin-bottom:13.8%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

.column_1-3_ss .sswall_card {
	/* (correctie) gebruikt in ssmwall - ppveerkr */
	margin-bottom:7.8%;
}






/* !Screenshot Wall (horizon small - schoffer) */

section.section_sshswall {
	width:100%;
	height:42vw;
	padding:0;
	overflow:hidden;
}
.sshswall_column_wrapper {
	margin-top:-10%;
	-ms-transform:scale(1.2); /* IE 9 */
    -webkit-transform:scale(1.2); /* Safari */
    transform:scale(1.2);
}

.sshswall_card {
	/* column_1-5 margin-left * column_1-5 width) */
	margin-bottom:13.8%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}




/* !Screenshot Wall (mozaiek - ppveerkr) */
section.section_ssmwall {
	width:100%;
	height:52vw;
	padding:0;
	overflow:hidden;
}
.ssmwall_column_wrapper {
	margin-top:4.2%;
	margin-left:0;
	-ms-transform:scale(1.2); /* IE 9 */
    -webkit-transform:scale(1.2); /* Safari */
    transform:scale(1.2);
}






/* !Screenshot Row (mixed) - tpep front */
.ssrow_column_wrapper {
	width:100%; 
	height:0; 
	padding-top:10%;
	padding-bottom:33%; 
	overflow:hidden; 
	position:relative; 

}
.ssrow_column_wrapper2 {
	position:absolute !important;
	overflow:hidden;
	
	-ms-transform: scale(1.2); /* IE 9 */
    -webkit-transform: scale(1.2); /* Safari */
    transform: scale(1.2);
    overflow:hidden;
}
.ssrow_card {
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.ssrow_col1 {
	margin-top:6.2%;
}
.ssrow_col2 {
	padding-top:10%;
}
.ssrow_col3 {
	padding-top:0;
}
.ssrow_col4 {
	padding-top:3.8%;
}








/* !Screenshot Row Full(mixed) - tpep */
.ssrowfull_column_wrapper {
	width:100%; 
	height:0; 
	padding-top:10%;
	padding-bottom:50%; 
	overflow:hidden; 
	position:relative; 

}
.ssrowfull_column_wrapper2 {
	position:absolute !important;
	overflow:hidden;
	
	-ms-transform: scale(1.2); /* IE 9 */
    -webkit-transform: scale(1.2); /* Safari */
    transform: scale(1.2);
    overflow:hidden;
}
.ssrow_card {
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.ssrow_col1 {
	margin-top:6.2%;
}
.ssrow_col2 {
	padding-top:10%;
}
.ssrow_col3 {
	padding-top:0;
}
.ssrow_col4 {
	padding-top:3.8%;
}












/* !Screenshot Row (mixed) */
.sshsrow_column_wrapper {
	width:100%; 
	height:0; 
	padding-top:10%;
	padding-bottom:33%; 
	overflow:hidden; 
	position:relative; 
}
.sshsrow_column_wrapper2 {
	position:absolute !important;
	overflow:hidden;
	
	-ms-transform: scale(1.2); /* IE 9 */
    -webkit-transform: scale(1.2); /* Safari */
    transform: scale(1.2);
    overflow:hidden;
}
.sshsrow_card {
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.sshswall_col1 {
	margin-top:-4.7%;
}
.sshswall_col2 {
	margin-top:-7.6%;
}
.sshswall_col3 {
	margin-top:-20%;
}
.sshswall_col4 {
	margin-top:7.6%;
}







/* !Screenshot Wall (vdkamp) */

.sswall_col1_vdkamp {
	margin-top:-4.7%;
}
.sswall_col2_vdkamp {
	margin-top:-7.6%;
}
.sswall_col3_vdkamp {
	margin-top:-20%;
}
.sswall_col_vdkamp4 {
	margin-top:7.6%;
}





/* !Screenshot Wall (mixed)  */

.sswallm_col1 {
	margin-top:6.2%;
}
.sswallm_col2 {
	margin-top:-3.8%;
}
.sswallm_col3 {
	margin-top:0;
}
.sswallm_col4 {
	margin-top:3.8%;
}
.sswallm_col5 {
	margin-top:7.6%;
}






/* !Screenshot Wall (icons)  */

.sswallic_col1 {
	width:12.14%;
	margin-top:6.2%;
}
.sswallic_col2 {
	width:12.14%;
	margin-top:-3.8%;
}
.sswallic_col3 {
	width:12.14%;
	margin-top:0;
}
.sswallic_col4 {
	width:12.14%;
	margin-top:3.8%;
}
.sswallic_col5 {
	width:12.14%;
	margin-top:7.6%;
}
.sswallic_col6 {
	width:12.14%;
	margin-top:11.4%;
}
.sswallic_col7 {
	width:12.14%;
	margin-top:15.2%;
}











/* !Slideshows Projects */
.slideshow_projects_container {
	height:24vw;
	width:100vw;
	overflow:hidden;
}

.slideshow_projects_container .overflow_left {
	width:10.5%;
	height:100%;
	float:left;
	position:relative;
	display:block;
	z-index:10;
}

.slideshow_projects_container .overflow_right {
	width:7%; 
	height:100%;
	float:left;
	position:relative;
	display:block;
}

.slideshow_projects_container .overflow_right .icon_chevron_right {
	width:2.4vw;
	height:2.4vw;
	top:10.8vw;
	left:1.2vw;
	display:block;
	position:absolute;
	opacity:1;
	cursor:pointer;
	
	fill:#000000;
	
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.slideshow_projects_container .overflow_left .icon_chevron_right {
	width:2.4vw;
	height:2.4vw;
	top:10.8vw;
	right:4.7vw;
	display:block;
	position:absolute;
	opacity:1;
	cursor:pointer;
	
	fill:#000000;
	
	-moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    
    -moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.dark_mode .slideshow_projects_container .overflow_right .icon_chevron_right, .dark_mode .slideshow_projects_container .overflow_left .icon_chevron_right {
	fill:#FFFFFF;
}

@media (prefers-color-scheme: dark) {
	.slideshow_projects_container .overflow_left .icon_chevron_right, .slideshow_projects_container .overflow_right .icon_chevron_right {
		fill:#FFFFFF;
	}
	.dark_mode .slideshow_projects_container .overflow_right .icon_chevron_right, .dark_mode .slideshow_projects_container .overflow_left .icon_chevron_right {
		fill:#000000;
	}
}


.slideshow_projects_container .overflow_left.hidden, .slideshow_projects_container .overflow_right.hidden {
	
}

.slideshow_projects_container .overflow_right.hidden .icon_chevron_right, .slideshow_projects_container .overflow_left.hidden .icon_chevron_right {
	opacity:0;
	cursor:default;
}

.slideshow_projects_intro {
	margin-left:10.5vw;
	width:79%;
}
.slideshow_projects_intro_inset_r {
	text-align:right;
	display:block;
	position:absolute;
	right:7.5%;
	top:0;
	margin-top:.38em;
}

.slideshow_projects_wrapper {
	width:82.5%;
	height:100%;
	float:left; 
	position:relative; 
	display:block; 
	overflow:visible !important;
}

.slideshow_projects_deck, .slideshow_qs_deck {
	display:block;
	position:absolute;
	left:0%; 
	width:500%; 
	height:100%;
}

.slideshow_projects_deck div, .slideshow_qs_deck div {
	margin-right:3.5vw;
	width:24vw;
	height:24vw;
	float:left;
	display:block;
	position:relative;
	opacity:1;
	

	
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;

	
}
.slideshow_projects_deck .item, .slideshow_qs_deck .item {
	background-color:#f4f4f4;
	
	-moz-transition: background .6s ease-in-out, color .3s ease-in-out;
	-webkit-transition: background .6s ease-in-out, color .3s ease-in-out;
	-ms-transition: background .6s ease-in-out, color .3s ease-in-out;
	transition: background .6s ease-in-out, color .3s ease-in-out;
}
.dark_mode .slideshow_projects_deck .item, .dark_mode .slideshow_qs_deck .item {
	background-color:#1F1F1F;
	
	-moz-transition: background .6s ease-in-out, color .3s ease-in-out;
	-webkit-transition: background .6s ease-in-out, color .3s ease-in-out;
	-ms-transition: background .6s ease-in-out, color .3s ease-in-out;
	transition: background .6s ease-in-out, color .3s ease-in-out;
} 

.slideshow_projects_deck div.invisible, .slideshow_qs_deck div.invisible {
	opacity:.5;
	
	-moz-transition: background .6s ease-in-out, color .3s ease-in-out,  opacity .5s ease-in-out;
	-webkit-transition: background .6s ease-in-out, color .3s ease-in-out,  opacity .5s ease-in-out;
	-ms-transition: background .6s ease-in-out, color .3s ease-in-out, opacity .5s ease-in-out;
	transition: background .6s ease-in-out, color .3s ease-in-out, opacity .5s ease-in-out;
}
.slideshow_projects_deck div.last, .slideshow_qs_deck div.last {
	margin-right:0;
}
.slideshow_qs_deck div h3 {
	position:absolute;
	bottom:0;
}

.slideshow_projects_deck div div:first-child, .slideshow_qs_deck div div:first-child {
	width:100%;
	height:0;
	padding:0;
	padding-bottom:61.8%;
	
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;

}
.slideshow_qs_deck div div:first-child {
	padding-bottom:38.2%;
	vertical-align:bottom;
}
.slideshow_projects_deck div div:last-child, .slideshow_qs_deck div div:last-child{
	padding:5% 8% 0 8%;
}

@media (prefers-color-scheme: dark) {
	.slideshow_projects_deck .item, .slideshow_qs_deck .item {
		background-color:#1F1F1F;
	}
	.dark_mode .slideshow_projects_deck .item, .dark_mode .slideshow_qs_deck .item {
		background-color:#f4f4f4;
	}
	
	.slideshow_projects_deck div div:first-child, .slideshow_qs_deck div div:first-child {
		opacity:.85;
	}
}


/* mobile s */
@media only all and (max-width: 767px) {
	.slideshow_projects_intro {
		width:90%;
		margin-left:5%;
	}
	.slideshow_projects_container {
		width:100vw;
		height:79vw;
	
	}
	.slideshow_projects_deck, .slideshow_qs_deck {
		display:block;
		position:absolute;
		left:0%; 
		width:1000%; 
		height:100%;
	}
	.slideshow_projects_deck div, .slideshow_qs_deck div {
	
		width:79vw;
		height:79vw;
		
	}
	
	.slideshow_projects_container .overflow_right .icon_chevron_right {
		width:5vw;
		height:5vw;
		top:37vw;
	}
	
	.slideshow_projects_container .overflow_left .icon_chevron_right {
		width:5vw;
		height:5vw;
		top:37vw;
	}
	
	.slideshow_projects_deck div div:first-child, .slideshow_qs_deck div div:first-child {
		width:100%;
		height:0;
		padding:0;
		padding-bottom:61.8%;
		
		background-size:cover;
		background-position:center center;
		background-repeat:no-repeat;
	
	}
	.slideshow_qs_deck div div:first-child {
		padding-bottom:38.2%;
		vertical-align:bottom;
	}
	.slideshow_projects_deck div div:last-child, .slideshow_qs_deck div div:last-child {
		padding:0 8% 0 8%;
		
	}
	
	.slideshow_projects_deck div.m_invisible { 
		opacity:.5;
	
		-moz-transition: opacity .5s ease-in-out;
		-webkit-transition: opacity .5s ease-in-out;
		-ms-transition: opacity .5s ease-in-out;
		transition: opacity .5s ease-in-out;

	}



}





/* !Navigation */
nav {
	-webkit-animation-duration: 0.5s;
     -moz-animation-duration: 0.5s;
       -o-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;
}
.headroom {
	-webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    -o-animation-name: slideUp;
    animation-name: slideUp;
    display:none;
}
.headroom--pinned {
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    -o-animation-name: slideDown;
    animation-name: slideDown;
 }
.headroom--unpinned {
    -webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    -o-animation-name: slideUp;
    animation-name: slideUp;
}


nav {
	display:block;
	position:fixed;
/* 	z-index:1000; */
	width:100%;
	height:80px;
	background-color:rgba(255,255,255,.8);
/* 	background-color:rgba(0,0,0,.8); */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.dark_mode nav {
	background-color:rgba(0,0,0,.8);
}


nav.open {


}

nav .nav_top {
	width:100%;
	height:80px;
	display:block;
}





/* !ICONS */
.icon_wrapper {
	display:block;
	position:relative;
	width:20%;
	height:0;
	padding-bottom:33%;
	margin-bottom:0;
}
.icon_wrapper_small {
	display:block;
	position:relative;
	width:20%;
	height:0;
	padding-bottom:15%;
	margin-bottom:0;
}
.icon_sq {
	display:block;
	position:absolute;
	bottom:0;
	width:68%;
	height:0;
	padding-bottom:68%;
	z-index:0;
	margin-bottom:16%;
}








/* !SLODESHOW TESTIMONIALS */
.slideshow_testimonials {
	display:block;
	position:relative;
}

.slideshow_testimonials .item {
	display:block;
	position:relative;
	
	opacity:0;
	z-index:0;
}

.slideshow_testimonials .secondary {
	display:block;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	z-index:2;
}






/* !SLIDESHOW DEFAULT */
/*
.slideshow_wrapper {
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
}
*/
.slideshow_wrapper .image {
	width:100%;
	height:100%;
	left:0;
	position:absolute;
	
	background-size:cover;
	background-position:center;
	background-repeat: no-repeat;
}

.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 3%; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 2em; width: .45em; height: .45em; 
    display: inline-block; color: #FFFFFF; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #CCCCCC;}
.cycle-pager > * { cursor: pointer;}





/* !SECTION WHY
#section_home_why .column_wrapper .column_1-2s:first-child {
	text-align:right;
}*/
/*

#section_home_why, #section_home_how, #section_slideshow_projects {
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;

}
*/



/* !SECTION TEXT */

#section_text_info {
	display:block;
	position:relative;
}
#section_text_info_mobile {
	display:none;
	position:relative;
}
#section_text_info .text_field, #section_text_info .text_title, #section_text_info .text_heading {
	display:block;
	position:relative;
}

#section_text_info .text_bg_seperator {
	/* overlay to hide 'why' texts for 'how', in order to leave the 'why' blocks unanimated in the transition  */
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	opacity:0;
	z-index:1;
}
#section_text_info .why {
	display:block;
	position:relative;
	width:100%;
	opacity:0;
	z-index:0;
}
#section_text_info .text_field .how, #section_text_info .text_title .how, #section_text_info .text_field .q, #section_text_info .text_title .q {
	display:block;
	position:absolute;
	width:100%;
	top:0;
	opacity:0;
	z-index:2;
}

#section_text_info .text_heading {
	z-index:10;
}
#section_text_info .text_heading .how, #section_text_info .text_heading .why, #section_text_info .text_heading .q {
	display:block;
	opacity:1;
	position:relative;
	float:left;
	width:auto;
	cursor:pointer;
}
#section_text_info .text_heading .how, #section_text_info .text_heading .q {
	margin-left:2em;
}

#section_text_info .text_heading .slide-line {
	display: block;
	padding:0;
	margin:0;
	position: absolute;
	background: none #333333;
	top: 0; 
	height: .13em;  
	top: 1.3em;
	z-index: 10;
}
.dark_mode #section_text_info .text_heading .slide-line {
	background: none #B0B0B0 !important;
}
@media (prefers-color-scheme: dark) {
	#section_text_info .text_heading .slide-line {
		background: none #B0B0B0;
	}
	.dark_mode #section_text_info .text_heading .slide-line {
		background: none #333333 !important;
	}

}

/* mobile s */
@media only all and (max-width: 767px) {
	
	#section_text_info {
		display:none;
	}
	#section_text_info_mobile {
		display:block;
	}
	
	#section_text_info_mobile .container {
		padding-bottom:2em;
		padding-top:1em;
		display:none;
	}
	
	#section_text_info_mobile .selected.container {
		visibility:visible;
		display:block;
	}
	#section_text_info .text_heading .how, #section_text_info .text_heading .q {
		margin-left:0;
	}
	
	#section_text_info .text_heading .slide-line, #section_text_info .text_heading .slide-line {
		height:0;
	
	}
	
	.text_info_mobile .icon_chevron_right {
		width:5vw;
		height:5vw;
		
		display:inline-block;
		
		opacity:1;
		cursor:pointer;
		
		fill:#333333;
		
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform:rotate(90deg);
	    
	    -moz-transition: all .3s ease-in-out;
		-webkit-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
		
		margin-left:.5em;
	}
	
	.text_info_mobile .selected .icon_chevron_right {
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform:rotate(-90deg);
	}
	
	.dark_mode .text_info_mobile .icon_chevron_right {
		fill:#B0B0B0;
	}
	
	@media (prefers-color-scheme: dark) {
		.text_info_mobile .icon_chevron_right {
			fill:#B0B0B0;
		}	
		.dark_mode .text_info_mobile .icon_chevron_right {
			fill:#333333; 
		}
	
	}
	
	.text_info_mobile .column_1-2s {
		padding-bottom:1em;
	}


}





/* !SECTION CONTACT */


	
	
	
	

/* !Forms */
*::-webkit-input-placeholder { color:#52646F; }
*::-moz-placeholder { color:#52646F; } 
*:-ms-input-placeholder { color:#52646F; } 
*::placeholder { color:#52646F; }


.dark_mode ::-webkit-input-placeholder { color:#B0B0B0; }
.dark_mode ::-moz-placeholder { color:#B0B0B0; } 
.dark_mode :-ms-input-placeholder { color:#B0B0B0; } 
.dark_mode ::placeholder { color:#B0B0B0; } 

@media (prefers-color-scheme: dark) {
	*::-webkit-input-placeholder { color:#B0B0B0; }
	*::-moz-placeholder { color:#B0B0B0; } 
	*:-ms-input-placeholder { color:#B0B0B0; } 
	*::placeholder { color:#B0B0B0; }


	.dark_mode ::-webkit-input-placeholder { color:#52646F; }
	.dark_mode ::-moz-placeholder { color:#52646F; } 
	.dark_mode :-ms-input-placeholder { color:#52646F; } 
	.dark_mode ::placeholder { color:#52646F; } 

}




 
input, select, textarea {
  margin: 0;
  border-radius:0;
  height:45px;
  font-size:16px;
  width:100%;

  padding: 8px 25px;
  
  border: 0 solid #DEDEDE;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  
}


input.has-border:focus, select.has-border:focus, textarea.has-border:focus {
  border-color: #343642;
  box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
  outline: none;
}

input.has-error, select.has-error, textarea.has-error {
  border: 1px solid #0D7480;
}

textarea {
	height:105px;

}

.field_set {
  position: relative;
  margin-bottom:15px;
}
.news_canvas .field_set {
	margin-bottom:10px;
}

.field_checkbox {
	height:30px;
	padding:0px;
}


input.field-success, select.field-success {
	border-color:#000000;
/*
	background:url('texture_formvalid@2x.png');
    background-size:45px 20px;
    background-position:right center;
    background-repeat: no-repeat;
*/
}
textarea.field-success {
	border-color:#000000;
}
input.field-error, select.field-error, textarea.field-error {
	border-color:#3574b5;
	border-width:2px;
	border-width:1px;
	border-style: solid;
	border-color:#0D7480;
}
input.field-error:focus, select.field-error:focus, textarea.field-error:focus {
	border-color:#3574b5;
	border-width:1px;
	border-style: solid;
	border-color:#0D7480;
}



.show {
	display:block;
}
.hide {
	display:none;
}
/*
.button {
	width:62%;
	height:45px;
	line-height:45px;
	
	text-align:center;
	display:block;
	position:relative;
	float:left;
	
	border-width:0;
	border-style:solid;
    
    z-index: 0;
  border: none;
  background:#0D7480;
  background-color:#0D7480;
  color: #FFFFFF;
    
    -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
  
  border-color: transparent;
    
}
*/
.modal_button_row .button {
	height:45px;
	line-height:45px !important;
}
.button_right {
	float:right;
}
.button_medium {
	width:155px;
}
.button_align_right {
	float:right;
}
.modal_button_row {
	height:42px;
	width:100%;
	display:block;
}




.button_right {
	float:right;
}
.button_medium {
	width:155px;
}
.button_align_right {
	float:right;
}
.button_row_modal {
	height:40px;
	width:100%;
	display:block;
}

.button_spinner {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background-color:#ea5d64;
	z-index:10;
	opacity:0;
	
	border-width:0px;
	
	
	 -webkit-transition: opacity 0.3s;
	 -moz-transition: opacity 0.3s;
	 transition: opacity 0.3s;
}

.button_spinner.visible {
	opacity:1;
}


@keyframes spinner2 {
  to {transform: rotate(360deg);}
}

.spinner2:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid transparent;
  animation: spinner2 .6s linear infinite;
}

.button_success {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background-color:#4fe746;
	z-index:20;
	opacity:0;
	
	border-width:0px;
	
	-webkit-transition: opacity 0.3s;
	 -moz-transition: opacity 0.3s;
	 transition: opacity 0.3s;
	 
}

.button_success.visible {
	opacity:1;
}

.button_success .icon_checkmark {
	width:26px;
	height:26px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-13px;
	margin-left:-13px;
	opacity:0;
	
	-webkit-transition: opacity 0.3s;
	 -moz-transition: opacity 0.3s;
	 transition: opacity 0.3s;
	 
	 -webkit-transition-delay:0.4s;
	 -moz-transition-delay:0.4s;
	 transition-delay:0.4s;
	 
	 transform:scale(0.4);
}
.button_success.visible .icon_checkmark {
	
	opacity:1;
	
	-webkit-transition: opacity 0.3s ;
	 -moz-transition: opacity 0.3s;
	 transition: opacity 0.3s;
	 
	 -webkit-transition-delay:0.2s;
	 -moz-transition-delay:0.2s;
	 transition-delay:0.2s;
	 transform:scale(1);
}
.button_success .icon_checkmark path {
	fill:#FFFFFF;
	-webkit-transform:translate3d(0,0,0);
}











/* !BUTTON */
.button {
	width:auto;
	display:inline-block;
	position:relative;
	
	-webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
	transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
	border-color: transparent;
	
	z-index:1;
}
.button:hover {
	cursor: pointer;
}

.button .button_bg {
	-webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
	transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	opacity:1;
	z-index: -1;
}
/*.button:hover .button_bg {
	transform: scale(1.06);
}*/
@media (hover: hover) {
	.button.type_1:hover .button_bg {
		transform:scale(1.06);
	}
	.button.type_1_inv:hover .button_bg {
		transform:scale(1.06);
	}
	.button.type_2:hover .button_bg {
		transform:scale(1.06);
	}
	.button.type_3:hover .button_bg {
		transform:scale(1.06);
	}
	.button.type_5:hover .button_bg {
		transform:scale(1.06);
	}
}
.button.type_4 .button_bg {
	transform:scale(1.06);
}





.button.button_l {
	padding-left:31px;
	padding-right:31px;
	height:50px;
	line-height:50px;
	margin-right:15px;
	border-radius:25px;
}
.button.button_l .button_bg {
	border-radius:25px;
}
.button.button_l.fixed {
	width:76px;
	height:50px;
	display:block;
	position: relative;
	padding:0;
}


.button.button_m {
	padding-left:22px;
	padding-right:22px;
	height:35px;
	line-height:35px;
	margin-right:15px;
	border-radius:18px;
}
.button.button_m .button_bg {
	border-radius:18px;
}

/* Pill group modifiers */
.button.pill_left {
	border-radius: 18px 0 0 18px;
	margin-right: 4px;
}
.button.pill_left .button_bg {
	border-radius: 18px 0 0 18px;
}
.button.pill_center {
	border-radius: 0;
	margin-right: 4px;
}
.button.pill_center .button_bg {
	border-radius: 0;
}
.button.pill_right {
	border-radius: 0 18px 18px 0;
}
.button.pill_right .button_bg {
	border-radius: 0 18px 18px 0;
}

/* Icon button (SVG instead of text) */
.button.button_icon {
	width: 36px;
	height: 36px;
	padding: 0;
	line-height: normal;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.button.button_icon .button_bg {
	border-radius: 50%;
}
.button.button_icon .icon_home,
.button.button_icon .icon_member {
	width: 28px;
	height: 28px;
	display: block;
}
.button.button_icon .icon_home .stroke,
.button.button_icon .icon_member .stroke {
	stroke: #0a6570;
	transition: stroke 0.3s ease;
}
.button.button_icon .icon_home .tofill {
	fill: none;
	transition: fill 0.3s ease;
}
.button.button_icon:hover .icon_home .tofill,
.button.button_icon.selected .icon_home .tofill {
	fill: #17232E;
}
.button.button_icon:hover .icon_home .stroke,
.button.button_icon.selected .icon_home .stroke,
.button.button_icon:hover .icon_member .stroke,
.button.button_icon.selected .icon_member .stroke {
	stroke: #17232E;
}
.dark_mode .button.button_icon .icon_home .stroke,
.dark_mode .button.button_icon .icon_member .stroke {
	stroke: #F4FAFB;
}
.dark_mode .button.button_icon .icon_home .tofill {
	fill: none;
}
.dark_mode .button.button_icon:hover .icon_home .tofill,
.dark_mode .button.button_icon.selected .icon_home .tofill {
	fill: #F4FAFB;
}
.dark_mode .button.button_icon:hover .icon_home .stroke,
.dark_mode .button.button_icon.selected .icon_home .stroke,
.dark_mode .button.button_icon:hover .icon_member .stroke,
.dark_mode .button.button_icon.selected .icon_member .stroke {
	stroke: #F4FAFB;
}
@media (prefers-color-scheme: dark) {
	.button.button_icon .icon_home .stroke,
	.button.button_icon .icon_member .stroke {
		stroke: #F4FAFB;
	}
	.button.button_icon .icon_home .tofill {
		fill: none;
	}
	.button.button_icon:hover .icon_home .tofill,
	.button.button_icon.selected .icon_home .tofill {
		fill: #F4FAFB;
	}
	.button.button_icon:hover .icon_home .stroke,
	.button.button_icon.selected .icon_home .stroke,
	.button.button_icon:hover .icon_member .stroke,
	.button.button_icon.selected .icon_member .stroke {
		stroke: #F4FAFB;
	}
	.dark_mode .button.button_icon .icon_home .stroke,
	.dark_mode .button.button_icon .icon_member .stroke {
		stroke: #0a6570;
	}
	.dark_mode .button.button_icon .icon_home .tofill {
		fill: none;
	}
	.dark_mode .button.button_icon:hover .icon_home .tofill,
	.dark_mode .button.button_icon.selected .icon_home .tofill {
		fill: #0a6570;
	}
	.dark_mode .button.button_icon:hover .icon_home .stroke,
	.dark_mode .button.button_icon.selected .icon_home .stroke,
	.dark_mode .button.button_icon:hover .icon_member .stroke,
	.dark_mode .button.button_icon.selected .icon_member .stroke {
		stroke: #0a6570;
	}
}

.button.button_m.fixed {
	width:57px; /* golden ratio */
	height:35px;
	display:block;
	position: relative;
	padding:0;
}


.button.button_contact_submit {
	position: relative;
	z-index: 0;
}
.button.button_contact_submit .button_spinner,
.button.button_contact_submit .button_success {
	border-radius: 25px;
}
@media (hover: hover) {
	.button.button_contact_submit:hover .button_bg {
		background-color: #4fe746 !important;
	}
}



.button.type_1 {
	color:#0D7480;
}
.button.type_1 .button_bg {
	background-color:#FFFFFF;
}
.button.type_1.selected {
	color:#FFFFFF;
}
.button.type_1.selected .button_bg {
	background-color:#17232E;
}

.button.type_1.selected.group_hover {
	color:#0D7480;
}
.button.type_1.selected.group_hover .button_bg {
	background-color:#FFFFFF;
}
.button.type_1:hover {
	color:#FFFFFF !important;
}
.button.type_1:hover .button_bg {
	background-color:#17232E !important;
}

.button.type_1_inv {
	color:#FFFFFF;
}
.button.type_1_inv .button_bg {
	background-color:#0D7480;
}
@media (hover: hover) {
	.button.type_1_inv:hover {
		color:#FFFFFF !important;
	}
	.button.type_1_inv:hover .button_bg {
		background-color:#17232E !important;
	}
}


.button.type_2 {
	color:#0D7480;
}
.button.type_2 .button_bg {
	background-color:#FFFFFF;
}
.button.type_2.selected {
	color:#FFFFFF;
}
.button.type_2.selected .button_bg {
	background-color:#0D7480;
}
.button.type_2.selected.group_hover {
	color:#0D7480;
}
.button.type_2.selected.group_hover .button_bg {
	background-color:#FFFFFF;
}
.button.type_2:hover {
	color:#FFFFFF !important;
}
.button.type_2:hover .button_bg {
	background-color:#0D7480 !important;
}



.button.type_3 {
	color:#0a6570;
}
.button.type_3 .button_bg {
	background-color:#FFFFFF;
}
.button.type_3.selected {
	color:#0a6570;
}
.button.type_3.selected .button_bg {
	/*background-color:#F4FAFB;*/
}
.button.type_3.selected.group_hover {
	color:#0a6570;
}
.button.type_3.selected.group_hover .button_bg {
	background-color:#FFFFFF;
}
.button.type_3:hover {
	color:#17232E !important;
}
.button.type_3:hover .button_bg {
	/*background-color:#F4FAFB !important;*/
}



/* PLUM */
.button.type_4 {
	color:#0a6570;
}
.dark_mode .button.type_4 {
	color:#B0B0B0;
}
.button.type_4 .button_bg {
	background-color:#F4FAFB;
}
.dark_mode .button.type_4 .button_bg {
	background-color:#1F1F1F;
}
.button.type_4.selected {
	color:#FFFFFF;
}
.button.type_4.selected .button_bg {
	background-color:#17232E;
}
.button.type_4.selected.group_hover {
	color:#0a6570;
}
.button.type_4.selected.group_hover .button_bg {
	background-color:#FFFFFF;
}
@media (hover: hover) {
	.button.type_4:hover {
		color:#FFFFFF !important;
	}
	.button.type_4:hover .button_bg {
		background-color:#17232E !important;
	}
}

/* RED CTA */
.button.type_5 {
	color:#FFFFFF;
	font-family:'hmt4_regular', Arial, sans-serif;
}
.button.type_5 .button_bg {
	background-color:#0D7480;
}
.button.type_5:hover {
	color:#FFFFFF !important;
}
.button.type_5:hover .button_bg {
	background-color:#0a6570 !important;
}
.dark_mode .button.type_5 {
	color:#FFFFFF;
}
.dark_mode .button.type_5 .button_bg {
	background-color:#0D7480;
}
.dark_mode .button.type_5:hover {
	color:#FFFFFF !important;
}
.dark_mode .button.type_5:hover .button_bg {
	background-color:#F4FAFB !important;
}

@media (prefers-color-scheme: dark) {
	.button.type_1 {
		color:#0D7480;
	}
	.button.type_1 .button_bg {
		background-color:#161616;
	}
	.button.type_1.selected {
		color:#161616;
	}
	.button.type_1.selected .button_bg {
		background-color:#F4FAFB;
	}

	.button.type_1.selected.group_hover {
		color:#0D7480;
	}
	.button.type_1.selected.group_hover .button_bg {
		background-color:#161616;
	}
	.button.type_1:hover {
		color:#161616 !important;
	}
	.button.type_1:hover .button_bg {
		background-color:#F4FAFB !important;
	}

	.button.type_1_inv {
		color:#FFFFFF;
	}
	.button.type_1_inv .button_bg {
		background-color:#0D7480;
	}
	/* type_1_inv hover — see @media (hover:hover) and (prefers-color-scheme:dark) below */


	.button.type_2 {
		color:#0D7480;
	}
	.button.type_2 .button_bg {
		background-color:#161616;
	}
	.button.type_2.selected {
		color:#161616;
	}
	.button.type_2.selected .button_bg {
		background-color:#0D7480;
	}
	.button.type_2.selected.group_hover {
		color:#0D7480;
	}
	.button.type_2.selected.group_hover .button_bg {
		background-color:#161616;
	}
	.button.type_2:hover {
		color:#161616 !important;
	}
	.button.type_2:hover .button_bg {
		background-color:#0D7480 !important;
	}
	
	.button.type_4 {
		color:#B0B0B0;
	}
	.button.type_4 .button_bg {
		background-color:#1F1F1F;
	}
	.button.type_4.selected {
		color:#161616;
	}
	.button.type_4.selected .button_bg {
		background-color:#F4FAFB;
	}
	/* type_4 hover — see @media (hover:hover) and (prefers-color-scheme:dark) below */

	.button.type_5 {
		color:#FFFFFF;
	}
	.button.type_5 .button_bg {
		background-color:#0D7480;
	}
	.button.type_5:hover {
		color:#FFFFFF !important;
	}
	.button.type_5:hover .button_bg {
		background-color:#0a6570 !important;
	}
	.dark_mode .button.type_5 {
		color:#FFFFFF;
	}
	.dark_mode .button.type_5 .button_bg {
		background-color:#0D7480;
	}
	.dark_mode .button.type_5:hover {
		color:#FFFFFF !important;
	}
	.dark_mode .button.type_5:hover .button_bg {
		background-color:#F4FAFB !important;
	}

	.subjects_sentence_choice {
		background: #1F1F1F;
		color: #B0B0B0;
	}
	/* subjects_sentence_choice hover — see @media (hover:hover) combined query below */

}

@media (hover: hover) and (prefers-color-scheme: dark) {
	.button.type_1_inv:hover {
		color:#000000 !important;
	}
	.button.type_1_inv:hover .button_bg {
		background-color:#F4FAFB !important;
	}
	.button.type_4:hover {
		color:#161616 !important;
	}
	.button.type_4:hover .button_bg {
		background-color:#F4FAFB !important;
	}
	.subjects_sentence_choice:hover {
		background: #F4FAFB !important;
		color: #161616 !important;
	}
}












/* !CAPTCHA */


#captcha, #captcha_contact {
	position:absolute;
	top:0;
	right:0;

	border-width:0 0 0 1px;
	border-style:solid;
	border-color:#FFFFFF;
	z-index:2;

	border-top-right-radius:13px;
	border-bottom-right-radius:13px;

	-moz-border-radius-topright:13px;
	-moz-border-radius-bottomright:13px;
	-webkit-border-top-right-radius:13px;
	-webkit-border-bottom-right-radius:13px;

}

.dark_mode #captcha, .dark_mode #captcha_contact {
	border-color:#161616;

}



.field_captcha .icon_reload {
	width:20px;
	height:20px;
	position:absolute;
	top:12px;
	right:120px;
	z-index:3;
}

.field_captcha .icon_reload path {
	fill:#B0B0B0;
	opacity:1;
	
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
	
}

.field_captcha .icon_reload:hover path {
	fill:#B0B0B0;
	opacity:.5;
	
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.captcha_error_container {
	margin-top:0;
	display:none;
}
.captcha_error_container.visible {
	display:inline-block;
}

@media (prefers-color-scheme: dark) {
	
	.field_captcha .icon_reload path, .field_captcha .icon_reload:hover path {
		fill:#52646F;
	}
	#captcha, #captcha_contact {
		border-color:#161616;
	}
	
	.dark_mode #captcha, .dark_mode #captcha_contact {
		border-color:#FFFFFF;
	
	}
}









/* Contact */
.contact_image {
	width:50%;
	height:0;
	padding-bottom:40%;
	position:absolute;
	bottom:0;
	left:0;
	background-image:url('contact.jpg');
	background-size:cover;
	background-position:right bottom;
	overflow:hidden;
}

.contact_image .gradient {
	width:80vw;
	height:80vw;
	top:-10vw;
	right:0;
	position:absolute;
}
.contact_image .gradient2 {
	width:100%;
	height:50%;
	top:0;
	left:0;
	position:absolute;
}

.contact_image .gradient {
	background: radial-gradient(ellipse closest-side at center, rgba(255, 255, 255,0) 0%, rgba(255, 255, 255,0) 70%, rgba(255, 255, 255,.9) 95%, rgba(255, 255, 255,1) 100%);
	
	-moz-transition: background .6s ease-in-out, color .3s ease-in-out;
	-webkit-transition: background .6s ease-in-out, color .3s ease-in-out;
	-ms-transition: background .6s ease-in-out, color .3s ease-in-out;
	transition: background .6s ease-in-out, color .3s ease-in-out;
}
.contact_image .gradient2 {
	background: -moz-linear-gradient(bottom, rgba(255, 255, 255,0) 0%, rgba(255, 255, 255,0) 70%, rgba(255, 255, 255,1) 100%); 
	background: -webkit-linear-gradient(bottom, rgba(255, 255, 255,0) 0%, rgba(255, 255, 255,0) 70%, rgba(255, 255, 255,1) 100%);
	background: linear-gradient(to top, rgba(255, 255, 255,0) 0%, rgba(255, 255, 255,0) 70%, rgba(2255, 255, 255,1) 100%);
}

.dark_mode .contact_image .gradient {
	background: radial-gradient(ellipse closest-side at center, rgba(22, 22, 22,0) 0%, rgba(22, 22, 22,0) 70%, rgba(22, 22, 22,.9) 95%, rgba(22, 22, 22,1) 100%);
	
	-moz-transition: background .6s ease-in-out, color .3s ease-in-out;
	-webkit-transition: background .6s ease-in-out, color .3s ease-in-out;
	-ms-transition: background .6s ease-in-out, color .3s ease-in-out;
	transition: background .6s ease-in-out, color .3s ease-in-out;
}
.dark_mode .contact_image .gradient2 {
	background: -moz-linear-gradient(bottom, rgba(22, 22, 22,0) 0%, rgba(22, 22, 22,0) 70%, rgba(22, 22, 22,1) 100%); 
	background: -webkit-linear-gradient(bottom, rgba(22, 22, 22,0) 0%, rgba(22, 22, 22,0) 70%, rgba(22, 22, 22,1) 100%);
	background: linear-gradient(to top, rgba(22, 22, 22,0) 0%, rgba(22, 22, 22,0) 70%, rgba(22, 22, 22,1) 100%);
	
	
}

@media (prefers-color-scheme: dark) {
	
	.contact_image .gradient {
		background: radial-gradient(ellipse closest-side at center, rgba(22, 22, 22,0) 0%, rgba(22, 22, 22,0) 70%, rgba(22, 22, 22,.9) 95%, rgba(22, 22, 22,1) 100%);
		
		-moz-transition: background .6s ease-in-out, color .3s ease-in-out;
		-webkit-transition: background .6s ease-in-out, color .3s ease-in-out;
		-ms-transition: background .6s ease-in-out, color .3s ease-in-out;
		transition: background .6s ease-in-out, color .3s ease-in-out;
	}
	.contact_image .gradient2 {
		background: -moz-linear-gradient(bottom, rgba(22, 22, 22,0) 0%, rgba(22, 22, 22,0) 70%, rgba(22, 22, 22,1) 100%); 
		background: -webkit-linear-gradient(bottom, rgba(22, 22, 22,0) 0%, rgba(22, 22, 22,0) 70%, rgba(22, 22, 22,1) 100%);
		background: linear-gradient(to top, rgba(22, 22, 22,0) 0%, rgba(22, 22, 22,0) 70%, rgba(22, 22, 22,1) 100%);
		
		
	}
	
	.dark_mode .contact_image .gradient {
		background: radial-gradient(ellipse closest-side at center, rgba(255, 255, 255,0) 0%, rgba(255, 255, 255,0) 70%, rgba(255, 255, 255,.9) 95%, rgba(255, 255, 255,1) 100%);
		
		-moz-transition: background .6s ease-in-out, color .3s ease-in-out;
		-webkit-transition: background .6s ease-in-out, color .3s ease-in-out;
		-ms-transition: background .6s ease-in-out, color .3s ease-in-out;
		transition: background .6s ease-in-out, color .3s ease-in-out;
	}
	.dark_mode  .contact_image .gradient2 {
		background: -moz-linear-gradient(bottom, rgba(255, 255, 255,0) 0%, rgba(255, 255, 255,0) 70%, rgba(255, 255, 255,1) 100%); 
	background: -webkit-linear-gradient(bottom, rgba(255, 255, 255,0) 0%, rgba(255, 255, 255,0) 70%, rgba(255, 255, 255,1) 100%);
	background: linear-gradient(to top, rgba(255, 255, 255,0) 0%, rgba(255, 255, 255,0) 70%, rgba(2255, 255, 255,1) 100%);

		
		
	}

}


.contact_card {
	height:8em;
	margin-bottom:6em;
}
.contact_card .photo_wrapper {
	width:8em;
	height:8em;
	display:block;
	border-radius:4em;
	background-image:url('address.jpg');
	background-size:cover;
	background-repeat: no-repeat;
}

.contact_card .flex_left {
	padding-right:.5em;
}
.contact_card .flex_right {
	padding-left:.5em;
}

#contact .footer_text {
	font-size:.618em;
	width:100%;
	display:block;
	margin-top:6em;
	clear:both;
	float:right;
	text-align:right;
}
#contact .footer_text .outside {
	width:auto;
	display:block;
	position:absolute;
	left:0;
	text-align:left;
}
/* mobile s */
@media only all and (max-width: 767px) {
	
	#contact {
		padding-bottom:1em !important;
	}
	#contact .footer_text {
		display:block;
		margin-top:24em;
		color:#FFFFFF !important;
	}
	#contact .footer_text a, #contact .footer_text a:visited {
		color:#FFFFFF !important;
	}
	
	.contact_image {
		width:100%;
		padding-bottom:80%;
	}
	
	.contact_image .gradient {
		width:160vw;
		height:160vw;
		top:-20vw;
		right:0;
		position:absolute;
		display:none;
	}
	.contact_image .gradient2 {
		width:200%;
		height:100%;
		top:0;
		left:0;
		position:absolute;
	}
		
	
}
















/* !NEWS */


.side_block {
	display:block;
	position:relative;
	margin-bottom:13.5%;
}
.side_block_content {
	margin-bottom:0;
}
.column_news_item {
	display:block;
	position:relative;
}
.column_news_item .text {
	width:100%;
	height:24vw;
	

	text-overflow: ellipsis;
	overflow:hidden;
}
.column_news_item .text.reduced_size {
	height:14.8vw;
}
.side_block .text {
	padding:32px;
}
.column_news_item .text {
	padding:5% 8% 50% 8%;
}
.news_block_chevron_l .icon_chevron_right {
	width:1.5vw;
	height:1.5vw;
}
.news_block_chevron_l .icon_chevron_right .tofill, .slideshow_projects_intro .icon_chevron_right .tofill {
	fill:#333333;
}
.dark_mode .news_block_chevron_l .icon_chevron_right .tofill, .dark_mode .slideshow_projects_intro .icon_chevron_right .tofill {
	fill:#B0B0B0;
}

.side_block_ident_s {
	/* gelijk aan slideshow_projects_deck div div:first-child */
	width:100%;
	height:0;
	padding:0;
	padding-bottom:61.8%;
	
	display:block;
	position:relative;
	
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
.side_block_ident_s.reduced_size {
	padding-bottom:38.2%;
}
.news_date {
	width:100%;
	text-align:right;
	margin-bottom:2em;
	padding-top:0;
}
.slogan_small {
	width:100%;
	text-align:center;
	position:absolute;
	bottom:6%;
}
/*
.logo_small {
	width:33%;
	height:auto;
	
	display:block;
	position:absolute;
	overflow:visible;
	
	margin-left:auto;
	margin-right:auto;
}
.logo_small .logo {
	width:100%;
	height:auto;
	opacity:0;
	overflow:visible;
	
	display:block;
	position:relative;
}
*/
#logo_small {
	height:1em;
	width:auto;
}
#logo_small .tofill {
	fill:#0D7480;
}
.block_link_right {
	width:90%;
	text-align:right;
}
.block_link_left {
	width:90%;
	text-align:left;
}
.block_link_right_bottom{
	position:absolute;
	bottom:5%;
	right:8%;
	z-index:2;
}
.block_link_left_bottom{
	position:absolute;
	bottom:5%;
	left:8%;
	z-index:1;
	opacity:.5;
}
.side_block_home_link {
	position:absolute;
	width:auto;
	right:8%;
	bottom:8%;
}
.column_news_item {
}

.column_news_link:nth-child(3n) div {
	margin-right:0;
}
#search_results {
	margin-bottom:-3.5vw !important;
}


.side_block_content {
	/* sample ihr
	padding:0;
/*

	padding-top:5%;
	
	border-width:5px 0 0 0;
	border-color:#17232E;
	border-style:solid;
*/

	/*margin-top:.5em;*/
	
}





@media (prefers-color-scheme: dark) {
	.news_block_chevron_l .icon_chevron_right .tofill, .slideshow_projects_intro .icon_chevron_right .tofill {
		fill:#B0B0B0;
	}
	.dark_mode .news_block_chevron_l .icon_chevron_right .tofill, .dark_mode .slideshow_projects_intro .icon_chevron_right .tofill {
		fill:#333333;
	}
	.side_block_ident_s {
		opacity:.85;
	}
	.dark_mode .side_block_ident_s {
		opacity:1;
	}
}


/* mobile s */
@media only all and (max-width: 767px) {


	.side_block .text {
		padding:24px 20px;
	}

	.column_news_item {
	}

	.column_news_item .text {
		width:100%;
		height:auto;
		padding-bottom:4em;
	}
	.column_news_item .text.reduced_size {
		height:auto;
		padding-bottom:4em;
	}
	
	#search_results {
		margin-bottom:-11vw !important;
	}
	
	.news_block_chevron_l .icon_chevron_right {
		width:5vw;
		height:5vw;
	}
	
	.section_blog_latest .column_news_link:nth-child(3n) div {
		margin-bottom:2.5vw;
	}

	.section_blog_latest .slideshow_projects_intro {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.blog_more_mobile {
		text-align: right;
		margin-top: -2em;
	}

}






/* !SEARCH */
#search_results {
	padding-top:0px;
	padding-left:0 !important;
	opacity:1;
}
#search_results.hidden {
	opacity:0;
}
#search_results, #search_results.hidden {
	-webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -o-transition: all 0.2s ease; 
    transition: all 0.2s ease;
}

#search_results_top {
	display:inline-block;
	width:100%;
	height:1px;
	
	margin-top:10px;
	margin-bottom:0px;
}

.search_field_wrapper2 {
	width:38%;
	margin-left:31%;
	display:block;
	position:relative;
}
.search_field_wrapper {
	width:100%;
	height:55px;
	
	overflow:hidden;	
}
.search_field {
	width:80%;
	position:relative;
	float:left;
	
	height:55px;
	line-height:55px;
	
	margin-left:0;
	border-width:0px;
	font-size:1.38em;
	background:none !important;
}
.icon_search {

	width:30px;
	height:30px;
		
	position:relative;
	float:right;
	display: block;
	
	margin-left:10px;
	margin-top:12px;
	margin-right:20px;
	
	border-width:0px;

}

.icon_search path {
	fill:#17232E;
}
@media (prefers-color-scheme: dark) {
	.icon_search path {
		fill:#B0B0B0;
	}

}


.search_param_item {
	display:block;
	margin-bottom:6px;
	height:22px;
}
.search_param_scroll {
	height:224px;
	overflow-y:scroll;
}


.search_loading_wrapper {
	width:40px;
	height:40px;
	position:absolute;
	float:right;
	display:block;
	
	right:70px;
	
	margin:3px 0 10px 0;
	opacity:0;
}
.search_loading_wrapper.visible {
	opacity:1;
} 

.search_loading_wrapper, .search_loading_wrapper.visible {
	-webkit-transition: all 0.1s ease; 
    -moz-transition: all 0.1s ease; 
    -o-transition: all 0.1s ease; 
    transition: all 0.1s ease;
    
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

.search_loading_wrapper, .search_loading_ {
	-webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.search_loading_overlay {
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	opacity:1;
	z-index:10;
	opacity:1;
}
.search_loading_overlay.hidden {
	opacity:0;
}

@keyframes search_loading {
    100% {transform: rotate(360deg);}
}

@keyframes search_bounce  {
  0%, 100% {transform: scale(0.0);}
  50% {transform: scale(1.0);}
}

.load-9 .search_spinner {animation: search_loading 1.2s linear infinite;}
.load-9 .bubble-1, .load-9 .bubble-2 {animation: search_bounce 1.2s ease-in-out infinite;}
.load-9 .bubble-2 {animation-delay: -0.6s;}

.search_spinner {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.bubble-1,
.bubble-2 {
    position: absolute;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 100%;
    background-color: #17232E;
}
.dark_mode .bubble-1, .dark_mode .bubble-2 {
	background-color:#B0B0B0;
}
.bubble-2 {
    top: auto;
    bottom: 0;
}

@media (prefers-color-scheme: dark) {
	.bubble-1,
.bubble-2 {
		background-color:#B0B0B0;
	}
}


.search_sortoptions_wrapper {
	width:auto;
	height:1.618em;
	
	display:block;
	float:right;
	position:relative;

}

.search_sortoptions_text {
	width:auto;
	height:1.618em; 
	line-height:1.618em;
	
	display:inline-block;
	position:relative;
	float:left;
	
	text-align:right;
	padding:0 5px 0 0;
	
	font-size:.8em !important;
}

.search_sortoptions {
	width:170px;
	height:1.618em; 
	line-height:1.618em;
	
	font-size:1em;
	
	display:inline-block;
	position:relative;
	float:right;
	background-color: aqua;
	
	overflow:hidden;
	
	text-align:left;
	padding:0 0 0 5px;
	
	background-color:#FFFFFF;
	background:transparent;
	-moz-appearance:none;
	-webkit-appearance:none;
	appearance:none;
	
	border:0;
	
	cursor:pointer;
	
	/*background-image:url('icon_updown.png');*/
	background-size:auto 12px;
	background-position:right center;
	background-repeat:no-repeat;
}



.search_rowcount {
	float:left;
	display:none;
	position:relative;
	padding-right:.2em;
	font-weight: bold;
}
.search_rowcount_text {
	float:left;
	position:relative;
	display:inline-block;
}
.search_rowcount_text_none, .search_rowcount_text_single, .search_rowcount_text_multiple, .search_rowcount_text_all {
	display:none;
}

.search_rowcount.visible, .search_rowcount_text.visible, .search_rowcount_text_none.visible, .search_rowcount_text_single.visible, .search_rowcount_text_multiple.visible, .search_rowcount_text_all.visible {
	display:inline-block;
}

.search_select_page {
	cursor:pointer;
}


.news_topnav {
	width:100%;
	height:2em;
	display:block;
	position:relative;
	margin-bottom:0 !important;
}
	
.news_pagenav_wrapper {
	display:inline-block;
	float:right;
	text-align:right;
}

.news_pagenav_wrapper_top {
	margin-top:.38em;
	position:absolute;
	right:0;
}
.news_pagenav_wrapper_bottom {
	margin-top:2em;
}
.news_pagenav_wrapper .current_page {
	color:#0D7480;
}


/* mobile s */
@media only all and (max-width: 767px) {
	
	#search_results {
		width:100%;
		
	}
	.search_field_wrapper2 {
		width:95%;
		margin-left:2.5%;
	}
	
	.news_pagenav_wrapper {
		width:100%;
		display:block;
	}
	
	.news_pagenav_wrapper_top {
		margin-top:.38em;
	}
	.news_pagenav_wrapper_bottom {

	}




}


/* ==========================================================================
   USPs
   ========================================================================== */

.usp_list {
	display: flex;
	gap: 5%;
	align-items: stretch;
	padding-left: 7.5%;
	padding-right: 7.5%;
}

.usp_card {
	flex: 1;
	min-width: 0;
}

.usp_heading {
	font-family: 'hmt_bold', Arial, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	margin-bottom: 0.38em;
	color: #333333;
}
.dark_mode .usp_heading {
	color: #B0B0B0;
}
@media (prefers-color-scheme: dark) {
	.usp_heading {
		color: #B0B0B0;
	}
	.dark_mode .usp_heading {
		color: #333333;
	}
}

@media (max-width: 777px) {
	.usp_list {
		flex-direction: column;
		gap: 2em;
		padding-left: 0;
		padding-right: 0;
	}
}


/* ── WhatsApp FAB ───────────────────────────────────────────── */

.whatsapp_fab {
	display: none;
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 56px;
	height: 56px;
	background-color: #25D366;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	z-index: 300;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	text-decoration: none;
}

@media (max-width: 768px) {
	.whatsapp_fab {
		display: flex;
	}
}

.whatsapp_fab:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}


/* ===========================
   SUBJECTS CARD CAROUSEL
   =========================== */

.subjects_track {
	display: flex;
	gap: 20px;
	padding-left: calc((100% - min(93%, 1380px)) / 2 + min(93%, 1380px) * 0.075);
}

.subjects_card {
	flex-shrink: 0;
	width: 22%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	cursor: pointer;
}

.subjects_card--active {
	width: 57.66%;
	cursor: default;
	overflow: visible;
}

.subjects_card_inner {
	display: flex;
	flex-direction: column;
	padding: 36px 32px;
	height: 100%;
	box-sizing: border-box;
}

.subjects_card:not(.subjects_card--active) .subjects_card_inner {
	justify-content: center;
}

.subjects_card_heading {
	font-family: hmt_bold, sans-serif;
	font-size: 1.5em;
	color: #0D7480;
	margin: 0 0 12px 0;
}

.subjects_card_content {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
}

.subjects_card--active .subjects_card_content {
	opacity: 1;
	max-height: 500px;
	overflow: visible;
}

.subjects_card_body {
	width: 62%;
	color: #17232E;
	font-size: 1em;
	line-height: 1.55;
	margin: 0 0 20px 0;
	overflow: hidden;
}

.subjects_card_buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}
.subjects_card_buttons .button {
	margin-right: 0;
}

.subjects_card_buttons a {
	text-decoration: none;
	display: inline-block;
	position: relative;
	z-index: 2;
}

/* Decision tree: sentence builder */
.subjects_sentence {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-bottom: 16px;
	line-height: 1.8;
}
.subjects_sentence_text {
	color: #17232E;
	font-family: hmt4_regular, Arial, sans-serif;
	font-size: 18px;
}
.subjects_sentence_ellipsis {
	color: #A08090;
	font-family: hmt4_regular, Arial, sans-serif;
	font-size: 18px;
}
.subjects_sentence_choice {
	display: inline-block;
	background: #F4FAFB;
	color: #0a6570;
	font-family: 'hmt6_regular', Arial, sans-serif;
	font-size: 16px;
	padding: 2px 14px;
	border-radius: 18px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
	.subjects_sentence_choice:hover {
		background: #17232E !important;
		color: #FFFFFF !important;
	}
}
.dark_mode .subjects_sentence_choice {
	background: #1F1F1F;
	color: #B0B0B0;
}
.subjects_cta {
	margin-top: 16px;
}
.subjects_cta a {
	text-decoration: none;
	display: inline-block;
}
.subjects_cta .button {
	margin-right: 0;
}
.subjects_cta .icon_chevron_right {
	width: 10px;
	height: 10px;
	vertical-align: middle;
	margin-left: 4px;
}
.subjects_cta .tofill {
	fill: currentColor;
}

/* Page title shown above CTA after all selections */
.subjects_page_title {
	margin-top: 12px;
	margin-bottom: 16px;
	margin-left: 84px;
	line-height: 1.5;
	font-size: 1.15em;
}
.subjects_page_title .spt_brand {
	color: #0D7480;
}

.subjects_page_title .spt_ikheb  {
	font-family: hmt_regular, serif;
}
.subjects_page_title .spt_recht {
	font-family: hmt6_regular, serif;
}
.subjects_page_title .spt_h2 {
	font-family: hmt6_regular, serif;
	color: #17232E;
}
.subjects_page_title .spt_h5 {
	font-family: hmt6_regular, serif;
	color: #17232E;
}
.dark_mode .subjects_page_title .spt_h2,
.dark_mode .subjects_page_title .spt_h4 {
	color: #B0B0B0;
}

/* Navigation arrows */
.subjects_nav {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 20px;
}

.subjects_nav_btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
	padding: 0;
}

.subjects_nav_btn .icon_chevron_right {
	width: 16px;
	height: 16px;
}

.subjects_nav_btn .tofill {
	fill: #17232E;
	transition: fill 0.2s ease;
}

.subjects_nav_btn:hover {
	background-color: #17232E;
}

.subjects_nav_btn:hover .tofill {
	fill: #FFFFFF;
}

.subjects_nav_prev .icon_chevron_right {
	transform: rotate(180deg);
}

.subjects_nav_btn--hidden {
	visibility: hidden;
	pointer-events: none;
}

/* Dark mode — class */
.dark_mode .subjects_card.bg_white {
	background-color: #161616;
}

.dark_mode .subjects_card_body {
	color: #B0B0B0;
}
.dark_mode .subjects_sentence_text {
	color: #B0B0B0;
}

.dark_mode .subjects_nav_btn {
	background-color: #161616;
}

.dark_mode .subjects_nav_btn .tofill {
	fill: #B0B0B0;
}

.dark_mode .subjects_nav_btn:hover {
	background-color: #F4FAFB;
}

.dark_mode .subjects_nav_btn:hover .tofill {
	fill: #17232E;
}

/* Dark mode — media query */
@media (prefers-color-scheme: dark) {
	.subjects_card.bg_white {
		background-color: #161616;
	}
	.dark_mode .subjects_card.bg_white {
		background-color: #FFFFFF;
	}

	.subjects_card_body {
		color: #B0B0B0;
	}
	.dark_mode .subjects_card_body {
		color: #17232E;
	}

	.subjects_sentence_text {
		color: #B0B0B0;
	}
	.dark_mode .subjects_sentence_text {
		color: #17232E;
	}

	.subjects_page_title .spt_h2,
	.subjects_page_title .spt_h4 {
		color: #B0B0B0;
	}
	.dark_mode .subjects_page_title .spt_h2,
	.dark_mode .subjects_page_title .spt_h4 {
		color: #17232E;
	}

	.subjects_nav_btn {
		background-color: #161616;
	}
	.dark_mode .subjects_nav_btn {
		background-color: #FFFFFF;
	}

	.subjects_nav_btn .tofill {
		fill: #B0B0B0;
	}
	.dark_mode .subjects_nav_btn .tofill {
		fill: #17232E;
	}

	.subjects_nav_btn:hover {
		background-color: #F4FAFB;
	}
	.dark_mode .subjects_nav_btn:hover {
		background-color: #17232E;
	}

	.subjects_nav_btn:hover .tofill {
		fill: #17232E;
	}
	.dark_mode .subjects_nav_btn:hover .tofill {
		fill: #FFFFFF;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.subjects_track {
		flex-direction: column;
		padding: 0 5%;
		gap: 16px;
	}

	.subjects_card,
	.subjects_card--active {
		width: 100% !important;
		aspect-ratio: auto;
	}

	.subjects_card_content {
		opacity: 1;
		max-height: none;
		overflow: visible;
	}

	.subjects_card_inner {
		padding: 24px 20px;
		justify-content: flex-start;
	}

	.subjects_card_heading {
		text-align: left;
	}

	#subjects .container h2 {
		padding-left: 0 !important;
	}

	.subjects_card_body {
		width: 100%;
	}

	.subjects_sentence {
		margin-bottom: 12px;
	}

	.subjects_nav {
		display: none;
	}
}