/* @override http://localhost:8888/WebDev/Online/comicWorkshops/css/style.031.css */

/* @group Notes */

/*font-family: 'Carter One', cursive;
font-family: 'Caveat', cursive;
font-family: 'Dosis', sans-serif;
font-family: 'Kalam', cursive;
font-family: 'Thasadith', sans-serif;*/

@media screen and (pointer: coarse) {}

@media screen and (pointer: fine) and (hover: hover) {}

/* @end notes */

/* @group Normalise */

/*! normalize.css v1.1.3 | MIT License | git.io/normalize */

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

/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

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

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

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

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

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

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

/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/**
 * Address margins handled incorrectly in IE 6/7.
 */

body {
    margin: 0;
}

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

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: none;
}

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

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

a:active {
	opacity: .9;
	text-decoration: underline;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

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

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

b,
strong {
    font-weight: bold;
}

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

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */

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

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

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


/**
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/**
 * Address CSS quotes not supported in IE 6/7.
 */

q {
    quotes: none;
}

/**
 * Address `quotes` property not supported in Safari 4.
 */

q:before,
q:after {
    content: '';
    content: none;
}

/**
 * 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;
}

/* ==========================================================================
   Lists
   ========================================================================== */

/**
 * Address margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
    margin: 0;
}

dd {
    margin: 0;
}

/**
 * Address paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0;
}

/**
 * Correct list images handled incorrectly in IE 7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

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

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

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

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

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

/**
 * Correct margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/**
 * 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 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

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

button,
input {
    line-height: normal;
}

/**
 * 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 Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

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.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

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

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

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

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

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

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 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 5 and Chrome
 * on OS X.
 */

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

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

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

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

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

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

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

* {
	box-sizing: border-box;
}

/* No outline for mouse clicks, a clear one for keyboard users */
:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 3px solid #f2b600;
	outline-offset: 2px;
}

/* @end normalise */

/* @group Universal */

/* @group Foundation */


/*https://www.fontsquirrel.com/tools/webfont-generator*/


