html,
body {
    margin: 0;
    padding: 0;
    background: #FCFFF9;
}


/* MAIN */

section {
    position: relative;
}

section > div {
    margin: 4rem auto;
    width: calc(clamp(900px, 100%, 1200px) - 4rem);
}

.bg--gray {
    background: #EAE6E3;
}

.flex {
    display: flex;
}

.flex > * {
    margin: 0;
    align-content: center;
    width: 50%;
}

.infoblock {
    padding: 2rem 0 2rem 2rem;
    width: calc(clamp(450px, 50%, 600px) - 4rem);
}

.grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
}

.grid > div {
    width: calc(100% - 1rem);
}

@media screen and (max-width: 950px) {
    section > div {
        margin: 2rem auto;
        width: calc(100% - 3rem);
    }

    .flex {
        display: inherit;
        gap: 2rem;
    }

    .flex > * {
        width: 100%;
        align-content: center;
    }

    .infoblock {
        width: calc(100% - 3rem);
    }

    .grid {
        grid-template-columns: repeat(2,1fr);
    }
}


/* HEADER */

header {
    margin: 0;
}

header > div {
    margin: auto;
    width: clamp(900px, calc(100% - 4rem), 1200px);
    position: relative;
}

header.top {
    height: 1rem;
    padding: .5rem 1.5rem 1rem 1.5rem;
    position: relative;
}

header.top b {
    font-family: "MontBlack";
}

header.main {
    padding: 1rem 0;
    position: relative;
    background-color: #768369;
}

.social--icons {
    height: 2.3rem;
    position: absolute;
    top: 0;
    right: 0;
}

@media screen and (max-width: 950px) {
    header > div {
        width: 100%;
    }
}

#toTop {
    display: none;
}


/* MENU */

nav {
    position: absolute;
    top: -1rem;
    right: 0;
    margin: 0;
    z-index: 7;
}

header ul {
    margin: 0;
    padding: 0;
}

header li {
    font-family: 'DreamLife';
    list-style: none;
    display: inline-block;
    margin: 1rem .5rem;
    padding: 1rem 1rem .65rem 1rem;
    color: #FCFFF9;
    font-size: .9rem;
    text-transform: uppercase;
    transition: 0.3s;
}

header li:hover {
    transform: scale(1.1);
    text-shadow: 0 0 .25rem rgba(0, 0, 0, .5);
}

@media screen and (max-width: 950px) {
    nav {
        display: none;
        width: 100%;
        background-color: #6C7055;
        left: 0;
        padding-bottom: .5rem;
    }
    
    header ul {
        margin: 0;
        margin-top: .5rem;
    }
    
    header li {
        display: block;
        color: #FCFFF9;
        margin: 0;
        padding: 1.3rem 1.5rem .9rem 1.5rem;
    }
    
    header li:hover {
        background-color: #FCFFF9;
        color: #6C7055;
        transform: none;
        text-shadow: none;
    }
    
    .mobile {
        position: absolute;
        top: .5rem;
        right: 1.5rem;
        display: block;
        width: 2rem;
        z-index: 10;
    }
    
    .line {
        margin: 0;
        height: 3px;
        width: 2rem;
        border-radius: 1.5px;
        background-color: #FFF;
        transition: 0.4s;
    }
    
    .line + .line {
        margin-top: .6rem;
    }
    
    .change .line.first  { transform: translateY(.775rem) rotate(-45deg); }
    .change .line.second { opacity: 0; }
    .change .line.third  { transform: translateY(-.775rem) rotate(45deg); }
}


/* BANNER */

.banner {
    padding: 10rem 0;
    margin: -5rem 0 0 0;
    position: relative;
    background: #768369;
    background-image: url("/img/salvorae-achtergrond-kruiden-herbalist-herbalism.jpg");
    background-position: center;
    background-size: cover;
    background-blend-mode: soft-light;
    width: 100%;
    z-index: 5;
}

.banner > div {
    margin: auto;
    width: clamp(900px, calc(100% - 4rem), 1200px);
    position: relative;
}

