/*  Wijn & Dijn
    wijnendijn.nl
    site144
    By Primosite - primosite.nl
----------------------------------------------------- */
@import "wend-vars-v2.0.css";

/* STRUCTURE
----------------------------------------------------- */
html {
  font-family: 'Roboto', sans-serif;
  font-size:var(--font0);
  line-height:1.5;
}

#header-wrapper {
  width:100%;position:fixed;z-index:2;background-color:white;
  box-shadow:var(--boxShadow);
}
#header { margin:0 auto;
  display:flex;flex-flow:row wrap;align-items:flex-end;}
#version {position:absolute;top:0;right:0;
  padding:.75em 1em;text-transform:uppercase;
  background-color:var(--red);color:white;}
#logo {
  flex-basis:250px;height:80px;margin: 0 1em 1em 0;
  background-image:url(/images/layout/wend-logo.png);
  background-repeat:no-repeat;
  background-size:auto 100%;
  background-position:50%;
}
#cart {flex-basis:100%;margin-bottom:.5em;}
#menu {flex-grow:1;}
#menu ul.level1 {display:flex;flex-flow:row wrap;justify-content:flex-start;}
#menu li.level1 {flex-basis:100px;position:relative;}
#menu li {margin: 0 .5em .5em;}
#menu a {display:flex;align-items:baseline;padding:0 2em .25em 2em;text-align:center;border-bottom:solid 3px white;}
#menu a.level1:hover,#menu a.level.active {border-color:var(--red);}
#menu a.level1 {display:flex;flex-flow:column;align-items:center;}
#menu a.level2 {padding:0 1em;white-space:nowrap;}
#menu a.level2:before {color:var(--red);margin-right:.5em;}

#menu li.level1 > div.submenu {
  border-top:solid 3px var(--red);margin-top:-3px;
  background-color:white;box-shadow:var(--boxShadow);
  position:absolute;max-height:0;overflow:hidden;z-index:2;font-size:0px;
  transition:max-height .25s linear .75s, padding .25s linear .75s, font-size .125s linear .75s;}
#menu li:hover > div.submenu {
  max-height:500px;padding:2em 3rem 1rem;
  font-size:var(--font1);
  transition:max-height .25s linear 0s, padding .25s linear 0s, font-size .25s linear 0s;}

#main-wrapper {display:flex;flex-flow:column;min-height:100vh;}
#wrapper {width:100%;flex-grow:1;padding:0 0 calc(50px + 1em);margin:0 auto;position:relative;z-index:1}

#content-wrapper {}

#footer {width:100%;padding:0 0;text-align:center;background-color:var(--green);
  display:flex;align-items:center;justify-content:center;}
.footerlinks{flex-grow:1;max-width:600px;}
#footer ul.menu {display:flex;flex-flow:row wrap;justify-content:center;}
#footer li.level1 {display:flex;margin:2px;flex-grow:1;}
#footer a {color:#fff;width:100%;min-height:30px;padding:3px;
  text-transform:uppercase;font-size:10px;}
#footer a:before {display:block;width:100%;text-align:center;font-size:200%;padding:0;margin:0;}
#footer a.nix18:before,
#footer a.anbi:before {content:" ";height:1em;
  background-image:url(/images/layout/nix18-white.png);
  background-repeat:no-repeat;
  background-size:100%;
  background-position:50%;
}
#footer a.anbi:before{background-image:url(/images/layout/anbi-white.png);}
#footer a.nix18:before {background-image:url(/images/layout/nix18-white.png);}

@media print {    
  #header-wrapper, #footer * {display: none !important;}
  #wrapper {padding-top:0;}
}

#placeholder {text-align:center;padding-top:2em;font-size:300%;}

/* MAIN WIDTH */
#header,
.content > .aclgroupnode-wrapper,
.content > .aclgroup,
.content > .aclgroupnode-wrapper.usermgt,
.content > .blends-wrapper,
.content > .catalog-wrapper,
.content > .checkoutform-wrapper,
.content > .emailformbox,
.content > .html,
.content > .import-wrapper,
.content > .informationgroup-wrapper,
.content > .members-wrapper,
.content > .my-wrapper,
.content > .library-wrapper,
.content > .notebook-wrapper,
.content > .orderbook,
.content > .orderpayments,
.content > .recipes-wrapper,
.schoolguide-wrapper .paragraph-wrapper.hasimage,
.content > .sitemap,
.content > .taggroup-wrapper,
.content > .users-wrapper,
.content > .webshop {width:var(--mainW);max-width:var(--maxW);margin-left:auto;margin-right:auto;}

