/*
 *  BREADCRUMBS
 */
.breadcrumbs {
    padding-bottom: 15px;
}
.breadcrumbs .breadcrumbs\.navigation > .breadcrumb {
    font-size: 0.9rem;
    font-weight: 500;
}
.breadcrumbs .breadcrumbs\.navigation > .breadcrumb:not(:last-child) {
    padding-right: 20px;
}
.breadcrumbs .breadcrumbs\.navigation > .breadcrumb:not(:last-child):after {
    content: '>';
    position: absolute;
    width: 20px;
    height: 100%;
    font-size: 0.6rem;
    font-weight: 600;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--background-dark);
}
.breadcrumbs .decoration,
.breadcrumbs .active {
    cursor: default;
    color: var(--background-dark);
}
.breadcrumbs .action {
    color: var(--background-blue);
    text-decoration: underline;
    cursor: pointer;
}


/*
 *  COOKIES
 */
#cookies {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 256;
    background: rgba(19, 21, 23, 0.93);
}
@supports (backdrop-filter: blur(1rem)) {
    #cookies {
        background: rgba(19, 21, 23, 0.88);
        backdrop-filter: blur(1rem);
    }
}
.cookies-wrapper {
    width: 95%;
    max-width: 375px;
    height: auto;
    max-height: 90%;

    padding: 1rem;
    background: var(--background);
    border: 3px solid var(--background-blue);
    border-top-color: transparent;
    box-shadow: 0 0 50px 0 black;

    overflow-y: auto;
    font-size: 0.85rem;
}
.cookies-wrapper > h3 {
    font-size: 1.2rem;
}
.cookies-wrapper > h4 {
    font-size: 1.05rem;
}


/*
 *  NAVIGATIONS
 */
/* Assets */
.navigation\.asset {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    position: relative;
}
.navigation\.asset > .nav-logo {
    gap: 10px;
    height: var(--navigation-max-height);
}
.navigation\.asset > .nav-logo .nav-logo-text {
    width: 100%;
    height: calc(var(--navigation-element-height) * 0.9);
    font-weight: 500;
    font-size: 0.62rem;
    line-height: 1.4em;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.navigation\.asset > .nav-logo .nav-logo-text::before {
    content: '';
    position: relative;
    display: inline-block;
    top: 0;
    left: 0;
    width: 1px;
    height: calc(var(--navigation-element-height) * 0.9);
    background: var(--background-yellow);
    margin-right: 15px;
}
.navigation\.asset > .nav-logo .nav-logo-button {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}

.navigation\.asset.phone:after {
    position: absolute;
    display: block;
    content: '';
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    background: #fff0;
    z-index: -1;
    transform: translateX(-50%);
    transition: background ease-in-out 300ms;
}
.navigation\.asset.phone[data-active="true"]:after {
    background: white;
}

/* Components */
/* Main Navigation */
.navigation.main-navigation > .navigation-list {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0.25rem;
}

/* Main Navigation - Global Element Share */
.navigation.main-navigation .navigation-element-common,
.navigation.main-navigation .navigation-element-locale {
    transition: border-color ease-in 125ms,
                color ease-in 125ms;
}
.navigation.main-navigation .navigation-element-locale {
    display: flex;
    align-items: center;
    padding: 0 0.3rem;
    height: var(--navigation-element-height);
    border-bottom: 1px solid var(--background-blue);
}
.navigation.main-navigation .navigation-element-locale:hover,
.navigation.main-navigation .navigation-element-locale:focus-within,
.navigation.main-navigation .navigation-element-locale[data-active] {
    color: var(--background-dark);
    border-color: rgba(38, 59, 126, 0);
}

/* Main Navigation - Elements First */
.navigation.main-navigation > .navigation-list > .navigation-element > .navigation-element-common {
    display: flex;
    align-items: center;
    padding: 0 0.3rem;
    height: var(--navigation-element-height);
    border-bottom: 1px solid transparent;
}
.navigation.main-navigation > .navigation-list > .navigation-element > .navigation-element-common:hover,
.navigation.main-navigation > .navigation-list > .navigation-element > .navigation-element-common:focus-within,
.navigation.main-navigation > .navigation-list > .navigation-element > .navigation-element-common[data-active] {
    color: var(--background-dark);
    border-bottom: 1px solid var(--background-dark);
}

/* Main Navigation - Group */
.navigation.main-navigation > .navigation-list > .navigation-group {
    position: relative;
}
.navigation.main-navigation > .navigation-list > .navigation-group > .navigation-group-label,
.navigation.main-navigation > .navigation-list > .navigation-group > .navigation-group-label > .navigation-group-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--navigation-element-height);
    padding: 0 0.3rem;
    transition: color ease-in 125ms;
    border-bottom: 1px solid transparent;
    color: var(--background-blue);
    cursor: pointer;
}
.navigation.main-navigation > .navigation-list > .navigation-group:hover > .navigation-group-label,
.navigation.main-navigation > .navigation-list > .navigation-group:focus-within > .navigation-group-label,
.navigation.main-navigation > .navigation-list > .navigation-group[data-active='true'] > .navigation-group-label {
    border-bottom: 1px solid var(--background-dark);
}
.navigation.main-navigation > .navigation-list > .navigation-group:hover > .navigation-group-label,
.navigation.main-navigation > .navigation-list > .navigation-group:hover > .navigation-group-label > .navigation-group-link,
.navigation.main-navigation > .navigation-list > .navigation-group:focus-within > .navigation-group-label,
.navigation.main-navigation > .navigation-list > .navigation-group:focus-within > .navigation-group-label > .navigation-group-link,
.navigation.main-navigation > .navigation-list > .navigation-group[data-active='true'] > .navigation-group-label,
.navigation.main-navigation > .navigation-list > .navigation-group[data-active='true'] > .navigation-group-label > .navigation-group-link {
    color: var(--background-dark);
}
.navigation.main-navigation > .navigation-list > .navigation-group > .navigation-group-label svg {
    height: 20px;
    width: 20px;
    fill: var(--background-blue);
    transition: fill ease-in 125ms;
}
.navigation.main-navigation > .navigation-list > .navigation-group:hover > .navigation-group-label svg,
.navigation.main-navigation > .navigation-list > .navigation-group:focus-within > .navigation-group-label svg,
.navigation.main-navigation > .navigation-list > .navigation-group[data-active='true'] > .navigation-group-label svg {
    fill: var(--background-dark);
}

