* {
    /*font-family: ff-scala-sans-pro, sans-serif;*/
    font-family: 'Nunito Sans', Verdana, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 200;
    line-height: 1.6em;
    color: #630;
    font-size: 20px;
    /*font-size: 10pt;*/
}

i,
em {
    font-style: italic;
}

.footer {
    text-align: center;
    margin-top: 1rem;
    border-top: 0.3px solid rgba(102, 51, 0, 0.6);
}

.line_top {
    position: relative;
    border-top: 1px solid rgba(102, 51, 0, 0.6);
}

.line_top a {
    text-decoration: none;
    position: absolute;
}

.line_top a.prev {
    top: -1.5rem;
    left: 0;
}

.line_top a.next {
    top: -1.5rem;
    right: 0;
}

#frontpage_quote {
    aspect-ratio: 16/9;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

#frontpage_quote video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

#frontpage_quote .container {
    text-align:center;
    min-width:70%;
    padding: 1em;
    margin-top:-0.5vw;
    position: relative;
    z-index: 1;
}

#frontpage_quote .container .quote,
#frontpage_quote .container .quote a {
    color:white;
    font-weight: 900;
    text-shadow: 2px 2px 2px rgba(0,0,0, 0.45);
    font-size: 2.5vw; 
    line-height: 2.8vw;
}
#frontpage_quote .container .quote_source,
#frontpage_quote .container .quote_source a
{
    color:white!important;
    font-weight: 900;
    text-shadow: 2px 2px 2px rgba(0,0,0, 0.45);
    font-size: 1.5vw;
    margin-top: 1vw
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

#frontpage_quote .container i {
  display: block;
  font-weight: 600;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0,0,0, 0.45);
}
#frontpage_quote .container .arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 60px; /*change with size of arrow to make sit on bottom */
/*   background-image: url(); */
/*   background-size: contain; */
}

#frontpage_quote .container .bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@media screen and (max-width: 765px) {
    .flip-card-back {
        display: none;
    }

    .filter {
        display: none;
    }

    #frontpage_quote .container .arrow {
        display: none;
    }
}

a.splashpage_item {
    text-decoration: none;
}

a.splashpage_item:hover  .splashpage_item_body{
    opacity: 0.7 !important;
    color: #630;
    font-weight: 600 !important;
    letter-spacing: -0.018rem;
} 

a.splashpage_item .item_title {
    text-decoration: underline;
}

@media screen and (min-width: 766px) {


    .splashpage .wrapper {
        max-width: 5000px;
        padding: 0;
    }

    .filter {
        /* margin-top: -1rem; */
        margin-bottom: 1rem;
        text-align: center;
    }

    .filter ul {
        display: inline-block
    }

    .filter .menu li {
        float: left;
        margin-left: 0;
        padding-right: .7em;
        position: relative;
        color: #630;
    }

    .filter .menu li:last-of-type {
        padding-right: 0;
    }

    .filter .menu li a {
        padding: 0;
        color: #630;
        text-decoration: none;
        font-size: 1.1rem;
    }

    .filter .menu li a:hover,
    .menu li a.active {
        opacity: 0.7 !important;
        color: #630;
        /* text-decoration: underline; */
        font-weight: bold;
    }

    ul#prevnext {
        /* border: 1px solid red; */
        width: 15.2rem;
        position: relative;
        bottom: -2rem;

    }

    ul#prevnext li:nth-child(3) {

        position: absolute;
        right: 0px;
    }

    ul#prevnext li:nth-child(odd) {

        border-radius: 50%;
        width: 36px;
        height: 36px;
        padding: 5px;
        display: block;
        background: #fff;
        border: 1px solid rgba(102, 51, 0, 0.6);
        color: rgba(102, 51, 0, 0.6);
        text-align: center;
        font-weight: 300;

    }

    ul#prevnext li:nth-child(1) {
        padding: 5px 6px 5px 4px;
    }

    .line_top {
        height: 3rem;
    }

    .news .line_top,
    .default .line_top {
        height: 0;
    }

    .statement .line_top {
        height: 0.8rem;
    }

    /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
    .flip-card {
        position: relative;
        float: left;
        background-color: transparent;
        width: 500px;
        height: 350px;
        margin: 0 20px 20px 0;
        /*border: 1px solid #f1f1f1;*/
        perspective: 1000px;
        /* Remove this if you don't want the 3D effect */
    }

    /* This container is needed to position the front and back side */
    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }

    /* Do an horizontal flip when you move the mouse over the flip box container */
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }

    /* Position the front and back side */
    .flip-card-front,
    .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        /* Safari */
        backface-visibility: hidden;
    }

    /* Style the front side (fallback if image is missing) */
    .flip-card-front {
        background-color: rgba(102, 51, 0, 0.7);
    }

    /* Style the back side */
    .flip-card-back {
        padding-top: 2em;
        background-color: rgba(102, 51, 0, 0.7);
        color: white;
        font-weight: bold;
        transform: rotateY(180deg);
    }

    .flip-card-back a {
        /*color:#ec610d;*/
        text-decoration: none;
        /* color: rgba(102, 51, 0, 0.7); */
        font-weight: bold;

    }
}

