@font-face {
    font-family: 'regular';
    src: url("../fonts/NotoSans-Light-gxskkwO.woff2");
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

/* noto-sans-regular - latin */
@font-face {
    font-family: 'regular';
    src: url("../fonts/noto-sans-v27-latin-regular-RXEurcW.woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* noto-sans-700 - latin */
@font-face {
    font-family: 'regular';
    src: url("../fonts/noto-sans-v27-latin-700-bopqpui.woff2");
    font-weight: 700;
    font-style: normal;
    font-display: block;
}


/* icons */
@font-face {
    font-family: 'icon';
    src: url("../fonts/icons-kQZuD6C.woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}


/* ==========================================================================
   Bootstrap fix
   ========================================================================== */
@media (min-width: 1680px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
        max-width:1630px
    }
}

:root {
    /* COLORS */
    --color_pos: #FFF;
    --color_neg: #222;
    --color_light: #F8F8F8;
    --color_divide: #979797; /* grey */
    --color_main: #0F717A; /* green */
    --color_sub: #707070; /* grey */
    --color_sub_light: #a3a3a3; /* grey */
    --color_special: #AF003C; /* red */

    /* FONT-FAMILIES */
    --regular: 'regular', Arial, sans-serif, Helvetica;

    /* FONT-SIZE */
    --sizeBase: 15px;
    --sizeHuge: 2rem;
    --sizeLarge: 1.5rem;
    --sizeMedium: 1.2rem;
    --sizeSmall: .9rem;
    --sizeTiny: .7rem;

    --spacing: .03rem;
    --gutter_x: 1.5rem;

    /*--bs-gutter-x: 2.5rem;*/
    /*--bs-gutter-y: 0;*/

    --shadow: 0 3px 6px;
    --shadowMedium: 0 5px 8px;
    --shadowLarge: 0 3px 30px;
    --shadowHuge: 0 6px 30px;

    --shadowColorSoft: rgba(0, 0, 0, 0.16);
    --shadowColorMedium: rgba(0, 0, 0, 0.35);
    --shadowColorStrong: rgba(0, 0, 0, 0.65);

    @media (width < 1400px) {
        --sizeBase: 13px;
    }

    @media (width < 1200px) {
        --sizeBase: 14.5px;
    }

    @media (width < 992px) {
        --sizeBase: 17px;
    }

    @media (width < 768px) {
        --sizeBase: 18px;
    }

    @media (width < 500px) {
        --sizeBase: 17px;
    }
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

.row {
    --bs-gutter-x: 1.3rem;
}

html {
    scroll-behavior: smooth !important;
    -webkit-text-size-adjust: 100%;
    font-size: var(--sizeBase);
    position: relative;
    min-height: 100%;
}

body {
    font-family: var(--regular);
    font-size: var(--sizeBase);
    font-weight: 400;
    color: var(--color_neg);
    line-height: 1.4;
    margin: 0;
    padding: 0;
    background-color: #e9e9e9;
    background-attachment: fixed;
    text-shadow: none !important;

    &.search {
        overflow: hidden;
    }
}

main {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    min-height: 60vh;
    position: relative;
    padding: 0 var(--gutter_x);
}

.hidden {
    display: none !important;
}

figure {
    margin: 0;
    line-height: 0;
}

h1, h2, h3, h4 {
    font-weight: 700;
    font-size: var(--sizeHuge);
    color: var(--color_main);
    margin: 0 0 1rem 0;
}

h2, h3 {
    margin: 1rem 0;
}

h4 {
    margin: 1.5rem 0 1rem 0;
}

h3, h4 {
    font-size: var(--sizeLarge);
}

a {
    color: var(--color_main);
    text-decoration: none;
}

p.headline {
    line-height: 1.7;
    font-size: var(--sizeMedium);
}

hr {
    border: none;
    margin-top: 2rem;
}

p.title {
    color: var(--color_main);
    font-size: var(--sizeLarge);
    margin-top: 0;
    margin-bottom: .5rem;
}

img.max-width {
    max-width: 100%;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}


span.icon-edit {
    width: 30px;
    height: 30px;
    display: inline-block;
    cursor: pointer;
    &::before {
        content: '\e915';
        font-family: icon;
        color: var(--color_main);
        display: block;
        font-size: var(--sizeMedium);
    }

    &.edit-homepage-entry {
        position: absolute;
        top: .5rem;
        left: .5rem;
        z-index: 1;
        background-color: #ffffff9e;
        display: flex;
        justify-content: center;
        border-radius: 50%;
        align-items: center;
    }
}


/*HEADER*/
header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 0 var(--gutter_x);
    background: var(--color_light);
    transition: all .2s ease-out;

    div.top {
        display: flex;
        align-items: start;
        justify-content: end;

        .search {
            display: none!important;
        }

        .search button.icon.search {
            display: none;
            /*display: inline-block;*/
            margin: .25rem .5rem 0 0;
            border: 0;
            background: none;

            &::before {
                color: var(--color_main);
                font-family: 'icon';
                content: '\e93d';
                font-size: calc(var(--sizeSmall) * 1.5);
                cursor: pointer;
            }

            span {
                display: none;
            }
        }

        ul.language {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;

            &::before {
                font-family: 'icon';
                color: var(--color_main);
                content: '\e901';
                display: inline-block;
                vertical-align: text-top;
            }

            li a {
                color: var(--color_main);
                line-height: 0;
                font-weight: 700;

                &.on {
                    text-decoration: underline;
                }

                span {
                    padding: 0 .5rem;
                }

                &.disabled {
                    opacity: .5;
                }
            }

            li:last-of-type::before {
                content: '';
                display: inline-block;
                width: 1px;
                background: var(--color_sub);
                height: 1.5rem;
            }
        }
    }

    div.main {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 1rem;

        figure#logo {
            width: 35%;
            max-width: 520px;
        }

        #main {
            box-shadow: var(--shadowMedium) var(--shadowColorSoft);
            border-radius: 0 9px 9px 9px;
            border: 1px solid var(--color_main);
            width: auto;
            display: flex;
            float: right;
            background: var(--color_pos);

            a {
                display: block;
                text-decoration: none;
                font-size: var(--sizeLarge);
                font-weight: 700;
                padding: .5rem 1rem;

                &:hover {
                    text-decoration: underline;
                }

                &.last {
                    padding-right: 2.5rem;
                }

                &.active {
                    color: var(--color_neg);
                }


                &:last-of-type {
                    background: var(--color_special);
                    border: 1px solid var(--color_special);
                    border-radius: 0 9px 9px 9px;
                    margin: -1px -1px -1px -9px;
                    padding: .5rem 2rem;
                    color: var(--color_pos);
                    font-weight: 400;
                }


            }
        }
    }

    .header.mobile, #mobile-nav {
        display: none;
        grid-template-columns: min-content auto;
        gap: 2rem;
        box-shadow: var(--shadowMedium) var(--shadowColorSoft);
        background: var(--color_light);
        border-radius: 0 9px 9px 9px;
        border-top-right-radius: 0;
        width: 100%;
        padding: .5rem;
        margin: 1rem auto 0 auto;
        position: fixed;
        top: -14vh;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        transition: all .5s ease-out;
    }

    #breadcrumb {
        color: var(--color_divide);
        padding: 1rem 0 .8rem 1rem;
        margin: 0 0 0 -1rem;
        transition: all .2s ease-out;
        overflow: hidden;

        a {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;

            &::after {
                content: '\e907';
                font-family: icon;
                padding: .1rem .3rem 0 .7rem;
                color: var(--color_divide);
                font-size: var(--sizeTiny);
            }
        }
    }
}

