/* ==========================================================================
   buttons-home.css
   Geextraheerd uit de inline <style> van de Vruchtbare Aarde homepage.
   Klassenamen ongewijzigd overgenomen.
   ========================================================================== */

#maincola {
    height: auto !important; 
}

.hide {
    display: none;
}

a.buttonbreedtop, a.buttonbreedtop:hover, a.buttonbreedtophalfl,
a.buttonbreedtophalfl:hover, a.buttonbreedtophalfr,
a.buttonbreedtophalfr:hover {
    float: left;
    width: 98.5% !important;
    margin: 0px 0px 5px 0px !important;
    background-color: #E2A31C !important;
    border: lightblue outset 1px !important;
    border-radius: 10px !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1) inset !important;
    color: white !important;
    display: inline-block !important;
    font-family: "Lucida Grande", sans-serif !important;
    font-size: 16px !important;
    letter-spacing: 0.9px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    transition: all 0.1s 0s ease !important;
    padding: 5px;
}

a.buttonbreedtophalfl, a.buttonbreedtophalfl:hover {
    width: 57.7% !important;
    margin: 0 0px 5px 0 !important;
    background-color: #97c5aa !important;
}

a.buttonbreedtophalfr, a.buttonbreedtophalfr:hover {
    width: 37.5% !important;
    margin: 0 0 5px 0px !important;
    background-color: #97c5aa !important;
}

a.buttonbreedtop:hover, a.buttonbreedtophalfl:hover,
a.buttonbreedtophalfr:hover {
    background-color: #82b797 !important;
}

a.buttonbreed3, a.buttonbreed4 {
    border: lightgrey outset 1px !important;
    border-radius: 10px !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1) inset !important;
    color: white !important;
    display: inline-block !important;
    font-family: "Lucida Grande", sans-serif !important;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.1s 0s ease !important;
    float: left;
    font-size: 18px !important;
    font-weight: bold !important;
    height: 25px !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
    margin: 2px 0 3px !important;
    padding: 20px 10px !important;
    vertical-align: middle !important;
    width: 682px !important;
    background-color: #82b797 !important;
}

a.buttonbreed3:hover, a.buttonbreed4:hover {
    float: left;
    font-size: 18px !important;
    font-weight: bold !important;
    height: 25px !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
    margin: 10px 0 3px !important;
    padding: 20px 10px !important;
    vertical-align: middle !important;
    width: 682px !important;
    background-color: #97c5aa !important;
}

a.button2 {
    background-color: #a5cdb5e3 !important;
}

a.button2:hover {
    background-color: #97c5aa !important;
}

.orange {
    background-color: #b3c7bc !important;
}

a.buttonbreed, a.buttonbreed:hover {
    letter-spacing: 1px !important;
}

a.buttonbreedl, a.buttonbreedr {
    background-color: #96c9ac !important;
}

a.buttonbreedl:hover, a.buttonbreedr:hover {
    background-color: #88c3a2 !important;
}

a.buttonbreed2, a.buttonbreed2:hover, a.buttonbreed3, a.buttonbreed3:hover, a.buttonbreed4:hover {
    margin: 2px 0 3px !important;
}

a.buttonbreed3 {
    background-color: #97c5aa !important;
    font-size: 20px !important;
    letter-spacing: 1 !important;
}

a.buttonbreed4 {
    background-color: #7cbb97fa !important;
    font-size: 20px !important;
    letter-spacing: 1 !important;
}

a.buttonbreed3:hover {
    background-color: #82b797 !important;
    font-size: 20px !important;
    letter-spacing: 1 !important;
}

a.buttonbreed4:hover {
    background-color: #97c5aa !important;
    font-size: 20px !important;
    letter-spacing: 1px !important;
}

.imgbr {
    border: lightgrey outset 1px;
    margin: 1px 2px 0;
    padding: 0;
    width: 110px;
    margin-bottom: 0px !important;
}

