*, *::before, *::after { box-sizing:border-box; }

@keyframes OpacityFadeIn {
	from { opacity:0; } 
	to { opacity:1; }
}

html {
width:auto;
height:100%;
font-size:16px;
overflow-x:hidden;
scroll-behavior:smooth;
scroll-padding:2rem;
scroll-snap-type:x mandatory;
scrollbar-gutter:stable;
}

body {
/* BEPAAL SITEFONT IN CMS SETTINGS */
width:auto;
height:100%;
color:var(--maincolor);
font-weight:400;
line-height:1.4;
padding:0;
margin:0;
background-color:var(--bodybgcolor);
background-image:var(--bodybgimage);
background-repeat: no-repeat;
background-attachment: fixed;
}

.scrollbar::-webkit-scrollbar {
width:10px;
}
.scrollbar::-webkit-scrollbar-track {
background:rgb(0 0 0 / .2);
border:4px solid rgb(255 255 255);
}
.scrollbar::-webkit-scrollbar-thumb {
background:rgb(0 0 0);
border-radius:8px;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background:var(--alertcolorhover);
cursor:grabbing;
}

.superuser {
color:rgb(73, 160, 248, 1);
background-color:rgb(73, 160, 248, 0.1) !important;
}
.offline-preview {
opacity:0.5 !important;
}
.offline-preview:hover {
opacity:1 !important;
}
a.previewmelding {
position:fixed;
top:0.5rem;
left:0.5rem;
width:auto;
height:auto;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
color:rgb(0 0 0);
font-size:0.6rem;
line-height:1.5;
text-align:center;
text-decoration:none;
background-color:rgb(255 255 255 / .8);
padding:10px;
box-shadow:0 0 4px rgb(135 135 135);
z-index:100000;
}
a.previewmelding:hover {
box-shadow:0 0 4px rgb(255 0 0);
text-decoration:none;
}
.bekijk-knop {
position:fixed;
top:1rem;
right:1rem;
width:2rem;
height:auto;
padding:0.25rem;
border-radius:0.25rem;
background-color:rgb(255 255 255 / .8);
box-shadow:0 0 3px rgb(0 0 0 / .9);
display:block;
z-index:1000;
}
.bekijk-knop:hover {
box-shadow:0 0 4px rgb(225 0 0);
}
.bekijk-knop-setting {
position:absolute;
top:0rem;
left:100%;
width:1.5rem;
}
.bekijk-knop-media {
position:absolute;
top:0.5rem;
left:calc(100% - 2rem);
width:1.5rem;
}
.bekijk-knop img {
width:90%;
height:auto;
margin:auto;
display:block;
}

.mobile {
display:none !important;
}
@media screen and (max-width: 900px) {
	.mobile {
	display:block !important;
	}
}
.desktop {
display:block !important;
}
@media screen and (max-width: 900px) {
	.desktop {
	display:none !important;
	}
}

.clear {
width:100%;
font-size:0.01em;
line-height:0.01;
float:none;
clear:both;
}

.flexbox, .flexbox-row {
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:flex-start;
align-content:baseline;
justify-content:flex-start;
}
@media screen and (max-width:900px) {
	.flexbox {
	flex-direction:column;
	}
	.flexbox-row {
	flex-direction:row;
	}
}
.flexbreak {
flex-basis:100%;
width:0;
height:0;
}

.skip-to-main {
position:absolute;
top:-30px;
background:rgb(255 255 255 / .8);
height:30px;
padding:8px;
transform:translateY(-100%);
transition:transform 0.3s;
}
.skip-to-main:focus {
top:0;
}

.sitewidth {
/* min-width/max-width zie head.php */
margin:0 auto;
padding:0 var(--sitepadding);
}

main {
position:relative;
width:auto;
height:auto;
padding:0;
margin-top:var(--headerboxheight);
display:block;
z-index:0;
}
@media screen and (max-width: 900px) {
	main {
	margin-top:var(--headerboxheight-mobile);
	}
}
/* anchor link offset */
main:target:before {
content:"";
display:block;
height:100px;
margin:-100px 0 0;
}
.main_min_height {
min-height:50dvh;
}

