#intro .slogan {
    font-size: 36px;
}

#intro-picture {
    text-align: center;

    & img {
        max-inline-size: 100%;
    }
}

#header-content-container {
    max-inline-size: var(--page-inline-size);
    margin-inline: auto;
}

#header-content, body>footer * {
    font: 14px var(--font-ui);
    text-transform: uppercase;
}

#header-content {
    display: flex;
    align-items: center;
    inline-size: 100%;
    border-collapse: collapse;

    & a {
        font-weight: 700;
    }
}

#header-left,
#header-right {
    padding-block: var(--gap-sm) var(--sp-2);
}

#header-left {
    text-align: left;

    &:hover {
        background: transparent;
    }
}

#header-left a {
    font-size: 19px;
}

#header-left a, #header-right .monitor a {
    color: var(--color-white);
    padding-inline: var(--gap-sm);
    margin: 0;
    display: inline-block;
}

#header-right {
    flex-grow: 1;
    text-align: right;

    & .monitor a {
        transition: transform var(--transition-quick);
    }

    & .monitor a:focus {
        transform: scale(0.95) translateX(1px) translateY(1px);
    }
}

#references {
    & :is(.references-grid a, table a) {
        display: flex;
        inline-size: 100%;
        block-size: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    & td {
        padding: 0;
    }

    & .references-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, 140px);
        justify-content: center;
    }

    & .references-grid > * {
        border: var(--gutter) solid var(--color-darkest);
        block-size: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        transition: all var(--transition-base);
    }

    & .references-contact-us a {
        color: var(--color-white);
        font-weight: normal;
    }

    & :is(
        #reference-uniqa,
        #reference-uniqa:hover,
        #reference-bankkalkulator,
        #reference-bankkalkulator:hover,
        #reference-raiker,
        #reference-raiker:hover
    ) {
        background-repeat: no-repeat !important;
    }

    & #reference-uniqa {
        background-image: url(/img/content/clients/cherrisk-3.jpg.webp) !important;
        background-size: 300px !important;
        background-position: -115px 0 !important;
        color: var(--color-white) !important;
    }

    & #reference-uniqa:hover {
        background-image: url(/img/content/clients/cherrisk-3.jpg.webp) !important;
        background-size: 200px !important;
        background-position: -10px -20px !important;
        color: var(--color-white) !important;
    }

    & #reference-bankkalkulator {
        background-image: url(/img/content/clients/bankkalkulator.png) !important;
        color: var(--color-white) !important;
    }

    & #reference-bankkalkulator:hover {
        background-image: url(/img/content/clients/bankkalkulator.png) !important;
        background-position: -75px -230px;
        color: transparent !important;
        background-size: 550px;
    }

    & #reference-raiker {
        background-image: url(/img/content/clients/raiker.png) !important;
        background-position: -300px -80px !important;
        background-size: 500px;
        color: var(--color-white) !important;
    }

    & #reference-raiker:hover {
        background-image: url(/img/content/clients/raiker.png) !important;
        background-size: 500px;
        background-position: -100px -10px !important;
        color: transparent !important;
    }
}











/*********************** HAMBURGER *******************/

#menuToggle {
    display: inline-block;
    position: relative;
    inset-block-start: 7px;
    inset-inline-end: 0;

    z-index: 1;

    user-select: none;

    & a {
        text-decoration: none;
        color: var(--color-menu-fg);
        transition: color var(--transition-base);
    }

    & a:hover {
        color: tomato;
    }

    & input {
        display: block;
        inline-size: 40px;
        block-size: 32px;
        position: absolute;
        inset-block-start: -7px;
        inset-inline-start: -5px;
        cursor: pointer;
        opacity: 0;
        z-index: 2;
        -webkit-touch-callout: none;
    }

    & span {
        display: block;
        inline-size: 33px;
        block-size: 4px;
        margin-block-end: var(--gutter);
        margin-inline-end: var(--gap-md);
        position: relative;
        background: var(--color-menu-track);
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0;
        transition:
            transform var(--transition-panel),
            background var(--transition-panel),
            opacity 0.55s ease;
    }

    & span:first-child {
        transform-origin: 0 0;
    }

    & span:nth-last-child(2) {
        transform-origin: 0 100%;
    }

    & input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: var(--color-menu-fg);
    }

    & input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2);
    }

    & input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }

    & input:checked ~ ul {
        transform: none;
        opacity: 1;
    }
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu {
    position: absolute;
    inline-size: 300px;
    inset-block-start: 18px;
    inset-inline-end: -20px;
    block-size: 100vh;
    /*margin: -100px 0 0 -50px;*/
    padding: var(--section-block);

    background: var(--color-menu-bg);
    list-style: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0 0;
    transform: translate(100%, 0);

    transition: transform var(--transition-panel);

    opacity: 0;

    & li {
        padding-block: var(--gap-sm);
        font-size: 22px;
        border-block-end: 1px solid var(--color-menu-border);
    }

    & a {
        display: unset;
    }
}

#our-services h2 {
    font-size: 30px;
    letter-spacing: 2px;
}