:root {
    /* spacers */
    --Spacers-7XS: 2px;
    --Spacers-6XS: 4px;
    --Spacers-5XS: 6px;
    --Spacers-4XS: 6px;
    --Spacers-3XS: 10px;
    --Spacers-2XS: 12px;
    --Spacers-XS: 16px;
    --Spacers-S: 20px;
    --Spacers-M: 24px;
    --Spacers-L: 32px;
    --Spacers-XL: 40px;
    --Spacers-2XL: 48px;
    --Spacers-3XL: 64px;
    --Spacers-4XL: 80px;
    --Spacers-5XL: 120px;
    --Spacers-6XL: 140px;
    --Spacers-7XL: 160px;
    --Spacers-8XL: 240px;
    --Spacers-Full: 9999px;
    /* Colours */
    /*surfaces*/
    --Surfaces-Primary-Backgrounds-Secondary: #F6F6F6;
    /*borders*/
    --Borders-Grey-20: #EAEAEA;
    --Borders-Grey-30: #DBDBDB;
    --Borders-Grey-50: #B3B3B3;
    --Borders-Grey-70: #898989;
    --Borders-Grey-100: #525252;
    --Borders-Grey-130: #232323;
    --Borders-Black: #000000;
    --Borders-Blue: #204CFE;
}