/* CONTENT WIDTH */
.content > .actionform,
.content > .agenda-wrapper,
.content > .emailform-wrapper,
.content > .error-wrapper,
.content > .folder,
.content > .information-wrapper,
.content > .invoicer-wrapper,
.content > .koffermgt-wrapper,
.content > .mailr-wrapper,
.content > .multiple.news,
.content > .news-wrapper > .news,
.content > .notebook,
.content > .order,
.content > .pricetags-wrapper,
.content > .productform,
.content > .productoverview,
.content > .psform-wrapper,
.schoolguide-wrapper .schoolguide,
.schoolguide-wrapper .paragraph-wrapper:not(.hasimage),
.content > .siteparameters,
.content > .taggroup,
.content > .video-wrapper,
.content > .webshop .product,
.content > .xlocations-wrapper {width:var(--contentW);max-width:var(--maxW);margin-left:auto;margin-right:auto;}

/* LOGIN WIDTH */
.content .actionform.login,
.content .Usernamepassword,
.content > .signin-wrapper,
.content > .passwordreminder-wrapper,
body > .signin-wrapper,
body > .passwordreminder-wrapper {width:var(--loginW);max-width:var(--maxW);margin-left:auto;margin-right:auto;}


/* DEFAULTS
----------------------------------------------------- */
* {margin:0;padding:0;}
a {color:inherit;text-decoration:none;}
h1,h2,h3,h4,h5,h6 {}
h1 {margin-bottom:1em;color:var(--red);}
h2,h3,h4,h5,h6 {margin:1em 0 .5em;color:var(--green);}
p {margin-bottom:1em;}
#content ul,#content ol {margin-bottom:1em;}
table {width:100%;}
th {text-align:left;}
th,td {vertical-align:top;}
.menu li {list-style:none;}
.menu li:before {display:none;}
#content a,.ps-alert a {border-bottom:dotted 1px;}
#content a:hover,.ps-alert a:hover {border-bottom:solid 1px;} 

#content div.relatedlink {display:flex; align-items: baseline;}
#content div.relatedlink .editwrapper {margin-right:.5rem;}
#content div.relatedlink.cta:before {display:none;}
#content a.cta {border:none;padding:.5em 1em;border-radius:5px;
  background:var(--red);color:white;font-weight:var(--fontBold);}
#content a.cta:hover {background-color:var(--darkRed);}