/* Main Navigation - Group > Group-List */
.navigation.main-navigation > .navigation-list > .navigation-group > .navigation-group-list {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    bottom: 200%;
    left: 50%;
    border: 1px solid #cdcdcd;
    background: var(--background);
    box-shadow: 0 0 20px -15px #000;
    border-radius: 8px;
    padding: 10px 10px;
    width: max-content;
    z-index: 1;
    max-width: 200px;
    transition: transform ease-in 175ms, opacity ease-in 175ms;
    opacity: 0;
    transform: translate(-50%, 10px);
}
.navigation.main-navigation > .navigation-list > .navigation-group[data-active='true'] > .navigation-group-list {
    display: flex;
    opacity: 1;
    transform: translate(-50%, 0);
    bottom: auto;
    top: 100%;
}
.navigation.main-navigation > .navigation-list > .navigation-group > .navigation-group-list > .navigation-element,
.navigation.main-navigation > .navigation-list > .navigation-group > .navigation-group-list > .navigation-element > .navigation-element-common {
    display: block;
    width: 100%;
    cursor: pointer;
}
.navigation.main-navigation > .navigation-list > .navigation-group > .navigation-group-list > .navigation-element > .navigation-element-common {
    padding: 4px 16px;
    border-radius: 4px;
}
.navigation.main-navigation > .navigation-list > .navigation-group > .navigation-group-list > .navigation-element > .navigation-element-common:hover ,
.navigation.main-navigation > .navigation-list > .navigation-group > .navigation-group-list > .navigation-element > .navigation-element-common:focus-within {
    background: rgba(0, 0, 0, 0.03);
}

/* Main Navigation - Section */
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-label {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--navigation-element-height);
    padding: 0 0.3rem;
    transition: color ease-in 125ms;
    color: var(--background-blue);
    cursor: pointer;
    border-bottom: 1px solid transparent;
}
.navigation.main-navigation > .navigation-list > .navigation-section:hover > .navigation-section-label,
.navigation.main-navigation > .navigation-list > .navigation-section:focus-within > .navigation-section-label,
.navigation.main-navigation > .navigation-list > .navigation-section[data-active='true'] > .navigation-section-label {
    color: var(--background-dark);
    border-bottom: 1px solid var(--background-dark);
}
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-label svg {
    height: 20px;
    width: 20px;
    fill: var(--background-blue);
    transition: fill ease-in 125ms;
}
.navigation.main-navigation > .navigation-list > .navigation-section:hover > .navigation-section-label svg,
.navigation.main-navigation > .navigation-list > .navigation-section:focus-within > .navigation-section-label svg,
.navigation.main-navigation > .navigation-list > .navigation-section[data-active='true'] > .navigation-section-label svg {
    fill: var(--background-dark);
}