@font-face {
    font-family: 'Dosis Three';
    src: url('../fonts/dosis-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Dosis Four';
    src: url('../fonts/dosis-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Dosis Five';
    src: url('../fonts/dosis-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Carter One';
    src: url('../fonts/carterone-reg.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
	font-display: swap;
}
	
@font-face {
    font-family: 'Caveat';
    src: url('../fonts/caveat.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Kalam';
    src: url('../fonts/kalam.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Kalam';
    src: url('../fonts/kalam-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Kalam Light';
    src: url('../fonts/kalam-light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Thasadith Bold';
    src: url('../fonts/thasadith-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Thasadith';
    src: url('../fonts/thasadith.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
	font-display: swap;
}


:root {
	--ink: #111;          /* comic ink: panel borders, close buttons */
	--caption: #fff4cf;   /* comic caption boxes */
	--darkBlue: #085372;
	--lightBlue: #187c94;
	--skyBlue: #2bb8d6;;
	
	--workText: #151313;
	--workRed: #e61e28;
	--workGreen: #7dac19;
	
	--mainFontThree: 'Dosis Three', sans-serif;
	--mainFont: 'Dosis Four', sans-serif;
	--mainFontFive: 'Dosis Five', sans-serif;
	
	--linkFont: 'Thasadith', sans-serif;
	--boldLinkFont: 'Thasadith Bold', sans-serif;
	--titles: 'Carter One', cursive;
	--subTitle: 'Caveat', cursive;
	--quote: 'Kalam Light', cursive;
	--quoteBold: 'Kalam', cursive;      /* regular and bold weights, for text that needs to stand out */
}

html {
	/* --textScale is set by the accessibility tools (js/a11yTools.js) */
	font: calc(10px * var(--textScale, 1))/20px var(--mainFont);
	background-color: white;
	-webkit-font-smoothing: subpixel-antialiased;
	text-rendering: optimizeLegibility;
	font-smooth: always;
}


body {
	overflow-anchor: auto;
}

.maxMin {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	max-width: 120rem;
}

/* @end foundation */

/* @group Keyframe Animation */

@keyframes load1 {
	0%,
	80%,
	100% {
box-shadow: 0 0;
height: 4em;
	}
	
	40% {
box-shadow: 0 -2em;
height: 5em;
	}
}

/* @end keyframe */

/* @group Browser Fixes */

.chrome img,
.edge img {
	image-rendering: -webkit-optimize-contrast;
}

img {
	/*Prevents users from dargging images off page, not to prevent them from taking them, just to improve ux*/
	pointer-events: none;
}

/*.panel img {
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

.panel img.loaded{
    opacity: 1;
}*/

/* @end browser fixes */

/* @group Plugins */

/* @group No Click */

.noClick {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	cursor: wait;
	display: none;
	background-color: rgba(255, 255, 255, 0);
	z-index: 10;
}

/* @end no click */

/* @group Form Select */

.reveal-if-active {
	opacity: 0;
	height: 0;
	font-size: 1.6rem;
	transform: scale(0.8);
	transition: 0.5s;
	overflow: hidden;
	clear: both;
}

input[type="radio"]:checked ~ .reveal-if-active, 
input[type="checkbox"]:checked ~ .reveal-if-active {
	opacity: 1;
	padding: 1rem 2rem;
	transform: scale(1);
	overflow: visible;
	height: auto;
}

/* @end form select */

/* @group Loader */

.loader,
.loader:before,
.loader:after{
	background: #00556c;
	width: .7rem;
	height: 4rem;
	animation: load1 1s infinite ease-in-out;
}

.loader {
	color: #00556c;
	position: absolute;
	font-size: 1.3rem;
	transform: translateZ(0) scale(.8);
	animation-delay: -0.16s;
	top: 3rem;
	left: 4rem;
}

.loader:before,
.loader:after {
	position: absolute;
	top: 0;
	content: '';
}

.loader:before {
	left: -1.5em;
	animation-delay: -0.32s;
}

.loader:after {
	left: 1.5em;
}

/* @end loader */

/* @group Horizontal Scroll */
/* js/hScroll.js moves .hscroll-wrap sideways with GSAP (mouse & trackpad only, touch scrolls natively) */

.hscroll-wrap {
	will-change: transform;
}

/* @end horizontal scroll */

/* @group Custom Scrollbar */

/* The emerging W3C standard that is currently Firefox-only */
.customScroll {
	scrollbar-width: thin;
	scrollbar-color: #085372 transparent;
}

/* Works on Chrome/Edge/Safari */
.customScroll::-webkit-scrollbar {
	width: .6rem;
}

.customScroll::-webkit-scrollbar-track {
	background: transparent;
}

.customScroll::-webkit-scrollbar-thumb {
	background-color: #085372;
	border-radius: 20px;
}

.customScroll::-webkit-scrollbar-thumb:hover {
	background-color: #187c94;
}

/* @end custom scrollbar */

/* @group Social Buttons */

.social {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
}

.social a {
	width: 2.4rem;
	height: 2.4rem;
	margin-right: 1rem;
	color: white;
	border-radius: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	baseline-shift: baseline;
	overflow: hidden;
}

.chrome .social a  {
	padding-top: .2rem;
}

.social a:hover {
	color: white!important;
	background-color: #085372;
}

.social .fb {
	background-color: #4267b2;
}

.social .twit {
	background-color: #38A1F3;
}

.social .tumblr {
	background-color: #34526f;
}

.social .linked {
	background-color: #0077B5;
}

/* @end social buttons */

/* @group Privacy Content */

.privacyContent {
	
}

.privacyContent p {
	text-align: left!important;
	margin-left: 0;
	margin-right: 0;
}

.privacyContent ul {
	padding: 0;
	margin: 3rem 0;
}

.privacyContent ul li {
	padding: 0;
	margin: 1rem 0;
	list-style: none;
}

.privacyContent h3,
.privacyContent h4 {
	padding: 0;
	margin: 0;
}

.privacyContent h4 {
	color: black;
	margin-top: 3rem;
	font-size: 2.5rem;
}


/* @end privacy content */

/* @group Switchbox */

.switchBox .switchBoxContentWrap .switchBoxContent {
	display: none;
}

.switchBox .switchBoxContentWrap .switchBoxContent.current {
	display: block;
}

/* @end switchbox */

/* @group Warning */
 	
 	/*<div class="cc_css_reboot cc_dialog light headline nl"><div><h1 class="cc_dialog_headline">Wij gebruiken cookies</h1><div><p class="cc_dialog_text">Wij maken gebruik van cookies en andere tracking-technologieën om uw surfervaring op onze website te verbeteren, om gepersonaliseerde inhoud en advertenties te tonen, om onze website trafiek te analyseren en om te begrijpen waar onze bezoekers vandaan komen. <br></p></div><div><button class="cc_b_ok">Ik ga akkoord</button><button class="cc_b_cp">Wijzig mijn voorkeuren</button></div></div></div>*/
 	
 	.cc_dialog {
 		position: fixed!important;
 		right: 10px!important;
 		max-width: 45rem!important;
 		bottom: 10px!important;
 		border-radius: 20px!important;
 		box-shadow: 0 1px 5px black;
 		background-image: linear-gradient(to right top, #919db0, #57aac6, #00b8b6, #06bf79, #87bb12);
 		color: var(--workRed);
 		border: 1px solid workRed;
 		font-family: var(--mainFontThree)!important;
 	}
 	
 	.cc_dialog h5 {
	 	font: bold 2.7rem var(--titles)!important;
	 	color: white !important;
 		text-align: center;
 		text-transform: uppercase;
 		text-shadow: 0 1px 2px black;
 	}
 	
 	#changePreferences {
 		display: flex;
 		flex-flow: column nowrap;
 		justify-content: center;
 		align-items: center;
 		align-content: center;
 		border-radius: 1rem;
 		font-size: 2rem;
 		color: white;
 		padding: .0rem 1rem;
 		margin-right: 1rem;
 		margin-bottom: .2rem;
 	}
 	
 	#changePreferences i {
 		display: block;
 	}
 	
 	.cc_dialog > div > div:nth-of-type(2) {
 		display: flex;
 		flex-flow: row nowrap;
 		justify-content: space-around;
 		align-items: center;
 		align-content: center;
 	}
 	
 	.cc_dialog > div > div:nth-of-type(2) button {
 		flex: 1;
 		margin: 1rem;
 		text-transform: lowercase;
 	}
 	
 	/* @end */

/* @end plugins*/

/* @group Text */

h1, h2, h3, h4 {
	color: var(--darkBlue);
}

h1,
.sub {
	text-align: center;
	color: #3d3e3d;
	font: 2.4rem var(--subTitle);
	margin: 0 0 2rem;
}

h1 {
	margin-bottom: 0;
}

h2 {
	font: normal normal 4.2rem var(--titles);
	line-height: 3rem;
	margin: 3.2rem auto 1rem;
	text-align: center;
}

h3 {
	font: 2.9rem / 3rem var(--mainFontFive);
	text-align: left;
	margin: 4rem 4rem -1rem;
}

h4 {
	margin: 3rem 0 0 4rem;
	font-size: 2rem;
}

p,
ul li {
	margin: 3rem 4rem;
	font-size: 1.9rem;
	line-height: 3rem;
	color: var(--workText);
}

p strong,
p.title,
ul li strong {
	font-family: var(--mainFontFive)
}


a {
	color: var(--darkBlue);
	font-family: var(--linkFont);
	text-decoration: none;
}

a:hover,
a.current {
	color: black;
}

a:focus {
	opacity: 0.9;
}

blockquote {
	font: 2rem/2.7rem var(--quote);
}

blockquote.midQuote {
	padding: 1rem;
	margin: 1rem;
	text-align: center;
	color: black;
	line-height: 3rem;
	background-color: white;
	border-radius: 0;
	border: 1px solid black;
	position: absolute;
	bottom: 0;
}

blockquote.speechBubble {
	position: relative;
	background: white;
	border-radius: 1rem;
	border: 1px solid black;
	padding: .8rem .8rem 1.2rem;
	color: var(--darkBlue);
	text-align: center;
}

blockquote.speechBubble span {
	position: absolute;
	width: 4rem;
	height: 4rem;
	bottom: -4rem;
	left: 50%;
	margin-left: -2rem;
	overflow: hidden;
}

blockquote.speechBubble span::before {
	content: "";
	width: 100%;
	height: 100%;
	border: 1px solid black;
	display: block;
	transform: rotate(43deg) translate(-2.3rem , -2.2rem);
	background-color: white;
}

blockquote.speechBubble.left,
blockquote.speechBubble.right {
	width: 40%;
	margin-top: 1rem;
	margin-bottom: 2rem;
	margin-right: 3rem;
}

blockquote.speechBubble.left {
	float: left;
	margin-left: 4rem;
}

blockquote.speechBubble.right {
	float: right;
	margin-right: 4rem;
}

.center {
	text-align: center;
}

img.center {
	display: block;
	width: 100%;
}

/* @end text */

/* @group Pages */

/* @group Main Details */

/* @group Frame */

.mainDetailsPoints {
	position: absolute;
	width: 16rem;
	right: 0rem;
	top: 0;
	bottom: 0;
	background: url(../images/backgrounds/paper.jpg) white;
	padding-top: 4rem;
	border-left: 1px solid var(--darkBlue);
	z-index: 2;
}

.mainDetailsPoints a {
	display: block;
	width: 100%;
	text-align: left;
	font: 2rem/3rem var(--linkFont);
	position: relative;
	padding: 1rem 0 1rem 1rem;
}

.mainDetailsPoints a::before {
	content: "";
	position: absolute;
	width: .5rem;
	height: 1.5rem;
	left: -.6rem;
	top: 1.5rem;
	background-color: var(--darkBlue);
	border-radius: 20px 0 0 20px;
	transform: scale(0);
	transition: transform .3s ease-in-out 0s;
}

.mainDetailsPoints a:hover::before,
.mainDetailsPoints a.current::before {
	transform: scale(1);
}

/* @end frame */

/* @group Grow Effect */

.no-touchevents .mainDetails .mainDetailsPoints {
	width: 0;
	overflow: hidden;
	opacity: 0;
	transition: width .3s ease-in-out 0s,
				opacity .4s ease-in-out 0s;
	
}

.no-touchevents .mainDetails .panelContent {
	right: 1rem;
	left: 1rem;
	transition: left .3s ease-in-out 0s,
				right .3s ease-in-out 0s;
}

.no-touchevents .mainDetails .panelContent article {
	transition: width .3s ease-in-out 0s;
}

.no-touchevents .fullMain.mainDetails .mainDetailsPoints {
	width: 16rem;
}

.no-touchevents .fullMain.mainDetails .panelContent {
	right: 2rem!important;
	left: 2rem!important;
}

.no-touchevents .fullMain.mainDetails .mainDetailsPoints {
	overflow: visible;
	opacity: 1;
}

.no-touchevents .fullMain.mainDetails .panelContent article {
	width: calc(100% - 19rem);
}


.no-touchevents #voor-wie.panel.mainDetails .panelContent,
.no-touchevents #schools.panel.mainDetails .panelContent {
	right: 30%;
	transition: transition: left .3s ease-in-out 0s,
				right .3s ease-in-out 0s;
}

.no-touchevents #formules .panelContent {
	left: 20%;
	right: 20%;
}

.no-touchevents #zoomshops .panelContent {
	left: 3%;
	right: 3%;
}

/* @end grow effect */

/* @end main details*/

/* @group Home */

/* @group Pictures */

.homeLay1 {
	position: absolute;
	top: 0;
	bottom: 0rem;
	right: 0;
	left: 0;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	overflow: hidden;
}

.homeLay1 .logoIcon {
	position: absolute;
	top: -10rem;
	bottom: -5rem;
	left: -7.5rem;
	right: -7.5rem;
	/*filter: drop-shadow(0px 0px 5px black);*/
}

.homeLay1 .logoIcon img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 50%;
}

.homeLay1 .homeMonster {
	background: url(../images/home/swampMonster.png) center top no-repeat;
	background-size: contain;
	position: absolute;
	top: -3rem;
	right: 3rem;
	width: 8rem;
	height: 20rem;
}

/* @end pictures */

/* @end Home */

/* @group Intro */

.overzichtFlip {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.overzichtFlip h1 {
	order: 2;
}

/* @end intro */

/* @group Overzicht */

/* @group Frame */

.floatLeft {
	width: 39.6%;
	float: left;
	shape-outside: url(../images/photos/inline/400/isch.png);
	shape-margin: 2rem;
	shape-image-threshold: .15;
	display: block;
	margin: .8rem 4rem -1rem;
}

.galleryWrap {
	margin: 3rem;
}

.galleryWrap .row {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: flex-start;
	align-content: center;
	
}

.galleryWrap .gallery {
	flex: 1;
	align-self: stretch;
	width: 50%;
	position: relative;
}

.galleryWrap .cv {
	width: 50%;
}

.galleryWrap .cv .work::after,
.galleryWrap .largePic a::after,
.galleryWrap .gallery span a:after {
	font: 2rem "Font Awesome\ 5 Pro";
	content: "\f00e";
	font-weight: 100;
	position: absolute;
	right: 0;
	z-index: 1;
	width: 2.5rem;
	height: 2.5rem;
	background-color: var(--darkBlue);
	color: white;
	border-radius: 10px 0 0 0;
	padding-left: 1rem;
	padding-top: .5rem;
	bottom: 0;
}

/* @end frame */



/* @group C.V. */

.cv {
	
}

.cv .work {
	margin: 1rem 1rem;
	position: relative;
	overflow: hidden;
	height: 22rem;
}

.cv .work > a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.cv .galTools {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 3rem;
	background-color: black;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	transform: translateY(2.5rem);
	transition: transform .3s ease-in-out 0s;
	z-index: 2;
}

.cv .work:hover .galTools,
.touchevents .cv .work .galTools {
	transform: translateY(0px);
}

.cv .work a img {
	display: block;
	width: 100%;
	border: 1px solid black;
	object-fit: cover;
	height: 100%;
	filter: grayscale(30%);
	transition: filter .3s ease-in-out 0s;
}

.cv .work:hover img,
.touchevents .cv .work img {
	filter: grayscale(0%);
}

.cv .work .galTools a {
	display: block;
	margin-top: .3rem;
	float: left;
	position: relative;
	color: white;
	padding-left: 2.5rem;
	font-size: 1.3rem;
	font-weight: bold;
}

.cv .work .galTools a:hover {
	color: #d8d8d8!important;
}

.cv .work a::after {
	content: "";
	position: absolute;
	left: .2rem;
}

.cv .work .view::after {
	content: "\f1c1";
	font: 1.5rem "Font Awesome\ 5 Pro";
	font-weight: 100;
	top: .2rem;
}

.cv .work .download::after {
	content: "\f381";
	font: 1.5rem "Font Awesome\ 5 Pro";
	font-weight: 100;
	top: .2rem;
}

/* @end cv */

/* @end overzicht */

/* @group For Who */

.packageCard {
	margin: 2.5rem 4rem 0;
	padding: .5rem 0 2rem;
	background-color: rgba(255, 255, 255, 0.75);
	border: 1px solid black;
	border-radius: 1rem;
	box-shadow: 4px 4px 0 var(--darkBlue);
}

.packageCard p,
.packageCard ul li {
	margin: 2rem 3rem;
}

.packageCard ul.prices {
	margin: 1rem 0 0;
	padding-left: 3rem;
}

.packageCard ul.prices li {
	margin: 1rem 3rem 0 0;
}

p.packageLink {
	margin-top: 2.5rem;
	margin-bottom: 0;
	text-align: right;
}

p.packageLink a {
	font-family: var(--mainFontFive);
}

p.packageTag {
	display: inline-block;
	margin-bottom: 0;
	padding: .2rem 1.2rem;
	font: 2.2rem/3rem var(--subTitle);
	color: white;
	background-color: var(--darkBlue);
	border-radius: 1rem;
}

@media (max-width: 800px) {
	.packageCard {
		margin: 2rem 1rem 0;
	}

	.packageCard p,
	.packageCard ul li {
		margin: 1.5rem 1.5rem;
	}

	.packageCard ul.prices {
		padding-left: 1.5rem;
	}
}

/* @end for who */

/* @group Formules */

ul.prices {
	margin-left: 0rem;
}

ul.prices li {
	padding: .5rem 0;
	color: var(--darkBlue);
	transition: color .2s ease-in-out 0s;
	transform-origin: 0% 50%;
	list-style: none;
	margin-top: 1rem;
	margin-bottom: 0;
}

ul.prices li::before {
	content: "";
	width: 2rem;
	height: 2rem;
	background: url(../images/graphics/foot.png) center center no-repeat;
	background-size: 50%;
	background-color: var(--darkBlue);
	display: inline-block;
	margin-right: 1rem;
	transition: background .2s ease-in-out 0s;
	border-radius: 10px;
	position: relative;
	top: .3rem;
}

ul.prices li:hover {
	color: var(--workText);
}

ul.prices li:hover::before {
	background-color: var(--workText);
}

/* @end formules*/

/* @group FAQ */

.faq-list {
	margin: 2rem;
	padding: 0;
}

.faq-list li {
	list-style: none;
	color: black;
	margin: 1rem 2rem;
}

.faq-list li:last-of-type {
	background: none
}

.faq-list li:nth-child(odd) {
	color: var(--darkBlue);
	font-size: 2.3rem;
	background-image: none;
}

.faq-list li:nth-child(even) {
	border-top-style: none;
	margin-bottom: 4rem;
}

/* @end faq */

/* @group Feedback */

.feedbackWrap {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: flex-start;
	align-content: flex-start;
	width: calc(100% - 4rem);
	margin-left: 2rem;
}

.feedbackWrap > ul {
	flex: 1;
	margin-right: 1rem;
	margin-left: 1rem;
}

.feedbackWrap > ul li {
	list-style: none;
	border: 1px solid rgba(0, 0, 0, 0.08);
	/*background-color: rgba(14, 87, 107, 0.02);*/
	background-color: white;
	border-radius: 10px;
	font-size: 1.7rem;
	line-height: 2.6rem;
	margin: 0 0 1rem;
}

.feedbackWrap > ul li.quote {
	padding: 1rem;
}

.feedbackWrap > ul li span {
	display: block;
	text-align: right;
	margin-top: 1rem;
	font-family: var(--mainFont);
	color: #085372;
}

.feedbackWrap > ul li strong {
	display: block;
	text-align: right;
	font-family: var(--mainFont);
	font-weight: normal;
	font-style: normal;
}

.feedbackWrap > ul li img {
	width: 100%;
	padding: 0;
	vertical-align: bottom;
	border-radius: 10px;
}

.feedbackWrap .leftFeed {

}

.feedbackWrap .centerFeed {
	margin: 0;
}

.feedbackWrap .rightFeed {

}

/* @end feedback */

/* @group Contact */

#contact {
	
}

#contact > div {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: flex-end;
	align-content: center;
	width: 100%;
	height: 100%;
	background: url(../images/backgrounds/paper.jpg) #e8e7dc;
}

.contactDetails {
	width: 40%;
	margin-left: 1rem;
	margin-bottom: 1rem;
	margin-right: 1rem;
}

.contactDec {
	flex: 1 auto;
	height: 100%;
	position: relative;
}

.contactDec img {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0% 100%;
}

.bottomDetails {
	margin: 0 -7rem 0 1rem;
	display: block;
}

.bottomDetails .bookingWrap {
	display: block;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--darkBlue);
	width: 100%;
}

.bottomDetails .contactSub {
	display: block;
	margin-bottom: 1rem;
}

.inlineContactShare {
	margin-top: 1rem;
	margin-right: -9rem;
	transform-origin: 0 100%;
	transform: scale(0.9) translate(1rem);
}

.emailSmall {
	font-size: 1.8rem;
}

/* @end contact */

/* @end pages */


/* @group Pop Ups */

/* @group Frame */

.overlay {
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	background-color: rgba(0, 0, 0, 0.3);
	position:fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	z-index: 10;
}

.popUp {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 11;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	visibility: hidden;
	opacity: 0;
}

.popUp::after {
	content: "sluit venster x";
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: white;
	text-align: center;
	padding: 1rem;
	font-size: 2rem;
}

.en .popUp::after {
	content: "close popup x";
}

.popUp .popContainer {
	width: 90%;
	height: 90%;
	position: relative;
	max-width: 140rem;
	max-height: 72rem;
}

.popUp .popContainer .popContent {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 5rem;
	border: 3px solid var(--lightBlue);
	overflow: hidden;
}

.popBackground {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 5rem;
	border: 3px solid var(--lightBlue);
	background-color: white;
	overflow: hidden;
}

.popUp .popContainer .popDec {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 8rem;
	background: url(../images/backgrounds/colour-vertical.png) right 40% repeat-y;
}

.popUp .popContainer .popDec.right {
	right: -1rem;
	transform: scaleX(-1);
	background-position: right 90%;
}

.popUp .popContainer .popDec.left {
	left: -1rem;
}

 .popUp .popContainer .popContent .popFrame {
 	overflow: auto;
 	overflow-x: hidden;
 	position: absolute;
 	top: 2rem;
 	bottom: 2rem;
 	left: 7rem;
 	right: 7rem;
 	border-radius: 5rem;
 	padding-right: 10%;
	padding-left: 5%;
	opacity: 0;
 }
 
 .popFrame > p {
	font: normal normal 2.2rem/3.5rem var(--mainFontThree);
	text-align: center;
 	margin: 2rem auto 3rem;
 }

.popFrame h2 {
	font: normal 5rem/6rem var(--mainFontFive);
	margin-top: 0;
	color: var(--lightBlue);
}
/* @end frame */

/* @group Steps */

/* @group Frame */

.steps {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
}

.steps .step {
	flex: 1;
	min-width: 23rem;
	max-width: calc(33.3% - 6rem);
	align-self: stretch;
	margin-right: 3rem;
	text-align: center;
	color: var(--workText);
	position: relative;
	border-radius: 0 0 0 25%;
	overflow: hidden;
	margin-bottom: 2rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	border-radius: 0 5rem 0 10rem;
	padding-bottom: 2rem;
}

.steps .step:last-child {
	margin-right: 0;
}

.steps .step .top {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	background-color: #c8dbdf;
	position: relative;
	width: 100%;
}

.steps .step .bottom {
	width: 100%;
	padding-top: 1px;
	flex: 1;
}

.steps.popDates .step .subscribe {
	background-color: rgba(255, 255, 255, 0.5);
	font-size: 2rem;
	padding: 1rem;
	font-weight: bold;
	width: 100%;
}

/* @end frame */


/* @group Top */

.step .top .title {
	flex: 1;
	font: 2.6rem var(--mainFontThree);
	color: white;
	text-transform: uppercase;
	text-shadow: 0 1px 2px black;
	letter-spacing: 1px;
	margin-top: 1rem;
	margin-bottom: 1rem;
	display: block;
	width: 100%;
	text-align: right;
	padding-right: 3rem;
}

.step .top .title a {
	color: white;
	text-shadow: 0 1px 2px black;
}

.steps .step:nth-of-type(1) .top {
	background-color: #2bb9d6;
}

.steps .step:nth-of-type(2) .top {
	background-color: #66a208;
}

.steps .step:nth-of-type(3) .top {
	background-color: #bcb710;
}

.steps .step:nth-of-type(4) .top {
	background-color: #c64db9;
}

.steps .step:nth-of-type(1) .top .number {
	background-color: #c5e9f1;
}

.steps .step:nth-of-type(2) .top .number {
	background-color: #e9f8d3;
}

.steps .step:nth-of-type(3) .top .number {
	background-color: #fefdc3;
}

.steps .step:nth-of-type(4) .top .number {
	background-color: #fceaf9;
}


.steps .step .icon .number {
	font: 2rem var(--mainFontFive);
	position: absolute;
	top: -2rem;
	left: -2rem;
	background-color: var(--lightBlue);
	width: 7rem;
	height: 7rem;
	border-radius: 100% 45%;
	color: var(--darkBlue);
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	border: 2rem solid white;
	padding: 2rem 2rem 2.5rem;
	border-right-width: 1rem;
	border-bottom-width: 1rem;
}

/* @end top */

/* @group Bottom */

.steps .step .bottom p,
.steps .step .bottom ul {
	text-align: left;
	margin: 2rem 2rem 2rem 3rem;
	color: black;
	position: relative;
}

.steps .step .bottom p.zoomDate {
	text-align: center;
	margin: 0 -0rem;
	background-color: rgba(255, 255, 255, 0.36);
	padding: .3rem;
	text-transform: lowercase;
	color: #232627;
}

.steps .step .bottom p a {
	font-family: var(--mainFontFive);
}

.steps .step .bottom p.title {
	margin-bottom: -1.7rem;
	margin-top: 1.2rem;
}

.steps .step .bottom ul li {
	list-style: circle;
	text-align: left;
	margin: 0 0 0 2rem;
}

.steps .step:nth-of-type(1) {
	background-color: #c5eaf1;
}

.steps .step:nth-of-type(2) {
	background-color: #e9f8d3;
}

.steps .step:nth-of-type(3) {
	background-color: #fefdc3;
}

.steps .step:nth-of-type(4) {
	background-color: #fceaf9;
}

/* @end bottom */

/* @group Subscribe */

.step .subscribe .info {
	width: 100%;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom-style: solid;
	border-bottom-color: white;
}

.step .subscribe .info span {
	font-size: 1.5rem;
	text-transform: lowercase;
	margin-right: .2rem;
	margin-left: .2rem;
	font-weight: normal;
	font-style: normal;
}

/* @end subscribe */

/* @group Dates Mod */

.steps.popDates .step {
	border-radius: 1rem;
	min-width: 30rem;
	max-width: calc(50 - 6rem);
	margin-right: 3rem;
	text-align: center;
	padding-bottom: 0;
}

.steps.popDates .step .top .title {
	padding: 0;
	text-align: center;
}

/* @end dates mod */

/* @end steps */

/* @group Zoom Switchbox */

.switchBox.zoomShopsSwitchBox {

}

.switchBox.zoomShopsSwitchBox .switchLinks {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	margin-bottom: 2rem;
	margin-top: 2rem;
}

.switchBox.zoomShopsSwitchBox .switchLinks a {
	flex: 1;
	font-size: 2rem;
	background-color: var(--darkBlue);
	color: white;
	padding: 1rem;
	border-radius: 10px;
	margin-right: 1rem;
	margin-left: 1rem;
	text-align: center;
}

.switchBox.zoomShopsSwitchBox .switchLinks span {
	height: 2px;
	width: 5rem;
	background-color: var(--darkBlue);
}

.switchBox.zoomShopsSwitchBox .switchLinks a.current span {
	background-color: green;
}


.switchLinksZoom {
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	position: relative;
}

.switchLinksZoom a {
	flex: 1;
	font-size: 2.3rem;
	text-transform: lowercase;
	font-weight: bold;
	margin-left: 5px;
	margin-right: 5px;
}

.switchLinksZoom a span {
	background-color: var(--lightBlue);
	color: white;
	font-size: 1.5rem;
	font-weight: bold;
	padding: .2rem 2rem;
	display: block;
	width: 25rem;
	border-radius: 20px;
}

.switchLinksZoom a span i {
	margin-right: 10px;
	margin-left: 10px;
}

.switchLinksZoom a:first-of-type {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	
}

.switchLinksZoom a:first-of-type span {
	text-align: left;
	left: 0;
}

.switchLinksZoom a:last-of-type {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
}

.switchLinksZoom a:last-of-type span {
	text-align: right;
	right: 0;
}

.switchLinksZoom a.current span {
	background-color: green;
}

.noDates {
	color: red;
	font-size: 2.5rem;
	text-transform: uppercase;
}

/* @end zoom switchbox */

/* @group Form */

/* @group Switch Box Elements */

/* @group Frame  */

.bookingSwitch {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	margin-left: 4rem;
	margin-right: 4rem;
}

.bookingSwitch .switchBoxSide {
	align-self: stretch;
	padding: 0 3rem;
	position: relative;
	min-width: 25rem;
}

.bookingSwitch .switchBoxSide .stickyWrap {
	position: sticky;
	top: 0;
}

.bookingSwitch .switchBoxSide .stickyWrap .resetWrap {
	width: 100%;
	margin-top: 3rem;
} 

.bookingSwitch .switchBoxSide .stickyWrap .resetWrap input {
	background-color: red;
	color: white;
	border-radius: 10px;
	border-style: none;
	padding: 1rem;
	font-size: 1.5rem;
	float: right;
}

.bookingSwitch .switchBoxContentWrap {
	margin-left: 3rem;
}

.bookingSwitch .switchBoxSide::before {
	content: "";
	position: absolute;
	right: 0;
	width: .2rem;
	background-color: var(--darkBlue);
	border-radius: 10px;
	border: 1px solid black;
	bottom: 0;
	top: 0;
}

/* @end frame */

/* @group Nav */

.bookingSwitch .switchBoxSide .stickyWrap p {
	margin: 0 0 1rem;
	font: 2rem/3rem var(--quote);
	padding: .3rem 1rem;
	color: gray;
	text-align: right;
}

.bookingSwitch .switchBoxSide .stickyWrap p.current {
	color: green;
}

.bookingSwitch .switchBoxSide .stickyWrap span {
	flex: 1;
	border-top: 2px solid var(--darkBlue);
	margin-top: -3.8rem;
	border-radius: 10px;
}

.bookingSwitch .formSection:not(.allForms) {
	display: none;
}

.bookingSwitch .formSection.active {
	display: block;
}

/* @end nav */

/* @group Content */


.bookingSwitch .switchBoxContentWrap .switchBoxContent.active {
	
}

.bookingSwitch .switchBoxContentWrap .switchBoxContent .sapWrap > div > div {
	background-color: rgba(155, 155, 155, 0.04);
	box-shadow: 0 1px 2px black;
	border-radius: 10px;
	margin-bottom: 3rem;
	padding: 1rem;
}

.bookingSwitch .switchBoxContentWrap .switchBoxContent .sapWrap > div > span {
	color: #7b25ba;
	margin-bottom: 0rem;
	display: block;
	padding: .5rem .5rem .5rem 1rem;
	font-size: 2.1rem;
	letter-spacing: 1px;
}

/* @end content */

/* @group First Panel */

.questionWrap p {
	margin: 0;
}

.questionWrap p a {
	margin-left: 0;
	margin-bottom: 2rem ;
	background-color: rgba(192, 192, 192, 0.16);
	padding: 1rem 2rem;
	border-radius: 20px;
	display: block;
}

.questionWrap p a:hover {
	background-color: rgba(192, 192, 192, 0.33);
}

.questionWrap p a strong {
	margin-right: 2rem;
}

.questionWrap p a:nth-of-type(1) {
	margin-top: 0;
}

.questionWrap p a:nth-of-type(3) {
	margin-bottom: 0;
}

.questionWrap p a.active {
	color: green;
}


/* @end first panel */

/* @group Form Nav */

.formNav {
	margin-left: 2rem;
}

.submit .formNav {
	margin-left: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.formNav * {
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	font-size: 2rem;
}

.formNav i {
	margin-right: 1rem;
	margin-left: 1rem;
}

.formNav a:first-child {
	background-color: red;
	color: white;
	border-radius: 10px 0 0 10px;
	min-height: 4.3rem;
	margin-right: 10px;
	padding-right: .5rem;
	padding-left: .5rem;
}

.formNav a:last-child,
#button1  {
	background-color: green;
	color: white;
	min-height: 4.3rem;
	border-radius: 0 20px 20px 0;
	padding-right: 2rem;
	padding-left: 1rem;
}

#button1  {
	border-style: none;
}

form h4 {
	margin-left: 0;
	margin-bottom: 2rem;

}

form .formHideWrap.inschrijven h4:first-of-type {
	margin-top: 0;
}

/* @end form nav */

/* @end */

/* @group Frame */

form.contactForm fieldset {
	border: none;
	font-size: 2rem;
	margin-bottom: 3rem;
	margin-top: 0rem;
}

fieldset.reserveerWorkshop {
	margin-bottom: 0rem!important;
}

form.contactForm legend,
form.contactForm fieldset label.formTitle {
	display: block;
	color: #0e5187;
	margin: 3rem 0 1rem;
	font: 3rem var(--mainFont);
}

form.contactForm .topMargin {
	margin-top: 2rem;
}
		
form.contactForm textarea {
	width: 100%;
	padding: 1rem;
	min-height: 13rem;
	font: 2rem var(--mainFont);
}
	
form.contactForm fieldset p {
	margin: 0;
}
	
form.contactForm .acrdContent {
	height: 0;
	opacity: 0;
	display: none;
	margin-bottom: 3rem!important;
	padding-bottom: 0;
}

form.contactForm .allForms fieldset:nth-of-type(1) {
	margin-top: 0;
}
	
form.contactForm .allForms fieldset:nth-of-type(1) label {
	margin-top: 0;
}

.allForms p {
	margin-bottom: 2rem!important;
}

p.multiple {
	font-size: 1.1rem;
	line-height: 1.4rem;
	text-align: center;
	color: #600808;
	margin-right: 7rem;
	margin-left: 7rem;
	margin-bottom: 3rem;
}

.bookingForm {
	padding-bottom: 3rem;
}

/* @end frame */

.reserveerWorkshop p:first-of-type {
	margin-bottom: 2rem;
}

.horizontalLegend {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

.horizontalLegend label {
	margin-right: .5rem!important;
}

.radioWrap {
	display: block;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.radioWrap input {
	margin-right: 1rem;
	position: relative;
	top: -.2rem;
}

.optionWrap {
	display: block;
}

.optionWrap label {
	display: block;
}

#adres {
	margin-top: 2rem;
}

.promoShare {
	margin-left: -1rem!important;
	margin-bottom: 2rem;
}

.numberInput {
	width: 13rem;
	font: 2rem var(--mainFont);
	margin-left: .5rem;
	background-color: transparent;
	border-style: none;
	border-bottom: 1px solid gray;
	transform: translateY(.2rem);
}

/* @group Check Box Wrap Extras */

.checkbox-wrapper-extras {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}
	
.checkbox-wrapper-extras span  {
	margin-bottom: 2rem;
	font-size: 1.8rem;
}

.checkbox-wrapper-extras p  {
	font-size: 1.5rem;
	padding-left: 3.2rem;
}
	
.checkbox-wrapper-extras span input {
	margin-right: 1.5rem;
}

/* @end checkbox wrap extras */

/* @group Horizontal Input Wrapper */
	
form.contactForm .horizontalWrapper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	padding-bottom: .5rem;
	border-bottom: 1px solid #7f807f;
	margin-top: 2rem;
}
	
form.contactForm .horizontalWrapper span {
	margin-right: 2rem;
}
	
form.contactForm .horizontalWrapper span label {
	padding-left: .2rem;
	color: gray;
	
}
	
form.contactForm .horizontalWrapper span label.answer {
	color: gray;
}

.formHideWrap.choiceStyle {
	margin-top: 0rem;
	padding-top: 0rem;
	border-top: 0px solid var(--darkBlue);
}

.formHideWrap.choiceStyle.show {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 3px solid var(--darkBlue);
}

.formHideWrap {
	overflow: hidden;
	height:0;
	opacity: 0;
	margin-top: 2rem;
}
	
.formHideWrap.show {
	height:100%;
	opacity: 1;
}


	
/* @end horizontal input wrap */

/* @group Checkbox Wrap */


.checkBoxWrap.first {
	
}

.checkBoxWrap {
	margin-top: 1rem;
	margin-bottom: 1rem;
	height: auto;
	overflow: hidden;
}

.checkBoxWrap.hide {
	height: 0;
	opacity: 0;
}

.checkBoxWrap span {
	margin-right: 1rem;
	margin-left: 1rem;
}

.checkBoxWrap input {

}

/* @end checkbox wrap */

/* @group Name Age Wrapper */

form.contactForm .nameAgeWrap {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

form.contactForm .nameAgeWrap::before {
	margin-bottom: 3rem;
	display: block;
	color: var(--darkBlue);
}

form.contactForm .nameAgeWrap:nth-of-type(2)::before {
	content: "Eerste Deelnemer:";
}

form.contactForm .nameAgeWrap:nth-of-type(3)::before {
	content: "Tweede Deelnemer:";
}

form.contactForm .nameAgeWrap:nth-of-type(4)::before {
	content: "Derde Deelnemer:";
}

form.contactForm .nameAgeWrap:nth-of-type(5)::before {
	content: "Vierde Deelnemer:";
}

form.contactForm .nameAgeWrap:nth-of-type(6)::before {
	content: "Vijfde Deelnemer:";
}


.en form.contactForm .nameAgeWrap:nth-of-type(2)::before {
	content: "First Participant:";
}

.en form.contactForm .nameAgeWrap:nth-of-type(3)::before {
	content: "Second Participant:";
}

.en form.contactForm .nameAgeWrap:nth-of-type(4)::before {
	content: "Third Participant:";
}

.en form.contactForm .nameAgeWrap:nth-of-type(5)::before {
	content: "Fourth Participant:";
}

.en form.contactForm .nameAgeWrap:nth-of-type(6)::before {
	content: "Fith Participant:";
}


form.contactForm .addParticipant {
	background-color: var(--darkBlue);
	color: white;
	padding: 1rem;
	border-radius: 10px;
	text-transform: uppercase;
	font-weight: bold;
	font: 1.5rem var(--mainFontFive);
}

form.contactForm .addParticipant i {
	margin-left: 1rem;
	display: inline-block;
}

form.contactForm .addParticipant:hover {
	background-color: green;
}

/* @end name age wrapper */

/* @group Vertical Input Wrapper */

form.contactForm .input-wrapper {
	position: relative;
	display: block;
	margin: 2rem 0 0;
}
	
form.contactForm .input-wrapper input {
	border: none;
	border-bottom: 1px solid gray;
	padding: .7rem 0;
	position: relative;
	width: 100%;
	transition: transform .7s ease;
	letter-spacing: 1px;
	margin-bottom: 2.5rem;
	font-size: 2rem;
}
	
form.contactForm .input-wrapper input:focus {
	border-color: #083519;
}
	
form.contactForm .input-wrapper label {
	position: absolute;
	top: .3rem;
	pointer-events: none;
	transition: all 1s ease;
	left: .3rem;
	width: 100%;
	text-align: left;
	color: gray;
}
	
form.contactForm .input-wrapper input + label {
	transform: translate(0rem, 0rem);
	text-align: left;
}
		
form.contactForm .input-wrapper input:focus + label {
	transform: translate(-.2rem, -2rem);
	font-size: 1.7rem;
	color: silver;
}
	
form.contactForm .input-wrapper input.active + label {
	transform: translate(-.2rem, -2rem);
	font-size: 1.5rem;
	color: green;
}
	
/* @end vertical input wrapper */

/* @group Date Time */

.dateTime {
	position: relative;
	width: 100%;
	margin-top: 0;
	overflow: hidden;
}

.dateTimePickerWrapper {
	height: 100%;
	position: absolute;
	overflow: hidden;
	margin-top: 2rem!important;
}

/* @end date time */

/* @group Anti Spam */
	
form.contactForm .antiSpam {
	width: 100%;
	margin: 1.5rem 0;
	border: 1px solid gray;
	padding-bottom: 2.5rem;
	text-align: center;
	text-transform: uppercase;
}
	
form.contactForm .antiSpam h5 {
	text-align: center;
	color: black;
	letter-spacing: 2px;
	font: 1.1rem "Lucida Grande", Lucida, Verdana, sans-serif;
}
		
form.contactForm .antiSpam legend {
	text-align: center;
	margin: 0 0 -1rem;
}
	
/* @end anti spam */
		
/* @group Enquiry Type */

.enquiryType {
	margin-bottom: 5rem;
}
	
.enquiryType .checkbox-wrapper {
	margin-top: 1rem;
	position: relative;
	border-bottom: 1px solid #9bc1d7;
	background-color: #f5f8fb;
	padding: .5rem .5rem .5rem 1.5rem;
	transition: all .3s ease-in-out 0s;
	display: flex;
	flex-flow: row-reverse nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	font-size: 2rem;
}
	
.enquiryType .checkWrap {
	float: left;
	width: 3rem;
	height: 3rem;
}
	
.enquiryType .checkbox-wrapper label {
	margin-left: 2rem;
	width: 100%;
}
	
form.contactForm .checkbox-wrapper.hide {
	height: 0;
	overflow: hidden;
	opacity: 1;
	padding: 0;
	margin: 0;
}
	
/* @end enquiry type */
	
/* @group Privacy */
	
.privacy {
	
}
	
.privacy .privacyCheck:first-of-type {
	margin-bottom: 0rem;
	padding-bottom: 2rem;
	border-bottom-style: solid;
	border-bottom-color: #e7edf3;
}
	
.privacyCheck span {
	margin-right: .8rem;
}

.privacyCheck span a {
	margin-bottom: -1rem;
	display: block;
	margin-top: 1rem;
}
	
.privacyCheck input {

}
	
/* @end privacy */

/* @group Form Annoucements */

/* @group Frame */

.formNotices {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10rem;
	right: 10rem;
	background-color: white;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	opacity: 0;
	visibility: hidden;
}

.formNotices > div {
	width: 90%;
	max-width: 40rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	position: relative;
	margin-left: -2.5rem;
}

/* @end frame */

/* @group Loading */

.loading {
	height: 2.25rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.loading p {
	text-align: center;
	font-size: 2rem;
	position: static;
	margin-top: 0;
}

.loading .loaderWrap {
	position: relative;
	width: 10rem;
	background-color: teal;
}
	
.loading .loader {
	position: absolute;
	bottom: 0;
}

/* @end loading */

/* @group Thanks */

.thanks p {
	text-align: center;
}
	
.thanks i {
	font-size: 10rem;
	color: #09a30b;
}

/* @end thanks */

/* @end form announcements */
		
/* @end form */

/* @end pop ups */

/* @end universal */

/* @group Desktop Styles */

/* @group Full Desktop */

@media screen and (min-width: 799px) {
	
/* @group Frame */

.mobileOnly {
	display: none!important;
}

html {
	background: url(../images/backgrounds/paper.jpg) repeat;
	position: relative;
}

html::after {
	content: "";
}

body {
	overflow: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.paper {
	background: url(../images/backgrounds/comicBack.jpg) fixed white;
	background-size: cover;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0.25;
}

header#mainHead {
	flex: 1;
	height: 10rem;
	width: 100%;
	min-height: 10rem;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	z-index: 10;
}

.hscroll-wrap {
	height: 100vh;
	display: inline-block;
	position: fixed;
}

main {
	height: calc(100vh - 15rem);
	margin-top: 10rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
}

main > div {
	display: flex;
	flex-direction: row;
	position: relative;
	width: calc(100%);
	height: 75%;
	max-height: 60rem;
}

footer {
	position: fixed;
	bottom: 0;
	z-index: 1;
	left: 0;
	right: 0;
}

/* @end frame */
	
/* @group Header */

/* @group Frame */

header#mainHead {
	
}

/* @end frame */

/* @group Top */

header#mainHead .top {
	width: 100%;
	height: 5rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	min-height: 76px; /*keep as pixel as refers to image size*/
	margin-bottom: 2rem;
}

header#mainHead .top > div {
	height: 100%;
	transition: height .2s linear 0s,
				width .2s linear 0s;
}

header#mainHead .top .ink1 {
	flex: 1;
	background: url(../images/backgrounds/colour.png) right bottom no-repeat;
}

header#mainHead .top .logo {
	width: 30rem;
	margin-right: 3rem;
	margin-left: 3rem;
	position: relative;
	background: url(../images/graphics/logo.png) center center no-repeat;
	background-size: contain;
	height: 100%;
}

