@font-face {
	font-family: 'superagothic-regular';
	src: url('img/superagothic-regular.woff2') format('woff2'),
		 url('img/superagothic-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'superagothic-bold';
	src: url('img/superagothic-bold.woff2') format('woff2'),
		 url('img/superagothic-bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'superagothic-regular';
	src: url('img/superagothic-bold.woff2') format('woff2'),
		 url('img/superagothic-bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ================== BODY BASIS ================== */
html {
	background-color: #283169;
	overflow-x: hidden; /* hier, niet op page-wrapper — voorkomt sub-scroll container */
}

body {
	font-family: 'superagothic-regular', Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	scroll-behavior: smooth;
}

.page-wrapper {
	position: relative;
	/* overflow-x: hidden verwijderd — zat hier fout, veroorzaakte scroll-jank */
}

.vis-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-image: url(img/background_final.png);
    background-repeat: no-repeat;
    background-size: 300vw auto;
   	background-position: 55% 45px;
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

@media (max-width: 575px) {
    .vis-bg-layer {
        transform: scaleX(-1);
    }
}

.wave-background {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 150px;
	margin: 0;
	pointer-events: none;
	overflow: hidden;
}

.wave-background svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wave-background path {
	fill: #283169;
}

.top-sticky-bar {
	--header-bar-height: 45px;
	--logo-card-height: 100px;
	position: relative;
	z-index: 1;
	width: 100%;
	height: calc(var(--header-bar-height) + var(--logo-card-height));
	background: linear-gradient(to bottom, #27316A 0, #27316A var(--header-bar-height), transparent var(--header-bar-height), transparent 100%);
}

.top-sticky-inner {
	position: relative;
	height: 100%;
}

.site-logo-card {
	position: absolute;
	top: var(--header-bar-height);
	left: 15px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 110px;
	height: var(--logo-card-height);
	background-color: #27316A;
	border-radius: 0 0 8px 8px;
}

.site-logo-card img {
	display: block;
	width: 100px;
	max-width: 80%;
	height: auto;
}
@media (min-width: 576px) {
	
}

@media (min-width: 768px) {
} 

@media (min-width: 992px) {
	.site-logo-card {
		width: 155px;
		height: 122px;
	}

	.site-logo-card img {
		width: 124px;
		max-width: 80%;
	}	
}

@media (min-width: 576px) {
	.vis-bg-layer {
        background-position: 54% 85px;
	}
	h1, .vis-intro {
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media (min-width: 576px) and (max-width: 767px) {
	h1, .vis-wordsearch h1 {
		padding-left: 70px;
		padding-right: 70px;
	}
}

@media (min-width: 768px) {
	h1, .vis-intro {
		padding-left: 100px;
		padding-right: 100px;
	}
}

@media (min-width: 992px) {
	h1, .vis-intro {
		padding-left: 110px;
		padding-right: 110px;
	}
}

@media (min-width: 1200px) {
	h1, .vis-intro {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (min-width: 1600px) {
	.vis-bg-layer {
		background-size: 4800px auto;
		background-position: 54% 45px;
	}
}

.voorwaardenoverlay,
footer {
	position: relative;
	z-index: 1;
}

.vis-game {
	position: relative;
	z-index: 6;
}

h1,h2,h3,h4,h5,h6,p{
	margin: 0;
	padding: 0;
	color: #000000;
}

.no-p {padding: 0;}
.p-5-form{padding-left: 5px;padding-right: 5px;}
.mt30{margin-top: 30px;}
.mt10{margin-top: 10px;}

/* ================== VIS WOORDZOEKER ================== */
.vis-game {
	margin-top: -40px;
	padding-top: 70px;
	padding-bottom: 30px;
	overflow: hidden;
}

@media (min-width: 992px) {
	.vis-game {
		margin-top: -100px;
	}
}

.vis-game-board {
	position: relative;
	min-height: 620px;
}

.vis-word-panel {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.vis-form-panel {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 11;
	-webkit-transform: translateX(115vw);
	transform: translateX(115vw);
	opacity: 0;
	pointer-events: none;
}

/* Transitions + GPU-laag alleen actief nadat de pagina klaar is */
.vis-game-ready .vis-word-panel,
.vis-game-ready .vis-form-panel {
	-webkit-transition: opacity 0.9s ease, -webkit-transform 0.9s ease;
	transition: opacity 0.9s ease, -webkit-transform 0.9s ease;
	transition: transform 0.9s ease, opacity 0.9s ease;
	transition: transform 0.9s ease, opacity 0.9s ease, -webkit-transform 0.9s ease;
	will-change: transform, opacity;
}

/* Na het spel: will-change opruimen zodat GPU-geheugen vrijkomt */
.vis-game-complete .vis-word-panel,
.vis-game-complete .vis-form-panel {
	will-change: auto;
}

.vis-game-complete .vis-word-panel {
	-webkit-transform: translateX(-115vw);
	transform: translateX(-115vw);
	opacity: 0;
	pointer-events: none;
}

.vis-game-complete .vis-form-panel {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
}



.vis-form-panel form > .row > .col-lg-9 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

/* Receptenboekje in formulier */
.vis-receptenboekje-inner {
	position: relative;
	display: inline-block;
}

.vis-receptenboekje-badge {
	position: absolute;
	background-color: #f26f62;
	color: #ffffff;
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	padding: 8px 14px;
    transform: rotate(355deg);
	white-space: nowrap;
	/* Positie op mobiel */
    top: 67px;
    left: -40px;
}

@media (min-width: 576px) {
	.vis-receptenboekje-badge {
		font-size: 16px;
		padding: 10px 16px;
		top: 46px;
        left: -75px;
	}
}

@media (min-width: 768px) {
	.vis-receptenboekje-badge {
		font-size: 18px;
		padding: 12px 20px;
        top: 66px;
        left: -70px;
	}
}

@media (min-width: 992px) {
	.vis-receptenboekje-badge {
		font-size: 20px;
		padding: 14px 22px;
		top: 83px;
        left: -75px;
	}
}

.vis-receptenboekje-wrap {
	display: flex;
	justify-content: flex-end;
	margin: 20px -40px -40px -40px;
}

.vis-receptenboekje {
	display: block;
	width: 160px;
	pointer-events: none;
}

@media (min-width: 576px) {
	.vis-receptenboekje {
		width: 120px;
	}
	.vis-receptenboekje-wrap {
		margin-top: -70px;
	}
}

@media (min-width: 768px) {
	.vis-receptenboekje {
		width: 160px;
	}
	.vis-receptenboekje-wrap {
		margin-top: -60px;
	}
}

@media (min-width: 992px) {
	.vis-receptenboekje {
		width: 190px;
	}
	.vis-receptenboekje-wrap {
		margin-top: -10px;
	}
}

@media (min-width: 1200px) {
	.vis-receptenboekje {
		width: 190px;
	}
	.vis-receptenboekje-wrap {
		margin-top: -30px;
	}
}

.vis-prize-badge {
	position: absolute;
	left: 30px;
	top: 300px;
	width: 110px;
	height: 110px;
	background-color: #f26f62;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 5;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0,0,0,0.12);
	padding: 10px;
	box-sizing: border-box;
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-weight: 700;
	z-index:9999;
}

/* < 576px */
@media (max-width: 575px) {
	.vis-prize-badge {
		display: none;
	}
}

/* 576px – 767px */
@media (min-width: 576px) and (max-width: 767px) {
	.vis-prize-badge {
		left: calc(20vw - 85px);
      top: calc(130px + 19vw);
       width: 90px;
    	height: 90px;
	}
}

/* 768px – 991px */
@media (min-width: 768px) and (max-width: 991px) {
	.vis-prize-badge {
		left: calc(20vw - 85px);
      top: calc(130px + 19vw);
       width: 100px;
    	height: 100px;
	}
}

/* 992px – 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
	.vis-prize-badge {
	    position: absolute;
	    left: calc(39.2vw - 378px);
	    top: calc(139px + 19vw);
	    width: 110px;
	    height: 110px;
	}
}

/* ≥ 1200px */
@media (min-width: 1200px) {
	.vis-prize-badge {
	    position: absolute;
	    left: calc(39.2vw - 410px);
	    top: calc(139px + 19vw);
	    width: 140px;
	    height: 140px;
	}
	.vis-prize-line1,
	.vis-prize-line2 {
		font-size: 22px !important;
	}
}

/* ≥ 1600px */
@media (min-width: 1600px) {
	.vis-prize-badge {
	    position: absolute;
	    left: calc(39.2vw - 360px);
	    top: 400px;
	    width: 140px;
	    height: 140px;
	}
}

.vis-prize-line1 {
	display: block;
	color: #ffffff;
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
}

.vis-prize-line2 {
	display: block;
	color: #ffffff;
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	margin-top: 4px;
}

.vis-wordsearch {
	text-align: center;
	width: 100%;
	position: relative;
}

.vis-wordsearch h1 {
	margin-bottom: 20px;
	color: #27316A;
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
}

@media (min-width: 576px) {
	.vis-wordsearch h1 {
		font-size: 25px;
		line-height: 27px;
	}
}

@media (min-width: 768px) {
	.vis-wordsearch h1 {
        font-size: 34px;
        line-height: 36px;
        padding-left: 100px;
        padding-right: 100px;
	}
}

@media (min-width: 992px) {
	.vis-wordsearch h1 {
		font-size: 40px;
        line-height: 42px;
        padding-left: 170px;
        padding-right: 170px;
	}
}

.vis-intro {
	max-width: 760px;
	margin: 0 auto 36px;
	color: #0E0E0E;
	font-family: 'superagothic-regular', Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
}

.vis-intro strong {
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-weight: 700;
}

.vis-wordsearch-layout {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 0;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.vis-puzzle-area {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 15px;
	background-color: #ffffff;
	border-radius: 20px;
	border: 0;
	-webkit-box-shadow: 0 12px 24px rgba(39, 49, 106, 0.12);
	box-shadow: 0 12px 24px rgba(39, 49, 106, 0.12);
}

.vis-puzzle-title {
	margin: 0 0 14px;
	color: #27316A;
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
}

.vis-puzzle-title span:last-child {
	color: #f26f62;
}

#grid {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 4px;
	width: 100%;
	margin: 0;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	touch-action: none;
}

.cell {
	display: grid;
	place-items: center;
	height: auto;
	aspect-ratio: 1 / 1;
	border: 1px solid #cccccc;
	border-radius: 10px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-select: none;
}

.selected {
	background: #ffe08a;
}

.found {
	background: #4CB347;
	color: #FFFFFF;
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-weight: 700;
}

#words {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 220px;
	height: 340px;
	margin: 18px 0 0;
	padding: 0;
	gap: 18px;
	list-style: none;
}

.vis-target {
	--eat-distance: 130px;
	--fish-color: #F27C54;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0;
	flex: 1 1 0;
	width: 220px;
	min-height: 0;
	margin-bottom: 0;
	position: relative;
	text-align: left;
}

.vis-target:nth-child(2) {
	--fish-color: #4FA6C9;
}

.vis-target:nth-child(2) .vis-fish-bubble::before {
	background-image: url('img/haring.jpg.webp');
}

.vis-target:nth-child(3) {
	--fish-color: #F2B84B;
}

.vis-target:nth-child(3) .vis-fish-bubble::before {
	background-image: url('img/oester.jpg.webp');
}

.vis-target:last-child {
	margin-bottom: 0;
}

.vis-fish-bubble {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 220px;
	flex: 0 0 220px;
	width: 220px;
	height: 100%;
	position: relative;
	z-index: 2;
	overflow: hidden;
	background-color: #ffffff;
	border: 0;
	border-radius: 20px;
	-webkit-box-shadow: 0 12px 24px rgba(39, 49, 106, 0.12);
	box-shadow: 0 12px 24px rgba(39, 49, 106, 0.12);
}

.vis-fish-bubble::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: url('img/zalm.jpg.webp');
	background-size: cover;
	background-position: center;
	border-radius: 20px;
	-webkit-box-shadow: inset 0 0 0 5px #FFFFFF;
	box-shadow: inset 0 0 0 5px #FFFFFF;
	pointer-events: none;
}

.vis-fish-bubble::after {
	display: none;
}

.vis-hidden-fish {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: none;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 150px;
	height: 95%;
	background-color: transparent;
	border-radius: 0;
	opacity: 0;
	-webkit-transform: translate(-52%, -50%) scale(0.82);
	transform: translate(-52%, -50%) scale(0.82);
}

.vis-hidden-fish::before {
	display: block;
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('img/clipart616635.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-filter: brightness(0) saturate(100%) invert(17%) sepia(57%) saturate(619%) hue-rotate(202deg) brightness(90%) contrast(96%);
	filter: brightness(0) saturate(100%) invert(17%) sepia(57%) saturate(619%) hue-rotate(202deg) brightness(90%) contrast(96%);
}

.vis-hidden-fish::after {
	display: none;
}

.vis-fish-belly-word {
	position: relative;
	z-index: 2;
	left: 0;
	max-width: 72%;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	opacity: 0;
	text-align: center;
}

.word {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	right: 5px;
	bottom: 5px;
	left: 5px;
	z-index: 3;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 35px;
	background-color: #FFFFFF;
	border-radius: 0 0 15px 15px;
	color: #27316A;
	font-size: 18px;
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0;
	-webkit-transition: background-color 0.25s ease, color 0.25s ease;
	-o-transition: background-color 0.25s ease, color 0.25s ease;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.vis-target-found .vis-fish-bubble {
	border: 0;
}

.vis-target-found .vis-fish-bubble::before {
	inset: 0;
	border-radius: 20px;
	-webkit-box-shadow: inset 0 0 0 5px #4CB347;
	box-shadow: inset 0 0 0 5px #4CB347;
}

.vis-target-found .vis-hidden-fish {
	-webkit-animation: fishReveal 0.95s ease forwards;
	animation: fishReveal 0.95s ease forwards;
}

.vis-target-found .vis-fish-belly-word {
	-webkit-animation: bellyWordAppear 0.95s ease forwards;
	animation: bellyWordAppear 0.95s ease forwards;
}

.word.found-word {
	background-color: #4CB347;
	color: #FFFFFF;
	-webkit-animation: none;
	animation: none;
}

@-webkit-keyframes fishReveal {
	0% {opacity: 0;-webkit-transform: translate(-52%, -50%) scale(0.82);transform: translate(-52%, -50%) scale(0.82);}
	25% {opacity: 1;}
	58% {-webkit-transform: translate(var(--eat-distance), -50%) scale(1.08);transform: translate(var(--eat-distance), -50%) scale(1.08);}
	100% {opacity: 1;-webkit-transform: translate(var(--eat-distance), -50%) scale(1);transform: translate(var(--eat-distance), -50%) scale(1);}
}

@keyframes fishReveal {
	0% {opacity: 0;-webkit-transform: translate(-52%, -50%) scale(0.82);transform: translate(-52%, -50%) scale(0.82);}
	25% {opacity: 1;}
	58% {-webkit-transform: translate(var(--eat-distance), -50%) scale(1.08);transform: translate(var(--eat-distance), -50%) scale(1.08);}
	100% {opacity: 1;-webkit-transform: translate(var(--eat-distance), -50%) scale(1);transform: translate(var(--eat-distance), -50%) scale(1);}
}

@-webkit-keyframes wordToFish {
	0% {opacity: 1;-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}
	15% {opacity: 0;-webkit-transform: translateX(-16px) scale(0.84);transform: translateX(-16px) scale(0.84);}
	100% {opacity: 0;-webkit-transform: translateX(-28px) scale(0.36);transform: translateX(-28px) scale(0.36);}
}

@keyframes wordToFish {
	0% {opacity: 1;-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}
	15% {opacity: 0;-webkit-transform: translateX(-16px) scale(0.84);transform: translateX(-16px) scale(0.84);}
	100% {opacity: 0;-webkit-transform: translateX(-28px) scale(0.36);transform: translateX(-28px) scale(0.36);}
}

@-webkit-keyframes bellyWordAppear {
	0%, 70% {opacity: 0;-webkit-transform: scale(0.75);transform: scale(0.75);}
	100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
}

@keyframes bellyWordAppear {
	0%, 70% {opacity: 0;-webkit-transform: scale(0.75);transform: scale(0.75);}
	100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
}

@media (max-width: 575px) {
	h1, .vis-wordsearch h1, .vis-intro {
		text-align: left;
	}
}

@media (max-width: 767px) {
	/* Antwoorden boven de woordzoeker, beide even breed */
	.vis-wordsearch-layout {
		flex-direction: column-reverse;
		-webkit-box-align: stretch !important;
		-ms-flex-align: stretch !important;
		align-items: stretch !important;
	}

	/* Puzzle vult container-breedte (geen full-bleed uitbraak) */
	.vis-puzzle-area {
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		-ms-flex-item-align: stretch !important;
		align-self: stretch !important;
	}

	/* Verberg onderste 3 rijen (cellen 41–64) */
	#grid .cell:nth-child(n+41) {
		display: none;
	}

	/* Antwoorden even breed als de woordzoeker, 3 naast elkaar */
	#words {
		-webkit-box-orient: horizontal;
		-ms-flex-direction: row;
		flex-direction: row;
		width: 100% !important;
		height: 150px !important;
		margin: 0 0 18px;
		gap: 10px;
		-ms-flex-item-align: stretch !important;
		align-self: stretch !important;
	}

	.vis-target {
		--eat-distance: 30px;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 0;
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0;
		position: relative;
	}

	.vis-fish-bubble {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto !important;
		-ms-flex-preferred-size: auto !important;
		flex-basis: auto !important;
		width: 100% !important;
		height: 150px !important;
		min-width: 0;
	}

	.word {
		font-size: 18px;
		right: 5px;
		bottom: 5px;
		left: 5px;
	}

	.vis-fish-bubble::after {
		min-width: 0;
		width: 90%;
		padding: 5px 8px 6px;
		font-size: 12px;
		border-radius: 0 0 10px 10px;
	}
}

@media (min-width: 576px) {
	.vis-puzzle-area {
		width: 480px;
		margin-right: auto;
		margin-left: auto;
	}

	#words,
	.vis-target,
	.vis-fish-bubble {
		width: 240px;
	}

	.vis-target {
		--eat-distance: 70px;
	}

	#words {
		height: 400px;
	}

	.vis-fish-bubble {
		-ms-flex-basis: 240px;
		flex-basis: 240px;
	}

	.vis-fish-bubble::after {
		min-width: 135px;
		width: auto;
		padding: 8px 18px 9px;
		font-size: 16px;
		border-radius: 0 0 15px 15px;
	}
}

@media (min-width: 768px) {
	.wave-background {
		height: 190px;
	}

	.vis-wordsearch-layout {
		display: grid;
		grid-template-columns: 420px 230px;
		column-gap: 18px;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		gap: 0 18px;
	}

	.vis-puzzle-area {
		width: 420px;
		height: auto;
		padding: 20px;
	}

	#words,
	.vis-target,
	.vis-fish-bubble {
		width: 230px;
	}

	#words {
		height: 456px;
		margin-top: 0;
		margin-left: 0;
	}

	.vis-fish-bubble {
		-ms-flex-basis: 230px;
		flex-basis: 230px;
	}

	.vis-target {
		--eat-distance: 110px;
	}

	.vis-fish-belly-word {
		left: 15px;
	}
}

@media (min-width: 992px) {
	.vis-wordsearch-layout {
		display: grid;
		grid-template-columns: 490px 270px;
		column-gap: 18px;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		gap: 0 18px;
	}

	#words,
	.vis-target,
	.vis-fish-bubble {
		width: 270px;
	}

	.vis-puzzle-area {
		width: 490px;
		height: auto;
	}

	#words {
		height: 530px;
		margin-top: 0;
		margin-left: 0;
	}

	.vis-fish-bubble {
		-ms-flex-basis: 270px;
		flex-basis: 270px;
	}

	.vis-target {
		--eat-distance: 130px;
	}

	.vis-fish-belly-word {
		font-size: 14px;
		left: 25px;
	}

	.vis-game-board {
		min-height: 700px;
	}

	.cell {
		font-size: 22px;
	}

	.word {
		font-size: 22px;
	}

	.vis-puzzle-title {
		font-size: 22px;
	}

	.vis-fish-bubble::after {
		min-width: 155px;
		padding: 10px 20px 11px;
		font-size: 18px;
	}
}

.cta {
	border-radius: 50px;
	padding: 10px 30px 12px 30px;
	font-size: 18px;
	width: 100%;
	display: inline-block;
	margin: auto;
	margin-top: 20px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	text-decoration: none;
	text-align: center;
	color: #ffffff;
	cursor: pointer;
	font-weight: 700;
	background-color: #4CB347;
	border: 0;
	outline : 0;
}
.cta:hover {
	color: #ffffff;
	text-decoration: none;
	background-position: right 20px top 18px;
	background-color: #40963B;
}
.cta:visited, .cta:link {
	color: #ffffff;
	text-decoration: none;
	border: 0;
	outline : 0;
}
.cta:active {
	transform: scale(0.9);
	border: 0;
	outline : 0;
}
.nudge {
	padding-top: 30px;
	padding-bottom: 15px;
	font-size: 14px;
	color: #000000;
}
.nudge a {
	text-decoration: underline;
	color: #000000;
}

/* ================== FORMULIER CSS ================== */
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder{ /* Chrome/Opera/Safari/Firefox 19+/IE 10/Firefox 18- */
 	color:#8B8B8B;
 	font-size: 14px;
}
.errormachtiging {
 	float:left;
 	padding-left:30px;
}
li.error {
 	color:#EB8283;
 	font-size:14px;
 	list-style-type:none;
}
li.valid {
 	height:0;
 	color:#EB8283;
 	font-size:11px;
 	list-style-type:none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important; /* Verandert achtergrondkleur na autofill/prefill */
}

/* ================== START GESLACHTBUTTON ================== */
.form-geslacht{
	position: relative;
	padding-top: 15px;
	padding-left: 5px;
	padding-right: 5px;
}
.form-geslacht input[type=radio] {
 	visibility: hidden; /* gebruik geen display block */
 	width: 1px;
 	height: 1px;
 	cursor: pointer;
 	padding: 0px;
 	float:left;
 	margin-left:0px!important;
 	-moz-appearance: none; /* Remove default appearance styling for Firefox */
 	-webkit-appearance:none;
 	appearance:none;
 	position: absolute;
}
.form-geslacht input[type=radio] + label {
 	color:#999;
 	background-image: url(img/bullet_unchecked.png);
 	background-repeat:no-repeat;
 	background-size: 30px;
 	background-position: left -5px top 3px;
 	padding-top: 8px;
    padding-left: 25px;
 	width: 100%;
 	max-width: 64px;
 	cursor: pointer;
 	-webkit-transition: all 0.2s ease-in-out;
 	-moz-transition: all 0.2s ease-in-out;
 	-o-transition: all 0.2s ease-in-out;
 	transition: all 0.2s ease-in-out;
 	position: relative;
	-webkit-transform: none!important;
	transform: none!important;
    margin-bottom: 12px;
}
.form-geslacht input[type=radio]:hover + label {
 	background-image: url(img/bullet.png);
}
.form-geslacht input[type=radio]:checked + label {
 	background: url(img/bullet.png) no-repeat;
 	background-size: 30px;
 	background-position: left -5px top 3px;
}
/* ================== END GESLACHTBUTTON ================== */

/* ================== START CHECKBOX ================== */
.form-checkbox{
	margin-top: 20px;
}
.form-checkbox input[type=checkbox] {
    visibility: hidden;
    width: 1px;
    position: absolute;
}
.form-checkbox .check-box {
 	width: 100%;
 	padding-left: 30px;
 	padding-bottom: 5px;
 	margin-bottom: 0;
 	background-color: transparent;
 	position: relative;
 	display: inline-block;
 	background:url(img/checkbox.png) no-repeat left top;
 	background-size:17px 17px;
 	font-size:14px;
 	line-height:normal;
}
.form-checkbox .check-box::before, .check-box::after {
 	position: absolute;
 	height: 0;
 	width: 3px;
 	border-radius: 1px;
 	background-color: #3399FF;
 	display: inline-block;
 	-moz-transform-origin: left top;
 	-ms-transform-origin: left top;
 	-o-transform-origin: left top;
 	-webkit-transform-origin: left top;
 	transform-origin: left top; 	
 	content: ' ';
 	-webkit-transition: opacity ease .5;
 	-moz-transition: opacity ease .5;
 	transition: opacity ease .5;
}
.form-checkbox .check-box::before {
 	top: 15px;
 	left: 9px;
 	box-shadow: 0 0 0 0px #ffffff;
 	-moz-transform: rotate(-135deg);
 	-ms-transform: rotate(-135deg);
 	-o-transform: rotate(-135deg);
 	-webkit-transform: rotate(-135deg);
 	transform: rotate(-135deg);
}
.form-checkbox .check-box::after {
 	top: 8px;
 	left: 0px;
 	-moz-transform: rotate(-45deg);
 	-ms-transform: rotate(-45deg);
 	-o-transform: rotate(-45deg);
 	-webkit-transform: rotate(-45deg);
 	transform: rotate(-45deg);
}
.form-checkbox input[type=checkbox]:checked + .check-box, .check-box.checked {
	border-color: #3399FF;
}
.form-checkbox input[type=checkbox]:checked + .check-box::after, .check-box.checked::after {
 	height: 12px;
 	-moz-animation: dothabottomcheck 0.2s ease 0s forwards;
 	-o-animation: dothabottomcheck 0.2s ease 0s forwards;
 	-webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
 	animation: dothabottomcheck 0.2s ease 0s forwards;
}
.form-checkbox input[type=checkbox]:checked + .check-box::before, .check-box.checked::before {
 	height: 30px;
 	-moz-animation: dothatopcheck 0.4s ease 0s forwards;
 	-o-animation: dothatopcheck 0.4s ease 0s forwards;
 	-webkit-animation: dothatopcheck 0.4s ease 0s forwards;
 	animation: dothatopcheck 0.4s ease 0s forwards;
}
/*Keyframes Checkbox*/
@-moz-keyframes dothabottomcheck {
	0% {height: 0;}
 	100% {height: 11px;}
}
@-webkit-keyframes dothabottomcheck {
	0% {height: 0;}
 	100% {height: 11px;}
}
@keyframes dothabottomcheck {
	0% {height: 0;}
 	100% {height: 11px;}
}
@keyframes dothatopcheck {
	0% {height: 0;}
 	50% {height: 0;}
 	100% {height: 24px;}
}
@-webkit-keyframes dothatopcheck {
	0% {height: 0;}
 	50% {height: 0;}
 	100% {height: 24px;}
}
@-moz-keyframes dothatopcheck {
	0% {height: 0;}
 	50% {height: 0;}
 	100% {height: 24px;}
}
/* ================== END CHECKBOX ================== */

/* ================== START FORM BASIS ================== */
.form-field input {
 	font-size:16px;
 	display:block;
 	width:100%;
 	border:1px solid #999999;
 	border-radius:20px;
 	height:45px;
 	margin:10px 0 0 0;
 	padding:10px;
 	transition:0.4s ease all;
 	-moz-transition:0.4s ease all;
 	-webkit-transition:0.4s ease all;
 	-webkit-appearance:none;
 	padding-top: 25px;
 	top: 10px;
}
.form-field input:focus, input.birthdate-valid{
	outline:none;
	border:1px solid #999999;
}
.form-field input:focus ~ label{
	-webkit-transform: translateY(4px) scale(.85);
	transform: translateY(4px) scale(.85);
}
.nostyle{transform: none!important;color:#000000!important;} /*Zorgt ervoor dat radio buttons niet scalen*/
.form-field input.valid, input.birthdate-valid.valid {
	border:1px solid #58c143;
}
.form-field input.error, input.birthdate-valid.error {
	border:1px solid #EB8283;
}
.form-field input.error ~ label {
	color: #EB8283;
}
.form-field label {
	transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s,-webkit-transform .2s;
    pointer-events: none;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    font-weight: 400;
    text-align: left;
    position: absolute;
    top: 10px;
    left: 15px;
    z-index: 1;
    color: #b3b3b3;
    font-size: 14px;
    line-height: 22.4px;
    -webkit-transform: translateY(11.8px);
    transform: translateY(11.8px);
}
.adressconfirm {
 	font-size: 14px;
 	color: #6B6B6B;
}
.adressconfirm.adresvink {    
	background-color: #efefef;
    border-radius: 2px;
    color: #000000;
    float: left;
    padding: 10px 20px;
    margin-bottom: 5px;
    margin-top: 10px;
    left: 0;
    padding-left: 40px;
    margin-left: 0;
}
.adressconfirm.adresvink:before {
    content: '';
    position: absolute;
    background-image: url(img/adres_vink.png);
    background-position: 0;
    background-size: 20px;
    width: 20px;
    background-repeat: no-repeat;
    left: 25px;
    top: 9px;
    height: 40px;
}
.formcontainer {
	margin-bottom: 30px;
	background-color: #FFFFFF;
	border-radius: 20px;
	border: 0;
    padding: 40px;
	position: relative;
	overflow: hidden;
	-webkit-box-shadow: 0 12px 24px rgba(39, 49, 106, 0.12);
	box-shadow: 0 12px 24px rgba(39, 49, 106, 0.12);
}
.form-heading-row {
	margin: -28px -28px 28px;
	background-color: #EEF2F5;
	border-radius: 12px;
}
.form-heading-row .p-5-form {
	padding-left: 0;
	padding-right: 0;
}
.formcontainer p{
	color: #000000; 
	font-size: 18px;
	font-weight: 700;
}
.formcontainer p.gegevens-title{
	margin: 0;
	padding: 18px 22px;
	color: #27316A;
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

@media (min-width: 992px) {
	.formcontainer p.gegevens-title {
		font-size: 22px;
	}
}
.formcontainer p.title-between{
	margin-top: 30px;
}
.formcontainer .form-field {
	padding-left: 4px;
	padding-right: 4px;
}
.form-field input.is-active ~ label, .filled-in label, .filled-in-error label, .form-field label.activelabel {
	-webkit-transform: translateY(4px) scale(.85);
	transform: translateY(4px) scale(.85);
	color: #009fe6;
}
.form-field label.activelabel, .valid ~ label{
	color: #58c143;
}
.filled-in-error label {
	color: #EB8283;
}
.errorbox, #postcodeError {
		width:100%;
}
@media screen and (max-width: 768px) {
	label[for=payment_ibannumber] {
		top: 0px!important;
	}
	.errorbox, #postcodeError {
 		float: left;
	}
	.formcontainer{
		padding: 25px;
	}
	.form-heading-row {
		margin: -13px -13px 24px;
	}
}
/* ================== END FORM BASIS ================== */

/* ================== START BIRTHDATE ================== */
.form-geboorte label {
 	font-size:14px;
 	color:#999;
 	left:20px;
 	position:absolute;
 	top: 10px;
}
.zsm{
	display: inline-block;
	margin-right: 15px;
}
.date-style{
	width:110px;
 	display: inline-block;
 	margin-right:5px;
	font-size:16px;
 	border:none;
 	border:1px solid #8d8d8d;
 	border-radius:20px;
 	height:45px;
 	margin:0 0 5px 0;
 	padding:10px;
 	transition:0.4s ease all;
 	-moz-transition:0.4s ease all;
 	-webkit-transition:0.4s ease all;
 	-webkit-appearance:none;
}
.date-style.mm {
 	margin-left: 10px;
}
.date-style.yy {
 	margin-right: 0px;
 	margin-left: 10px;
}
.date-style:focus{
	outline:none;
	border:1px solid #3399FF;
}
@media screen and (max-width: 576px) {
	.date-style {width: 30%; margin-left: 0;}
	.date-style.mm {margin-left: 4px;}
	.date-style.yy {margin-left: 4px;}
}
/* ================== END BIRTHDATE ================== */

/* ================== START VOORWAARDEN ================== */
#fillVoorw li {
 	list-style-type: square;
 	padding: 0 16px 0 0;
}
#fillVoorw {
 	list-style-type: square;
 	padding: 0 0px 0 16px;
}
.voorwaardenoverlay {
 	position: fixed;
 	background-color: rgba(0, 0, 0, 0.8);
 	z-index: 99999;
 	width: 100%;
 	height: 100%;
 	display: none;
}
.popuptitle {
 	font-weight:900;
 	font-size:30px;
 	margin-bottom:20px;
}
.form-open {
 	width: 90%;
 	animation: open 1s;
 	transition:1s ease all;
 	-moz-transition:1s ease all;
 	-webkit-transition:1s ease all;
 	opacity:1;
}
.lightbox {
 	background-color: #ffffff;
 	height: 50vh;
 	color:#181818;
 	overflow-y: auto;
 	padding:50px 50px 50px 50px;
 	font-family: Source Sans Pro, Helvetica, Arial, sans-serif;
 	font-size:14px;
 	line-height:1.6em;
 	-webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.25);
 	-moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.25);
 	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.25);
 	margin: auto;
 	position: absolute;
 	width:100%;
	left: 0;
	right: 0;
}
#popup {
 	width: 60%;
 	margin:auto;
 	position:absolute;
 	height:50vh;
 	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
