@charset "utf-8";
@import url("https://use.typekit.net/hke6lok.css");

/*--------------------------------------------------------------
1.0 Style reset
--------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
img {
	max-width:100%;
	height:auto;
	display:block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
input, textarea {
	font-size:1em;
	resize:none;
	-webkit-border-radius:0;
	border-radius:0;
	-webkit-appearance:none;
	font-family:inherit;
}
* {
	outline:none;
}
::-moz-selection {
    background:#878c6b;
    color:#fff;
}
::selection {
    background:#878c6b;
    color:#fff;
}

.clearfix::before, .clearfix::after {
    content: " ";
    display: table;
    clear: both;
}

body, html {
	width:100%;
	height:100%;
	background-color:#fff;
	color:#3B3B3B;
	line-height:1.6;
	letter-spacing:.0125em;
	font-size:20px;
	font-family: 'Helvetica Neue';
	font-weight: 400;
	font-style: normal;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
}

/*--------------------------------------------------------------
2.0 Fonts
--------------------------------------------------------------*/

@font-face {
	font-family: 'Helvetica Neue';
	font-weight:400;
	font-style:normal;
	src: url('../fonts/39D116_0_0.eot');
	src: url('../fonts/39D116_0_0.eot?#iefix') format('embedded-opentype'),
		url('../fonts/39D116_0_0.woff2') format('woff2'),
		url('../fonts/39D116_0_0.woff') format('woff'),
		url('../fonts/39D116_0_0.ttf') format('truetype'),
		url('../fonts/39D116_0_0.svg#wf') format('svg');
}

@font-face {
	font-family: 'Helvetica Neue';
	font-weight:400;
	font-style:italic;
	src: url('../fonts/39D116_1_0.eot');
	src: url('../fonts/39D116_1_0.eot?#iefix') format('embedded-opentype'),
		url('../fonts/39D116_1_0.woff2') format('woff2'),
		url('../fonts/39D116_1_0.woff') format('woff'),
		url('../fonts/39D116_1_0.ttf') format('truetype'),
		url('../fonts/39D116_1_0.svg#wf') format('svg');
}

@font-face {
	font-family: 'Helvetica Neue';
	font-weight:800;
	font-style:normal;
	src: url('../fonts/39D116_2_0.eot');
	src: url('../fonts/39D116_2_0.eot?#iefix') format('embedded-opentype'),
		url('../fonts/39D116_2_0.woff2') format('woff2'),
		url('../fonts/39D116_2_0.woff') format('woff'),
		url('../fonts/39D116_2_0.ttf') format('truetype'),
		url('../fonts/39D116_2_0.svg#wf') format('svg');
}

@font-face {
	font-family: 'Helvetica Neue Condensed';
	font-weight:400;
	font-style:normal;
	src: url('../fonts/39D116_3_0.eot');
	src: url('../fonts/39D116_3_0.eot?#iefix') format('embedded-opentype'),
		url('../fonts/39D116_3_0.woff2') format('woff2'),
		url('../fonts/39D116_3_0.woff') format('woff'),
		url('../fonts/39D116_3_0.ttf') format('truetype'),
		url('../fonts/39D116_3_0.svg#wf') format('svg');
}

/*--------------------------------------------------------------
3.0 Helpers
--------------------------------------------------------------*/

a, input, textarea .ease {
	-webkit-transition: all .15s ease;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
}

.fullscreen {
	min-width:100vw;
	min-height:100vh;
}

/*--------------------------------------------------------------
3.1 Helpers - Backgrounds
--------------------------------------------------------------*/

.bg-white {
	background-color:#fff;
	color:#3B3B3B;
}
.bg-pattern {
	background-size: 3.5em auto;
	background-repeat: round;
	color:#fff;
}
.bg-green {
	background-image: url("../images/pattern-green.png");
}
.bg-grey {
	background-image: url("../images/pattern-grey.png");
}
.bg-darkgrey {
	background-image: url("../images/pattern-dark-grey.png");
}

