html {
    height: 100%;
}
body {
    min-height: 100%;
    padding: 0 0 20px 0;
    margin: 0;
    background-color: #fff;
}
html * {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    font-size: 11pt;
}
a {
    /*color: #952d41;*/
    color: #000;
    text-decoration: none;
}
a:link, a:visited {
	cursor: pointer;
}
a:hover {
    text-decoration: underline;
}
h1 {
    font-size: 24pt;
    padding: 0;
    margin: 0 0 10px 0;
    font-weight: 200;
    text-transform: uppercase;
}
header, header div {
    font-size: 18pt;
    font-weight: 400;
    color: #000;
}
header a {
    font-size: 12pt;
    font-weight: 400;
    color: #000;
}
#header {
    margin: 0;
}
h3 {
    font-size: 14pt;
    font-weight: 400;
}
#slide {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    background-color: #fff;
}
#works {
    position: absolute;
    top: 0px;
    bottom: 0px;
    transition: left 0.5s;
    -webkit-transition: left 0.5s;
}
#works figure.slide {
    position: absolute;
    top: 0px;
    bottom: 0px;
    padding: 0;
    margin: 0;
}
#works figure.slide img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
}
#works figure.slide figcaption {
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: left;
    padding: 10px;
    background-color: #fff;
}
#works h3, #works p {
    padding: 0;
    margin: 0;
}
figure {
    margin: 0px 40px 40px 0px;
    display: inline-block;
    vertical-align: top;
}
figure img, figure video, figure iframe {
    max-width: 100%;
    max-height: 100%;
}
figure iframe {
    position: absolute;
    top: 0px;
    left: 0px;
}
figure h3, figure p {
    margin: 0px;
    padding: 0px;
}
#copyright {
    border-top: 1px dotted #000;
    padding: 20px;
}
.nocookies {
    padding: 0px 20px 20px;
}
#slide header {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 10px;
    text-align: right;
    background-color: #fff;
}
#slide header a {
    margin-left: 10px;
    font-size: 18pt;
}
#slide header.dark a, #works figcaption.dark h3, #works figcaption.dark p {
    color: #fff;
}
#slide header.light a, #works figcaption.light h3, #works figcaption.light p {
    color: #000;
}
#spinner {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 130px;
    height: 130px;
    max-width: 100%;
    max-height: 100%;
}
#container {
    position: relative;
}
header {
    padding: 10px;
}
#projects {
    list-style-type: none;
    position: relative;
    padding: 0;
    margin: 0;
}
#projects li {
    width: 100%;
}
#projects li > div {
    margin: 0 0 20px;
}
a.projectLink {
    display: block;
    font-size: 14pt;
    font-weight: 600;
}
.homeList p {
    position: relative;
    padding: 0;
    margin: 0;
}
#container img.projectImage {
    width: 100%;        
}
.homeList {
    padding-bottom: 20px;
}
div.thumbnails {
    margin: 20px;
}
@media (max-width: 640px) {
    #projects li {
        width: 100%;
    }
    #work h1, #work a.projectLink, #about, #homeContact, #homeStudio, #homeSales {
        padding-left: 10px;
        padding-right: 10px;
    }
    #header {
        padding: 10px;
        border-bottom: none;
    }
    div.thumbnails {
        margin: 10px;
    }
    figure {
        display: block;
        margin-left: -10px;
        margin-right: -10px;
    }
    figcaption {
        margin-left: 10px;
        margin-right: 10px;
    }
    #copyright, .nocookies {
        padding: 10px;
    }
}
@media (min-width: 641px) {
    #projects {
        margin: 10px;
    }
    #projects li {
        display: inline-block;
    }
    #projects li > div {
        margin: 10px;
    }
    #header {
        padding: 20px;
        border-bottom: 1px dotted #000;
    }
    .homeList {
        margin-left: 20px;
        margin-right: 20px;
    }
}
@media (min-width: 641px) and (max-width: 1340px) {
    #projects li {
        width: 49.8%;
    }
    .homeList {
        max-width: 49.8%;
    }
}
@media (min-width: 1341px) and (max-width: 2000px) {
    #projects li {
        width: 33.2%
    }
    .homeList {
        max-width: 33.2%;
    }
}
@media (min-width: 2001px) and (max-width: 2660px) {
    #projects li {
        width: 24.8%
    }
    .homeList {
        max-width: 24.8%;
    }
}
div.thumbnails div.thumbnail {
    position: relative;
    display: inline-block;
}
div.thumbnails div.thumbnail a {
    position: relative;
    display: block;
    margin: 5px;
}
div.thumbnails div.thumbnail a img {
    position: relative;
    display: block;
    width: 100%;
}