.maintop {
position:relative;
width:auto;
height:auto;
font-size:0.8em;
line-height:2;
padding:0.5rem var(--sitepadding);
background-color:var(--mainbgcolor);
background-image:var(--mainbgimage);
animation:500ms ease 0s normal forwards 1 OpacityFadeIn;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:baseline;
align-content:flex-start;
justify-content:space-between;
z-index:5;
}
@media screen and (max-width: 900px) {
	.maintop {
	max-width:calc(100% - 10px) !important;
	padding:0.5rem var(--sitepadding-mobile);
	font-size:0.7em;
	flex-direction:column;
	gap:1rem;
	}
}
.maintop div:last-child {
text-align:right;
margin:0 0 0 auto;
}
.progressbar {
position:absolute;
bottom:0.5rem;
left:var(--sitepadding);
right:var(--sitepadding);
width:auto;
height:2px;
text-align:left;
background:var(--alertcolor);
}
.winkelwagen {
width:100%;
}
.winkelwagen:first-letter { text-transform:capitalize; }

section {
position:relative;
width:auto;
height:auto;
padding:0;
margin:0;
background-color:var(--mainbgcolor);
background-image:var(--mainbgimage);
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:flex-start;
align-content:flex-start;
justify-content:flex-start;
z-index:2;
}

.mediabox {
position:relative;
padding:0;
margin:0;
flex:0 0 auto;
align-self:stretch;
display:flex;
}
@media screen and (max-width: 900px) {
	.mediabox {
	align-self:auto;
	}
}

.filesbox {
max-height:100%;
max-width:100%;
display:flex;
align-items:baseline;
gap:1rem;
}
.filebox {
position:relative;
width:100%;
height:100%;
object-fit:cover;
margin:0;
display:block;
overflow:hidden;
}
@media screen and (max-width: 900px) {
	.filebox[style] {
	width:100% !important;
	height:auto !important;
	}
}
.filebox .file-img {
position:relative;
width:100%;
height:100%;
object-fit:cover;
display:block;
z-index:1;
transition:all 0.5s ease 0s;
}
.filebox video {
margin:0 auto;
display:block;
}
.filebox:hover .file-img {
transform:scale(1.05);
}

.fileboxtext {
position:absolute;
inset:0;
width:100%;
height:auto;
display:flex;
z-index:2;
}

.tekstbox {
position:relative;
margin:0 auto;
padding:0;
display:block;
}
@media screen and (max-width: 900px) {
	.tekstbox {
	max-width:100%;
	padding:0 1rem;
	}
}
.tekstbox img {
margin-bottom:0.5rem;
}

iframe {
padding:0;
margin:2rem 0;
background-color:transparent;
border:0 none transparent;
overflow:hidden;
}

img {
max-width:100%;
height:auto;
font-style:italic;
border:none;
}

ul {
list-style-position:outside;
padding:0;
margin:0.5rem 0 0 2rem;
}
li {
font-size:1em;
line-height:1.5;
}
@media screen and (max-width: 900px) {
	li { font-size:1em; }
}
li:before {
content: "";
}

table {
width:100%;
height:auto;
margin:0;
border-collapse:collapse;
display:block;
}
th {
}
tr {
}
td {
width:auto;
min-width:50px;
height:auto;
font-size:1em;
white-space:nowrap;
padding:5px 2px 5px 2px;
text-align:left;
vertical-align:baseline;
border:none;
}
@media screen and (max-width: 900px) {
	td {
	white-space:normal;
	}
}

input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea {
width:100%;
height:auto;
color:rgb(0 0 0);
font-size:1.2em;
padding:6px;
margin:0.25rem 0;
border:1px solid var(--inputbordercolor);
border-radius:5px;
background-color:rgb(255 255 255);
}
input[type="checkbox"], input[type="radio"] {
width:auto;
height:auto;
font-size:1em;
margin:0 0.25rem 0 0;;
}
label {
color:var(--maincolor);
}
:hover + label {
color:var(--maincolorhover);
cursor:pointer;
}
:checked + label {
color:var(--maincolorhover);
cursor:pointer;
}