/*--------------------------------------------------------------
3.2 Helpers - Text
--------------------------------------------------------------*/

/* Text - Headings */

h1, h2, h3,
h4, h5, h6 {
	margin:1em 0;
	color:#000;
	line-height:1.2;
}
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
	margin-top:0;
}
h1:last-child, h2:last-child, h3:last-child,
h4:last-child, h5:last-child, h6:last-child {
	margin-bottom:0;
}
h1 {
	font-size:2em;
}
h2 {
	font-size:1.8em;
}
h3 {
	font-size:1.6em;
}
h4 {
	font-size:1.4em;
}
h5 {
	font-size:1.2em;
}

/* Text - Links */

a {
	color:#666;
	text-decoration:none;
}
a:focus,
a:hover {
	color:#000;
}

p {
	margin:1rem 0;
}
p:first-child {
	margin-top:0;
}
p:last-child {
	margin-bottom:0;
}

/*--------------------------------------------------------------
4.0 Structuur
--------------------------------------------------------------*/

#sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width:24rem;
	background-position:bottom right;
	overflow-y: auto;
}
#sidebar .hamburger {
	display:none;
}
#content {
	width:calc(100% - 24rem);
	max-width:54rem;
	margin-left:24rem;
}
#bottom {
	position:fixed;
	right:0;
	bottom:0;
	z-index:50;
	left:24rem;
	height:4rem;
	background-position:bottom left;
}

.inner {
	position:relative;
	padding:2rem;
}
#content .inner {
	padding:2rem 4rem 6rem;
}

/* Split */

#content.split {
	display: table;
	width: 100%;
	max-width: 100%;
	margin: 0;
	table-layout: fixed;
}
#content.split > * {
	position:relative;
	display:table-cell;
	vertical-align:middle;
}

#content.split .inner {
	position:relative;
	width: calc(100% - 8rem);
	max-width:32rem;
	padding:4rem;
	margin:auto;
}

/* Split - Images */

#content.split .images .inner > img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 24em;
	margin: 0 auto 4rem;
}
#content.split .images .inner .logo-wrapper {
	position:absolute;
	bottom:0;
	left:50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

/*--------------------------------------------------------------
5.0 Elementen
----------------------------------------------------------------
5.1 Elementen - Algemeen
--------------------------------------------------------------*/

/* Elementen - Logo's */

.logo-wrapper {
	display:block;
	max-width:14em;
	margin:1em 0;
	color:inherit;
	text-decoration: inherit;
}
.logo-wrapper:first-child {
	margin-top:0;
}
.logo-wrapper:last-child {
	margin-bottom:0;
}

/* Elementen - Logo's - Qompas */

.logo-wrapper.qompas {
	display:inline-block;
}
.logo-wrapper.qompas * {
	display:block;
	float:left;
}
.logo-wrapper.qompas img {
	width:auto;
	height:2.5rem;
}
.logo-wrapper.qompas span {
	width:calc(100% - 2.9rem);
	padding-left:.4rem;
	vertical-align:middle;
	font-size:1.6em;
	font-family: 'Helvetica Neue Condensed';
	line-height:2.5rem;
	text-transform:uppercase;
	letter-spacing:.2em;
}

/*--------------------------------------------------------------
5.2 Elementen - Sidebar
--------------------------------------------------------------*/

#sidebar a {
	text-decoration:none;
	color:#fff;
}

/*--------------------------------------------------------------
5.2.1 Elementen - Sidebar - Header
--------------------------------------------------------------*/

#sidebar header {
	margin:2em 0 3em;
}
#sidebar header > * {
	display:block;
	float:left;
}

#sidebar header > img {
	width:auto;
	height:1.8rem;
}

#sidebar header .details {
	width:calc(100% - 3rem);
	padding-left:1.1rem;
	font-size:.9em;
}