/* Main Navigation - Section > Section-List */
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list {
    position: absolute;
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    gap: 2rem;
    top: 100%;
    left: 50%;
    padding: 3rem 1rem;
    z-index: 1;
    transform: translateX(-50%);
    width: 100%;
    max-height: 80vh;
}
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list::after {
    content: '';
    display: block;
    position: absolute;
    width: 100vw;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    border-bottom: 1px solid rgb(205, 205, 205);
    border-left: 1px solid rgb(205, 205, 205);
    border-right: 1px solid rgb(205, 205, 205);
    background: var(--background);
    border-radius: 0 0 8px 8px;
    z-index: -1;
}
.navigation.main-navigation > .navigation-list > .navigation-section[data-active="true"] > .navigation-section-list {
    display: flex;
}
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list > .navigation-element,
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list > .navigation-element > .navigation-element-common {
    display: block;
}
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list > .navigation-element > .navigation-element-common {
    padding: 4px 16px;
    border-radius: 4px;
}
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list > .navigation-element > .navigation-element-common:hover ,
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list > .navigation-element > .navigation-element-common:focus-within {
    background: rgba(0, 0, 0, 0.03);
}

/* Main Navigation - Section > Group */
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list > .navigation-group {

}
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list > .navigation-group > .navigation-group-label {
    font-weight: 900;
    color: var(--background-dark);
    margin-bottom: 0.75rem;
}
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list > .navigation-group > .navigation-group-label > .navigation-group-link {
    display: block;
    border-radius: 3px;
    width: 100%;
    padding: 0.3rem 1rem;
}
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list > .navigation-group > .navigation-group-label:hover > .navigation-group-link {
    background: rgba(0, 0, 0, 0.03);
}

/* Main Navigation - Section > Group > Group > Group-List */
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list > .navigation-group > .navigation-group-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 200px;
}
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list > .navigation-group > .navigation-group-list > .navigation-element > .navigation-element-common {
    display: block;
    border-radius: 3px;
    width: 100%;
    padding: 0.3rem 1rem;
}
.navigation.main-navigation > .navigation-list > .navigation-section > .navigation-section-list > .navigation-group > .navigation-group-list > .navigation-element:hover > .navigation-element-common {
    background: rgba(0, 0, 0, 0.03);
    text-decoration: underline;
}


/* Phone Navigation */
.navigation.phone-navigation {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: -1;
    width: 100vw;
    height: calc(var(--height) - var(--navigation-max-height, 54px));
    padding: 30px 0;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity ease-in-out 300ms, z-index ease-in-out 300ms;
    background: white;
    overflow-y: auto;
    overflow-x: hidden;
}
[data-active="true"] .navigation.phone-navigation {
    opacity: 1;
    z-index: 64;
}

/* Phone Navigation > List */
.navigation.phone-navigation > .navigation-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.navigation.phone-navigation > .navigation-list .navigation-element-common:not(.button) {
    position: relative;
    padding: 10px 0;
    display: block;
}
.navigation.phone-navigation > .navigation-list .navigation-element-common:not(.button):hover:after,
.navigation.phone-navigation > .navigation-list .navigation-element-common:not(.button):focus-within:after,
.navigation.phone-navigation > .navigation-list .navigation-element-common:not(.button)[data-active]:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -10px;
    height: 100%;
    width: calc(100% + 20px);
    background: #f0f0f0;
    border-radius: 6px;
    z-index: -1;
}

/* Main Navigation - Group */
.navigation.phone-navigation > .navigation-list .navigation-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.navigation.phone-navigation > .navigation-list .navigation-group > .navigation-group-label {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
}
.navigation.phone-navigation > .navigation-list .navigation-group > .navigation-group-label,
.navigation.phone-navigation > .navigation-list .navigation-group > .navigation-group-label > .navigation-group-link {
    position: relative;
    display: flex;
    align-items: center;
    transition: background ease-in 125ms;
    color: var(--background-blue);
    cursor: pointer;
}
.navigation.phone-navigation > .navigation-list .navigation-group:hover > .navigation-group-label:after,
.navigation.phone-navigation > .navigation-list .navigation-group:focus-within > .navigation-group-label:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -10px;
    height: 100%;
    width: calc(100% + 20px);
    background: #f0f0f0;
    border-radius: 6px;
    z-index: -1;
}
.navigation.phone-navigation > .navigation-list .navigation-group:hover > .navigation-group-label,
.navigation.phone-navigation > .navigation-list .navigation-group:hover > .navigation-group-label > .navigation-group-link,
.navigation.phone-navigation > .navigation-list .navigation-group:focus-within > .navigation-group-label,
.navigation.phone-navigation > .navigation-list .navigation-group:focus-within > .navigation-group-label > .navigation-group-link,
.navigation.phone-navigation > .navigation-list .navigation-group[data-active='true'] > .navigation-group-label,
.navigation.phone-navigation > .navigation-list .navigation-group[data-active='true'] > .navigation-group-label > .navigation-group-link {
    color: var(--background-dark);
}
.navigation.phone-navigation > .navigation-list .navigation-group > .navigation-group-label svg {
    height: 20px;
    width: 20px;
    fill: var(--background-blue);
    transition: fill ease-in 125ms;
}
.navigation.phone-navigation > .navigation-list .navigation-group:hover > .navigation-group-label svg,
.navigation.phone-navigation > .navigation-list .navigation-group:focus-within > .navigation-group-label svg {
    fill: var(--background-dark);
}

