/* IMPORT GOOGLE FONT LATO */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;700&display=swap');


/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { 
	margin: 0; padding: 0; 
}

/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 300; }

/* Removes list-style form lists */
ol, ul { list-style: none; }




html, body { width: 100%; height: 100%; margin: 0 auto; overflow: auto; overflow-x: hidden; }
body { 
	background: #FFF; 
	font-family: 'lato', sans-serif; 
	font-weight: 300; 
	font-size: 20px; 
	line-height: 1.2; 
	letter-spacing: 0.03125em; 
}
#container { margin: 0 auto; text-align: center;  }

#grid-container { position: relative; width: 80%; max-width: 460px; margin: calc(10vw) auto; margin-top: 0;}

#grid-container > div { 
	position: relative; 
	box-sizing: border-box; 
	width: 100%;
	height: calc(80vw);
	max-height: 460px;
	text-align: left;
	overflow: hidden; 
	/*border: 1px solid #F00;*/
}
#gid-container > div.laatste { margin-bottom: calc(10vw); }



/* FONTS, KLEUREN ETC */
h1 { font-size: 2.4rem; letter-spacing: 0.0625rem; font-weight: 400; margin-top: calc(50% - 1.5rem); text-align: center; text-transform: uppercase}
h2 { font-size: 1.6rem; letter-spacing: 0.0625rem; font-weight: 400; padding-bottom: 0.6rem; text-transform: uppercase; }
p { padding-bottom: 0.5rem; }
td { padding-bottom: 0; }
a { color: #000; text-decoration: none; cursor: pointer; }
a.onderstreept { text-decoration: underline; }
a:hover { color: #7C878E; text-decoration: underline; }
.klik { cursor: pointer; }
.grijs a:hover, .zwart a:hover { color: #F0C7C9; }

.wit { background: #FFF; }
.zwart { background: #000; color: #FFF; }
.grijs { background: #7C878E; color: #000; }
.roze { background: #F0C7C9; }
.rood { background: #E83129; }	
.ro-roze:hover { background: #F0C7C9; color: #000; }

.zwart a { color: #FFF; }


div.blokpad { padding: 1.4rem 1.7rem; text-align: left; }

.tekstops { list-style: outside; padding-left: 1rem; }
.tekstops li { list-style-type: disc; }
	
.metbeeld img, .metbeeld video { position: relative; width: 100%; height: 100%; }
video:focus { outline: none; }
.bol { position: absolute; top: 50%; left: 50%; width: 78%; height: 78%; margin-left: -39%; margin-top: -39%; border-radius: 50%; }
.bol h2 { font-size: 2em; text-align: center; margin-top: calc(50% - 0.6em); }
.bol h2.tweeregels { margin-top: calc(50% - 1.2em) !important; }

.overflowvisible { overflow: visible !important; }

/* MERKENLIJSTJES */
.merkenblok { font-size: 1.1em; position: absolute; top: 50%; left: 50%; margin-top: -6.6em; margin-left: -50%; height: 13.2em; width: 100%; }
.merkenlijst { width: 100%;}
.merkenlijst li { text-align: center; font-weight: 300; }






/* SOCIAL MEDIA ICO'S */
.socialico { position: relative; display: block; float: left; width: 54px; height: 54px; margin-left: -3px; margin-right: 6px; }
.socialico div { width: 100%; height: 100%; overflow: hidden; text-indent: -999px; }
.socialico-fb div { background: url("../images/icoFB2020grijs@2x.png") no-repeat; background-size: 100% auto; }
.socialico-insta div { background: url("../images/icoInsta2020grijs@2x.png") no-repeat; background-size: 100% auto; }
.socialico-kst div { background: url("../images/icoKST2020grijs@2x.png") no-repeat; background-size: 100% auto; }
.socialico a:hover div { background-position: bottom; }

/* SLIDESHOW */
.cycle-container { overflow: visible !important; }
.cycle-slideshow { width: 100%; height: 100%; }
.cycle-slideshow > div { width: 100%; height: 100%; box-sizing: border-box; }
.cycle-slideshow > div img { width: 100%; height: 100%; }
.cycle-knop { position: absolute; z-index: 2500; width: 54px; height: 54px; overflow: hidden; text-indent: -999px; cursor: pointer; }
.cycle-knop.prev { left: 0; margin-left: -54px; top: 50%; margin-top: -27px; background: url("../images/pijlprev@2x.png") no-repeat; background-size: 100% auto; }
.cycle-knop.next { right: 0; margin-right: -54px; top: 50%; margin-top: -27px; background: url("../images/pijlnext@2x.png") no-repeat; background-size: 100% auto; }
.cycle-knop:hover { background-position: bottom; }

/* IMG HIGHLIGHT UIT */
img,div {
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
	-webkit-tap-highlight-color:transparent;
}
img,div::-moz-selection { background-color: transparent; }
img,div::selection { background-color: transparent; }


/* FORMULIEREN */
form { width: 100%; height: 100%; }
label { display: block; padding-bottom: 0.2em; }
.nbinput { width: 100%;  font-size: 1em; box-sizing: border-box; padding: 4px 0 4px 4px; border: none; }
.nbsubmit { font-size: 1.6rem; letter-spacing: 0.0625rem; color: #FFF; text-transform: uppercase; border: none; background: none; cursor: pointer; }
.nbsubmit:hover { color: #F0C7C9; }

/* AFSPRAAKTABEL */
.afspraaktabel { /*width: 100%; max-width: 300px;*/ border: 0; border-spacing: 0; }
.afspraaktabel th { padding: 0.1em; text-align: center; text-transform: uppercase; font-size: 0.8em; font-weight: 700; border-bottom: 1px solid #000; }
.afspraaktabel th.links { text-align: left; }
.afspraaktabel td { padding: 0.1em 0.2em; text-align: center; }
.afspraaktabel td.klikza { display: none; }
.afspraaktabel td.klikgeenza { display: table-cell; }
.afspraaktabel td.klik { cursor: pointer; }
.afspraaktabel td.klik:hover { background: #3E4447; color: #FFF; }
.afspraaktabel td.actief { background: #3E4447; color: #FFF; }
.afspraaktabel td.actief a { color: #FFF; }
.afspraaktabel td.vaag { color: #3E4447; }
.afspraaktabel a:hover { color: #FFF; text-decoration: none; }
.afspraaktabel td.actief { background: #3E4447; color: #FFF; }
#tijdentabel { display: none; }
#afspraakknop {display: none;  }





/* GROTER */
@media screen and (min-width: 515px) {
	body { font-size: 24px !important; }
}


/* KLEINER */
@media screen and (max-width: 450px) {
	body { font-size: 18px !important; }
	.socialico { width: 44px; height: 44px; }
	.cycle-knop { width: 44px; height: 44px; }
	.cycle-knop.prev { margin-left: -44px; margin-top: -22px; }
	.cycle-knop.next { margin-right: -44px; margin-top: -22px; }
	
}
@media screen and (max-width: 380px) {
	body { font-size: 16px !important; }
	h2 { font-size: 1.3rem; padding-bottom: 0.3rem; }
	.socialico { width: 34px; height: 34px; }
	.cycle-knop { width: 34px; height: 34px; }
	.cycle-knop.prev { margin-left: -34px; margin-top: -17px; }
	.cycle-knop.next { margin-right: -34px; margin-top: -17px; }
	.teveel { display: none; }
}
@media screen and (max-width: 360px) {
	body { font-size: 14px !important; }
}
@media screen and (max-width: 300px) {
	body { font-size: 12px !important; }
}