input:hover, input:focus, textarea:hover, textarea:focus {
border:1px solid var(--inputbordercolorhover);
transition:all .5s ease 0s;
}
::placeholder {
color:var(--placeholdercolor);
}
select {
font-size:1em;
vertical-align:baseline;
}
/* honeypot */
.important, #important {
position:absolute;
top:0;
left:0;
height:0;
width:0;
opacity:0;
z-index:-1;
border:none;
}

.button {
position:relative;
width:auto;
max-width:100%;
height:auto;
color:var(--buttoncolor) !important;
text-shadow:1px 1px rgb(0 0 0 / .1);
font-size:1em;
line-height:1;
text-decoration:none;
text-align:center;
text-transform:uppercase;
white-space:pre-wrap;
letter-spacing:1px;
padding:0.6rem 0.4rem 0.5rem 0.6rem;
margin:0;
background:var(--buttonbgcolor);
background-image:var(--buttonbgimage);
border:none;
border-radius:6px;
cursor:pointer;
display:block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
transition:all .5s ease 0s;
}
a.button {
color:var(--buttoncolor);
text-decoration:none;
}
a.button:link {
color:var(--buttoncolor);
text-decoration:none;
}
a.button:active {
color:var(--buttoncolor);
text-decoration:none;
}
a.button:visited {
color:var(--buttoncolor);
text-decoration:none;
}
.button:hover {
text-decoration:none;
color:var(--buttoncolorhover) !important;
background:var(--buttonbgcolorhover);
background-image:var(--buttonbgimagehover);
}

.buttonklein {
font-size:0.8em;
text-transform:none;
padding:3px 6px 3px 8px;
}
.textbutton {
position:relative;
width:auto;
height:auto;
color:var(--maincolor);
text-shadow:none;
font-size:1em;
background:transparent;
border:none;
padding:0;
margin:0;
transition:all .5s ease 0s;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
transition:all .5s ease 0s;
}
.textbutton:hover {
color:var(--maincolorhover);
text-shadow:none;
background:none;
cursor:pointer;
}

.soundbutton {
width:2rem;
height:2rem;
background:transparent;
border:none;
background-image:url("../graphics/sound-off.png");
background-position:center;
background-size:2rem 2rem;
background-repeat:no-repeat;
}
.soundbutton:hover, .soundbutton-on {
background-image:url("../graphics/sound-on.png");
cursor:pointer;
}

.terug {
text-align:left;
display:block;
}
.pijl {
position:relative;
width:auto;
height:auto;
font-size:0.8em;
line-height:1.2;
text-decoration:none;
vertical-align:baseline;
border:none;
background:none;
display:inline-block;
}
.pijlklein {
top:1px;
font-size:0.8em;
}
.pijlmini {
top:1px;
font-size:0.6em;
}
.pijldown {
font-size:1em;
transform:rotate(90deg);
}

/* pop up */
.rechtsboven {
position:absolute;
top:5px;
right:10px;
font-weight:400;
z-index:1000;
}
.rechtsonder {
position:absolute;
bottom:10px;
right:10px;
font-weight:400;
z-index:1000;
}
.linksboven {
position:absolute;
top:5px;
left:10px;
font-weight:400;
z-index:1000;
}
.linksonder {
position:absolute;
bottom:10px;
left:10px;
font-weight:400;
z-index:1000;
}
.rechtsboven:hover, .linksonder:hover {
cursor:pointer;
}

.cookiesmelding {
position:relative;
width:100%;
height:auto;
text-align:center;
padding:0.5rem 2rem;
background:rgb(255 255 255 / .8);
display:block;
}

.toppijl {
color:var(--alertcolor);
font-size:2em;
line-height:1;
text-decoration:none;
vertical-align:baseline;
transform:rotate(-90deg);
transition:all .5s ease 0s;
display:inline-block;
}
.toppijl:hover {
color:var(--alertcolorhover);
text-decoration:none;
cursor:pointer;
}