@media (max-width: 808px) {
    div.thumbnails div.thumbnail {
        width: 33.3333%;
    }
}
@media (min-width: 809px) and (max-width: 1074px) {
    div.thumbnails div.thumbnail {
        width: 25%;
    }
}
@media (min-width: 1075px) and (max-width: 1340px) {
    div.thumbnails div.thumbnail {
        width: 20%;
    }
}
@media (min-width: 1341px) and (max-width: 1606px) {
    div.thumbnails div.thumbnail {
        width: 16.66666666666667%;
    }
}
@media (min-width: 1607px) and (max-width: 1872px) {
    div.thumbnails div.thumbnail {
        width: 14.28571428571429%;
    }
}
@media (min-width: 1873px) and (max-width: 2138px) {
    div.thumbnails div.thumbnail {
        width: 12.5%;
    }
}
@media (min-width: 2139px) and (max-width: 2404px) {
    div.thumbnails div.thumbnail {
        width: 11.11111111111111%;
    }
}
@media (min-width: 2405px) and (max-width: 2670px) {
    div.thumbnails div.thumbnail {
        width: 10%;
    }
}

div.projectDescription {
	border-bottom: 1px dotted #000;
	padding: 10px 20px;
}
div.links {
    border-top: 1px dotted #000;
    padding: 10px 20px;
}
div.links p, div.projectDescription p {
    padding: 0;
    margin: 0 0 10px 0;
}
#copyright p, #copyright a, #copyright span, .nocookies p {
    font-size: 8pt;
}
#copyright h3, .nocookies h3 {
    font-size: 10pt;
    padding: 0;
    margin: 0;
}
#ccImage {
    margin-top: 10px;
}
.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-16 { width: 16px; height: 16px; background: url('//badges.instagram.com/static/images/ig-badge-sprite-16.png') no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-16 { background-image: url('//badges.instagram.com/static/images/ig-badge-sprite-16@2x.png'); background-size: 60px 178px; } }

#night_shift {
    padding: 20px;
    border-bottom: 1px dotted black;
}
#night_shift div.exhibition_info {
    display: inline-block;
}
#night_shift div.exhibition_info h2, #night_shift div.exhibition_info h2 * {
    font-size: 14pt;
    font-weight: bold;
    margin: 0pt;
    padding: 0pt;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #fff;
    }
    a {
        color: #fff;
    }
    div.projectDescription {
        border-bottom: 1px dotted #fff;
    }
    div.links {
        border-top: 1px dotted #fff;
    }
    #header {
        border-bottom: 1px dotted #fff;
    }
    #copyright {
        border-top: 1px dotted #fff;
    }
    #slide header {
        background-color: #000;
    }
    #slide header.dark a, #works figcaption.dark h3, #works figcaption.dark p {
        color: #000;
    }
    #slide header.light a, #works figcaption.light h3, #works figcaption.light p {
        color: #fff;
    }
    #works figure.slide figcaption {
        background-color: #000;
    }
    #slide {
        background-color: #000;
    }
    header, header div {
        color: #fff;
    }
    header a {
        color: #fff;
    }
}