#sidebar header .details * {
	display:block;
	margin:0;
	font-size:1em;
	color:#fff;
}
#sidebar header .details h1 {
	margin:0;
	color:#fff;
	font-size:1.4rem;
	font-weight:800;
	line-height:1.8rem;
}
#sidebar header .details a {
	display:inline-block;
	padding-top:.5em;
}
#sidebar header .details a i {
	display: inline-block;
	margin-left: .25em;
}

/*--------------------------------------------------------------
5.2.2 Elementen - Sidebar - Menu
--------------------------------------------------------------*/

#sidebar .main-menu {
	width:calc(100% + 4rem);
	margin:2em -2rem 0;
}
#sidebar .main-menu ul {
	list-style:none;
	margin:0;
	padding:0;
}
#sidebar .main-menu ul li a {
	display:block;
	padding:1em 2rem 1em 4.7rem;
	box-sizing:border-box;
	border-left:.2rem solid transparent;
	color:rgba(255,255,255,.75);
	line-height:1;
}
#sidebar .main-menu ul li.active a,
#sidebar .main-menu ul li a:hover,
#sidebar .main-menu ul li a:focus {
	color:#fff;
	border-color: #fff;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(left,  rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(left,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(left,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=1 );
}

/*--------------------------------------------------------------
5.2.3 Elementen - Sidebar - Footer
--------------------------------------------------------------*/

#sidebar footer {
	position:absolute;
	right:0;
	bottom:0;
	left:0;
	padding:0 2rem 1rem;
}
#sidebar footer .logo-wrapper {
	margin:auto;
}

/*--------------------------------------------------------------
5.3 Elementen - Main content
----------------------------------------------------------------
5.3 Elementen - Main content - Navigatie
--------------------------------------------------------------*/

#content .progress {
	margin-bottom:3rem;
}
#content .progress ul {
	position:relative;
	display:table;
	table-layout: fixed;
	width:calc(100% + 2em);
	padding:0;
	margin:0 -1em;
	list-style:none;
	font-size:.75em;
	line-height:1.2;
}
#content .progress ul::after {
	content:'';
	position:absolute;
	right:calc(16.6666667% - 1.1em);
	bottom:calc(.5em - 1px);
	left:2em;
	z-index:10;
	height:2px;
	background-color:rgba(59,59,59,.5);
}
#content .progress ul li {
	display:table-cell;
	vertical-align:bottom;
	width:20%;
}
#content .progress ul li a {
	display:block;
	padding:0 1em;
	color:rgba(59,59,59,.5);
	text-decoration:none;
}
#content .progress ul li a:hover,
#content .progress ul li a:focus,
#content .progress ul li.active a {
	color:#3B3B3B;
}
#content .progress ul li a::after {
	content:'';
	position:relative;
	z-index:15;
	display:block;
	width:1em;
	height:1em;
	margin-top:.5em;
	border:2px solid;
	box-sizing:border-box;
	background-color:#fff;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
}

/*--------------------------------------------------------------
6.0 Formulier
----------------------------------------------------------------
6.1 Formulier - Velden
--------------------------------------------------------------*/

#content input,
#content textarea {
	display:block;
	width:100%;
	padding:.5em 0;
	border:none;
	border-bottom:1px solid #000;
	box-sizing:border-box;
	background-color:transparent;
	line-height:1;
	outline:none;
	resize:none;
}
#content input {
	height:2em;
}
#content input.number {
	position:relative;
	z-index:50;
	padding-left:.75em;
}
#content input.number:disabled {
	padding-left:1.5em;
}
#content input.percent {
	position:relative;
	z-index:50;
	padding-left:1.25em;
}
#content input.percent:disabled {
	padding-left:2.0em;
}
#content .eu, #content .percentage {
	position:absolute;
	top:.5em;
	z-index:55;
	line-height:1;
}
#content :disabled .eu, #content .eu.disabled, #content :disabled .percentage, #content .percentage.disabled {
	left:.75em;
}
#content textarea {
	padding:.5em;
	border:1px solid #000;
	line-height:1.4;
}
#content input:focus,
#content textarea:focus {
	border-color:#be9f5a;
}
#content input.error,
#content textarea.error {
	border-color: crimson;
}
#content input:disabled,
#content textarea:disabled {
	padding:.5em .75em;
	border:none;
	background-color:#f2f2f2;
}

