* {margin: 0; padding: 0;}
body, html {min-height: 100%;}
html {overflow-y: scroll;}
body {font-family: 'Open Sans', sans-serif; background: #cfcfcf url('/img/header-bg.png') left top repeat-x; text-align: center; line-height: 1.7; text-align: justify; font-size: 12px;}
a {color: red;}
img {display: block;}
a img {border: 0;}

#masthead {font-weight: normal; text-align: center; height: 190px;}
hgroup, #site-navigation {margin: 0 auto; width: 880px; text-align: left; padding: 0 40px;}
.featured-post, .edit-link, .menu-toggle, .assistive-text, .site-description {display: none;}
.site-title {
position: absolute;
display: block;
padding-top: 110px;
background: url('/img/logosprite.png') no-repeat 0px 10px;
border: none;
}
h1.site-title a {text-decoration: none; color: #444; line-height: 1.2em; font-size: 51px; display: block; -webkit-text-stroke: 0.7px #444; letter-spacing: 2px; transform: scaleX(0.95); transform-origin: left center;}
#logolink {position: absolute; z-index: 99; width: 109px; height: 95px;}

.nav-menu {position: absolute; margin-left: 115px;}
#site-navigation li {font-size: 16px; line-height: 1.4em; height: 65px; padding: 15px 0; float: left; list-style: none; text-transform: uppercase;}
#site-navigation li:first-child a {border: 0;}
#site-navigation li a {border-left: 1px solid white; display: block; color: white; text-decoration: none; width: 90px; padding: 20px 20px 0px 10px; height: 44px; font-weight: bold; transform: scaleX(0.95); transform-origin: left center;}
#site-navigation li.current-page-ancestor,
#site-navigation li.current-menu-item {background: url(/img/currentsprite.png) center bottom no-repeat!important;}
#menu-main li:hover {background: url(/img/hoverlink.png) 98px 37px no-repeat;}


#main {clear: both; margin: 0 auto; width: 880px; text-align: left; color: #000; padding: 0 40px; overflow: auto;}
.page #main .entry-title {display: none;}

.home article,
#primary {border: 1px solid #aeaeae; background: white; float: left; width: 576px; padding: 0px 20px; padding-bottom: 20px; margin-bottom: 85px;}
.error404 #primary {padding-bottom: 40px;}
.home article {margin-bottom: 20px;}
.home #primary {border: 0; background: none; width: 616px; padding: 0;}
.page footer.entry-meta {display: none;}

#secondary {border: 1px solid #aeaeae; background: white; float: left; width: 200px; padding: 0px 20px; margin-left: 20px; padding-bottom: 25px; margin-bottom: 85px;}
#secondary img {max-width: 200px;}
p {padding-bottom: 15px;}
h1, h2, h3 {text-align: left; line-height: 1.1em; padding: 25px 0 10px; color: #000; font-weight: normal; clear: both;}
h1 {font-size: 39px; color: red; font-weight: normal; padding-bottom: 25px; font-family: 'Archivo Narrow'; font-weight: bold;}
h2 {font-size: 24px; font-family: 'Archivo Narrow'; font-weight: bold;}
h3 {font-size: 22px; font-weight: 300;}
h4 {font-size: 12px; padding-top: 10px;}
#secondary li {list-style: none;}
.alignleft {float: left; margin-right: 15px; margin-bottom: 10px;}
.alignright {float: right; margin-left: 15px; margin-bottom: 10px;}
.alignnone, img.alignnone {display: inline;}
.entry-title a {text-decoration: none;}
.entry-meta {margin-top: 15px; font-style: italic;}
.home .entry-meta {display: none;}
.single footer.entry-meta {display: none;}
.nav-single {display: none; padding-bottom: 25px; width: 100%; overflow: auto;}
.nav-previous {float: left; position: relative; top: 17px;}
.nav-next {float: right; position: relative; top: 17px;}
#content ul {margin-left: 20px; padding-bottom: 15px;}
#content ol {margin-left: 25px; padding-bottom: 15px;}

#colophon {
left: 0;
width: 100%;
bottom: 0;
position: fixed;
clear: both;
background: white; 
text-align: left;
height: 20px;
padding: 0 0 0;
box-shadow: 0px -5px 10px rgba(0,0,0,0.15);
height: 45px;
}
.site-info {line-height: 45px; margin: 0 auto; width: 880px; padding: 0 40px; text-align: right;}
.site-info a.left {float: left; line-height: 45px; font-size: 19px; font-weight: bold; text-decoration: none; }
.site-info span {color: silver;}

#banner-outerslide {border: 1px solid #aeaeae; margin-bottom: 20px; height: 350px; background: white;}
ol.bjqs-markers {position: relative; bottom: 343px; padding: 0px;}
p.bjqs-caption {padding: 0px 20px 3px; width: 838px; color: white; background: rgba(0,0,0,0.5); backfground: #f37d15; font-size: 29px;
font-weight: normal;
text-shadow: 0 0 20px rgba(0,0,0,0);
text-align: center;
line-height: 50px;
}

.home .post {display: block;}
.home .post.sticky {display: block;}
.home #nav-below {display: block;}
h3 a {color: #000;}

.archive .werk {margin-left: -15px; margin-bottom: 85px; width: 895px; overflow: auto;}
.werk article {
display: block;
border: 0;
border: 1px solid #aeaeae;
background: #f37e16;
background: white;
width: 281px;
float: left;
padding: 0px;
margin-left: 15px;
text-decoration: none;
min-height: 330px;
margin-bottom: 20px;
}
.werk article h3 {padding: 15px 10px 10px;}
.werk article h3 a {text-decoration: none; color: #000;}
.werk article p {padding: 0px 10px 15px;}
.werk article .image {
display: block;
width: 281px;
height: 158px;
background: url('/img/play_large.png') center center no-repeat;
box-shadow: inset 0px 0px 70px rgba(0,0,0,0.1);
}

.post .entry-header a {display: block;}
.post .entry-header .image {
position: relative; 
right: 20px; 
width: 616px; 
height: 345px;
display: block;
background: url('/img/play_large.png') center center no-repeat;
box-shadow: inset 0px 0px 70px rgba(0,0,0,0.1);
}
.single .entry-header .image .image,
.post .entry-header .image .image {right: 0;}

.werk #nav-below {margin-left: 15px;}
#nav-below {
font-weight: normal; 
clear: both;
font-size: 18px;
padding-top: 10px;
}
#nav-below a,
.bottomnav .next {float: left;}
.bottomnav .prev {float: left;}

#nav-below a div {
display: block;
color: white; 
background: url('/img/button_right.png'); 
text-decoration: none; 
width: 114px; 
height: 32px;
line-height: 29px;
margin-bottom: 15px;
margin-right:15px;
padding: 0 35px 0 0;
text-align: right;
}
#nav-below a:hover,
.bottomnav a:hover {
opacity: 0.9;
}
#nav-below .next,
.bottomnav .next a {
background: url('/img/button_left.png'); 
padding: 0 0 0 35px;
text-align: left;
}
p > .lightbox-vimeo img {max-width: 100%;}
p > .lightbox-vimeo {position: relative; display: inline-block;}
p > .lightbox-vimeo::after {
	content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: url('/img/play_large.png') center center no-repeat;
}

header button {
    display: none;
    position: absolute; 
    right: 40px;
    top: 20px;
    height: 53px;
    width: 53px;
    background: transparent url(/img/menu.svg) center center no-repeat;
    border: 0;
    cursor: pointer;
    border-radius: 0;
    border: 0px solid rgba(255,255,255,0.5);
}
header select {
    position: absolute; 
    right: 40px;
    top: 20px;
    height: 53px;
    width: 53px;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
}


form {max-width: 30rem;}
form > div {display: flex; flex-direction: column; margin-bottom: 20px;}
form > div label {margin-bottom: 5px;}
form > div input,
form > div textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
form > div textarea {min-height: 150px; resize: vertical;}
form > div input[type="submit"] {
    display: block;
    color: white;
    background: url('/img/button_right.png');
    text-decoration: none;
    width: 149px;
    height: 32px;
    line-height: 29px;
    margin-bottom: 15px;
    border: 0;
    font-weight: bold;
    line-height: 32px;
    font-size: 17px;
    text-align: left;
    padding: 0 35px 0 20px;
    cursor: pointer;
}

@media only screen and (max-width: 960px) {
    #menu-main {display: none;}
    #main {position: relative; width: calc(100% - 80px);}
    .home #primary {width: 100%;}
    #primary {width: calc(100% - 42px);}
    #secondary, .home article {width: calc(100% - 42px)!important;}
    #primary {margin-bottom: 20px; position: relative;}
    #secondary {margin-left: 0;}
    h1.site-title {width: calc(100% - 78px);}
    h1.site-title a {font-size: clamp(0rem, 8.6vw, 51px);}
    .post .entry-header .image {width: calc(100% + 40px); height: auto; aspect-ratio: 1.79;}
    .post .entry-header .image > .image {width: 100%; height: 100%;}
    .site-info a.left {display: block; float: none;}
    #colophon {position: relative; height: auto;}
    .site-info {text-align: left; width: auto; line-height: 1.7; padding-block: 10px 20px;}
    header select {pointer-events: all;}
    header button {display: block;}
    .archive .werk {width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(281px, 1fr)); grid-gap: 20px; margin-left: 0;}
    .werk article {width: calc(100% - 2px); margin-left: 0; min-height: 0; padding-bottom: 20px; margin-bottom: 0;}
    .werk article .image {width: 100%; height: auto; aspect-ratio: 1.78;}
}
@media only screen and (max-width: 600px) {
    h1.site-title {width: calc(100% - 38px);}
    #main {position: relative; width: calc(100% - 40px); padding-inline: 20px;}
    hgroup, #site-navigation {padding-inline: 20px;}
    .site-info {padding-inline: 20px;}
    header button, header select {right: 20px;}
}