header#mainHead .top .ink2 {
	flex: 1;
	background: url(../images/backgrounds/colour.png) left bottom no-repeat;
}

/* @end top */

/* @group Bottom */

header#mainHead .bottom {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

header#mainHead .bottom nav {

}

/* @end bottom */

/* @group Nav */

header#mainHead .bottom nav a {
	font: 1.9rem/2rem var(--boldLinkFont);
	text-transform: uppercase;
}

header#mainHead .bottom nav a:active {
	color: red!important;
	text-decoration: none;
}

header#mainHead .bottom nav a::after {
	content: " - ";
	margin-right: .6rem;
	margin-left: .6rem;
}

header#mainHead .bottom nav a:first-of-type::after,
header#mainHead .bottom nav a:last-of-type::after {
	display: none;
}

header#mainHead .bottom nav a i {
	margin-right: 1rem;
	font-size: 1.7rem;
}

/* @end nav */

/* @end header */

/* @group Footer */

/* @group Frame */


footer .top {
	background-color: black;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 3rem;
	height: 2rem;
	z-index: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

footer .bottom {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	height: 3rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	z-index: 1;
	background-color: black;
	box-shadow: 0 -1px 2px black;
}

/* @end frame */

/* @group Footer Top */

footer .top > a {
	background-color: white;
	line-height: 1.3rem;
	border-style: none;
	border-top: 2px solid black;
	transition: transform .5s ease-in-out 0s, margin-left .5s ease-in-out 0s, margin-right .5s ease-in-out 0s;
	height: 30rem;
	flex: .22;
	margin-top: 17.5rem;
}

footer .top > a.cal {
	flex: .12;
}

footer .top > a:hover {
	box-shadow: 0 1px 2px black;
	margin-right: 2.5rem;
	margin-left: 2.5rem;
	border: 1px solid black;
}

footer .top > a.dates:hover {
	transform: translateY(-8rem) rotate(3deg) scale(1);
}

footer .top > a.onlineWorkshops:hover {
	transform: translateY(-8rem) rotate(-2deg) scale(1);
}

footer .top > a.booking:hover {
	transform: translateY(-14rem) rotate(1deg) scale(1);
}

footer .top > a.cal:hover {
	transform: translateY(-8rem) rotate(-3deg) scale(1);
}

footer .top > a:first-of-type {
	border-left: 2px solid black;
}

footer .top > a:last-of-type {
	border-right: 2px solid black;
}

footer .top .footTitle {
	display: block;
	background-color: black;
	color: white;
	padding: .5em .1em .1em 1rem;
	line-height: 3rem;
}

footer .top .footTitle strong {
	font: 1.6rem var(--boldLinkFont);
}

footer .top .footSubTitle {
	font-size: 1.6rem;
	display: block;
	margin: 0 1rem .5rem;
	border-bottom: 1px solid var(--workText);
	padding: 1rem 0;
}

footer .top .footInfo {
	font-size: 1.5rem;
	line-height: 2.2rem;
	padding-left: 1rem;
	display: block;
	position: relative;
}

.calWrap.footInfo {
	width: 100%;
	padding-top: 100%;
}

.calPic {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url(../images/graphics/cal.png) gray;
	background-size: contain;
}

/* @end footer top */

/* @group Footer Bottom */

footer .bottom .credit {
	flex: 1;
	height: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	padding-left: 1rem;
}

footer .bottom .credit p {
	margin: 0;
	font-size: 1.4rem;
	color: white;
	text-transform: lowercase;
}

footer .bottom .credit p a {
	color: #dfdede;
}

footer .bottom .credit p a:hover {
	color: silver!important;
}

footer .bottom .lang {
	padding-left: 1rem;
	border-left: 1px solid white;
}

footer .bottom .lang a {
	background-color: var(--darkBlue);
	color: white;
	padding-right: 1rem;
	padding-left: 1rem;
	font-size: 1.4rem;
	margin-right: 1rem;
	border-radius: 10px;
	border: 1px solid var(--darkBlue);
	font-weight: bold;
}

.nl footer .bottom .lang a.nlClick {
	background-color: green;
}

.en footer .bottom .lang a.enClick {
	background-color: green;
}
	

/* @end footer bottom */

/* @end footer */

/* @group Decoration */

/* @group Dec Strip */

.dec > div {
	display: flex;
	flex-flow: column wrap;
	justify-content: space-around;
	align-items: center;
	align-content: flex-start;
	background-color: transparent!important;
	width: 100%;
}

.dec > div span {
	flex: 1;
	width: 100%;
	overflow: hidden;
	border: 2px solid black;
	box-shadow: 0 0 15px rgba(45, 42, 54, 0.66);
}

.dec span img {
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	object-fit: cover;
	display: block;
	position: relative;
	top: -1px;
	left: -1px;
}

.dec > div span:nth-of-type(2) {
	margin: 3rem 0;
}

/* @end dec strip */

/* @end decoration */

/* @group Credit Bar */

.creditBar a {
	color: white;
}

/* @end credit bar */

/* @group Panel */

/* @group Frame */

.panel {
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	justify-content: center;
	align-items: stretch;
	height: 100%;
	border: 2px solid black;
	margin: 0 4rem 0 0;
	position: relative;
	box-shadow: 0 0 25px rgba(45, 42, 54, 0.66);
	/*The holy fix for blurred text / sub pixel transforms inside locomotive scroll. For browsers based on blink, not having any trasnforms or trasnitions on content wrappers is more important. This transform does nothing to fix blink, removing all transitions and transforms fixed blink. This stabalises Safari and makes the text more stable if not as sharp as blinks smarter nudge / rounding of the rendering layer.*/
    transform: translate3d(0,0,1px);
/*   -webkit-backface-visibility: hidden;*/
}

.panel img.panelBack {
	position: absolute;
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	object-fit: cover;
	object-position: 50% 50%;
}

.panel > div {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}

.panelContent {
	overflow: hidden;
}

.panelContent article {
	overflow-y: auto;
	overflow-x: hidden;
	width: calc(100% - 2rem);
	height: calc(100% - 2rem);
	margin: 1rem 0 0 1rem;
}

.frame {
	background-color: rgba(255, 255, 255, 0.96);
	border: 1px solid black;
}
	
.panel.dec {
	border-style: none;
	box-shadow: none;
}

.panel.size1 {
	width: 20vmin;
	max-width: 18rem;
}

.panel.size2 {
	width: 40rem;
}

.panel.size3 {
	width: 60vmin;
	max-width: 70rem;
	min-width: 60rem;
}

.panel.size4 {
	width: 80vmin;
	max-width: 80rem;
	min-width: 60rem;
}

.panel.size5 {
	width: 90vmin;
	max-width: 100rem;
	min-width: 80rem;
}

.panel.sizeSocial {
	width: 30rem;
	overflow: hidden;
}

.panelSpacer {
	box-shadow: 0 0 rgba(0, 0, 0, 0)!important;
	border-style: none!important;
}

#frontSpacer {
	width: 10vw;
}