.fix header {
    top: -1px;
    padding-bottom: 1rem !important;
    box-shadow: var(--shadowHuge) var(--shadowColorSoft);

    & #breadcrumb {
        height: 0;
        padding: 0 0 0 1rem;
    }
}

#index header {
    padding: 0 var(--gutter_x) 2rem var(--gutter_x);
}

.header.mobile,
#mobile-nav {
    display: none;
    grid-template-columns: min-content auto;
    gap: 2rem;
    box-shadow: var(--shadowMedium) var(--shadowColorSoft);
    background: var(--color_light);
    border-radius: 0 9px 9px 9px;
    border-top-right-radius: 0;
    width: 100%;
    padding: .5rem;
    margin: 0 auto;
    position: fixed;
    top: -14vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    transition: all .5s ease-out;

    button {
        border: 0;
        background: none;
    }

    button span {
        font-size: 0 !important;
    }

    button::before {
        content: '';
        font-family: 'icon';
        color: var(--color_main);
        font-size: var(--sizeLarge) !important;
        cursor: pointer;
    }

    .btn-search::before {
        content: '\e913';
    }

    .btn-toggle::before {
        content: '\e911';
        position: relative;
        top: .3rem;
    }
}

.show-nav .header.mobile .btn-toggle::before {
    content: '\e914' !important;
}

.fix .header.mobile {
    top: 0;
}

#mobile-nav {
    position: static;
    transform: none;

    & + a {
        display: none;
        margin: .75rem 1rem 2rem;
        padding: .5rem 2rem;
        border-radius: 0 9px 9px 9px;
        font-weight: 600;
        text-align: center;
        background: var(--color_special);
        color: var(--color_pos);
    }
}


.header.mobile form,
.header.mobile fieldset,
#mobile-nav form,
#mobile-nav fieldset {
    padding: 0;
    border: 0;
    position: relative;
    display: none;

    input {
        border: 0;
        border-bottom: .2rem solid var(--color_main);
        width: 100%;
        line-height: 2;
        background: transparent;
        border-radius: 0;
    }

    button {
        position: absolute;
        right: 0;
        top: 0;
    }
}

.show-nav {
    overflow: hidden;
    background: var(--color_pos);

    .header.mobile {
        top: -.4rem;
    }

    #mpb-type-top img {
        opacity: 0;
    }

    #main {
        display: block;
        background: rgba(255, 255, 255, 0.5);

        a:last-of-type {
            margin: 1rem .5rem;
            border-radius: 0 9px 9px 9px;
            font-weight: 600;
            text-align: center;
        }
    }
}

/*SEARCH*/
#search-box {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    background: rgba(255, 255, 255, 1);
    box-shadow: var(--shadowHuge) var(--shadowColorSoft);
    z-index: 100;
    overflow: hidden;
    height: 0;
    padding: 0;
    transition: all .2s ease-out;
    pointer-events: none;

    .container {
        position: relative;
    }

    h4 {
        margin: 0 0 .5rem 1rem;
    }

    .close {
        position: absolute;
        right: 2.2rem;
        top: -.75rem;
        width: 2rem;
        height: 2rem;
        background: transparent;
        box-shadow: none;
        border: 0;
        cursor: pointer;

        span {
            position: relative;
            display: block;
            width: 2rem;
            height: 2rem;

            &:before, &:after {
                content: "";
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                background-color: var(--color_main);
                width: 100%;
                height: 3px;
                transition: height .2s ease-out;
                border-radius: 3px;
            }

            &:before {
                transform: translate(-50%, -50%) rotate(45deg);
            }

            &:after {
                transform: translate(-50%, -50%) rotate(-45deg);
            }
        }
    }

    form {
        padding: 0;
        margin: 0 1rem;
        border: 2px solid var(--color_main);
        border-radius: 0 9px 9px 9px;

        fieldset {
            margin: 0;
            padding: 0;
            position: relative;
            border: 0;

            input {
                border: 0;
                background: var(--color_pos);
                width: 100%;
                padding: .5rem;
                border-radius: 8px;
            }

            input:focus {
                outline: none;
            }

            button {
                position: absolute;
                right: -1px;
                background: var(--color_main);
                padding: 1.1rem 1rem .5rem 1rem;
                height: calc(100% + 2px);
                top: -1px;
                border-radius: 0 8px 8px 0;
                border: none;
                cursor: pointer;
                transition: all .2s ease-out;

                &:hover {
                    padding: 1.1rem 1.5rem .5rem 1.5rem;
                }

                span {
                    display: block;
                    line-height: 0;

                    &::before {
                        content: '\e93d';
                        font-size: calc(var(--sizeLarge) * 1.5);
                        font-family: icon;
                        color: var(--color_pos);
                    }
                }
            }
        }
    }
}

body.search #search-box {
    height: auto;
    padding: 2rem 0 4rem 0;
    pointer-events: initial;
}

/*FILTER*/
.personalize-filter,
.filter-more {
    .container {
        background: var(--color_light);
        padding: 0 .25rem 1.5rem .25rem;
    }

    span.mobile-btn {
        display: none;
    }

    form {
        border-radius: 0 9px 9px 9px;
        box-shadow: var(--shadowMedium) var(--shadowColorSoft);
        padding: 0 var(--gutter_x);
        position: relative;
        margin: 0;
        background: var(--color_pos);
    }

    .row {
        margin: 0;
        border-bottom: 1px solid #ccc;
        display: grid;
        --bs-gutter-x: 0;
        grid-template-columns: repeat(8, 1fr);
        gap: 0;

        &.filter-set {
            padding: 1rem 0;
        }

        &.filter-regions {
            margin: 0;
            border: 0;
            transition: all .2s ease-out;
        }

        &.filter-latest {
            border-bottom: 0;
            display: block;

            fieldset {
                display: inline-block;
                width: auto;
                margin-right: 1rem;
            }

            .radio input {
                opacity: 0;
                position: absolute;
                left: -100vw;
            }
        }

        &.filter-buttons {
            border: 0;
            margin: 0 .5rem 0 0;
            padding: 0;
            position: absolute;
            right: 0;
            text-align: right;
            display: block;
            width: 100%;
            transform: translateY(-50%);


            button {
                width: auto;
                margin: 0 .5rem;
                background: var(--color_main);
                color: var(--color_pos);
                border: 2px solid var(--color_main);
                border-radius: 0 9px 9px 9px;
                padding: .25rem 1rem;
                line-height: 1.3;
                transition: all .2s ease-out;
                cursor: pointer;
                font-size: var(--sizeMedium);

                &:hover {
                    background: var(--color_pos);
                    color: var(--color_main);
                }
            }
        }
    }

    fieldset {
        margin: 0 0 1rem;
        padding: 0;
        border: 0;
    }

    [type="checkbox"] {
        opacity: 0;
        position: absolute;
    }

    [type="text"] {
        border: 0;
        border-bottom: 2px solid var(--color_sub);
        width: 50%;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: var(--color_sub);
            font-size: var(--sizeMedium);
            opacity: 1;
            transition: all .2s ease-out;
        }

        &:focus::placeholder {
            color: var(--color_sub);
            font-size: var(--sizeMedium);
            opacity: .3;
        }
    }

    label, button.disabled {
        cursor: pointer;
        margin-left: .5rem;
        font-weight: 700;
    }

    /* NEU */
    .row.filter-categories,
    .row.filter-regions,
    .row.filter-update {
        display: block;
        white-space: normal;

        fieldset {
            margin: 0;
            display: inline-block;
            width: auto;
        }

        label {
            display: block;
            margin: 0 .5rem .5rem 0;
            border: .15rem solid rgba(204, 204, 204, .5);
            padding: .2rem .5rem;
            border-radius: .4rem;
            font-weight: 400;
            transition: all .2s ease-out;

            &:hover {
                border-color: var(--color_main);
            }
        }

        fieldset:first-of-type label {
            border-top-left-radius: 0;
        }

        input.checked + label {
            border: .15rem solid var(--color_main);
            background: var(--color_main);
            color: var(--color_pos);
        }

        label.disabled {
            border-color: rgba(204, 204, 204, .5) !important;
            background: rgba(204, 204, 204, .5) !important;
            color: var(--color_sub) !important;
            cursor: default;
        }
    }

    .filter-buttons {
        .reset {
            display: none;
        }

        .confirm {
            background: #fff !important;
            color: var(--color_main) !important;
            font-weight: 600;

            &:hover {
                background: var(--color_main) !important;
                color: var(--color_pos) !important;
            }
        }
    }

    .alphabet {
        display: flex;
        gap: .5rem;
        width: 100%;
        flex-flow: wrap;

        a {
            background: var(--color_pos) !important;
            border: .15rem solid rgba(204, 204, 204, .5) !important;
            border-radius: .4rem !important;
            color: var(--color_neg) !important;
            padding: .2rem .5rem !important;
            cursor: pointer;
        }

        a:hover {
            border-color: var(--color_main) !important;
        }

        a.active {
            border-color: var(--color_main) !important;
            color: var(--color_pos) !important;
            background: var(--color_main) !important;
            opacity: 1 !important;
        }

        a:first-of-type {
            border-top-left-radius: 0 !important;
        }
    }

    .select2-container--default .select2-selection--single {
        border: 0;
        background: none;
    }

    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: var(--color_neg);
    }

    .select2-container--open .select2-dropdown--below {
        border-top: .1rem solid var(--color_main);
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 2rem;
        width: 1rem;
        top: 0;
        right: 0;
        display: none;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border: 0;
        margin: 0;

        &::after {
            content: "\e908";
            font-family: 'icon';
            pointer-events: none;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-45%);
            color: var(--color_divide);
        }
    }

    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        background-color: var(--color_main);
        color: var(--color_pos);
    }

    .select2-results__option {
        padding: .2rem;
    }

    .select2-container--default .select2-search--dropdown .select2-search__field {
        border: .1rem solid var(--color_sub);
    }

    .select2-results__option--selectable {
        font-size: var(--sizeSmall);
    }
}

