/**********************************************************

 * TAGS

 **********************************************************/

* {

	--mot-color: #F9AF05;

	--mot-hover: #FBC037;

	--mot-black: #0D0802;

	--mot-white: #FFFFFF;

	--mot-alert: #F90F05;

	--mot-green: #AFF9AF;

	--mot-lgray: #EDE8E2;

	--mot-mgray: #CDC8C2;

	--mot-dgray: #8D8882;

	--mrb-color: #FF2427;

	--edu-color: #EB6B26;

	--bsv-color: #5CB4CF;

	--tra-color: #09AF0F;

	--ddz-color: #7EC95C;

	--owl-color: #4FD882;

	--crp-color: #9F05FA;

}

body {

	font-family: "Open Sans", Helvetica, Arial, sans-serif;

	color: var(--mot-black);

	margin: 0;

	font-size: 14px;

}

a {

	color: var(--mot-color);

	font-weight: bold;

	text-decoration: none;

}

h1, h2, h3, h4, h5, h6 {

	font-family: Arial, sans-serif;

}

h1, .h1 {

	 font-size: 26px;

	 font-weight: normal;

}

h2, .h2 {

	font-size: 21px;

	font-weight: bold;

}

h3, .h3 {

	font-size: 18px;

	font-weight: bold;

}

img {

	display: block;

}

form {

	overflow: hidden;

}

input:not([type]), input[type="text"],

input[type="password"], input[type="number"],

textarea, select {

	box-sizing: border-box;

	display: block;

	background-color: var(--mot-lgray);

	padding: 8px;

	border: none;

	margin-bottom: 10px;

	width: 100%;

}

input#newPassword {

	width: 50%;

	min-width: 300px;

}

input[type="submit"] {

	color: var(--mot-white);

	background-color: var(--mot-black);

	height: 40px;

	font-size: 14px;

	padding: 0 6px;

	border: none;

}

textarea {

	font-family: "Open Sans", Helvetica, Arial, sans-serif;

}

iframe {

	max-width: 100%;

}

/**********************************************************

 * TAGS - MOBILE

 **********************************************************/

@media screen and (max-width: 600px) {

	input#newPassword {

		width: inherit;

	}

}

/**********************************************************

 * CONTENT CLASSES

 *********************************************************/

.content {

	padding: 10px 16px;

	max-width: 1080px;

	margin: auto;

	overflow: hidden;

	clear: both;

	min-height: 43vh;

}

.content img {

	max-width: 100%;

}

.content-with-sidebar {

	width: 75%;

	float: left;

}

.content-no-sidebar{

	width: 100%;

}

.sidebar {

	width: 24%;

	float: right;

}

.content-column {

	float: left;

}

.content-2column {

	width: 50%;

	box-sizing: border-box;

}

.content-2column-1 {

	padding-right: 1%;

}

.content-2column-2 {

	padding-left: 1%;

}

.content-mijn-maakboxen {

	overflow: hidden;

}

/**********************************************************

 * CONTENT CLASSES - MOBILE

 *********************************************************/

@media screen and (max-width: 840px) {

	.content-with-sidebar, .content-sidebar, .sidebar {

		width: 100%;

		float: none;

		clear: left;

	}

	.sidebar {

		padding-top: 40px;

	}

}

@media screen and (max-width: 600px) {

	.content-column {

		float: none;

	}

	.content-2column {

		width: 100%;

		box-sizing: border-box;

	}

	.content-2column-1 {

		padding-right: 0;

	}

	.content-2column-2 {

		padding-left: 0;

		padding-top: 20px;

	}

}

/***********************************************************

 * OTHER

 **********************************************************/

.icon-inline img,

.icon-inline-img {

	display: inline-block;

    height: 1em;

    width: auto;

}

h1 .icon-inline img {

	height: 24px;

	position: relative;

	top: 4px;

	padding-right: 8px;

}

.icon-inline-h2.image-left {

	width: 32px;

	margin-right: 8px;

}

.image-clear {

	display: block;

}

.image-left {

	width: 33%;

	float: left;

	margin-right: 32px;

}

.image-center {

	width: 33%;

	margin: 0 auto;

}

.image-right {

	width: 33%;

	float: right;

	margin-left: 32px;

}

.image-spacer-20 {

	margin-top: 20px;

	margin-bottom: 20px;

}

.image-spacer-32 {

	margin-top: 32px;

	margin-bottom: 32px;

}

.form-required {

	color: var(--mot-alert);

}

.entry-form {

	border: 3px solid var(--mot-black);

	padding: 10px;

}

