/* file: \form\wsd.css, date/time: 20-05-2022 19:25 */
html {font-family: tahoma, verdana, arial, sans-serif;overflow-y: scroll;} body {margin: 0;background-color: #c3c388;} * {box-sizing: border-box;} a, a:visited {color: #054f05;cursor: default;text-underline-offset: 1px;} a:hover {text-decoration-thickness: 2px;} a[href*="http"]:hover {cursor: alias;} .flex-container {display: flex;background-color: inherit;align-content: space-around;justify-content: space-between;} header.flex-container {flex-wrap: nowrap;padding: 1px 1px 5px 1px;text-align: center;font-size: 2rem;color: white;text-shadow: 0px 0px 3px black;position: sticky;top: 0;margin: 0 5px 0 5px;z-index: 2;} header.flex-container > div {align-self: center;} header.flex-container > div > *:not(img)  {margin: 5px;} header.flex-container > div.center p {margin: 0;} p.fquote {font-size: 0.8rem;color: black;text-shadow: 0px 0px 5px #df8e8e;cursor: default;animation: lil-delay 2s linear;height: 0;display: table-cell;min-width: 208px;} div.center p.fquote {font-size: 0.7rem;display: none;} @keyframes lil-delay {from {opacity:0} to {opacity:1}} .center {flex-grow: 1;} .rightside > img {float: right;} header > .leftside {width: 180px;line-height: 13px;} header > .rightside {width: 206px;align-content: stretch;min-height: 72px;} header > div img, header > div > a {width: inherit;} header > div img, header > div > a:focus {outline: none;} header.flex-container > div.center {cursor: default;} img.heavy {filter: drop-shadow(1px 1px 1px #fff);} div.leftside a img.heavy {width: 170px;} .rightside img.heavy:hover {animation: wsd-heavy 3s 1 5s linear;} img.hamburger { width: 0; display: none; } div.flex-container > div.navpopup.leftside {position: sticky;top: 100px;background-color: #f5f5f5;width: 50%;left: 50%;padding: 5px;box-shadow: 0 0 3px 4px #628228;border-radius: 10px;} div.navpopup > ul {display: block;} .flex-container:not(header) > div.leftside {min-width: 120px;margin-right: 5px;} .flex-container:not(header) > div:not(.center) {width: 25%;} .flex-container.body > div.center  {background-color: #feffef;border-radius: 15px;border: 5px solid #686845;padding: 0 20px 20px 20px;margin: 0 5px 10px 5px;min-width: 70%;max-width: 450px;min-height: 400px;} .leftside ul {list-style-type: none;padding: 2px;margin: 5px;position: fixed;top: 200px;font-size: .8rem;display: flex;flex-direction: column;flex-wrap: wrap;} .leftside li, div.navpopup > ul > li {padding-left: 5px;padding-bottom: 5px;margin: 2px;} div.navpopup > ul > li {margin: 5px;} ul {padding-left: 20px;} div.zwever > ul {padding: 5px 5px 5px 10px;margin: 0;} .navmenu span > img {width: 0px; height: 0px;} div.navmenu {margin-top: -5px;position: fixed;} div.navpopup {top: 100px;background-color: #f5f5f5;width: 43%;left: 56%;padding: 8px;box-shadow: 0 0 3px 4px #628228;border-radius: 10px;z-index: 3;text-align: right;} div.navpopup > ul {display: block;list-style-type: none;padding: 2px;margin: 5px;font-size: .8rem;} .center h1, .center h2, .center h3, .center h4 {margin-bottom: 10px;} div.center h3 {margin: 0;} .center li, .center ul {margin: 5px 0 5px 0;} .center > ul.inside, div.zwever ul.inside {list-style-position: inside;padding-left: 0;} .center details > ul.inside li, div.zwever ul.inside li {list-style-position: inside;margin-left: 0;} div.center > h2 + p {max-width: 700px;} div.center ul > ul > li {margin: 3px 0 3px 0;} li.vraagmaar, details.vraagmaar {list-style: "\25BA\20" outside;margin-top: 10px;} li.vraagmaar::marker {color: #db1717;font-size: smaller;} .foot > .center {margin-top: 5px;margin-bottom: 20px;min-width: 70%;max-width: 700px;} .foot > .center > ul {justify-content: center;flex-wrap: wrap;font-size: 0.9rem;} .foot > .center > ul > li {margin: 5px 15px 5px 15px;list-style-type: none;} .expandAll, .implodeAll {float: right;width: 35px;font-size: 70%;text-decoration: underline;text-align: center;color: #60ba60;margin-left: 4px;margin-bottom: 5px;display: inline-table;} .expandAll {cursor: zoom-in;} .expandAll::before {content: "\25BA\20";} .implodeAll {cursor: zoom-out;} .implodeAll::before {content: "\25BC\20";} span.spinspan:hover { animation: spinspan 3s cubic-bezier(.85,-0.33,.23,1.37); display: inline-block; } @keyframes spinspan {from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .wsd-tilt {animation:wsd-tilt 2.5s 1 ease-in} @keyframes wsd-tilt {15%{transform:rotate(0deg); position: relative; top: 0px; left:0px;} 30%{transform:rotate(40deg); position: relative; top: 20px; left:10px;} 55%{transform:rotate(40deg); position: relative; top: 20px; left:10px;} 100%{transform:rotate(0deg); position: relative; top: 0px; left:0px;}} .wsd-zoom {animation: wsd-zoom 1s ease-in;} @keyframes wsd-zoom {from{opacity: 0;} to{opacity: 1;}} header > .leftside img:hover {animation: wsd-spin 6s cubic-bezier(1,.14,.14,1) 1; animation-delay:2s;} @keyframes wsd-spin {from{transform:rotate(0deg)}to{transform:rotate(720deg)}} @keyframes wsd-heavy {0%{filter: drop-shadow(1px 1px 1px #fff);} 25%{filter: drop-shadow(8px -4px 2px #f00);} 50%{filter: drop-shadow(-5px 2px 3px #f00);} 75%{filter: drop-shadow(-20px 8px 1px #f00);} 100%{filter: drop-shadow(1px 1px 1px #fff);}} li + span:not([class^="expandable"]) {font-size: 1%;margin-top: -2px;} div.zwever {font-size: 0.8rem;position: absolute;top: 0;margin-right: 5px;cursor: default;} div.expandable, span.expandable {background-color: #bdb76b;box-shadow: 0 0 8px 3px #fbffdf;height: 1px;width: 1px;} summary.expandable {color: #054f05;margin-bottom: 0;margin-left: 12px;list-style-position: outside;} details.hasurl > summary.expandable > span {color: #274421;} summary.expandable > span {cursor: zoom-in;} div.expandable-hidden, span.expandable-hidden {display: block;overflow: hidden;border: none;box-shadow: none;padding: 0;margin-top: -3px;} div.expandable-open, span.expandable-open {display: block;height: auto;width: auto;animation: wsd-appear .4s 1;border: dotted 2px;padding: 5px;max-width: 350px;border-radius: 6px;} div.zwever.expandable-body, details[open] > p, details[open] > ul {font-size: 0.9rem;padding: 5px 15px 5px 15px;background-color: #fbffdf;border: dotted 1px;width: auto;height: auto;max-width: 800px;border-radius: 3px;} div.center details {margin: 5px 0 0 6px;padding: 0 0 4px 0;} div.center details:first-of-type {margin: 0 0 0 6px;} div.center details[open] > summary > span {cursor: zoom-out;} details[open] > p, details[open] > ul {margin: 5px 0 0 13px;cursor: auto;animation: wsd-appear .4s 1;} details[open] > ul > li {margin-left: 10px;} div.zwever.expandable-body {box-shadow: 0 0 8px 3px #bdb76b;cursor: zoom-out;z-index: 2;} div.zwever.expandable-open:not(.expandable-body) {display: flex;align-items: center;} div.expandable-hiding {animation: wsd-disappear .7s 1;} .expandable > q, details > p> q {display: inline-block;margin-top: 5px;padding: 6px;width: 100%;quotes: "\201C" "\201D";font-style: italic;font-size: 0.9rem;box-shadow: inset 0 0 1em rgba(0,0,0,0.1);border-radius: 4px;} .expandable > q::before, details > p> q::before {content: "Over Wolf: " open-quote;} details ul, details >ul > li {list-style: disc;margin: 0;} details > ul > div {margin-left: -15px;} div.zwever img:not(.inside_details, .inside_no_pop) {width: 25px; height: 25px;float: left;margin-right: 10px;} div.zwever > span {vertical-align: sub;display: table-cell;} @keyframes wsd-appear {0%{opacity: 0} 20%{opacity: 0} 100%{opacity: 1}} @keyframes wsd-disappear {0%{opacity: 1} 20%{opacity: 1} 100%{opacity: 0}} img.pic2zoom {width: 100%;cursor: zoom-in;box-shadow: 0 0 10px 3px #cfdd8e;} img.pic2right, img.pic2left {width: 100%;cursor: zoom-in;padding: 5px;box-shadow: inset 0px 0px 5px #cfdd8e;} div.pic2right, div.pic2left {display: flex;} div.pic2right, div.pic2left {margin-top: 20px;} div.pic2right h4, div.pic2left h4 {margin-block-start: 10px;} div.pic2right > div, div.pic2left > div {width: 125%;} div.pic2right > a {margin: 10px 10px 10px 30px;} div.pic2left > a {margin: 10px 30px 10px 10px;} img.inside_details, img.inside_no_pop {width: 100%;margin-top: 5px;padding: 5px;border: dotted 1px;} img.inside_details {cursor: zoom-in;} div.image-popup {display: flex;flex-direction: column;justify-content: center;text-align: center;height: calc(98vh);cursor: zoom-out;} div.image-popup > p {margin: 0;} div.image-popup > p > img {margin: 1%;box-shadow: 0 0 15px 10px #f0ffef;max-width: 97%;max-height: calc(90vh);} div.image-popup > p > a {margin-left: 15px;font-size: x-small;text-decoration: none;} div.image-popup > p > img.popup {animation: wsd-popup-img .4s 1 linear forwards;} div.image-popup > p > img.popped-up {animation: none;cursor: zoom-out;} div.image-popup > p > img.popdown {animation: wsd-popup-img .3s 1 linear reverse forwards;} img.minilogo {position: absolute;left: 5px;z-index: 2;cursor: zoom-out;margin: 5px 0 0 5px;width: 50px;filter: drop-shadow(2px 2px 0px #ffffff);} @keyframes wsd-popup-img {0%{opacity: 0; scale: 1%;} 100%{opacity: 1; max-width: 97%; max-height: calc(90vh);}} @media (max-width: 900px) {header > .center { font-size: 1.5rem; } div.pic2right, div.pic2left { flex-wrap: wrap; } img.pic2right, img.pic2left { width: 50%; float: right; min-width: 220px; } div.leftside a img.heavy { width: 130px; } p.fquote { min-width: 200px; }} @media (max-width: 700px) {header > .center { font-size: 1.2rem; } div.leftside p.fquote { font-size: 0.7rem; } .flex-container:not(header) > div.leftside { min-width: 100px; } header.flex-container > .rightside { width: 40px; flex-shrink: 0; } .body > .rightside, .foot > .rightside, .foot > .leftside, header > .rightside > img.heavy { display: none; } .expandAll, .implodeAll {margin-left: 3px;margin-right: 10px;} img.pic2right, img.pic2left { width: 75%; }} @media (max-width: 490px) {header > .center { font-size: 0.9rem; } div.leftside p.fquote { display: none; } header.flex-container > div.center p.fquote { display: block; margin: 5px 5px 10px 0; } header > .rightside > img.hamburger { width: 40px; padding: 15px 0 15px 0; } .flex-container { flex-wrap: wrap; } header > div.leftside { max-width: 140px; } div.leftside a img.heavy { width: 120px; } .leftside ul { position: unset; flex-direction: unset; } div.body > div.leftside { width: unset; } .flex-container.body > div.center { padding-left: 10px; padding-right: 10px; } header > div.center > p { display: none } .foot > div.center, .foot > .center > ul { margin: 5px 0px 5px 0px; } div.zwever.expandable-body, details[open] > p, details[open] > ul {  padding: 5px 10px 5px 10px;  }} @media (max-height: 666px) {div.leftside a img.heavy { width: 100px; } div.leftside p.fquote { font-size: 0.55rem; min-width: 150px; } header > div.leftside { width: 120px;  }} @media (max-height: 400px) {header > .center { font-size: 1.2rem; } div.leftside p.fquote { display: none;;  } div.center p.fquote { display: inline-block; animation: lil-delay 2s linear;  } header > div:not(.center) { width: 120px;  } .leftside ul { top: 120px; } .flex-container.body > div.center  { min-height: unset; }} @media (min-width: 1200px) {.flex-container.body > div.center { padding-left: calc(20vw - 220px); padding-right: calc(20vw - 220px); padding-top: calc(6vh - 40px); padding-bottom: calc(4vh - 10px);} div.flex-container, header.flex-container { margin-left: 25px; margin-right: 25px; } .foot > .center > ul { justify-content: space-between; padding-left: calc(18vw - 220px); padding-right: calc(18vw - 220px); } .expandAll, .implodeAll {margin-right: calc(14vw - 170px);}} @media (min-width: 1400px) {body { max-width: 1400px; margin-left: calc(calc(100vw - 1400px) / 2); } .flex-container.body > div.center { padding-left: 60px; padding-right: 60px; } .expandAll, .implodeAll { margin-right: 30px; } div.leftside a img.heavy { width: 180px; }} @media (prefers-reduced-motion: reduce) {div.wsd-zoom {animation: none; } header.flex-container img {animation: none; }}