/* ------------------------------ */
/* ---- Cookie Notification ----- */
/* ------------------------------ */

.cookie_box {
    position: fixed;
    z-index: 15;
    background: var(--brand-cold-grey);

    -webkit-transition: bottom 1s cubic-bezier(0,.55,.45,1);
    -o-transition: bottom 1s cubic-bezier(0,.55,.45,1);
    transition: bottom 1s cubic-bezier(0,.55,.45,1);
}
    
.cookie_box, .cookie_box.hide {
    bottom: -300px;
}
    
.cookie_box.is-active:not(.hide) {
    bottom: 0;
}

.cookie_box__content  {
    font-size: var(--font-size-3);
}
    
.cookie_box a {
    border-bottom: 1px solid;
    -webkit-transition: opacity var(--transition-2);
    -o-transition: opacity var(--transition-2);
    transition: opacity var(--transition-2);
}

.no-touchevents .cookie_box a:hover {
    opacity: var(--opacity);
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 576px) {

    .cookie_box {
        border: 1px solid var(--brand-blue-shade);
    }

}


@media all and (min-width: 1400px) {

    .cookie_box {
        width: 520px;
        left: var(--spacing-7);
        margin-bottom: var(--spacing-7);
        padding: var(--spacing-6);
    }

    .cookie_box__button button {
        margin-top: var(--spacing-5) !important;
    }

}


@media all and (max-width: 1399.98px) and (min-width: 576px) {

    .cookie_box {
        width: 500px;
        left: var(--spacing-6);
        margin-bottom: var(--spacing-6);
        padding: var(--spacing-5);
    }

    .cookie_box__button button {
        margin-top: var(--spacing-4) !important;
    }

}


@media all and (max-width: 575.98px) {

    .cookie_box {
        width: 100%;
        padding: var(--spacing-7);
        border-top: 1px solid var(--brand-blue-shade);
    }

    .cookie_box__button button {
        margin-top: var(--spacing-5) !important;
    }

    .cookie_box__button .button--filled.button--small {
        font-size: 14px !important;
    }

}