.filter-more {
    overflow: hidden;
    display: block;
    height: auto;

    fieldset {
        width: 100%;
    }

    .container {
        background: var(--color_light);
    }

    .row:not(.filter-update) {
        padding: .8rem 0;
        --bs-gutter-x: 0;
        display: flex;
        width: 100%;
        border: 0;
        margin: 0;

        & > div {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;

            select {
                width: 100%;
            }
        }

        a {
            display: inline-block;
            width: auto;
            border: 2px solid var(--color_main);
            color: var(--color_pos);
            border-radius: 0 9px 9px 9px;
            background: var(--color_main);
            margin: .5rem .5rem .5rem 0;
            padding: .5rem;
            transition: all .2s ease-out;
            font-size: var(--sizeSmall);

            &.active {
                background: var(--color_main);
                border: 2px solid var(--color_main);
                color: var(--color_pos);
                color: var(--color_pos);
                pointer-events: none;
                cursor: default;
                opacity: .4;
            }

            &:hover {
                border: 2px solid var(--color_main);
                background: var(--color_pos);
                color: var(--color_main);
            }
        }

        fieldset {
            display: inline-block;
            width: 100%;
            border: 2px solid var(--color_main);
            border-radius: 0 9px 9px 9px;
            background: var(--color_pos);
            position: relative;
            margin: 0;

            &::after {
                content: "\e908";
                font-family: 'icon';
                pointer-events: none;
                position: absolute;
                right: .5rem;
                top: 50%;
                transform: translateY(-50%);
                color: var(--color_divide);
            }

            select {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                -o-appearance: none;
                -khtml-appearance: none;
                border: 0;
                background: transparent;
                padding: .5rem 3rem .5rem .5rem;
                cursor: pointer;
                font-size: var(--sizeSmall);

                option[data-default] {
                    color: var(--color_sub);
                }
            }

            span.selection {
                button span {
                    font-size: 25px;
                    margin-right: .5rem;
                    margin-top: -2px;
                    display: block;
                    color: var(--color_main);
                }
            }
        }
    }
}

/*FOOTER*/
footer {
    background: var(--color_sub);
    box-shadow: var(--shadowLarge) var(--shadowColorStrong);
    position: relative;
    width: 100%;
    padding: 0 var(--bs-gutter-x);

    & .networks {
        margin-bottom: 1rem;
        width: auto;
        display: block;
        position: absolute;
        right: 0;
        top: 3rem;
        z-index: 1;
    }

    & .meta {
        margin: 1rem 0;
    }

    .meta a {
        color: var(--color_pos);
        margin-right: 1rem;

        &::before {
            content: '|';
            margin-right: 1rem;
        }

        &:first-of-type::before {
            display: none;
        }

        &:last-of-type {
            float: right;
            margin: 0;
        }

        &:last-of-type::before {
            content: '\e905';
            font-family: 'icon';
            margin-right: .5rem;
            display: inline-block;
            vertical-align: text-top;
        }

    }

    p {
        font-size: var(--sizeSmall);
        color: var(--color_pos);
        opacity: .5;
    }
}

/* ==========================================================================
   ==========================================================================
   Socials
   ==========================================================================
   ========================================================================== */

.networks {
    .icon {
        margin: 0 1rem 1rem 0;

        span {
            display: none;
        }

        &::before {
            color: var(--color_pos);
            font-family: 'icon';
            font-size: var(--sizeLarge);
            display: inline-block;
        }

        &:hover::before {
            color: var(--color_main);
        }

        &.linkedin::before {
            content: '\e902';
        }

        &.twitter::before {
            content: '\e904';
        }

        &.spotify::before {
            content: '\e903';
        }

        &.search::before {
            content: '\e93d';
            font-size: calc(var(--sizeLarge) * 1.5);
        }
    }
}

.sharing, .tools {
    display: none;
    margin: 2rem 0 0 0;
    position: relative;
    z-index: 3;

    a {
        position: relative;
        background: var(--color_pos);
        display: inline-block;
        border: 2px solid var(--color_main);
        border-radius: 100%;
        margin-left: .5rem;

        &:first-of-type {
            margin: 0;
        }

        &::before {
            content: '\e90a';
            font-family: icon;
            font-size: calc(var(--sizeTiny) * .75);
            position: absolute;
            top: .25rem;
            right: .25rem;
            color: var(--color_main);
            z-index: 2;
            text-shadow: -1px -1px 0 rgba(255, 255, 255, .5), 1px -1px 0 rgba(255, 255, 255, .5), -1px 1px 0 rgba(255, 255, 255, .5), 1px 1px 0 rgba(255, 255, 255, .5);
        }

        span {
            display: block;
            height: 2rem;
            width: 2rem;

            &::before {
                content: '\e904';
                font-family: icon;
                font-size: var(--sizeBase);
                position: absolute;
                top: 50%;
                left: 50%;
                line-height: 0;
                transform: translate(-52%, -50%);
            }
        }

        &.recommend span::before {
            content: '\e909';
        }

        &.twitter span::before {
            content: '\e904';
        }

        &.linkedin span::before {
            content: '\e902';
        }

        &.audio span::before {
            content: '\e90b';
        }
    }

    &.bottom {
        padding: .5rem 0 .2rem;
        margin: 2rem 1rem 0 1rem;
        position: relative;
        display: none;
    }
}

