/**
 * Theme Name: Unsere Heimat
 * Template:   hello-elementor
 */

:root {
    --amsl-blue-color-rgb: 28 76 125;
    --main-blue-color-rgb: 80 150 180;
    --turquoise-color-rgb: 0 161 154;
    --green-color-rgb: 92 151 51;
    --red-color-rgb: 227 6 19;
    --grey-color-rgb: 78 94 102;
    --yellow-color-rgb: 245 156 0;
    --header-green-color-rgb: 174 196 67;
    --header-light-green-color-rgb: 222 231 177;
}

/* roboto-200 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 200;
    src: url('./assets/fonts/roboto-v48-latin-200.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('./assets/fonts/roboto-v48-latin-200.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-200italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 200;
    src: url('./assets/fonts/roboto-v48-latin-200italic.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('./assets/fonts/roboto-v48-latin-200italic.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('./assets/fonts/roboto-v48-latin-regular.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('./assets/fonts/roboto-v48-latin-regular.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('./assets/fonts/roboto-v48-latin-italic.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('./assets/fonts/roboto-v48-latin-italic.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('./assets/fonts/roboto-v48-latin-700.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('./assets/fonts/roboto-v48-latin-700.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-700italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: url('./assets/fonts/roboto-v48-latin-700italic.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('./assets/fonts/roboto-v48-latin-700italic.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

body {
    font-family: "Roboto", sans-serif !important;
}

#logo {
    display: inline-block;
}

/* HTML: <div class="honeycomb"></div> */
.honeycomb {
    height: 300px;
    /* adjust to control the size  */
    aspect-ratio: 1.155;
    clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
    background: rgb(var(--amsl-blue-color-rgb));
    transform: rotate(-19deg) translateY(7%);
}

#logo img {
    width: auto;
    height: 75px;
    margin-top: 30px;
    margin-right: 20px;
    transform: rotate(19deg);
}

#logo .honeycomb {
    height: 150px;
    display: flex;
    justify-content: end;
    align-items: center;
    position: relative;
    margin-left: -100px;
    margin-top: -37px;
    z-index: 10000;
}

#navWrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9000;
    margin: 0;
    padding: 0;
    width: 100%;
    height: inherit;
    /* 150px; */
    background-color: rgb(var(--header-light-green-color-rgb));
}

ul.main-nav {
    height: 75px;
    overflow: hidden;
    transition: height 250ms ease;
}

/* The menu is now scrollable on smaller devices */
#navWrapper>nav.collapsed ul.main-nav {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#navWrapper>nav.collapsed ul.main-nav::-webkit-scrollbar {
    display: none;
}

ul.main-nav>li.menuToggle {
    text-align: left;
    margin-left: 32px;
}


ul.main-nav>li {
    display: block;
    margin-right: 15px;
    padding: 15px 0 35px 0;
}

#navWrapper>nav {
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: 100%;
    /* CHANGED */
    margin-left: 60px;
    align-items: flex-start;
}

.main-nav a {
    position: relative;
    font-weight: 700;
}

.main-nav a,
.main-nav a:hover,
.main-nav a:active,
.main-nav a:focus,
.main-nav a:visited {
    color: black !important;
    font-size: 24px;
}

.main-nav a.menuToggle,
.main-nav a.menuToggle:hover,
.main-nav a.menuToggle:active,
.main-nav a.menuToggle:focus,
.main-nav a.menuToggle:visited {
    color: rgb((var(--amsl-green-color-rgb))) !important;
    font-size: 30px;
}

.main-nav a .honeycomb {
    height: 25px;
    display: inline-block;
    transform: rotate(-19deg) translateY(25%);
    margin-right: 5px;

    --b: 4px;
    /* adjust to control the border  */
    aspect-ratio: 1.155;
    clip-path: polygon(0 50%, 50% -50%, 100% 50%, 50% 150%, 0 50%,
            var(--b) 50%,
            calc(25% + var(--b)*0.5) calc(100% - var(--b)*0.866),
            calc(75% - var(--b)*0.5) calc(100% - var(--b)*0.866),
            calc(100% - var(--b)) 50%,
            calc(75% - var(--b)*0.5) calc(var(--b)*0.866),
            calc(25% + var(--b)*0.5) calc(var(--b)*0.866),
            var(--b) 50%);
}