#backSpacer {
	width: 5vw;
}

.fbWrap {
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -1px;
	right: -1px;
}

.touchevents .scrollCover {
	display: none;
}

.touchevents .mainDetails .mainDetailsPoints {
	display: none;
}

/* @end frame */

/* @group Overflow On */

body:not(.overflowScrollingOn) .panelContent .customScroll {
	scrollbar-color: transparent transparent;
}

body:not(.overflowScrollingOn) .panelContent .customScroll::-webkit-scrollbar-thumb {
	background-color: transparent;
}

.overflowScrollingOn .panel {
	cursor: default;
}

/* @end overflow on*/

/* @group Scroll Cover */

.scrollCover {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
	z-index: 600;
	cursor: pointer;
	overflow: hidden;
	border: 0px solid green;
	transition: border .3s ease-in-out 0s;
	width: 100%;
	height: 100%;
	/*Stops panel content flickering through scrollcover*/
	-webkit-transform: translate3d(0, 0, 0);
}

.scrollCover::before {
	content: "";
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0.2%, rgba(255, 255, 255, 0) 49.2%, rgba(255, 255, 255, 0.79) 70.1%, rgb(255, 255, 255) 86%, #ffffff 98.7%);
	height: 40rem;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
}

.scrollCover::after {
	content: "";
	color: rgb(0, 85, 108);
	font: 1.3rem var(--linkFont);
	text-transform: lowercase;
	position: absolute;
	left: 0;
	text-align: center;
	bottom: 0;
	padding: .3rem 0;
	border-radius: 0;
	right: 0;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 0%, #8c8c8c 100%);
	height: 2rem;
}

.scrollCover span {
	font: 2rem var(--subTitle);
	position: absolute;
	text-align: left;
	color: black;
	border: 1px solid black;
	padding: 0 4rem 0 .5rem;
	background-color: white;
	letter-spacing: 1px;
	bottom: 1rem;
	left: 1rem;
	z-index: 1;
	transform-origin: 0 100%;
	border-radius: 0 20px 20px 0;
	transition: transform .3s ease-in-out 0s;
}

.scrollCover span::after {
	font-family: "Font Awesome 5 Pro";
	content: "\f101";
	background-color: black;
	color: white;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	padding-left: 1rem;
	padding-right: .5rem;
	border-radius: 20px;
}

.scrollCover:hover span {
	transform: translate(3rem, -1rem)!important;
}

.scrollCover:hover {
	border: 8px solid green;
}

/* @end scroll cover */

/* @group Scroll Panel */

.facebookPlugin.panel .scrollable.frame {
	position: absolute;
	right:0;
	top:0;
	bottom: 0;
	left: 0;
}

.panel .scrollable.frame {
	position: absolute;
	right: 1.5rem;
	top: 2rem;
	bottom: 1.5rem;
	left: 1.5rem;
}

/* @end scroll panel */

/* @end panel */

/* @group Desktop Only Page Layouts */

/* @group Intro */

/* @group Frame */

.overzichtFlip {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.overzichtFlip h1 {
	order: 2;
}

.introWrap {
	position: absolute;
	top: 1rem;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

.introWrap p {
	font: 1.6rem/2.3rem var(--subTitle);
	text-transform: uppercase;
}

.introWrap > div {
	width: 100%;
}

.introWrap img {
	display: block;
}

.introWrap .top {
	width: 100%;
	height: 60%;
	position: relative;
}

.introWrap .top .topImages > div {
	position: absolute;
	bottom: 0;
	top: 0;
}

.introWrap .top .topImages > div:before {
	content: "";
	position: absolute;
	top: -1px;
	bottom: -1px;
	right: -1px;
	left: -1px;
	background-color: black;
}

.introWrap .top .topImages > div > img.back {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 100% 100%;
}

.introWrap .bottom {
	flex: 1;
	position: relative;
	margin-top: 1rem;
}

/* @end frame */

/* @group Top */

/* @group Top Pictrues */

.introWrap .top .topImages {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.introWrap .top .topImages .left {
	left: 0;
	right: 50%;
}

.introWrap .top .topImages .left::before {
	clip-path: polygon(0 0, 100.3% 0, 25.3% 100%, 0% 100%);
}

.introWrap .top .topImages .left img.back {
	clip-path: polygon(0 0, 100% 0, 25% 100%, 0% 100%);
}

.introWrap .top .topImages .left img.character {
	position: absolute;
	bottom: 0;
	z-index: 1;
	width: 25%;
	left: 8.3%;
	clip-path: polygon(100% 0, 100% 75%, 69% 100%, 0 100%, 0 0);
	object-fit: contain;
	object-position: 0% 0%
}

.introWrap .top .topImages .center {
	left: 15%;
	right: 0;
	z-index: 1;
}

.introWrap .top .topImages .center::before {
	clip-path: polygon(100% 0%, 100% 22.3%, 20.1% 100%, -0.2% 100%, 44.4% 0%);
}

.introWrap .top .topImages .center img.back {
	clip-path: polygon(100% 0, 100% 22%, 20% 100%, 0 100%, 44.5% 0%);
}

.introWrap .top .topImages .center img.character {
	position: absolute;
	bottom: 9%;
	z-index: 1;
	height: 80%;
	width: 40%;
	left: 28%;
	clip-path: polygon(0 0, 100% 0, 100% 52.2%, 4% 100%, 0 100%, 0% 50%);
	object-fit: contain;
	object-position: 0% 0%
}

.introWrap .top .topImages .right {
	right: 0;
	left: calc(36%);
	z-index: 1;
	top: 20%;
}

.introWrap .top .topImages .right::before {
	clip-path: polygon(100% 7.7%, -0.6% 100%, 100% 100%);
}

.introWrap .top .topImages .right img.back {
	clip-path: polygon(100% 8%, 0% 100%, 100% 100%);
}

.introWrap .top .topImages .right img.character {
	position: absolute;
	bottom: 5%;
	width: 55%;
	right: 0;
}

/* @end top pictures */

/* @group Intro Top Text */

.introWrap .top .topText {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.introWrap .top .topText .topRightText {
	position: absolute;
	right: 1rem;
	z-index: 1;
	width: 50%;
	height: 100%;
	top: 1rem;
}

.introWrap .top .topText .topRightText > div {
	background-color: #fbfdcb;
	border: 1px solid black;
}

.introWrap .top .topText .topRightText > div > p {
	margin: .6rem;
}

.introWrap .top .topText .topRightText > div:nth-of-type(1) {
	margin-right: 3rem;
}

.introWrap .top .topText .topRightText > div:nth-of-type(2) {
	margin-top: 1rem;
	margin-left: 7rem;
}
		
.introWrap .top .topText .topLeftSpeechBubble {
	background-color: white;
	width: 40%;
	border-radius: 50%;
	z-index: 2;
	border: 1px solid black;
	position: absolute;
	text-align: center;
	top: 1rem;
	left: 1rem;
}

.introWrap .top .topText .topLeftSpeechBubble::after {
	content: "";
	background: url(../images/intro/textBalloonTail.png) 0 0 no-repeat;
	background-size: contain;
	width: 100px;
	height: 60px;
	position: absolute;
	left: 30%;
	bottom: -36px;
	transform: rotate(-20deg);
}	

.introWrap .top .topText .topLeftSpeechBubble p {
	margin: 10% 12%;
}

/* @end intro top text */

/* @end top */

/* @group Bottom */

.introWrap .bottom .back {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	border: 1px solid black;
}

.introWrap .bottom .back img {
	object-fit: cover;
	object-position: 50% 50%;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	
	position: relative;
	top: -1px;
	left: -1px;
}

.introWrap .bottom .left {
	position: absolute;
	left: 5rem;
	border: 1px solid black;
	width: 65%;
	transform: skew(-30deg);
	top: 3rem;
	background-color: #a7e0ef;
}

.introWrap .bottom .left::after {
	content: "Geschikt Voor:";
	transform: skew(30deg);
	display: inline-block;
	background-color: #f2b600;
	border: 1px solid black;
	position: absolute;
	top: -1rem;
	padding-right: 1rem;
	padding-left: 1rem;
	font: 1.4rem/2.8rem var(--mainFontFive);
	text-transform: uppercase;
	box-shadow: 0 1px 2px black;
	left: -3rem;
}

.introWrap .bottom .left p {
	transform: skew(30deg);
	margin-bottom: 2rem;
	margin-top: 3rem;
}

.introWrap .bottom .right {
	position: absolute;
	right: -1%;
	bottom: -10%;
	background-color: black;

	-webkit-mask-image: url(../images/intro/screamBalloon.png);
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;

	transform: rotate(-5deg);
}

.introWrap .bottom .right .outline {
	content: "";
	-webkit-mask-image: url(../images/intro/screamBalloon.png);
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	background-color: white;
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	z-index: -1;
}

.introWrap .bottom .right div p {
	content: "";
	text-align: center;
	margin-left: 9rem;
	padding: 2rem 0 3rem;
}

.introWrap .bottom .right div p a {
	color: #0e576b;
	font: 1.8rem/2rem var(--subTitle);
	text-transform: uppercase;
	background-color: white;
}

.introWrap .bottom .right div p a:hover {
	color: black!important;
}

.introWrap .bottom .right div p span {
	display: block;
	text-align: center;
	margin-top: .2rem;
	background-color: white;
}

/* @end bottom */

/* @end intro*/

/* @end desktop only page layouts */
}

/* @end full desktop */





/* @group Portrait */

@media screen and (min-width: 799px) and (max-height: 900px) {
	
	html {
		font-size: calc(9px * var(--textScale, 1));
	}
	
	header#mainHead .top {
		margin-bottom: 1rem;
	}
	
	.inlineContactShare {
		margin-right: -20rem;
		transform: scale(0.7) translate(1rem);
	}
	
}

@media screen and (min-width: 799px) and (max-height: 800px) {

	html {
		font-size: calc(8px * var(--textScale, 1));
	}

/*	header#mainHead .top {
		margin-bottom: 1rem;
	}*/
	
	main {
		height: calc(100vh - 25rem);
		margin-top: 13rem;
	}
	
	main > div {
		height: 80%;
	}
	
	.inlineContactShare {
		margin-right: -20rem;
		transform: scale(0.7) translate(1rem);
	}
	
}

@media screen and (min-width: 799px) and (max-height: 650px) {

	html {
		font-size: calc(6px * var(--textScale, 1));
	}
	
	header#mainHead .top {
		margin-bottom: -1rem;
	}
	
	footer {
		display: none;
	}
	
	main {
		height: calc(100vh - 20rem);
		margin-top: 18rem;
	}
	
	main > div {
		width: calc(100%);
		height: 100%;
		max-height: 90vh;
	}
		
	.panel.size1 {
		width: 20vmin;
		max-width: 38rem;
	}
	
	.panel.size2 {
		width: 60rem;
	}
	
	.panel.size3 {
		max-width: 90rem;
	}
	
	.panel.size4 {
		width: 100vmin;
		max-width: 90rem;
	}
	
	.panel.size5 {
		width: 90vmin;
		max-width: 100rem;
	}
	
	.panel.sizeSocial {
		width: 40rem;
	}
	
	.inlineContactShare {
		margin-right: -30rem;
		transform: scale(0.6) translate(1rem);
	}

}

@media screen and (min-width: 799px) and (max-height: 500px) {

	html {
		font-size: calc(6px * var(--textScale, 1));
	}
	
	header#mainHead {
		display: none;
	}
	
	main {
		height: 100vh;
		margin-top: 0rem;
	}
	
	.inlineContactShare {
		margin-right: -30rem;
		transform: scale(0.5) translate(1rem);
	}
	
}