a.hvr-curl-bottom-right, a.hvr-curl-bottom-right:hover {
    margin: 0 !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1) inset !important;
    border: 1px outset lightgrey !important;
    display: inline-block !important;
    border-radius: 10px !important;
    padding: 4px 2px !important;
    font-family: 'Lucida Grande', sans-serif !important;
    line-height: 1.4 !important;
    color: white !important;
    text-decoration: none !important;
    font-weight: bold !important;
    background-color: rgb(146, 198, 219) !important;
    font-size: 13px !important;
    width: 128px;
    letter-spacing: 0.6px;
    text-shadow: rgb(0, 0, 0) 0px 0px 2px;
    color: rgb(255, 255, 255);
}

/* Curl Bottom Right */
.hvr-curl-bottom-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-curl-bottom-right:before {
    pointer-events: none;
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    bottom: 0;
    right: 0;
    background: white;
    /* IE9 */
    background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
}

.hvr-curl-bottom-right:hover:before, .hvr-curl-bottom-right:focus:before, .hvr-curl-bottom-right:active:before {
    width: 25px;
    height: 25px;
}

.zoom {
    display: inline-block;
    transition: transform .2s;
}

.zoom:hover {
    position: relative;
    z-index: 999;
    top: 0px;
    right: 0px;
    -ms-transform: scale(1.8); /* IE 9 */
    -webkit-transform: scale(1.8); /* Safari 3-8 */
    transform: scale(1.8);
}

.hr-container {
    padding-top: 1px; /* gegarandeerde ruimte boven het <hr> */
}

/* Large rounded border */
hr.kleur {
    clear: both;                 /* sluit floats af */
    height: 8px;                 /* dikte van de oranje balk */
    background-color: #badbc8ad; /* kleur van de balk */
    border-radius: 5px;          /* afgeronde hoeken */
    width: 98.5%;                /* breedte van de balk */
    margin: 10px 0 0 0 !important;
}

.meganizr > li > a {
    font-size: 17px;
    letter-spacing: 0.1;
    padding: 3px 65px 0 65px;
}

.meganizr > li > ul a {
    font-size: 15px;
}