.main-nav li a:hover .honeycomb,
.main-nav .chapterIntroduction.active a .honeycomb,
.main-nav .chapterSix.active a .honeycomb,
.main-nav .chapterOne.active a .honeycomb,
.main-nav .chapterTwo.active a .honeycomb,
.main-nav .chapterThree.active a .honeycomb,
.main-nav .chapterFour.active a .honeycomb,
.main-nav .chapterFive.active a .honeycomb {
    --b: 0px !important;
    clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%) !important;
}

.main-nav a:not(.menuToggle):hover::after,
.main-nav .active a:not(.menuToggle)::after {
    position: absolute;
    content: '';
    bottom: -21px;
    left: 35px;
    width: 50px;
    height: 4px;
    background: rgb(var(--amsl-blue-color-rgb));
    display: block;
    z-index: -1;
}

.main-nav .chapterIntroduction a .honeycomb,
.main-nav .chapterIntroduction a:hover::after,
.main-nav .chapterIntroduction.active a::after,
.main-nav .chapterSix a .honeycomb,
.main-nav .chapterSix a:hover::after,
.main-nav .chapterSix.active a::after {
    background: rgb(var(--main-blue-color-rgb)) !important;
}

.main-nav .chapterOne a .honeycomb,
.main-nav .chapterOne a:hover::after,
.main-nav .chapterOne.active a::after {
    background: rgb(var(--turquoise-color-rgb)) !important;
}

.main-nav .chapterTwo a .honeycomb,
.main-nav .chapterTwo a:hover::after,
.main-nav .chapterTwo.active a::after {
    background: rgb(var(--green-color-rgb)) !important;
}

.main-nav .chapterThree a .honeycomb,
.main-nav .chapterThree a:hover::after,
.main-nav .chapterThree.active a::after {
    background: rgb(var(--red-color-rgb)) !important;
}

.main-nav .chapterFour a .honeycomb,
.main-nav .chapterFour a:hover::after,
.main-nav .chapterFour.active a::after {
    background: rgb(var(--grey-color-rgb)) !important;
}

.main-nav .chapterFive a .honeycomb,
.main-nav .chapterFive a:hover::after,
.main-nav .chapterFive.active a::after {
    background: rgb(var(--yellow-color-rgb)) !important;
}

#subline {
    display: none;
}

/********************
 * Variants *
 ********************/
.other-variants {
    position: absolute;
    right: 20px;
    background: none;
    top: 5px;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    z-index: 9999;
}

#contratst-toggle-wrapper {
    display: flex;
    gap: 10px;
    flex-direction: row;
    justify-content: end;
}

.leichte-sprache-box {
    display: flex;
    text-align: right;
    justify-content: center;
    align-items: flex-end;

}

.leichte-sprache-text {
    color: rgb(28, 76, 125) !important;
    font-weight: 600 !important;
    margin-right: 10px;
    padding: 3px;
    text-decoration: none !important;
}

.leichte-sprache-text .comments-area a,
.page-content a {
    text-decoration: none !important;
}

.honeycomb-icon {
    height: 40px;
    /* adjust to control the size  */
    aspect-ratio: 1.155;
    clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
    background: rgb(var(--amsl-blue-color-rgb));
    transform: rotate(-19deg) translateY(7%);

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.honeycomb-icon i {
    font-size: 18px;
    color: rgb(255, 255, 255);
    transform: rotate(19deg);
    /* gleicht die Rotation aus */
    cursor: pointer;
}


.honeycomb-icon:hover {
    background: #14385c;
}

#easy-to-read-variant {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

#easy-to-read-variant span {
    display: none;
    font-size: 1.5em;
    font-weight: 700;
    color: rgb(var(--amsl-blue-color-rgb)) !important;
}

a#easy-to-read-variant:hover span,
a#easy-to-read-variant:focus span,
a#easy-to-read-variant:active span {
    color: #14385c !important;
}

#goto-easy-to-read.honeycomb-icon img {
    width: 20px;
    height: 20px;
    transform: rotate(19deg);
    /* gleicht die Rotation aus */
}

/********************
 * GO TO TOP BUTTON *
 ********************/

#goToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 75px;
    height: auto;
    transform: rotate(-19deg) translateY(7%);
    background: white;
    color: rgb(var(--amsl-blue-color-rgb)) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 24px;
    border: none !important;
    border-radius: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, color 0.3s ease, background 0.3s ease;
    /* transition: opacity 0.3s ease, bottom 0.3s ease, color 0.3s ease, background 0.3s ease; */
    z-index: 10000;
    aspect-ratio: 1.155;
    clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
}

#goToTop::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(var(--amsl-blue-color-rgb) / 0.7);
    --b: 4px;
    clip-path: polygon(0 50%, 50% -50%, 100% 50%, 50% 150%, 0 50%,
            var(--b) 50%,
            calc(25% + var(--b)*0.5) calc(100% - var(--b)*0.866),
            calc(75% - var(--b)*0.5) calc(100% - var(--b)*0.866),
            calc(100% - var(--b)) 50%,
            calc(75% - var(--b)*0.5) calc(var(--b)*0.866),
            calc(25% + var(--b)*0.5) calc(var(--b)*0.866),
            var(--b) 50%);
    transition: --b 0.3s ease, background 0.3s ease;
}

#goToTop>i {
    transform: rotate(19deg) translateY(-7%);
    position: relative;
    z-index: 1;
}

#goToTop.visible {
    opacity: 1;
    pointer-events: auto;
}

#goToTop:hover::before {
    --b: 0px;
    background: rgb(var(--amsl-blue-color-rgb));
}

#goToTop:hover {
    background: rgb(var(--amsl-blue-color-rgb));
    color: white !important;
}

/*************
 * TYPORAPHY *
 *************/
.chapterHeading h1::after,
.chapterHeading h2::after,
.chapterHeading h3::after,
.chapterHeading h4::after,
.chapterHeading h5::after,
.chapterHeading h6::after {
    position: absolute;
    content: '';
    bottom: -21px;
    left: 0px;
    width: 50px;
    height: 4px;
    background: black;
    display: block;
    z-index: -1;
}

.chapterHeading h1:has(>a)::after,
.chapterHeading h2:has(>a)::after,
.chapterHeading h3:has(>a)::after,
.chapterHeading h4:has(>a)::after,
.chapterHeading h5:has(>a)::after,
.chapterHeading h6:has(>a)::after {
    left: 58px;
}

.chapterHeading h1:has(>a):not(:has(.honeycomb))::after,
.chapterHeading h2:has(>a):not(:has(.honeycomb))::after,
.chapterHeading h3:has(>a):not(:has(.honeycomb))::after,
.chapterHeading h4:has(>a):not(:has(.honeycomb))::after,
.chapterHeading h5:has(>a):not(:has(.honeycomb))::after,
.chapterHeading h6:has(>a):not(:has(.honeycomb))::after {
    left: 0px;
}

.chapterHeading h1,
.chapterHeading h2,
.chapterHeading h3,
.chapterHeading h4,
.chapterHeading h5,
.chapterHeading h6 {
    margin-block-end: 0rem;
    font-weight: 600;
}

.chapterHeading h1 a,
.chapterHeading h2 a,
.chapterHeading h3 a,
.chapterHeading h4 a,
.chapterHeading h5 a,
.chapterHeading h6 a {
    text-decoration: none;
}

.chapterHeading h1 a .honeycomb,
.chapterHeading h2 a .honeycomb,
.chapterHeading h3 a .honeycomb,
.chapterHeading h4 a .honeycomb,
.chapterHeading h5 a .honeycomb,
.chapterHeading h6 a .honeycomb {
    height: 48px;
    display: inline-block;
    margin-right: 5px;
    transform: rotate(-19deg) translateY(25%);
    /* aspect-ratio: 1/cos(30deg); */
    --b: 0px;
    clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
}

.chapterHeading.amsl h1,
.chapterHeading.amsl h2,
.chapterHeading.amsl h3,
.chapterHeading.amsl h4,
.chapterHeading.amsl h5,
.chapterHeading.amsl h6,
/*  */
.chapterHeading.amsl h1 a,
.chapterHeading.amsl h2 a,
.chapterHeading.amsl h3 a,
.chapterHeading.amsl h4 a,
.chapterHeading.amsl h5 a,
.chapterHeading.amsl h6 a,
/*  */
.coloredHeading.amsl h1,
.coloredHeading.amsl h2,
.coloredHeading.amsl h3,
.coloredHeading.amsl h4,
.coloredHeading.amsl h5,
.coloredHeading.amsl h6 {
    color: rgba(var(--amsl-blue-color-rgb) / 1) !important;
}