@media screen and (min-width: 799px) and (max-height: 200px) {

	html {
		font-size: calc(2px * var(--textScale, 1));
	}
	
	.inlineContactShare {
		margin-right: -200rem;
		transform: scale(0.2) translate(1rem);
	}
		
}

@media screen and (min-width: 799px) and (max-height: 100px) {

	html {
		font-size: calc(1px * var(--textScale, 1));
	}
	
	.inlineContactShare {
		margin-right: -300rem;
		transform: scale(0.1) translate(1rem);
	}
	
}

/* @end portrait*/

/* @group Landscape */

@media screen and (min-width: 799px) and (max-width: 1200px) {
	
	footer .top > a {
		flex: .27;
	}
	
	footer .top > a.cal {
		flex: .15;
	}

}

/* @end landscape */

/* @group Landscape & Portrait */

@media screen and (min-width: 799px) and (min-width: 1000px) and (max-height: 800px) {
	
	
}

/* @end landscape and portrait */

/* @group Tablet */

@media screen and (min-width: 799px) and (pointer: coarse) {
/*@media screen and (min-width: 799px) {*/

	.scrollCover {
		display: none;
	}
	
	.mainDetails .mainDetailsPoints {
		display: none;
	}
	
	html {
		background: url(../images/backgrounds/paper.jpg) repeat;
		position: relative;
		overflow: auto;
	}
	
	#page-wrapper {
		overflow: auto;
		position: fixed;
		top: -35px; /*Offsets the height of the chrome navbar*/
		left: 0;
		width: 100%;
		bottom: 0;
		right: 0;
	}
	
	.hscroll-wrap {
		height: 100%;
		position: relative;
	}
	
/*	.panel {
			height: calc(100% - 100px)!important;
			margin-top: 25px!important;
	}*/

	
/*	@media screen (max-height: 5000px) {
	
		.panel {
			height: 90%!important;
		}

	}*/

}
	
/* @end tablet */

/* @end Desktop Style */

/* @group Mobile & Print */

/*Targets mouse and trackpads*/
/*(pointer: fine) and (hover: hover)*/

/*Targets finger based input
pointer: coarse*/

@media screen and (max-width: 798px), print {

/* @group Mobile Style */

/* @group Basics */

.desktopOnly,
#intro,
.dec,
.panelSpacer,
.panel:not(.hasContent),
#mainHead,
.homeMonster,
#intro .introWrap img {
	display: none;
}

/* @end basics */

/* @group Text */

html {
	background: url(../images/backgrounds/paper.jpg) repeat;
	position: relative;
	font-size: calc(8px * var(--textScale, 1));
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	color: var(--darkBlue);
}

h1,
.sub {
	text-align: center;
	color: #3d3e3d;
	font: 2.4rem var(--subTitle);
	margin: 0 3rem 2rem;
}

h2 {
	font: normal normal 3rem var(--titles);
	line-height: 3.5rem;
	margin: 4rem auto .7rem;
	text-align: center;
}

h3 {
	font: 2.7rem / 3rem var(--mainFontFive);
	margin: 4rem 2rem -1rem;
}

h4 {
	margin: 3rem 0 0 4rem;
	font-size: 2rem;
}

p,
ul li {
	margin: 2rem 2rem;
	font-size: 1.9rem;
	line-height: 3rem;
	color: var(--workText);
}

.faq-list {
	margin: 0;
	padding: 0;
}

.faq-list li {
	list-style: none;
	color: black;
	margin: 1rem 2.3rem;
}

/* @end text */

/* @group Mobile Header */

/* @group Background */

#home,
#intro {
	width: 100%;
	margin: 0;
	border-style: none;
	display: block;
	position: relative;
}

#home {
	overflow: hidden;
}

#home .homeLay1,
#home .homeLay1 .logoIcon {
	position: static;
}

#home .homeLay1 .logoIcon {
	position: static;
	margin: 0 -8rem 0 -8em;
	width: calc(100% + 16rem);
}

#home .homeLay1 .logoIcon img {
	position: static;
	width: 100%;
	height: 100%;
}

#home .panelBack {
	overflow: hidden;
	display: none;
}

#intro {
	border-bottom: 1px solid black;
}

#intro .mobileHeadBack {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: -1;
	top: -50vh;
}

#intro .mobileHeadBack img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0%;
}

/* @end background */

/* @group Coloured Text Blocks */

/* @group Next Date */

.introWrap .mobileNextDate {
	position: absolute;
	top: -5rem;
	background-color: white;
	border: 1px solid black;
	border-left-style: none;
	border-radius: 0 2rem 2rem 0;
}

.introWrap .mobileNextDate p {
	margin: 1rem;
	text-align: center;
	font: 2rem var(--mainFontFive);
}

.introWrap .mobileNextDate p br {
	display: none;
}

.introWrap .mobileNextDate p span {
	display: block;
	font-family: var(--mainFontFive);
}

/* @end next date */

.introWrap .topText {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
}

.introWrap .topText .topRightText {
	order: 2;
}

.introWrap .topText .topLeftSpeechBubble {
	
}

.introWrap .mobileText {
	background-color: white;
	margin: 0 2rem;
	padding: 2rem;
	text-align: center;
	border: 1px solid black;
}

.introWrap .mobileText p {
	font: 1.6rem/2.3rem var(--subTitle);
	text-transform: uppercase;
	margin: 0rem;
	text-align: left;
}

.introWrap .mobileText.one {
	background-color: var(--lightBlue);
	transform: rotate(2deg);
	margin-right: 5%;
	margin-left: 5%;
}

.introWrap .mobileText.one p {
	color: white;
	text-align: right;
}

.introWrap .mobileText.two {
	transform: rotate(-1deg);
	margin-right: 10%;
	margin-left: 8%;
}

.introWrap .mobileText.two p {
	text-align: left;
}

.introWrap .mobileText.three {
	background-color: #c0f205;
	transform: rotate(-2deg);
	margin-right: 10%;
	margin-left: 10%;
	margin-top: 6rem;
}

.introWrap .mobileText.three p {
	text-align: left;
}

.introWrap .mobileText.four {
	background-color: #9a28c7;
	transform: rotate(2deg);
	margin: 0rem 4% 3rem;
}

.introWrap .mobileText.four p {
	text-align: right;
	color: white;
}


/* @end coloured text blocks */

/* @end mobile header*/

/* @group Main Layout */

.floatLeft {
	float: none;
	width: calc(100% - 8rem);
}

main > div {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.panel.hasContent {
	width: calc(50% - 3rem);
	height: 20vh;
	overflow: hidden;
	position: relative;
	margin-top: 2rem;
	margin-left: 2rem;
	border: 1px solid black;
}

.panel.hasContent .panelContent {
	background-color: white;
	width: 100%;
	left: 0!important;
}

#facebookPage {
	display: block;
	order: 1;
	width: calc(100% - 4rem);
	margin-left: 2rem;
	margin-top: 2rem;
}

#facebookPage div {
	width: 100%;
	height: 100%;
}

#facebookPage .fbWrap {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

#facebookPage .fbWrap::after {
	content: "";
	/* Three values: flex-grow | flex-shrink | flex-basis */
	flex: 1 1 2rem;
	align-self: stretch;
	background-color: var(--darkBlue);
	display: block;
	color: white;
	text-align: center;
	font-size: 2rem;
	margin-left: 1rem;
}

#facebookPage .fbWrap .fb-page {
	flex: 1 1 340px;
	max-width: 340px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	background-color: var(--darkBlue);
	overflow: hidden;
}

#facebookPage .scrollCover {
	display: none;
}

.mobileOpen.panel.hasContent .panelContent {
	overflow: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.mobileOpen.panel.hasContent {
	position: fixed;
	top: 1rem;
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	border-radius: 1rem;
	width: auto;
	height: auto;
	z-index: 5;
	margin: 0;
}

.mobileOpenBody {
	overflow: hidden;
}

.mobileOpen.panel.hasContent .scrollCover {
	display: none;
}

.panel.hasContent > div {
	background: url(../images/backgrounds/paper.jpg) center center repeat;
	border-style: solid;
	border-width: 1px;
}

.mainDetailsPoints {
	display: none;
}

.scrollCover {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: url(../images/backgrounds/multiBack.png) left no-repeat white;
	z-index: 2;
	display: block;
	flex-flow: column nowrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
	font-family: var(--quote);
}

#overzicht .scrollCover {
	background-position: 0% 0%;
}

#voor-wie .scrollCover {
	background-position: 20% 0%;
}

#formules .scrollCover {
	background-position: 40% 0%;
}

#faq .scrollCover {
	background-position: 60% 0%;
}

#feedback .scrollCover {
	background-position: 80% 0%;
}

#contact .scrollCover {
	background-position: 100% 0%;
}

.scrollCover:active::after {
	transform: scale(.95);
}

.scrollCover::after {
	content: attr(data-title);
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	font-size: 3rem;
	background-color: rgba(255, 255, 255, 0.78);
	border: 1px solid black;
	border-right-style: none;
	border-left-style: none;
	text-transform: capitalize;
	border-bottom-style: none;
	border-radius: 1rem;
	box-shadow: 0 1px 5px black;
	position: absolute;
	top: 1rem;
	bottom: 1rem;
	right: 1rem;
	left: 1rem;
	padding: 1rem;
}

.scrollCover:active::after {
	box-shadow: inset 0 0px 5px black;
}

#voor-wie .scrollCover::after {
	content: "voor wie"!important;
}

.en #schools .scrollCover::after {
	content: "packages"!important;
}

.scrollCover span {
	display: none;
}

.closePanel.pkgClose {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 7;
	--cw: 6.2rem;
	--ch: 5.4rem;
	visibility: hidden;
	opacity: 0;
}

.mobileOpenBody .closePanel.pkgClose {
	visibility: visible;
	opacity: 1;
}

.speechBubble {
	width: calc(100% - 8rem)!important;
	margin: 2rem 0 4rem 4rem !important;
	float: none!important;
}

.galTools {
	display: none!important;
}

.feedbackWrap {
	display: block;
}

.contactDec {
	display: none;
}

#contact > div {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-end;
	align-content: flex-start;
}

.contactDetails {
	margin-left: 0;
	width: calc(100% - 8rem);
}

/* @end main */

/* @group Popup */

.popUp *::after,
.popUp *::before {
	border-radius: 0!important;
}

.popFrame > h2 {
	font: normal normal 4rem/5rem var(--boldLinkFont);
	margin: 1rem 2rem 0;
}

.popFrame > p {
	margin-right: 1rem;
	margin-left: 1rem;
	font-size: 2rem;
}

.popUp .popContainer {
	width: 96%;
	height: 96%;
	max-height: 100vh;
}

.popUp .popContainer .popDec.right {
	right: -5rem;
}

.popUp .popContainer .popDec.left {
	left: -5rem;
}

 .popUp .popContainer .popContent .popFrame {
 	overflow: auto;
 	overflow-x: hidden;
 	top: 1rem;
 	bottom: 1rem;
 	left: 0;
 	right: 0;
 	border-radius: 0;
 	padding-right: 2rem;
	padding-left: 2rem;
 }

.popUp::after,
.en .popUp::after {
	content: "x";
	position: fixed;
	top: 1.5rem;
	right: 1rem;
	color: red;
	text-align: center;
	padding: 1rem 1rem 1rem 1.2rem;
	background-color: white;
	border-radius: 100%;
	width: 2rem;
	height: 2rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	font-size: 5rem;
	line-height: 1rem;
	border: .5rem solid red;
}