@media screen and (max-width: 765px) {
    * {
        font-size: 15px
    }
}

b,
strong {
    font-weight: 400;
}

.pure-g [class*=pure-u] {
    font-family: 'Nunito Sans', Verdana, Helvetica, sans-serif;
}

.wrapper {
    max-width: 1498px;
    padding: 0 10px;
    margin: 0 auto;
    margin-bottom: 2em;
}

.workslist {
    margin: 0 auto;
    /* 0.5 * ((1498) - ((4*300) + (3*20))) - 10 */
    /*padding-left: 200px;*/
}


h1 {
    font-weight: bold;
    font-size: 1rem;
}

a {
    /*color:#ec610d;*/
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-color: rgba(102, 51, 0, 0.5) !important;
    text-decoration-thickness: 1px;

    /*color: rgba(102, 51, 0, 0.7);*/
    /*font-weight: bold;*/

}


.content {
    position: relative;
}



h1 a {
    text-decoration: none;
    font-weight: 200;
}

.pageheader {
    padding-top: 1em;
    margin-bottom: 2em;
    background-color: #fff;
}

.frontpage .pageheader {
    margin-bottom: 4em;
}


/* .pageheader>h1 {
    float: left;
} */
.pageheader h1 a {
    font-size: 1.6rem;
    color: #630;
    font-weight: 300;
}

/* .pageheader .menu {
    float: right;
} */
@media screen and (min-width: 766px) {
    .pageheader h1 {
        margin: 0 auto;
    }
}

/* frontpage */
div.frontpage_news_line {
    margin-bottom: 1em;
    margin-top: 0;
    text-align: center;
}

.content.center {
    text-align: center;
}

@media screen and (max-width: 765px) {
    div.frontpage_news_line {
        text-align: left;
    }

    .content.center {
        text-align: left;
    }
}

/* workpage */
.workpage .thumbnails {
    display: none;
}

.workpage.new .thumbnails {
    display: block;
    width: 120px;
    /* border: 1px solid black; */
    float: left;
    padding-top: 2rem;
}

.workpage.new .thumbnails img {
    margin-right: 10px;
    margin-bottom: 5px;
    width: 90px;
}

.workpage.new .work {
    /* border: 1px solid red; */
}


/* news */

.newsitem h2 {
    margin-top: 0;
    font-weight: 800;
    font-size: 1em;
}

.newsitem:last-of-type {
    border-bottom-width: 0px;
}

.newsitem .hidden {
    display: none;
}

@media screen and (max-width: 765px) {

    .newsitem {
        max-width: 100%;
        overflow: hidden;
        margin-bottom: 1em;
        padding-bottom: 1em;
        border-bottom: 1px solid #630;
    }

    .newsitem img {
        width: 100%;
        float: left;
    }
}

@media screen and (min-width: 766px) and (max-width: 56em) {
    .newsitem {
        max-width: 800px;
        overflow: hidden;
        margin-bottom: 1em;
        font-size: 0.9em;
        padding-bottom: 1em;
        border-bottom: 1px solid #630;
    }

    .newsitem div {
        overflow: hidden;
        margin-left: 415px;
    }

    .newsitem img {
        width: 400px;
        float: left;
    }
}