#content button,
#content input[type="button"] {
	font-size: 1rem;
	display: inline-block;
	border: none;
	color: #fff;
	background-color: #878c6b;
	box-sizing: border-box;
	padding: .5em .75em;
	outline: none;
	cursor: pointer;
	-webkit-transition: all .15s ease;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
}
#content button:hover, #content button:focus,
#content input[type="button"]:hover,
#content input[type="button"]:focus {
	background-color:#6b6f54;
}

/* Velden - Checkbox */

#content label.checkbox {
	display: block;
	position: relative;
	padding: 0 0 0 1.5rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size:.8rem;
}
#content label.checkbox input {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 0;
	width: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	border: none;
}
#content label.checkbox .checkmark {
	position: absolute;
	top: -.1rem;
	left: 0;
	height: .8rem;
	width: .8rem;
	background-color: transparent;
	border: 1px solid #000;
}
#content label.checkbox .checkmark:after {
	content: "\f00c";
	font-family: "Font Awesome 5 Pro";
	font-weight: 300;
	position: absolute;
	top: .05rem;
	left: .1rem;
	display: none;
	font-size:.7rem;
}

#content label.checkbox input:checked ~ .checkmark:after {
	display: block;
}

/* Velden - Placeholders */

#content .wrapper {
	position:relative;
}
#content .wrapper span {
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	padding: .25em .5em;
	background-color:#000;
	color: #fff;
	font-size: .6em;
	line-height: 1;
	-webkit-transition: all .15s ease;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
}
#content .wrapper :focus + span {
	background-color:#be9f5a;
}
#content .wrapper .error + span {
	background-color:crimson;
}
#content .wrapper.inactive span {
	opacity:0;
}

/*--------------------------------------------------------------
6.2 Formulier - Structuur
--------------------------------------------------------------*/

#content section.inactive {
	display:none;
}

#content .fieldgroup {
	position:relative;
	z-index:25;
	margin:3rem 0;
}
#content .fieldgroup:first-child {
	margin-top:0;
}
#content .fieldgroup:last-child {
	margin-bottom:0;
}

#content fieldset {
	position:relative;
	z-index:25;
	padding-top:1rem;
	padding-bottom:1rem;
}

#content fieldset.complex {
	width:calc(100% + 2rem);
	margin-left:-1rem;
	margin-right:-1rem;
}
#content fieldset.complex .container {
	float:left;
	padding-left:1rem;
	padding-right:1rem;
	box-sizing:border-box;
}

/* Structuur - Kolommen */

#content fieldset.complex.two .container {
	width:50%;
}
#content fieldset.complex.three .container {
	width:33.3333333%;
}
#content fieldset.complex.four .container {
	width:25%;
}

/* Structuur - Kolommen - Label */

#content fieldset.complex.label .label {
	width:7.5rem !important;
}
#content fieldset.complex.label.one .container {
	width:calc(100% - 7.5rem);
}
#content fieldset.complex.label.two .container {
	width:calc(50% - 3.75rem);
}
#content fieldset.complex.label.three .container {
	width:calc(33.3333333% - 2.5em);
}
#content fieldset.complex.label.four .container {
	width:calc(25% - 1.875rem);
}

/* Structuur - Kolommen - Switch */

#content fieldset.complex.toggle .toggle {
	width:6rem !important;
}
#content fieldset.complex.toggle.one .container {
	width:calc(100% - 6rem);
}
#content fieldset.complex.toggle.two .container {
	width:calc(50% - 3rem);
}
#content fieldset.complex.toggle.three .container {
	width:calc(33.3333333% - 2rem);
}
#content fieldset.complex.toggle.four .container {
	width:calc(25% - 1.5rem);
}