.nextDates {
	flex-flow: column nowrap;
}

.nextDates li {
	margin-bottom: 1.2rem;
	margin-top: 1.2rem;
}

.nextDates li::after {
	display: none;
}

.steps {
	flex-flow: column nowrap;
}

.steps .step {
	min-width: 100%!important;
	max-width: 100%!important;
	margin-right: 0rem!important;
	margin-bottom: 5rem!important;
}

.steps .bottom {
	border-radius: 0!important;
	padding-bottom: 2rem!important;
}

.switchBox {
	margin-left: 0rem;
	margin-right: 0rem;
}

.switchBox .switchBoxSide {
	display: none;
}

/* @end Popup */

/* @group Footer */

/* @group Frame */

footer {
	background-color: var(--darkBlue);
	display: flex;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	margin-top: 3rem;
}

footer * {
	color: white;
}

footer .top {
	order: 1;
	text-align: center;
	font-size: 2rem;
	padding-right: 3rem;
	padding-left: 3rem;
	display: block;
	width: 100%;
}

footer .bottom {
	order: 2;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	width: 100%;
}

footer .bottom .credit {
	order: 2;
	background-color: black;
	width: 100%;
	text-align: center;
}

footer .bottom .credit strong {
	display: block;
}

footer .bottom .social {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

footer .bottom .social a {
	margin-right: 1rem;
	margin-left: 1rem;
	border: 1px solid black;
	font-size: 2rem;
	width: 4rem;
	height: 4rem;
}

footer .top strong {
	display: block;
	margin-top: 3rem;
	margin-bottom: .5rem;
}

footer .top .footTitle {
	width: 100%;
	display: block;
}

footer .top .footInfo {
	display: none;
}

footer .lang a {
	font-size: 3rem;
	margin-right: 1rem;
	margin-left: 1rem;
	font-weight: bold;
}

#changePreferences {
	font-size: 3rem;
	background-color: #ad3604;
	border-radius: 50px;
	padding: 1rem;
	margin: 1rem 0;
	border-style: solid;
	border-width: 2px;
}

/* @end frame */

/* @end footer */

/* @end mobile style */
	
}

/* @end mobile & print */


/* @group Package Modal */
/* Comic-panel popup holding one package. Opened server-side on package URLs (html.pkgOpen),
   or by js/packageModal.js from the Voor Wie / Packages panel. */

.pkgModal {
	--ink: #111;
	--caption: #fff4cf;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	display: none;
	justify-content: center;
	align-items: center;
	padding: 3rem;
}

.pkgOpen .pkgModal {
	display: flex;
}

.pkgOpen body {
	overflow: hidden;
}

.pkgBackdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(8, 40, 54, 0.45);
	-webkit-backdrop-filter: blur(6px) saturate(0.85);
	backdrop-filter: blur(6px) saturate(0.85);
	cursor: pointer;
}

/* The panel outline: slightly slanted, with a slanted notch cut out of the top right corner for the close button.
   Same trick as the intro panel: a black layer clipped to the outline, paper on top clipped a border-width smaller.
   The line under the tab bar, the bottom of the notch and the bottom of the close button share one slope (--k),
   so they form one continuous inked line. 100cqw is the frame's width (it is a size container). */
.pkgFrame {
	--n: 7.2rem;         /* notch width */
	--d: 6.9rem;         /* notch depth at its bottom left corner, where the bar's bottom line meets it */
	--s: 1.2rem;         /* slant of the notch's left edge */
	--k: .045;           /* slope of the bar line, notch bottom and button bottom (rise per px, ~2.6deg) */
	--b: 4px;            /* ink border */
	--g: .8rem;          /* gutter between panel and close button */
	--shade: 12px;       /* offset print shadow */

	--outline: polygon(
		0 1.4%,
		calc(100% - var(--n) - var(--s)) 0,
		calc(100% - var(--n)) var(--d),
		100% calc(var(--d) - var(--k) * var(--n)),
		99.3% 100%,
		.5% 98.6%
	);
	/* The print shadow is shifted down-right, so its notch is widened by that shift:
	   that way none of it shows in the gutter around the close button */
	--shade-outline: polygon(
		0 1.4%,
		calc(100% - var(--n) - var(--s) - var(--shade)) 0,
		calc(100% - var(--n) - var(--shade)) var(--d),
		100% calc(var(--d) - var(--k) * var(--n)),
		99.3% 100%,
		.5% 98.6%
	);
	--inline: polygon(
		var(--b) calc(1.4% + var(--b)),
		calc(100% - var(--n) - var(--s) - var(--b)) var(--b),
		calc(100% - var(--n) - var(--b) * .6) calc(var(--d) + var(--b)),
		calc(100% - var(--b)) calc(var(--d) - var(--k) * var(--n) + var(--b)),
		calc(99.3% - var(--b)) calc(100% - var(--b)),
		calc(.5% + var(--b)) calc(98.6% - var(--b))
	);

	position: relative;
	width: 100%;
	max-width: 104rem;
	height: 100%;
	max-height: 80rem;
	container-type: inline-size;
	will-change: transform, opacity;
}

.pkgShade,
.pkgInk,
.pkgPaper {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.pkgShade {
	background-color: var(--darkBlue);
	clip-path: var(--shade-outline);
	transform: translate(var(--shade), var(--shade));
}

.pkgInk {
	background-color: var(--ink);
	clip-path: var(--outline);
}

.pkgPaper {
	display: flex;
	flex-flow: column nowrap;
	/* Ink: the tab bar and the content are each clipped to their own side of the slanted line,
	   and this black shows through the gap between them as the bar's bottom border */
	background-color: var(--ink);
	clip-path: var(--inline);
}

/* @group Bar */

.pkgBar {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	flex-shrink: 0;
	/* tall enough for the low left end of the slanted bottom line */
	height: calc(var(--d) + var(--k) * (100cqw - var(--n)));
	box-sizing: border-box;
	/* top breathing room, and keep the tabs clear of the notch */
	padding: 1.8rem calc(var(--n) + var(--s) + 1rem) 0 2rem;
	background-color: var(--darkBlue);
	background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.6px);
	background-size: 8px 8px;
	/* bottom edge: the slanted line, ending exactly at the notch's bottom left corner */
	clip-path: polygon(0 0, 100% 0, 100% calc(var(--d) - var(--k) * var(--n)), 0 100%);
}

.pkgTabs {
	position: relative;
	display: flex;
	flex: 1;
	gap: .4rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding: .4rem;
}

.pkgTabs::-webkit-scrollbar {
	display: none;
}

.pkgTab {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	padding: .3rem 1.4rem;
	font: 1.8rem/3rem var(--mainFontFive);
	color: white;
	white-space: nowrap;
	transition: color .3s ease-in-out 0s;
}

.pkgTab:hover {
	color: var(--caption);
}

.pkgTab.current,
.pkgTab.current:hover {
	color: var(--ink);
}

/* Caption box that slides behind the current tab (positioned by js) */
.pkgTabMarker {
	position: absolute;
	top: .4rem;
	left: 0;
	width: 0;
	height: 3.6rem;
	background-color: var(--caption);
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	transform: rotate(-1.5deg);
	pointer-events: none;
}

/* Without js the current tab gets its own caption box */
.pkgModal:not(.pkgReady) .pkgTab.current {
	background-color: var(--caption);
	border: 2px solid var(--ink);
}

.pkgLang {
	flex-shrink: 0;
	padding: 0 1rem;
	font: 1.6rem/2.8rem var(--mainFontFive);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 1rem;
}

.pkgLang:hover {
	color: var(--ink);
	background-color: white;
}

/* Close button: the site's one close button. Same outline trick as the panels: a slanted ink shape with
   a cream face inside it and a print shadow. On its own it has a default size (--cw, --ch...); inside a
   comic frame it is sized to sit exactly in the notch, with a gutter all round. */
.pkgClose {
	--cw: 6.4rem;          /* width */
	--ch: 5.4rem;          /* height */
	--cs: 1rem;            /* slant of the left edge */
	--crise: .3rem;        /* rise of the bottom edge */
	--cb: 3px;             /* ink border */
	--btn-outline: polygon(0 0, 100% 0, 100% calc(100% - var(--crise)), var(--cs) 100%);
	--btn-inline: polygon(
		calc(var(--cb) * .9) var(--cb),
		calc(100% - var(--cb)) var(--cb),
		calc(100% - var(--cb)) calc(100% - var(--crise) - var(--cb)),
		calc(var(--cs) + var(--cb) * .6) calc(100% - var(--cb))
	);
	position: relative;
	display: block;
	width: var(--cw);
	height: var(--ch);
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	transition: transform .2s cubic-bezier(.34, 1.56, .64, 1) 0s;
}

/* In the notch of a comic frame */
.pkgFrame > .pkgClose {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	--cw: calc(var(--n) + var(--s) - var(--g));
	--ch: calc(var(--d) - var(--g));
	--cs: var(--s);
	--crise: calc(var(--k) * (var(--n) - var(--g)));
	--cb: var(--b);
}

.pkgClose > span {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.pkgCloseShade {
	background-color: var(--darkBlue);
	clip-path: var(--btn-outline);
	transform: translate(5px, 5px);
	transition: transform .2s cubic-bezier(.34, 1.56, .64, 1) 0s;
}

.pkgCloseInk {
	background-color: var(--ink);
	clip-path: var(--btn-outline);
}

.pkgCloseFace {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: calc(var(--cs) * .5);
	background-color: var(--caption);
	clip-path: var(--btn-inline);
	transition: background-color .2s ease-in-out 0s;
}

.pkgCloseFace span {
	display: block;
	font: 3.6rem/1 var(--titles);
	color: var(--ink);
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1) 0s, color .2s ease-in-out 0s;
}

/* Lift off the page on hover: the shadow grows while the button moves up-left */
.pkgClose:hover,
.pkgClose:focus-visible {
	transform: translate(-2px, -2px);
	outline: none;
}

.pkgClose:hover .pkgCloseShade,
.pkgClose:focus-visible .pkgCloseShade {
	transform: translate(8px, 8px);
}

.pkgClose:hover .pkgCloseFace,
.pkgClose:focus-visible .pkgCloseFace {
	background-color: white;
}

.pkgClose:hover .pkgCloseFace span,
.pkgClose:focus-visible .pkgCloseFace span {
	color: var(--workRed);
	transform: rotate(90deg) scale(1.1);
}

.pkgClose:active {
	transform: translate(2px, 2px);
}

.pkgClose:active .pkgCloseShade {
	transform: translate(2px, 2px);
}



/* @end bar */

/* @group Content */

.pkgScroll {
	position: relative;
	flex: 1;
	margin-top: calc(var(--b) - var(--k) * 100cqw);
	background: url(../images/backgrounds/paper.jpg) center top repeat white;
	clip-path: polygon(0 calc(var(--k) * 100cqw), 100% 0, 100% 100%, 0 100%);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-color: var(--darkBlue) transparent;
}

.pkgBody {
	max-width: 80rem;
	margin: 0 auto;
	padding: calc(2rem + var(--k) * 100cqw) 3rem 4rem;
}

.pkgHero {
	position: relative;
	padding: 2rem 18rem 0 0;
	min-height: 14rem;
}

.pkgCaption {
	display: table;
	margin: 0 0 1.5rem;
	padding: .2rem 1.2rem;
	font: 2.2rem/3rem var(--subTitle);
	color: var(--ink);
	background-color: var(--caption);
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	transform: rotate(-1.5deg);
}

.pkgHero h1 {
	margin: 0 0 2rem;
	text-align: left;
}

.pkgHeading {
	display: block;
	font: normal 4.6rem/5.2rem var(--titles);
	color: var(--darkBlue);
}

.pkgCharacter {
	position: absolute;
	right: 0;
	bottom: -2.6rem;
	width: 17rem;
	height: auto;
	z-index: 2;
	filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.12));
}

.packageCard.pkgCard {
	margin: 0;
	padding: 1rem 0 2rem;
	background-color: white;
	border: 3px solid var(--ink);
	box-shadow: 6px 6px 0 var(--darkBlue);
}

.pkgNote {
	font-size: 1.6rem;
	color: #666;
}

/* Call to action as a speech bubble */
.pkgCta {
	position: relative;
	margin: 4.5rem 0 0;
	padding: 1.5rem 3rem 2.5rem;
	text-align: center;
	background-color: white;
	border: 3px solid var(--ink);
	border-radius: 3rem;
}

.pkgCta::before,
.pkgCta::after {
	content: "";
	position: absolute;
	left: 12%;
	border-style: solid;
}

.pkgCta::before {
	top: -2.6rem;
	border-width: 0 0 2.6rem 2.6rem;
	border-color: transparent transparent var(--ink) transparent;
}

.pkgCta::after {
	top: -1.9rem;
	left: calc(12% + .45rem);
	border-width: 0 0 2rem 2rem;
	border-color: transparent transparent white transparent;
}

.pkgCta h2 {
	margin: 1rem auto;
	font-size: 3.2rem;
	line-height: 4rem;
}

.pkgCta p {
	margin: 1rem auto;
	max-width: 58rem;
}

.pkgButtons {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 1.5rem;
	padding-top: 1rem;
}

.pkgButton {
	display: inline-block;
	padding: .8rem 2.2rem;
	font: 2rem/3rem var(--mainFontFive);
	color: white;
	background-color: var(--darkBlue);
	border: 2px solid var(--ink);
	border-radius: 1rem;
	box-shadow: 3px 3px 0 var(--ink);
	transition: transform .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s;
}

.pkgButton.alt {
	color: var(--ink);
	background-color: var(--caption);
}

.pkgButton:hover {
	color: white;
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--ink);
}

.pkgButton.alt:hover {
	color: var(--ink);
}

.pkgExplore {
	margin-top: 3rem;
	text-align: center;
}

.pkgExplore a {
	font: 2rem/3rem var(--mainFontFive);
}

/* @end content */

/* @group Page Frame Behind A Package */

/* Empty frames under the modal, filled in when it closes */
.panelPlaceholder {
	overflow: hidden;
}

.pkgShell .hscroll-wrap {
	opacity: 0;
	transition: opacity .6s ease-out 0s;
}

.pkgShell.pkgPositioned .hscroll-wrap {
	opacity: 1;
}

/* @end page frame */

/* @group First Paint */

/* A package URL opens without waiting for javascript */
@keyframes pkgBackdropIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes pkgFrameIn {
	from { opacity: 0; transform: translateY(4rem) scale(.9) rotate(-2deg); }
	to { opacity: 1; transform: none; }
}

.pkgShell .pkgModal .pkgBackdrop {
	animation: pkgBackdropIn .5s ease-out both;
}

.pkgShell .pkgModal .pkgFrame {
	animation: pkgFrameIn .7s cubic-bezier(.34, 1.4, .64, 1) .1s both;
}

@media (prefers-reduced-motion: reduce) {
	.pkgShell .pkgModal .pkgBackdrop,
	.pkgShell .pkgModal .pkgFrame {
		animation: none;
	}
}

/* @end first paint */

/* @group Mobile */