#close {
 	position:absolute;
 	color:#ffffff;
 	top:-20px;
 	right:-20px;
 	padding-top: 10px;
 	font-size:20px;
 	font-weight:700;
 	cursor:pointer;
 	width: 50px;
 	height: 50px;
 	background-color:#3399FF;
 	border-radius: 30px;
 	text-align: center;
 	z-index:9999;
}
@media(max-width: 767px){
	.lightbox{
		padding: 20px 20px 20px 20px;
	}
	#popup {
		width: 80%;
	}
	.popuptitle {
		font-size: 26px;
	}
}

/*Keyframes lightbox open*/
@keyframes open {
 	0% {display: none;}
 	1% {width: 0;display: block;color:white;opacity: 0;}
 	80% {color:white;}
 	100% {display: block;width: 90%;color:#181818;opacity: 1;}
}

@keyframes open {
 	0% {display: none;}
 	1% {width: 0;display: block;color:white;opacity: 0;}
 	80% {color:white;}
 	100% {width: 100%;}
}
/* ================== END VOORWAARDEN ================== */


/* ================== OVERIGE STYLES ================== */
.reasoning {
    display: block;
    width: 100%;
    color: #a8a8a8;
    margin-bottom: 10px;
}
@media(max-width: 767px){
	.reasoning{
		margin-top: 10px;
		margin-left: 0;
	}
}

input[type=radio] {
	margin-right: 5px;
}

/*Start groene balk boven formulier*/
.green-bar{
	background-color: #dffdcd;
	border: 1px solid #7cc94b;
	border-radius: 8px;
	position: relative;
	padding: 15px 0;
	margin: 30px 0 0;
}
.green-bar ul{
	padding-left: 30px;
	margin: 0;
}
.green-bar ul li{
	color: #71c63e;
	font-weight: 900;
	position: relative;
	font-size: 18px;
	list-style: none;
	padding-left: 30px;
	padding-right: 15px;
	background-image: url('img/check_circle.png');
	background-position: left top 3px;
	background-repeat: no-repeat;
	background-size: 18px 18px;
}
.green-bar a{
	position: absolute;
	right: 40px;
	top: 15px;
	font-size: 18px;
	color: #71c63e;
	text-decoration: underline;
	font-weight: 900;
}
@media(max-width: 450px){
	.green-bar a{
	    right: 0px;
	    top: 59px;
	    font-size: 14px;
	    color: #000000;
	}
}
/*End groene balk boven formulier*/


/*Start Fade-in en Fade-uit animaties*/
.fade-out{
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
}
.fade-in{
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}
@keyframes fadeOut {
    0% {opacity: 1;left:0;}
    100% {opacity: 0;left:180px;}
}
@keyframes fadeIn {
    0% {opacity: 0;left:-180px;}
    100% {opacity: 1;left: 0;}
}
/*Eind Fade-in en Fade-uit animaties*/

footer {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: -1px;
	padding: 50px 0 66px;
	background-color: #283169;
}

.footer-logo-position {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 110px;
	margin: 0 0 50px;
}

.footer-logo {
	display: block;
	width: 100px;
	max-width: 80%;
	height: auto;
	margin: 0;
}

@media (min-width: 992px) {
	.footer-logo-position {
		width: 155px;
	}

	.footer-logo {
		width: 124px;
	}
}

footer a,
footer a:link,
footer a:visited,
footer a:hover,
footer a:active {
	color: #FFFFFF;
}

@media screen and (max-width: 1200px) {
	.form-geslacht input[type=radio] + label {width: 48%;}
}

@media screen and (max-width: 992px) {
	.col-lg-offset-15 {margin-left: 0;}
	.p-l-5 {padding-left:15px;}
}
@media screen and (max-width: 767px) {
	.form-field label {top: 10px;}
}








/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	
}
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	
} 
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	
}
/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}

