@charset "utf-8";

/* ===== Algemene css ===== */
html{box-sizing:border-box;}
*.*::before, *::after {box-sizing:inherit;}
html{font-size:100%; line-heigth: 1.5; -webkit-text-size-adjust:100%; text-size-adjust: 100%; scrollbar-gutter: stable;}
body {margin:0; font-family: sans-serif;color: #222; background-color: #F4F4F4;}

img, picture, video, canvas, svg {display:block; max-width:100%;height:auto;}

button, input, select, textarea {font:inherit;color:inherit;}

a:link{color:#000;text-decoration:none;}
a:visited{text-decoration:none;color: black;outline:0px;}
a:hover{text-decoration:none;color:#00F; outline:0px;}
a:active{text-decoration:none;outline:0px;}
a:focus-visible{outline:0px solid; outline-offset: 0px}

[hidden]{display:none !important;}

ul, ol{text-align:left;margin: 0 0 1rem;padding-left:1em;}
nav ul, nav ol{list-style:none;list-style-image:none;margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0;}
td{vertical-align:top;}

hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding: 0;}
small{font-size:85%;}
sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline; }
sup{top:-0.5em;}
sub{bottom:-0.25em;}

@media print{*{background:transparent !important;color: #000 !important;text-shadow:none ! !important; box-shadow:none !important;}
a, a:visited{text-decoration:underline;}

pre, blockquote{border:1px solid #999;page-break-inside:avoid;}
thead{display:table-header-group;}
tr, img{page-break-inside: avoid;}

@page{margin:0.5cm;}
img{max-width: 100% !important;}
p, h2, h3 {orphans:3;widows:3;vertical-align:top;}
h2, h3{page-break-after:avoid;}
}

.hidden{display:none !important;visibility:hidden;}
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}
.invisible{visibility:hidden;}

h3 {font-size: 16px}

/* ===== Flow-root ===== */
.flow-root {display: flow-root; width:100%;margin:auto;background-color: #FFF;}

/* ===== Logo, welkom (header) ===== */

strong {color: #FFF;}
h3.title2 {color: #FFF;}

@media only screen and (max-width: 600px) {
.wrapper-head2, #header2 {float:left;clear:both;width:100%; background-color:#DBDBDB;}
.img-l {width:60%;height:auto: display: block;}
.img-w{width:100%; display:none;}
.img-w2{width:100%;height:auto;}
#welkom {float:left;width:40%; font-size:12px;font-weight:normal;font-style:normal;text-align:left; padding-left: 1%; padding-top: 4%;position:absolute;top: 0;background-color: rgba(0,0,0,0); color:#009;}
.div-m {margin-left:58%; margin-top:10%; width:40%; position:absolute;z-index:2;font-size:12px; text-align:left;background:rgba(0,153,255,.7);padding:0.5%;padding-bottom:0.5%;color:#FFF;}
h3.title2 {color:#00F}
h1.title2 {color:#009;font-size:12px;}

}

@media only screen and (min-width: 600px) and (max-width: 768px) {
.wrapper-head2, #header2 {float:left;clear:both;width:100%; background-color:#DBDBDB;}
.img-l {width:70%; height:auto; display:block;}
.img-w {width:100%;display:none;}
.img-w2{width:100%;height:auto;}
#welkom {float:left;clear:none;width:40%; font-size:14px;font-weight: normal;font-style: normal;text-align:left;padding-left:2%;padding-top:6%; position:absolute;z-index:1;background-color: rgba(255,255,255,0);position:absolute;top: 0; color:#009;}
.div-m {margin-left:58%; margin-top:20%; width:40%; position:absolute;z-index:2;font-size:14px; text-align:left;background:rgba(0,153,255,.7);padding:0.5%;padding-bottom:0.5%;color:#FFF;}

h1.title2 {font-size:16px;color:#009;}
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
.wrapper-head2, #header2 {float:left;clear:both;width:100%; background-color:#DBDBDB;}
.img-l {width:45%; height:auto; display:block;}
.img-w {width:100%;height:auto;}
.img-w2 {display:none;}
#welkom {float:left;width:38%;font-size:12px;font-weight: normal;font-style: normal;text-align:left;position:absolute;z-index:1;padding-left:0.5%;background-color: rgba(0,0,0,0);top: 0;color:#009;}
.div-m {margin-left:62%; margin-top:5%; width:35%; position:absolute;z-index:2;font-size:14px; text-align:left;background:rgba(0,153,255,.7);padding:0.5%;padding-bottom:0.5%;color:#FFF;}
h1.title2 {color:#009;font-size:14px;}	
}

@media only screen and (min-width: 992px) {
.wrapper-head2, #header2 {float:left;clear:both;width:100%; background-color:#DBDBDB;}
.img-l {width:45%; height:auto;display: block;}
.img-w {width:100%; display:block; float:left;height:auto;}
.img-w2 {display:none;}
#welkom {float:left;clear:none;width:32%;color: #03C; margin-bottom: 1.5%;font-size:14px;font-weight: normal;font-style: normal;text-align:left;position:absolute;z-index:1;padding-left:1.25%;padding-right:1.25%;margin-top:1%;background-color: rgba(0,0,0,0);}
h1.title2 {color: #009; font-size:18px;}
.div-m {margin-left:75%; margin-top:7%; width:20%; position:absolute;z-index:2;font-size:16px; text-align:left;background:rgba(0,153,255,.7);padding:0.5%;padding-bottom:0.5%;color:#FFF;}
}


/* ===== section: zoekfunctie, pedicure lijst ===== */
.hero{padding:40px 20px; text-align:center;background-color: #FFF;}
.hero input {margin-top:20px; padding: 12px; width:100%; max-width:400px;border: 1px solid #ccc; border-radius: 4px;}

.pedicure-list {display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));gap:20px; padding:20px 20px;}
.card {background-color:#FFF; padding:20px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,0.08);}
.card h3{margin-top:0;}
.btn {display:inline-block; margin-top:10px; margin-left:25%; padding:10px 16px; background-color:#4CAF50; color:#FFF; text-decoration:none; border-radius:4px;}
.btn:hover {background-color:#43a047;}

@media only screen and (max-width: 600px) {
.hero{font-size:12px;}
.btn {margin-left:35%;}
}

/* ===== 2, 3 en 4 kolommen en main css ===== */
main {background-color: rgba(0,153,255,0.5);}
.colnog {display:flex; flex-wrap: wrap; width:100%;background-color: #FFF; box-sizing:border-box;}
.colwol {display:flex; flex-wrap: wrap; width:100%;background-color: rgba(0,153,255,0.5); gap: 0.25%; padding: 0.25%; box-sizing:border-box;}
.wolcol {background-color: #FFF;text-align:left;color: #000;font-size:14px; flex: 0 0 40%;padding-left:8%;padding-right:2%}
.wolcol-1 strong {color:#009;}
.wolcol-1{background-color: #FFF;text-align:left;color: #000;font-size:14px; flex: 1;padding-left:0.5%;padding-right:0.5%;}
.wolcol-2{background-color: #FFF;text-align:left;color: #000;font-size:14px; flex: 0 0 40%;text-align:left;padding-left:2%;padding-right:2%;padding-bottom: 1%;}
.wolcol-3{background-color: #FFF;text-align:left;color: #000;font-size:14px; flex: 0 0 29.3333%;text-align:left;padding-left:2%;padding-right:2%;}
.wolcol-3 a {color: #00C;}
.img-wl, .img-c2 {width:100%;float:left;height:auto;padding-top:1%;}
h2.title2 {font-size: 16px; color: #FFF;}
h2.title, h3.title {font-size: 16px; color:#00C; text-align:center;}
.img-d {width:100%;height:auto;}
.img-x {width:90%; height:auto;}
.img-w3 {width:49%;float:left;height:auto;padding-top:1%;padding-right:1%;padding-bottom:0.5%;}
.img-tl {width:49%;float:left;height:auto;padding-top:1%;padding-right:1%;}
.div-wol {float:left; width:97%;text-align:left;clear:none;padding-left:.25%; padding-right:.25%;border-color:#00C;border-style: solid;font-size:14px}
.div-wol ul {padding:0%;margin:0%;}
.div-wol li {display:inline-block;margin-right:1.5%;}

.col2 {display:grid; align-items: stretch; background-color: rgba(0,153,255,0.5); grid-template-columns: 19.95% 29.95% 19.95% 29.95%; padding-bottom:0.25%; padding-right:0.10%;}
.pair {display: grid; grid-template-columns: 19.95% 29.95%; align-items: stretch;}
.col2-image {background-color: #FFF;width:100%;margin-left:2%;padding-top:8%;padding-left:1%;}
.col2-tekst {background-color: #FFF;padding-left:2%;padding-right:2%;text-align:left;font-size:14px;}
#myBtn-zvw{background-color:#FFF;font-size:14px;padding-left:5%;padding-right:5%;margin-right:2%;border-radius:12px;color:#00C;font-weight: bolder;margin-left:25%;border-style: groove;border-color: #09F;}

strong {font-size: 14px;}

@media only screen and (max-width: 600px) {
.wolcol {background-color: #FFF;text-align:left;color: #000;font-size:13px; flex: 0 0 96%;padding-left:2%;padding-right:2%;}
.wolcol-1, .wolcol-2 {background-color: #FFF;text-align:left;color: #000;flex-basis: 100%;margin-bottom: 0.5%; padding-left: 1%; padding-right:1%;}
.wolcol-2 {display:none;}
.wolcol-3 {flex-basis: 96%;}
.img-w3 {width:49%;float:left;height:auto;padding-top:1%;padding-right:1%;}
.col2,.pair {grid-template-columns: 1fr;background-color: rgba(0,153,255,0.5);}
.col2-image {margin-left:0.75%; margin-right:1%;padding-left:30%;width:68.5%;}
.col2-tekst {margin-left:0.75%;margin-right:0.75%; margin-bottom: 0.75%;padding-left:1%; padding-right:1%;background-color: #FFF;}
.img-x {width: 40%; height: auto;}
 }
 
@media only screen and (min-width: 600px) and (max-width: 768px) {
.wolcol{flex: 0 0 48%;background-color: #FFF;color:black;font-size:12px;padding-left:1%;padding-right:1%}
.wolcol-1{flex-basis:45%;background-color: #FFF;color:black;font-size:12px; padding-left: 1%; padding-right: 1%; margin-bottom:0.25%;} 
.wolcol-2, .div-wol{font-size:13px;}
.img-w3 {width:49%;float:left;height:auto;padding-top:1%;padding-right:1%;padding-bottom:10%;}
.img-tl {width:49%;float:left;height:auto;padding-top:1%;padding-right:1;padding-bottom:10%;}
.col2 {grid-template-columns: 40% 60%; background-color: rgba(0,153,255,0.5);}
.col2-image {height:auto; width:100%;background-color: #FFF;padding-top:5%;padding-left:1%;padding-right:1%;margin-bottom:0.40%;}
.col2-tekst {margin-right: 0.5%; margin-bottom:0.25%;padding-left:1%; padding-right:1%; background-color: #FFF;font-size:14px;}

strong{font-size:13px;}
 
 }
@media only screen and (min-width: 768px) and (max-width: 992px) {
.wolcol {background-color: #FFF;text-align:left;color: #000;font-size:14px; flex: 0 0 46%;padding-left:2%;padding-right:2%;}
.wolcol-1{flex-basis: 47%;background-color: #FFF;color:black;font-size:14px;padding-left:1%;padding-right:1%; margin-bottom:0.25%;}
.img-w3 {width:49%;float:left;height:auto;padding-top:1%;padding-right:1%;padding-bottom:10%;}
.img-tl {width:49%;float:left;height:auto;padding-top:1%;padding-right:1;padding-bottom:10%;} 
.wolcol-2, .div-wol{font-size:12px;}
.col2 {grid-template-columns: 40% 60%; background-color: rgba(0,153,255,0.5);}
.col2-image {height:auto; width:100%;background-color: #FFF;padding-top:5%%;padding-left:1%;padding-right:1%; padding-bottom:2%;margin-bottom:0.30%;}
.col2-tekst {margin-right: 0.5%; margin-bottom:0.25%;padding-left:1%; padding-right:1%; background-color: #FFF;font-size:14px;}
.img-x {width: 55%;}
 }

/* ====== contact, voorwaarden, privacy en disclaimer (footer) ====== */
address {text-decoration: none; font-style: normal;}
.colcontact {display:flex;flex-wrap: wrap; width:100%;}
.contactcol-1 {flex: 0 0 99%;background-color: #006;text-align:left;padding-left:1%;color:white;font-size:14px;}
.style-con:link {color:white}
.style-con:hover {color:white}

.mainelf {float:left;clear:both;width:100%;background-color: #F0FFFF;}
.rowelf {background-color:#DBDBDB; display: flex; flex-wrap: wrap; padding: 0 0 0;}
.columnelf {background-color: #F8F8F8; flex: 0 0 24%;padding-left:0.5%;padding-right:0.5%;}
.contentelf {padding:2%;text-align:center;background-color: #F8F8F8;}
.contentelf-2 {padding-top:3%;}
.contentelf-3 {padding-top:3%;}
.contentelf-4 {padding-left:30%;padding-top:1.75%;}
#h3elf {font-size:14px;text-align:center;}
.img-pv {width:40%;height:auto;padding-top:0.5%;}
.img-pc {width:37%;height:auto;padding-top:0.5%;}  
.img-l2 {width:60%;display:block;margin-left:auto;margin-right:auto;height:auto;}
.img-l3 {width:60%;float:center;height:auto;}
.imagetext {position:relative; align:center;font-size:14px;}
.centered {position: absolute; top: 72%;left: 30%;}
.ffc {font-size:48px;margin-left:45%;float:left;}
.ffc3 {font-size:48px;margin-left:45%;float:left;}

@media only screen and (max-width: 600px) {
.colcontact {background-color:#006;}
.contactcol-1 {flex: 0 0 96.5%;text-align:left;padding-left:3%;}

.mainelf {float:left;clear:both;width:100%;background-color: #003;}
.rowelf {background-color:#006; display: flex; flex-wrap: wrap; padding: 0 0 0;}
.columnelf {background-color: #F8F8F8; flex: 48%; margin: .25% .25% .25%}
.contentelf {padding:2%;text-align:center;background-color: #F8F8F8;}
.contentelf-2 {padding-top:15%;padding-bottom:1%;font-size: 11px;}
.contentelf-3 {padding-top:15%;padding-bottom:1%;font-size:10px;}
.contentelf-4 {padding-bottom:10.5%;padding-top:1%;}
.img-pv {width:52%;padding-top:0%;height:auto;padding-left:20%;}
.img-pc {width:40%;padding-top:8%;height:auto;} 
.imagetext {position:relative; text-align:center;color:black;font-family: inherit;font-size:11px;}
.centered {position: absolute; top: 72%;left: 25%;}
.ffc {font-size:48px;margin-left:40%;}
.ffc3 {font-size:48px;margin-left:40%;}
 }
@media only screen and (min-width: 600px) and (max-width: 768px) {
.contactcol-1 {flex: 0 0 98,5%; text-align:left;padding-left:1%;font-size:13px;}	
.columnelf {background-color: #F8F8F8; flex: 0 0 24%;padding-left:0.5%;padding-right:0.5%;}
.contentelf {padding:2%;text-align:center;background-color: #F8F8F8;}
.contentelf-2 {font-size:11px;padding-top:5%;padding-bottom:1%;}
.contentelf-3 {padding-top:5%;font-size:11px;padding-bottom:1%;}
.contentelf-4 {padding-top:5.25%;padding-bottom:1%;}
.img-pv {width:38%;height:auto;margin-top:1%;}
.img-pc {width:40%;height:auto;margin-top:1%;} 
.imagetext {position:relative; text-align:center;color:black;font-family: inherit;font-size:12px;}
.centered {position: absolute; top: 72%;left: 25%;}
.ffc {font-size:28px;padding-top:10%;}
.ffc3{font-size:28px;padding-top:10%;}
 }
@media only screen and (min-width: 768px) and (max-width: 992px) {
.contactcol-1 {flex: 0 0 98,5%; text-align:left;padding-left:1%;font-size:13px;}
.columnelf {background-color: #F8F8F8; flex: 0 0 24%;padding-left:0.5%;padding-right:0.5%;}
.contentelf {padding:2%;text-align:left;background-color: #F8F8F8;}
.contentelf-2 {padding-top:3%;font-size:11px;text-align:center;padding-top:14%;padding-bottom:12%;}
.contentelf-3 {padding-top:14%;font-size:11px;padding-bottom:14%;}
.contentelf-4 {padding-top:3%;padding-bottom:13%;}
.img-pv {width:38%;padding-top:6%;height:auto;}
.img-pc {width:40%;padding-top:6%;height:auto;} 
.imagetext {position:relative; text-align:center;color:black;font-family: inherit;font-size:11px;}
.centered {position: absolute; top: 72%;left: 25%;}
.ffc {font-size:48px;margin-left:40%;}
.ffc3{font-size:48px;}
 }