* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

html { min-height: 100%; }

html,
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    background-color: #fff;
    color: #444;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0px;
}

.construction-img {
    display: block;
    margin: 0 auto;
}


/* ------------------------------------------- */
/* REUSABLE */
/* ------------------------------------------- */

.row {
    margin: 0 auto;
    max-width: 1140px; 
}

.box { margin: 1%; }

section { margin: 0px; }

#page-section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.btn-row {
    display: inline-block;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.nav-row {
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.div-row {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

/* ---------- Widgets ---------- */

.widgets {
    margin: 0px;
    border-left: 2px solid #aaa;
    float: right;
}

.checkout-btn {
    border-radius: 5px;
    float: right;
    font-size: 80%;
    background-color: #ddd;
    border: 2px solid #ccc;
}

/* ---------- Buttons ---------- */

.back-btn { 
    padding: 5px;
    border-radius: 10px;
}

.deliver-btn { 
    border-radius: 10px;
    padding: 5px;
}

.pay-btn { 
    border-radius: 10px;
    padding: 5px;
}

.btn-add {
    border: 1px solid transparent;
    text-align: center;
    background-color: #0da50d;
    border-radius: 3px;
    padding: 0px 10px;
}

.btn-remove {
    border: 1px solid transparent;
    text-align: center;
    background-color: #f08000;
    border-radius: 3px;    
    width: 20px;
    padding: 0px 10px;
    color: #000;
}

.btn-delete {
    border: 1px solid transparent;
    text-align: center;
    background-color: #d00000;
    border-radius: 3px;  
    width: 20px;
    padding: 0px 10px;
    color: #fff;
}

.btn-edit {
    border: 1px solid transparent;
    text-align: center;
    background-color: #ffd000;
    border-radius: 3px;  
    width: 20px;
    padding: 0px 10px;
    color: #000;
}

.save-btn {
    margin-top: 10px;
    border-radius: 10px;
    padding: 5px;
    display: block;
}

.cart-btn-delete {
    width: 20px;
    height: 20px;
    display: inline-block;
    cursor: pointer;
    background-color: #fff;
    border: none;
}

.cart-btn-add {
    width: 30px;
    height: 30px;
    background-color: #e1e8ee;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.cart-btn-remove {
    width: 30px;
    height: 30px;
    background-color: #e1e8ee;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}



/* ---------- Icons ---------- */

.winkelwagen-icon {
    font-size: 170%;
    margin-top: 0px;
}


/* ---------- Headers ---------- */

h1,
h2,
h3,
h4,
h5,
h6 { font-weight: 300; }

h1 {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 30px;
    font-size: 230%;
    word-spacing: 4px;
    letter-spacing: 1px;
}

h2 {
    font-size: 180%;
    word-spacing: 2px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

h3 {
    font-size: 110%;
    margin-bottom: 15px;
}

h4 {
    font-size: 100%;
    margin-bottom: 10px;
}

/* ---------- Paragraphs ---------- */

.long-p {
    line-height: 130%;
    width: 80%;
}

.payment-p {
    line-height: 130%;
    width: 100%;
    text-align: center;
}

.ondertitel {
    display: inline-block;
    color: #863d65;
}

/* ---------- Links ---------- */

.link:link,
.link:visited {
    font-weight: 600;
    color: #000;
    text-decoration: none;
}

.link:hover,
.link:active {
    font-weight: 700;
    border-bottom: 1px solid #e00000;
}


/* ------------------------------------------- */
/* HEADER */
/* ------------------------------------------- */

.header-home {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(img/header3.jpg);
    background-size: cover;
    height: 100vh;
    background-attachment: fixed;
}

/* ---------- Scroll div ---------- */

.scroll {
    padding-top: 60px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    letter-spacing: .1em;
    text-decoration: none;
    transition: opacity .3s;
/*    margin-left: -63px;*/
}

.scroll:hover {
    opacity: .7;
    text-decoration: none;
    color: #fff;
}

.scroll span {
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.scroll span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sahp 2s infinite;
    animation: sahp 2s infinite;
    box-sizing: border-box;
}

@-webkit-keyframes sahp {
    0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% { opacity: 1; }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% { opacity: 0; }
}

@keyframes sahp {
    0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% { opacity: 1; }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% { opacity: 0; }
}

/* ---------- Logo-text ---------- */

.logo-text {
    float: left;
    margin-left: 50px;
    color: #111;
    display: inline-block;
    text-align: center;
    letter-spacing: 1px;
}

.logo-text h2 {
    margin-top: 10px;
    font-size: 200%;
    margin-bottom: 10px;
    text-transform: none;
}

.logo-text p {
    font-size: 110%;
    margin: 0px;
}


/* ----------  NAVIGATION  ---------- */
/* ---------------------------------- */

/* ---------- Main nav ---------- */

.main-nav {
    display: block;
    margin-right: 50px;
    list-style: none;
    margin-bottom: 30px;
    font-size: 85%;
}

.main-nav li {
    display: inline-block;
    margin-left: 30px;
}

.main-nav .winkelwagen-li { margin-left: 50px; }

.main-nav li a:link,
.main-nav li a:visited {
    color: #111;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active {
    transition: border-bottom 0.2s;
    border-bottom: 2px solid #111;
}

/* ---------- Dropdown Menu --------- */

.dropdown-contents {
    display: none !important;
    position: absolute;
} 

.dropdown { display: inline-block; }



.dropdown-contents li {
    margin: 2px 0px;
    padding: 0px;
    width: 100px;
}

.dropdown-contents a {
    display: block;
    padding: 2px 5px 0px 0px; 
    background-color: transparent;
}

.dropdown-touch-big { display: none !important; }

/* ---------- Header nav ---------- */

.header-nav .main-nav { margin-top: 15px; }



/* ---------- Mobile nav ---------- */

.mobile-navicon {
    cursor: pointer;
    display: none;
    position: absolute;
    top: 20px;
}

.mobile-navicon i {
    font-size: 150%;
    color: #111;
}




/* ---------- Fixed nav ---------- */

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

/* ---------- Floating nav ---------- */

.float-nav { 
    background-color: rgba(254, 254, 254, 0.95);
    box-shadow: 0 2px 2px #eee;
}

.float-nav .main-nav { 
    margin-top: 15px;
}

.float-nav .logo-text h2 {
    margin-top: 5px;
    font-size: 150%;
    margin-bottom: 5px;
}

.float-nav .logo-text p { font-size: 90%; }

.float-nav .logo-text { margin-bottom: 5px; }


/* ---------- Page nav ---------- */

.page-nav { 
    background-color: #fefefe;
    box-shadow: 0 2px 2px #eee;
}

.page-nav .main-nav {
    margin-top: 15px;
}

.page-nav .logo-text h2 {
    margin-top: 5px;
    font-size: 150%;
    margin-bottom: 5px;
}

.page-nav .logo-text p { font-size: 90%; }

.page-nav .logo-text { margin-bottom: 5px; }

/* ------------------------------------------- */
/* FOOTER */
/* ------------------------------------------- */

footer {
/*    margin-top: 30px;*/
    padding-top: 30px;
    padding-bottom: 10px;
    background-color: #444;
    color: #e00000;
    font-size: 90%;
}

footer ul { list-style: none; }

footer p { 
    text-align: center; 
    display: block;
}

.footer-nav li {
    display: inline-block;
    margin-right: 10px;
}

.footer-nav a:active,  
.footer-nav a:visited, 
.footer-nav a {
    color: #888;
    text-decoration: none;
}

.footer-nav a:hover {
    color: #999;
    text-decoration: none;
}

.footer-nav { float: left; }

.footer-text {
    margin: 0 auto;
    margin-bottom: 20px;
    color: #888;
    font-size: 80%;
    width: 60%;
    text-align: center;
}

.madeby-text {
    color: #666;
    font-size: 70%;
    margin-bottom: 0px;
}

.madeby-text::before {
    width: 200px;
    height: 1px;
    background-color: #111;
    content: "  ";
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
}


/* ------------------------------------------- */
/* MESSAGES SECTION */
/* ------------------------------------------- */

.section-messages h1 {
    margin-top: 50px;
    margin-bottom: 20px;
}

.section-messages { margin-bottom: 100px; }

.message-title {
    display: inline-block;
    margin: 0;
}

.date-of-post {
    display: inline-block;
    font-size: 80%;
    margin-left: 30px;
}

.message {
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #aaa;
}

.womonth-img {
    max-height: 200px;
    display: inline-block;
}

.womonth-mess-table td { padding-left: 10px; }
/* ------------------------------------------- */
/* WIE ZIJN WIJ SECTION */
/* ------------------------------------------- */


.section-wzw h1 { margin-bottom: 20px; }



/* ------------------------------------------- */
/* THUISPROEVERIJ SECTION */
/* ------------------------------------------- */

.section-thuisproeverij h1 { margin-bottom: 20px; }

.section-thuisproeverij { margin-top: 0px; }


/* ------------------------------------------- */
/* NIEUWSBRIEF SECTION */
/* ------------------------------------------- */

.section-nieuwsbrief h1 { 
    margin-top: 50px; 
    margin-bottom: 20px;
}

.section-nieuwsbrief { 
    margin-bottom: 400px;
    margin-top: 0px;
}

form[name="nieuwsbrief_form"] { margin: 40px auto; }


input[name="Nieuwsbrief-Voornaam"] { width: 200px; }

input[name="Nieuwsbrief-Achternaam"] { width: 200px; }

input[name="Nieuwsbrief-Email"] { width: 200px; }


/* ------------------------------------------- */
/* RESERVEREN SECTION */
/* ------------------------------------------- */

.section-reserveren h1 { margin-bottom: 20px; }


form[name="thuisproeverij_form"] { margin: 40px auto; }

.form-personen {
    display: inline;
    font-size: 70%;
}

input,
button,
select,
date,
textarea{ font-size: 80%; }

input[name="Voornaam"] { width: 120px; }

input[name="Tussenvoegsel"] { width: 71px; }

input[name="Achternaam"] { width: 150px; }

input[name="Adres"] { width: 351px; }

input[name="Postcode"] { width: 150px; }

input[name="Plaats"] { width: 196px; }

input[name="Telefoon"] { width: 150px; }

input[name="Email"] { width: 196px; }

input[name="Datum"] { width: 150px; }

input[name="Personen"] { width: 59px; }

select[name="Thema"],
select[name="Connaisseur"] { width: 351px; }


/* ------------------------------------------- */
/* CONNAISSEURS SECTION */
/* ------------------------------------------- */

.section-connaisseurs h1 { margin-bottom: 20px; }

.connaisseur p { 
    font-size: 80%; 
    width: 100%;
}

.connaisseur h3 { 
    font-size: 100%; 
    font-weight: 400;
}

.connaisseur-2 { width: 93.62%; }

.connaisseur-1 { width: 54%; }


/* ------------------------------------------- */
/* CONTACT SECTION */
/* ------------------------------------------- */

.section-contact .long-p { 
    margin: 40px auto; 
    line-height: 145%;
}

.section-contact h1 { margin-bottom: 20px; }

/* ------------------------------------------- */
/* VOORWAARDEN SECTION */
/* ------------------------------------------- */

.section-voorwaarden h1 { margin-bottom: 20px; }

.section-voorwaarden .long-p { line-height: 145%; }

.section-voorwaarden ul { margin-bottom: 10px; }

.section-voorwaarden ul li { margin-bottom: 3px; }

.section-voorwaarden .long-p { width: 100%; }


/* ------------------------------------------- */
/* ------------------------------------------- */
/*                  BESTELLEN                  */
/* ------------------------------------------- */
/* ------------------------------------------- */

/* ------------------------------------------- */
/* ITEMS */
/* ------------------------------------------- */

.section-bestellen h1 {
    margin-top: 50px; 
    margin-bottom: 20px;
}

.section-bestellen { margin-bottom: 100px; }

/* ---------- WOMONTH ---------- */

.womonth-item-list {
    list-style: none;
    margin-bottom: -10px;
}

.womonth-item-list li { display: inline-block; }

.womonth-item-list h2 { margin-left: 25%; }

.womonth-item-list { display: none; }

.item-list h2 { display: none; }

ul.womonth-item-list > li { 
    width: 25%;
    padding-bottom: 20px;
    text-align: center;
    min-height: 420px;
}

/* ---------- NORMAL ---------- */

.item-list { list-style: none; }

.item-list li { display: inline-block; }

.item-list h2 { margin-left: 25%; }

.item-list h2::before {
    width: 60%;
    height: 1px;
    background-color: #222;
    content: "  ";
    display: block;
    margin-left: -12%;
    margin-bottom: 5px;
}


.item-container { 
    border: 2px solid #aaa;
    padding: 10px 0px;
}

ul.item-list > li { 
    width: 25%;
    padding-bottom: 20px;
    text-align: center;
    min-height: 420px;
}

.thumbnail {
    height: 200px;
    max-width: 150px;
    overflow: hidden;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.price { 
    margin-top: 10px;
    display: block; 
    font-weight: 500;
    text-align: center;
}

.name { 
    font-weight: 600;
    font-size: 80%; 
    text-transform: none;
}

.item-link:link,
.item-link:visited { 
    color: #444; 
    text-decoration: none;
}

.item-link:hover,
.item-link:active,
.item-link:focus { 
    color: #444; 
    text-decoration: none;
}

.add-to-cart-btn:link,
.add-to-cart-btn:visited {
    border: 1px solid #aaa;
    border-radius: 3px;
    background-color: #fff;
    color: #444;
    padding: 0px 5px;
    text-decoration: none;
}

.add-to-cart-btn:hover,
.add-to-cart-btn:active,
.add-to-cart-btn:focus {
    background-color: #eee;
    color: #444;
    text-decoration: none;
}

/* ------------------------------------------- */
/* FILTERS */
/* ------------------------------------------- */

.filters { border-right: 2px solid #aaa; }

.filters ul {
    text-decoration: none;
    list-style: none;
}


.category {
    display: block;
    border: 1px solid #aaa;
    padding: 10px 10px;
    margin-bottom: -1px;
    color: #444;
    text-decoration: none;
}

.category:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.category:last-child {
    margin-bottom: 0px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.category:hover,
.category:active,
.category:focus {
    background-color: #eee;
    color: #444;
    text-decoration: none;
    cursor: pointer;
}

.removefilters {
    border: 1px solid #aaa;
    border-radius: 5px;
    color: #444;
    text-decoration: none;
}

.removefilters:hover,
.removefilters:focus,
.removefilters:active {
    color: #444;
    text-decoration: none;
    background-color: #eee;
    cursor: pointer;
}

.filterbutton { margin-top: 10px; }


/* ------------------------------------------- */
/* ITEM PAGE */
/* ------------------------------------------- */

/* ---------- Error page ---------- */

.section-item-error { margin-top: 10px; }

/* ---------- Normal page ---------- */

.section-item { margin-top: 10px; }

.media-query-md { display: none; }

.item-img {
    height: 500px;
    vertical-align: middle;
    display: block;
    margin: auto;
}

.item-img-container { border: 1px solid #cfcfcf; }

.item-info {
    width: 90%;
    margin-left: 10%;
}

.item-title{ margin-top: 30px; }

.item-title p {
    display: block;
    margin: auto;
    font-size: 130%;
}

.item-desc {
    margin-top: 50px;
    width: 90%;
}

.item-desc p {
    font-size: 80%;
    margin-bottom: 15px;
}

.buy-container {
    border-radius: 10px;
    margin-top: 30px;
    background-color: #eee;
    border: 1px solid #ccc;
}

.buy-form { padding: 10px; }

.item-price {
    text-align: center;
    padding: 10px;
    font-size: 130%;
    box-shadow: 0px 5px 10px #ddd;
}

.item-price p:first-child {
    margin-bottom: 0px;
    margin-right: 5px;
    display: inline-block;
}

.item-price p:nth-child(2) {
    display: inline-block;
    font-size: 50%;
}

.item-price p:last-child { font-size: 50%; }

.box-price {
    font-size: 90%;
    margin-bottom: 5px;
}

input[name="amount"] {
    margin-left: 10px;
    margin-bottom: 10px;
    padding-left: 5px;
    width: 30%;
    height: 2em;
    font-size: 1em;
}

.minus-button {
    margin-left: 5px;
    padding: 0px 5px;
    border-radius: 3px;
    border: 1px solid #aaa;
    background-color: #ddd;
    color: #444;
    text-decoration: none;
    vertical-align: middle;
    display: inline-block;
}

.plus-button {
    margin-left: 3px;
    padding: 0px 5px;
    border-radius: 3px;
    border: 1px solid #aaa;
    background-color: #ddd;
    color: #444;
    text-decoration: none;
    vertical-align: middle;
    display: inline-block;
}

.buy-radio-label { 
    margin: 0px; 
    font-size: 80%;
}

input[name="volume"] { margin: 5px 3px 0px 0px; }

button[name="toevoegen"] {
    margin: 40px auto 20px auto;
    display: block;  
    font-size: 100%;
    padding: 5px;
    border-width: 1px;
    border-style: outset;
    border-color: #aaa;
    box-shadow: 3px 3px 5px #aaa;
    border-radius: 5px;
    background-color: #ddd;
}

.amount-text { font-size: 80%; }

.item-specs { 
    display: block;
    border-collapse: collapse;
    font-size: 70%;
    width: 100%;
}

.item-specs td { width: 63%; }

.item-specs th, 
.item-specs td { 
    border: 2px solid #aaa;
    padding: 2px 10px 2px 5px;
}

.item-specs tr:nth-child(odd) { background-color: #eee; }

.item-specs-title {
    font-weight: 400;
    font-size: 130%;
    margin-top: 50px;
    display: block;
    margin-bottom: 20px;
}

/* ------------------------------------------- */
/* WINKELWAGEN PAGE */
/* ------------------------------------------- */

.section-cart h1 {
    margin-top: 50px; 
    margin-bottom: 20px;
}

.section-cart { margin-bottom: 92px; }

.shopping-cart {
    width: 100%;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
}

.cart-item {
    padding: 20px 30px;
    height: 190px;
    display: flex;
    border-bottom: 1px solid #e1e8ee;
}

.cart-item-btn {
    position: relative;
    padding: 65px 0px;
    margin: 0px 60px;
}

.cart-item-image {
    height: 150px;
    margin-right: 60px;
}

.cart-item-image img { height: 150px; }

.cart-item-name {
    padding-top: 40px;
    margin-right: 80px;
    width: 120px;
}

.cart-item-name span {
    display: block;
    font-size: 90%;
    font-weight: 400;
}

.cart-item-name span:first-child { margin-bottom: 5px; }

.cart-item-name span:last-child {
    font-weight: 300;
    margin-top: 8px;
}

.cart-item-qty {
    padding: 60px 0px;
    margin-right: 100px;
}

.cart-item-qty input {
    -webkit-appearance: none;
    border: none;
    text-align: center;
    width: 35px;
    font-size: 80%;
    font-weight: 300;
}

.cart-btn-delete:focus,
.cart-btn-add:focus,
.cart-btn-remove:focus,
.cart-item-qty input:focus { outline: 0; }

.cart-item-qty input:hover { cursor: default; }

.cart-item-subtotal {
    width: 100px;
    padding-top: 40px;
    text-align: center;
    font-size: 90%;
    font-weight: 300;
    display: block;
}

.cart-item-subtotal-amount { padding-top: 40px; }

.cart-item-subtotal-amount span {
    text-align: center;
    font-size: 90%;
    font-weight: 300;
    display: block;
}

.totaal-div { margin-bottom: 20px; }

.totaal-table { 
    border-collapse: collapse;
    font-size: 80%;
    width: 100%;
}

.totaal-table th { width: 60%; }

.totaal-table th, 
.totaal-table td { 
    border: 2px solid #aaa;
    padding: 10px 10px 10px 5px;
}

.totaal-table tr:nth-child(odd) { background-color: #eee; }

.empty-cart {
    text-transform: none;
    font-weight: 400;
    font-size: 150%;
    margin: 0px auto;
    margin-bottom: 150px;
}


/* ------------------------------------------- */
/* BEZORGEN PAGE */
/* ------------------------------------------- */

.factuur-col { margin: 20px 0px; }

.content {
    display: inline-block;
    width: 100%;
    padding: 10px 10px 0px 10px;
    border: 1px solid #aaa;
    background-color: #fcfcfc;
}

.col-payment-method { margin: 20px 0px; }

.paymeth-content { display: inline-block; }

.bezorging-title {
    font-weight: 400;
    font-size: 100%;
}

.form-row { margin-top: 5px; }

.form-row:last-of-type { margin-bottom: 10px; }

.input-label {
    display: block;
    font-size: 80%;
    font-weight: 600;
    margin-bottom: 0px;
    width: 100%;
}

.input-label-5 {
    display: block;
    font-size: 80%;
    font-weight: 600;
    margin-bottom: 0px;
    width: 40%;
}

.mevr {
    margin-left: 10px;
    margin-right: 20px;
    font-size: 80%;
}

.dhr { font-size: 80%; }

.factuur-form input[type="text"],
.factuur-form input[type="email"] { 
    width: 250px; 
    padding: 3px 0px 3px 5px;
}

.factuur-form input#huisnummer,
.factuur-form input#toevoeging {
    width: 122.5px; 
    padding: 3px 0px 3px 5px;
}

.factuur-form input[type="radio"],
.deliver-form input[type="radio"] { margin-right: 3px; }

input#huisnummer { margin-right: 5px; }

.tab::before {
    content: " ";
    display: block;
    margin-bottom: 5px;
    width: 100%;
    height: 1px;
    background-color: #aaa;
}

.tab { 
    margin-bottom: 10px; 
    border-radius: 0px 5px 5px 5px;
}

#warning {
    font-size: 70%;
    display: none;
}
#warning-payment {
    font-size: 70%;
    display: none;
}

.tab-header { 
    font-size: 80%; 
    margin-bottom: 10px;
}

.tab-header input { 
    font-size: 120%; 
    margin-right: 3px;
}

.tab-content { display: none; }

.deliver-form { 
    display: none; 
    margin-left: 10px;
}

.deliver-form input[type="text"] { width: 250px; }

.deliver-form input#huisnummer,
.deliver-form input#toevoeging { width: 122.5px; }

.active .tab-content { 
    display: block; 
    margin-bottom: 10px;
}

.active { background-color: #efefef; }

.checkbox-form { font-size: 70%; }

.checkbox-form:not(:first-child) { margin-top: 3px; }

.checkbox-form:last-child { margin-bottom: 3px; }

.checkbox-form input { margin-right: 5px; }

select[name="issuer"] { 
    margin: 10px 0px;
    border: 1px solid #222;
    background-color: white;
    border-radius: 5px;
}


.overzicht { 
    margin: 20px 0px;
    border-collapse: collapse;
    font-size: 80%;
    width: 100%;
}

.overzicht th { width: 60%; }

.overzicht th, 
.overzicht td { 
    border: 1px solid #aaa;
    padding: 10px 10px 10px 5px;
}

.overzicht-voorwaarden { 
    font-size: 70%; 
    margin-bottom: 5px;
}

.overzicht-voorwaarden input { margin-right: 5px; }

.pay-btn-submit { 
    border-radius: 10px;
    padding: 5px;
    float: right;
    margin-bottom: 10px;
}

/* ---------- Pay items ---------- */

.pay-items {
    border: 1px solid #ddd;
    background-color: #fff;
    border-collapse: separate;
    border-spacing: 10px;
    font-size: 80%;
    width: 100%;
}

.pay-item { margin-top: 10px; }

.pay-items td { 
    border: 1px solid #ccc;
    padding: 10px 10px 0px 5px;
}

.pay-item-img {
    height: 100px;
    position: relative;
    float: left;
}

.pay-item-name {
    width: 70%;
    display: block;
    position: relative;
    float: left;
    margin: 20px 0px 5px 10px;
}

.pay-item-subtotal {
    display: inline-block;
    float: left;
    margin: 5px 5px 5px 10px;
}

.pay-item-amount {
    display: inline-block;
    float: right;
    margin: 5px 10px 5px 5px;
}


/* ------------------------------------------- */
/* PAYMENT-RETURN PAGE */
/* ------------------------------------------- */

.section-payment-return h1 {
    margin-top: 50px;
    margin-bottom: 20px;
}

.section-payment-return { margin-bottom: 594px; }


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- ADMIN PAGE ---------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.admin-section h1 {
    margin-top: 50px; 
    margin-bottom: 20px;
}

.admin-section { margin-bottom: 100px; }


/* ------------------------------------------- */
/* FOOTER */
/* ------------------------------------------- */

.admin-footer { background-color: #fff; }

.admin-footer::before {
    width: 80%;
    height: 1px;
    background-color: #aaa;
    content: "  ";
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.admin-footer .footer-text { 
    color: #444; 
    margin-bottom: 50px;
}

.admin-footer .madeby-text { color: #ccc; }

.admin-footer .madeby-text::before { background-color: #ccc; }


/* ------------------------------------------- */
/* LOGIN PAGE */
/* ------------------------------------------- */

.login-section h1 {
    margin-top: 50px; 
    margin-bottom: 20px;
}

.login-section { margin-bottom: 200px; }

.login { margin: auto; }

/* ---------- Login form ---------- */

.login-form { margin-top: 100px; }

.login-form input { 
    display: block; 
    line-height: 150%;
    border-radius: 3px;
}

input[name="Username"] { 
    width: 300px;
    margin: 0 auto;
}

input[name="Password"] { 
    width: 300px; 
    margin: 10px auto 0 auto;
}

input[name="Login"] {
    width: 100px;
    margin-top: 10px;
    border-radius: 5px;
    margin-left: auto; 
    margin-right: auto;
}


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- Home ------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */







/* ------------------------------------------- */
/* CATEGORY PAGE */
/* ------------------------------------------- */

.cat-table {
    margin: 20px 0px;
    width: 100%;
    border-collapse: collapse;
    font-size: 80%;
}

.cat-table th:first-of-type,
.cat-table td:first-of-type { border-right: 2px solid #aaa; }

.cat-table td,
.cat-table th {
    padding: 5px;
    text-align: left;
}

.cat-table tr:nth-child(even) { background-color: #eee; }

/* ---------- Add a category ---------- */

.add_cat-form {
    width: 50%;
    margin: 10px auto;
}

.add_cat-form input { display: block; }

.add_cat-form input[name="title"] {
    width: 100%;
    height: 1.5em;
}

input[name="add_cat"] {
    width: 100px;
    height: 30px;
    margin: 10px auto;
    border-radius: 5px;
}

/* ------------------------------------------- */
/* MESSAGES PAGE */
/* ------------------------------------------- */

.mess-table {
    margin: 20px 0px;
    width: 100%;
    border-collapse: collapse;
    font-size: 80%;
}

.mess-table td,
.mess-table th {
    padding: 5px;
    text-align: left;
}

.mess-table td:nth-child(4),
.mess-table th:nth-child(4) { width: 55%; }

.mess-table td:nth-child(2),
.mess-table th:nth-child(2) { width: 20%; }

.mess-table tr:nth-child(even) { background-color: #eee; }

/* ---------- Add a message ---------- */

.add_messages-form { 
    margin-top: 20px;
    width: 100%;
    font-size: 90%;
}

.add_messages-form table { width: 100%; }

.add_messages-form textarea {
    width: 100%;
    height: 8rem;
    resize: none;
    font-size: 80%;
}

.add_messages-form td {
    padding-left: 20px;
    text-align: left;
}

.add_messages-form th {
    width: 20%;
    text-align: left;
}

/* ---------- Edit a message ---------- */

.edit_messages-form { 
    margin-top: 20px;
    width: 100%;
    font-size: 90%;
}

.edit_messages-form table { width: 100%; }

.edit_messages-form textarea {
    width: 100%;
    height: 8rem;
    resize: none;
    font-size: 80%;
}

.edit_messages-form td {
    padding-left: 20px;
    text-align: left;
}

.edit_messages-form th {
    width: 20%;
    text-align: left;
}

/* ------------------------------------------- */
/* USERS PAGE */
/* ------------------------------------------- */

.user-table {
    margin: 20px 0px;
    width: 100%;
    border-collapse: collapse;
    font-size: 80%;
}

.user-table td:nth-child(2),
.user-table th:nth-child(2) { width: 20% }

.user-table td:nth-child(5),
.user-table th:nth-child(5) { width: 30%; }

.user-table td,
.user-table th {
    padding: 5px;
    text-align: left;
}

.user-table tr:nth-child(even),
.user-table tr:nth-child(even) .psw-input { background-color: #eee; }

.psw-input {
    border: none;
    height: 1.5em;
    font-size: 100%;
    width: 80%;
}

.psw-visual {
    border: 1px solid transparent;
    text-align: center;
    background-color: #ccc;
    border-radius: 3px;  
    height: 1.5em;
    font-size: 90%;
    width: 25px;
    padding: 0px 2px;
}

/* ---------- Edit user ---------- */

.psw-visual-edit {
    margin-left: 5px;
    border: 1px solid transparent;
    text-align: center;
    background-color: #ccc;
    border-radius: 3px;  
    height: 1rm;
    font-size: 90%;
    width: 25px;
    padding: auto;
}

.edit_users-form { 
    margin-top: 20px;
    width: 100%;
    font-size: 90%;
}

.edit_users-form table { width: 100%; }

.edit_users-form td {
    padding-left: 20px;
    text-align: left;
}

.edit_users-form th {
    width: 20%;
    text-align: left;
}

/* ---------- Add user ---------- */

.add_users-form { 
    margin-top: 20px;
    width: 100%;
    font-size: 90%;
}

.add_users-form table { width: 100%; }

.add_users-form td {
    padding-left: 20px;
    text-align: left;
}

.add_users-form th {
    width: 20%;
    text-align: left;
}


/* ------------------------------------------- */
/* PRODUCTS PAGE */
/* ------------------------------------------- */

.prod-table {
    margin: 20px 0px;
    width: 100%;
    border-collapse: collapse;
    font-size: 80%;
}

.prod-table td,
.prod-table th {
    padding: 5px;
    text-align: left;
}

.prod-table tr:nth-child(even) { background-color: #eee; }

.prod-table .tr-womonth { background-color: #55ff55 !important; }

.prod-table .tr-noshow { background-color: #ff8855 !important; }

/* ---------- Edit product ---------- */

.edit_products-form { 
    margin-top: 20px;
    width: 100%;
    font-size: 90%;
}

.edit_products-form table { width: 100%; }

.edit_products-form textarea[name="content"],
.edit_products-form textarea[name="womonth_content"] {
    width: 100%;
    height: 5rem;
    resize: none;
    font-size: 80%;
}

.edit_products-form textarea {
    width: 50%;
    height: 2rem;
    resize: none;
    font-size: 80%;
}

.edit_products-form td {
    padding-left: 20px;
    text-align: left;
}

.edit_products-form th {
    width: 20%;
    text-align: left;
}

/* ---------- Add product ---------- */

.add_products-form { 
    margin-top: 20px;
    width: 100%;
    font-size: 90%;
}

.add_products-form table { width: 100%; }

.add_products-form textarea[name="content"],
.add_products-form textarea[name="womonth_content"] {
    width: 100%;
    height: 5rem;
    resize: none;
    font-size: 80%;
}

.add_products-form textarea {
    width: 50%;
    height: 2rem;
    resize: none;
    font-size: 80%;
}

.add_products-form td {
    padding-left: 20px;
    text-align: left;
}

.add_products-form th {
    width: 20%;
    text-align: left;
}

.add_prod_short {
    border: 1px solid #999;
    border-radius: 8px;
    padding: 3px 15px;
    margin: 10px auto;
    text-decoration: none;
    color: #444;
    background-color: #00ee00;
}