.sharing a {
    &.audio.portrait {
        border: 0;
        width: 7rem;
        height: 7rem;
        margin-top: -4.5rem;

        span {
            border: 2px solid var(--color_main);
            border-radius: 100%;
            background: var(--color_pos);
            overflow: hidden;
            position: absolute;
            z-index: 2;
            bottom: 0;
            right: 0;

            &::before {
                position: relative;
                transform: none;
                top: .2rem;
                left: .25rem;
            }
        }
    }

    &.audio {
        float: right;
        display: block;
        position: relative;
        cursor: pointer;
        z-index: 3;

        &::before {
            content: '';
        }

        figure {
            position: absolute;
            border: 2px solid var(--color_main);
            border-radius: 100%;
            overflow: hidden;
            width: 7rem;
            height: 7rem;
            right: 0;
            bottom: -2rem;
            background: var(--color_pos);
            top: auto;
            z-index: 1;

            &&::before, &&::after {
                display: none;
            }
        }

        span::before {
            content: '\e90b';
        }
    }
}

/* ==========================================================================
   ==========================================================================
   Tools - Sticky
   ==========================================================================
   ========================================================================== */
main .tools {
    position: sticky;
    margin: .5rem -8rem 0 0;
    float: left;
    top: 10rem;
    right: 0;
    align-items: end;
    display: flex;
    justify-content: end;
    flex-flow: column;
    width: 95px;

    a {
        display: block;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 0 1rem 0 !important;
    }

    a.audio {
        background: none;
        width: 2.5rem;
        height: 2.5rem;
        margin-top: .2rem !important;
        border: 0;
        cursor: pointer;

        &::before {
            display: none;
        }

        figure {
            border-radius: 100%;
            border: 2px solid var(--color_main);;
            overflow: hidden;
            width: 7rem;
            height: 7rem;
            margin: 0 -5rem 0;
            position: absolute;
            z-index: 0;
        }

        span {
            z-index: 1;
            position: relative;
            background: #fff;
            width: 2.6rem;
            height: 2.6rem;
            right: .2rem;
            border-radius: 100%;
            border: 2px solid var(--color_main);
        }

    }
}

/* ========================================================================== */



/*MAIN*/
body {
    /*.container {*/
    /*    background: var(--color_pos);*/
    /*}*/

    .container.main {
        margin-top: 2rem;
        padding-right: 0;
        padding-left: 0;
        box-shadow: var(--shadowLarge) var(--shadowColorMedium);
        background: var(--color_light);
    }

    &#index > .container:first-of-type {
        background: var(--color_light);
    }
}


/*LISTING*/
.main-list {
    margin: 2rem 0 4rem 0;
}

.supplier-latest {
    margin: 2rem 0;
}