.entry-form-verzonden {

	background: var(--mot-green);					/* appeltjes-groen voor succesvolle verzending */

}

.form-column {

	width: 50%;

	float: left;

	box-sizing: border-box;

}

.form-column-1 {

	padding-right: 4px;

}

.form-column-2 {

	padding-left: 4px;

}

.img-in-form-border {

	border: 3.5px solid transparent;

}

.actie-knop {

	display: block;

	clear: both;

	text-align: center;

	width: 100%;

	background-color: var(--mot-black);

	color: var(--mot-white);

	font-size: 22px;

	transition: all .5s ease;

	padding: 10px 18px;

	box-sizing: border-box;

}

.actie-knop a {

	color: var(--mot-white);

}

.actie-knop:hover {

	background-color: var(--mot-color);

	color: var(--mot-black);

}

.actie-knop:hover a {

	color: var(--mot-black);

}

.cta-knop {

	display: block;

	clear: both;

	text-align: center;

	width: 100%;

	background-color: var(--mot-color);

	color: var(--mot-black);

	font-size: 20px;

	transition: all .5s ease;

	padding: 10px 18px;

	box-sizing: border-box;

}

.cta-knop:hover {

	background: var(--mot-hover);

}

.cta-knop a {

	color: var(--mot-black);

}

.block-clear {

	clear: both;

	margin: 10px auto;

}

.geenjs-melding {

	font-size: 13px;

	background-color: var(--mot-alert);				/* alarm-rood voor melding dat JavaScript uitstaat */

	padding: 10px;

	margin-bottom: 10px;

}

.geenjs-melding a {

	color: var(--mot-black);

}

.geenjs-melding a:hover {

	color: var(--mot-color);

}

.error-page {

	font-size: 16px;

	margin-bottom: 16px;

}

.content-spellen {

	column-count: 2;

}

.spellen-tweede-kolom {

	padding-top: 410px;

}

.spellen-kolom h2 {

	width: 100%;

}

.spellen-laatste-blok {

	padding-bottom: 500px;

}

.form-zip {

	height: 0;

	opacity: 0;

}

/***********************************************************

 * OTHER - MOBILE

 **********************************************************/

@media screen and (max-width: 600px) {

	.form-column {

		width: 100%;

	}

	.form-column-1 {

		padding-right: 0;

	}

	.form-column-2 {

		padding-left: 0;

	}

	.content-spellen {

		column-count: 1;

	}

	.spellen-tweede-kolom {

		padding-top: 0;

	}

	.spellen-laatste-blok {

		padding-bottom: 0;

	}

}

/**********************************************************

 * HEADER

 **********************************************************/

.header {

	position: relative;

	z-index: 5000;

	--header-bar-height: 80px;

}

.header-featured {

	padding: 8px;

	text-align: center;

}

.header-featured a, .header-featured span {

	color: var(--mot-black);

	font-weight: bold;

	display: block;

}

.header-featured-donker a {

	color: var(--mot-white);

}

.header-bar,

.header-bar-content {

	background: var(--mot-color);

	height: var(--header-bar-height);

}

.header-bar a {

	font-weight: 600;

	font-size: 13px;

	text-decoration: none;

	color: var(--mot-black);

}

.header-logo,

.header-login-link {

	width: 17%;

	min-width: 160px;

}

.header-login-link {

	float: right;

	margin: 23px;

	height: 34px;

}

.header-login-link a {

	padding: 8px 0;

	display: block;

	width: 100%;

	text-align: center;

}

.header-login-link-false a {

	background: var(--mot-black);

	color: var(--mot-white);

}

.header-login {

	background: var(--mot-color);

	padding: 6px 6px 0;

	box-sizing: border-box;

}

.header-hamburger, input#menuToggle, input#searchToggle, input#loginToggle, .main-menu-close-icon, .header-login-close-icon {

	display: none;

}

.header-logo {

	float: left;

	background-color: var(--mot-white);

	position: relative;

	padding: 0 8px;

	height: var(--header-bar-height);

	display: flex;

  justify-content: center;

  align-items: center;

}

.header-minimal .header-logo {

	width: 100%;

}

.header-logo a {

	display: inline-block;

}

.header-logo img {

	max-width: 100%;

	max-height: var(--header-bar-height);

}

.header-nav {

	width: calc(66% - 65px);

}

.header-nav,

.header-nav nav {

	float: left;

}

.header-nav a:hover {

	color: var(--mot-white);

}

.header-nav-notg-item {

	position: relative;

	display: inline-block;

	margin: 0 10px;

}

.header-nav-menu-item {

	display: inline-block;

}