/* Main Navigation - Group > Group-List */
.navigation.phone-navigation > .navigation-list .navigation-group > .navigation-group-list {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 2rem;
}
.navigation.phone-navigation > .navigation-list .navigation-group[data-active="true"] > .navigation-group-list {
    display: flex;
}

/* Side Navigation */
.navigation.side-navigation {
    width: 100%;
}
.navigation.side-navigation > .navigation-list {
    border-left: 1px solid var(--background-blue);
    padding: 0.75rem 0;
}
.navigation.side-navigation > .navigation-list.phone {
    display: none;
}
.navigation.side-navigation[data-active="true"] > .navigation-list.phone {
    display: block;
}
.navigation.side-navigation > .navigation-list > .navigation-group {
    margin-bottom: 1.5rem;
    width: 100%;
}
.navigation.side-navigation > .navigation-list > .navigation-group:last-child {
    margin-bottom: 0;
}
.navigation.side-navigation > .navigation-list > .navigation-group > .navigation-group-label,
.navigation.side-navigation > .navigation-list > .navigation-group > .navigation-group-link {
    width: 100%;
    font-weight: 600;
    padding: 0 0 1rem 1rem;
}
.navigation.side-navigation > .navigation-list .navigation-element {
    width: 100%;
    padding-left: 0.6rem;
    padding-bottom: 0.25rem;
}
.navigation.side-navigation > .navigation-list .navigation-element-common {
    width: 100%;
    color: var(--background-blue);
    padding: 0.4rem;
    border-radius: 3px;
    display: block;

    transition: color ease-in 100ms, background ease-in 100ms;
}
.navigation.side-navigation > .navigation-list .navigation-element > .navigation-element-common[data-active="true"]:hover,
.navigation.side-navigation > .navigation-list .navigation-element > .navigation-element-common:hover {
    background: var(--background-light-blue);
    text-decoration: none;
    color: var(--background);
}
.navigation.side-navigation > .navigation-list .navigation-element > .navigation-element-common[data-active="true"],
.navigation.side-navigation > .navigation-list .navigation-element > .navigation-element-common[data-active="true"]:active,
.navigation.side-navigation > .navigation-list .navigation-element > .navigation-element-common:active {
    background: var(--background-blue);
    text-decoration: none;
    color: var(--background);
}

/* Hamburger */
.hamburger-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    --svg-color: var(--background-blue);
}
.hamburger-wrapper.light {
    --svg-color: var(--background);
}
.hamburger-wrapper > .hamburger-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.hamburger-wrapper > .hamburger-button > svg {
    fill: var(--svg-color);
}
.hamburger-wrapper > .hamburger-button > svg.hamburger-closed {
    display: block;
}
.hamburger-wrapper > .hamburger-button > svg.hamburger-open {
    display: none;
}
.hamburger-wrapper[data-active="true"] > .hamburger-button > svg.hamburger-closed {
    display: none;
}
.hamburger-wrapper[data-active="true"] > .hamburger-button > svg.hamburger-open {
    display: block;
}


/*
 *  FOOTER
 */
.footer {
    --footer-background: var(--background-dark);
    --footer-link-color: var(--background-light-red);
    --footer-link-hover-color: var(--background-red);
    --footer-color: #7a7a77;

    --footer-deco-color: #232121;

    background: var(--footer-background);
    color: var(--footer-color);
    padding-top: 2rem;
    padding-bottom: 3rem;
}
.footer .footer\.wrapper {
    padding-left: 2rem;
    padding-right: 2rem;
}
.footer .footer\.section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.footer .footer\.separation {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--footer-deco-color);
    border-bottom: 1px solid var(--footer-deco-color);
}
.footer .footer\.description {
    margin-top: 0.5rem;
    font-weight: 200;
    line-height: 1.5em;
}
.footer a {
    color: var(--footer-color);
    font-weight: 200;
    transition: color 200ms ease-in;
}
.footer a:hover,
.footer a:focus-within,
.footer a:focus-visible {
    text-decoration: underline;
    color: var(--footer-link-hover-color);
}
.footer .copyright {
    font-weight: 200;
}
.footer .copyright > a {
    color: var(--footer-link-color);
    font-weight: 200;
    transition: color 200ms ease-in;
}


/*
 *  ADVERTISEMENT
 */
.advertisement {
    background: #CF202E;
    overflow: hidden;
    border-radius: 1rem;
    margin: 5px;
    position: relative;
    z-index: 1;
}


/*
 *  SECTIONS
 */
