/* @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: 'Dosis Bold';
    src: url('../fonts/dosis-bold.woff2') format('woff2');
    font-weight: 700;
    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;
}

/* FAQ: a narrow column that widens to fill the panel once clicked (it has no menu on the right to make room for) */
.no-touchevents #faq .panelContent {
	left: 20%;
	right: 20%;
}

.no-touchevents .fullMain#faq .panelContent article {
	width: calc(100% - 2rem);
}

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

.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: 2.1rem/3.2rem 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);
}

/* 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.8rem;
		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 {
		grid-template-columns: 1fr;
	}

	/* The three workshop types stay side by side, a little tighter */
	.choiceGrid.three > .choiceTile > span {
		padding: .9rem .4rem;
		font-size: 1.5rem;
		line-height: 1.8rem;
	}

}

/* @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 */



/* @group Mobile Redesign (phones) */
/* Phones show the whole site as one long page of sections. The home panel and the intro hover over it as a
   rounded cover card until the first scroll; then a sticky header with the logo, a quote button and the
   sections slides in (both built by js/mobileNav.js, phones only).
   Nothing in this group reaches the desktop layout. */

@media (max-width: 798px) {

	/* Only the desktop scroller moves the strip. On phones a will-change here would turn the whole (long) page
	   into one compositing layer, and into the frame that fixed elements are positioned in */
	.hscroll-wrap {
		will-change: auto;
	}


	/* @group Home & Intro (the cover): the offer as open text on the page, two big comic buttons, and the intro's two
	   facts in a light blue box tilted like a pasted-in panel. Only the buttons use the heavy title font. */

	#home {
		padding-bottom: .4rem;
	}

	#home .homeOffer {
		position: relative;
		z-index: 1;
		margin: 0 2.4rem;
		padding: 0;
		font: 500 2rem/2.7rem var(--mainFontFive);
		text-transform: none;
		color: var(--ink);
		background: none;
		border-style: none;
		box-shadow: none;
		transform: none;
		/* a soft paper glow keeps it readable over the splodges */
		text-shadow: 0 0 6px #fdf6dc, 0 0 3px #fdf6dc;
	}

	/* Where: its own line, behind a map pin */
	#home .homeOffer strong {
		display: block;
		margin-top: .6rem;
		font: 1.8rem/2.4rem var(--mainFontFive);
		color: var(--darkBlue);
	}

	#home .homeOffer strong::before {
		content: "\f3c5";
		margin-right: .6rem;
		font: 900 1.6rem/1 "Font Awesome 5 Pro";
	}

	#home .homeActions {
		flex-flow: column nowrap;
		gap: 1.2rem;
		padding: 1.8rem 2rem .4rem;
		border-style: none;
	}

	/* Big rounded comic buttons: icon, words in capitals, an arrow, thick ink and a shadow under them */
	#home .homeActions a {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 1.2rem;
		padding: 1rem 1.8rem;
		font: 2rem/2.4rem var(--titles);
		letter-spacing: .02em;
		text-transform: uppercase;
		border: 3px solid var(--ink);
		border-radius: 3rem;
		box-shadow: 0 5px 0 var(--ink);
		transition: box-shadow .12s ease-in-out 0s, translate .12s ease-in-out 0s;
	}

	#home .homeActions a::after {
		content: "\f061";
		margin-left: auto;
		font: 900 1.8rem/1 "Font Awesome 5 Pro";
	}

	#home .homeActions a i {
		font-size: 2rem;
	}

	#home .homeQuote {
		color: white;
		background-color: #e5194d;
	}

	#home .homePackages {
		color: var(--darkBlue);
		background-color: white;
	}

	/* The packages button carries a box, its own arrow makes way for the shared one */
	#home .homePackages::before {
		content: "\f466";
		font: 900 2rem/1 "Font Awesome 5 Pro";
		color: var(--darkBlue);
	}

	#home .homePackages i {
		display: none;
	}

	#home .homeActions a:active {
		box-shadow: 0 1px 0 var(--ink);
		translate: 0 4px;
	}

	/* Intro: only its two facts stay, with coloured icons in a light blue box */
	.introWrap .mobileText.three,
	.introWrap .bottom {
		display: none;
	}

	.introWrap .topRightText {
		margin: 1.6rem 2rem 2.4rem;
		padding: .4rem 1.6rem;
		background-color: #dff1fb;
		border: 3px solid var(--ink);
		box-shadow: 6px 6px 0 var(--darkBlue);
		transform: rotate(-1.5deg);
	}

	.introWrap .topRightText .mobileText {
		display: flex;
		align-items: center;
		gap: 1.4rem;
		margin: 0;
		padding: 1.1rem 0;
		background: none;
		border-style: none;
		box-shadow: none;
		transform: none;
	}

	.introWrap .topRightText .mobileText + .mobileText {
		border-top: 2px dashed rgba(8, 83, 114, 0.35);
	}

	.introWrap .topRightText .mobileText::before {
		flex: 0 0 3rem;
		font: 900 2.2rem/1 "Font Awesome 5 Pro";
		text-align: center;
	}

	.introWrap .mobileText.one::before {
		content: "\f1de";
		color: #e5194d;
	}

	.introWrap .mobileText.two::before {
		content: "\f0c0";
		color: #f7941d;
	}

	.introWrap .topRightText .mobileText p {
		font: 1.7rem/2.4rem var(--mainFontFive);
		text-transform: none;
		text-align: left;
		color: var(--ink);
	}

	/* @end home & intro */


	/* @group Sections: one after the other on the page, each a paper comic panel under a tilted yellow name tag */

	main > div {
		padding-bottom: 2rem;
	}


	.panel.hasContent {
		width: auto;
		height: auto;
		flex: 1 1 100%;
		margin: 5rem 1.2rem 0;
		overflow: visible;
		border-style: none;
		border-radius: 0;
		/* Room for the sticky bar when the page jumps to a section */
		scroll-margin-top: 14rem;
	}

	.panel.hasContent::before {
		content: attr(data-title);
		position: relative;
		z-index: 2;
		display: table;
		margin: 0 auto -1.6rem;
		padding: .5rem 2.4rem .7rem;
		font: 3rem/3.6rem var(--titles);
		color: var(--ink);
		background-color: #ffd23f;
		border: 3px solid var(--ink);
		box-shadow: 4px 4px 0 var(--darkBlue);
		rotate: -2deg;
	}

	.panel.hasContent:nth-child(even)::before {
		rotate: 1.5deg;
	}

	.panel.hasContent > div {
		position: relative;
		padding-top: 1.6rem;
		background: url(../images/backgrounds/paper.jpg) center top repeat white;
		border: 2px solid var(--ink);
		box-shadow: 5px 5px 0 var(--darkBlue);
	}

	.panel.hasContent .panelContent {
		position: static;
		overflow: visible;
		background: none;
	}

	.panel.hasContent .scrollCover,
	.panel.hasContent .panelBack {
		display: none;
	}

	/* The contact panel is pinned to its frame for desktop: back in the flow on phones */
	#contact.panel.hasContent > div {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
	}

	#contact .contactScroll {
		height: auto;
	}

	/* @end sections */




	/* @group Header & Menu: a slanted bar with the name and a burger, which slides out the menu (js/mobileNav.js) */

	/* The bar: ink cut to a slant, with the cream face a line smaller inside it */
	.mobileHeader {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 30;
		height: 6.6rem;
		background-color: var(--ink);
		clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
		filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2));
	}

	/* The cover sits over everything on its own: the header waits above the screen (straight away, so it never shows
	   on arrival) and drops in once the cover is gone */
	html.mobileCoverOn .mobileHeader {
		transform: translateY(-115%);
	}

	html:not(.mobileCoverOn) .mobileHeader {
		transition: transform .35s cubic-bezier(.2, .8, .3, 1) .1s;
	}

	.mobileHeaderTop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		height: calc(100% - 3px);
		padding: 0 1.4rem 1rem 1.2rem;
		background-color: #fdf6dc;
		clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
	}

	/* Wordmark: "Happy Monsters" in comic letters, every one its own colour, size and tilt, with "Workshops" on a
	   little tag. The letters grow with the screen, up to a point. */
	.wordmark {
		--wm: clamp(1.9rem, 5.6vw, 2.7rem);
		display: flex;
		align-items: center;
		gap: .6rem;
		white-space: nowrap;
	}

	.wmWord {
		display: inline-flex;
		align-items: baseline;
	}

	.wmL {
		display: inline-block;
		font: var(--wm)/1 var(--titles);
		text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink), 2px 3px 0 var(--ink);
	}

	.wmL0 { color: var(--workRed); font-size: calc(var(--wm) * 1.12); rotate: -7deg; }
	.wmL1 { color: #ffd23f; rotate: 5deg; translate: 0 -.15em; }
	.wmL2 { color: var(--skyBlue); font-size: calc(var(--wm) * .92); rotate: -3deg; }
	.wmL3 { color: var(--workGreen); font-size: calc(var(--wm) * 1.08); rotate: 6deg; translate: 0 .06em; }
	.wmL4 { color: #9a28c7; rotate: -5deg; translate: 0 -.1em; }
	.wmL5 { color: #ff8a1f; font-size: calc(var(--wm) * .96); rotate: 4deg; }

	.wmWorkshops {
		display: inline-block;
		margin-left: .2rem;
		padding: .2rem .7rem .3rem;
		font: 700 calc(var(--wm) * .46)/1.2 var(--mainFontFive);
		letter-spacing: .14em;
		text-transform: uppercase;
		color: white;
		background-color: var(--darkBlue);
		border: 2px solid var(--ink);
		box-shadow: 2px 2px 0 var(--ink);
		rotate: -4deg;
	}

	/* The burger: three inked bars, turning into a cross while the menu is out */
	.mobileBurger {
		position: relative;
		flex: 0 0 auto;
		width: 4.4rem;
		height: 4.4rem;
		padding: 0;
		background: none;
		border-style: none;
		-webkit-tap-highlight-color: transparent;
	}

	.mobileBurger span {
		position: absolute;
		left: .8rem;
		right: .8rem;
		height: .45rem;
		background-color: var(--ink);
		border-radius: .3rem;
		transition: transform .25s ease-in-out 0s, opacity .2s ease-in-out 0s;
	}

	.mobileBurger span:nth-child(1) { top: 1.2rem; }
	.mobileBurger span:nth-child(2) { top: 2rem; }
	.mobileBurger span:nth-child(3) { top: 2.8rem; }

	.drawerOpen .mobileBurger span:nth-child(1) { transform: translateY(.8rem) rotate(45deg); }
	.drawerOpen .mobileBurger span:nth-child(2) { opacity: 0; }
	.drawerOpen .mobileBurger span:nth-child(3) { transform: translateY(-.8rem) rotate(-45deg); }

	/* The menu: a comic panel from the right, the sections in the title font, the open one marked in yellow */
	.drawerShade {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 31;
		background-color: rgba(6, 30, 42, 0.5);
	}

	.drawerShade[hidden],
	.mobileDrawer[hidden] {
		display: none;
	}

	.mobileDrawer {
		position: fixed;
		top: 1rem;
		right: 1rem;
		bottom: 1rem;
		z-index: 32;
		display: flex;
		flex-flow: column nowrap;
		width: min(30rem, calc(100% - 6rem));
		padding: 6rem 2rem 2rem;
		overflow-y: auto;
		background-color: #fdf6dc;
		border: 3px solid var(--ink);
		border-radius: 2.4rem;
		box-shadow: 6px 6px 0 var(--darkBlue);
	}

	/* A few ink splashes behind the links */
	.drawerSplats {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		overflow: hidden;
		border-radius: 2.1rem;
		pointer-events: none;
	}

	.dsplat0 { top: -4%; right: -22%; width: 70%; rotate: 12deg; opacity: .55; }           /* yellow, behind the close button */
	.dsplat1 { top: 40%; right: 8%; width: 30%; rotate: -20deg; opacity: .45; }            /* pink dot, beside the links */
	.dsplat2 { bottom: 6%; right: -24%; width: 66%; rotate: -14deg; opacity: .4; }         /* teal, behind the quote */
	.dsplat3 { bottom: 20%; left: 2%; width: 34%; rotate: 25deg; opacity: .4; }            /* blue dot, low on the left */

	.drawerClose,
	.drawerNav,
	.drawerQuote {
		z-index: 1;
	}

	.drawerNav,
	.drawerQuote {
		position: relative;
	}

	.drawerClose {
		position: absolute;
		top: 1.2rem;
		right: 1.2rem;
		width: 4rem;
		height: 4rem;
		padding: 0;
		font: 2.8rem/1 var(--titles);
		color: var(--ink);
		background-color: #ffd23f;
		border: 2px solid var(--ink);
		border-radius: 50%;
		box-shadow: 2px 2px 0 var(--ink);
	}

	.drawerNav {
		display: flex;
		flex-flow: column nowrap;
		gap: .6rem;
	}

	.drawerNav a {
		padding: .8rem 1.4rem;
		font: 2.4rem/3rem var(--titles);
		color: var(--ink);
		border: 2px solid transparent;
		border-radius: 1.2rem;
	}

	.drawerNav a.current {
		background-color: #ffd23f;
		border-color: var(--ink);
		box-shadow: 3px 3px 0 var(--darkBlue);
		rotate: -2deg;
	}

	.drawerQuote {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: .8rem;
		margin-top: auto;
		padding: 1rem 1.6rem;
		font: 1.9rem/2.4rem var(--titles);
		color: white;
		text-transform: uppercase;
		background-color: #e5194d;
		border: 3px solid var(--ink);
		border-radius: 3rem;
		box-shadow: 0 4px 0 var(--ink);
	}

	.drawerQuote:hover,
	.drawerQuote:focus {
		color: white;
	}

	/* @end header & menu */


	/* @group Cover: the home panel and the intro as one colourful card over everything, on a dark shade,
	   until it is flicked away (js/mobileNav.js) */

	.mobileCoverOn,
	.mobileCoverOn body {
		overflow: hidden;
	}

	.mobileCover {
		position: fixed;
		top: calc(1.8rem + env(safe-area-inset-top, 0px));
		right: 1.8rem;
		bottom: calc(1.8rem + env(safe-area-inset-bottom, 0px));
		left: 1.8rem;
		z-index: 25;
		display: flex;
		flex-flow: column nowrap;
		overflow: hidden;
		background-color: #fdf6dc;
		border: 3px solid var(--ink);
		border-radius: 2.6rem;
		box-shadow: 6px 7px 0 var(--darkBlue), 0 14px 40px rgba(0, 0, 0, 0.35);
		touch-action: none;
		/* Its own layer: dragged and flung, it moves without being painted again (the splashes, the title art) */
		will-change: transform;
	}

	.mobileCover[hidden] {
		display: none;
	}

	.mobileCover > :not(.coverSplats) {
		position: relative;
		z-index: 1;
	}

	/* @group Cover Splodges: ink splashes from images/splats, overlapping, turned and feathered at their edges */

	.coverSplats {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		overflow: hidden;
		pointer-events: none;
	}

	.splat {
		position: absolute;
		display: block;
		height: auto;
		-webkit-mask-image: radial-gradient(closest-side, #000 62%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
		mask-image: radial-gradient(closest-side, #000 62%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
	}

	.splat0 { top: 1%; left: -14%; width: 58%; rotate: -14deg; opacity: .9; }              /* yellow, behind "Hi!" */
	.splat1 { top: -3%; right: -16%; width: 56%; rotate: 9deg; opacity: .85; }             /* pink drip, top right */
	.splat2 { bottom: 57rem; right: -20%; width: 46%; rotate: -25deg; opacity: .55; }       /* blue, behind the bubble's tail */
	.splat3 { top: 22%; left: 34%; width: 20%; rotate: 30deg; opacity: .5; }               /* purple dot */
	.splat4 { bottom: 56rem; left: -7%; width: 24%; rotate: 15deg; opacity: .55; }          /* orange dot, under the "Hi!" */
	.splat5 { bottom: 4%; left: -18%; width: 50%; rotate: 20deg; opacity: .6; }            /* teal, bottom left */
	.splat6 { bottom: 10%; right: -18%; width: 52%; rotate: -8deg; opacity: .55; }         /* green drip, bottom right */
	.splat7 { bottom: -6%; left: 30%; width: 40%; rotate: -15deg; opacity: .45; }          /* navy, under the start sign */

	/* @end cover splodges */

	.mobileCover #home {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-flow: column nowrap;
		padding-bottom: 0;
	}

	/* The title art takes whatever height is left */
	.mobileCover #home .homeMain {
		position: relative;
		flex: 1 1 auto;
		min-height: 8rem;
	}

	.mobileCover #home .homeLay1 {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	/* As big as it goes, its sides allowed to run off the card */
	.mobileCover #home .homeLay1 .logoIcon {
		position: absolute;
		top: -1rem;
		right: -9rem;
		bottom: .2rem;
		left: -9rem;
		width: auto;
		margin: 0;
	}

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

	.mobileCover #home .homeOffer,
	.mobileCover #home .homeActions,
	.mobileCover #intro {
		flex: 0 0 auto;
	}

	.mobileCover #intro {
		border-style: none;
		background: none;
	}

	.mobileCover #intro .mobileHeadBack {
		display: none;
	}

	.mobileCover .introWrap .topRightText {
		margin: 1.6rem 2rem 1.4rem;
	}

	/* "Swipe down to start": a bobbing circle with an arrow, the words underneath */
	.coverStart {
		flex: 0 0 auto;
		align-self: center;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		gap: .5rem;
		margin: 0 2rem 1.4rem;
		padding: 0;
		background: none;
		border-style: none;
		box-shadow: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.coverStart:active .coverStartCircle {
		translate: 1px 2px;
		box-shadow: 1px 1px 0 var(--ink);
	}

	.coverStartCircle {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 4.4rem;
		height: 4.4rem;
		font-size: 2rem;
		color: var(--ink);
		background-color: white;
		border: 3px solid var(--ink);
		border-radius: 50%;
		box-shadow: 2px 3px 0 var(--ink);
		animation: coverNudge 1.1s ease-in-out infinite;
	}

	.coverStartText {
		font: 1.4rem/1.8rem var(--titles);
		letter-spacing: .03em;
		text-transform: uppercase;
		color: var(--ink);
		text-shadow: 0 0 5px #fdf6dc;
	}

	html.a11yMotion .coverStartCircle {
		animation: none;
	}

	/* Short phones: the two facts give their room to the title */
	@media (max-height: 700px) {
		.mobileCover #intro {
			display: none;
		}

		/* The text sits lower, the two splashes above it follow */
		.splat2 {
			bottom: 36rem;
		}

		.splat4 {
			bottom: 35rem;
		}
	}

	/* @end cover */

	/* @group Example Gallery (Werk): every example in the same 4:5 frame, the picture cropped to fill it */

	/* The line above the examples: plain words, its pointing finger kept */
	.galleryPrompt {
		margin: 1.6rem 2rem 0;
		padding: 0;
		background: none;
		border-style: none;
		box-shadow: none;
		transform: none;
	}

	.galleryWrap {
		margin: 2rem 1rem;
	}

	.cv .work {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	/* @end example gallery */

	/* @group Facebook: too big for a phone screen */

	#facebookPage {
		display: none;
	}

	/* @end facebook */


	/* @group Footer: social links, then the three tools, then the credit line */

	footer {
		margin-top: 4rem;
		border-top: 3px solid var(--ink);
	}

	footer .bottom {
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		gap: 1.2rem;
		padding-top: 2.4rem;
	}

	footer .bottom .social {
		order: 0;
		flex: 1 1 100%;
		justify-content: center;
		padding: 0 0 .4rem;
	}

	footer .bottom .social a {
		width: 4.4rem;
		height: 4.4rem;
		margin: 0 .7rem;
		border: 2px solid var(--ink);
		box-shadow: 2px 2px 0 var(--ink);
	}

	footer .a11yTools {
		order: 1;
		height: auto;
		margin: 0;
		padding: 0;
		border-style: none;
	}

	footer .a11yToggle,
	footer .privacyToggle,
	footer #changePreferences {
		height: 4.4rem;
		margin: 0;
		color: var(--ink);
		background-color: var(--caption);
		border: 2px solid var(--ink);
		border-radius: 2.2rem;
		box-shadow: 2px 2px 0 var(--ink);
	}

	footer .a11yToggle {
		padding: 0 1.6rem 0 1.2rem;
		font-size: 1.7rem;
	}

	footer .privacyToggle,
	footer #changePreferences {
		order: 1;
		flex-flow: row nowrap;
		width: 4.4rem;
		padding: 0;
		font-size: 2rem;
	}

	footer .a11yToggle *,
	footer .privacyToggle *,
	footer #changePreferences * {
		color: var(--ink);
	}

	footer .a11yToggle:active,
	footer .privacyToggle:active,
	footer #changePreferences:active {
		translate: 2px 2px;
		box-shadow: none;
	}

	/* Undo the old "everything in the footer is white" for the pop-out, without beating its own colours */
	footer :where(.a11yPanel, .a11yPanel *) {
		color: var(--ink);
	}

	footer .bottom .credit {
		order: 2;
		margin-top: 1.2rem;
		padding: 1.2rem 1.6rem;
		background-color: rgba(0, 0, 0, 0.3);
	}

	footer .bottom .credit p {
		margin: 0;
		font-size: 1.4rem;
		line-height: 2rem;
	}

	footer .bottom .credit br {
		display: none;
	}

	/* @end footer */

}