/* Structuur - Kolommen - Label */

#content fieldset label {
	display:block;
	padding:.5rem 0;
	color:#000;
	font-size:1.1em;
	line-height:1;
}
#content fieldset:disabled label {
	opacity:.5;
}

/*--------------------------------------------------------------
6.3 Formulier - Elementen
----------------------------------------------------------------
6.3.1 Formulier - Elementen - Accordeon
--------------------------------------------------------------*/

#content .accordeon {
	padding:1rem 0;
}
#content .accordeon:first-child {
	padding-top:0;
}
#content .accordeon:last-child {
	padding-bottom:0;
}

/* Accordeon - Content */

#content .accordeon .trigger {
	color:#000;
	font-weight:800;
}
#content .accordeon .trigger h5 {
	position:relative;
	display:inline-block;
	cursor:pointer;
}
#content .accordeon .trigger h5::after {
	content: '\f107';
	position: absolute;
	top: .05rem;
	right: -.7em;
	display: block;
	font-size: 1.5em;
	font-family: "Font Awesome 5 Pro";
	font-weight: 300;
	line-height: 1.2rem;
	-webkit-transition: all .15s ease;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
}
#content .accordeon.inactive .trigger h5::after {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
#content .accordeon.inactive .content {
	display:none;
}

/*--------------------------------------------------------------
6.3.2 Formulier - Elementen - Switch
--------------------------------------------------------------*/

#content fieldset .toggle {
	text-align:center;
}
#content fieldset .toggle > span {
	display: block;
	margin-bottom: .5rem;
	color: #666;
	font-size: .7em;
	line-height:1;
}

/* Switch - Reset */

#content fieldset .toggle label.switch {
	position: relative;
	display: block;
	width: 3em;
	height: 1.7em;
	padding: 0;
	margin:auto;
}
#content fieldset .toggle label.switch input {
	opacity: 0;
	width: 0;
	height: 0;
	padding: 0;
	border: none;
	display: inline;
}

/* Switch - Slider */

#content fieldset .toggle label.switch .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #f2f2f2;
	-webkit-transition: all .15s ease;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
	-webkit-border-radius: 1.7em;
	-moz-border-radius: 1.7em;
	border-radius: 1.7em;
}
#content fieldset .toggle label.switch .slider:before {
	position: absolute;
	content: "";
	height: 1.3em;
	width: 1.3em;
	left: .2em;
	bottom: .2em;
	background-color: white;
	-webkit-transition: all .15s ease;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
#content fieldset .toggle label.switch .slider.disabled:after {
	content: "";
	display: block;
	position: absolute;
	border: 2px solid #d2d2d2;
	top: 9px;
	left: 12px;
	width: 6px;
	height: 3px;
	border-radius: 35px 35px 0 0;
	border-bottom: 8px solid #d2d2d2;
	-webkit-transition: all .15s ease;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
}

/* Switch - States */

#content fieldset .toggle label.switch input:checked + .slider {
	background-color: #878c6b;
}
#content fieldset .toggle label.switch input:checked + .slider:before,
#content fieldset .toggle label.switch input:checked + .slider:after {
	-webkit-transform: translateX(1.3em);
	-ms-transform: translateX(1.3em);
	transform: translateX(1.3em);
}

/*--------------------------------------------------------------
6.4 Formulier - Navigatie
--------------------------------------------------------------*/

#content footer.pagination {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 24rem;
	z-index: 75;
	height:4rem;
}
#content footer.pagination a {
	position: absolute;
	top: 50%;
	display: block;
	opacity: .5;
	color: #fff;
	font-size: .8em;
	text-decoration: none;
	line-height: 1;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#content footer.pagination a:hover,