.header-nav-user-menu .header-nav-menu-item {

	margin: 0 10px;

}

.header-nav-menu-drop {

  display: none;

  position: absolute;

	border-top: 1px solid var(--mot-color);

	background-color: var(--mot-mgray);

}

.header-nav-menu-drop-item {

	display: block;

	min-width: 167px;

	padding: 6px;

	white-space: nowrap;

}

.header-nav-menu-drop-item:not(:last-of-type) {

	border-bottom: 1px solid var(--mot-black);

}

.header-nav-notg-item:hover .header-nav-menu-drop,

.header-nav-menu-item:hover .header-nav-menu-drop {

	display: block;

}

.header-nav-tg {

	width: var(--header-bar-height);

	height: var(--header-bar-height);

	background-color: var(--mot-black);

	padding: 10px;

	color: var(--mot-white);

	font-weight: bold;

	font-size: 150%;

	box-sizing: border-box;

	position: relative;

}

.header-nav-tg:hover {

	background-color: var(--mot-dgray);

}

.header-nav-tg-selected {

	display: flex;

	justify-content: center;

	flex-direction: column;

	text-align: center;

}

.header-nav-tg-selected span {

	display: block;

}

.header-nav-tg-selected .header-nav-tg-title {

	margin-top: 14px;

}

.header-nav-tg-selected .header-nav-tg-arrow {

	margin-top: -10px;

}

.header-nav-tg:hover .header-nav-tg-arrow {

	color: var(--mot-color);

}

.header-nav .header-nav-fixed {

	float: right;

	padding-right: 0;

}

.header-nav-menu,

.header-nav-fixed {

	padding: 30px;

}

.header-nav-fixed a {

	display: inline-block;

	margin: 0 10px;

}

.header-nav-tg-dropdown {

	display: none;

	margin-top: 9px;

	margin-left: -10px;

}

.header-nav-tg-checkbox {

	position: absolute;

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

	opacity: 0;

}

.header-nav-tg-checkbox:checked .header-nav-tg-checkbox::after {

	content: ' ';

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: var(--mot-white);

	opacity: 0.3;

}

.header-nav-tg-checkbox:checked + .header-nav-tg-dropdown {

	display: block;

}

.header-nav-tg-option {

	text-align: center;

}

.header-nav-tg-option a {

	display: block;

	width: var(--header-bar-height);

	height: 40px;

	line-height: 40px;

	background-color: var(--mot-mgray);

	border-bottom: 1px solid var(--mot-black);

}

.header-nav-tg-option a:hover {

	background-color: var(--mot-hover);

}

.header-nav-mobile,

a.header-login-mobile {

	display: none;

}

.sub-menu-toggle {

	display: none;

}

.sub-menu {

	display: none;

	position: absolute;

	background: var(--mot-lgray);

	font-size: 13px;

}

.main-menu li:hover .sub-menu {

	display: block;

	z-index: 2555;

}

.main-menu .sub-menu li {

	border-bottom: 1px solid var(--mot-dgray);

}

.main-menu .sub-menu a {

	width: 240px;

	line-height: 24px;

	font-weight: normal;

	display: block;

	height: auto;

	padding: 0 10px;

}

.main-menu .sub-menu a:hover {

	background: var(--mot-color);

	color: var(--mot-white);

}

.main-menu .sub-menu li:last-of-type {

	border: none;

}

.cookies-admin {

	position: absolute;

}

/**********************************************************

 * HEADER - MOBILE

 **********************************************************/

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

	.header-nav-menu {

		padding: 12px 30px 8px;

	}

	.header-nav-menu,

	.header-nav-fixed {

		width: calc(85% - var(--header-bar-height));

	}

	.header-nav .header-nav-fixed {

		float: left;

		padding: 8px 30px 12px;

	}

}