@media screen and (min-width: 56em) and (max-width: 64em) {
    .newsitem {
        /*max-width: 1200px;*/
        overflow: hidden;
        margin-bottom: 1em;
        padding-bottom: 1em;
        border-bottom: 1px solid #630;
    }

    .newsitem div {
        overflow: hidden;
        margin-left: 520px;
    }

    .newsitem img {
        width: 500px;
        float: left;
    }

}

@media screen and (min-width: 64em) {
    .newsitem {
        /*max-width: 1200px;*/
        overflow: hidden;
        margin-bottom: 1em;
        padding-bottom: 1em;
        border-bottom: 1px solid #630;
    }

    .newsitem div {
        overflow: hidden;
        margin-left: 620px;
    }

    .newsitem img {
        width: 600px;
        float: left;
    }

}

/* links */

#links_left {
    float: left;
    margin-right: 2em;
}

/* cv */

.cv_header {
    font-weight: 500;
    margin: 0 0 0.5em 0;
}

.cv_item {
    line-height: 1.6em;
    display: block;
    padding-left: 8em;
    padding-bottom: 0.5em;


}

.cv_years {
    width: 8em;
    margin-left: -8em;
    float: left;
    display: block;
}

.mark {
    color: #630;
}


/* worklist */

a.work {
    display: block;
    position: relative;
    width: 200px;
    height: 140px;
    overflow: visible;
    float: left;
    margin: 0 14px 14px 0;
    background-size: cover;
}

a.work.new {
    margin-bottom: 28px;
}

a.work .caption {
    text-align: center;
    display: block;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    bottom: -28px;
}

@media screen and (min-width: 766px) {
    a.work {
        width: 500px;
        height: 350px;
        margin: 0 20px 20px 0;
    }

    a.work.new {
        margin-bottom: 40px;
    }

    a.work .caption {

        width: 290px;
        left: 5px;
        bottom: -40px;
    }

}

/* work */

div.work {
    width: 600px;
    margin: 0 auto;
    overflow: hidden;
    line-height: 1.6em;
}

div.work h1.title {
    margin: 0.25rem 0;
}

div.work .year {
    display: block;
}

div.work .extra .item {
    display: block;
}

div.work .extra .item .name:after {
    content: ":";
}

div.work .info {
    display: block;
    margin: 0.5rem 0 2em;
    /*max-width:80%;*/
    width: 30rem;
}




div.work .image,
div.collection .image {
    display: block;
    /*width: 80%;*/
    width: 30rem;
    margin-bottom: 0.2rem;
}

div.work .image .imginfo,
div.collection .image .imginfo {
    display: block;
}

div.work .image .imginfo {
    line-height: 1.6em;
    vertical-align: top;
    display: inline-block;
}

.imginfo {
    width: 30rem;
}

div.work .image a img,
div.collection .image a img {
    clear: left;
    /*max-width: 400px;*/
    width: 400px;
    float: left;
    margin: 0 10px 10px 0;
    width: 30rem;

}


