/*  header  */

.header-banner  { background-color: var(--sandywarmgrey);  }
.banner-image { background-image: url("images/banner-sandy-warm-light.jpg");}

.header-super-wrapper { max-width: 1160px; margin: 0 auto;  position:relative; }
.header-wrapper { max-width: 1130px; margin: 0 auto; }
.header-image { background-position: left bottom;  background-repeat: no-repeat; background-image: url(images/header-illustration-1980.png);  }

.site-title-super-wrapper { position:relative; width: 580px; display: flex; justify-content: center; margin-left: auto;  }
.site-title-wrapper { height: 285px; display: flex; flex-direction: column; justify-content: center; align-items: center; width: fit-content; gap: 20px; }

.site-title { margin: 0; }
.logo-image {  background-repeat: no-repeat; background-position: left center; background-image: url("images/logo-cierny-1980.png"); min-height: 115px; padding-left: 95px;}
.site-title-link { text-decoration: none;  color: #1b1c15;  display: flex; flex-direction: column;  }
.title-line { font-size: 50px; line-height: 60px; font-family: "Signika", serif; white-space: nowrap; font-weight: 500;  display: block;}

.site-subtitle {  display: flex; flex-direction: column; align-items: center; gap: 5px;}
.site-subtitle-item { font-style: oblique; color: black; font-size: 18px; line-height: 24px; word-spacing: 3px; margin: 0;  }

.subtitle-desktop { display: inline;}
.subtitle-mobile { display: none;}

@media (max-width: 1400px)
{
    .tools-menu { display: none;}
}

@media (max-width: 1120px)
{
    .header-super-wrapper { max-width: none; margin-left: 3%; }
    .header-image { background-image: url(images/header-illustration-1120.png);  }
    .site-title-super-wrapper { width: 50%; }
    .site-title-wrapper { height: 225px; gap: 15px; }
    .logo-image {  background-image: url("images/logo-cierny-1120.png"); min-height: 85px; padding-left: 75px;}
    .title-line { font-size: 40px; line-height: 48px; }
    .site-subtitle-item { font-style: oblique; color: black; font-size: 17px; line-height: 23px; word-spacing: 2px;   }

}

@media (max-width: 920px)
{
    .header-super-wrapper { margin-left: -2%; }
}

@media (max-width: 820px)
{
    .header-super-wrapper { margin-left: 0; }
    .header-image { background-image: url(images/header-illustration-820.png); background-position-x: -15px; }
    .site-title-super-wrapper { width: 55%; }
    .site-title-wrapper { height: 185px; gap: 8px; }
    .logo-image {  background-image: url("images/logo-cierny-820.png"); min-height: 70px; padding-left: 54px;}
    .title-line { font-size: 30px; line-height: 36px; }
}

@media (max-width: 750px)
{
    .header-super-wrapper { margin-left: 0; }
    .header-image { background-image: url(images/header-illustration-820.png); background-position-x: -15px; }
    .site-title-super-wrapper { width: 47%; }
    .text-desktop {  display: none;}
}

@media (max-width: 680px)
{
    .header-image { background-position-x: -50px; }
    .site-title-super-wrapper { width: 47%; }
}


@media (max-width: 630px)
{
    .header-image { background-position: center bottom; }
    .site-title-super-wrapper { width: auto; }
    .site-title-wrapper { height: 320px; gap: 15px; justify-content: flex-start; padding-top: 35px; }
    .logo-image {  background-image: url("images/logo-cierny-1120.png"); min-height: 70px; padding-left: 75px;}
    .title-line { font-size: 36px; line-height: 40px; }
    .site-subtitle { display: none;}
}


@media (max-width: 450px)
{
    .site-title-wrapper { height: 310px; gap: 8px; justify-content: flex-start; padding-top: 35px; }
    .logo-image {  background-image: url("images/logo-cierny-820.png");}
    .title-line { font-size: 32px; line-height: 36px; }
}


/* footer */

.site-footer { background-color: var(--sandywarmgrey);}
.footer-wrapper {  max-width: 1120px; margin: 0 auto; }
.footer-bar { color: black; margin: 0; padding: 22px 45px; min-height: 28px;  line-height: 28px;}
.footer-delim { margin: 0 6px;}
.link-bar { float: right; }
.footer-link { color: black; padding: 0 12px 3px; margin-right: -12px;  border-radius: 18px; white-space: nowrap; }
.footer-link:hover { background-color: #eee6;}
.footer-link + .footer-link { margin-left: 16px;}

@media (max-width: 780px)
{
    .footer-bar { text-align: center; padding-left: 6px; padding-right: 6px;}
    .link-bar {  float: none; display: block;  }
}

@media (max-width: 520px)
{
    .footer-bar { text-align: center; padding-left: 6px; padding-right: 6px;}
    .footer-snipp { display: block;}
    .footer-delim {  display: none;}
}