div.text, div.find, div.wrapper, div.tool { font: medium Roboto; padding: 0 10px 0 10px; margin: 0 auto 0px auto; }

div.text a, div.find a, div.wrapper a, div.tool a { color: #277da7; }

div.text a:hover, div.find a:hover, div.wrapper a:hover, div.tool a:hover { color: #2a8100; }

div.text h1, div.text h2.search-heading, div.find h1, div.find h2.search-heading, div.wrapper h1, div.wrapper h2.search-heading, div.tool h1, div.tool h2.search-heading { font-size: 180%; margin: 20px 0 0.5em; color: #329bcf; }

div.text h2, div.find h2, div.wrapper h2, div.tool h2 { font-size: 125%; margin: 0 0 0.5em; }

div.text h3, div.find h3, div.wrapper h3, div.tool h3 { font-size: 85%; margin: 0 0 0.5em; }

div.text a, div.find a, div.wrapper a, div.tool a { text-decoration: none; }

div.text p, div.find p, div.wrapper p, div.tool p { line-height: 1.5em; margin: 0 0 1.5em; font-size: 100%; }

div.text p.downloaden, div.find p.downloaden, div.wrapper p.downloaden, div.tool p.downloaden { text-align: right; font-weight: bold; }

div.text p.intro, div.find p.intro, div.wrapper p.intro, div.tool p.intro { font-size: 120%; }

div.text ul, div.text ol, div.find ul, div.find ol, div.wrapper ul, div.wrapper ol, div.tool ul, div.tool ol { line-height: 1.5em; margin: 0 0 1.5em 0; padding: 0 0 0 20px; }

div.text ul li, div.text ol li, div.find ul li, div.find ol li, div.wrapper ul li, div.wrapper ol li, div.tool ul li, div.tool ol li { font-size: 100%; }

div.text div.webetui-photo div.webetui-bgimg, div.find div.webetui-photo div.webetui-bgimg, div.wrapper div.webetui-photo div.webetui-bgimg, div.tool div.webetui-photo div.webetui-bgimg { width: 140px; height: 200px; background-size: cover; margin: 0 20px 20px 0; }

div.text div.logos div, div.find div.logos div, div.wrapper div.logos div, div.tool div.logos div { display: grid; grid-template-columns: 1fr; grid-gap: 10px; }

div.text div.logos div div.webetui-bgimg, div.find div.logos div div.webetui-bgimg, div.wrapper div.logos div div.webetui-bgimg, div.tool div.logos div div.webetui-bgimg { width: 240px; height: 80px; }

div.text form.formulier div.ctl-wiki, div.find form.formulier div.ctl-wiki, div.wrapper form.formulier div.ctl-wiki, div.tool form.formulier div.ctl-wiki { margin: 0 0 30px 0; }

div.text form.formulier div.children > div, div.find form.formulier div.children > div, div.wrapper form.formulier div.children > div, div.tool form.formulier div.children > div { margin: 0 0 20px; }

div.text form.formulier label, div.find form.formulier label, div.wrapper form.formulier label, div.tool form.formulier label { font-size: 90%; padding: 7px 7px 7px 0; }

div.text form.formulier input[type=text], div.text form.formulier textarea, div.find form.formulier input[type=text], div.find form.formulier textarea, div.wrapper form.formulier input[type=text], div.wrapper form.formulier textarea, div.tool form.formulier input[type=text], div.tool form.formulier textarea { padding: 5px; width: 400px; background: #d0e3f1; border: 1px solid #d0e3f1; font: 15px Roboto; }

div.text form.formulier textarea, div.find form.formulier textarea, div.wrapper form.formulier textarea, div.tool form.formulier textarea { height: 90px; }

div.text form.formulier div.radio, div.text form.formulier div.checkbox, div.find form.formulier div.radio, div.find form.formulier div.checkbox, div.wrapper form.formulier div.radio, div.wrapper form.formulier div.checkbox, div.tool form.formulier div.radio, div.tool form.formulier div.checkbox { font-size: 15px; }

div.text form.formulier div.radio div.item, div.text form.formulier div.checkbox div.item, div.find form.formulier div.radio div.item, div.find form.formulier div.checkbox div.item, div.wrapper form.formulier div.radio div.item, div.wrapper form.formulier div.checkbox div.item, div.tool form.formulier div.radio div.item, div.tool form.formulier div.checkbox div.item { color: #1d5e7e; padding: 6px 0 0 0; }

div.text form.formulier div.radio div.item span, div.text form.formulier div.checkbox div.item span, div.find form.formulier div.radio div.item span, div.find form.formulier div.checkbox div.item span, div.wrapper form.formulier div.radio div.item span, div.wrapper form.formulier div.checkbox div.item span, div.tool form.formulier div.radio div.item span, div.tool form.formulier div.checkbox div.item span { cursor: pointer; }

div.text form.formulier div.children > div.vermelding, div.text form.formulier div.children > div.attendering, div.find form.formulier div.children > div.vermelding, div.find form.formulier div.children > div.attendering, div.wrapper form.formulier div.children > div.vermelding, div.wrapper form.formulier div.children > div.attendering, div.tool form.formulier div.children > div.vermelding, div.tool form.formulier div.children > div.attendering { display: block; padding-left: 87px; }

div.text form.formulier div.children > div.vermelding label, div.text form.formulier div.children > div.attendering label, div.find form.formulier div.children > div.vermelding label, div.find form.formulier div.children > div.attendering label, div.wrapper form.formulier div.children > div.vermelding label, div.wrapper form.formulier div.children > div.attendering label, div.tool form.formulier div.children > div.vermelding label, div.tool form.formulier div.children > div.attendering label { display: block; max-width: 500px; }

div.text form.formulier input[type=submit], div.find form.formulier input[type=submit], div.wrapper form.formulier input[type=submit], div.tool form.formulier input[type=submit] { display: block; font-weight: bold; cursor: pointer; margin: 30px 0; color: white; background: #277da7; border: 0; padding: 6px 16px; border-radius: 10px; }

div.wrapper p.spam-melding { margin: 2em 0; font-size: 85%; color: #666; }

div.wrapper div.bedankt { margin: 0 0 80px; }

@media only screen and (min-width: 800px) { div.text, div.find, div.wrapper, div.tool { padding: 0 370px 0 40px; max-width: none; } div.text div.logos div, div.find div.logos div, div.wrapper div.logos div, div.tool div.logos div { grid-template-columns: 1fr 1fr; grid-gap: 30px; } div.text form.formulier div.children > div, div.find form.formulier div.children > div, div.wrapper form.formulier div.children > div, div.tool form.formulier div.children > div { display: flex; } div.text form.formulier div.children > div label, div.find form.formulier div.children > div label, div.wrapper form.formulier div.children > div label, div.tool form.formulier div.children > div label { min-width: 80px; } div.text form.formulier input[type=submit], div.find form.formulier input[type=submit], div.wrapper form.formulier input[type=submit], div.tool form.formulier input[type=submit] { margin-left: 87px; } }

@media only screen and (min-width: 1300px) { div.text, div.find, div.wrapper, div.tool { padding: 0 200px 0 0; max-width: 800px; } div.submenu { padding: 0 200px 0 0; max-width: 800px; margin: 0 auto; } }

div.opgroen { color: white; padding: 220px 20px 10px 20px; }

div.opgroen div.text { margin: 0; padding: 0; font-family: "Source Serif Pro"; font-size: 24px; line-height: 1.3em; font-weight: 600; }

div.opgroen div.text h1 { display: none; }

div.opgroen div.text p { font-size: 80%; line-height: 1.3em; }

div.bollen { flex: 1 1 65%; position: absolute; /* background:#ff8877;  */ transform: scale(0.5); top: 10px; left: 50%; }

div.bollen div.lines { position: absolute; transform: scale(2); left: -26px; top: -19px; }

div.bollen div.bol { position: absolute; width: 80px; height: 80px; background: #329bcf; border-radius: 50px; transition: all 0.8s ease 0.2s; }

div.bollen div.bol[name="b1"] { left: calc(50% - 60px); top: 113px; width: 120px; height: 120px; }

div.bollen div.bol[name="b2"] { left: calc(50% - 50px); top: 130px; width: 95px; height: 95px; }

div.bollen div.bol[name="b3"] { left: calc(50% - 50px); top: 130px; width: 80px; height: 80px; }

div.bollen div.bol[name="b4"] { left: calc(50% - 50px); top: 130px; width: 80px; height: 80px; }

div.bollen div.bol[name="b5"] { left: calc(50% - 50px); top: 130px; width: 55px; height: 55px; }

div.bollen div.bol[name="b6"] { left: calc(50% - 50px); top: 130px; width: 55px; height: 55px; }

div.bollen div.bol[name="b7"] { left: calc(50% - 50px); top: 130px; width: 48px; height: 48px; }

div.bollen div.bol[name="b8"] { left: calc(50% - 50px); top: 130px; width: 48px; height: 48px; }

div.bollen div.bol[name="b9"] { left: calc(50% - 50px); top: 130px; width: 38px; height: 38px; }

div.bollen div.bol[name="b10"] { left: calc(50% - 50px); top: 130px; width: 38px; height: 38px; }

div.bollen div.bol[name="b11"] { left: calc(50% - 50px); top: 130px; width: 38px; height: 38px; }

div.bollen div.bol[name="b1"] { background: #ff8800; border-radius: 65px; }

div.bollen div.line { position: absolute; background: rgba(255, 255, 255, 0.4); height: 2px; }

div.bollen.start div.bol[name="b1"] { left: calc(50% - 60px); top: 113px; width: 120px; height: 120px; }

div.bollen.start div.bol[name="b2"] { left: calc(50% - 174px); top: 226px; width: 95px; height: 95px; }

div.bollen.start div.bol[name="b3"] { left: calc(50% - 242px); top: 58px; width: 80px; height: 80px; }

div.bollen.start div.bol[name="b4"] { left: calc(50% + 156px); top: 113px; width: 80px; height: 80px; }

div.bollen.start div.bol[name="b5"] { left: calc(50% + 52px); top: 4px; width: 55px; height: 55px; }

div.bollen.start div.bol[name="b6"] { left: calc(50% + 72px); top: 257px; width: 55px; height: 55px; }

div.bollen.start div.bol[name="b7"] { left: calc(50% + 226px); top: 29px; width: 48px; height: 48px; }

div.bollen.start div.bol[name="b8"] { left: calc(50% - 297px); top: 215px; width: 48px; height: 48px; }

div.bollen.start div.bol[name="b9"] { left: calc(50% - 90px); top: 9px; width: 38px; height: 38px; }

div.bollen.start div.bol[name="b10"] { left: calc(50% + 6px); top: 345px; width: 38px; height: 38px; }

div.bollen.start div.bol[name="b11"] { left: calc(50% + 198px); top: 263px; width: 38px; height: 38px; }

@media only screen and (min-width: 800px) { div.opgroen { color: white; flex: 1 1 35%; padding: 20px 40px; flex: 0 0 352px; } div.opgroen div.text { font-size: 24px; line-height: 1.3em; font-weight: 600; } div.opgroen div.text p { font-size: 90%; line-height: 1.5em; } div.bollen { position: relative; left: 0; transform: scale(1); top: 0; } div.bollen div.lines { position: static; transform: scale(1); } }

div.text div.vragen, div.text div.allesja { display: none; }

div.tool { font-size: 100%; }

div.tool div.beslisboom { position: relative; min-height: 540px; background: #329bcf; overflow: hidden; margin: 0 0 50px; border-radius: 35px; background-image: linear-gradient(0deg, transparent 50%, rgba(255, 255, 255, 0.25) 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.25) 50%); }

div.tool div.beslisboom div.flow { position: absolute; }

div.tool div.beslisboom div.flow div.vraag { position: absolute; left: 210px; top: 155px; width: 300px; height: 150px; padding: 40px; background: #dedc00; border-radius: 25px; box-shadow: 0 0 16px rgba(0, 0, 0, 0.1); }

div.tool div.beslisboom div.flow div.vraag div.arrows { display: none; }

div.tool div.beslisboom div.flow div.vraag div.arrows div.arrow { position: absolute; font-size: 41px; color: #dedc00; }

div.tool div.beslisboom div.flow div.vraag div.arrows div.arrow.ja { left: 372px; top: 92px; }

div.tool div.beslisboom div.flow div.vraag div.arrows div.arrow.nee { left: 172px; top: 218px; }

div.tool div.beslisboom div.flow div.vraag div.arrows div.arrow.left { left: -28px; top: 92px; }

div.tool div.beslisboom div.flow div.vraag div.arrows div.arrow.up { left: 172px; top: -33px; }

div.tool div.beslisboom div.flow div.vraag.selected div.arrows { display: block; }

div.tool div.beslisboom div.flow div.neighbours div.vraag.ja { left: 740px; }

div.tool div.beslisboom div.flow div.neighbours div.vraag.nee { top: 510px; }

div.tool div.beslisboom div.flow div.neighbours div.vraag.left { left: -320px; }

div.tool div.beslisboom div.flow div.neighbours div.vraag.up { top: -200px; }

div.tool div.beslisboom div.allesja { display: block; }

div.tool div.beslisboom div.buttons a { position: absolute; display: none; color: white; width: 60px; height: 42px; padding-top: 18px; border-radius: 30px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); font-size: 18px; font-weight: normal; text-align: center; }

div.tool div.beslisboom div.buttons a.ja { left: 643px; top: 240px; background: #080; }

div.tool div.beslisboom div.buttons a.nee { left: 368px; top: 429px; background: #c00; }

div.tool div.beslisboom div.buttons a.left { left: 93px; top: 240px; background: #777; }

div.tool div.beslisboom div.buttons a.up { left: 368px; top: 50px; background: #777; }

div.tool div.advies { display: none; }

div.tool div.adviezen { background: #b9ddf4; border-radius: 35px; padding: 20px 50px; min-height: 500px; margin: 0; transform: rotate(400deg) scale(0.1); transition: transform 1.5s linear; }

div.tool div.adviezen.present { transform: rotate(0deg) scale(1); }

div.tool div.adviezen div.eindscore { border-bottom: 1px solid #70b9de; margin-bottom: 10px; position: relative; }

div.tool div.adviezen div.eindscore h2 { font-size: 100%; border-bottom: 1px solid #70b9de; padding-bottom: 10px; margin-bottom: 10px; }

div.tool div.adviezen div.eindscore div.meter { position: relative; width: 320px; height: 200px; overflow: hidden; margin: 20px auto 0 auto; }

div.tool div.adviezen div.eindscore div.meter::before { content: ''; inset: 0; position: absolute; border-radius: 50%; width: 320px; height: 320px; background: radial-gradient(farthest-side, #000514 10%, #000514 70%, transparent 71%, transparent 80%, #000514 81%, #333 87%, #333 92%, #000514 100%), conic-gradient(#c0ff00 0deg, #03ff00 90deg, transparent 180deg, #ff0a00 270deg, #c0ff00 360deg); }

div.tool div.adviezen div.eindscore div.wijzer { position: absolute; left: calc(50% - 10px); top: 120px; width: 0; height: 0; border-bottom: 100px solid red; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; transform-origin: 10px 90px; }

div.tool div.adviezen div.eindscore div.labels { position: absolute; left: calc(50% - 10px); top: 105px; width: 0; height: 0; font-size: 13px; text-align: center; }

div.tool div.adviezen div.eindscore div.labels label { position: absolute; color: #04e400; width: 20px; height: 105px; transform-origin: bottom center; transform: rotate(-90deg); }

div.tool div.adviezen div.eindscore div.labels label::before { content: ""; position: absolute; left: 8.5px; top: -24px; width: 3px; height: 17px; background: #000514; }

div.tool div.adviezen.present div.eindscore div.wijzer { animation-name: wijzer; animation-duration: 2s; animation-delay: 2s; animation-timing-function: ease-in-out; }

@keyframes wijzer { 0% { transform: rotate(-120deg);
    opacity: 1; } }

div.tool div.beslisboom ul.adviezen { margin: 0; padding: 0; list-style-type: none; }

div.tool div.beslisboom ul.adviezen > li.title { font-weight: bold; padding-bottom: 10px; }

div.tool div.beslisboom ul.adviezen > li { border-bottom: 1px solid #70b9de; }

div.tool div.beslisboom ul.adviezen > li h1 { font-size: 100%; color: #C60000; position: relative; cursor: pointer; margin: 10px 0; }

div.tool div.beslisboom ul.adviezen > li h1 svg { position: absolute; left: -23px; top: 4px; transition: transform 0.3s; }

div.tool div.beslisboom ul.adviezen > li div.inner { max-height: 0; overflow: hidden; transition: max-height 0.3s; }

div.tool div.beslisboom ul.adviezen > li h2 { margin: 0 0 0.2em; font-size: 100%; }

div.tool div.beslisboom ul.adviezen > li p { margin: 0 0 1em; }

div.tool div.beslisboom ul.adviezen > li h2, div.tool div.beslisboom ul.adviezen > li p, div.tool div.beslisboom ul.adviezen > li li { font-size: 87%; }

div.tool div.beslisboom ul.adviezen > li p ul { margin-bottom: 1em; }

div.tool div.beslisboom ul.adviezen > li ul { padding-left: 15px; }

div.tool div.beslisboom ul.adviezen > li li { list-style-type: disc; }

div.tool div.beslisboom ul.adviezen > li.selected h1 svg { transform: rotate(90deg); }

div.tool div.beslisboom ul.adviezen > li.selected div.inner { max-height: 1200px; }

div.tool div.beslisboom div.allesja { padding-top: 40px; }

div.tool div.antwoorden { background: #b9ddf4; border-radius: 35px; padding: 40px; }

div.tool div.antwoorden div.score { background: #329bcf; border-radius: 20px; display: flex; height: 30px; margin: 0 0 30px; }

div.tool div.antwoorden div.score div { overflow: hidden; color: white; font-size: 18px; font-weight: normal; text-align: center; padding: 2px 0 0 0; width: 0; }

div.tool div.antwoorden div.score div.nee { background: #c00; border-radius: 15px 0 0 15px; }

div.tool div.antwoorden div.score div.ja { background: #080; border-radius: 0 15px 15px 0; }

div.tool div.antwoorden ol li div.vraag { display: flex; align-items: center; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.7); }

div.tool div.antwoorden ol li div.vraag div.vtext { margin-right: auto; }

div.tool div.antwoorden ol li div.vraag div.ja { color: white; width: 60px; height: 42px; padding-top: 18px; border-radius: 30px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); font-size: 18px; font-weight: normal; text-align: center; background: #080; flex: 0 0 60px; margin-left: 40px; }

div.tool div.antwoorden ol li div.vraag div.nee { color: white; width: 60px; height: 42px; padding-top: 18px; border-radius: 30px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); font-size: 18px; font-weight: normal; text-align: center; background: #c00; flex: 0 0 60px; margin-left: 40px; }

div.text div.vragen { display: none; }

@media only screen and (max-width: 800px) { div.tool { font-size: 100%; } div.tool div.beslisboom { position: relative; min-height: 400px; background: #329bcf; overflow: hidden; margin: 0 0 50px; border-radius: 15px; background-image: linear-gradient(0deg, transparent 50%, rgba(255, 255, 255, 0.25) 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.25) 50%); } div.tool div.beslisboom div.flow { position: absolute; } div.tool div.beslisboom div.flow div.vraag { position: absolute; left: 65px; top: 65px; width: calc(100vw - 200px); height: 220px; padding: 25px; background: #dedc00; border-radius: 15px; box-shadow: 0 0 16px rgba(0, 0, 0, 0.1); font-size: 90%; } div.tool div.beslisboom div.flow div.vraag div.arrows div.arrow { position: absolute; font-size: 41px; color: #dedc00; } div.tool div.beslisboom div.flow div.vraag div.arrows div.arrow.ja { top: 112px; right: -44px; left: auto; } div.tool div.beslisboom div.flow div.vraag div.arrows div.arrow.left { top: 112px; left: -44px; } div.tool div.beslisboom div.flow div.vraag div.arrows div.arrow.nee { left: calc(50% - 18px); bottom: -52px; top: auto; } div.tool div.beslisboom div.flow div.vraag div.arrows div.arrow.up { left: calc(50% - 18px); top: -45px; } div.tool div.beslisboom div.flow div.vraag.selected div.arrows { display: block; } div.tool div.beslisboom div.flow div.neighbours div.vraag.ja { left: calc(100vw - 38px); } div.tool div.beslisboom div.flow div.neighbours div.vraag.nee { top: 385px; } div.tool div.beslisboom div.flow div.neighbours div.vraag.left { left: calc(-100vw + 168px); } div.tool div.beslisboom div.flow div.neighbours div.vraag.up { top: -254px; } div.tool div.beslisboom div.buttons a { position: absolute; display: none; color: white; width: 46px; height: 34px; padding-top: 12px; border-radius: 23px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); font-size: 16px; font-weight: normal; text-align: center; } div.tool div.beslisboom div.buttons a.ja { top: 177px; right: 44px; left: auto; background: #080; } div.tool div.beslisboom div.buttons a.nee { left: calc(50% - 23px); top: 311px; background: #c00; } div.tool div.beslisboom div.buttons a.left { top: 177px; left: 43px; background: #777; } div.tool div.beslisboom div.buttons a.up { left: calc(50% - 23px); top: 47px; background: #777; } div.tool div.advies, div.tool div.allesja { display: none; } div.tool ul.adviezen { background: #b9ddf4; border-radius: 15px; padding: 15px 30px; min-height: 500px; margin: 0; list-style-type: none; transform: rotate(400deg) scale(0.1); transition: transform 1.5s linear; } div.tool ul.adviezen.present { transform: rotate(0deg) scale(1); } div.tool ul.adviezen > li { border-bottom: 1px solid #70b9de; } div.tool ul.adviezen > li h1 { font-size: 100%; color: #C60000; position: relative; cursor: pointer; margin: 10px 0; } div.tool ul.adviezen > li h1 svg { position: absolute; left: -23px; top: 4px; transition: transform 0.3s; } div.tool ul.adviezen > li div.inner { max-height: 0; overflow: hidden; transition: max-height 0.3s; } div.tool ul.adviezen > li h2 { margin: 0 0 0.2em; font-size: 100%; } div.tool ul.adviezen > li p { margin: 0 0 1em; } div.tool ul.adviezen > li h2, div.tool ul.adviezen > li p, div.tool ul.adviezen > li li { font-size: 87%; } div.tool ul.adviezen > li p ul { margin-bottom: 1em; } div.tool ul.adviezen > li ul { padding-left: 15px; } div.tool ul.adviezen > li li { list-style-type: disc; } div.tool ul.adviezen > li.selected h1 svg { transform: rotate(90deg); } div.tool ul.adviezen > li.selected div.inner { max-height: 1200px; } div.tool div.antwoorden { background: #b9ddf4; border-radius: 15px; padding: 30px 20px; } div.tool div.antwoorden div.score { background: #329bcf; border-radius: 20px; display: flex; height: 30px; margin: 0 0 30px; } div.tool div.antwoorden div.score div { overflow: hidden; color: white; font-size: 18px; font-weight: normal; text-align: center; padding: 2px 0 0 0; width: 0; } div.tool div.antwoorden div.score div.nee { background: #c00; border-radius: 15px 0 0 15px; } div.tool div.antwoorden div.score div.ja { background: #080; border-radius: 0 15px 15px 0; } div.tool div.antwoorden ol li div.vraag { display: flex; align-items: center; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.7); } div.tool div.antwoorden ol li div.vraag div.vtext { margin-right: auto; } div.tool div.antwoorden ol li div.vraag div.ja { color: white; width: 46px; height: 34px; padding-top: 12px; border-radius: 23px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); font-size: 16px; font-weight: normal; text-align: center; background: #080; flex: 0 0 46px; margin-left: 0px; } div.tool div.antwoorden ol li div.vraag div.nee { color: white; width: 46px; height: 34px; padding-top: 12px; border-radius: 23px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); font-size: 16px; font-weight: normal; text-align: center; background: #c00; flex: 0 0 46px; margin-left: 0px; } }

body { margin: 0; padding: 0; background: white; font: medium Roboto; }

header { margin: 0 0 30px 0; }

header a { text-decoration: none; }

header h1.title { text-transform: uppercase; margin: 30px 30px 10px 30px; text-align: center; font-size: 220%; }

header h1.title span.blauw { color: #329bcf; }

header h1.title span.groen { color: #2a8100; }

header h1.title span.geel { color: #dedc00; }

header h2 { font-size: 95%; margin: 0 30px 30px 30px; text-align: center; }

header div.photo { height: 370px; background-color: black; background-size: contain; background-position: center center; background-repeat: no-repeat; }

div.wrapper ul.menu1-actueel { list-style-type: none; padding: 0; margin: 0 0 20px -20px; }

div.wrapper ul.menu1-actueel li { display: inline-block; }

div.wrapper ul.menu1-actueel li a { display: block; padding: 4px 20px; color: #5e5e5e; text-transform: uppercase; font-size: 85%; font-weight: 600; }

div.wrapper ul.menu1-actueel li a.selected, div.wrapper ul.menu1-actueel li a:hover { color: #2a8100; }

div.kleuren div.blauw a.zoek { display: none; }

nav.hamburger a.nav { left: 15px; top: 15px; right: auto; }

nav.hamburger a.nav label { display: none; }

nav.hamburger a.nav div.bars div, nav.hamburger a.nav div.bars div:before, nav.hamburger a.nav div.bars div:after { background: white; }

nav.hamburger ul.menu1 { margin: 0; padding: 44px 40px 10px 40px; list-style-type: none; max-width: none; max-height: 0px; overflow: hidden; text-align: center; }

nav.hamburger ul.menu1 li { display: block; }

nav.hamburger ul.menu1 li a { display: block; color: white; text-decoration: none; font-size: 105%; text-transform: uppercase; font-weight: 600; padding: 4px 20px; }

nav.hamburger ul.menu1 li a:hover, nav.hamburger ul.menu1 li a.selected { color: #dedc00; }

nav.hamburger a.nav.selected div.bars div.top { transform: translateY(10px) rotateZ(-45deg); }

nav.hamburger a.nav.selected div.bars div.bot { transform: translateY(-10px) rotateZ(45deg); }

nav.hamburger a.nav.selected div.bars div.mid { display: none; }

nav.hamburger.selected ul.menu1 { padding: 44px 40px 20px 40px; max-height: 200px; padding-top: 40px; }

div.menu form.search { position: absolute; right: 16px; top: 12px; }

div.menu form.search input[type=text] { width: 0; color: white; background: rgba(255, 255, 255, 0.2); font: 14px Roboto; padding: 6px 0; transition: width 0.4s ,padding 0.4s; outline: 0; }

div.menu form.search.selected input[type=text] { width: 180px; padding: 6px; }

div.menu form.search button[type=submit] { font-size: 24px; color: white; }

div.menu form.search button[type=submit] span { display: none; }

div.menu form.search input[type=submit] { display: none; }

body.zoek-een-product div.menu form.search { display: none; }

div.netwerk, div.menu { background-color: #2a8100; position: relative; border-radius: 20px; margin: 0 10px 0 10px; }

div.submenu ul { list-style-type: none; margin: 0; padding: 10px; }

div.submenu ul li { display: inline-block; }

div.submenu ul li a { display: block; margin: 0 16px 10px 0; color: white; background: #2a8100; font-size: 85%; font-weight: 600; text-transform: uppercase; text-decoration: none; border-radius: 10px; padding: 6px 16px; }

div.submenu ul li a.selected, div.submenu ul li a:hover { color: #dedc00; }

div.submenu ul li.over-deze-nulmeting { display: none; }

body.home div.menu { border-radius: 20px 20px 0 0; }

body.home div.netwerk { border-radius: 0 0 20px 20px; }

article { position: relative; min-height: 800px; padding-bottom: 60px; }

article > div.photo, article > div.bgphoto { height: 390px; width: calc(100vw - 20px); margin: 10px; background-size: cover; border-radius: 25px; }

body.home div.wrapper h1 { font-size: 150%; }

body.over-ons article div.mediaset.photo { display: flex; margin: 40px 0; }

body.over-ons article div.mediaset.photo div.photo img { display: block; height: 70px; margin: 0 20px 0 0; }

div.date { font-size: 85%; color: #5e5e5e; margin: 20px 10px; padding: 0 200px 0 0; max-width: 800px; }

div.find a.find-item { display: block; position: relative; padding: 0 0 0 105px; margin: 0 0 30px; min-height: 120px; }

div.find a.find-item div.photo { position: absolute; left: 0; top: 1px; width: 90px; height: 120px; background-size: cover; border-radius: 4px; border: 0.7px solid #dddddd; }

div.find a.find-item h2 { font-size: 110%; line-height: 1.5em; margin: 0; }

div.find a.find-item div.date { margin: 0; font-size: 80%; }

div.find a.find-item div.date span { display: none; }

div.find a.find-item div.intro { color: black; font-size: 90%; line-height: 1.5em; }

div.find a.find-item:hover h2 { color: #2a8100; }

div.find a.naar { font-size: 85%; font-weight: 600; text-transform: uppercase; }

div.find a.naar svg { margin-left: 4px; transition: margin-left 0.5s; }

div.find a.naar:hover svg { margin-left: 14px; }

div.find div.count, div.find div.term { display: none; }

div.zoekfilter { display: flex; margin-bottom: 20px; }

div.zoekfilter ul.filter { display: flex; flex: 0 0 470px; list-style-type: none; margin: 0; padding: 0; }

div.zoekfilter ul.filter a { display: block; padding: 4px 12px; font-size: 14px; line-height: 1.4em; }

div.zoekfilter ul.filter li a.dimmed { color: #dedc00; }

div.zoekfilter ul.filter > li { flex: 0 0 225px; margin: 0 10px 0 0; position: relative; }

div.zoekfilter ul.filter > li > a { padding: 12px; color: white; background: #2a8100; min-height: 40px; display: flex; align-items: center; border-radius: 12px; }

div.zoekfilter ul.filter > li > a svg { position: absolute; right: 6px; top: 26px; transition: transform 0.5s; }

div.zoekfilter ul.filter > li ul { max-height: 0; overflow: hidden; list-style-type: none; margin: 0; padding: 0; transition: max-height 0.3s; position: absolute; z-index: 10; top: 55px; }

div.zoekfilter ul.filter > li ul li a { color: white; background: #2a8100; }

div.zoekfilter ul.filter > li ul li a:hover { color: #dedc00; }

div.zoekfilter ul.filter > li ul li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.2); }

div.zoekfilter ul.filter > li.expanded > a svg { transform: scaleY(-1); }

div.zoekfilter ul.filter > li.expanded ul { max-height: 900px; padding-bottom: 0; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; }

div.zoekfilter ul.filter > li.expanded ul li:first-child a { padding-top: 10px; }

div.zoekfilter ul.filter > li.expanded ul li:last-child a { padding-bottom: 10px; }

div.zoekfilter ul.filter > li > div.border-bottom { background: #2a8100; height: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; }

div.zoekfilter form.search { display: flex; background: #2a8100; width: 225px; border-radius: 12px; }

div.zoekfilter form.search input[type=text] { color: white; background: rgba(255, 255, 255, 0.2); padding: 4px; margin: 18px 4px 0 8px; height: 20px; font: 14px Roboto; width: 140px; }

div.zoekfilter form.search input.dimmed[type=text] { color: #dedc00; }

div.zoekfilter form.search input[type=submit] { display: none; }

div.zoekfilter form.search button { padding: 4px; color: white; }

footer { background: #dedc00; height: 200px; }

footer ul.menu-footer { list-style-type: none; margin: 0; padding: 25px 0 0 0; text-align: center; }

footer ul.menu-footer li { display: block; }

footer ul.menu-footer li a { display: inline-block; padding: 4px 20px; font-size: 85%; font-weight: 600; text-decoration: none; color: black; text-transform: uppercase; }

@media only screen and (min-width: 800px) { header { margin-right: 200px; } div.menu, div.netwerk { margin: 0 240px 40px 40px; } div.menu { display: flex; justify-content: center; margin-bottom: 30px; border-radius: 20px; } body.home div.menu { margin-bottom: 0; } div.menu nav.hamburger ul.menu1 { padding: 12px 12px 12px 12px; max-height: 500px; } div.menu nav.hamburger ul.menu1 li, div.menu nav.hamburger ul.menu1 li a { display: inline-block; } div.menu form.search { display: block; position: static; padding: 15px 12px; } div.menu form.search button[type=submit] { font-size: 20px; } div.submenu ul { padding: 0; } form.login { padding: 0 20px 80px 0; margin: 0 auto; max-width: 800px; } form.login label { float: left; width: 120px; font-size: 13px; } form.login input[type=text], form.login input[type=password] { background: #dddddd; border: 1px solid #dddddd; padding: 4px; } form.login input[type=submit] { display: block; margin: 20px 0 20px 120px; border: 0; background: #2a8100; color: white; font: 14px Roboto; font-weight: 600; padding: 4px 12px; cursor: pointer; text-transform: uppercase; } form.login div.field { margin: 0 0 10px; } form.login span.eye { cursor: pointer; } form.login span.eye svg.fa-eye { display: none; } form.login span.eye.selected svg.fa-eye { display: inline; } form.login span.eye.selected svg.fa-eye-slash { display: none; } form.login a.forgotpw { display: block; color: #1d5e7e; font-size: 90%; margin: 20px 0 20px 120px; } div.netwerk { height: 400px; border-radius: 0 0 20px 20px; } div.netwerk div.flex { display: flex; } nav.hamburger a.nav { display: none; } div.date { margin: 20px auto; } article div.bol2 { display: block; z-index: 100; position: fixed; right: 4px; top: 204px; background: #dedc00; width: 120px; height: 120px; border-radius: 60px; } article div.kleuren { position: absolute; right: 0; top: 480px; height: calc(100% - 480px); width: 20px; min-height: 300px; } article div.kleuren div.blauw { background: #329bcf; height: calc(45% - 35px); border-top-left-radius: 35px; padding-top: 35px; } article div.kleuren div.groen { background: #2a8100; height: 35%; border-bottom-left-radius: 35px; position: relative; } article div.kleuren div.geel { background: #dedc00; height: calc(20% + 35px); margin-top: -35px; } article div.kleuren div.corner { position: absolute; bottom: 0; left: -40px; width: 40px; height: 40px; background: #dedc00; } article div.kleuren div.corner:before { content: ' '; display: block; width: 40px; height: 40px; background: white; border-bottom-right-radius: 35px; } article div.kleuren div.bol1 { display: none; position: absolute; left: 90px; top: 90px; background: #2a8100; width: 90px; height: 90px; border-radius: 45px; } article div.kleuren a.zoek { display: none; position: fixed; z-index: 200; right: -20px; top: 300px; color: white; text-decoration: none; text-transform: uppercase; background: #2a8100; font-size: 85%; width: 90px; height: 67px; padding-top: 23px; border-radius: 60px; text-align: center; opacity: 0.8; transition: all 0.5s; } article div.kleuren a.zoek strong { display: block; font-size: 120%; font-weight: 600; line-height: 1.5em; } article div.kleuren a.zoek:hover { background: #329bcf; opacity: 1; } article div.kleuren { width: 200px; top: 0; height: 100%; } article div.kleuren div.blauw a.zoek { display: block; position: fixed; right: 50px; top: 170px; width: 120px; height: 83px; padding-top: 37px; font-weight: 600; z-index: 101; border: 1px solid green; } article div.kleuren div.blauw a.zoek:hover { right: 50px; background: #2a8100; opacity: 1; } article > div.photo, article > div.bgphoto { position: absolute; right: 100px; z-index: 10; top: 200px; width: 260px; height: 390px; margin: 0; background-size: cover; border-radius: 25px; } footer ul.menu-footer { margin: 0 200px 0 0; } footer ul.menu-footer li { display: inline; } }

/*# sourceMappingURL=svzv.css.map */