.chapterHeading.amsl h1::after,
.chapterHeading.amsl h2::after,
.chapterHeading.amsl h3::after,
.chapterHeading.amsl h4::after,
.chapterHeading.amsl h5::after,
.chapterHeading.amsl h6::after,
/*  */
.chapterHeading.amsl h1 a .honeycomb,
.chapterHeading.amsl h2 a .honeycomb,
.chapterHeading.amsl h3 a .honeycomb,
.chapterHeading.amsl h4 a .honeycomb,
.chapterHeading.amsl h5 a .honeycomb,
.chapterHeading.amsl h6 a .honeycomb {
    background: rgba(var(--amsl-blue-color-rgb) / 1) !important;
}

.chapterHeading.mainBlue h1,
.chapterHeading.mainBlue h2,
.chapterHeading.mainBlue h3,
.chapterHeading.mainBlue h4,
.chapterHeading.mainBlue h5,
.chapterHeading.mainBlue h6,
/*  */
.chapterHeading.mainBlue h1 a,
.chapterHeading.mainBlue h2 a,
.chapterHeading.mainBlue h3 a,
.chapterHeading.mainBlue h4 a,
.chapterHeading.mainBlue h5 a,
.chapterHeading.mainBlue h6 a,
/*  */
.coloredHeading.mainBlue h1,
.coloredHeading.mainBlue h2,
.coloredHeading.mainBlue h3,
.coloredHeading.mainBlue h4,
.coloredHeading.mainBlue h5,
.coloredHeading.mainBlue h6 {
    color: rgba(var(--main-blue-color-rgb) / 1) !important;
}

.chapterHeading.mainBlue h1::after,
.chapterHeading.mainBlue h2::after,
.chapterHeading.mainBlue h3::after,
.chapterHeading.mainBlue h4::after,
.chapterHeading.mainBlue h5::after,
.chapterHeading.mainBlue h6::after,

.chapterHeading.mainBlue h1 a .honeycomb,
.chapterHeading.mainBlue h2 a .honeycomb,
.chapterHeading.mainBlue h3 a .honeycomb,
.chapterHeading.mainBlue h4 a .honeycomb,
.chapterHeading.mainBlue h5 a .honeycomb,
.chapterHeading.mainBlue h6 a .honeycomb {
    background: rgba(var(--main-blue-color-rgb) / 1) !important;
}

.chapterHeading.turquoise h1,
.chapterHeading.turquoise h2,
.chapterHeading.turquoise h3,
.chapterHeading.turquoise h4,
.chapterHeading.turquoise h5,
.chapterHeading.turquoise h6,
/*  */
.chapterHeading.turquoise h1 a,
.chapterHeading.turquoise h2 a,
.chapterHeading.turquoise h3 a,
.chapterHeading.turquoise h4 a,
.chapterHeading.turquoise h5 a,
.chapterHeading.turquoise h6 a,
/*  */
.coloredHeading.turquoise h1,
.coloredHeading.turquoise h2,
.coloredHeading.turquoise h3,
.coloredHeading.turquoise h4,
.coloredHeading.turquoise h5,
.coloredHeading.turquoise h6 {
    color: rgba(var(--turquoise-color-rgb) / 1) !important;
}

.chapterHeading.turquoise h1::after,
.chapterHeading.turquoise h2::after,
.chapterHeading.turquoise h3::after,
.chapterHeading.turquoise h4::after,
.chapterHeading.turquoise h5::after,
.chapterHeading.turquoise h6::after,
/*  */
.chapterHeading.turquoise h1 a .honeycomb,
.chapterHeading.turquoise h2 a .honeycomb,
.chapterHeading.turquoise h3 a .honeycomb,
.chapterHeading.turquoise h4 a .honeycomb,
.chapterHeading.turquoise h5 a .honeycomb,
.chapterHeading.turquoise h6 a .honeycomb {
    background: rgba(var(--turquoise-color-rgb) / 1) !important;
}