div.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem 1.25rem;
    list-style: none;
    margin: 0;
    max-width: 100%;

    &.events-grid {
        gap: 4rem 0;

        & .item {
            margin: 0 .75rem;
        }
    }

    .item {
        position: relative;
        background: var(--color_pos);
        border-radius: 5px;
        box-shadow: var(--shadow) var(--shadowColorSoft);
        aspect-ratio: 5 / 4.3;

        a {
            display: block;
            position: relative;
            height: 100%;

            figure {
                background: var(--color_pos);
                overflow: hidden;
                position: relative;
                border-radius: 5px 5px 0 0;

                outline: 1px solid var(--color_sub_light);
                outline-offset: 0;
                width: calc(100% - 2px);
                margin-left: 1px;

                span {
                    position: absolute;
                    width: 100%;
                    text-align: center;
                    top: 50%;
                    transform: translateY(-50%);
                    font-weight: 700;
                    font-size: var(--sizeMedium);
                    padding: 0 2rem;
                    line-height: 1.2;
                    transition: all .25s ease-out;
                }

                img {
                    -webkit-transition: all .25s ease-out;
                    transition: all .25s ease-out;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            span {
                display: block;
            }

            span.short {
                font-size: var(--sizeSmall);
                padding: 0 .5rem .5rem;
                color: var(--color_sub);
            }

            span.note {
                font-size: var(--sizeSmall);
                font-weight: 600;
                line-height: 1;
                margin: 0.2rem 0 .2rem;
            }

            span.title {
                padding: .5rem .5rem 0 .5rem;
                font-size: var(--sizeMedium);
                color: var(--color_sub);
                line-height: 1.3;
                height: 34%;
                overflow: hidden;
            }

            span.info {
                padding: 1.5rem .25rem .25rem .25rem;
                color: var(--color_sub_light);
                font-size: var(--sizeSmall) !important;
                text-align: right;
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 3rem;
                background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 1) 55%);
            }

            .note + b {
                display: block;
                font-size: var(--sizeMedium);
                margin: 0 0 .5rem;
                font-weight: 700;

            }

            &:hover {
                img {
                    transform: scale(1.2);
                    transform-origin: center;
                }

                figure span {
                    transform: translateY(-50%) scale(1.2);
                    transform-origin: center;
                }
            }
        }

        span.flag {
            position: absolute;
            top: .75rem;
            right: 0;
            z-index: 2;
            width: auto;
            background: var(--color_main);
            line-height: 1;
            padding: .25rem .5rem;
            color: var(--color_pos);
            border-radius: 0 0 0 5px;
            text-transform: Uppercase;
            font-size: var(--sizeSmall);
            letter-spacing: var(--spacing);
            font-weight: 400;

            &::after {
                content: '\e900';
                font-family: 'icon';
                margin-left: .5rem;
                display: inline-block;
                font-weight: 300;
            }
        }

        &.supplier.base {
            aspect-ratio: 15.1 / 6;

            & span.title {
                height: 100%;
            }
        }

        &.noVisual {
            figure {
                background: linear-gradient(90deg, rgba(79, 160, 108, 1) 0%, rgba(15, 112, 121, 1) 50%, rgba(0, 44, 60, 1) 100%);
                overflow: hidden;
                position: relative;

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

        &.noVisual2 figure {
            background: var(--color_main);
        }

        &.most-read {
            border: 2px solid var(--color_main);
            overflow: hidden;
            aspect-ratio: 302 / 126;
            grid-column: span 2;

            & .flag.mobile {
                display: none;
            }

            & div {
                height: 100%;
            }

            .slide {
                position: relative;
                overflow: hidden;

                & a {
                    & figure {
                        position: absolute;
                        width: 49%;
                        overflow: hidden;
                        height: 100%;
                        outline: none;
                        outline-offset: unset;
                        margin-left: 0;
                        border-radius: 0;

                        & img {
                            display: block;
                            height: 100%;
                            position: relative;
                            width: 100%;
                            object-fit: cover;
                            transition: all .2s ease-out;
                        }

                        &.hover img {
                            transform: translateX(-50%) scale(1.2);
                            transform-origin: center;
                        }
                    }

                    & .title {
                        margin: 0 0 0 51%;
                        padding: 1rem .5rem;
                        font-size: var(--sizeMedium);
                        font-weight: 700;
                        height: 100%;

                        .note {
                            & b {
                                color: var(--color_special);
                                margin-right: .2rem;
                                margin-bottom: .25rem;
                                text-transform: uppercase;
                            }
                        }

                        .note + b {
                            color: var(--color_main);
                            margin-top: 1rem;
                            font-size: var(--sizeLarge);
                            line-height: 1.2;
                        }
                    }
                }
            }

            .owl-dots {
                position: absolute;
                bottom: 0;
                z-index: 1;
                height: 1.5rem;
                width: 24%;
                background: white;
                border-radius: 9px 9px 0 0;
                left: 12%;
                line-height: 0.8;
                display: flex;
                justify-content: center;
                align-items: center;

                button.owl-dot {
                    width: 10px;
                    height: 10px;
                    background: var(--color_pos);
                    margin: 0 .5rem;
                    border-radius: 100%;
                    border: 1px solid var(--color_main);

                    &.active {
                        background: var(--color_main);
                    }

                }

            }
        }

        &.choice {
            border: 2px solid var(--color_main);
            aspect-ratio: 302 / 125.9;
            grid-column: span 2;
            & figure {
                outline: unset!important;
                outline-offset: 0!important;
                border-radius: unset!important;
                position: absolute;
                width: 49%;
                height: 100%;
                overflow: hidden;
                margin-left: 0;

                img {
                    position: relative;
                }
            }

            & span.title {
                margin: 0 0 0 51%;
                padding: 3rem .5rem 0 .5rem;
                height: auto;

                b {
                    color: var(--color_main);
                    font-size: var(--sizeMedium);
                    line-height: 1.2;
                }
            }

            & span.info {
                position: absolute;
                padding-bottom: .25rem;
                right: 0;
                bottom: 0;
                width: 51%;
            }
        }

        &.upcoming-events {
            position: relative;
            border: 2px solid var(--color_special);
            padding: 2.3rem 0 .25rem 0;


            & span.flag {
                background: var(--color_special);
            }

            & a {
                height: auto;
                color: var(--color_neg);
                font-size: var(--sizeSmall);
                line-height: 1.2;
                padding: .5rem 0;
                border-bottom: 1px solid var(--color_sub);
                margin: 0 .5rem;


                & span.note {
                    font-weight: 700;
                    color: var(--color_main);
                    font-size: var(--sizeSmall);
                    margin: 0 0 .1rem 0;

                    & + b {
                        font-size: var(--sizeBase);
                        font-weight: 400;
                        margin: 0;
                    }
                }
            }

            :last-of-type {
                border: 0;
            }
        }

        &.supplier {

            & a:hover {
                img {
                    transform: scale(1);
                }
            }

            &.row-break {
                display: none;

                & + .item {
                    grid-column-start: 1;
                }
            }

            &.base + .item.load-more {
                aspect-ratio: 15.1 / 6;
            }

            & .title {
                font-size: var(--sizeBase);
            }

            & a:hover span.title span.note + span {
                text-decoration: underline;
            }
        }

        &.event {

            & a:hover {
                img {
                    transform: scale(1);
                }
            }

            &.month-start {
                > span:first-of-type {
                    position: absolute;
                    top: -2rem;
                    font-weight: 600;
                    font-size: var(--sizeBase);
                }

                &::before {
                    content: '';
                    width: 2px;
                    height: calc(100% + 2rem);
                    background: var(--color_sub);
                    position: absolute;
                    top: -2rem;
                    left: -.75rem;
                    z-index: 4;
                }
            }


            & a {
                & span.title {
                    font-size: var(--sizeSmall);
                }

                & span.location,
                & span.date {
                    display: flex;
                    margin-top: .25rem;

                    &::before,
                    &::before {
                        font-family: icon;
                        color: var(--color_main);
                        content: '\e90f';
                        margin-right: .5rem;
                    }
                }

                & span.date::before {
                    content: '\e90e';
                }
            }
        }

        &.media-latest {
            background: linear-gradient(to right, #002c3c 20%, #0f717a 100%);
            padding: 1rem;

            & span.header {
                color: var(--color_pos);
                text-transform: uppercase;
                font-size: var(--sizeBase);
                margin: 0 0 1rem 0;
                display: block;
            }

            & a {
                height: auto;

                & span {
                    color: var(--color_main);
                    padding: 0;
                    text-transform: uppercase;
                    font-size: var(--sizeSmall);
                    letter-spacing: 0.025rem;
                }

                & span + span {
                    color: var(--color_pos);
                    padding: .25rem 0 1rem 0;
                    text-transform: none;
                    font-size: var(--sizeSmall);
                    letter-spacing: 0;
                }
            }
        }

        &.video figure::before {
            display: block;
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            content: '\e907';
            font-family: icon;
            padding: 2.5rem .75rem 2.5rem 1.5rem;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 100%;
            color: var(--color_pos);
            line-height: 0;
            font-size: calc(var(--sizeHuge) * 1.5);
        }

        &.podcast figure::before {
            display: block;
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            content: '\e917';
            font-family: icon;
            padding: 2.5rem 1rem;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 100%;
            color: var(--color_pos);
            line-height: 0;
            font-size: calc(var(--sizeHuge) * 1.5);
        }

        &.intern {
            background-color: var(--color_main);

            figure {
                outline-offset: unset;
                outline: unset;
                background: transparent;
                width: 100%;
                margin-left: 0;
            }
        }
    }
    .item.load-more,
    #mobile-load-more {
        border: 2px solid var(--color_main);
        background: var(--color_pos);
        color: var(--color_main);
        border-radius: 5px;
        box-shadow: var(--shadow) var(--shadowColorSoft);
        position: relative;
        cursor: pointer;
        transition: all .2s ease-out;
        display: flex;
        align-items: center;
        justify-content: center;

        button {
            display: block;
            line-height: 1;
            text-align: center;
            text-transform: uppercase;
            font-size: var(--sizeMedium);
            font-weight: 600;
            background: none;
            border: 0;
            padding: 1.5rem 0;

            span {
                color: var(--color_main);
                transition: all .2s ease-out;
            }

            span::after {
                content: '\e916';
                font-family: 'icon';
                margin: 0 0 0 1rem;
                font-weight: 300;
            }
        }

        &:hover {
            span {
                font-size: var(--sizeLarge);
            }
        }
    }

}


/*DETAIL*/
article {
    & h1 {
        line-height: 1.2;
        color: var(--color_neg);
        margin-top: 0;
    }

    & .responsive-video {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 56.25%;

        & iframe {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
    }

    & .note  {
        & * {
            color: var(--color_sub);
            margin: 0;
            font-size: var(--sizeSmall);

            &.advert {
                text-transform: uppercase;
            }

            &.headoffice {
                color: var(--color_main);
                font-size: var(--sizeBase);

                &::before {
                    content: '\e918';
                    font-family: 'icon';
                    padding-right: .25rem;
                    font-size: calc(var(--sizeBase)*1.2);
                    vertical-align: sub;
                    top: -3px;
                    position: relative;
                }
            }
        }
    }

    & p {
        line-height: 1.7;
        font-size: var(--sizeMedium);
    }

    & ul {
        line-height: 1.7;
        font-size: var(--sizeMedium);
        padding-left: 20px;

        li::marker {
            color: var(--color_main);
        }
    }

    & .image-text {
        content: "";
        display: block;
        clear: both;

        & figure {
            float: left;
            width: 50%;
            margin: 0 var(--bs-gutter-x) 0 0;
            height: auto;
        }
    }

    & figure {
        margin: 2rem 0;

        & img {
            width: 100%;
            height: auto;
        }

        & figcaption {
            line-height: 1;
            padding: .5rem;
            font-size: var(--sizeSmall);
            background: var(--color_light);
            color: var(--color_sub);
        }
    }

    & .content-author {
        margin-top: 2rem;
        display: flex;
        gap: 1rem;

        & figure {
            margin: 0;

            & img {
                border-radius: 50%;
                border: 2px solid var(--color_main);
            }
        }


        & p {
            font-size: var(--sizeBase);
            margin: 0;
        }
    }

    & .related,
    & .content-author {
        margin-top: 2.5rem;
    }

    & .related-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 2rem;
        column-gap: 2rem;
        margin: 1rem 0;

        & a {
            display: flex;
            gap: 1rem;
            color: var(--color_sub);

            & figure {
                margin: 0;
                flex: 0 0 10rem;

                &.no-pic {
                    background: linear-gradient(90deg, rgba(79, 160, 108, 1) 0%, rgba(15, 112, 121, 1) 50%, rgba(0, 44, 60, 1) 100%);
                }

                img {
                    outline: 1px solid var(--color_sub_light);
                    outline-offset: -1px;
                }
            }
        }
    }

    & .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    & address {
        font-style: normal;
        line-height: 1.7;
        font-size: var(--sizeMedium);
        margin: 0 0 1rem;
    }

    & .responsive-map {
        width: 100%;

        & iframe {
            border: 0;
            width: 100%;
        }
    }

    & .intro.event-data {
        margin: 0 0 1rem 0;
        & p {
            margin: 0;
            font-weight: 400;

            &::before {
                content: '';
                margin: 0 .5rem 0 0;
                color: var(--color_main);
                font-family: 'icon';
                padding-right: .25rem;
                vertical-align: baseline;
            }

            &.date::before {
                content: '\e90e';
            }

            &.location::before {
                content: '\e90f';
            }

            &.web::before {
                content: '\2bab';
            }
        }
    }

    & .content-tags {
        margin-top: 2rem;
        display: flex;
        gap: .75rem;
        flex-wrap: wrap;

        & span.tag {
            border: 1px solid var(--color_main);
            padding: .5rem 1rem;
            border-radius: 0 9px 9px 9px;
            color: var(--color_main);
        }
    }

}

aside {
    max-width: 308px;
    float: right;

    & a.link-logo {
        display: block;
        margin-bottom: 1rem;
    }

    & address {
        font-style:normal;
        a {
            display: block;
            &:hover span {
                text-decoration: underline;
            }
            &::before {
                content: '\e924';
                font-family: 'icon';
                padding-right: .25rem;
                font-size: calc(var(--sizeBase)*1.2);
                vertical-align: sub;
            }
            &.fax::before {
                content: '\e921';
            }
            &[href*=http]::before {
                content: '\e90a';
                font-size: calc(var(--sizeBase)*.7);
                vertical-align: baseline;
                padding-right: .7rem;
            }
        }
        .socials {
            margin: -.5rem 0 1rem 0;
            a {
                display: inline-block;
                margin: 0 .5rem 0 0;
            }
            span { font-size:0;}
            .linkedin::before { content: '\e902';}
            .facebook::before { content: '\e906';}
            .youtube::before { content: '\ea9d';font-size: calc(var(--sizeBase)*1.5);vertical-align: middle;}
            .twitter::before { content: '\e904';}
        }
        h4 {
            font-size: var(--sizeBase);
            color: var(--color_neg);
            text-transform: none;
            margin: 0;
            line-height: 1;
            padding: 0;
        }
        p {
            line-height: 1;
            margin: .5rem 0;
        }
    }

    & address + address {
        margin-top: 1rem;
    }

    & .form_contact {
        padding: 0;
    }

    & h4 {
        font-size: var(--sizeMedium);
        color: var(--color_special);
        text-transform: uppercase;
    }

    & .related,
    & .recent,
    & .upcoming {
        margin-top: 2.5rem;
        & a {
            color: var(--color_neg);
            border-bottom: 1px solid var(--color_divide);
            margin: 1rem 0;
            padding: 0 0 1rem;
            display: block;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .mpb-type-rectangle {
        margin-bottom: 2rem;
    }

    & * + .mpb-type-rectangle {
        margin-top: 3rem;
    }

    & .categories {
        border-top: 1px solid var(--color_divide);
        border-bottom: 1px solid var(--color_divide);
        margin: 2rem 0 0 0;
        padding: 1rem 0 1.1rem 0;

        & h4 {
            color: var(--color_main);
        }

        & ul {
            padding: 0;

            & li {
                margin: 0 0 .5rem 1rem;
                font-size: var(--sizeSmall);
                line-height: 1.2;

                &::marker {
                    color: var(--color_main);
                }
            }
        }
    }
}



/*NL ARCHIVE*/
.newsletter-archive {
    & .newsletter-entry {

        & span {
            color: var(--color_sub_light);
            display: block;
        }

        margin: 1rem 0;
        padding: 0 0 1rem;

        &:not(:last-of-type) {
            border-bottom: 1px solid var(--color_divide);
        }

    }
}

/* NEWSLETTER */

#subscription {

    & div.sign-up {
        margin-bottom: 2rem;
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 0;

        & .image.txt {
            line-height: 1.6;
            font-size: calc(var(--sizeLarge) * .95);
            padding: 1.5rem;
            background: var(--color_main);
            border-radius: 0 0 0 9px;
            color: var(--color_pos);
        }

        & .text {
            padding: 1.5rem;
            border: 2px solid var(--color_main);
            border-radius: 0 9px 9px 0;
            border-left: 0;
        }
    }

    .archive {
        background: var(--color_main);
        color: var(--color_pos);
        padding: 1rem 1rem 0 1rem;
        margin: 0 0 3rem 0;
        border: 2px solid var(--color_main);
        border-radius: 0 9px 9px 9px;

        h4 {
            color: var(--color_pos);
            margin: 0 0 1rem 0;
        }

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

        a {
            display: block;
            border-bottom: 1px solid var(--color_pos);
            padding: 0 0 1rem 0;
            color: var(--color_pos);
            font-size: var(--sizeTiny);

            span {
                display: block;
                font-size: var(--sizeSmall);

            }

            &:hover span {
                text-decoration: underline;
            }
        }

        &:not(.special) a:last-of-type {
            border: 0;
        }

        &.special {
            background: none;
            border: 0;
            padding: 0 0 0 1rem;
            div {
                grid-template-columns: repeat(4, 1fr);
                margin-bottom: 1rem;
            }

            h4, a {
                color: var(--color_main);
                border: 0;
                padding: .5rem;
            }

            a:hover {
                background: var(--color_main);
                color: var(--color_pos);
                padding: .5rem;
                border-radius: 0 6px 6px 6px;
            }
        }
    }
}

.form_contact,
.form_register,
.form_recommend,
.form_login,
.form_suppliers {
    width: 100%;
    position: relative;

    h4 {
        margin: 2rem 0 1rem 0;
    }

    [type="checkbox"], [type="radio"] {
        opacity: 0;
        position: absolute;
        left: -100vw;
    }

    legend {
        padding: 0 .25rem 0 0;
        font-size: var(--sizeSmall);
    }

    label {
        cursor: pointer;
        padding: 0 .5rem 0 0;

        &::before {
            line-height: 1;
            font-family: icon;
            content: '\e90c';
            color: var(--color_main);
            font-size: var(--sizeMedium);
            font-weight: 300;
            vertical-align: sub;
            top: -1px;
            position: relative;
            background-color: var(--color_pos);
            border-radius: 5px;
            margin-right: .5rem;
        }
    }

    input:checked + label::before {
        content: '\e90d';
    }

    fieldset {
        width: 100%;
        padding: 0;
        margin: 0 0 1rem;
        border: 2px solid var(--color_main);
        border-radius: 0 9px 9px 9px;
        box-shadow: var(--shadow) var(--shadowColorSoft);
        overflow: hidden;
        position: relative;

        &:not(.radio, .checkbox).error {
            border: 2px solid var(--color_special);
        }

        &.radio {
            padding: 0 0 .25rem .5rem;
            border-color: var(--shadowColorSoft);
        }

        &.radio div.error label:before,
        &.checkbox.error label:before {
            color: var(--color_special) !important;
        }

        &.checkbox {
            border: 0;
            box-shadow: none;
            overflow: initial;
        }

        &.select::after {
            content: "\e908";
            font-family: 'icon';
            pointer-events: none;
            position: absolute;
            right: .5rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--color_divide);
        }

        select {
            width: 100%;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;
            -khtml-appearance: none;
            border: 0;
            background: transparent;
            padding: .6rem 3rem .5rem .5rem;
            cursor: pointer;
            color: var(--color_sub);

            option {
                color: var(--color_neg);
            }

            option[data-default] {
                color: var(--color_sub);
            }
        }
    }

    .finalize fieldset {
        margin: 1rem 0 1rem;

        padding: .1rem 0 0 1.75rem;
        border: 0;
        box-shadow: none;

        input[type="checkbox"] {
            width: auto;
        }

        label::before {
            position: absolute;
            left: 0;
            top: 5px;
        }
    }

    input, textarea {
        border: 0;
        background: var(--color_pos);
        width: 100%;
        padding: .5rem;

        &::placeholder {
            color: var(--color_sub);
            font-size: var(--sizeBase);
            opacity: 1;
            transition: all .2s ease-out;
        }

        &:focus::placeholder {
            color: var(--color_sub);
            font-size: var(--sizeBase);
            opacity: .3;
        }

        &:focus {
            outline: none;
        }

    }

    textarea {
        min-height: 6rem;
    }

    input#content_contact_birthday {
        position: fixed;
        left: -100%;
        top: -100%;
    }

    .buttons {
        pointer-events: none;
        margin: 1rem 0 0;
        display: flex;
        justify-content: right;
    }

    button,
    a.button {
        pointer-events: initial;
        background: var(--color_main);
        border: 2px solid var(--color_main);
        border-radius: 0 9px 9px 9px;
        padding: .25rem 1rem;
        color: var(--color_pos);
        cursor: pointer;
        transition: all .2s ease-out;

        &:hover {
            background: var(--color_pos);
            color: var(--color_main);
        }
    }

    a.button.active {
        background: var(--color_pos);
        color: var(--color_main);
    }

    fieldset.radio {
        padding: 0;
        border: 0;
        box-shadow: none;
        overflow: unset;
        margin-bottom: 1rem;
    }

    .captcha {
        display: flex;
        gap: 1rem;

        img.captcha_image {
            height: 40px !important;
            width: auto !important;
            border-radius: 0 !important;
        }

        input {
            border: 2px solid var(--color_main);
            border-radius: 0 9px 9px 9px;
            box-shadow: var(--shadow) var(--shadowColorSoft);
            overflow: hidden;
            position: relative;
            max-width: 300px;
        }

        &.error input {
            border: 2px solid var(--color_special);
        }
    }
}