.section {
    --section-background: var(--background);
    --section-background-light: var(--background-light);
    --section-background-oposite: var(--background-dark);

    --section-color: var(--background-dark);
    --section-color-light: var(--color-dark);

    --section-link-color: var(--background-blue);
    --section-link-hover-color: var(--background-light-blue);

    --section-font-size: var(--custom-section-font-size, 0.95rem);

    background: var(--section-background);
    font-size: var(--section-font-size);
    color: var(--section-color);

    position: relative;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.section a {
    color: var(--section-link-color);
    cursor: pointer;
    transition: color 200ms ease-in;
}
.section a:hover {
    color: var(--section-link-hover-color);
    text-decoration: underline;
}
.section a.no_underline:hover {
    color: var(--section-link-hover-color);
    text-decoration: none;
}
.section p {
    color: var(--section-color-light);
}
.section span {
    color: var(--section-color);
}

/* Variations */
.section.blue {
    --section-background: var(--background-blue);
    --section-background-light: var(--background-light-blue);
    --section-background-oposite: var(--background-dark);

    --section-color: var(--background);
    --section-color-light: var(--color-light);

    --section-link-color: var(--background-yellow);
    --section-link-hover-color: var(--background-light-yellow);
}
.section.dark {
    --section-background: var(--background-dark);
    --section-background-light: var(--background-light-dark);
    --section-background-oposite: var(--background);

    --section-color: var(--background);
    --section-color-light: var(--color-light);

    --section-link-color: var(--background-blue);
    --section-link-hover-color: var(--background-light-blue);
}
.section.red {
    --section-background: var(--background-red);
    --section-background-light: var(--background-light-red);
    --section-background-oposite: var(--background-dark);

    --section-color: var(--background);
    --section-color-light: var(--color-light);

    --section-link-color: var(--background-blue);
    --section-link-hover-color: var(--background-light-blue);
}
.section.yellow {
    --section-background: var(--background-yellow);
    --section-background-light: var(--background-light-yellow);
    --section-background-oposite: var(--background);

    --section-color: var(--background-dark);
    --section-color-light: var(--color-dark);

    --section-link-color: var(--background-red);
    --section-link-hover-color: var(--background-light-red);
}

/* Additions */
.section.cover::after {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    height: 100%;
    width: 100vw;
    background: var(--section-background);
    z-index: -1;
}

/* Section Box */
.section .section-block {
    position: relative;
}


/*
 *  Buttons
 */
.button {
    --button-primary: var(--section-link-color, var(--background));
    --button-secondary: var(--section-link-hover-color, var(--background-light));
    --button-opposite: var(--section-background, var(--background-dark));
    --button-border-size: 2px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 5px 10px;
    gap: 4px;

    transition: border 200ms ease-in-out,
        border-radius 200ms ease-in-out,
        border-left 200ms ease-in-out,
        border-right 200ms ease-in-out,
        border-top 200ms ease-in-out,
        border-bottom 200ms ease-in-out,
        border-color 200ms ease-in-out,
        color 200ms ease-in-out,
        background-color 200ms ease-in-out !important;
    cursor: pointer;

    background: transparent;
    color: var(--button-primary) !important;
}
.button.white {
    --button-primary: var(--background);
    --button-secondary: var(--background-light);
    --button-opposite: var(--background-dark);
}
.button.light {
    --button-primary: var(--background-dark);
    --button-secondary: rgba(33, 33, 33, 0.08);
    --button-opposite: var(--background-dark);
}
.button.filter {
    --button-primary: #e6dbb8;
    --button-secondary: #d4c89e;
    --button-opposite: #4a3f2a;
}
.button.dark {
    --button-primary: var(--background-dark);
    --button-secondary: var(--background-light-dark);
    --button-opposite: var(--background);
}
.button.blue {
    --button-primary: var(--background-blue);
    --button-secondary: var(--background-light-blue);
    --button-opposite: var(--background);
}
.button.red {
    --button-primary: var(--background-red);
    --button-secondary: var(--background-light-red);
    --button-opposite: var(--background);
}
.button.yellow {
    --button-primary: var(--background-yellow);
    --button-secondary: var(--background-light-yellow);
    --button-opposite: var(--background-dark);
}
.button.small-border {
    --button-border-size: 1px;
}
.button.big-border {
    --button-border-size: 3px;
}

.button.small {
    padding: 5px 7px;
}

/* Disabled */
.button.disabled {
    color: var(--button-opposite) !important;
    background-color: var(--button-secondary);
    opacity: 0.3;
}

/* active */
.button.active {
    background-color: var(--button-primary);
}

/* common */
.button span,
.button span,
.button span {
    color: var(--button-primary) !important;
}
.button svg,
.button svg,
.button svg {
    fill: var(--button-primary) !important;
}
.button.small svg,
.button.small svg,
.button.small svg {
    height: 14px;
    width: 14px;
}

.button.active,
.button.active span {
    color: var(--button-opposite) !important;
}
.button.active svg {
    fill: var(--button-opposite) !important;
}

.button:hover,
.button:active,
.button:focus-visible,
.button:hover span,
.button:active span,
.button:focus-visible span {
    color: var(--button-opposite) !important;
}
.button:hover svg,
.button:active svg,
.button:focus-visible svg {
    fill: var(--button-opposite) !important;
}

/* round */
.button.round {
    border: none;
    border-radius: 5px;
}
.button.round:hover,
.button.round:focus-visible {
    background-color: var(--button-secondary);
}
.button.round:active {
    background-color: var(--button-secondary);
}

/* normal */
.button.normal {
    border-radius: 5px;
    border: var(--button-border-size,2px) solid var(--button-primary);
}
.button.normal:hover,
.button.normal:focus-visible {
    border-color: var(--button-secondary);
    background-color: var(--button-secondary);
}
.button.normal:active {
    border-color: var(--button-primary);
    background-color: var(--button-primary);
}

/* Underline */
.button.underline {
    border-left: var(--button-border-size, 2px) solid transparent;
    border-right: var(--button-border-size, 2px) solid transparent;
    border-top: var(--button-border-size, 2px) solid transparent;
    border-bottom: var(--button-border-size, 2px) solid var(--button-primary);
}
.button.underline:hover,
.button.underline:active,
.button.underline:focus-visible {
    border-radius: 5px;
}
.button.underline:hover,
.button.underline:focus-visible {
    border-color: var(--button-secondary);
    background-color: var(--button-secondary);
}
.button.underline:active {
    border-color: var(--button-primary);
    background-color: var(--button-primary);
}

/*
 *  LINKS
 */
/* Hyperlink */
.link.hyperlink {
    cursor: pointer;
}
.link.hyperlink.no-style {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
}

/* Image */
.link.image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Background */
.link.image-wrapper.background {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

/* Rounded */
.link.image-wrapper.rounded,
.link.image-wrapper.rounded .image-element {border-radius: 3px;}

/* Image */
.link.image-wrapper > .image-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.link.image-wrapper.hover\:blur > .image-element {
    transition: filter 200ms ease-in;
}

/* Oppacity */
.link.image-wrapper.opacity\:0\.1 > .image-element {opacity: 0.1;}
.link.image-wrapper.opacity\:0\.2 > .image-element {opacity: 0.2;}
.link.image-wrapper.opacity\:0\.3 > .image-element {opacity: 0.3;}
.link.image-wrapper.opacity\:0\.4 > .image-element {opacity: 0.4;}
.link.image-wrapper.opacity\:0\.5 > .image-element {opacity: 0.5;}
.link.image-wrapper.opacity\:0\.6 > .image-element {opacity: 0.6;}
.link.image-wrapper.opacity\:0\.7 > .image-element {opacity: 0.7;}
.link.image-wrapper.opacity\:0\.8 > .image-element {opacity: 0.8;}
.link.image-wrapper.opacity\:0\.9 > .image-element {opacity: 0.9;}

@supports (filter: blur()) {
    .link.image-wrapper.blur > .image-element {
        filter: blur(2px);
    }
    .link.image-wrapper.big-blur > .image-element {
        filter: blur(8px);
    }
    .link.image-wrapper.hover\:blur:hover > .image-element {
        filter: blur(1px);
    }
}

/* Image Aspect-Ratio */
.link.image-wrapper.aspect-ratio\:0\.2 > .image-element {aspect-ratio: 0.2}
.link.image-wrapper.aspect-ratio\:0\.4 > .image-element {aspect-ratio: 0.4}
.link.image-wrapper.aspect-ratio\:0\.6 > .image-element {aspect-ratio: 0.6}
.link.image-wrapper.aspect-ratio\:0\.8 > .image-element {aspect-ratio: 0.8}
.link.image-wrapper.aspect-ratio\:1 > .image-element {aspect-ratio: 1}
.link.image-wrapper.aspect-ratio\:1\.2 > .image-element {aspect-ratio: 1.2}
.link.image-wrapper.aspect-ratio\:1\.4 > .image-element {aspect-ratio: 1.4}
.link.image-wrapper.aspect-ratio\:1\.6 > .image-element {aspect-ratio: 1.6}
.link.image-wrapper.aspect-ratio\:1\.8 > .image-element {aspect-ratio: 1.8}
.link.image-wrapper.aspect-ratio\:2 > .image-element {aspect-ratio: 2}
.link.image-wrapper.aspect-ratio\:2\.2 > .image-element {aspect-ratio: 2.2}
.link.image-wrapper.aspect-ratio\:2\.4 > .image-element {aspect-ratio: 2.4}
.link.image-wrapper.aspect-ratio\:2\.6 > .image-element {aspect-ratio: 2.6}
.link.image-wrapper.aspect-ratio\:2\.8 > .image-element {aspect-ratio: 2.8}
.link.image-wrapper.aspect-ratio\:3 > .image-element {aspect-ratio: 3}

/* Image not found */
.link.image-wrapper > .image-not-found {
    width: 100%;
    height: 100%;
    padding: 1rem;
}
.link.image-wrapper > .image-not-found > .image-not-found-container {
    height: 100%;
    width: auto;
    min-width: 125px;
    max-width: 750px;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--section-background-light, var(--color-dark, rgba(63, 63, 63, 0.7)));
}
.link.image-wrapper > .image-not-found > .image-not-found-container,
.link.image-wrapper > .image-not-found > .image-not-found-container > span {
    color: var(--section-background-light, var(--color-dark, rgba(63, 63, 63, 0.7)));
}


/*
 *  ALL PURPOSE ERROR
 */
.error {
    font-size: 0.7rem;
    text-decoration: inherit;
    color: #c2000c !important;
}
.error.error-title {
    font-size: 2rem;
}
.error.error-description {
    font-size: 1rem;
}

.error.message {
    color: var(--background-dark) !important;
}

/*
 *  ARTICLES
 */
.articles {
    position: relative;
    margin: auto;
}
.article {
    position: absolute;
    transition: transform 0.3s ease, opacity 0.3s ease;
    width: var(--item-width);
    break-inside: avoid-column;
}
.article .article-wrapper {
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 20px -15px var(--background-dark);
    overflow: hidden;
}
.article .article-wrapper .article-header {
    color: var(--background-red);
    font-weight: 300;
}
.article .article-wrapper .article-title {
    color: var(--background-dark);
    font-weight: 500;
}
.article .article-wrapper .article-description {
    color: rgba(27, 25, 25, 0.72);
}


/*
 *  TAG
 */
.tag {
    padding: 0.15rem 1.25rem;
    border-radius: 1rem;
    background: var(--background-red);
    color: var(--background-light-blue);
}


/*
 *  MESSAGE
 */
.message {
    --message-border: #e8e8e8;
    --message-background: var(--background-light);
    --message-color: var(--background-dark);

    color: var(--message-color);
    width: 100%;
}
.message[data-visible='false'] {
    display: none !important;
}
.message span {
    color: var(--message-color);
}
.message.red {
    --message-border: var(--background-red);
    --message-background: rgba(207, 32, 46, 0.37);
    --message-color: var(--background);
}
.message.blue {
    --message-border: var(--background-blue);
    --message-background: rgba(38, 59, 126, 0.37);
    --message-color: var(--background);
}
.message.light {
    --message-border: rgba(33, 33, 33, 0.04);
    --message-background: var(--background);
    --message-color: rgba(33, 33, 33, 0.4);
}

/* Normal */
.message.normal {
    display: inline-flex;
    border: 2px dashed var(--message-border);
    background: var(--message-background);

    border-radius: 8px;
    padding: 1rem;
}
.message.normal[data-visible='true'] {
    display: inline-flex !important;
}
.message.normal .message-message {
    opacity: 0.7;
}
.message.normal > svg {
    height: 20px;
    width: 30px;
    fill: var(--message-color);
    opacity: 0.7;
}

/* Not Found */
.message.not-found {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 215px;
}
.message.not-found[data-visible='true'] {
    display: flex !important;
}
.message.not-found > svg {
    height: 55px;
    width: 55px;
    opacity: 0.8;
}
.message.not-found > .not-found-error {
    opacity: 0.8;
    font-weight: 900;
}
.message.not-found > .not-found-description {
    opacity: 0.4;
    font-weight: 400;
}


/*
 *  Accordion
 */
.accordion.active {
    background: var(--button-primary);
}
.accordion.yellow {
    --button-primary: var(--background-yellow);
    --button-secondary: var(--background-light-yellow);
    --button-color: var(--background-dark);
}
.accordion {
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: border 150ms ease-in-out,
    border-radius 150ms ease-in-out,
    border-left 150ms ease-in-out,
    border-right 150ms ease-in-out,
    border-top 150ms ease-in-out,
    border-bottom 150ms ease-in-out,
    border-color 150ms ease-in-out,
    color 150ms ease-in-out,
    background-color 150ms ease-in-out;
    cursor: pointer;
    --button-border-size: 1px;
    --button-primary: var(--background);
    --button-secondary: var(--background-light);
    --button-color: var(--background-dark);
    color: var(--button-primary);
    border-radius: 5px;
    width: 100%;
    border: var(--button-border-size,2px) solid var(--button-primary);
}
.accordion > .accordion\:button {
    background: transparent;
    padding: 10px 40px 10px 15px;
    border: none;
    appearance: none;
    position: relative;
    width: 100%;
    color: var(--button-primary);
    font-size: var(--section-font-size);
    min-height: 39px;
    text-align: left;
    font-weight: 300;
    letter-spacing: -1%;
}
.accordion.active > .accordion\:button {
    color: var(--button-color);
    border-bottom: 1px solid rgba(41, 41, 41, 0.1);
}
.accordion > .accordion\:button[aria-selected="true"]:after {
    content: "\002D";
    color: var(--button-color);
    right: 1.1rem;
}
.accordion > .accordion\:button:after {
    position: absolute;
    top: calc(50% - 0.95rem);
    right: 1rem;
    content: '\002B';
    font-size: 1.4rem;
    color: var(--button-secondary);
    float: right;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.accordion > .accordion\:content {
    overflow: hidden;
    max-height: 0;
    color: var(--button-color);
    transition: max-height 0.2s ease-out;
    width: 100%;
}
.accordion.active > .accordion\:content {
    display: block;
}
.accordion > .accordion\:content > .accordion\:slot {
    font-size: calc(var(--section-font-size) - 0.04rem);
    line-height: 1.7em;
    width: 100%;
    padding: 10px 15px;
    font-weight: 200;
}


/*
 *  Pagination
 */
.pagination {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.pagination > .page-button.full-page-button {
    padding: 0;
}
.pagination > .page-button.full-page-button .page-link {
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination > .page-button .page-link {
    text-decoration: none;
    display: block;
    border-radius: 0.3rem;
    color: #fff;
    background-color: var(--background-blue);
}
.pagination > .page-button.disabled .page-link {
    background-color: rgba(38, 59, 126, 0.13);
    color: #747474;
}
.pagination > .page-item.active .page-link {
    text-decoration: none;
    color: #7b7c7e;
}
.pagination > .page-item:not(.full-page-button) .page-link {
    padding: 6px 12px;
}
.pagination .page-link {
    cursor: pointer;
}


/*
 *  Captcha
 */
.captcha {
    display: block;
    max-width: 375px;
    width: 100%;
    margin: auto;
    border: 1px solid #dcd9d9;
    background: white;
    padding: 1.75rem 1.25rem 1.25rem;
    border-radius: 0.75rem;
}
.captcha > .title,
.captcha > .description {
    display: block;
    width: 100%;
    text-align: center;
}
.captcha > .title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}
.captcha > .description {
    font-size: 0.95rem;
    color: #2c2a2a;
    margin-bottom: 1.5rem;
}
.captcha > .wrapper.svg {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
}
.captcha > .wrapper img {
    width: calc(100% - 0.5rem - 30px);
    border-radius: 0.3rem;
}
.captcha > .wrapper.svg button {
    background: transparent;
    border: none;
    width: 30px;
    padding: 0;
    cursor: pointer;
}
.captcha > input {
    padding: 0.4rem;
    border: 1px solid #aeb0b4;
    border-radius: 0.3rem;
    width: 100%;
    margin-bottom: 0.75rem;
}
.captcha > .wrapper.buttons {
    display: flex;
    gap: 0.5rem;
}
.captcha > .wrapper.buttons button {
    padding: 0.75rem;
    background: #2c2a2a;
    color: #cfd3d7;
    border-radius: 0.3rem;
    border: none;
    width: 100%;
    cursor: pointer;
}
.captcha > .wrapper.buttons button:hover {
    background: #e3e3e3;
    color: #2c2a2a;
}


/*
 *  Popup
 */
#popup {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(45, 43, 43, 0.96);
    z-index: 1;
    backdrop-filter: blur(5px);
    display: none;
}
#popup.active {
    display: block;
}
#popup-wrapper {
    position: absolute;
    width: 100%;
    padding: 0 2rem;
}


/*
 * Document Files
 */
.document_file {
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    border: 1px solid var(--background-blue);
    display: flex;
    align-items: center;
    justify-items: start;
    background: #fff;
    width: 100%;
}
.document_file > svg {
    height: 18px;
}

.document_file > .file-name {
    width: 100%;

    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: clip;
}

.document_file .mini-image {
    height: 18px;
    width: 18px;
    object-fit: cover;
    object-position: center;
    border-radius: 3px;
    border: 1px solid var(--background-blue);
}

.document_file .file-actions {
    display: flex;
    justify-items: center;
    align-items: center;
}
.document_file .file-action {
    --file-fill-color: #7b7c7e;
    --file-fill-color-hover: var(--background-red);
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    display: flex;
    justify-items: center;
    align-items: center;
}
.document_file .file-action.red {
    --file-fill-color: var(--background-light-red);
    --file-fill-color-hover: var(--background-red);
}
.document_file .file-action svg {
    height: 18px;
    fill: var(--file-fill-color);
}
.document_file .file-action svg:hover {
    fill: var(--file-fill-color-hover);
}