@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;500&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%; }
/* Removes list-style form lists */
ol, ul { list-style: none; }
/* BOX MODEL */
* { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }




html { text-align: center; background: #FEFEFE; width: 100%; height: 100%; }

body { 
	position: relative;
	margin: 0 auto;
	width: 72%; height: 100%;
	color: #000000;
	text-align: center;
	font-family: "Raleway", sans-serif;
	font-weight: 300; 
	font-size: 14px; /* 1em */
	line-height: 1.35;
}


/* KLEUREN & FONTS */
h1 { font-weight: 500; font-size: 2.4em; padding-bottom: 30px; }
h2 { font-weight: 500; font-size: 1.1em; padding-bottom: 3px; }
	h2.kleiner { font-size: 0.9em; }
h3 { font-weight: 600; padding-top: 2px; padding-bottom: 3px; }
p { padding-bottom: 14px; }
	p.kleiner, span.kleiner, td.kleiner { font-size: 0.8em; /*line-height: 1.1em !important;*/ }
	p.geenpad { padding-bottom: 0; }
p.dun { font-weight: 100; }
p a { color: #36646D; }
p a:hover, p a:active { color: #36646D; }
.strong { font-weight: 500; }

header { height: 122px; width: 100%; }
.container-pag header { height: 255px; }

table { font-size: 1em; }
.prijzentabel { max-width: 525px; }
.prijzentabel td { padding-right: 10px; padding-bottom: 4px; vertical-align: top; }
.prijzentabel td.kleiner { font-size: 0.8em; line-height: 0.9 !important; padding-bottom: 6px; }

.clear { clear: both; float: none; line-height: 0; height: 0;}
.rechtsintekst { width: 40%; height: auto; float: right; padding: 5px 5px 10px 25px; }
.groter { width: 50%; }
.vol { width: 100%; }
.tekstnaastimg { display: inline; float: left; width: 55%; }
	.tekstnaastimg.kleiner { width: 45%; }
.mobielonder { display: block; float: right; width: 40%; padding: 10px;  }
	.mobielonder.groter { width: 50%; }
.mobielonder img { width: 100%; height: auto; }
.welmob { display: block; }
.kinder { display: none; }
.welsub { display: block !important; }
.tekstops { list-style-type: circle; padding-left: 15px; padding-bottom: 17px; }
.tekstops li { line-height: 1.1; padding-top: 2px; }

.nude, .ronude:hover { color: #228c73; }
.grijs, .rogrijs:hover { color: #64666B; }
.beige, .robeige:hover { color: #A49784; }
.oker, .rooker:hover { color: #D1A638; }
.droze, .rodroze:hover { color: #A3356D; }
.roze, .roroze:hover { color: #D44D73; }
.rood, .rorood:hover { color: #CB3F36; }
.drood, .rodrood:hover { color: #972937; }
.mauve, .romauve:hover { color: #723C5B; }
.oranje, .rooranje:hover { color: #D55655; }
.paars, .ropaars:hover { color: #785093; }
.dpaars, .rodpaars:hover { color: #3C2130; }
.blauw, .roblauw:hover { color: #09599C; }
.dblauw, .rodblauw:hover { color: #2E3786; }
.flesgroen, .roflesgroen:hover { color: #36646D; }
.wit { color: #FFF; }

.bg-nude div, .knp-nude div { background: #228c73; }
.bg-grijs div, .knp-grijs div { background: #64666B; }
.bg-beige div, .knp-beige div { background: #A49784; }
.bg-oker div, .knp-oker div { background: #D1A638; }
.bg-droze div, .knp-droze div { background: #A3356D; }
.bg-roze div, .knp-roze div { background: #D44D73; }
.bg-rood, .knp-rood div { background: #CB3F36; }
.bg-drood, .knp-drood div { background: #972937; }
.bg-oranje div, .knp-oranje div { background: #D55655; }
.bg-paars div, .knp-paars div { background: #785093; }
.bg-dpaars div, .knp-dpaars div { background: #3C2130; }
.bg-blauw div, .knp-blauw div { background: #09599C; }
.bg-dblauw div, .knp-dblauw div { background: #2E3786; }
.bg-flesgroen div, .knp-flesgroen div { background: #36646D; }



.container { 
	display: block; position: relative;
	width: 100%; min-height: 100%; height: auto;
	background: #FFFFFF;	 
	-webkit-box-shadow: 2px 2px 15px 3px rgba(111,111,112,0.4);
	-moz-box-shadow: 2px 2px 15px 3px rgba(111,111,112,0.4);
	box-shadow: 2px 2px 15px 3px rgba(111,111,112,0.4);
}

/* ADRES */
#adres { display: none; position: absolute; top: 15px; right: 95px; text-align: right; z-index: 90; }
#adres p { font-size: 0.7em; color: #BE3671; }
#adres a { color: #BE3671; text-decoration: none; }
#adres a:hover { color: #000; /*text-decoration: underline !important; */}

/* LOGO */
#logo { position: absolute; top: 12px; left: 35px; width: 233px; height: 233px; 
	border-radius: 50%; text-indent: -999px; overflow: hidden;
	background: url('../images/logo-laklak@2x.png') no-repeat; background-size: 100% auto; 
	-webkit-box-shadow: 5px 5px 15px 3px rgba(111,111,112,0.4);
	-moz-box-shadow: 5px 5px 15px 3px rgba(111,111,112,0.4);
	box-shadow: 5px 5px 15px 3px rgba(111,111,112,0.4);
	z-index: 2001;
}

/* NAV ALGEMEEN */
.navul { position: absolute; z-index: 1999; }
.navulhome { right: 5px; top: 75px; }
.navulpag { top: 270px; left: 35px; width: 170px; text-align: left; }
.navul li { display: block; font-weight: 300; font-size: 0.85em; text-transform: uppercase; margin-right: 12px; margin-bottom: 6px; }
.navulhome li { position: relative; float: left; }

/* NAVKNOPPEN INVULLING */
.navul li div { position: relative; display: inline-block; padding: 7px 10px 6px; border-radius: 7px; }
.navul li a { position: relative; display: inline; text-decoration: none; color: #FFF; }
.navul li a div { transition: background-color 0.1s ease-out; }
.navul li a:hover div, .navul li.actief div { background: #FFF; padding: 5px 8px 4px; }


.knp-nude a:hover div,
	.knp-nude.actief div 	{ border: 2px solid #228c73; color: #228c73; transition: background-color 0.2s; }
.knp-grijs a:hover div,
	.knp-grijs.actief div 	{ border: 2px solid #64666B; color: #64666B; transition: background-color 0.2s; }
.knp-beige a:hover div,
	.knp-beige.actief div	{ border: 2px solid #A49784; color: #A49784; transition: background-color 0.2s; }
.knp-oker a:hover div,
	.knp-oker.actief div	{ border: 2px solid #D1A638; color: #D1A638; transition: background-color 0.2s; }
.knp-droze a:hover div,
	.knp-droze.actief div	{ border: 2px solid #A3356D; color: #A3356D; transition: background-color 0.2s; }
.knp-roze a:hover div,
	.knp-roze.actief div	{ border: 2px solid #D44D73; color: #D44D73; transition: background-color 0.2s; }
.knp-rood a:hover div,
	.knp-rood.actief div	{ border: 2px solid #CB3F36; color: #CB3F36; transition: background-color 0.2s; }
.knp-drood a:hover div,
	.knp-drood.actief div	{ border: 2px solid #972937; color: #972937; transition: background-color 0.2s; }
.knp-oranje a:hover div,
	.knp-oranje.actief div	{ border: 2px solid #D55655; color: #D55655; transition: background-color 0.2s; }
.knp-paars a:hover div,
	.knp-paars.actief div	{ border: 2px solid #785093; color: #785093; transition: background-color 0.2s; }
.knp-dpaars a:hover div,
	.knp-dpaars.actief div	{ border: 2px solid #3C2130; color: #3C2130; transition: background-color 0.2s; }
.knp-blauw a:hover div,
	.knp-blauw.actief div	{ border: 2px solid #09599C; color: #09599C; transition: background-color 0.2s; }
.knp-dblauw a:hover div,
	.knp-dblauw.actief div	{ border: 2px solid #2E3786; color: #2E3786; transition: background-color 0.2s; }
.knp-flesgroen a:hover div,
	.knp-flesgroen.actief div	{ border: 2px solid #36646D; color: #36646D; transition: background-color 0.2s; }

.navsubul { position: relative; margin: 6px 10px 10px 10px; }
.navsubul li { font-size: 0.75rem; }
.navul .navsubul a { color: #CB3F36; }
.navul .navsubul a:hover { text-decoration: underline; }
.navul .navsubul li.actief a { text-decoration: underline; }



.contentsubtekst { display: none; }



/* SOCIAL ICO'S */
#social-ul { position: absolute; top: 6px; right: 4px; width: 96px; z-index: 101; }
#social-ul li { float: left; /*margin-left: 0px;*/ width: 48px; height: 48px; }
#social-ul li div { width: 48px; height: 48px; overflow: hidden; text-indent: -999px; }
#social-ul li.social-fb div { background: url('../images/ico23-fb.png') no-repeat; background-size: 100% auto; }
#social-ul li.social-insta div { background: url('../images/ico23-insta.png') no-repeat; background-size: 100% auto; }
.container-home #social-ul li.social-fb div { background: url('../images/ico23-fb-home.png') no-repeat; background-size: 100% auto; }
.container-home #social-ul li.social-insta div { background: url('../images/ico23-insta-home.png') no-repeat; background-size: 100% auto; }
#social-ul li a:hover div, 
.container-home #social-ul li a:hover div { background-position: bottom; }


/* FOTOSTROOK & HEADER */
#fotostrook { display: block; position: relative; height: auto; width: 100%; line-height: 0; z-index: 2000; }
#fotostrook-ul { position: relative; overflow: hidden; }
#fotostrook-ul li { position: relative; float: left; width: 33.333%; line-height: 0; }
#fotostrook-ul li img { width: 100%; height: auto; aspect-ratio: 1; }

.fotostrooksmal { width: 100%; aspect-ratio: 5; overflow: hidden; }
.fotostrooksmal img { width: 100%; height: 100%; object-fit: cover; display: block; }



.afspraakknop { position: absolute; bottom: 1rem; width: 90%; margin-left: 5%; text-align: center; font-size: 1.4rem; font-weight: 100; line-height: normal; text-transform: uppercase; }

#fotoheader { position: relative; display: block; width: 100%; height: 240px; }
#foto { width: 100%; height: auto; max-height: 200px; overflow: hidden; margin: 0 auto; aspect-ratio: 216 / 43; }
#foto > img { width: 100%; height: auto; }



.ghost { 
	display: inline-block; 	
	text-align: center; padding: 6px 12px 6px 12px; color: #FFF; border: 2px solid #FFF; border-radius: 12px; 
	outline: none; text-decoration: none; transition: background-color 0.2s ease-out, color 0.2s ease-out; cursor: pointer;
	/*background-color: rgba(255, 255, 255, 0.5);*/
}
.ghost:hover, .ghost:active {
	background-color: rgba(255, 255, 255, 1); color: #3C2130; 
	transition: background-color 0.3s ease-in, color 0.3s ease-in;
}

/* AFSPRAAK KNOP */
#afspraak-link { font-weight: 300; font-size: 1.4em; text-transform: uppercase;
	line-height: normal; width: 400px; }
#afspraak-link a { outline: none; text-decoration: none; }
#afspraak-link a div { 
	display: inline-block;
	text-align: center;
	border: 2px solid #785093;
	background-color: #785093; color: #FFF; 
	border-radius: 12px; 
	padding: 6px 12px; 
    transition: background-color 0.2s; }
#afspraak-link a:hover div { 
	background-color: #FFFFFF;
	color: #785093; 
}

/* BOX KNOP */
#box-link { position: relative; left: 50%; margin-left: -200px; font-weight: 300; font-size: 1.4em; text-transform: uppercase;
	line-height: normal; width: 400px; }
#box-link a { outline: none; text-decoration: none; }
#box-link a div { 
	display: inline-block;
	text-align: center;
	border: 2px solid #77434A;
	background-color: #77434A; color: #FFF; 
	border-radius: 12px; 
	padding: 6px 12px; 
    transition: background-color 0.2s; }
#box-link a:hover div { background-color: #FFFFFF; color: #77434A; }




.bolhome { position: absolute; width: 150px; height: 150px; overflow: hidden; text-indent: -999px; }
.bolhome div { width: 100%; height: 100%; }


/* CONTENT VOOR NIEUWE SEO HOME */
.contenthome23 { position: relative; padding: 5.5rem 35px 40px 35px; text-align: left; }

.contenthome23 .nieuwskolom { position: relative; float: left; width: 190px; }
.contenthome23 .nieuwskolom .nieuws div { display: inline-block; padding: 10px; margin-bottom: 1rem; border-radius: 7px; }

.contenthome23 .nieuws h2 { font-weight: 300; font-size: 0.9em; text-transform: uppercase; line-height: 1; padding-bottom: 0px; }
.contenthome23 .nieuws h3 { font-weight: 100; font-size: 0.9em; text-transform: lowercase; padding-bottom: 0px; font-style: italic; }
.contenthome23 .nieuws p { margin-top: 1em; }
.contenthome23 .nieuws img { width: 100%; height: auto; margin-top: 1em; }
.contenthome23 .nieuws a { color: #FFF; }

.contenthome23 .seotekst1 { position: relative; float: right; width: calc(100% - 220px); }
.contenthome23 .seotekst1 div { padding: 6px 2rem 1rem; font-size: 1rem; line-height: 1.4; font-weight: 300; text-align: left; }
/* EINDE CONTENT VOOR NIEUWE SEO HOME */

.content26 { position: relative; padding: 3rem 10% 2rem 10%; text-align: left; }


/* CONTENT */
.content { position: relative; margin-top: 9px; padding: 0 35px 40px 35px; text-align: left; } 




#contenttekst { position: relative; width: 75%; float: right; }
#contentprijs { position: relative; width: 100%; float: right; }
.contentondertekst { padding: 0 35px 10px 35px; text-align: left; }
.contentonderkleurkaart { padding: 20px 0 20px 35px; text-align: left; max-width: 600px; }

.halfkolom { width: 46%; float: left; }
.halfkolom.links { padding-right: 4%; }
.halfkolom.rechts { padding-left: 4%; }

ol.kleuren { display: block; padding-left: 26px; list-style: none; overflow: hidden; counter-reset: numList; }
ol.kleuren li { margin-bottom: 6px; position: relative; }
ol.kleuren li:before { position: absolute; left: -26px; text-align: center; font-weight: 500; color: #FFF; line-height: 1.4em; 
	width: 18px; height: 18px; -moz-border-radius: 9px; border-radius: 9px; 
	counter-increment: numList; content: counter(numList)/*"."*/; }
ol.kleuren span { display: block; padding-top: 3px; }

ul.kleinekleuren { display: block; padding-left: 20px; list-style: none; overflow: hidden; }
ul.kleinekleuren li { margin-bottom: 6px; position: relative; }
ul.kleinekleuren li.eerste { margin-top: 6px; }
ul.kleinekleuren li:before { position: absolute; left: -20px; width: 12px; height: 12px; 
	-moz-border-radius: 9px; border-radius: 6px; content: " "; }
ul.kleinekleuren span { display: block; padding-top: 3px; }

li.kl1:before { background: #D15375; }
li.kl2:before { background: #7E3784; }
li.kl3:before { background: #46636B; }
li.kl4:before { background: #63646A; }
li.kl5:before { background: #663663; }
li.kl6:before { background: #A9296B; }
li.kl7:before { background: #CA4533; }
li.kl8:before { background: #98BEBF; }
li.kl9:before { background: #30285B; }
li.kl10:before { background: #D15375; }

ol.subnummers { list-style-position: outside; list-style-type: decimal }
ol.subnummers li { margin-bottom: 6px; position: relative; margin-left: 20px; }
ol.subnummers li.eerste { margin-top: 6px; }


#inspiratiediv { position: relative; width: 94%; margin-left: 3%; }
#inspiratiediv li { width: 32%; height: 0; padding-bottom: 32%; float: left; margin: 0 2% 2% 0; line-height: 0; overflow: hidden; }
#inspiratiediv li.derde { margin-right: 0; }
#inspiratiediv img { width: 100%; height: auto; }


/* GROTE SCHERMEN - AFSPRAAKKNOP */
@media screen and (max-width: 1350px ) {
	.welmob { display: none !important; }
}


/* VANAF GEEN 72% MEER, MAAR VAST ..PIXELS */
@media screen and (max-width: 1210px) {
	body { width: 871px; }
}


/* CONTENT IS 100%, GEEN SCHADUWRANDJE MEER */
@media screen and (max-width: 871px) {
	body { width: 100%; }
}

/* HIER IS HET ECHTE BREEKPUNT: */
@media screen and (max-width: 740px) {
	body { width: 100%; max-width: 480px; }
	header { height: 255px; }
	#logo { left: 15px; width: 198px; height: 198px; background-size: 100%; }
	.navul { top: 16px; right: 6px; left: inherit; text-align: right; }
	.navul li { float: none; margin-bottom: 6px; font-size: 0.8em; }
	.welmob { display: inline-block !important; }
	.kinder { display: inline-block !important; }
	.geenmob { display: none; }
	#social-ul { top: 210px; left: 8px; }
	#social-ul li { float: left; margin-left: 0px; margin-right: 0px; }
	#social-ul li.social-fb div { background: url('../images/ico23-fb-home.png') no-repeat; background-size: 100% auto; }
	#social-ul li.social-insta div { background: url('../images/ico23-insta-home.png') no-repeat; background-size: 100% auto; }
	
	#fotoheader img { display: none; }
	#fotostrook { }
	#fotostrook-ul li { width: 50%; }
	
	.fotostrooksmal { aspect-ratio: 3.33; }
	.fotostrooksmal img { width: 150%; height: 100%; }
	
	
	#fotobol { display: none; }
	#fotoknop { width: 300px; margin-left: -150px; top: 50%; margin-top: -15px; }
	
	
	.contenthome23 { padding-top: 4rem; }
	.contenthome23 .nieuwskolom { position: relative; float: none; width: 100%; }
	.contenthome23 .nieuwskolom .nieuws { float: left; width: 47%; }
	.contenthome23 .bg-nieuws1 { margin-right: 6%; }
	.contenthome23 .geenfloat { float: none; clear: both; }
	
	.contenthome23 .seotekst1 { float: none; width: 100%; }
	.contenthome23 .seotekst1 div { padding: 1.5rem 10px; }
	
	.content { width: 100%; padding: 0; margin-top: -4px; }
	
	#contenttekst, #contentprijs { float: none; width: 100%; }
	#contenttekst>div, #contentprijs>div { padding: 15px 15px 45px 15px; }
	.contentonderkleurkaart>div { padding: 30px 15px 45px 15px; }
	.contentsubtekst { display: block; }
	
	h1 { font-size: 1.7rem; padding-bottom: 20px; }
	.rechtsintekst { width: 60%; float: none; margin-left: 20%; padding: 0px; margin-bottom: 1em; }
	
	.tekstnaastimg, .tekstnaastimg.kleiner { float: none; width: 100%; }
	.mobielonder, .mobielonder.groter { float: none; width: 100%; padding: 0px; margin-top: 1em; }
	
	#inspiratiediv { position: relative; width: 93%; margin-left: 3.5%; }
	#inspiratiediv li { width: 48%; float: left; padding-bottom: 48%; margin: 0 4% 4% 0; line-height: 0; }	
	#inspiratiediv li.derde { margin-right: 4%; }
	#inspiratiediv li.tweede { margin-right: 0 !important; }
}

@media screen and (max-width: 520px) {
	.fotobol-home { width: 160px; height: 160px; margin-left: 60px; top: 352px; margin-top: 0; }
	.fotobol-home2 { width: 160px; height: 160px; margin-left: 20px; top: 232px; margin-top: 0; }
}
	
	
/* GEEN SCHADUW MEER */
@media screen and (max-width: 480px) {
	.container { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
	.bolhome { width: 120px; height: 120px; }
}

/* HOMENIEUWS VLAKJES ONDER ELKAAR */
@media screen and (max-width: 400px) {
	.contenthome23 .nieuwskolom .nieuws { float: none; width: 100%; max-width: 250px; }
	.contenthome23 .bg-nieuws1 { margin-right: 0%; }
	.contenthome23 .bg-nieuws2 { margin-left: calc(100% - 250px); }
	
	#logo { left: 15px; width: 168px; height: 168px; background-size: 100%; }
	#social-ul { top: 206px; left: 2px; }
	.rechtsintekst, .groter { width: 100%; margin-left: 0; }
	.halfkolom { width: 100%; padding: 0 !important; float: left; }
}



@media screen and (max-width: 320px) {
	.contenthome23 .bg-nieuws2 { margin-left: 0; }
}