#content .imagelink,#content .imagelink:hover {border:none;}
button {font-size:inherit;border:none;}
button:hover {background-color:#d82717;color:white;}
button.submit,button[type=submit] {background-color:var(--red);}
button.submit:hover,button[type=submit]:hover {background-color:var(--darkRed);}
button.close {background-color:var(--red);color:white;}
button.close:hover {background-color:var(--darkRed);}
button.back {background-color:var(--blue);color:white;}
button.back:hover {background-color:var(--darkBlue);}

button.no {background:#ddd;color:#888;}
button.no:hover {background:#ccc;color:#444;}
button[disabled]{background-color:#ddd;color:#aaa;}
button b {display:none;}
#content .image {
  background-size:100%;
  background-position: 50%;
  background-repeat:no-repeat;
}
#content .image > img {max-width:100%;display:block;margin:0 auto;}
#content ol, #content ul {margin-left:2em;}
#content li {clear:left;}
#content .field {display:flex;flex-flow:row wrap;padding:.5em 0;border-bottom:dotted 2px var(--green); }
#content .fieldheader {flex-basis:190px;flex-grow:1;margin-right:1em;color:#1c3c72;font-weight:bold;}
#content .fieldvalue {flex-basis:calc(100% - 190px - 1em);min-width:300px;flex-grow:1;}
#content > .newsletteroptin {max-width:600px;margin:0 auto;}
#content .nothinghere {padding:2em;text-align:center;font-size:200%;}
#content .relatedlink > a > img {max-width:100%;}
.clubs .relatedlinks {display:flex;flex-flow:row wrap;justify-content:center;}
.relatedlink.club {flex-basis:250px;background:#0048A3;margin:1em;border-radius:3px;padding:4px;position:relative;
box-shadow:0 0 5px #fff;}
.relatedlink.club:hover {box-shadow:0 0 15px #fff;}
.relatedlink.club > .editwrapper {position:absolute}
.relatedlink.club > a {display:block;padding:.5em 2em;border:solid 2px #fff!important;border-radius:5px;
  color:#fff;font-size:30px;}
#content .text {margin-bottom:1em;}
#content .image > img {max-width:100%;max-height:100%;}

/* ps-alert */
.ps-alertwrapper h1 {font-size:var(--font3)}
button.ps-alertbutton {background-color:var(--blue);color:white;}
button.ps-alertbutton:hover {background-color:var(--darkBlue);}

/* sharethis */
#content .sharethis {margin:1em 0 0;}
#content .sharelinks {margin:0 -1em;}
#content .sharelink {border:none;margin:1em;width:40px;height:40px;opacity:.5;}
#content .sharelink:hover {border:none;opacity:1;}
.sharelink.facebook {background-color:#3b5998;}
.sharelink.twitter {background-color:#55acee;}
.sharelink.googleplus {background-color:#e02f2f;}
.sharelink.linkedin {background-color:#007bb5;}
.sharelink.permalink {background-color:#444;}
.sharelink.whatsapp {background-color:#57bb63;}

#main-wrapper .vatExcl {display:none;}

/* ACLGROUP(NODE)
----------------------------------------------------- */
.aclgroupnode {display:flex;flex-flow:row wrap;}
.aclgroupnode-index {flex-basis:300px;flex-grow:1;}
#content .aclgroupnode-indexitem a {border:none;display:block;}
.aclgroupnode-indexitem a:hover,
.aclgroupnode-indexitem.active a{background:#eee;}
.aclgroup {flex-basis:500px;flex-grow:1;}
.userrow,
.userrowlink,
.userrow .image {display:flex;align-items:center;}
#content .userrowlink {border:none;}
.userrow span {margin-right:.5em;}
.userrow .image {width:20px;margin:0 .5em 0 0!important;}


/* AGENDA
----------------------------------------------------- */
/* associates */
.associates {padding-top:2rem;}
.associates .agendaitems {}
.associates .agendaitem-wrapper {margin:0 0 1rem;padding:1rem;
  box-shadow:var(--boxShadow);
}
.associates .image {max-width:var(--logoW);margin:1rem 0;}
.associates .ps-date:before {color:var(--red);margin-right:.5em;font-weight:var(--fontMedium);}
.associates .startdate .ps-date:before {content:"Sinds";}
.associates .enddate .ps-date:before {content:"Einde";}
.associates .ps-time {display:none;}
.associates .text {margin-top:1rem;}

/* CONTACTDATA
----------------------------------------------------- */
.contactdata {display:flex;flex-flow:row wrap;}
.contactdata > * {flex-basis:100%;display:flex;}
.contactdata > *:before {margin-right:.5em;color:var(--green);flex-basis:50px;}
.contactdata .name {font-weight:var(--fontBold);}
.contactdata .zip {flex-basis:4.5em;}
.contactdata .city {flex-basis:100px;flex-grow:1;}
.contactdata .country {margin-bottom:1em;}
.contactdata .email {margin-bottom:1em;}
.contactdata .bank:before {content:"Bank"}
.contactdata .coc:before {content:"KvK"}
.contactdata .vat:before {content:"BTW nr"}

/* EMAILFORM
----------------------------------------------------- */
.emailform-body {display:flex;flex-flow:row wrap;}
.emailform-body > * {flex-basis:40%;min-width:300px;flex-grow:1;}


/* EMAILFORMBOX
----------------------------------------------------- */
.emailformbox .emailheader {display:flex;justify-content:space-between;align-items:center;}
.emailformbox .email {padding:.5em 0;border-bottom:solid 1px;}
.emailformbox .email .editwrapper {float:none;}
.emailformbox h2 {margin:0 0 1em;}
.emailformbox .field {padding:.25em 0;margin:0;border-bottom:solid 1px #ccc;}
.emailformbox .field:last-child {border-bottom:none;}

/* FORM
----------------------------------------------------- */
#content .formelement {margin-bottom:.5rem;}
#content .formfield {display:flex;flex-flow:row wrap;align-items:baseline;}
#content .formfield > *:not(button) {flex-grow:1;}
#content label input[type="checkbox"] {margin-right:.5rem;}
#content label input[type="radio"] {margin-right:.5rem;}

#content form.login .formelement {width:100%;flex-flow:column;}

form.Product .formelement.tags {display:flex;flex-flow:row wrap;}
form.Product  .checkboxitem {flex-basis:24%;flex-grow:0;margin-right:1%;min-width:200px;
  display:flex;}
form.Product .checkboxitem input {flex-basis:1.5em;}
form.Product .checkboxitem label {flex-basis:100px;flex-grow:1;}

/* INFORMATION
----------------------------------------------------- */
.information-wrapper {padding-top:2rem;text-align:center;}

/* LINKOVERVIEW
----------------------------------------------------- */
.linkoverview.clubs .links {display:flex;flex-flow:row wrap;justify-content:center;}
.linkoverview.clubs .link {background:#0048A3;margin:1em;border-radius:3px;padding:4px;position:relative;
box-shadow:0 0 5px #fff;}
.linkoverview.clubs .link:hover {box-shadow:0 0 15px #fff;}
.linkoverview.clubs .link > .editwrapper {position:absolute}
.linkoverview.clubs .link > a {display:block;padding:.5em 2em;border:solid 2px #fff!important;border-radius:5px;
  color:#fff;font-size:30px;}

/* NEWS
----------------------------------------------------- */
.newsitem {width:calc(100% - 2em);max-width:800px;margin:0 auto 2em;}
.newsitem > h2 {text-align:center;}
.newsindex {display:flex;flex-flow:row wrap;justify-content:center;}
.newsindex > .indexitem-wrapper{margin:1em;padding:1em;flex-basis:200px;flex-grow:1;max-width:300px;
  display:flex;
  border:solid 1px #BDA073;font-size:75%;text-align:center;position:relative;}
.newsindex > .indexitem-wrapper .editwrapper {position:absolute;}
.newsindex .indexitem {display:flex;flex-flow:column;justify-content:space-between;}
.newsindex .indexitem > h3 {order:2;min-height:4em;}
.newsindex .indexitem > .text {order:3;flex-grow:1;}
.newsindex .indexitem > .more {order:5;}
.newsindex .indexitem > .image1 {order:4;height:200px;}
.newsindex .indexitem > .image2 {order:1;height:232px;}
.newsindex .indexitem .image img {height:200px;}

/* NEWSLETTER */
.enewsletter > * {background:#eee;padding:1em 1em 1em;display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1em;}
.enewsletter h2 {background:none;padding:0;margin:0;font-size:125%;}
.enewsletter button {width:200px;}
.enewsletter > form > div {width:calc(100% - 250px);}
.enewsletter .senddates {display:flex;margin:0 -.5em}
.enewsletter .senddates > * {margin:0 .5em;background:#ddd;padding:.5em;flex-grow:1;}
.enewsletter textarea {border:solid 1px #ccc;width:100%;padding:.5em;}

/* ORDER
----------------------------------------------------- */
#content > .order .invoiceform {margin-bottom:2em;}
#content > .order .payment-wrapper {margin-bottom:2em;}
#content > .order .paymentstatus .payment {margin-bottom:1em;font-size:112.5%;font-weight:bold;}
#content > .order .paymentstatus .payment.ideal:before {content:"Betaald d.m.v. iDeal: ";}
#content > .order .paymentstatus .payment.banktransfer:before {content:"Betaald d.m.v. bankoverboeking: ";}

#content > .order .invoice {border:solid 1px #ccc;padding:1em;box-shadow:0 0 15px #ccc;}
#content > .order .invoiceheader {display:flex;flex-flow:row wrap;justify-content:space-between;margin-bottom:2em;}
#content > .order .invoiceheader .image {flex-basis:30%;min-width:300px;flex-grow:1;}
#content > .order .invoiceheader .colofon {flex-grow:1;text-align:right;}
#content > .order .invoiceheader .colofon .title {font-weight:bold;}
#content > .order .invoiceheader .colofon .title:after {content:" is een product van";}
#content > .order .invoiceheader .colofon .name {font-size:125%;font-weight:bold;margin-top:1em;}
#content > .order .invoiceheader .colofon .coc:before {content:"Kvk: ";font-weight:bold;}
#content > .order .invoiceheader .colofon .vat:before {content:"B.T.W. nr.: ";font-weight:bold;}

#content > .order .orderdate:before {content:"Factuurdatum: ";font-weight:bold;}
#content > .order .invoicenumber:before {content:"Factuurnummer: ";font-weight:bold;}
#content > .order .addresses {display:flex;flex-flow:row wrap;margin:1em -1em;}
#content > .order .addresses > * {margin:0 1em;flex-basis:300px;flex-grow:1;}
#content > .order .sendaddress:before {content:"Verzendadres";font-weight:bold;}
#content > .order .invoiceaddress:before {content:"Factuuradres";font-weight:bold;}
#content > .order .orderlines {border-top:solid 1px;}
#content > .order .orderline {display:flex;flex-flow:row wrap;margin:1em -.5em;}
#content > .order .orderline > * {margin:0 .5em;display:flex;flex-flow:column;}
#content > .order .orderline > *:before {font-size:75%;color:#BDA073;}
#content > .order .orderline .productid {flex-basis:100px;}
#content > .order .orderline .productid:before {content:"Productcode";}
#content > .order .orderline .producttitle {flex-grow:1;}
#content > .order .orderline .producttitle:before {content:"Omschrijving";}
#content > .order .orderline .qty {align-items:center;}
#content > .order .orderline .qty:before {content:"Aantal";}
#content > .order .orderline .price {align-items:flex-end;;}
#content > .order .orderline .price:before {content:"Prijs/stuk";}
#content > .order .orderline .totalprice {align-items:flex-end;}
#content > .order .orderline .totalprice:before {content:"Totaal";}
#content > .order .orderline .purchaseprice {flex-basis:75px;align-items:flex-end;color:red;background:#eee;padding:0 3px;border-radius:3px;}
#content > .order .orderline .purchaseprice:before {content:"Inkoop ex btw";color:darkred;}

#content > .order .ordertotalprice {text-align:right;margin-top:2em;}
#content > .order .ordertotalprice:before {content:"Excl. B.T.W.";font-weight:bold;margin-right:1em;}
#content > .order .ordertotalvat {text-align:right;margin-bottom:2em;}
#content > .order .ordertotalvat:before {content:"B.T.W. (21%)";font-weight:bold;margin-right:1em;}
#content > .order .ordertotal {text-align:right;border-top:solid 1px;font-weight:bold;font-size:125%;margin-bottom:1em;}
#content > .order .ordertotal:before {content:"TOTAAL";margin-right:1em;}

#content > .order .associate {margin:2rem 0;}
#content > .order .image {margin-top:2rem;max-width:var(--logoW);}
#content > .order .title {margin-top:2rem;font-weight:var(--fontBold);font-size:var(--font2);}
#content > .order .associate {margin-top:2rem;}


/* ORDERMANAGEMENT
----------------------------------------------------- */
.ordermgt h2,.ordermgt h3 {text-transform:capitalize;}
#content .ordermgt .delete {border:none;font-size:18px;}
.ordermgt .orders-wrapper {border:solid 1px #BDA073;padding:0 .5em .5em;margin-bottom:.5em;}
.ordermgt .orders-wrapper > h3 {display:flex;justify-content:space-between;}
.ordermgt .order {margin-bottom:2px;display:flex;align-items:center;background:#eee;}
.ordermgt .orderdata {font-size:12px;flex-grow:1;display:flex;align-items:center;}
#content .ordermgt .orderlink {flex-grow:1;border:none;background:#eee;padding:.25em 0;
  display:flex;flex-flow:row wrap;justify-content:space-between;}
#content .legend {margin:0 -.25em .5em;}
#content .legend span {margin:.25em;padding:.5em 1em;font-size:75%;}
#content .legend .paid {background:#bffcc3;}
#content .legend .open {background:#f7bebe;}
#content .legend .cancelled {background:#fcf3b0;}
#content .legend .expired {background:#eee;}
#content .ordermgt .orderlink:hover {background:#ccc;}
#content .ordermgt .paid .orderlink {background:#bffcc3;}
#content .ordermgt .open .orderlink {background:#f7bebe;}
#content .ordermgt .cancelled .orderlink {background:#fcf3b0;}
#content .ordermgt .orderlink:hover {background:#003770;color:white;}
.ordermgt .orderlink span {margin:0 .25em;}
.ordermgt .orderlink .date {flex-basis:70px;}
.ordermgt .orderlink .orderrid {flex-basis:60px;}
.ordermgt .orderlink .company1 {flex-basis:100px;flex-grow:1;}
.ordermgt .orderlink .attn1 {flex-basis:100px;flex-grow:1;}
.ordermgt .orderlink .email {flex-basis:150px;flex-grow:1;}
.ordermgt .orderlink .method {flex-basis:60px;}
.ordermgt .orderlink .amount {flex-basis:80px;text-align:right;}

.ordermgt .orderdata .paymentstatus {flex-basis:100px;min-width:100px;}
.ordermgt .orderdata .paymentstatus select {width:100%;position:relative;z-index:1;}

.ordermgt .orderline {overflow:auto;clear:left;background:#e2dbd3;margin-bottom:.25em;padding:.5em;}
.ordermgt .orderlineitem {display:block;float:left;}
.ordermgt .orderlineitem.productid {width:100px;}
.ordermgt .orderlineitem.producttitle {width:500px;}
.ordermgt .orderlineitem.qty {width:50px;}
.ordermgt .orderlineitem.productprice {width:100px;text-align:right}
.ordermgt .orderlineitem.orderlineprice {width:100px;float:right;text-align:right}

.orderpayment {text-align:right;padding:.5em;}
.orderpayment .method.creditorder:after {content:"Op rekening: ";}
.orderpayment .method.ideal:after {content:"iDeal: ";}
.orderpayment .amount {margin:0 .5em}

.orderpayment.open {background:red;color:#fff;}
.orderpayment.paid {background:green;color:#fff;}
.orderpayment.cancelled {background:orange;color:#fff;}

/* ORGANIZATIONS
----------------------------------------------------*/
.organizations-wrapper .count {font-size:150%;text-align:center;margin:0 0 1em 0;}
.organizations-wrapper > .organizations {display:flex;flex-flow:row wrap;margin:1em;justify-content:center;}
.organizations-wrapper > .organizations > div {flex-basis:250px;max-width:480px;margin:1em;padding:1em;flex-grow:1;box-shadow:3px 3px 5px #999}

.organizations-wrapper .organization {position:relative;background:#E1ECF2;border:solid 1px #b3cfdd;
  text-align:center;;}
#content .organization .image {margin:0;height:220px;background-size:cover;background-position:50%;}
.organization .editwrapper {position:absolute;top:0;left:0;}
.organizations-wrapper .Title {font-weight:bold;font-size:18px;}
.organizations-wrapper .Name {width:80px;height:60px;padding-top:20px;
  font-family:sans-serif;font-weight:bold;font-size:24px;color:#fff;
  position:absolute;top:80px;left:50%;margin:0 0 0 -40px;
  background-image: url(/images/layout/rally-startnumber.png);
  background-size:auto 100%;
  background-repeat:no-repeat;
  background-position:50%;
}
.organizations-wrapper .Person > .person {position:relative;text-align:left;}
.organizations-wrapper .Person > .person > span {display:inline-block;width:80px;font-style:italic;margin-right:.5em;}
.organizations-wrapper .Person > .person > span:after {content:":";}

/* PRODUCTOVERVIEW
----------------------------------------------------- */
.productoverviewrow {
  display:flex;flex-flow:row wrap;align-items:baseline;
  margin-bottom:.5rem;}
.productoverviewrow .editwrapper {margin-right:.5rem;}
.productoverviewrow .productrid {flex-basis:100px;}
.productoverviewrow .productid {flex-basis:100px;}
.productoverviewrow .producttitle {flex-grow:1;}

/* SCHOOLGUIDE
----------------------------------------------------- */
.schoolguide-wrapper > .image {height:var(--bannerH);width:100%;}
.schoolguide-wrapper.hasimage {position:relative;}
.schoolguide-wrapper.hasimage h1 {
  position:absolute;top:3vw;left:0;padding:1rem 4rem;
  color:white;font-size:var(--font20);
  background-color: rgba(0, 0, 0, 0.3);  
}
.schoolguide-wrapper.hasimage .schoolguide {margin-top:2rem;}
.paragraph-wrapper.hasimage {display:flex;flex-flow:row wrap;}
.paragraph-wrapper.hasimage > * {flex-basis:40%;flex-grow:1;margin:1rem;min-width:var(--minW);}
.schoolguide-wrapper .paragraph-wrapper .image {min-height:var(--minW)}


/* SITEMAP
----------------------------------------------------- */
#content > .sitemap {display:flex;flex-flow:row wrap;justify-content:center;}
#content > .sitemap > .subsitemap {flex-basis:300px;margin:1em;}
#content .sitemap li {display:flex;flex-flow:row wrap;align-items:baseline;margin:.5rem 0;}
#content .sitemap li .editwrapper {margin-right:.5em;}

/* WEBSHOP
----------------------------------------------------- */
.webshop {display:flex;flex-flow:row wrap;}
/* webshop general */
.webshop .unit {display:flex;justify-content:center;font-style:italic;font-size:12px;}
.webshop .unit > span {margin:.125em;}
.webshop .unit .casing {text-transform:capitalize;}
.webshop .pricingremarks {text-align:right;font-weight:bold;font-size:87.5%;color:#ba2c1f;}
.webshop .productprice {margin:0 0 .5em;display:flex;flex-flow:column;align-items:center;}
.webshop .productprice .priceamount {font-size:112.5%;font-weight:bold;}
.webshop .productprice .vat {font-style:italic;font-size:12px;margin-top:.5em;}
.webshop .productprice .vat:before {content:"Incl. "}
.webshop .productprice .vat:after {content:" B.T.W."}
.webshop .productprice .vat.Inclusief:before {content:"Incl. ";}
.webshop .pricecurrency {margin-right:.5em;}

.order-button {display:flex;flex-flow:row wrap;justify-content: center;align-items:center;}
.order-button input {flex-basis:1rem;width:2rem;text-align:center;font-size:var(--font0);padding:.25rem;margin:.5rem 0;}
button.qty-adjust {
  align-self:center;margin:.5rem;width:1.5rem;height:1.5rem;max-width:1.5rem;max-height:1.5rem;
  border-radius:50%;font-size:var(--font-2);
  display:flex;justify-content:center;align-items:center;background-color:var(--blue);color:white;
}
button.qty-adjust:hover {background-color:var(--darkBlue)}
button.addtocart {
  flex-basis:10%;font-size:var(--font5);background-color:var(--red);color:white;
  border-radius:3px;margin:0 .5rem;padding:.5rem;
  display:flex;align-items: center;
}
button.addtocart:hover {background-color:var(--darkRed);}

/* webshopselecion */
.webshopselection-wrapper {flex-basis:200px;}
.webshopselection-trigger {display:none;}
.webshopselection {padding:0 1em 1em;}
.webshopselection .tagvalue {border-bottom:dotted 2px var(--green);padding:.5em 0;position:relative;cursor:pointer;}
.webshopselection .tagvalue label {font-size:var(--font0);display:flex;align-items:center;cursor:pointer;}
.webshopselection .tagvalue label span {position:absolute;left:0;padding-left:1.5em;line-height:1}
.webshopselection > .close {display:none;}

/* productfolder */
.productfolder {flex-basis:300px;flex-grow:8;margin-top:1em;}
.shortproducts {display:flex;flex-flow:row wrap;justify-content:center;}
.shortproduct-wrapper {position:relative;
  flex-basis:160px;flex-grow:1;max-width:240px;
  display:flex;flex-flow:column;
  padding:.25em;margin:0 .25em .5em;
  border:solid 1px var(--tintGrey);background-color:white;
}

.shortproduct-wrapper .editwrapper {position:absolute;top:0;left:0;z-index:1;}
.shortproduct-wrapper h3 {
  flex-basis:100%;display:flex;align-items:center;justify-content:center;
  margin-top:0;color:var(--red);text-align:center;}

.shortproduct {flex-grow:1;margin-bottom:1em;
  display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;}
.shortproduct-data {display:flex;flex-flow:row;justify-content:space-between;align-items:flex-end;}
.shortproduct .image {flex-basis:30%;flex-grow:1;}
.shortproduct .image img {height:150px;}
.shortproduct .ordering-data {flex-basis:60%;}

/* product details */
.product {margin:0 auto;padding-top:1em;display:flex;flex-flow:row wrap;justify-content:center;}
.product > h1 {flex-basis:100%;margin-top:1em;}
#content .product > .image {flex-basis:100px;max-width:200px;flex-grow:1;margin:1em;}
.productdata {flex-basis:400px;flex-grow:1;}
.product .text {margin:1em 0 0;}
.product .ordering-data {display:flex;flex-flow:column;align-items:flex-start;}
.product .pricingremarks {font-size:112.5%;font-weight:bold;}
.product .priceamount {font-size:125%;font-weight:bold;margin:0 0 .5em;}
.product .pricecurrency {margin-right:.5em;}

/* multi-order */

.multi-order-product {display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;border-bottom:solid 1px #ccc;font-size:14px;}
#content .multi-order-product>* {margin:.5em;font-size:inherit;font-weight:inherit;}
.multi-order-product .productprice {}
.multi-order-product .image {width:12px;:50px;}
.multi-order-product .product-title {flex-grow:1;}
.multi-order-product input {background-color:#eee;border:solid 1px #ccc;border-radius:5px;text-align:center;}

/* cart */
#cart {background-color:var(--blue);position:relative;box-shadow:var(--boxShadow);color:white;}
#cart .cart-header {color:var(--darkBlue);padding:.5em;margin:0 1em 0 0;
  display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative;}
#cart .cart-header > * {margin:0 5px;}
#cart .cart-header .title {font-size:var(--font2);font-variant:small-caps;color:white;}
#cart .cart .nrItems {line-height:1;padding:.5em 1em .5em 1em;text-align:center;font-weight:bold;font-size:75%;
  margin:0 .5em;border-radius:2em;background:var(--red);color:white;}
#cart .cart .nrItems:before {margin-right:1em;font-size:125%;color:white;}
#cart .cart button.checkout {font-size:var(--font-1);background-color:var(--red);color:white;padding:.5em 2em .5em 1em;}
#cart .cart button.checkout:before {font-size:125%;}
#cart .cart .items-wrapper {flex-basis:100%;left:0;padding:0 1em;}
#cart .cart .items {max-width:900px;margin:1em auto 1em;}
.cart .item {display:flex;flex-flow:row wrap;align-items:baseline;padding:0;}
.cart .item > span {margin:.25em;}
.cart .item .delete {color:inherit;}
.cart .item > .item-data {flex-basis:100px;flex-grow:99;}
.cart .item > .item-data > span {display:inline-block;margin-right:.25em;}
.cart .item .productId {width:80px;}
.cart .item .qty {padding:0 .5em;;background:var(--darkBlue);color:white;border-radius:2px;}
.cart .item .qty:after {content:" x ";}
.cart .item .packagingQty.fles {display:none;}
.cart .item .packagingQty:before {content:"met ";}
.cart .item .packagingQty:after {content:" fles(sen)";}
.cart .item .casing:first-letter {text-transform:uppercase;}
.cart .item.vat .text {flex-grow:99;text-align:right;}
.cart .item.vat .totalPrice {padding:0 0 .5em;border-bottom:solid 1px;}
.cart .item .productPrice {flex-basis:100px;text-align:right;}
.cart .item .productPrice:before {content:"à ";}
.cart .item .totalPrice {flex-basis:90px;flex-grow:1;text-align:right;}
.cart .item .deliverytext {flex-grow:999;}
.cart .item .deliverycosts {flex-basis:100px;flex-grow:1;text-align:right;}

.cart .subgrandtotal {border-top:solid 1px;}
.cart .total {flex-grow:1;text-align:right;font-weight:var(--fontBold);}
.cart .subgrandtotal .total:before {content:"Subtotaal";margin-right:.5em;}
.cart .vat .total:before {content:"BTW";margin-right:.5em;}
.cart .grandtotal {border-top:solid 1px;}
.cart .grandtotal .total:before {content:"Totaal";margin-right:.5em;}

#cart .items-wrapper {position:relative;overflow:auto;
  max-height:0;overflow:hidden;transition:max-height 1s linear 0s;}
#cart.open .items-wrapper {max-height:500px;}
#cart .items-wrapper .close {display:none;}
#cart .title:before {transition:transform .5s linear 0s;}
#cart.open .title:before {transform: rotate(180deg);}

/* checkout */
.checkoutform-wrapper {display:flex;flex-flow:row wrap;align-items:flex-start;
}
.checkout-nav {flex-basis:100%;margin:1rem;color:var(--red);}
.checkout-nav a {border:none!important;}
.checkout-credits {flex-basis:var(--asideW);margin-top:4rem;}
.checkout-credits .associate {padding:1rem;box-shadow:var(--boxShadow;)}
.checkout-credits .title {color:var(--red);font-size:var(--font5);margin-bottom:1em;}
.checkoutform {flex-basis:40%;flex-grow:1;margin:1rem;padding:1rem;box-shadow:var(--boxShadow);
  padding-top:100px;
  background-image:url(/images/layout/wend-logo.png);
  background-repeat:no-repeat;
  background-size:auto clamp(80px,15vw,130px);
  background-position:50% 1rem;
}
.checkoutform h1 {margin-top:2rem;}
.checkoutform .fieldlabel {flex-basis:10%;min-width:200px;}
.checkoutform input,.checkoutform textarea {border:solid 1px #ccc;padding:.5em;background:#eee;}
.checkoutform .orderitems {margin-bottom:2em;}
.checkoutform .mandatory {margin-bottom:1em;}
.checkoutform .mandatory:after {content:"*";color:red;color:red;}
.checkoutform .mandatory:before {content:"Verplichte velden zijn gemarkeerd met ";}
.checkoutform .formelement.required .fieldlabel:after {content:"*";color:red;top:-.25em;position:relative;}
.checkoutform .formelement.buttons {margin:3em 0 0;}
.checkoutform input.error,.checkoutform input.error {border-color:red;}
.checkoutform label.error {color:red;display:block;margin-bottom:.5em;}
.checkoutform .addresses {display:flex;flex-flow:row wrap;margin:1em -1em;}
.checkoutform .address {flex-basis:40%;flex-grow:1;margin:1em;}
.checkoutform .address h2 {margin-top:0;}
.checkoutform .giftselection {margin-bottom:3em;display:flex;flex-flow:column;}
.checkoutform .giftvalue {margin-left:.25em}
.checkoutform .gifttitle {font-weight:bold;}
.checkoutform .giftvalue:before {content:"ter waarde van ";}
.checkoutform .terms label {flex-basis:100px;flex-grow:1;}

/* checkpayment */
.checkpayment h1 {text-align:left;}
.checkpayment .addresses {margin:1em -1em 2em;display:flex;flex-flow:row wrap;}
.checkpayment .address {flex-basis:40%;margin:0 1em 1em;flex-grow:1;min-width:300px;}
.checkpayment .sendaddress:before {content:"Verzendadres";font-weight:bold;}
.checkpayment .invoiceaddress:before {content:"Factuuradres";font-weight:bold;}
.checkpaymentorderline {display:flex;flex-flow:row wrap;justify-content:space-between;align-items:baseline;
  border-bottom:solid 1px #ccc;padding:.5em 0;margin:.5em 0;font-size:14px;}
.checkpaymentorderline div {}
.checkpaymentorderline .productid {flex-basis:120px;}
.checkpaymentorderline .producttitle {flex-basis:200px;flex-grow:8;}
.checkpaymentorderline .qty {flex-basis:30px;text-align:center;background:#000;color:#fff;border-radius:5px;}
.checkpaymentorderline .price {flex-basis:60px;flex-grow:2;text-align:right;}
.checkpaymentorderline .totalprice {flex-basis:90px;flex-grow:1;text-align:right;font-weight:bold;}
.ordertotal,.shippingcosts {text-align:right;}
.ordertotal {font-weight:bold;}
.ordertotal:before {content:"TOTAAL";margin-right:1em;}
.checkpayment .remarks {margin:2em 0;border:solid 1px #ccc;padding:1em;}
.checkpayment .msg2 {padding:1em;background:#eee;}
.checkpayment .cancelled,.checkpayment .denied {background-color:red;color:#fff;text-align:center;padding:1em;border-radius:5px;box-shadow:0 0 15px #666;}
.checkpayment .colofon {display:flex;flex-flow:row wrap;align-items:flex-end;border-top:solid 3px #ccc;}
.checkpayment .colofon h4 {flex-basis:100%;text-align:center;}
.checkpayment .colofon > div {flax-basis:40%;flex-grow:1;}
.checkpayment .colofon .financial {text-align:right;}
.checkpayment .colofon > .financial > div:before {font-weight:bold;font-style:italic;margin-right:.5em;}
.checkpayment .colofon .bank:before {content:"Bank";}
.checkpayment .colofon .coc:before {content:"KvK";}
.checkpayment .colofon .vat:before {content:"BTW";}

/* TAGS */
.taggroup {overflow:auto}
.taggroup h2,.taggroup h3 {margin:0 0 1em;}
.taggroup .tagtypes {width:20%;float:left;}
.taggroup .tagtype {width:25%;float:left;}
.taggroup .tagvalue {width:55%;float:left;}