*, ::after, ::before {padding: 0; margin: 0; box-sizing: border-box;}
html, body {height: 100%;}
html {font-size: 20px; scroll-behavior: smooth; scroll-padding-top: 4rem;}
body {font-family: 'Open Sans', sans-serif; line-height: 1.4; color: #202020; font-weight: 300; font-size: 0.75rem;} 
#bodybg {background: url() center center / cover no-repeat; background-attachment: fixed; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 0;}
#bodybg img {width: 100%; min-height: 100%; object-fit: cover;}
body::after {content: ""; position: absolute; left: 0; top: 0; background: #000 url(/img/dust.png); height: 100vh; width: 100%; position: fixed; z-index: 0; opacity: 0.5;}
.container {max-width: 53rem; margin: 0 auto; padding: 0 4vw; position: relative;}
h1, h2, h3 {font-family: 'Squada One', sans-serif; line-height: 1; font-weight: normal; margin-bottom: 0.85rem;}
h1 {font-size: 3rem;}
h2 {font-size: 2rem; margin-top: 4rem;}
h3 {font-size: 1.25rem; margin-top: 3rem; margin-bottom: 0.65rem;}
body > * {position: relative; z-index: 1;}
strong {font-weight: 700;}
img {max-width: 100%; width: 100%; filter: saturate(0%) sepia(10%); display: block;}

.header {height: 4rem; line-height: 4rem; background: #202020; position: sticky; top: 0; z-index: 3;}
.header .container {display: flex; justify-content: center;}
.header ul {display: flex; gap: 2rem; justify-content: center;}
.header ul ul {position: absolute; flex-direction: column; gap: 0; line-height: 2rem; margin: 0 0 0 -1rem; background: #202020; padding-bottom: 0rem; display: flex; overflow: auto; transition: none;}
.header ul ul li {height: 0; opacity: 0; overflow: hidden; transition: none;}
.header ul li:hover ul {padding-bottom: 1rem; transition: all 0.15s ease-in-out;} 
.header ul li:hover ul li {height: 2rem; opacity: 1; transition: all 0.15s ease-in-out;}
.header ul ul li a {padding: 0 1rem;}
.header ul li {list-style: none;}
.header ul li a {color: rgba(255,255,255,0.8); text-decoration: none; font-weight: 400; display: block;}
.header ul li.parent > a::after {
    content: "";
    width: 0; 
    height: 0; 
    border-left: 0.25rem solid transparent;
    border-right: 0.25rem solid transparent;
    border-top: 0.25rem solid rgba(255,255,255,0.65);
    margin-left: 0.25rem;
    display: inline-block;
    position: relative;
    bottom: 0.1rem;
}
.header ul li.active > a {font-weight: 700; color: white;}
.header ul li.active.parent > a::after {border-top: 0.25rem solid rgba(255,255,255,1);}
.header .menubutton {
    display: none; 
    border: 0; 
    background: transparent url(/img/menu.svg) center center / 100% auto no-repeat; 
    border-radius: 0; 
    font-family: 'Open Sans', sans-serif; 
    color: rgba(255,255,255,0.8); 
    font-size: 0.75rem; 
    height: 4rem; 
    line-height: 4rem; 
    width: 2rem;
    cursor: pointer;
    position: relative;
    z-index: 3;
}
body.menuopen .header .menubutton {background-image: url(/img/close.svg);}

.banner {padding: 5.5rem 0 5.5rem; text-align: center;}
.banner .title {padding: 1.2rem; text-transform: uppercase; background-color: #ebc90b;}
body.home .banner .title {padding: 0; display: inline-block;}
.banner .title h1 {font-size: 3rem; line-height: 1; margin: 0;}
.banner .title h1 img {filter: none;}
.banner .date {
    position: absolute;
    transform: translate(-50%,-0.5rem);
    background: #202020; 
    color: #ccc; 
    display: inline-block; 
    font-family: 'Squada One', sans-serif; 
    line-height: 1;
    padding: 0.4rem 0.7rem;
    font-size: 1.2rem;
}

.content {background-color: #f3f3f3; padding: 4rem 0 6rem; line-height: 1.7;}
.content .container > h3:first-child {margin-top: 0;}
.content .container > h2:first-child {margin-top: 0;}
.content a {border-bottom: 2px solid #ffdd00; text-decoration: none; color: #202020}
.content .container > * {max-width: 32rem; margin-left: auto; margin-right: auto;}
.content .container > *:last-child {margin-bottom: 0!important;}
.content p, .content ul, .content ol {margin-bottom: 1.7em;}
.content ul {padding-left: 1rem;}
.content ul ul {margin-bottom: 0;}
.content p + ul {position: relative; bottom: 1.7em; margin-bottom: 0;}
.content a.nav {font-weight: 600; white-space: nowrap;}
.content strong {font-weight: 600;}

body.home .content .container > h2:first-child, 
body.home .content h2:first-child + p, 
body.home .content .container > p:first-child {text-align: center; max-width: 39rem; margin-top: 0;}
body.home .content .container > h2:first-child + p, 
body.home .content .container > p:first-child {font-size: 0.95rem; margin-bottom: 4em;}

ul.listshortcode {display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-gap: 3.5rem; max-width: 100%!important; padding: 0!important;}
ul.listshortcode li {list-style: none;}
ul.listshortcode li h3 {margin-top: 0;}
ul.listshortcode li img {object-fit: cover; aspect-ratio: 1.5; display: block; margin: 0.85rem 0 0.65rem; background: #ebc90b url(/img/logo.png) center center / auto 80% no-repeat;}

ul.circlesshortcode {display: flex; gap: 2rem 1rem; max-width: 100%!important; padding: 0!important; text-align: center; flex-wrap: wrap; justify-content: center;}
ul.circlesshortcode li {list-style: none; width: 8rem;}
ul.circlesshortcode li a {border: 0; display: block;}
ul.circlesshortcode li:not(:last-child) a img {filter: none;}
ul.circlesshortcode li a span {display: block; line-height: 1.2;}

.sectionimage img {position: absolute; width: 6rem; right: 4vw; top: 0; margin-top: -7rem; filter: none;}
.sectionimage {max-width: calc(53rem + 15vw);}
.projectimage {margin-bottom: 1.7rem; max-width: 100%!important; position: relative;}

img[src^="/img/empty.png"] {opacity: 0.25;}

.footer {background-color: #ebc90b; padding: 4rem 0; font-weight: 400; text-align: center; margin-top: 15rem;}
.footer a {color: #202020; text-decoration: none;}

@media (max-width: 60rem) {
    .header .menubutton {display: inline-block;}
    .header .container > ul > li:not(:first-child) {display: none;}
    .header .container {justify-content: space-between;}
    .header .container > ul > li:first-child a {color: white; font-weight: 700;}
    .header ul li.parent > a::after {content: none;}
    body.menuopen .header .container {justify-content: flex-end;}
    body.menuopen .header .container > ul {position: absolute; left: 0; display: block; background: #202020; width: 100%; padding-bottom: 2rem; }
    body.menuopen .header .container > ul > li {padding-left: 4vw;}
    body.menuopen .header .container > ul ul {position: relative; opacity: 1; margin: 0; padding-bottom: 1rem;}
    body.menuopen .header .container > ul ul li {height: 2rem; opacity: 1;}
    body.menuopen .header .container > ul ul li a {opacity: 1!important;}    
    body.menuopen .header .container > ul > li:not(:first-child) {display: block; height: auto; line-height: 2rem;}
}

@media (max-width: 40rem) {
    .banner .title h1 {font-size: 2.25rem;}
}


@media (max-width: 27.7rem) {
    html {font-size: 4.5vw;}
    .content .container > h2:first-child, .content h2:first-child + p, .content .container > p:first-child {text-align: left;}
    .content .container > h2:first-child + p, .content .container > p:first-child {margin-bottom: 3rem;}
}