@media screen and (max-width: 940px) {

	.header-featured {

		font-size: 12px;

		height: 32px;

	}

	.header {

		position: -webkit-sticky;

		position: sticky;

		top: 0;

		height: 112px;

	}

	.header-bar {

		padding: 0;

		height: 48px;

		text-align: center;

	}

	.header-bar a {

		font-size: 120%;

	}

	.header-social {

		float: none;

		margin: auto;

		height: 24px;

		top: 4px;

	}

	.header-default .header-bar a {

		font-size: inherit;

	}

	.header-tagline a {

		vertical-align: top;

	}

	.header-logo {

		width: 60%;

		box-sizing: border-box;

	}

	.header-nav-notg {

		display: none;

	}

	.header-nav .header-nav-menu,

	.header-nav .header-nav-fixed {

		float: none;

		width: 100%;

		text-align: left;

		padding: 0;

	}

	.header-nav {

		width: 40%;

	}

	.header-nav a:hover {

		color: inherit;

	}

	.header-nav-group {

		position: absolute;

		width: 240px;

		max-width: 80vw;

		display: none;

		top: var(--header-bar-height);

    right: 0;

		background-color: var(--mot-white);

		border-left: 8px solid var(--mot-color);

		border-bottom: 8px solid var(--mot-color);

	}

	.header-nav-group a {

		display: block;

		width: 100%;

		margin: 0;

		padding: 12px;

		border-bottom: 2px solid var(--mot-color);

	}

	.header-nav-mobile {

		display: block;

		position: absolute;

		top: 24px;

    right: 32px;

    width: 36px;

    height: 36px;

	}

	.header-path-marker,

	.header-drop-marker {

		display: none;

	}

	.header-nav-menu-item {

		width: 100%;

	}

	.header-hamburger, .header-search {

		display: block;

		position: absolute;

	}

	.header-search, .header-login {

		float: none;

	}

	.header-bar .header-search,

	.header-search {

		right: 8px;

		width: 75%;

		padding: 0;

		pointer-events: none;

	}

	.header-search * {

		pointer-events: auto;

	}

	input#menuToggle {

		display: inline-block;

		position: absolute;

		height: 36px;

		width: 36px;

		opacity: 0;

		z-index: 100;

	}

	.main-menu-close-icon {

		display: block;

		position: absolute;

	}

	.main-menu-close-icon img {

		height: 32px;

		width: 32px;

		opacity: 0;

		transition: .6s;

		pointer-events: none;

	}

	input:checked#menuToggle ~ .header-nav-group {

		display: block;

	}

	input:checked#menuToggle ~ .header-nav-mobile .main-menu-close-icon img {

		opacity: 1;

	}

	input:checked#menuToggle ~ .header-login,

	input:checked#menuToggle ~ .main-menu {

		transform: translate(-50px)

	}

	input:checked#menuToggle ~ .main-menu-deco-0 {

		opacity: 0.55;

		pointer-events: auto;

	}

	input#loginToggle {

		height: 36px;

		width: 100%;

		display: block;

		position: relative;

		top: -36px;

		opacity: 0;

	}

	.header-login-link {

		display: none;

	}

	.header-login-box {

		background-color: var(--mot-color);

		position: absolute;

		left: calc(((58vw - 65px) / 2) + 25px);

		top: 10px;

		width: calc(42vw + 65px);

		padding: 6px;

		box-sizing: border-box;

		box-shadow: 0 0 0 1000px rgba(13,8,2,0.55);

		z-index: 330;

	}

	input:checked#loginToggle {

		top: -140px;

		left: 0;

		height: 120px;

		width: 30vw;

		z-index: 300;

	}

	input:checked#loginToggle ~ .header-login-box, input:checked#loginToggle ~ .header-login-close-icon {

		display: block

	}

	.header-login-close-icon img {

		height: 32px;

		position: absolute;

		left: calc(((58vw - 65px) / 2));

		top: -16px;

		z-index: 400;

		pointer-events: none;

	}

	.header-nav-user-menu .header-nav-menu-item {

		margin: 0;

		width: 100%;

	}

	.header-nav-menu-item:hover .header-nav-menu-drop {

		display: none;

	}

	.sub-menu-toggle {

		display: block;

		position: absolute;

    top: 0;

    right: 0;

    width: 100%;

    height: 28px;

    opacity: 0;

	}

	input:checked[name="subMenuToggle"] ~ .sub-menu {

		display: block;

	}

	.user-menu {

		background: var(--mot-color);

	}

	.user-menu a {

		font-weight: normal;

	}

	.user-menu-item {

		background: var(--mot-color);

	}

	.header-login-caption {

		display: block;

	}

	.header-login-caption, .header-welcome-caption {

		color: var(--mot-color);

		font-weight: bold;

	}

	.header-login-caption, .header-welcome-caption, .user-menu li, .main-menu li {

		padding: 6px 6px 6px 52px;

		border-right: 7px solid var(--mot-color);

		width: 221px;

		font-size: inherit;

		line-height: 21px;

	}

	.header-login {

		top: 112px;

		height: 32px;

		z-index: 151;

		padding: 4px 0 0 0;

		box-sizing: unset;

	}

	a.header-login-mobile {

		background-color: var(--mot-black);

		color: var(--mot-white);

	}

	a.header-login-mobile:hover {

		color: var(--mot-white);

	}

	.home-doelgroep-inhoud h2 {

		font-size: 4vw;

	}

}