@media screen and (max-width: 765px) {
    .wrapper {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    div.work {
        width: 100%;
        box-sizing: border-box;
    }

    div.work .info {
        width: 100%;
    }

    div.work .image,
    div.collection .image {
        width: 100%;
    }

    div.work .image a img,
    div.collection .image a img {
        width: 100%;
    }

    .imginfo {
        width: 100%;
    }
}



div.related {
    overflow: hidden;
    padding-top: 0.5em;
    padding-right: 14px;
}

.related h3 {
    display: block;
    width: 120px;
    float: right;
    margin-bottom: .5rem;
    text-align: center;
}

@media screen and (max-width: 1200px) {
    div.related {
        display: none;
    }
}

a.tn_related {
    display: block;
    width: 120px;
    height: 120px;
    overflow: hidden;
    float: right;
    margin: 0 0 1em;
    background-size: cover;
}

.category {
    display: block;
    /*margin-left: 260px;*/
    color: #8f8f8f;
}

/* orderform */

.form_intro,
form {
    max-width: 500px;
}

fieldset {
    border-width: 0px;
    margin: 0;
    padding: 0;
}

fieldset.personal_info div,
fieldset.newsletter_info div {
    margin-bottom: 0.3em;
}

fieldset label {
    display: block;
    float: left;
    width: 10em;
}

fieldset.personal_info input {
    width: 30em;
}

@media screen and (max-width: 765px) {
    fieldset.personal_info input {
        width: 90%;
    }

    .remarks {
        width: 90%;
    }
}

fieldset.newsletter_info input:focus {
    border-width: 0px !important;
    border-color: rgba(102, 51, 0, .6)
}

fieldset.newsletter_info input {
    width: 90%;
    border-width: 0px;
    padding: 2px 4px;
    background-color: rgba(102, 51, 0, .2) !important
}

.notice {
    vertical-align: middle;
    padding: 0.3em 1em;
    margin-bottom: 0.3em;
}


.notice.error {
    color: #D8000C;
    background-color: #FFD2D2;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    margin-top: .5rem;
    border: 1px solid rgba(102, 51, 0, .4);
}


/* menus */

ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu li {
    color: #630;
}

.menu li a {
    color: #630;
    text-decoration: none;
    font-size: 1.1rem;
}

.menu li a:hover,
.menu li a.active {
    opacity: 0.7 !important;
    color: #630;
    font-weight: bold;
    /*text-decoration: underline;*/
}

#mainmenu {
    margin: 1.34em 14px;

}

#mainmenu li {
    float: left;
    padding-right: 0.8em;
    position: relative;
}

#mainmenu li.social {
    padding-right: 0.5em;
    /* margin-top: 0em; */
}

#mainmenu li:last-of-type {
    padding-right: 0;
}

#mainmenu li ul.submenu {
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 1.4em;
    left: 0;
    display: none;
    list-style-type: none;
    margin: 02.em 0 0;
    padding: 5px;
}

#mainmenu li:hover ul.submenu {
    display: block;
}

#mainmenu li ul.submenu li {
    clear: both;
    margin: 0;
    padding: 0;
}

/* statement */

.content .statement {
    clear: both;
    line-height: 1.6em;
    max-width: 50em;
    /*padding: 0 10%;*/
    margin: 0 auto;
    /*font-weight: normal;*/

}

.content .about img {
    display: block;
    margin: 0 auto;
    /*margin-right: 0.5em;
    float: left;*/
}

.content .about .links {
    width: 300px;
    margin: 10px auto;
    display: block;
    text-align: center;
}

.content .about .links a {
    background-color: #ddd;
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    border-radius: 0.9em;
    text-decoration: none;
    margin: 0 5px;
    font-weight: bold;
}

.content .about {
    overflow: hidden;
    margin-bottom: 1em;
}


/* collection */
body.collection {
    background-color: #fbfaf2;
}

body.collection #mainmenu li ul.submenu {
    background-color: #e8e8e3;
}

/** 6 columns **/
@media screen and (min-width: 2028px) {
    .frontpage .wrapper {
        max-width: 1940px;
    }

    .workslist {

        width: 1580px;
        padding-left: 20px;
    }
}

/** 5 columns **/
@media screen and (max-width: 2028px) {
    .frontpage .wrapper {
        max-width: 1620px;
    }

    .workslist {

        width: 1580px;
        padding-left: 20px;
    }
}

/** 4 columns **/
@media screen and (max-width: 1728px) {
    .wrapper {
        max-width: 1498px;
    }

    .workslist {
        /* 0.5 * (1100 - ((3*300) + (2*20))) - 10 */
        /*padding-left: 240px;*/
    }
}

/** 3 columns **/
/* @media screen and (max-width: 1528px) { */
@media screen and (max-width: 1628px) {
    .wrapper {
        max-width: 1100px;
    }

    .workslist {
        width: 1060px;
        padding-left: 20px;
    }
}

/** 2 columns **/
@media screen and (max-width: 1303px) {
    div.frontpage_news_line br {
        height: 2rem;
    }

    .wrapper {
        max-width: 1070px;
    }

    .workslist {
        width: 1060px;
        padding-left: 20px;
    }

    a.tn_related {
        width: 120px;
        height: 120px;
        overflow: hidden;
        float: right;
        margin: 0 0.5em 0.5em 0;
    }
}