/* @group Book Viewer Loading (all screens): a proper loading card while the libraries and the PDF come in */

.bookLoading:not(:empty) {
	top: 50%;
	bottom: auto;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: 1.2rem;
	padding: 1.8rem 2.6rem;
	font: 1.8rem/2.4rem var(--mainFontFive);
	color: var(--ink);
	background-color: var(--caption);
	border: 2px solid var(--ink);
	box-shadow: 4px 4px 0 var(--darkBlue);
	transform: translate(-50%, -50%) rotate(-1.5deg);
}

.bookLoading:not(:empty)::before {
	content: "";
	width: 4.4rem;
	height: 4.4rem;
	border: 4px solid rgba(17, 17, 17, 0.15);
	border-top-color: var(--workRed);
	border-radius: 50%;
	animation: bookSpin .8s linear infinite;
}

/* Couldn't load: just the message */
.bookLoading.failed::before {
	content: none;
}

html.a11yMotion .bookLoading::before {
	animation-duration: 3s;
}

/* @end book viewer */

@keyframes coverNudge {
	50% {
		transform: translateY(.4rem);
	}
}

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

/* @end mobile redesign */


/* @group Offer Bubble (desktop): the offer as a speech bubble rising from the bottom left corner, shrinking back
   into it as the home panel scrolls away (js/offerBubble.js, desktop only) */

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

	/* The bubble takes over the home panel's offer caption (the button strip under the panel stays) */
	html.offerBubbleOn #home .homeOffer {
		display: none;
	}

	.offerBubble {
		position: fixed;
		left: 3.2rem;
		bottom: 5.4rem;
		z-index: 15;
		width: 55rem;
		pointer-events: none;
	}

	.offerBubbleFull {
		pointer-events: auto;
	}

	.offerBubbleFull {
		position: relative;
		padding: 1.6rem 2rem 1.8rem;
		background-color: var(--caption);
		border: 3px solid var(--ink);
		border-radius: 2.6rem;
		box-shadow: 6px 6px 0 var(--darkBlue);
		transform-origin: 0% 100%;
	}

	.offerBubbleFull p {
		position: relative;
		z-index: 1;
		margin: 0;
		font: 700 2rem/2.6rem var(--quoteBold);
		color: var(--ink);
	}

	/* The tail runs down and left into the corner of the screen, where the speaker stands out of frame:
	   an ink wedge with a cream one inside it that also covers the bubble's border where they meet */
	.offerTailInk,
	.offerTailFill {
		position: absolute;
		clip-path: polygon(48% 0, 100% 0, 0 100%);
	}

	.offerTailInk {
		left: -1.8rem;
		top: calc(100% - 3px);
		width: 6.4rem;
		height: 2.8rem;
		background-color: var(--ink);
	}

	.offerTailFill {
		left: calc(-1.8rem + 9px);
		top: calc(100% - 6px);
		width: calc(6.4rem - 13px);
		height: calc(2.8rem - 7px);
		background-color: var(--caption);
	}

}