.form_register,
.form_login {
    & div.row {
        margin-left: calc(var(--bs-gutter-x) * -.5);
        margin-right: calc(var(--bs-gutter-x) * -.5);
    }


    & .buttons {
        button {
            width: 100%;
            padding: 1rem;
            text-transform: uppercase;
            font-size: var(--sizeMedium);
            margin-top: 1rem;
        }
    }
}

/*ADVERTISING*/
.slider-spacer {
    height: 8rem;
}
.mpb-type-slider {
    background: var(--color_light);
    padding: .5rem 0;
    position: absolute;
    bottom: 1rem;
    width: 100%;
    left: 0;

    &::before {
        content: "Ad";
        font-size: var(--sizeTiny);
        color: var(--color_sub);
        text-transform: uppercase;
        line-height: 1;
        letter-spacing: var(--spacing);
        padding: 0 0 .25rem 2rem;
        display: block;
        opacity: .6;
    }

    &.bottom {
        padding-bottom: 3rem;
    }
}

.mpb-type-mid {
    text-align: center;

    a {
        max-width: 460px;
        display: inline-block;
        position: relative;

        &::before {
            position: absolute;
            top: -.85rem;
            right: 0;
            font-size: var(--sizeTiny);
            color: var(--color_sub);
            text-transform: Uppercase;
            line-height: 1;
            letter-spacing: var(--spacing);
            opacity: .6;
            content: "AD";
        }

        & figure {
            margin: 0;
        }
    }
}