#content footer.pagination a:focus {
	opacity:1;
}
#content footer.pagination a.left {
	left:4rem;
}
#content footer.pagination a.right {
	right:4rem;
}
#content footer.pagination a i {
	display: block;
	font-size: 2em;
	position: absolute;
	top: 50%;
	height: 1em;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#content footer.pagination a.left i {
	left: -.75em;
}
#content footer.pagination a.right i {
	right: -.75em;
}

/* Navigatie - Submit */

#content .submit-wrapper {
	position: fixed;
	bottom: .9rem;
	right: calc((100vw - 24rem) / 2);
	z-index: 100;
	-moz-transform: translateX(50%);
	-webkit-transform: translateX(50%);
	-o-transform: translateX(50%);
	-ms-transform: translateX(50%);
	transform: translateX(50%);
}
#content .submit-wrapper button {
	padding-left:2em;
	padding-right:2em;
	background-color:#be9f5a;
}
#content .submit-wrapper button:hover,
#content .submit-wrapper button:focus {
	background-color:#ab8f51;
}


/*--------------------------------------------------------------
6.5 Formulier - Inloggen
--------------------------------------------------------------*/

#content form.login {
	text-align:right;
}
#content fieldset.login a {
	float:left;
	font-size:.9em;
}
#content fieldset.login label {
	float:right;
}

#content form.login button {
	padding-left:1.5rem;
	padding-right:1.5rem;
}

/*--------------------------------------------------------------
7.0 Responsiveness
--------------------------------------------------------------*/

@media all and ( max-width:1440px ) {

/* Style reset */
	
body, html {
	font-size:19px;
}
	
}

@media all and ( max-width:1280px ) {

/* Style reset */
	
body, html {
	font-size:18px;
}
	
}

@media all and ( max-width:1120px ) {

/* Style reset */
	
body, html {
	font-size:17px;
}
	
/* Formulier - Structuur - Kolommen */

#content fieldset.complex.three .container,
#content fieldset.complex.four .container {
	width:100%;
	padding-top:.5em;
	padding-bottom:.5em;
}
#content fieldset.complex .container:first-child {
	padding-top:0;
}
#content fieldset.complex .container:last-child {
	padding-bottom:0;
}

/* Formulier - Structuur - Kolommen - Label */

#content fieldset.complex.label.three .container,
#content fieldset.complex.label.four .container {
	width:100%;
}

/* Formulier - Structuur - Kolommen - Switch */

#content fieldset.complex.toggle.three .container,
#content fieldset.complex.toggle.four .container {
	width:100%;
}
	
}

@media all and ( max-width:980px ) {
	
/* Style reset */
	
body, html {
	font-size:16px;
}
	
/* Elementen - Main content - Navigatie */
	
#content .progress {
	display:none;
}
	
/* Formulier - Structuur - Kolommen */

#content fieldset.complex .container,
#content fieldset.complex.two .container,
#content fieldset.complex.three .container,
#content fieldset.complex.four .container,
#content fieldset.complex.two.label .container,
#content fieldset.complex.three.label .container,
#content fieldset.complex.four.label .container {
	width:100%;
	padding-top:.5em;
	padding-bottom:.5em;
}
#content fieldset.complex .container:first-child {
	padding-top:0;
}
#content fieldset.complex .container:last-child {
	padding-bottom:0;
}
	
/* Formulier - Structuur - Kolommen - Switch */
	
#content fieldset.complex.toggle .container,
#content fieldset.complex.two.toggle .container,
#content fieldset.complex.three.toggle .container, 
#content fieldset.complex.four.toggle .container {
	width:calc(100% - 6rem);
}
	
#content fieldset.complex.toggle .toggle {
	position: absolute;
	top: 50%;
	right: 0;
	padding: 0;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
	
/* Formulier - Navigatie */
	
#content footer.pagination a {
	font-size:0;
}
#content footer.pagination a i {
	font-size:2rem;
}
	
}