.elgato {
    /* probably does something on macs idk */
    text-rendering: optimizeLegibility;

    /*nav*/
    nav {
        background-color: #fff;
        color: #000;
        padding: var(--Spacers-4XS, 8px) var(--Spacers-XS, 16px) var(--Spacers-4XS, 8px) var(--Spacers-4XS, 8px);
        border-bottom: 2px solid var(--Borders-Grey-30, #DBDBDB);
        box-sizing: border-box;
        height: 52px;

        a {
            text-decoration: none;
            color: #000
        }

        .desktop_nav_item {
            p {
                border-bottom: 2px solid transparent;
                text-transform: none;
                line-height: 24px;
                font-family: var(--font-family);
                font-weight: bold;
            }
        }

        .desktop_nav_item:hover {
            p {
                border-color: var(--brand-colour);
                color: var(--brand-colour);
                transition: color .3s ease;
                border-width: 2px;
            }
        }

        #nav_search {
            border-radius: var(--Spacers-4XS, 8px);
            border: 2px solid var(--Borders-Grey-30, #DBDBDB);
            background: var(--Surfaces-Primary-Backgrounds-Primary, #FFF);

            #desktop_nav_search {
                width: 98%;
                margin: 0 auto;
            }

            #desktop_nav_search input {
                font-size: 16px;
            }

            #desktop_nav_search input::placeholder {
                color: black;
                opacity: 1; /* Firefox */
                font-size: 16px;
                font-style: normal;
                font-weight: normal;
                line-height: 150%;
            }
        }

        #mobileBurger {
            stroke: #000;
            border-radius: var(--Spacers-5XS, 6px);
            border: 1px solid var(--Buttons-Tertiary, #232323);
            padding: 8px
        }

        .logo-text-link img {
            height: 16px;
        }
    }

    #mobile_menu {
        background: #fff;
        color: #000;

        a {
            color: #000;
            text-decoration: none;
        }

        #close_menu, .close_sub_menu {
            fill: #000;
        }

        #top_level_nav {
            font-family: var(--font-family-condensed);
        }

        #mobile_language_selector {
            color: #000;
        }
    }

    #page-content {
        background-color: #fff;
        color: #000;
        padding: 0 1em;

        /* generics */
        a {
            color: #000;
            text-decoration: none;
        }

        #categories_list, #featured_article_list, #latest_article_list {
            max-width: 1490px;
        }

        #categories_container h1, #articles h2 {
            font-size: 40px;
            font-family: var(--font-family-condensed);
            text-transform: uppercase;
        }

        section {
            background-color: #fff;
            padding: var(--Spacers-XL, 40px) 0;
            gap: var(--Spacers-XL, 40px);

            h2 {
                font-family: var(--font-family-condensed);
                color: #000;
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: 110%; /* 73.7px */
                text-transform: uppercase;
            }
        }

        ol li ol li {
            list-style-type: lower-alpha;
        }

        #sort select, #sort label {
            text-transform: none;
        }

        #autocomplete-list {
            background-color: #fff;
        }

        #search_banner {
            max-width: 880px;
            margin: 0 auto;

            #search_wrapper {
                gap: var(--Spacers-M, 24px);

                h1 {
                    /* Desktop/Headlines/H1 */
                    font-family: var(--font-family-condensed);
                    font-size: 36px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 110%; /* 73.7px */
                    text-transform: uppercase;
                    font-feature-settings: 'liga' off, 'clig' off;
                    max-width: 600px;
                }

                form {
                    margin-top: var(--Spacers-XS);

                    input {
                        background-color: var(--Surfaces-Primary-Backgrounds-Secondary, #F6F6F6);
                        border-radius: var(--Spacers-3XS, 8px);
                        border: 2px solid var(--Borders-Grey-50, #B3B3B3);
                    }

                    input::placeholder {
                        color: black;
                        opacity: 1; /* Firefox */
                    }

                    svg {
                        margin-left: -40px;
                    }
                }
            }
        }

        .category {
            background: var(--Surfaces-Primary-Backgrounds-Secondary, #F6F6F6);
            padding: 0;
            height: unset;
            width: unset;
            aspect-ratio: unset;
            border-radius: var(--Spacers-2XS, 12px);

            .category_image {
                background: unset;
            }

            img {
                width: 100%;
                aspect-ratio: 1 / 1;
                border-top-right-radius: var(--Spacers-2XS, 12px);
                border-top-left-radius: var(--Spacers-2XS, 12px);
                display: block;
            }

            a {
                gap: 0
            }

            .category_title {
                background: var(--Surfaces-Primary-Backgrounds-Secondary, #F6F6F6);
                border-bottom-right-radius: var(--Spacers-2XS, 12px);
                border-bottom-left-radius: var(--Spacers-2XS, 12px);
            }

            h3 {
                color: black;
                font-size: 16px;
                font-style: normal;
                font-weight: 700;
                line-height: 150%; /* 24px */
                padding: var(--Spacers-XS, 16px);
                font-family: var(--font-family);
                display: flex;
                align-items: center;
                height: 100%;
            }
        }

        .feature {
            background-color: unset;
            display: flex;
            flex-direction: column;

            img {
                border-top-right-radius: var(--Spacers-2XS, 12px);
                border-top-left-radius: var(--Spacers-2XS, 12px);
                object-fit: cover;
            }
        }

        .latest, .related_article, .article {
            background-color: unset;
            display: flex;
            flex-direction: column;

            img {
                border-top-right-radius: var(--Spacers-2XS, 12px);
                border-top-left-radius: var(--Spacers-2XS, 12px);
                vertical-align: middle;
            }
        }

        .related_article {
            gap: 0;
        }

        .related_article_article_title {
            height: unset;
            font-family: var(--font-family-condensed);
        }

        .article_item, .related_article_text {
            background: var(--Surfaces-Primary-Backgrounds-Secondary, #F6F6F6);
            padding: var(--Spacers-M, 24px);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--Spacers-3XS, 8px);
            align-self: stretch;
            border-bottom-right-radius: var(--Spacers-2XS, 12px);
            border-bottom-left-radius: var(--Spacers-2XS, 12px);
            height: 100%;

            .article_type {
                color: #525252;
                font-family: var(--font-family-condensed);
                text-transform: uppercase;
            }

            .related_article_article_title a, .related_article_article_title a {
                color: #000;
                font-size: 18px;
                font-style: normal;
                font-weight: 700;
                line-height: 120%; /* 21.6px */
                text-transform: uppercase;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }

            .article_description {
                margin-top: var(--Spacers-2XS);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;
                overflow: hidden;
                line-height: 150%;
            }
        }

        #pagination {
            max-width: 1360px;
            width: 100%;
            margin: 0 auto;
            justify-content: flex-end;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 30px */

            a {
                padding: 0;
            }

            .active {
                text-decoration-line: underline;
                text-decoration-style: solid;
                text-decoration-skip-ink: none;
                text-decoration-thickness: auto;
                text-underline-offset: auto;
                text-underline-position: from-font;
                border-bottom: none;
            }

            svg {
                fill: black;
            }
        }

        /*filters*/
        .filter p {
            font-family: var(--font-family-condensed);
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: 120%; /* 28.8px */
            text-transform: uppercase;
        }

        #mobile_filter_form {
            background-color: #fff;
        }
        #close_filter {
            fill: #000;
        }

        .form-control {
            color: #000;
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%; /* 30px */
            text-transform: none;
        }

        /* checkbox */
        input[type="checkbox"]::before {
            box-shadow: none;
        }

        input[type="checkbox"] {
            transform: translateY(1px);
            border-radius: var(--Rounding-2XS, 4px);
        }

        /*  article specific  */
        #article_content {
            max-width: 1190px;

            .img-wrapper img {
                border-radius: var(--Spacers-2XS, 12px);
            }

            #article_info {
                gap: var(--Spacers-XS, 16px);
            }

            #article_info h3 {
                font-family: var(--font-family-condensed);
                font-size: 24px;
                font-style: normal;
                font-weight: 700;
                line-height: 120%; /* 28.8px */
                text-transform: uppercase;
                text-decoration: none;
            }

            #article_title {
                font-family: var(--font-family-condensed);
                /* put bigger size below specific to larger screens */
                font-style: normal;
                font-weight: 700;
                line-height: 110%; /* 73.7px */
                text-transform: uppercase;
            }

            #product_description {
                font-size: 26px;
                font-style: normal;
                font-weight: 400;
                line-height: 120%; /* 31.2px */
            }

            .streamfield {
                gap: var(--Spacers-S);

                section {
                    padding: 0;
                }

                #deepl-message {
                    border-radius: var(--Spacers-2XS, 12px);
                    background-color: #feec90;
                    section {
                        background-color: #feec90;
                    }
                    svg path {
                        fill: #000;
                    }
                }

                p {
                    font-size: 20px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 150%; /* 30px */
                }

                a {
                    color: #3771D5;
                }

                h2 {
                    font-size: 40px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 120%; /* 48px */
                    text-transform: uppercase;
                    padding-bottom: var(--Spacers-XS);
                    border-bottom: 2px solid #B3B3B3;
                }

                .block-media video {
                    display: block;
                    border-radius: var(--Spacers-2XS, 12px);
                    margin: 0px auto;
                }
            }

            .header  {
                font-family: var(--font-family-condensed);
                border-bottom: 2px solid #B3B3B3;
                font-size: 40px;
                font-style: normal;
                font-weight: 700;
                line-height: 120%;
                text-transform: uppercase;
            }
        }

        #product_banner, #product_image {
            background: #fff;
        }
        #product_wrapper h1 {
            font-family: var(--font-family-condensed);
            font-size: 36px;
            font-style: normal;
            font-weight: 700;
            line-height: 110%; /* 73.7px */
        }
        #buy_button {
            border-radius: 6px;
            color: #fff;
            font-family: var(--font-family);
            font-size: 16px;
            text-transform: none;
            padding: var(--Spacers-2XS, 12px) var(--Spacers-M, 24px);
        }

        .related_article_article_type {
            color: #525252;
            font-family: var(--font-family-condensed);
            text-transform: uppercase;
        }

        .render_js_products {
            grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
        }

        .jasper_product_image_container {
            background: none;
        }

        .jasper_product_title h6.card-title {
            font-family: var(--font-family-condensed);
            font-size: 18px;
            text-transform: uppercase;
        }

        img.jasper_product_image {
            padding: 0;
            border-top-left-radius: var(--Spacers-2XS, 12px);
            border-top-right-radius: var(--Spacers-2XS, 12px);
        }

        .jasper_variants_container {
            padding: 16px;
        }

        .jasper_product_variant_image {
            background: none;
            padding: 0;
            border-radius: var(--Spacers-5XS, 6px);
            border: 2px solid var(--Borders-Grey-50, #B3B3B3)
        }

        img.jasper_product_variant_image.highlighted {
            border-color: black;
        }

        .jasper_product_bottom_half {
            background: var(--Surfaces-Primary-Backgrounds-Secondary, #F6F6F6);
            padding: var(--Spacers-M, 24px);
            border-bottom-right-radius: var(--Spacers-2XS, 12px);
            border-bottom-left-radius: var(--Spacers-2XS, 12px);
        }

        .jasper_learn_more,
        .jasper_buy_now {
            display: flex;
            gap: 4px;
            text-decoration: underline;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            letter-spacing: 0.25px;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: none;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            text-transform: none;
        }
    }

    footer {
        background-color: #f9f9f9;
        color: #000;

        #footer_wrapper {
            max-width: 1490px;
            margin: 0 auto;
            width: 100%;

            h2 {
                color: #646464;
                font-size: 18px;
                font-family: var(--font-family-condensed);
            }

            #page_columns > div {
                display: flex;
                flex-direction: column;
                gap: 16px;
            }

            #page_columns ul li {
                padding: 4px 0;
            }

            #page_columns ul a {
                color: #111;
            }

            svg {
                color: #282828;
                height: 34px;
                width: 34px;
                padding: 0;
            }

            #newsletter_signup {
                width: 100%;
            }

            #newsletter input[type="email"] {
                width: 100%;
                border-radius: .6rem;
                border-width: 1px;
                border-color: #646464;
                background-color: white;
                margin-top: 8px;
            }
        }
    }
}