@media screen and (max-width: 440px) {

	.header-nav-tg {

		width: 18vw;

	}

}

/**********************************************************

 * FOOTER

 **********************************************************/

.footer {

	background: var(--mot-lgray);

}

.footer-deco {

	height:	70px;

	border-bottom-left-radius: 70px;

	border-bottom-right-radius: 70px;

	background: var(--mot-white);

}

.footer-content {

	padding: 20px;

	max-width: 1080px;

	overflow: hidden;

	margin: auto;

}

.footer-column-1, .footer-column-2, .footer-column-3 {

	float: left;

	width: 31%;

	padding: 0 1.16%;

}

.footer-column-2 .contact-character {

	top: 4px;

	position: relative;

}

.footer-column-2 .contact-character:nth-of-type(40) {

	margin-right: 1px;

}

.footer-social {

	float: right;

	width: 31%;

	padding: 0 1.16%;

	text-align: right;

	margin-top: 8px;

	float: right;

	width: 24%;

	min-width: 130px;

	position: relative;

	top: -4px;

	display: flex;

	justify-content: space-between;

}

.footer-social a {

	display: block;

	max-width: 24px;

	width: 3vw;

	max-height: 24px;

	height: 3vw;

}

.social-icon-hover {

	position: relative;

	/*left: -10%;*/

	top: -100%;

	visibility: hidden;

}



/**********************************************************

 * FOOTER - MOBILE

 **********************************************************/

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

	.footer-column-1, .footer-column-2, .footer-column-3, .footer-social {

		width: 100%;

		padding-bottom: 20px;

	}

	.footer-social {

		text-align: center;

	}

}

@media screen and (max-width: 300px) {

	.footer-content {

		font-size: 12px;

	}

}



/**********************************************************

 * CHAR

 **********************************************************/

.contact-character {

	height: 18px;

	overflow:hidden;

	display:inline-block;

	margin-right:-3.5px;

}

.contact-character img {

  max-width: unset;

}

.char-w-1 {

	width: 3px;

}

.char-w-1-17 {

	width: 3.5px;

}

.char-w-1-33 {

	width: 4px;

}

.char-w-1-5 {

	width: 4.5px;

}

.char-w-1-67 {

	width: 5px;

}

.char-w-1-83 {

	width: 5.5px;

}

.char-w-2 {

	width: 6px;

}

.char-w-2-17 {

	width: 6.5px;

}

.char-w-2-33 {

	width: 7px;

}

.char-w-2-5 {

	width: 7.5px;

}

.char-w-2-67 {

	width: 8px;

}

.char-w-2-83 {

	width: 8.5px;

}

.char-w-3 {

	width: 9px;

}

.char-w-3-17 {

	width: 9.5px;

}

.char-w-3-33 {

	width: 10px;

}

.char-w-3-5 {

	width: 10.5px;

}

.char-w-3-67 {

	width: 11px;

}

.char-w-3-83 {

	width: 11.5px;

}

.char-w-4 {

	width: 12px;

}

.char-w-4-17 {

	width: 12.5px;

}

.char-w-4-33 {

	width: 13px;

}

.char-w-4-5 {

	width: 13.5px;

}

.char-w-4-67 {

	width: 14px;

}

.char-w-4-83 {

	width: 14.5px;

}

.char-w-5 {

	width: 15px;

}

.char-c-4 {

	margin-left: 0px;

}

.char-c-5 {

	margin-left: -12px;

}

.char-c-6 {

	margin-left: -24px;

}

.char-c-7 {

	margin-left: -36px;

}

.char-c-8 {

	margin-left: -48px;

}

.char-c-9 {

	margin-left: -60px;

}

.char-c-10 {

	margin-left: -72px;

}

.char-c-11 {

	margin-left: -84px;

}

.char-c-12 {

	margin-left: -96px;

}

.char-c-13 {

	margin-left: -108px;

}

.char-c-14 {

	margin-left: -120px;

}

.char-c-15 {

	margin-left: -132px;

}

.char-c-16 {

	margin-left: -144px;

}

.char-r-0 {

	margin-top: 0px;

}

.char-r-1 {

	margin-top: -18px;

}

.char-r-2 {

	margin-top: -36px;

}

.char-r-3 {

	margin-top: -54px;

}

.char-r-4 {

	margin-top: -72px;

}

.char-r-5 {

	margin-top: -90px;

}

.char-r-6 {

	margin-top: -108px;

}

.char-r-7 {

	margin-top: -126px;

}