/**  3 columns **/
@media screen and (max-width: 1198px) {
    .wrapper {
        max-width: 856px;
    }

    .workslist {
        width: 540px;
        padding-left: 20px
    }
}

/** 3 columns **/
@media screen and (max-width: 875px) {

    .wrapper {
        max-width: 656px;
    }


    .pageheader>h1 {
        float: none;
        margin-bottom: 0.25em;
    }

    .pageheader .menu {
        float: none;
    }

    #mainmenu {
        margin: 0;
    }

}

@media screen and (max-width: 765px) {
    .workslist {
        padding: 0;
        margin-left: 0;
    }

    .workpage.new .thumbnails {
        display: none;
    }

    .flip-card {
        width: 100%;
        height: auto;
        float: none;
        margin: 0 0 1rem 0;
        perspective: none;
    }

    a.work {
        width: 100%;
        height: auto;
        aspect-ratio: 10 / 7;
        float: none;
        margin: 0;
    }

    a.work.new {
        margin-bottom: 0;
    }
}


@media screen and (min-width: 1280px) {

    #newsletter_form_container {
        max-width: 300px;
        ;
        position: absolute;
        right: -20px;
    }
}

@media screen and (min-width: 1400) {

    #newsletter_form_container {
        max-width: 500px;
        ;
    }
}

/** small and up **/
@media screen and (min-width: 35.5em) {}

/** medium and up **/
@media screen and (min-width: 765px) {}

/** large and up **/
@media screen and (min-width: 64em) {}

/* work list: gray overlay on hover, replaces flip-card rotation */
@media screen and (min-width: 766px) {
    .flip-card:hover .flip-card-inner {
        transform: none;
    }
}

a.work.new {
    overflow: hidden;
}

.work-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(243, 243, 243, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

a.work:hover .work-hover-overlay {
    opacity: 1;
}

.work-hover-title {
    color: #630 !important;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    padding: 1em;
}


/* ==========================================================================
   Overrides — deliberately last in the file so they win from source order.
   1. bouncing arrow at the bottom of the header image (was on the quote)
   2. sticky main menu, the name scrolls away with the page
   3. always 3 columns in the work list on desktop
   ========================================================================== */

/* 1. Put the arrow in the normal flow, directly under the quote source,
      instead of absolutely on top of it. */
#frontpage_quote .container .arrow {
    position: static;
    margin: 1rem auto 0;
}

/* 2. Pin the menu to the top while scrolling. There is 80px above the menu
      inside .pageheader (20px padding-top + the nav's own top: 3rem = 60px),
      so -80px would park the menu hard against the screen edge. Sticking at
      -70px instead leaves 10px of air above it, the same 10px the nav has
      below it, so the pinned menu sits evenly between top and bottom.
      The name scrolls out of view either way. */
@media screen and (min-width: 768px) {
    .pageheader {
        position: -webkit-sticky;
        position: sticky;
        top: -70px;
        z-index: 900;
    }

    /* The nav is absolutely positioned, so it needs its own background to
       keep the page content from showing through it once it is pinned. */
    .main-menu {
        background-color: #fff;
        padding-bottom: 0.5rem;
    }
}

/* 3. Fluid cards: three per row on every desktop width, instead of the fixed
      500px cards that only fitted twice on smaller screens.

      The list itself must be a full-width block first. The old rules gave it
      a hard width per breakpoint (1580px / 1060px / 540px), which no longer
      matches now that the cards size themselves off their parent: on a phone
      the 540px list overflowed the screen, and because .workslist is a flex
      item of .pure-g, anything other than a real width made it shrink to fit
      its content — that is why a subsection with few items rendered tiny. */
.workslist {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
}

@media screen and (min-width: 766px) {
    .workslist {
        display: flex;
        flex-wrap: wrap;
        gap: 40px 20px;
    }

    .flip-card {
        width: calc((100% - 40px) / 3);
        height: auto;
        aspect-ratio: 10 / 7;
        float: none;
        margin: 0;
    }

    .flip-card a.work {
        width: 100%;
        height: 100%;
        float: none;
        margin: 0;
    }
}