/*  header  */

.site-headbann  { background-color: var(--sandygrey); }
.headbann-image { }

.header-super-wrapper { max-width: 1220px; margin: 0 auto; }
.header-wrapper { max-width: 1050px; min-height: 230px; margin: 0 auto; }
.header-image { background-position: left bottom;  background-repeat: no-repeat; background-image: url(images/header-1980.jpg)}

.title-super-wrapper { position:relative; width: 720px; display: flex; justify-content: center; margin-left: auto; }
.title-wrapper { display: flex; flex-direction: column; align-items: center; width: fit-content; gap: 0; padding-top: 15px; }
.title-item { margin: 0; text-align: center; }

.site-title { font-size: 44px; line-height: 48px; font-family: "Palatino Linotype", serif; /* must be on p !! */ white-space: nowrap; font-weight: bold;}
.site-title-link { text-decoration: none;  color: var(--sandyblack);  }

.site-subtitle { font-style: oblique; color: black; font-size: 20px; line-height: 28px; word-spacing: 4px; }

@media (max-width: 1050px)
{
    .header-wrapper { min-height: 200px; }
    .header-image { background-image: url(images/header-1050.jpg);  }

    .title-super-wrapper { width: 56%; }
    .title-wrapper { gap: 0; }

    .site-title { font-size: 38px; line-height: 40px;}
    .site-subtitle { font-size: 19px; line-height: 26px;}
}

@media (max-width: 850px)
{
    .header-wrapper { min-height: 180px; }
    .header-image { background-image: url(images/header-850.jpg); }

    .title-super-wrapper {width: 64%; }
    .title-wrapper { padding-top: 25px; }

    .site-title { font-size: 32px; line-height: 30px;}
    .site-subtitle { font-size: 18px; line-height: 25px;}
}

@media (max-width: 760px)
{
    .header-image { background-position-x: -30px;  }
}

@media (max-width: 690px)
{
    .header-image { background-position-x: -65px; }
}

@media (max-width: 640px)
{
    .header-image { background-position-x: -90px; }
}

@media (max-width: 600px)
{
    .header-image { background-position-x: -120px; }
}

@media (max-width: 560px)
{
    .header-image { background-position: center 28px; background-image: url("images/header-560.jpg"); }
    .title-super-wrapper { width: 100%; margin-right: 0; background-color: transparent; }
    .title-wrapper { padding-top: 176px;  padding-bottom: 22px;  }

    .site-title { font-size: 38px; line-height: 44px; text-align: center; }
    .site-subtitle { font-size: 19px; line-height: 23px;  }
}

@media (max-width: 440px)
{
    .header-image {background-position-y: 40px; background-image: url("images/header-440.jpg"); }
    .title-wrapper { padding-top: 155px;  }

    .site-title { font-size: 32px; line-height: 38px; }
    .site-subtitle { font-size: 18px; line-height: 21px;  }
}