* {
    /*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;*/
}


.footer {
    text-align: center;
    margin-top: 1rem;
    border-top: 1px solid #630;
}

.line_top {
    position: relative;
    border-top: 1.9px solid #630;
}

.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;
}



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

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

    ul#prevnext {
        /* border: 1px solid red; */
        width:15.2rem;
        position: relative;
        bottom: -1.4rem;
    
    }
    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 #630;
    color: #666;
    text-align: center;
        font-weight: 300;
   
}
ul#prevnext li:nth-child(1){
 padding: 5px 6px 5px 4px;
}
    .line_top {
        height:2rem;
    }

    /* 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: -3em;
    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: 1.4em 0 1em 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 .info {
        width: 100%;
    }

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

    div.work .image a img,
    div.collection .image a img {
        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;
    /*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;
    }
}


@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) {}