picture.c {
    display:block;  position: relative; overflow: hidden;
}
picture.c img {
    object-fit: cover;
    width: var(--overflow);
    height: var(--overflow);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    transition: transform 0.2s ease-out;
}
#homeheader { background-color: var(--hero-blue); color: white; margin-bottom: var(--gutter); overflow: hidden  }


#homeheader .txt>p:not(.cta) {

    font-family: 'Source Serif Pro', serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -0.01em;
    margin-bottom: var(--gutter)
}
#homeheader .txt>ul:last-child{
    margin:0;
   /* margin-top: var(--gutter);*/
    display: flex;flex-wrap: wrap; gap:16px 16px;
}

#homeheader .cta a:is(:hover,:focus-visible){
    background:var(--cta-blue) !important; color:white !important; border-color: white !important;
}

@media all and (max-width: 1199.98px) {

    #homeheader .txt>p:not(.cta) {
        font-size: 32px;
        margin-bottom: 1em;

    }
}
@media all and (max-width: 599.98px) {

    #homeheader .txt>p:not(.cta) {
        font-size: 24px;


    }
}
#homeheader .txt>p:not(.cta)+p:not(.cta){  }
#homeheader .txt>p:not(:last-child) { }


#homeheader > .wrapper { display: flex; justify-content: space-between; flex-wrap: wrap;}


#homeheader > .wrapper > :is(div,figure) { width:calc(50% - (var(--gutter_big) / 2)); width: 50%; }


@media all and (min-width:1200px) {


}


#homeheader > .wrapper > div.txt {  padding: calc(64px + 12px) var(--gutter) calc(64px + 12px) 0;

display: flex; flex-direction: column; justify-content: center;
}

@media all and (max-width: 899.98px) {
    #homeheader > .wrapper > div.txt {
        padding:calc(48px + 12px) 0;
    }

}
@media all and (max-width: 599.98px) {

    #homeheader > .wrapper > div.txt {
        padding: calc(32px + 8px) 0;
    }

}

#homeheader > .wrapper > .image {  display: flex; flex-direction: column;
    position: relative;   }

#homeheader > .wrapper > .image > picture  {  height: auto;

    width:50vw; height: 100%;
    position: absolute; left: 0; top:0;
}


#homeheader > .wrapper > .image::before { display:block; content:""; width:100%; padding-bottom: 66.6666%;  }
#homeheader > .wrapper > .image > picture img {   }

#homeheader > .wrapper > figure.image picture::before {
    content:""; display: block;
    z-index: 2;
    position: absolute; top: -1px; left: -1px; width:480px; height:var(--overflow);
    background: linear-gradient(to right, var(--hero-blue) 0%, rgba(0, 66, 101, 0) 100%);

    background: linear-gradient(
            to right,
            hsl(201, 100%, 20%) 0%,
            hsla(201, 100%, 20%, 0.738) 19%,
            hsla(201, 100%, 20%, 0.541) 34%,
            hsla(201, 100%, 20%, 0.382) 47%,
            hsla(201, 100%, 20%, 0.278) 56.5%,
            hsla(201, 100%, 20%, 0.194) 65%,
            hsla(201, 100%, 20%, 0.126) 73%,
            hsla(201, 100%, 20%, 0.075) 80.2%,
            hsla(201, 100%, 20%, 0.042) 86.1%,
            hsla(201, 100%, 20%, 0.021) 91%,
            hsla(201, 100%, 20%, 0.008) 95.2%,
            hsla(201, 100%, 20%, 0.002) 98.2%,
            hsla(201, 100%, 20%, 0) 100%
    );


}


@media all and (max-width:1199.98px) {

}
@media all and (max-width: 899.98px) {

    #homeheader > .wrapper { flex-direction: column;}

    #homeheader > .wrapper > :is(div,figure) { width:100%; }

    #homeheader > .wrapper > .image { width:calc(100% + var(--wrapper-margin) + var(--wrapper-margin)); left: calc(0px - var(--wrapper-margin)); }
    #homeheader > .wrapper > .image > picture { width: 100%; }
    #homeheader > .wrapper > .image::before { padding-bottom: 60%;}

        #homeheader > .wrapper > figure.image picture::before {

        top:0; left: -1px; height:280px; width:var(--overflow);

/*        background: linear-gradient(
                to bottom,
                hsl(201, 100%, 20%) 0%,
                hsla(201, 100%, 20%, 0.92) 15%,
                hsla(201, 100%, 20%, 0.75) 30%,
                hsla(201, 100%, 20%, 0.58) 45%,
                hsla(201, 100%, 20%, 0.42) 58%,
                hsla(201, 100%, 20%, 0.28) 70%,
                hsla(201, 100%, 20%, 0.18) 78%,
                hsla(201, 100%, 20%, 0.11) 84%,
                hsla(201, 100%, 20%, 0.065) 89%,
                hsla(201, 100%, 20%, 0.035) 93%,
                hsla(201, 100%, 20%, 0.015) 96%,
                hsla(201, 100%, 20%, 0.005) 98.5%,
                hsla(201, 100%, 20%, 0) 100%
        );*/

        background: linear-gradient(
                to bottom,
                hsl(201, 100%, 20%) 0%,
                hsla(201, 100%, 20%, 0.738) 19%,
                hsla(201, 100%, 20%, 0.541) 34%,
                hsla(201, 100%, 20%, 0.382) 47%,
                hsla(201, 100%, 20%, 0.278) 56.5%,
                hsla(201, 100%, 20%, 0.194) 65%,
                hsla(201, 100%, 20%, 0.126) 73%,
                hsla(201, 100%, 20%, 0.075) 80.2%,
                hsla(201, 100%, 20%, 0.042) 86.1%,
                hsla(201, 100%, 20%, 0.021) 91%,
                hsla(201, 100%, 20%, 0.008) 95.2%,
                hsla(201, 100%, 20%, 0.002) 98.2%,
                hsla(201, 100%, 20%, 0) 100%
        );


    }

}
@media all and (max-width: 599.98px) {
    #homeheader > .wrapper > .image::before { /*padding-bottom: 80%*/;}

    #homeheader > .wrapper > figure.image picture::before {
        height: 180px;
    }

}