@media screen and (min-width: 720px) {
    .elgato {
        nav {
            padding: var(--Spacers-M) var(--Spacers-2XL);
            height: 74px;

            .logo-text-link img {
                height: 24px;
            }
        }
    }
}

@media screen and (min-width: 900px) {
    .elgato {
        nav {
            .logo-text-link img {
                height: 24px;
            }

            .desktop_nav_item {
                p {
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 24px; /* 100% */
                    letter-spacing: 0.25px;
                }
            }
        }

        #page-content {
            #search_banner {
                #search_wrapper {
                    h1 {
                        font-size: 67px;
                    }

                    p {
                        font-size: 20px;
                    }
                }
            }

            section {
                padding: var(--Spacers-4XL, 80px) 0;

                h2 {
                    font-size: 67px;
                }
            }
        }

        #categories_list {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        }
    }
}

@media screen and (min-width: 900px) {
    .elgato {
        #page-content {
            #latest_article_list, .related_articles_list, #articles_list {
                grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
                grid-row-gap: var(--Spacers-XL, 24px);
                grid-column-gap: var(--Spacers-XS, 16px);
            }

            .related_article {
                padding: 0;

            }
        }
    }
}

@media (min-width: 1024px) {
    .elgato {
        #page_columns {
            grid-template-columns: 285px 285px 285px;
        }
    }
}

