
#pageheader {  position: relative;
    z-index: 1;}
/*var(--bg_blue);*/
#pageheader .wrapper {  }
#pageheader .section { background-color:transparent; display: flex; gap: var(--gutter_big); align-items: center; justify-content: space-between;
    overflow: hidden;
    position: relative;
}
body.page-template-template_news #pageheader .section { display: block; }

#pageheader .section .txt p:not(:first-child) { font-size: 28px;}


body.single-resources #pageheader .section { display: block; }

body.home #pageheader { }
/*body.error404 #pageheader .section ,*/
body.home #pageheader .section { background-color: transparent; display: flex; gap: var(--gutter_big); align-items: center; padding-top: var(--masthead-height); padding-bottom: var(--masthead-height);

}

#pageheader .section .txt { max-width: 1024px;}


canvas#starfield,
figure.header_image { position: absolute;
    left: 0; bottom:0; width:100%; height: 100%;
    z-index: -1;   }
figure.header_image picture{ position: absolute; left: 0; top:0; width:100%; height: 100%; }
/*
figure.header_image img { position: absolute;
    left: 0; top:0; width:100%; height: 100%; object-fit: cover; }
*/

body.error404 #pageheader #starfield,
body.error404 #pageheader .header_image,
body.home #pageheader .header_image {
    height: calc(100% + var(--masthead-height) + 20px)
}
#pageheader .header_image::after {
    display: block; content: ""; width: 100%; height: 100%; top: 0; left: 0;
    opacity: 0.66;
    background-color: black;
}

@keyframes easeInOutCustom {
    0% {
        transform: scale(1);
        animation-timing-function: ease-in;
    }
    10% {
        transform: scale(1.05); /* after ~1s */
        animation-timing-function: ease-out;
    }
    100% {
        transform: scale(1.25);
    }
}

body.home #pageheader .header_image {  overflow: hidden; }
body.home #pageheader .header_image picture{  /*transition: transform 16s cubic-bezier(0.5, 0, 0.5, 1);*/ animation: easeInOutCustom 25s forwards; }
body.home:not(.preload) #pageheader .header_image {  /*transform: scale(1.4);*/  }

@media all and (max-width: 1099.98px) {
    #pageheader {padding-top: calc(var(--masthead-height) + 16px);   }
}
@media all and (max-width: 1199.98px) {
    #pageheader .section .txt p:not(:first-child) {
        font-size: var(--bodytext_size);
    }
}

@media all and (max-width: 899.98px) {
    body.home #pageheader .section,
    #pageheader .section {
        display: block;
    }

    body.home #pageheader .section {
        padding-top: var(--section-padding); padding-bottom: var(--section-padding);
        padding:var(--section-padding) 0;
     padding-left:var(--section-padding); padding-right:var(--section-padding); }
}



.project_icon { width: 50%; max-width: 300px; min-width: 240px;      margin-left: auto; }
picture.project_icon > img { object-fit: contain !important; object-position: center !important; height:100% !important; width: 100% !important; }
.project_icon::after { content:""; display: block; width: 100%; height: 0; padding-bottom: 100%; }
@media all and (max-width: 1199.98px) {
    .project_icon {  width: 50%; max-width: 240px; min-width: 180px;}
}
@media all and (max-width: 899.98px) {
    .project_icon {  width: 100%; max-width: 100%; min-width: 180px;     margin: var(--gutter) auto 0;}
    .project_icon::after {   height: 0; padding-bottom: 240px; }
}