@media (max-width: 798px) {

	.pkgModal {
		padding: .8rem .8rem 1.2rem;
	}

	.pkgFrame {
		--n: 5.2rem;
		--d: 5.9rem;
		--s: .8rem;
		--k: .04;
		--b: 3px;
		--g: .6rem;
		--shade: 6px;
		max-height: none;
	}

	.pkgBar {
		padding: 1.2rem calc(var(--n) + var(--s) + .4rem) 0 1rem;
		gap: .8rem;
	}

	.pkgCloseFace span {
		font-size: 2.8rem;
	}

	.pkgTab {
		font-size: 1.6rem;
		padding: .3rem 1rem;
	}

	.pkgBody {
		padding: 1.5rem 1.5rem 3rem;
	}

	.pkgHero {
		padding-right: 10rem;
		min-height: 11rem;
	}

	.pkgHeading {
		font-size: 3.2rem;
		line-height: 3.8rem;
	}

	.pkgCharacter {
		width: 10rem;
		bottom: -1.8rem;
	}

	.pkgCta {
		padding: 1rem 1.5rem 2rem;
		border-radius: 2rem;
	}

	.pkgButton {
		width: 100%;
		box-sizing: border-box;
	}

}

/* @end mobile */

/* @end package modal */

.pkgLoading,
.pkgLoading * {
	cursor: progress!important;
}


/* @group Enquiry Form */
/* Contact panel: the plant illustration fixed on the right, the form scrolling over the full panel width
   (scrollbar on the panel's right edge) and padded clear of the illustration. A scroll cover sits on top,
   like every other text panel, so the main page scrolls past it until someone clicks in. */

#contact > div {
	display: block;
}

#contact .contactDec {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 34%;
	height: auto;
}

.panel .scrollable.frame.contactFrame {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: none;
	border: none;
}

.contactFrame .contactScroll {
	width: 100%;
	height: 100%;
	margin: 0;
	box-sizing: border-box;
	padding-right: 34%;
	overscroll-behavior: contain;
}

#contact .contactDetails {
	width: auto;
	margin: 0;
	padding: 2.4rem 2.4rem 2.4rem 2.6rem;
}

.contactTitle {
	margin: 0 0 .6rem;
	font-size: 3.2rem;
	line-height: 3.8rem;
	text-align: left;
}

.contactIntro {
	margin: 0 0 1.6rem;
	font-size: 1.7rem;
	line-height: 2.4rem;
}

.formHoney {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formStack {
	display: flex;
	flex-flow: column nowrap;
	gap: 1rem;
}

.formPair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.4rem;
	margin: 1.6rem 0 1rem;
}

.formField {
	display: flex;
	flex-flow: column nowrap;
	min-width: 0;
}

.formField > span,
.formChoice legend {
	font: 1.5rem/2.2rem var(--mainFontFive);
	color: var(--darkBlue);
}

/* @group Choice Tiles */

.formChoice {
	margin: 2rem 0 0;
	padding: 0;
	border: none;
	min-width: 0;
}

.formChoice legend {
	padding: 0;
	margin-bottom: .6rem;
}

.choiceGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
	gap: .8rem;
}

.choiceGrid.three {
	grid-template-columns: repeat(3, 1fr);
}

.choiceTile {
	position: relative;
	display: block;
	cursor: pointer;
}

/* The radio itself stays for keyboards and screen readers, the span is the visible tile */
.choiceTile input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.choiceTile > span {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	gap: .2rem;
	height: 100%;
	box-sizing: border-box;
	padding: 1rem .6rem;
	text-align: center;
	font: 1.6rem/2rem var(--mainFontFive);
	color: var(--darkBlue);
	background-color: white;
	border: 2px solid #111;
	border-radius: .4rem;
	box-shadow: 3px 3px 0 var(--darkBlue);
	transition: background-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s, transform .15s ease-in-out 0s;
}

.choiceTile > span i {
	font-size: 2rem;
	margin-bottom: .2rem;
}

.choiceTile small {
	font: 1.3rem/1.6rem var(--mainFont);
	color: #666;
}

.choiceTile:hover > span {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--darkBlue);
}

.choiceTile input:focus-visible + span {
	outline: 2px dashed var(--darkBlue);
	outline-offset: 3px;
}

/* Picked: the cream caption box of the modal, tilted like a stuck-on label */
.choiceTile input:checked + span {
	color: #111;
	background-color: #fff4cf;
	box-shadow: 4px 4px 0 #111;
	transform: rotate(-1.5deg);
}

.choiceTile input:checked + span i {
	color: var(--workRed);
}

/* @end choice tiles */

.formField input,
.formField select,
.formField textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .7rem 1rem;
	font: 1.7rem/2.4rem var(--mainFont);
	color: var(--workText);
	background-color: white;
	border: 2px solid #111;
	border-radius: .4rem;
	box-shadow: 3px 3px 0 var(--darkBlue);
	transition: box-shadow .15s ease-in-out 0s, transform .15s ease-in-out 0s;
	-webkit-appearance: none;
	appearance: none;
}

.formField select {
	background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23085372' stroke-width='2'/%3E%3C/svg%3E") right 1rem center no-repeat;
	padding-right: 3rem;
}

.formField textarea {
	resize: vertical;
	min-height: 9rem;
}

.formField input:focus,
.formField select:focus,
.formField textarea:focus {
	outline: none;
	background-color: #fff4cf;
	box-shadow: 5px 5px 0 var(--darkBlue);
	transform: translate(-1px, -1px);
}

.formField.hasError input,
.formField.hasError select,
.formField.hasError textarea {
	border-color: var(--workRed);
	box-shadow: 3px 3px 0 var(--workRed);
}

.formError {
	min-height: 0;
	font: normal 1.4rem/2rem var(--mainFontFive);
	color: var(--workRed);
}

.formPrivacy {
	margin: 1.2rem 0 0;
	font-size: 1.4rem;
	line-height: 2rem;
	color: #666;
}

.formActions {
	margin: 1.2rem 0 0;
}

.formSubmit {
	cursor: pointer;
}

.formSubmit[disabled] {
	cursor: progress;
	opacity: .7;
}

.formStatus {
	margin: 1rem 0 0;
	font: 1.6rem/2.4rem var(--mainFontFive);
	color: var(--darkBlue);
}

.formStatus:empty {
	display: none;
}

.formStatus.isError {
	color: var(--workRed);
}

blockquote.speechBubble.formSuccess {
	margin: 2rem 0 3rem;
	padding: 2rem 2.4rem;
	font-size: 2rem;
	line-height: 2.8rem;
	border: 3px solid #111;
	box-shadow: 5px 5px 0 var(--darkBlue);
}

.formSuccess strong {
	display: block;
	font: normal 4rem/4.4rem var(--titles);
	color: var(--workRed);
	transform-origin: 50% 60%;
}

#contact .bottomDetails {
	margin: 2rem 0 0;
	padding-top: 1.4rem;
	border-top: 2px dashed rgba(8, 83, 114, 0.35);
}

.contactOr {
	display: block;
	margin-bottom: .6rem;
	font-size: 1.5rem;
	color: #666;
}

#contact .bottomDetails .contactSub {
	display: inline-block;
	margin: 0 2rem .4rem 0;
}

#contact .bottomDetails .contactSub i {
	color: var(--darkBlue);
	margin-right: .4rem;
}

@media (max-width: 798px) {

	#contact .contactDec {
		display: none;
	}

	.contactFrame .contactScroll {
		padding-right: 0;
	}

	#contact .contactDetails {
		padding: 1.5rem;
	}

	.formPair,
	.choiceGrid.three {
		grid-template-columns: 1fr;
	}

}

/* @end enquiry form */

.formSuccess p {
	margin: .6rem 0 0;
	font: 2rem/2.8rem var(--quote);
	color: var(--darkBlue);
}

/* "Something else" runs along the bottom of the tile grid as one strip */
.choiceTile.wide {
	grid-column: 1 / -1;
}

.choiceTile.wide > span {
	flex-flow: row nowrap;
	gap: .8rem;
	padding: .7rem;
}

.choiceTile.wide > span i {
	font-size: 1.6rem;
	margin: 0;
}

/* Native date picker: same box as the other fields, calendar icon in the site blue */
.formField input[type="date"] {
	min-height: 4.2rem;
}

.formField input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .8;
}


/* @group Accessibility */

/* Hidden on screen, still read out by screen readers */
.visuallyHidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* First thing keyboard users reach: jump straight to the content */
.skipLink {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 100;
	padding: .8rem 1.6rem;
	font: 1.8rem/2.6rem var(--mainFontFive);
	color: #111;
	background-color: #fff4cf;
	border: 3px solid #111;
	box-shadow: 4px 4px 0 var(--darkBlue);
	transform: translateY(-200%);
}

.skipLink:focus {
	transform: none;
}

/* @group Preferences (classes on <html>, set by the tools below) */

/* Less motion: no CSS transitions or animations (GSAP is sped up in js/a11yTools.js) */
html.a11yMotion *,
html.a11yMotion *::before,
html.a11yMotion *::after {
	animation-duration: .001ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}

/* Larger text: everything is sized in rem, so the whole comic grows with it */
html.a11yText1 {
	--textScale: 1.15;
}

html.a11yText2 {
	--textScale: 1.3;
}

/* More contrast: black text, solid backgrounds, no see-through blur */
html.a11yContrast {
	--workText: #000;
	--lightBlue: #085372;
}

html.a11yContrast .panel p:not(.packageTag),
html.a11yContrast .panel li,
html.a11yContrast .pkgModal p:not(.packageTag),
html.a11yContrast .pkgModal li,
html.a11yContrast .formField > span,
html.a11yContrast .choiceTile small,
html.a11yContrast .sub {
	color: #000 !important;
}

html.a11yContrast .frame,
html.a11yContrast .packageCard {
	background-color: #fff !important;
}

html.a11yContrast .pkgBackdrop {
	background-color: rgba(0, 0, 0, 0.8);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

html.a11yContrast .scrollCover span {
	border-width: 2px;
	font-weight: bold;
}

/* Underlined links, so they don't rely on colour alone */
html.a11yLinks .panel a:not(.pkgButton):not(.framey):not(.scrollLink),
html.a11yLinks .pkgBody a:not(.pkgButton),
html.a11yLinks footer .credit a {
	text-decoration: underline;
	text-underline-offset: .2em;
	text-decoration-thickness: .1em;
}

/* Easier to read: the handwritten and display fonts swap for the plain site font */
html.a11yFont {
	--titles: 'Dosis Five', sans-serif;
	--subTitle: 'Dosis Five', sans-serif;
	--quote: 'Dosis Four', sans-serif;
	--linkFont: 'Dosis Four', sans-serif;
	--boldLinkFont: 'Dosis Five', sans-serif;
}

/* More breathing room between lines, letters and words */
html.a11ySpacing .panel p,
html.a11ySpacing .panel li,
html.a11ySpacing .pkgModal p,
html.a11ySpacing .pkgModal li {
	line-height: 1.8 !important;
	letter-spacing: .03em;
	word-spacing: .1em;
}

/* @end preferences */

/* @group Tools Pop-out (footer) */

.a11yTools {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	margin-right: 1rem;
}

.a11yToggle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	font-size: 1.6rem;
	color: #111;
	background-color: #fff4cf;
	border: none;
	border-radius: 100%;
	cursor: pointer;
	transition: transform .2s ease-in-out 0s;
}

.a11yToggle:hover,
.a11yToggle[aria-expanded="true"] {
	transform: scale(1.15);
	background-color: #f2b600;
}

/* A speech bubble rising from the button */
.a11yPanel {
	position: absolute;
	right: -7rem;
	bottom: calc(100% + 1.4rem);
	z-index: 20;
	width: 30rem;
	padding: 1.4rem 1.6rem 1.6rem;
	background: url(../images/backgrounds/paper.jpg) white;
	border: 3px solid #111;
	border-radius: 1.2rem;
	box-shadow: 6px 6px 0 var(--darkBlue);
	transform-origin: calc(100% - 8.2rem) 100%;
}

.a11yPanel[hidden] {
	display: none;
}

.a11yPanel::before,
.a11yPanel::after {
	content: "";
	position: absolute;
	right: 7.4rem;
	border-style: solid;
}

.a11yPanel::before {
	bottom: -1.6rem;
	border-width: 1.6rem 1.6rem 0 0;
	border-color: #111 transparent transparent transparent;
}

.a11yPanel::after {
	bottom: -1.05rem;
	right: 7.85rem;
	border-width: 1.1rem 1.1rem 0 0;
	border-color: white transparent transparent transparent;
}

.a11yTitle {
	margin: 0 0 1rem;
	font: normal 2.2rem/2.8rem var(--titles);
	color: var(--darkBlue);
}

.a11yOptions {
	margin: 0;
	padding: 0;
	list-style: none;
}

.a11yOptions li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* On / off switches */
.a11ySwitchButton {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: .6rem 0;
	font: 1.6rem/2.2rem var(--mainFontFive);
	color: #111;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 1px dashed rgba(8, 83, 114, 0.3);
	cursor: pointer;
}

.a11ySwitch {
	position: relative;
	flex-shrink: 0;
	width: 4.2rem;
	height: 2.4rem;
	background-color: #ddd;
	border: 2px solid #111;
	border-radius: 2rem;
	transition: background-color .2s ease-in-out 0s;
}

.a11ySwitch::after {
	content: "";
	position: absolute;
	top: .2rem;
	left: .2rem;
	width: 1.6rem;
	height: 1.6rem;
	background-color: white;
	border: 2px solid #111;
	border-radius: 100%;
	transition: transform .2s cubic-bezier(.34, 1.56, .64, 1) 0s;
}

.a11ySwitchButton[aria-checked="true"] .a11ySwitch {
	background-color: var(--workGreen);
}

.a11ySwitchButton[aria-checked="true"] .a11ySwitch::after {
	transform: translateX(1.8rem);
}

/* Text size: three letter buttons */
.a11yText {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-top: 1rem;
	font: 1.6rem/2.2rem var(--mainFontFive);
	color: #111;
}

.a11yText > span {
	flex: 1;
}

.a11yText button {
	min-width: 3.6rem;
	height: 3.2rem;
	padding: 0 .6rem;
	font: 1.6rem/1 var(--mainFontFive);
	color: #111;
	background-color: white;
	border: 2px solid #111;
	border-radius: .4rem;
	box-shadow: 2px 2px 0 var(--darkBlue);
	cursor: pointer;
}

.a11yText button[data-a11y-text="1"] {
	font-size: 1.9rem;
}

.a11yText button[data-a11y-text="2"] {
	font-size: 2.2rem;
}

.a11yText button[aria-pressed="true"] {
	background-color: #fff4cf;
	box-shadow: 2px 2px 0 #111;
}

.a11yReset {
	margin-top: 1.4rem;
	padding: 0;
	font: 1.5rem/2rem var(--mainFontFive);
	color: var(--darkBlue);
	text-decoration: underline;
	background: none;
	border: none;
	cursor: pointer;
}

@media (max-width: 798px) {

	.a11yPanel {
		position: fixed;
		right: 1rem;
		left: 1rem;
		bottom: 5rem;
		width: auto;
	}

	.a11yPanel::before,
	.a11yPanel::after {
		display: none;
	}

}

/* @end tools pop-out */

/* @end accessibility */

/* @group Options & Accessibility: button with text, languages inside the pop-out */

.a11yToggle {
	width: auto;
	height: 2.4rem;
	gap: .6rem;
	padding: 0 1.2rem 0 .8rem;
	font: 1.4rem/2.4rem var(--mainFontFive);
	border-radius: 2rem;
	white-space: nowrap;
}

.a11yToggle i {
	font-size: 1.6rem;
}

.a11yToggle:hover,
.a11yToggle[aria-expanded="true"] {
	transform: none;
}

.a11yPanel {
	right: 0;
	transform-origin: calc(100% - 3rem) 100%;
}

.a11yPanel::before {
	right: 2.4rem;
}

.a11yPanel::after {
	right: 2.85rem;
}

/* Language: two halves of one comic button */
.a11yLang {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0 0 1rem;
	padding-bottom: 1.2rem;
	border-bottom: 2px solid #111;
}