@media (max-width: 798px) {
	.offerBubble {
		display: none;
	}
}

/* @end offer bubble */


/* @group Mobile Deck (phones): the sections as a deck of rounded cards, flicked left and right (js/mobileNav.js).
   Everything hangs off html.mobileDeck, which the script sets: without it phones keep the long page. */

@media (max-width: 798px) {

	html.mobileDeck,
	html.mobileDeck body {
		height: 100%;
		overflow: hidden;
		overscroll-behavior: none;
	}

	/* Each section is a card between the header and the footer, drawn as a puckered comic frame: its top edge rises
	   to the right like the header's, its bottom edge falls to the right like the footer's (--slant, set by the
	   script), corners a little off and edges a little pinched, different for every card (--tlx.. offsets). Three
	   layers share the outline: a print shade, the ink and the white face, clipped a border-width smaller. The content
	   scrolls in .cardScroll, clipped to the face. Only the current card is seen; the ones either side wait invisibly
	   underneath, already drawn, and show while they are flicked in. */
	html.mobileDeck .panel.hasContent {
		--S: var(--slant, 15px);
		--b: 3px;
		--tlx: 0px; --tly: 3px; --tm: 4px; --trx: 5px; --try: 0px; --rm: 3px;
		--brx: 0px; --bry: 5px; --bm: 3px; --blx: 4px; --bly: 0px; --lm: 2px;
		--outline: polygon(
			var(--tlx) calc(var(--S) + var(--tly)),
			50% calc(var(--S) / 2 + var(--tm)),
			calc(100% - var(--trx)) var(--try),
			calc(100% - var(--rm)) 50%,
			calc(100% - var(--brx)) calc(100% - var(--bry)),
			50% calc(100% - var(--S) / 2 - var(--bm)),
			var(--blx) calc(100% - var(--S) - var(--bly)),
			var(--lm) 50%
		);
		--inline: polygon(
			calc(var(--tlx) + var(--b)) calc(var(--S) + var(--tly) + var(--b)),
			50% calc(var(--S) / 2 + var(--tm) + var(--b)),
			calc(100% - var(--trx) - var(--b)) calc(var(--try) + var(--b)),
			calc(100% - var(--rm) - var(--b)) 50%,
			calc(100% - var(--brx) - var(--b)) calc(100% - var(--bry) - var(--b)),
			50% calc(100% - var(--S) / 2 - var(--bm) - var(--b)),
			calc(var(--blx) + var(--b)) calc(100% - var(--S) - var(--bly) - var(--b)),
			calc(var(--lm) + var(--b)) 50%
		);
		position: fixed;
		top: var(--deckTop, 12rem);
		right: 1.2rem;
		bottom: calc(var(--footerH, 7rem) - var(--S) + 10px);
		left: 1.2rem;
		z-index: 1;
		flex: none;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
		touch-action: pan-y;
		background: none;
		border-style: none;
		border-radius: 0;
		box-shadow: none;
		visibility: hidden;
	}

	#voor-wie, #schools { --tlx: 4px; --tly: 0px; --tm: 3px; --trx: 0px; --try: 4px; --rm: 4px; --brx: 5px; --bry: 0px; --bm: 4px; --blx: 0px; --bly: 4px; --lm: 3px; }
	#faq { --tlx: 5px; --tly: 2px; --tm: 3px; --trx: 2px; --try: 0px; --rm: 2px; --brx: 2px; --bry: 4px; --bm: 3px; --blx: 0px; --bly: 2px; --lm: 4px; }
	#feedback { --tlx: 0px; --tly: 0px; --tm: 4px; --trx: 4px; --try: 3px; --rm: 3px; --brx: 0px; --bry: 2px; --bm: 2px; --blx: 5px; --bly: 4px; --lm: 2px; }
	#work { --tlx: 2px; --tly: 4px; --tm: 2px; --trx: 0px; --try: 1px; --rm: 4px; --brx: 4px; --bry: 4px; --bm: 4px; --blx: 1px; --bly: 0px; --lm: 3px; }
	#contact { --tlx: 4px; --tly: 1px; --tm: 3px; --trx: 3px; --try: 4px; --rm: 2px; --brx: 0px; --bry: 0px; --bm: 3px; --blx: 3px; --bly: 3px; --lm: 4px; }

	.cardShade,
	.cardInk,
	.cardFace {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;
	}

	.cardShade {
		background-color: var(--darkBlue);
		clip-path: var(--outline);
		transform: translate(5px, 6px);
	}

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

	.cardFace {
		background-color: white;
		clip-path: var(--inline);
	}

	/* On the white card the comments need a line of their own */
	html.mobileDeck .feedbackWrap > ul li.quote {
		border: 1.5px solid var(--ink);
	}

	/* Reading text on the cards, a size up from the long page (kept weak, so titles, captions and the like keep
	   their own sizes) */
	:where(html.mobileDeck .cardScroll) :is(p, ul li) {
		font-size: 2.1rem;
		line-height: 3.3rem;
	}

	html.mobileDeck .feedbackWrap > ul li.quote,
	html.mobileDeck .cardScroll .contactIntro {
		font-size: 1.9rem;
		line-height: 2.9rem;
	}

	html.mobileDeck .cardScroll .formPrivacy {
		font-size: 1.5rem;
		line-height: 2.2rem;
	}

	html.mobileDeck .faqList dt {
		font-size: 2.1rem;
		line-height: 2.7rem;
	}

	html.mobileDeck .faqList dd {
		font-size: 2rem;
		line-height: 3.1rem;
	}

	.cardScroll {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		padding: var(--S) 0 calc(var(--S) + 2rem);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		clip-path: var(--inline);
	}

	html.mobileDeck .panel.hasContent.deckNear {
		visibility: visible;
		z-index: 1;
		pointer-events: none;
		will-change: transform, opacity;
	}

	html.mobileDeck .panel.hasContent.deckUnder {
		visibility: visible;
		z-index: 2;
		will-change: transform, opacity;
	}

	html.mobileDeck .panel.hasContent.deckCurrent {
		visibility: visible;
		z-index: 3;
		will-change: transform;
	}

	/* A card that has been flicked away stays on top while it flies off */
	html.mobileDeck .panel.hasContent.deckLeaving {
		visibility: visible;
		z-index: 4;
		pointer-events: none;
		/* Kept on its layer from the drag, so it isn't painted again on its way out */
		will-change: transform;
	}

	/* The section's own heading repeats the card's title: kept for screen readers only */
	html.mobileDeck .deckHeading {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	html.mobileDeck .panel.hasContent::before {
		content: none;
	}

	html.mobileDeck .panel.hasContent > .cardScroll > div {
		padding-top: 0;
		background: none;
		border-style: none;
		box-shadow: none;
	}

	/* The title: lettered in dark blue, with a thin hand-drawn line under it */
	.cardTitle {
		position: relative;
		display: table;
		margin: 1.4rem auto 1.6rem;
		padding: 0 .4rem .5rem;
		font: 3.2rem/3.8rem var(--titles);
		color: var(--darkBlue);
		text-align: center;
	}

	.cardTitle::after {
		content: "";
		position: absolute;
		right: -.6rem;
		bottom: -.3rem;
		left: -.6rem;
		height: 1rem;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 28 4 52 9 80 6 S 132 3 160 6 S 190 8 197 5' fill='none' stroke='%23e5194d' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	}

	/* The way to a quote, in the footer before its icons, where the slanted top leaves the most room */
	html.mobileDeck footer .deckQuote {
		order: -1;
		flex: 0 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: .6rem;
		height: 3.4rem;
		margin-right: .4rem;
		padding: 0 1.3rem;
		font: 1.6rem/2rem var(--titles);
		color: white;
		white-space: nowrap;
		background-color: var(--workRed);
		border: 2px solid var(--ink);
		border-radius: 1.7rem;
		-webkit-tap-highlight-color: transparent;
	}

	html.mobileDeck footer .deckQuote * {
		color: white;
	}

	.deckQuote:active {
		translate: 1px 2px;
	}

	/* The site footer, compact, along the very bottom: its icons on the left, the way to a quote on the right, the
	   credit line under them (the options button shows its icon only, its name stays for screen readers). In the
	   header's cream, its top edge falling to the right where the header's rises: ink cut to the slant, the cream a
	   line lower inside it. */
	html.mobileDeck footer {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 7;
		margin: 0;
		background-color: var(--ink);
		border-top-style: none;
		clip-path: polygon(0 0, 100% var(--slant, 15px), 100% 100%, 0 100%);
	}

	html.mobileDeck footer .bottom {
		justify-content: flex-start;
		gap: .5rem;
		padding: calc(var(--slant, 15px) * .8 + 1rem) 1rem 0;
		background-color: #fdf6dc;
		clip-path: polygon(0 3px, 100% calc(var(--slant, 15px) + 3px), 100% 100%, 0 100%);
	}

	html.mobileDeck footer .bottom .social {
		flex: 0 0 auto;
		padding: 0;
	}

	html.mobileDeck footer .bottom .social a {
		width: 3.2rem;
		height: 3.2rem;
		margin: 0 .25rem;
		font-size: 1.6rem;
	}

	html.mobileDeck footer .a11yToggle,
	html.mobileDeck footer .privacyToggle,
	html.mobileDeck footer #changePreferences {
		justify-content: center;
		width: 3.2rem;
		height: 3.2rem;
		padding: 0;
		font-size: 1.5rem;
		border-radius: 50%;
	}

	html.mobileDeck footer .a11yToggle span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* The credit line on a blue strip across the bottom */
	html.mobileDeck footer .bottom .credit {
		flex-basis: calc(100% + 2rem);
		margin: .6rem -1rem 0;
		padding: .5rem 1rem .6rem;
		background-color: var(--darkBlue);
	}

	html.mobileDeck footer .bottom .credit p,
	html.mobileDeck footer .bottom .credit p a {
		font: 700 1.2rem/1.6rem var(--mainFontFive);
		color: white;
	}

	/* The options pop-out rises above the footer, across the screen */
	html.mobileDeck footer .a11yPanel {
		position: fixed;
		right: 1.2rem;
		bottom: calc(var(--footerH, 7rem) + .6rem);
		left: 1.2rem;
		width: auto;
	}

	html.mobileDeck footer .a11yPanel::before,
	html.mobileDeck footer .a11yPanel::after {
		content: none;
	}

	/* The swipe note: pinned along the bottom just above the footer, bold and clear, fading after a few seconds */
	.deckHint {
		position: fixed;
		right: 1.2rem;
		bottom: calc(var(--footerH, 7rem) + .8rem);
		left: 1.2rem;
		z-index: 8;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: .8rem;
		margin: 0;
		padding: 1rem 1.4rem;
		font: 700 1.9rem/2.4rem var(--mainFontFive);
		color: var(--ink);
		text-align: center;
		background-color: #ffd23f;
		border: 3px solid var(--ink);
		border-radius: 1.6rem;
		box-shadow: 4px 4px 0 var(--darkBlue);
		pointer-events: none;
	}

	.deckHint i {
		display: inline-block;
		font-size: 2.2rem;
		color: var(--workRed);
	}

	/* Under the cover: the deck darkened until the cover is flicked away */
	.mobileCoverShade {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 24;
		/* A plain tint: the cover hides nearly all of it, and a blur behind would be redrawn on every frame of a drag */
		background-color: rgba(6, 30, 42, 0.6);
	}

	.mobileCoverShade[hidden] {
		display: none;
	}

}

/* @end mobile deck */


/* @group Packages Panel: intro, formats & prices and every package as tabs (packages.php, js/packageTabs.js) */

/* The open tab in the menu on the right */
.packageTabs a {
	transition: color .2s ease-in-out 0s, background-color .2s ease-in-out 0s;
}

.packageTabs a.current {
	margin: .2rem .8rem .2rem -.4rem;
	padding-left: 1.2rem;
	font-family: var(--boldLinkFont);
	color: var(--ink);
	background-color: #ffd23f;
	border: 2px solid var(--ink);
	box-shadow: 2px 2px 0 var(--darkBlue);
	rotate: -2deg;
}

.packageTabs a.current::before {
	content: none;
}

/* On desktop one yellow box travels along the menu under the mouse (js/packageTabs.js, html.tabMarkerOn) and rests
   on the open tab: the links themselves stay plain */
@media screen and (min-width: 799px) {
	.tabMarker {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		visibility: hidden;
		background-color: #ffd23f;
		border: 2px solid var(--ink);
		box-shadow: 2px 2px 0 var(--darkBlue);
		rotate: -2deg;
		pointer-events: none;
	}

	html.tabMarkerOn .packageTabs a {
		z-index: 1;
	}

	html.tabMarkerOn .packageTabs a::before {
		content: none;
	}

	html.tabMarkerOn .packageTabs a.current {
		margin: 0;
		padding-left: 1rem;
		background: none;
		border-style: none;
		box-shadow: none;
		rotate: none;
	}

	html.tabMarkerOn .packageTabs a.underMarker {
		color: var(--ink);
	}
}

/* A package's title, a little smaller in the panel than it was in the old popup */
@media screen and (min-width: 799px) {
	.packageTab .pkgHeading {
		font-size: 3.4rem;
		line-height: 4rem;
	}
}

/* A package's content and the intro's list keep the same distance from the edges as the text (4rem, 2rem on phones) */
.packageTab .pkgBody {
	max-width: none;
	padding: 0 4rem 2rem;
}

/* The intro's list of packages: small inked cards, each opening its tab */
.pkgTeasers {
	display: grid;
	gap: 1.2rem;
	margin: 2.4rem 4rem;
	padding: 0;
	list-style: none;
}

.pkgTeasers li {
	margin: 0;
}

.pkgTeaser {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	padding: .8rem 1.4rem .8rem .8rem;
	color: var(--ink);
	background-color: white;
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--darkBlue);
	transition: transform .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s;
}