/* ================== TEKST BOVEN FORMULIER ================== */
.vis-form-intro {
	text-align: center;
}

.vis-form-intro .vis-form-heading {
	color: #27316A;
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 30px;
	margin-bottom: 20px;
}

.vis-form-intro .vis-form-subheading {
	max-width: 760px;
	margin: 0 auto 36px;
	color: #0E0E0E;
	font-family: 'superagothic-regular', Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 24px;
}

.vis-form-intro .vis-form-subheading strong {
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-weight: 700;
}

@media (max-width: 575px) {
	.vis-form-intro .vis-form-heading,
	.vis-form-intro .vis-form-subheading {
		text-align: left;
	}
}

@media (min-width: 576px) {
	.vis-form-intro .vis-form-heading,
	.vis-form-intro .vis-form-subheading {
		padding-left: 40px;
		padding-right: 40px;
	}
	.vis-form-intro .vis-form-heading {
		font-size: 25px;
		line-height: 27px;
	}
}

@media (min-width: 576px) and (max-width: 767px) {
	.vis-form-intro .vis-form-heading {
		padding-left: 70px;
		padding-right: 70px;
	}
}

@media (min-width: 768px) {
	.vis-form-intro .vis-form-heading,
	.vis-form-intro .vis-form-subheading {
		padding-left: 100px;
		padding-right: 100px;
	}
	.vis-form-intro .vis-form-heading {
		font-size: 34px;
		line-height: 36px;
	}
}