@media all and ( max-width:800px ) {
	
/* Style reset */
	
body, html {
	font-size:16px;
}
	
/* Helpers - Text */
	
h1 {
	font-size:1.5em;
}
h2 {
	font-size:1.4em;
}
h3 {
	font-size:1.3em;
}
h4 {
	font-size:1.2em;
}
h5 {
	font-size:1.1em;
}
	
/* Structuur */
	
#sidebar {
	z-index:200;
	right:calc(100% - 4rem);
	left:auto;
	width:100%;
}
#sidebar.active {
	left:0;
	right:0;
}
#content {
	position:relative;
	width:100%;
	height: calc(100vh - 4rem);
	margin-left:0;
	overflow: scroll;
}
#content .inner {
	padding: 2rem 2rem 2rem 6rem;
}
#bottom {
	left:4rem;
}
	
/* Split */

#content.split,
#content.split > * {
	display:block;
}
#content.split > * {
	width: calc(100% - 8rem);
	margin: auto;
	padding: 2rem;
}
#content.split .inner {
	width:100%;
	padding:0;
}
	
/* Split - Images */
	
#content.split .images .inner > img {
	max-width: 9em;
	margin: 0 auto;
}
	
#content.split .images .inner .logo-wrapper {
	display:none;
}
	
/* Structuur - Sidebar - Toggle */

#sidebar .hamburger {
	position:absolute;
	top: 2rem;
    right: .9rem;
	display: block;
	padding: 0;
	cursor: pointer;
	transition-property: opacity, filter;
	color: #fff;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
}
#sidebar .hamburger.is-active .hamburger-inner,
#sidebar .hamburger.is-active .hamburger-inner::before,
#sidebar .hamburger.is-active .hamburger-inner::after {
	background-color: #fff;
}
#sidebar .hamburger .hamburger-box {
	width: 2.2rem;
	height: 1.3rem;
	display: inline-block;
	position: relative;
}
#sidebar .hamburger .hamburger-inner {
	display: block;
	margin-top: -.11rem;
	top: auto;
	bottom: 0;
	transition-duration: 0.13s;
	transition-delay: 0.13s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
#sidebar .hamburger .hamburger-inner,
#sidebar .hamburger .hamburger-inner::before,
#sidebar .hamburger .hamburger-inner::after {
	width: 2.2rem;
	height: .2rem;
	background-color: #fff;
	border-radius: .22rem;
	position: absolute;
	transition-property: transform;
}
#sidebar .hamburger .hamburger-inner::before,
#sidebar .hamburger .hamburger-inner::after {
	content: "";
	display: block;
}
#sidebar .hamburger .hamburger-inner::before {
	top: -0.55rem;
	transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
#sidebar .hamburger .hamburger-inner::after {
	top: -1.11rem;
	transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

/* Structuur - Sidebar - Toggle - States */

#sidebar .hamburger.active .hamburger-inner {
	transform: translate3d(0, -10px, 0) rotate(-45deg);
	transition-delay: 0.22s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
#sidebar .hamburger.active .hamburger-inner::after {
	top: 0;
	opacity: 0;
	transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
#sidebar .hamburger.active .hamburger-inner::before {
	top: 0;
	transform: rotate(-90deg);
	transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Formulier - Navigatie */

#content footer.pagination {
	left: 4rem;
}
	
/* Formulier - Navigatie - Submit */

#content .submit-wrapper {
	right: calc((100vw - 4rem) / 2);
}
	
}

@media all and ( max-width:400px ) {
	
/* Structuur */
	
#content .inner {
	padding: 2rem 2rem 2rem 6rem;
}
	
}

@media all and ( max-height: 770px ) {

	/* Sidebar - Footer */
	#sidebar footer {
		position: relative;
		right: auto;
		bottom: auto;
		left: auto;
	}
}

p.error_notice {
	background: #e27878;
	color: white;
	border: 1px solid crimson;

	text-align: center;
	font-size: 0.8rem;
}

h1.error_notice, a.error_notice {
	color: crimson!important;
}