.mpb-type-rectangle {
    position: relative;
    border-radius: 5px;
    box-shadow: var(--shadow) var(--shadowColorSoft);
    aspect-ratio: 5 / 4.3;

    & a:hover {
        img {
            transform: scale(1)!important;
        }
    }

    & figure {
        border-radius: 5px;
        background: rgba(0,0,0,.1);
        height:100%;
        width: 100%;
        position: relative;
        overflow:hidden;
        display:block;
        border-radius: 5px!important;
        border: 1px solid var(--color_sub_light);

        & img {
            width: 100%;
            border-radius: 5px;
            height: 100%;
            object-fit: cover;
            border-radius: 0px;
        }
    }


    &::before {
        content: 'Ad';
        position: absolute;
        top: -.85rem;
        right: .15rem;
        font-size: var(--sizeTiny);
        color: var(--color_sub);
        text-transform: Uppercase;
        line-height: 1;
        letter-spacing: var(--spacing);
        opacity:.6;
    }

    &.intern::before {
        content: '' !important;
    }
}

.mpb-type-top {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 1.5rem auto;

    & figure {
        & a {
            display: block;

            &::before {
                content: 'Ad';
                position: absolute;
                top: -.85rem;
                right: .15rem;
                font-size: var(--sizeTiny);
                color: var(--color_sub);
                text-transform: Uppercase;
                line-height: 1;
                letter-spacing: var(--spacing);
                opacity:.6;
            }
        }

        & img {
            width: 100%;
            height: auto;
            transition: all .5s ease-out;
        }
    }
}

#mpb-type-pop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, .8);
    z-index: 9999;

    figure {
        position: relative;
        width: 70%;
        left: 15%;
        height: 100vh;

        > div {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            max-width: 600px;
        }

        a::before {
            right: auto;
            left: 0;
            color: var(--color_sub);
        }

        img {
            width: 100%;
            height: auto;
            border-radius: .2rem;
        }
    }

    .close {
        width: 2rem;
        height: 2rem;
        border: 1px solid var(--color_sub);
        position: absolute;
        right: 0;
        top: -2.5rem;
        border-radius: 100%;
        cursor: pointer;

        span {
            line-height: 0;
            display: block;

            &::before,
            &::after {
                display: block;
                content: '';
                width: 80%;
                height: 1px;
                background: var(--color_sub);
                margin: 50% 10%;
                transform: rotate(45deg);
                position: absolute;
            }

            &::after {
                transform: rotate(-45deg);
            }
        }
    }
}

.mp-ad {
    display: none;

    &.mbp-top {
        display: block;
        min-height: 90px;
        margin: 1.5rem auto;
    }
}