.banner::after {
    content: " ";
    width: 100%;
    height: 6rem;
    background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width: 950px) {
    .banner {
        padding: 4rem 0;
    }

    .banner > div {
        width: 100%;
        text-align: center;
    }
}


/* HERBARIUM */

.herb--feature {
    
}

.herb--feature img {
    width: 100%;
    border-radius: .5rem;
    transition: .3s;
}

.herb--feature:hover img {
    transform: translateY(-.5rem);
}


/* SVG */

svg {
    fill: #605245;
}

header.main svg {
    fill: #FCFFF9;
    height: 2.5rem;
    margin-left: 1.5rem;
}

.banner svg {
    fill: #FCFFF9;
    width: 40%;
    z-index: 8;
    
    -webkit-filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));
    filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));
}

@media screen and (max-width: 950px) {
    .banner svg {
        width: 60%;
        margin: auto;
    }
}


/* IMAGES */

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    position: relative;
    z-index: 20;
    border-left: solid #6C7055 .5rem;
}

.overlay::after {
    content: " ";
    position: absolute;
    width: 100%;
    background: linear-gradient(90deg,rgba(234, 230, 227, 0) 50%, rgba(234, 230, 227, 1) 95%);
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
}

img.feature {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -10;
}

@media screen and (max-width: 950px) {
    img.feature {
        position: relative;
        width: 100%;
    }

    .overlay {
        border-left: none;
        border-top: solid #6C7055 .5rem;
    }

    .overlay::after {
        background: linear-gradient(180deg,rgba(234, 230, 227, 0) 50%, rgba(234, 230, 227, 1) 95%);
    }
}

/* COOKIES */

#cookieNotice {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 99;
}

.content-wrap {
    position: fixed;
    top: calc(50% - 10rem);
    border-radius: .5rem;
    left: 0;
    right: 0;
    margin: auto;
    padding: 1rem 2rem 2rem 2rem;
    width: 50%;
    background: #FCFFF9;
    z-index: 30;
    box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.5);
}

@keyframes error {
  0%   {transform: scale(1.025);}
  25%  {transform: scale(1);}
  50%  {transform: scale(1);}
  100% {transform: scale(1);}
}

#cookieNotice:active > .content-wrap {
    animation-name: error;
    animation-duration: 1s;
}


/* TEXT */

body {
    color: #605245;
    letter-spacing: 25%;
    font-family: 'Helvetica';
    font-size: .9rem;
    line-height: 180%;
}

h1,
h2 {
    font-family: 'DreamLife';
    line-height: 150%;
    font-size: 1.8rem;
    letter-spacing: 5%;
    margin: 0 0 3.5rem 0;
    padding: 0;
    position: relative;
}

h2.large {
    font-size: 2.2rem;
    margin: 1rem 0;
    text-transform: uppercase;
}

h3 {
    font-family: 'DreamLife';
    font-size: 1.2rem;
    letter-spacing: 5%;
    position: relative;
}

h1::after,
h2::after,
h3::after {
    content: " ";
    background: #605245;
    width: 10rem;
    height: .25rem;
    bottom: -.1rem;
    left: -.5rem;
    position: absolute;
}

h3::after {
    width: 5rem;
    height: .15rem;
}

h2.large::after {
    display: none;
}

header.top {
    font-family: 'Mont';
    font-size: .7rem;
}

header.top b {
    font-family: "MontBlack";
}


/* LINK */

a:any-link {
    text-decoration: none;
    color: #605245;
    transition: 0.3s;
}

a:hover {
    color: #768369;
}

button.btn-primary {
    all: unset;
    padding: .45rem .75rem .2rem .95rem;
    font-size: .8rem;
    font-family: 'DreamLife';
    text-transform: uppercase;
    border-radius: .5rem;
    color: #FCFFF9;
    background: #768369;
    transition: .3s;
    cursor: pointer;
}

button.btn-primary:hover {
    background: #605245;
}