/* ==========================================================================
   Mobiele weergave (telefoons/kleine tablets, t/m 768px breed)
   Plaats dit blok ALTIJD onderaan het bestand, na de regels hierboven,
   zodat het de vaste pixelbreedtes uit stylehome12D.css daadwerkelijk
   overrulet (dit bestand wordt als laatste geladen).

   Hoofdoorzaak van de leesbaarheid op mobiel: #pagewidth heeft een vaste
   breedte van 1001px in stylehome12D.css. Dat wordt hieronder als eerste
   aangepakt; de rest (kolommen, knoppen, afbeeldingen) volgt daaruit.
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. De vaste paginabreedte van 1001px opheffen — dit is de hoofdoorzaak */
    #pagewidth {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2. Hoofdkolommen (anders vast op 860px/716px) onder elkaar i.p.v. naast elkaar */
    #twocols,
    .twocols,
    .maincol,
    .maincolintro {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .maincolintro p {
    	margin: 0 0 5px 15px !important;
    }

    /* 3. Sidebars met archiefcovers/advertenties wegnemen voor rust op een klein scherm
          (dezelfde aanpak die de site al gebruikt bij het printen, @media print) */
    .tijdschriften,
    .rightcol,
    .leftcol {
        display: none !important;
    }

    /* 4. Afbeeldingen meeschalen i.p.v. vaste breedte/hoogte (uit CSS én inline style="") */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    #maincola { height: auto !important; }

    hr.kleur {
    margin: 0 0 0 0 !important;
    }

    /* 5. Brede CTA-knoppen (vast op 682px) volledige breedte, niet meer laten "floaten" */
    a.buttonbreed,
    a.buttonbreed2,
    a.buttonbreed2lijn,
    a.buttonbreed3,
    a.buttonbreed4 {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 0 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    /* 6. Twee-naast-elkaar-knoppen (322px elk) onder elkaar i.p.v. naast elkaar */
    a.buttonbreedl,
    a.buttonbreedr,
    a.buttonbreedtophalfl,
    a.buttonbreedtophalfr {
        float: none !important;
        width: 100% !important;
        margin: 0 0 0 0 !important;
        box-sizing: border-box !important;
    }

    /* 7. Kleine archiefthumbnails (vast op 110px) iets ruimer i.p.v. vaste pixelbreedte */
    .imgbr,
    .img,
    .cover,
    .imgcover,
    .tijdschriften {
        width: 45% !important;
        height: auto !important;
    }

    /* 8. Voettekstmenu (5 items van 142px naast elkaar) onder elkaar i.p.v. naast elkaar */
    #footermenu li {
        float: none !important;
        width: 100% !important;
    }

    /* 9. Basistekst iets groter zodat de telefoon niet automatisch inzoomt */
    body {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
}
/* Menuknop: op desktop verborgen */
.menutoggle, .menuknop { display: none; }

@media (max-width: 768px) {

    /* ---- Menu: ingeklapt achter knop ---- */
    .menuknop {
        display: block;
        margin: 10px 10px 8px;
        padding: 12px 16px;
        background: #fff;
        border: 1px solid #ddd;
        border-bottom: 2px solid #ccc;
        border-radius: 10px;
        font: bold 17px 'Play', Arial, sans-serif;
        color: #525252;
        cursor: pointer;
    }
    ul.meganizr.mzr-responsive {
        display: none;
        float: none;
        width: auto;
        margin: 0 10px 10px;
    }
    .menutoggle:checked ~ ul.meganizr.mzr-responsive {
        display: block;
    }
    .mzr-responsive > li,
    .mzr-responsive > li.mzr-align-right {
        display: block !important;
        width: 100% !important;
    }
    .meganizr > li > a {
        padding: 0 16px !important;
        line-height: 46px;
        font-size: 17px;
    }

    /* ---- Content: ruimte langs de randen ---- */
    #wrapper {
        padding: 0 10px 0 15px;
        box-sizing: border-box;
    }
    .maincolintro p {
        margin: 0 0 5px 0 !important;
    }

    /* ---- Bovenste knoppen: lucht ertussen ---- */
    a.buttonbreedtophalfl,
    a.buttonbreedtophalfr,
    a.buttonbreedtophalfl:hover,
    a.buttonbreedtophalfr:hover {
        margin: 0 0 8px 0 !important;
        padding: 13px 10px !important;
        font-size: 17px !important;
    }
    /* Webwinkel als secundaire (omlijnde) knop */
    a.buttonbreedtophalfr,
    a.buttonbreedtophalfr:hover {
        background-color: transparent !important;
        color: #5c855c !important;
        border: 2px solid #97c5aa !important;
    }

    /* ---- Headerfoto: volle breedte, afgeronde hoeken ---- */
    #maincola img {
        float: none !important;
        display: block;
        width: 100% !important;
        height: auto !important;
        border-radius: 10px;
    }
}
@media (hover: none), (pointer: coarse) {

    a.buttonbreed:hover,
    a.buttonbreed2:hover,
    a.buttonbreed2lijn:hover,
    a.buttonbreed3:hover,
    a.buttonbreed4:hover,
    a.buttonbreedl:hover,
    a.buttonbreedr:hover,
    a.buttonbreedtophalfl:hover,
    a.buttonbreedtophalfr:hover {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 8px 0 !important;
        padding: 13px 10px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        letter-spacing: 0 !important;
        background-color: inherit !important;
    }

    a.buttonbreed3:hover,
    a.buttonbreed4:hover {
        padding: 20px 10px !important;
        margin: 0 0 3px 0 !important;
    }
}