/*MARQUEE*/
.marquee-slide {
    position: relative;
    width: 100%;
    background-color: var(--color_pos);
    padding: 1rem 0;
    line-height: 0;
    box-shadow: var(--shadow) var(--shadowColorSoft);

    .owl-stage-outer {
        overflow: hidden;
        mask-image: linear-gradient(to right, transparent 0%, white 10%, white 90%, transparent 100%);

        .owl-stage {
            display: flex;

            .owl-item {
                width: fit-content !important;

                a {
                    outline: 1px solid var(--color_sub_light);
                    outline-offset: -1px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }

    .owl-nav,
    .owl-dots {
        display: none;
    }
}


@media (max-width: 1679px) {
    header {
        & div.main {
            figure#logo {
                width: 30%;
            }

            & #main {
                a {
                    font-size: var(--sizeMedium);
                }
            }
        }
    }

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


    article {
        & .related-grid {
            & span.title {
                font-size: var(--sizeSmall);
            }
        }
    }
}



@media (max-width: 1399px) {
    .sharing {
        display: block;
    }

    main .tools {
        display: none;
    }

    div.grid {
        & .item {
            & a {
                span.title {
                    font-size: var(--sizeBase);
                }
            }
        }
    }

    article {
        & .related-grid {
            & span.title {
                font-size: var(--sizeBase);
            }
        }
    }
}

@media (max-width: 1199px) {
    header {
        & div.main {
            & #main {
                a {
                    padding: .5rem .5rem;
                    font-size: var(--sizeBase) !important;
                }
            }
        }
    }

    .personalize-filter {
        & span.mobile-btn {
            display: block;
            padding: 0.5rem 1rem;
            border-radius: 0 9px 9px 9px;
            line-height: 1;
            color: var(--color_main);
            background: none;
            border: .2rem solid var(--color_main);

            &::before {
                text-transform: uppercase;
                vertical-align: middle;
                font-size: calc(var(--sizeBase) * 1.3) !important;
                font-family: icon;
                content: '\e935';
            }
        }

        & .container {
            padding: 1rem 0;
            background: none;

            & form {
                display: none;
                padding-bottom: 2rem;
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
                box-shadow: none;

                & .row.filter-update,
                & .row.filter-categories,
                & .row.filter-regions {
                    border: 0;

                    & fieldset {
                        width: 100%;
                        display: block;
                        margin: 0.5rem 0;
                        line-height: 1;

                        label {
                            display: block;
                            width: 100%;
                            padding: .75rem .5rem;
                        }
                    }
                }

                & .row.filter-buttons,
                & .row.filter-more {
                    grid-column: span 2;
                    position: relative;
                    margin-top: 1rem;

                    & button {
                        width: 100%;
                        padding: 0.5rem 1rem;
                        margin: 0;
                    }
                }
            }
        }
    }

    .personalize .personalize-filter {
        & form {
            display: grid;
        }
    }

    .filter-more {
        & .row:not(.filter-update) {
            & > div {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    }

    .main-list:not(.events-list) {
        margin: 1rem 0;
    }

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

    article {
        & .related-grid {
            grid-template-columns: repeat(1, 1fr);
        }

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

    }


    #subscription {
        & div.sign-up {
            grid-template-columns: unset;

            & .image.txt {
                border-radius: 0;
            }

            & .text {
                border-left: 2px solid var(--color_main);
                border-radius: 0 0 9px 0;
            }
        }
    }

    .mpb-type-top {
        max-width: 960px;
    }
}


@media (max-width: 991px) {
    header {
        position: relative;
        display: block;
        padding: 0 var(--gutter_x);
        margin: 0;
        background: none;
        width: 100%;
        transition: all .2s ease-out;

        .search {
            display: none;
        }

        & div.main {
            figure#logo {
                width: 100%;
            }

            & #main {
                position: fixed;
                float: none;
                z-index: 101;
                margin: 0;
                box-shadow: none;
                border-radius: 0;
                top: 0;
                padding-top: 5rem;
                left: 0;
                width: 100%;
                height: 100vh;
                background: rgba(255, 255, 255, .95);
                display: none;

                & a:first-of-type {
                    border-width: 2px 0 1px 0;
                    border-radius: 0;
                }
                & a {
                    border-top: 1px solid var(--color_main);
                    border-bottom: 1px solid var(--color_main);
                    border-radius: 0;
                    padding: 1rem 1rem;
                    text-align: left;
                }

                & a.last {
                    padding-right: 1rem;
                    border-bottom: 2px solid var(--color_main);
                }

                a:last-of-type {
                    margin: 1rem .5rem;
                    border-radius: 0 9px 9px 9px;
                    text-align: center;
                }
            }

        }

        #mobile-nav {
            max-width: 100%;
            display: grid;
            position: static;
            transform: none;
        }

        & #breadcrumb {
            font-size: var(--sizeSmall);

            & a::after {
                font-size: calc(var(--sizeTiny) * .7);
            }
        }
    }

    .header.mobile {
        display: grid;
    }

    .show-nav {
        #main {
            display: block!important;
            background: rgba(255, 255, 255, 0.5);
        }
    }

    .filter-more {
        & .row:not(.filter-update) {
            & > div {
                grid-template-columns: repeat(1, 1fr);
            }
        }
    }

    .container.main {
        box-shadow: none;
        background: var(--color_pos);
        margin-top: 0;
    }

    #index > .container:first-of-type {
        background: none;
    }

    div.grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1.5rem;

        & .item {
            &.media-latest {
                & a {
                    & span + span {
                        font-size: var(--sizeSmall);
                    }
                }
            }
        }
    }


    main {
        margin-top: 1.5rem;
    }

    aside {
        max-width: unset;
        float: unset;
        margin-top: 2rem;
    }

    footer {
        text-align: center;
        & .meta {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0;
            margin-top: 2rem;

            a {
                display: block;
                margin: 0 0 1rem;

                &::before {
                    content: unset;
                }
            }
        }

        & .networks {
            position: relative;
            width: 100%;
            top: unset;
            right: unset;
        }
    }

    .mpb-type-top {
        max-width: 720px;
    }
}

@media (max-width: 767px) {
    div.grid {
        grid-template-columns: repeat(1, 1fr);

        &.events-grid {
            gap: 1.5rem 1.5rem;

            & .item {
                margin: 0;
            }
        }

        & .item {
            aspect-ratio: auto;

            & a {
                span.title {
                    height: 6rem;
                    font-size: var(--sizeMedium);
                }
            }

            &.choice  {
                grid-column: unset;
                aspect-ratio: auto;

                figure {
                    width: 100%;
                    height: auto;
                    position: relative;
                }

                & span.info {
                    width: 100%;
                }

                a span.title {
                    color: var(--color_sub);
                    padding: .8rem .25rem 0 .5rem;
                    margin: 0;
                    height: 6rem;
                    & > b {
                        color: var(--color_sub);
                    }
                }
            }


            &.most-read {
                grid-column: unset;
                aspect-ratio: auto;

                & .flag.mobile {
                    display: block;
                }

                & .slide {
                    & a {
                        & figure {
                            position: relative;
                            width: 100%;
                            overflow: hidden;
                            height: auto;
                        }

                        & .title {
                            margin: 0;
                            height: auto;

                            & .note {
                                display: none;
                            }

                            & b {
                                margin-top: 0!important;
                                font-size: var(--sizeMedium);
                            }
                        }
                    }
                }

                & .owl-dots {
                    left: 0;
                    width: 100%;
                }
            }


            &.event {
                &:not(:first-of-type) {
                    &.month-start {
                        margin-top: 1.75rem;
                    }
                }

                &.month-start::before {
                    content: unset;
                }
            }
        }
    }

    article {
        & .image-text {
            & figure {
                float: none;
                width: 100%;
                margin: 0;
            }
        }
    }

    .mpb-type-top {
        max-width: 540px;
    }
}

@media (max-width: 567px) {
    .mpb-type-top {
        max-width: 540px;
    }
}