.a11yLangLabel {
	flex: 1;
	font: 1.6rem/2.2rem var(--mainFontFive);
	color: #111;
}

.a11yLang a {
	padding: .4rem 1.2rem;
	font: 1.5rem/2.2rem var(--mainFontFive);
	color: var(--darkBlue);
	background-color: white;
	border: 2px solid #111;
	box-shadow: 2px 2px 0 var(--darkBlue);
}

.a11yLang a:first-of-type {
	border-radius: .4rem 0 0 .4rem;
	border-right: none;
}

.a11yLang a:last-of-type {
	border-radius: 0 .4rem .4rem 0;
}

.a11yLang a[aria-current="true"] {
	color: #111;
	background-color: #fff4cf;
}

@media (max-width: 798px) {

	/* Phones: icon plus a shorter footprint */
	.a11yToggle {
		height: 3.6rem;
		font-size: 1.6rem;
	}

}

/* @end options */


/* @group Comic Dialog (js/comicDialog.js): the package modal's slanted shape for other popups */

.comicDialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3rem;
}

.comicDialog[hidden] {
	display: none;
}

.dialogOpen body {
	overflow: hidden;
}

.comicDialogTitle {
	flex: 1;
	min-width: 0;
	margin: .4rem 0 0;
	font: normal 2.6rem/3.2rem var(--titles);
	color: white;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.comicDialogBody {
	padding-top: calc(var(--k) * 100cqw);
}

html.a11yContrast .comicDialog .pkgBackdrop {
	background-color: rgba(0, 0, 0, 0.85);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

@media (max-width: 798px) {

	.comicDialog {
		padding: .8rem .8rem 1.2rem;
	}

	.comicDialogTitle {
		font-size: 2rem;
		line-height: 2.6rem;
	}

}

/* @end comic dialog */


/* @group Comic Book Viewer (js/bookViewer.js) */

.bookDialog .pkgFrame {
	max-width: 132rem;
	max-height: 88rem;
}

.bookSave {
	flex-shrink: 0;
	margin-top: .6rem;
	padding: .2rem 1.2rem;
	font: 1.5rem/2.2rem var(--mainFontFive);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 1rem;
}

.bookSave:hover {
	color: #111;
	background-color: white;
}

/* Shelf on the left, book on the right */
.bookDialog .comicDialogBody {
	display: grid;
	grid-template-columns: 25rem minmax(0, 1fr);
	overflow: hidden;
}

.bookShelf {
	display: flex;
	flex-flow: column nowrap;
	min-height: 0;
	padding: 1.4rem 1.2rem 1.4rem 1.6rem;
	background-color: rgba(255, 255, 255, 0.55);
	border-right: 3px solid #111;
}

.bookShelfTitle {
	margin: 0 0 1rem;
	font: 2.2rem/2.8rem var(--subTitle);
	color: var(--darkBlue);
}

.bookSearch {
	width: 100%;
	margin-bottom: 1rem;
	padding: .6rem 1rem;
	font: 1.5rem/2.2rem var(--mainFont);
	background-color: white;
	border: 2px solid #111;
	border-radius: .4rem;
	box-shadow: 2px 2px 0 var(--darkBlue);
}

.bookShelfList {
	flex: 1;
	display: flex;
	flex-flow: column nowrap;
	gap: .9rem;
	min-height: 0;
	margin: 0;
	padding: .2rem .6rem .6rem .2rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: var(--darkBlue) transparent;
}

.bookShelfList li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bookShelfItem {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: .6rem;
	text-align: left;
	background-color: white;
	border: 2px solid #111;
	border-radius: .4rem;
	box-shadow: 3px 3px 0 var(--darkBlue);
	cursor: pointer;
	transition: transform .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s, background-color .15s ease-in-out 0s;
}

.bookShelfItem img {
	flex-shrink: 0;
	width: 5.6rem;
	height: 5.6rem;
	object-fit: cover;
	border: 1px solid #111;
}

.bookShelfItem span {
	min-width: 0;
}

.bookShelfItem strong {
	display: block;
	font: 1.6rem/2rem var(--mainFontFive);
	color: var(--darkBlue);
}

.bookShelfItem small {
	display: block;
	font: 1.3rem/1.7rem var(--mainFont);
	color: #555;
}

.bookShelfItem:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--darkBlue);
}

/* The book being read: the cream caption box, like the current tab in the package modal */
.bookShelfItem.current {
	background-color: #fff4cf;
	box-shadow: 3px 3px 0 #111;
	transform: rotate(-1.2deg);
}

.bookShelfEmpty {
	margin: 1rem 0;
	font-size: 1.5rem;
	color: #555;
}

.bookMain {
	display: flex;
	flex-flow: column nowrap;
	min-width: 0;
	min-height: 0;
}

.bookStage {
	position: relative;
	flex: 1;
	min-height: 0;
}

.bookCanvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: grab;
	touch-action: none;
}

.bookCanvas:active {
	cursor: grabbing;
}

.bookCanvas:focus-visible {
	outline-offset: -6px;
}

.bookHint,
.bookLoading {
	position: absolute;
	left: 50%;
	z-index: 1;
	margin: 0;
	transform: translateX(-50%);
	pointer-events: none;
	white-space: nowrap;
}

.bookHint {
	top: 1.4rem;
	padding: .2rem 1.2rem;
	font: 2rem/2.8rem var(--subTitle);
	color: #111;
	background-color: #fff4cf;
	border: 2px solid #111;
	box-shadow: 3px 3px 0 #111;
	transform: translateX(-50%) rotate(-1.5deg);
}

.bookLoading {
	bottom: 1.4rem;
	font: 1.8rem/2.4rem var(--mainFontFive);
	color: var(--darkBlue);
}

.bookLoading:empty {
	display: none;
}

.bookControls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	flex-shrink: 0;
	padding: .6rem 1rem 1.8rem;
}

.bookTurn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5rem;
	height: 4.4rem;
	padding: 0;
	font-size: 2rem;
	color: #111;
	background-color: #fff4cf;
	border: 3px solid #111;
	border-radius: .4rem;
	box-shadow: 3px 3px 0 #111;
	cursor: pointer;
	transition: transform .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s, background-color .15s ease-in-out 0s;
}

.bookTurn:hover:not([disabled]) {
	background-color: white;
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 #111;
}

.bookTurn[disabled] {
	opacity: .35;
	cursor: default;
	box-shadow: none;
}

.bookCount {
	min-width: 20rem;
	margin: 0;
	font: 1.8rem/2.4rem var(--mainFontFive);
	color: var(--darkBlue);
	text-align: center;
}

@media (max-width: 798px) {

	/* Phones: the book on top, the shelf as a sideways strip underneath.
	   minmax(0, 1fr): the strip scrolls sideways instead of stretching the column past the screen */
	.bookDialog .comicDialogBody {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
	}

	.bookShelf {
		min-width: 0;
		order: 2;
		padding: .8rem 1rem 1rem;
		border-right: none;
		border-top: 3px solid #111;
	}

	.bookShelfTitle {
		display: none;
	}

	.bookShelfList {
		flex-flow: row nowrap;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.bookShelfList li {
		flex: 0 0 20rem;
	}

	.bookShelfItem img {
		width: 4.4rem;
		height: 4.4rem;
	}

	.bookShelfItem small {
		display: none;
	}

	.bookSave {
		font-size: 0;
		padding: .2rem .8rem;
	}

	.bookSave i {
		font-size: 1.6rem;
	}

	.bookHint {
		font-size: 1.6rem;
	}

	.bookCount {
		min-width: 0;
		font-size: 1.6rem;
	}

}

/* @end comic book viewer */


/* @group Privacy Notice (js/privacyPopup.js) */

.privacyDialog .pkgFrame {
	max-width: 86rem;
}

.privacyText {
	max-width: 70rem;
	margin: 0 auto;
	padding: 1.6rem 3rem 4rem;
}

.privacyText:focus-visible {
	outline-offset: -4px;
}

.privacyText h1 {
	margin: 0 0 1rem;
	font: normal 3.6rem/4.2rem var(--titles);
	color: var(--darkBlue);
	text-align: left;
}

.privacyText h2 {
	margin: 3rem 0 1rem;
	font: normal 2.4rem/3rem var(--titles);
	color: var(--darkBlue);
	text-align: left;
}

.privacyText h3 {
	margin: 2.4rem 0 .6rem;
	font: 2rem/2.6rem var(--mainFontFive);
	color: var(--darkBlue);
}

.privacyText h4 {
	margin: 2rem 0 .4rem;
	font: 1.8rem/2.4rem var(--mainFontFive);
	color: #111;
}

.privacyText p,
.privacyText li {
	margin: 1rem 0;
	font-size: 1.7rem;
	line-height: 2.7rem;
}

.privacyText ul {
	padding-left: 2.4rem;
}

.privacyText a {
	text-decoration: underline;
}

@media (max-width: 798px) {

	.privacyText {
		padding: 1rem 1.5rem 3rem;
	}

}

/* Footer: shield icon next to the cookie icon */
.privacyToggle {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 .8rem;
	font-size: 1.8rem;
	color: white;
	background: none;
	border: none;
	cursor: pointer;
	transition: color .2s ease-in-out 0s, transform .2s ease-in-out 0s;
}

.privacyToggle:hover {
	color: #fff4cf;
	transform: scale(1.15);
}

@media (max-width: 798px) {

	.privacyToggle {
		margin: 1rem .6rem;
		padding: 1rem;
		font-size: 3rem;
		background-color: var(--darkBlue);
		border: 2px solid white;
		border-radius: 50px;
	}

}

/* @end privacy notice */


/* Options button: a thin divider on either side */
.a11yTools {
	padding: 0 1.2rem;
	border-left: 1px solid rgba(255, 255, 255, 0.45);
	border-right: 1px solid rgba(255, 255, 255, 0.45);
}


/* @group Example Gallery (Overzicht and Werk panels) */

.galleryPrompt {
	display: table;
	margin: 1rem 4rem 0;
	padding: .2rem 1.2rem;
	font: 2rem/2.8rem var(--subTitle);
	color: var(--ink);
	background-color: var(--caption);
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	transform: rotate(-1.2deg);
}

.galleryPrompt i {
	margin-right: .4rem;
	color: var(--darkBlue);
}

/* Each example: a small inked comic panel */
.cv .work {
	border: 2px solid var(--ink);
	box-shadow: 4px 4px 0 var(--darkBlue);
	transition: transform .2s cubic-bezier(.34, 1.56, .64, 1) 0s, box-shadow .2s ease-in-out 0s;
}

.cv .work a img {
	border: none;
	transition: filter .3s ease-in-out 0s, transform .4s ease-out 0s;
}

/* The old magnifier corner and hover bar are gone */
.galleryWrap .cv .work::after {
	content: none;
}

/* Hover / keyboard focus: the panel lifts, tilts and shows its caption */
.cv .work:hover,
.cv .work:focus-within {
	transform: translate(-3px, -3px) rotate(-1.2deg);
	box-shadow: 8px 8px 0 var(--darkBlue);
}

.cv .work:hover img,
.cv .work:focus-within img {
	filter: grayscale(0%);
	transform: scale(1.05);
}

/* Click: pressed into the page */
.cv .work:active {
	transform: translate(2px, 2px) rotate(0deg);
	box-shadow: 1px 1px 0 var(--darkBlue);
	transition-duration: .05s;
}

.workCaption {
	position: absolute;
	left: .8rem;
	bottom: .8rem;
	z-index: 1;
	padding: .2rem 1rem;
	font: 1.5rem/2.2rem var(--mainFontFive);
	color: var(--ink);
	background-color: var(--caption);
	border: 2px solid var(--ink);
	box-shadow: 2px 2px 0 var(--ink);
	opacity: 0;
	transform: translateY(.8rem) rotate(-2deg);
	transition: opacity .2s ease-out 0s, transform .25s cubic-bezier(.34, 1.56, .64, 1) 0s;
}

.cv .work:hover .workCaption,
.cv .work:focus-within .workCaption,
.touchevents .cv .work .workCaption {
	opacity: 1;
	transform: translateY(0) rotate(-2deg);
}

/* Examples already opened get a little tick */
.workSeen {
	position: absolute;
	top: .6rem;
	right: .6rem;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.6rem;
	height: 2.6rem;
	font-size: 1.3rem;
	color: white;
	background-color: var(--workGreen);
	border: 2px solid var(--ink);
	border-radius: 100%;
	pointer-events: none;
}

/* @end example gallery */


/* @group Home Captions (home panel): what we offer, and the way in */
/* On desktop the home panel is a column of comic panels: the title panel on top, a strip of two button panels
   below it, 1rem apart like the gutter between panels. Flex keeps them filling the panel whatever its size.
   The offer is a narration caption breaking out of the title panel's top left corner. */

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

	/* The panel itself only holds the stack; its children draw the frames */
	#home.panel {
		flex-flow: column nowrap;
		gap: 1rem;
		border-style: none;
		box-shadow: none;
	}

	#home > .homeMain,
	#home > .panelPlaceholder {
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		flex: 1 1 auto;
		border: 2px solid var(--ink);
		box-shadow: 0 0 25px rgba(45, 42, 54, 0.66);
	}

	#home > .homeActions {
		position: static;
		flex: 0 0 auto;
		overflow: visible;
		background: none;
		transform: none;
	}

	.homeOffer {
		position: absolute;
		z-index: 3;
		top: -3rem;
		left: -3rem;
		width: 46rem;
		max-width: 60%;
	}

}

.homeOffer {
	margin: 0;
	padding: 1rem 1.6rem 1.2rem;
	background-color: var(--caption);
	border: 2px solid var(--ink);
	box-shadow: 0 0 15px rgba(45, 42, 54, 0.66);
	font: 700 2rem/2.6rem var(--quoteBold);
	color: var(--ink);
	text-align: left;
}

.homeOffer strong {
	font: inherit;
	color: var(--darkBlue);
}

/* The two ways in share the width, each drawn as a small comic panel */
.homeActions {
	display: flex;
	flex-flow: row nowrap;
	gap: 1rem;
}

.homeActions a {
	flex: 1 1 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	padding: 1.3rem 2rem;
	font: 2.2rem/2.8rem var(--mainFontFive);
	text-align: center;
	border: 2px solid var(--ink);
	box-shadow: 0 0 25px rgba(45, 42, 54, 0.66);
	transition: background-color .2s ease-in-out 0s, color .2s ease-in-out 0s;
}

.homeQuote {
	color: white;
	background-color: var(--darkBlue);
}

.homePackages {
	color: var(--darkBlue);
	background-color: var(--caption);
}

.homeActions a i {
	transition: transform .2s ease-in-out 0s;
}

.homeQuote:hover,
.homeQuote:focus-visible {
	color: white;
	background-color: var(--ink);
}

.homePackages:hover,
.homePackages:focus-visible {
	color: var(--darkBlue);
	background-color: white;
}

.homeQuote:hover i {
	transform: rotate(-12deg) scale(1.15);
}

.homePackages:hover i {
	transform: translateX(.4rem);
}

@media (max-width: 798px) {

	/* Phones: the caption and buttons follow the logo, edge to edge */
	.homeOffer {
		border-width: 2px 0;
		box-shadow: none;
		padding: 1.2rem 1.5rem;
	}

	.homeActions {
		flex-wrap: wrap;
		padding: 1.4rem 1.5rem;
		border-bottom: 2px solid var(--ink);
	}

	/* Side by side on wider phones, stacked when the labels would have to wrap */
	.homeActions a {
		flex-basis: 24rem;
		box-shadow: none;
	}

}

/* @end home captions */