.chapterHeading.green h1,
.chapterHeading.green h2,
.chapterHeading.green h3,
.chapterHeading.green h4,
.chapterHeading.green h5,
.chapterHeading.green h6,
/*  */
.chapterHeading.green h1 a,
.chapterHeading.green h2 a,
.chapterHeading.green h3 a,
.chapterHeading.green h4 a,
.chapterHeading.green h5 a,
.chapterHeading.green h6 a,
/*  */
.coloredHeading.green h1,
.coloredHeading.green h2,
.coloredHeading.green h3,
.coloredHeading.green h4,
.coloredHeading.green h5,
.coloredHeading.green h6 {
    color: rgba(var(--green-color-rgb) / 1) !important;
}

.chapterHeading.green h1::after,
.chapterHeading.green h2::after,
.chapterHeading.green h3::after,
.chapterHeading.green h4::after,
.chapterHeading.green h5::after,
.chapterHeading.green h6::after,
/*  */
.chapterHeading.green h1 a .honeycomb,
.chapterHeading.green h2 a .honeycomb,
.chapterHeading.green h3 a .honeycomb,
.chapterHeading.green h4 a .honeycomb,
.chapterHeading.green h5 a .honeycomb,
.chapterHeading.green h6 a .honeycomb {
    background: rgba(var(--green-color-rgb) / 1) !important;
}

.chapterHeading.red h1,
.chapterHeading.red h2,
.chapterHeading.red h3,
.chapterHeading.red h4,
.chapterHeading.red h5,
.chapterHeading.red h6,
/*  */
.chapterHeading.red h1 a,
.chapterHeading.red h2 a,
.chapterHeading.red h3 a,
.chapterHeading.red h4 a,
.chapterHeading.red h5 a,
.chapterHeading.red h6 a,
/*  */
.coloredHeading.red h1,
.coloredHeading.red h2,
.coloredHeading.red h3,
.coloredHeading.red h4,
.coloredHeading.red h5,
.coloredHeading.red h6 {
    color: rgba(var(--red-color-rgb) / 1) !important;
}

.chapterHeading.red h1::after,
.chapterHeading.red h2::after,
.chapterHeading.red h3::after,
.chapterHeading.red h4::after,
.chapterHeading.red h5::after,
.chapterHeading.red h6::after,
/*  */
.chapterHeading.red h1 a .honeycomb,
.chapterHeading.red h2 a .honeycomb,
.chapterHeading.red h3 a .honeycomb,
.chapterHeading.red h4 a .honeycomb,
.chapterHeading.red h5 a .honeycomb,
.chapterHeading.red h6 a .honeycomb {
    background: rgba(var(--red-color-rgb) / 1) !important;
}

.chapterHeading.grey h1,
.chapterHeading.grey h2,
.chapterHeading.grey h3,
.chapterHeading.grey h4,
.chapterHeading.grey h5,
.chapterHeading.grey h6,
/*  */
.chapterHeading.grey h1 a,
.chapterHeading.grey h2 a,
.chapterHeading.grey h3 a,
.chapterHeading.grey h4 a,
.chapterHeading.grey h5 a,
.chapterHeading.grey h6 a,
/*  */
.coloredHeading.grey h1,
.coloredHeading.grey h2,
.coloredHeading.grey h3,
.coloredHeading.grey h4,
.coloredHeading.grey h5,
.coloredHeading.grey h6 {
    color: rgba(var(--grey-color-rgb) / 1) !important;
}

.chapterHeading.grey h1::after,
.chapterHeading.grey h2::after,
.chapterHeading.grey h3::after,
.chapterHeading.grey h4::after,
.chapterHeading.grey h5::after,
.chapterHeading.grey h6::after,
/*  */
.chapterHeading.grey h1 a .honeycomb,
.chapterHeading.grey h2 a .honeycomb,
.chapterHeading.grey h3 a .honeycomb,
.chapterHeading.grey h4 a .honeycomb,
.chapterHeading.grey h5 a .honeycomb,
.chapterHeading.grey h6 a .honeycomb {
    background: rgba(var(--grey-color-rgb) / 1) !important;
}

.chapterHeading.yellow h1,
.chapterHeading.yellow h2,
.chapterHeading.yellow h3,
.chapterHeading.yellow h4,
.chapterHeading.yellow h5,
.chapterHeading.yellow h6,
/*  */
.chapterHeading.yellow h1 a,
.chapterHeading.yellow h2 a,
.chapterHeading.yellow h3 a,
.chapterHeading.yellow h4 a,
.chapterHeading.yellow h5 a,
.chapterHeading.yellow h6 a,
/*  */
.coloredHeading.yellow h1,
.coloredHeading.yellow h2,
.coloredHeading.yellow h3,
.coloredHeading.yellow h4,
.coloredHeading.yellow h5,
.coloredHeading.yellow h6 {
    color: rgba(var(--yellow-color-rgb) / 1) !important;
}