.pkgTeaser:hover,
.pkgTeaser:focus-visible {
	color: var(--ink);
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--darkBlue);
}

.pkgTeaser img {
	flex: 0 0 auto;
	width: 5.6rem;
	height: 5.6rem;
	object-fit: contain;
}

.pkgTeaser span {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.pkgTeaser strong {
	font: 2rem/2.4rem var(--mainFontFive);
	color: var(--darkBlue);
}

.pkgTeaser small {
	font: 1.5rem/2rem var(--subTitle);
	color: #555;
}

.pkgTeaser i {
	flex: 0 0 auto;
	color: var(--workRed);
}

@media (max-width: 798px) {

	/* Phones: the tabs as a sideways strip of pills at the top of the card */
	html.mobileDeck .packagesPanel .packageTabs {
		position: static;
		display: flex;
		gap: .6rem;
		width: auto;
		margin: 0 1.6rem 1rem;
		padding: .4rem .2rem .8rem;
		overflow-x: auto;
		scrollbar-width: none;
		background: none;
		border-style: none;
		opacity: 1;
	}

	html.mobileDeck .packagesPanel .packageTabs::-webkit-scrollbar {
		display: none;
	}

	html.mobileDeck .packagesPanel .packageTabs a {
		flex: 0 0 auto;
		width: auto;
		margin: 0;
		padding: .3rem 1.1rem;
		font: 1.6rem/2.2rem var(--titles);
		color: var(--ink);
		white-space: nowrap;
		background-color: var(--caption);
		border: 2px solid var(--ink);
		box-shadow: 2px 2px 0 var(--ink);
		rotate: none;
	}

	html.mobileDeck .packagesPanel .packageTabs a.current {
		background-color: #ffd23f;
		rotate: -3deg;
	}

	.pkgTeasers {
		margin: 2.4rem 2rem;
	}

	.packageTab .pkgBody {
		padding: 0 2rem 2rem;
	}

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

	.pkgTeaser strong {
		font-size: 1.8rem;
		line-height: 2.2rem;
	}

}

/* @end packages panel */


/* @group FAQ Panel (pages-{lang}/faq.php): each question in the title font, its answer beneath */

.faqList {
	margin: 2.4rem 4rem 3rem;
}

.faqList dt {
	margin: 2.6rem 0 .6rem;
	font: 700 2.1rem/2.6rem 'Dosis Bold', sans-serif;
	color: var(--darkBlue);
}

.faqList dd {
	margin: 0;
	font-size: 1.9rem;
	line-height: 3rem;
	color: var(--workText);
}

@media (max-width: 798px) {

	.faqList {
		margin: 1.6rem 2rem 2.4rem;
	}

	.faqList dt {
		font-size: 1.9rem;
		line-height: 2.4rem;
	}

	.faqList dd {
		margin-left: 0;
		font-size: 1.8rem;
		line-height: 2.7rem;
	}

}

/* @end faq panel */