@media (min-width: 992px) {
	.vis-form-intro .vis-form-heading {
		padding-left: 170px;
		padding-right: 170px;
	}
	.vis-form-intro .vis-form-subheading {
		padding-left: 110px;
		padding-right: 110px;
	}
	.vis-form-intro .vis-form-heading {
		font-size: 40px;
		line-height: 42px;
	}
}

@media (min-width: 1200px) {
	.vis-form-intro .vis-form-heading {
		padding-left: 170px;
		padding-right: 170px;
	}
	.vis-form-intro .vis-form-subheading {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ================== FISHLOVERS MERKVERHAAL ================== */
.vis-brand-section {
	position: relative;
	z-index: 6;
	margin-top: 45px;
	padding-top: 24px;
	padding-bottom: 24px;
}

.vis-brand-copy-column,
.vis-brand-media-column {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.vis-brand-media-column {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.vis-brand-media-column {
	margin-bottom: 18px;
}

.vis-brand-copy,
.vis-brand-media {
	width: 100%;
	border-radius: 20px;
	-webkit-box-shadow: 0 12px 24px rgba(39, 49, 106, 0.12);
	box-shadow: 0 12px 24px rgba(39, 49, 106, 0.12);
}

.vis-brand-copy {
	padding: 30px 25px;
	background-color: #FFFFFF;
}

.vis-brand-copy h2 {
	margin: 0 0 18px;
	color: #27316A;
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
}

.vis-brand-copy p {
	margin: 0;
	color: #0E0E0E;
	font-family: 'superagothic-regular', Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
}

.vis-brand-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
}

.vis-brand-media iframe {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
	.vis-brand-section {
		margin-top: 70px;
		padding-top: 34px;
		padding-bottom: 34px;
	}

	.vis-brand-copy {
		padding: 42px;
	}

	.vis-brand-copy h2 {
		font-size: 32px;
	}

}

@media (min-width: 992px) {
	.vis-brand-media-column {
		margin-bottom: 0;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
	}

	.vis-brand-media {
		width: 100%;
		height: 100%;
		min-height: 100%;
		aspect-ratio: auto;
	}

}

/* ================== FISHLOVERS USP'S ================== */
.vis-usp-section {
	position: relative;
	z-index: 6;
	margin-top: 36px;
}

.vis-usp-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}

.vis-usp-icon-slot {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 60px;
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
}

.vis-usp-icon {
	display: block;
	width: 60px;
	height: 60px;
	max-height: 60px;
}

.vis-usp-section .row > div:nth-child(1) .vis-usp-icon,
.vis-usp-section .row > div:nth-child(3) .vis-usp-icon {
	width: 48px;
	height: 48px;
	max-height: 48px;
}

.vis-usp-item p {
	margin: 0;
	color: #0E0E0E;
	font-family: 'superagothic-regular', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	white-space: nowrap;
}

@media (min-width: 576px) {
	.vis-usp-item {
		gap: 14px;
	}

	.vis-usp-item p {
		font-size: 16px;
		line-height: 24px;
	}
}

@media (min-width: 768px) {
	.vis-usp-section {
		margin-top: 50px;
	}
}

@media (min-width: 1200px) {
	.vis-usp-item {
		margin-bottom: 0;
	}

	.vis-usp-section .col-xl-3 .vis-usp-item {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}

@media (min-width: 1200px) {
	.vis-usp-item p {
		font-size: 16px;
		line-height: 24px;
	}
}

/* ================== TERUG NAAR HET SPEL ================== */
.playbutton {
	position: relative;
	z-index: 6;
	padding: 48px 0 45px;
}

.playbutton-link {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: #f26f62;
	text-decoration: none;
}

.playbutton-icon {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 22px;
	background-color: #f26f62;
	border-radius: 50%;
	-webkit-animation: playbuttonJump 2.4s ease-in-out infinite;
	animation: playbuttonJump 2.4s ease-in-out infinite;
	-webkit-transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
	transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
	transition: background-color 0.2s ease, transform 0.2s ease;
	transition: background-color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
}

.playbutton-icon img {
	display: block;
	width: 22px;
	height: 24px;
}

.playbutton-text {
	font-family: 'superagothic-bold', Helvetica, Arial, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.playbutton-link:hover,
.playbutton-link:focus {
	color: #f26f62;
	text-decoration: none;
}

.playbutton-link:hover .playbutton-icon,
.playbutton-link:focus .playbutton-icon {
	background-color: #e65f53;
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
	-webkit-transform: translateY(-3px);
	transform: translateY(-3px);
}

@-webkit-keyframes playbuttonJump {
	0%, 72%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	82% {
		-webkit-transform: translateY(-8px);
		transform: translateY(-8px);
	}
	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	95% {
		-webkit-transform: translateY(-3px);
		transform: translateY(-3px);
	}
}

@keyframes playbuttonJump {
	0%, 72%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	82% {
		-webkit-transform: translateY(-8px);
		transform: translateY(-8px);
	}
	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	95% {
		-webkit-transform: translateY(-3px);
		transform: translateY(-3px);
	}
}

@media (min-width: 768px) {
	.playbutton {
		padding-top: 60px;
		padding-bottom: 70px;
	}

	.playbutton-text {
		font-size: 32px;
	}
}