.chapterHeading.yellow h1::after,
.chapterHeading.yellow h2::after,
.chapterHeading.yellow h3::after,
.chapterHeading.yellow h4::after,
.chapterHeading.yellow h5::after,
.chapterHeading.yellow h6::after,
/*  */
.chapterHeading.yellow h1 .honeycomb,
.chapterHeading.yellow h2 .honeycomb,
.chapterHeading.yellow h3 .honeycomb,
.chapterHeading.yellow h4 .honeycomb,
.chapterHeading.yellow h5 .honeycomb,
.chapterHeading.yellow h6 .honeycomb {
    background: rgba(var(--yellow-color-rgb) / 1) !important;
}

.chapterHeading h1 a:hover,
.chapterHeading h1 a:focus,
.chapterHeading h1 a:active,
.chapterHeading h2 a:hover,
.chapterHeading h2 a:focus,
.chapterHeading h2 a:active,
.chapterHeading h3 a:hover,
.chapterHeading h3 a:focus,
.chapterHeading h3 a:active,
.chapterHeading h4 a:hover,
.chapterHeading h4 a:focus,
.chapterHeading h4 a:active,
.chapterHeading h5 a:hover,
.chapterHeading h5 a:focus,
.chapterHeading h5 a:active,
.chapterHeading h6 a:hover,
.chapterHeading h6 a:focus,
.chapterHeading h6 a:active {
    color: black !important;
}

.chapterHeading h1:has(>a:hover)::after,
.chapterHeading h2:has(>a:hover)::after,
.chapterHeading h3:has(>a:hover)::after,
.chapterHeading h3:has(>a:hover)::after,
.chapterHeading h4:has(>a:hover)::after,
.chapterHeading h5:has(>a:hover)::after,
.chapterHeading h6:has(>a:hover)::after {
    background: black !important;
}

.chapterHeading h1 a:hover .honeycomb,
.chapterHeading h2 a:hover .honeycomb,
.chapterHeading h3 a:hover .honeycomb,
.chapterHeading h4 a:hover .honeycomb,
.chapterHeading h5 a:hover .honeycomb,
.chapterHeading h6 a:hover .honeycomb {
    background-color: black !important;
}

/***************
 * VIDEO EDITS *
 ***************/
.video-container {
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 15px;
    border: 3px solid black;
    overflow: hidden;
}

.video-container.amsl {
    border-color: rgb(var(--amsl-blue-color-rgb)) !important;
}

.video-container.mainBlue {
    border-color: rgb(var(--main-blue-color-rgb)) !important;
}

.video-container.turquoise {
    border-color: rgb(var(--turquoise-color-rgb)) !important;
}

.video-container.green {
    border-color: rgb(var(--green-color-rgb)) !important;
}

.video-container.red {
    border-color: rgb(var(--red-color-rgb)) !important;
}

.video-container.grey {
    border-color: rgb(var(--grey-color-rgb)) !important;
}

.video-container.yellow {
    border-color: rgb(var(--yellow-color-rgb)) !important;
}

.video-container.header-green {
    border-color: rgb(var(--header-green-color-rgb)) !important;
}

.video-container.header-light-green {
    border-color: rgb(var(--header-light-green-color-rgb)) !important;
}



.video-container video {
    width: 100%;
    height: auto;
    display: block;
}

.cc-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: black;
    border: 2px solid rgb(41, 41, 41) !important;
    border-radius: 7px !important;
    color: white;
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
    display: inline-block;
    user-select: none;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
}


.cc-button.active {
    background-color: rgb(var(--amsl-blue-color-rgb));
    border: 2px solid rgb(var(--amsl-blue-color-rgb)) !important;

}

.cc-button:hover {
    background-color: rgba(var(--amsl-blue-color-rgb) / 0.75);
    border: 2px solid rgba(var(--amsl-blue-color-rgb) / 0.75) !important;
}