@media screen and (min-width: 1280px) {
    .elgato {

        #article_content {
            #article_title {
                font-size: 67px;
            }
        }

        #articles h2 {
            padding-bottom: 16px;
            border-bottom: 2px solid #B3B3B3;
        }

        #page-content {
            #articles,
            #articles_wrapper {
                max-width: 1490px;
            }

            #articles_list {
                grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
            }

            #desktop_filter {
                min-width: 270px
            }
            #sort {
                gap: var(--Spacers-XS, 16px);
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 150%; /* 24px */
            }

            #sort select {
                border-radius: var(--Spacers-4XS, 8px);
                color: black;
                border: 2px solid var(--Borders-Grey-50, #B3B3B3);
                max-width: 250px;
                background-color: var(--Surfaces-Primary-Backgrounds-Secondary, #F6F6F6);
                appearance: none;
                background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23F6F6F6%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.37495%209.77535C7.60927%209.54103%207.98917%209.54103%208.22348%209.77535L11.9992%2013.5511L15.775%209.77535C16.0093%209.54103%2016.3892%209.54103%2016.6235%209.77535C16.8578%2010.0097%2016.8578%2010.3896%2016.6235%2010.6239L12.4235%2014.8239C12.1892%2015.0582%2011.8093%2015.0582%2011.575%2014.8239L7.37495%2010.6239C7.14064%2010.3896%207.14064%2010.0097%207.37495%209.77535Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E');
                background-repeat: no-repeat;
                background-position-x: calc(100% - 14px);
                background-position-y: 50%;
            }

            /*  qsg specific */
            .primary-toc {
                font-size: 24px;
                font-style: normal;
                font-weight: 700;
                line-height: 120%; /* 28.8px */
                text-transform: uppercase;
                margin-top: var(--Space-XL, 24px);
            }
            .secondary-toc {
                font-size: 20px;
                font-style: normal;
                font-weight: 400;
                line-height: 150%; /* 30px */
            }
        }
    }
}