@media (max-width: 575px) {
    .other-variants {
        position: absolute;
        right: 3px;
        top: 5px;
        gap: 0px;
        padding-top: 16px;
        padding-right: 3px;
    }

    #contratst-toggle-wrapper {
        gap: 0px;
    }

    .honeycomb-icon {
        height: 30px;

    }
}

@media (min-width: 576px) {
    #logo img {
        height: 100px;
        margin-top: 25px;
        margin-right: 25px;
    }

    #logo .honeycomb {
        height: 150px;
        margin-left: -74px;
        margin-top: -25px;
    }

    #navWrapper>nav {
        margin-left: 120px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

@media (min-width: 1200px) {
    #logo img {
        width: auto;
        height: 150px;
        margin-top: 60px;
        margin-right: 30px;
        transform: rotate(19deg);
    }

    #logo .honeycomb {
        display: flex;
        height: 300px;
        justify-content: end;
        align-items: center;
        position: relative;
        margin-left: -150px;
        margin-top: -45px;
        z-index: 10000;
    }

    #navWrapper {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 9000;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 150px;
        background-color: rgba(var(--header-green-color-rgb) / 0.5);
    }

    #navWrapper>nav {
        margin-left: 215px;
        display: block;
        height: 100%;
    }

    #navWrapper>nav>ul>li.menuToggle {
        display: none;
    }

    ul.main-nav {
        display: flex;
        justify-content: start;
        align-items: center;
        height: 100%;
    }

    #navWrapper>nav.collapsed ul.main-nav {
        height: 100%;
    }

    ul.main-nav>li {
        display: inline-block;
        margin-right: 15px;
        align-self: center;
        padding: 15px 0 15px 0;
    }

    .main-nav a,
    .main-nav a:hover,
    .main-nav a:active,
    .main-nav a:focus,
    .main-nav a:visited {
        color: black !important;
        font-size: 15px;
    }

    .main-nav a .honeycomb {
        height: 25px;
    }

    .main-nav .active a:not(.menuToggle)::after,
    .main-nav a:not(.menuToggle):hover::after {
        left: 40px;
    }

    #subline {
        position: absolute;
        top: 150px;
        left: 0px;
        z-index: 9000;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 50px;
        background-color: rgba(var(--green-color-rgb) / 0.5);
        display: flex;
        justify-content: start;
        align-items: center;
    }

    #subline>p {
        margin: 0;
        padding: 0;
        margin-left: 215px;
        font-weight: 700;
        font-size: 16px;
    }

    .other-variants {
        top: 215px;
        display: flex;
        flex-direction: column;
    }

    #easy-to-read-variant {
        margin-right: 14px;
    }

    #easy-to-read-variant span {
        display: inline-block;
        font-size: 1.5em;
    }

    #goto-easy-to-read.honeycomb-icon {
        height: 80px;
    }

    #goto-easy-to-read.honeycomb-icon img {
        width: 40px;
        height: 40px;
    }

    h1 {
        max-width: 75%;
    }
}

@media (min-width: 1200px) and (max-width: 1700px) {
    #content>div>div>div.elementor-element.elementor-element-580e728.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded>div>div.elementor-element.elementor-element-35560ba.elementor-widget.elementor-widget-heading>div>h1 {
        max-width: 75%;
    }

}


@media (min-width: 1400px) {
    h1 {
        max-width: 100%;
    }

    .main-nav a,
    .main-nav a:hover,
    .main-nav a:active,
    .main-nav a:focus,
    .main-nav a:visited {
        font-size: 18px;
    }

    .main-nav a .honeycomb {
        height: 35px;
    }

    .main-nav .active a:not(.menuToggle)::after,
    .main-nav a:not(.menuToggle):hover::after {
        left: 45px;
    }

    #subline>p {
        margin: 0;
        padding: 0;
        margin-left: 215px;
        font-weight: 700;
        font-size: 20px;
    }
}

@media (min-width: 1600px) {

    .main-nav a,
    .main-nav a:hover,
    .main-nav a:active,
    .main-nav a:focus,
    .main-nav a:visited {
        font-size: 22px;
    }

    .main-nav a .honeycomb {
        height: 40px;
    }

    .main-nav .active a:not(.menuToggle)::after,
    .main-nav a:not(.menuToggle):hover::after {
        left: 52px;
    }

    #subline>p {
        margin: 0;
        padding: 0;
        margin-left: 215px;
        font-weight: 700;
        font-size: 23px;
    }
}