/*
Theme Name: Hans Verelst Architecten
Author: So Uncalled—For
Description: Custom Theme for Hans Verelst Architecten
Version: 0.0.1
Tags: custom, su-f, souncalledfor, sufsufstudio, hva, hans, verelst, architecten, hans verelst architecten, studio, architectuur, architect
*/

/*
 * Globals
 */

@font-face{
    font-family:'Sohne';
    src:url('fonts/soehne-web-leicht.woff2') format('woff2');
    font-weight:normal;
    font-style: normal;
}
@font-face{
    font-family:'Signifier';
    src:url('fonts/signifier-web-light.woff2') format('woff2');
    font-weight:normal;
    font-style: normal;
}
@font-face{
    font-family:'Signifier';
    src:url('fonts/signifier-web-light-italic.woff2') format('woff2');
    font-weight:normal;
    font-style: italic;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
}
body {
    -ms-autohiding-scrollbar: auto;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    scroll-behavior: smooth;
    color:rgb(43, 43, 41);
    overflow-x: hidden;
}
body:not(.home) {
    background-color:#fffef9;
}
body.home, body.blog, body.page-id-273  {
    background-color: rgb(244, 243, 240);
}
.menu h2 a {
    color:#676a63;
}
a, h2 a:hover, .menu .current_page_item a, .blog .main a:hover ul li h2, .page-id-273 .main a:hover ul li h2 {
    text-decoration: none;
    color:rgb(43, 43, 41);
}
h1, h2, h3, h4, h5, strong, h6, ul, .wp-caption-text {
    font-family:"Sohne", Helvetica Neue, Arial, sans-serif;
    font-weight:normal;
    margin:0;
    padding:0;
    text-transform: lowercase;
}
p {
    font-family:"Signifier", Times New Roman, sans-serif;
    font-weight:normal;
    margin:0;
    padding:0;
    -webkit-font-smoothing: antialiased;
    
}
h1, h2, h2 ul {
    font-size:14px;
    line-height:18px;
    letter-spacing:0.5px;
}
h6 {
    font-size:14px;
    line-height:18px;
    letter-spacing:0.5px;
}
h2, h2 a, h6, h6 a {
    color:#b5b7ae;
}
p {
    font-size:18px;
    line-height:24px;
    letter-spacing:0.3px;
}
p:not(:last-of-type) {
    margin-bottom:24px;
}
h6:not(:last-of-type) {
    margin-bottom:18px;
}
li {
    list-style: none;
    padding:0;
}
img {
    pointer-events:none;
}

/*
 * Global
 */

@keyframes fadeIn {
    from { opacity: 0;}
    to { opacity: 1;}
}

.main {
    position: relative;
    float: left;
    top:0;
    left:0;
    right:0;
    width:100vw;
    min-height:calc(100vh - 67px);
    display: flex;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.5s 0.5s;
    animation-fill-mode: forwards;
}
.wrap {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    margin:32px 36px 31px;
    transition: margin 0.2s ease;    
}
.section {
    position: relative;
    float: left;
    display: flex;
    width: 100%;
}
.section-five-sixth {
    width: calc(83.33vw - 63px);
}
.section-three-fourth {
    width: calc(75vw - 63px);
}
.section-half {
    width: calc(50vw - 51px);
}
.section-thirdth {
    width: calc(33.33vw - 48px);
}
.section-fourth {
    width: calc(25vw - 45px);
}
.section-sixth {
    width: calc(16.66vw - 42px);
}
.section-twelfth {
    width: calc(8.33vw - 39px);
    display:block;
}

/*
 * Header
 */

.header {
    position: fixed;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    top:0;
    left:0;
    right:0;
    width:100vw;
    z-index:100;
    background-color: rgb(244, 243, 240);
    transition: height 0.2s ease;
}
.home .header {
    background-color: rgb(244, 243, 240);
    height:81px;
}
.single .header, .page:not(.home) .header, .blog .header {
    height:177px;
}
.single .header {
    background-color:#fffef9;
}
.home .header.short, .single .header.short, .page .header.short, .blog .header.short {
    height:48px;
}
.header.short .wrap {
    margin:14px 36px 16px;
}
.single .header .wrap:first-of-type, .page:not(.home) .header .wrap:first-of-type, .blog .header .wrap:first-of-type {
    margin-bottom:46px;
}
.header .wrap:first-of-type .section-sixth:last-of-type, .header .section-half {
    margin-left:36px;
}
.blog .header .wrap:last-of-type:not(:first-of-type) .section-three-fourth .section-thirdth, .page-id-273 .header .wrap:last-of-type:not(:first-of-type) .section-three-fourth .section-thirdth {
    margin-left:36px;
    margin-right:calc(8.33vw - 39px + 72px);
}
.header .wrap:last-of-type:not(:first-of-type) > .section:last-of-type:not(:first-of-type) {
    justify-content: space-between;
}

/*
 * Menu
 */

.menu {
    position: fixed;
    display:block;
    top:0;
    right:-33.33vw;
    bottom:0;
    width:calc(25vw - 45px + 72px);
    z-index:200;
    background-color: rgb(181, 183, 174);
    transition: right 0.2s ease;
    height:100vh;
}
.menu .wrap {
    display:block;
    float:left;
}
.menu .wrap > .section {
    margin:0 0 78px;
}
.menu .wrap > .section:first-of-type {
    justify-content: space-between;
}
.menu .section-fourth .section-twelfth:last-child {
    margin-left:36px;
}


/*
 * Info
 */

.single .info {
    position: fixed;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    top:-100vh;
    left:0;
    right:0;
    width:100vw;
    z-index:90;
    background-color:#fffef9;
    transition: top 0.4s ease;
    height:auto;
    max-height:calc(100vh - 177px);
    overflow-x:scroll;
}
.single .info .wrap {
    margin:42px 36px 0;
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    max-height:calc(100vh - 177px - 42px)
}
.info .section-five-sixth {
    justify-content: space-between;
    padding-bottom:32px;
    height:100%;
}
.info-show {
    display: inline-block;
}
.info-hide {
    display: none;
}


/*
 * Projects
 */

.wrap-home {
    width:calc(100vw + 8.33vw - 39px);
    margin:84px auto 0;
    flex-shrink: 0;
}
.main .section {
    flex-wrap: wrap;
}
.section > figure {
    display:flex;
    margin-left:calc(4.16vw + 17px);
    margin-right:calc(4.16vw + 16px);
    margin-top:48px;
    margin-bottom:96px;
    font-size:0;
    align-self: flex-end;
    height:auto;
}
body.home figure a {
    display: block;
}
figure video, figure img {
    height:auto;
}
body.home figure, body.home figure a > * {
    width:calc(33.33vw - 48px);
}
body:not(.home) figure, body:not(.home) figure > * {
    width:calc(41.66vw - 51px);
}
body.home figure.home-xxs, body:not(.home) figure.work-xxs, body.home figure.home-xxs a > *, body:not(.home) figure.work-xxs > * {
    width:calc(16.66vw - 42px);
}
body.home figure.home-xs, body:not(.home) figure.work-xs, body.home figure.home-xs a > *, body:not(.home) figure.work-xs > * {
    width:calc(25vw - 45px);
}
body.home figure.home-s, body:not(.home) figure.work-s, body.home figure.home-s a > *, body:not(.home) figure.work-s > * {
    width:calc(33.33vw - 48px);
}
body.home figure.home-sm, body:not(.home) figure.work-sm, body.home figure.home-sm a > *, body:not(.home) figure.work-sm > * {
    width:calc(37.5vw - 49.5px);
}
body.home figure.home-m, body:not(.home) figure.work-m, body.home figure.home-m a > *, body:not(.home) figure.work-m > * {
    width:calc(41.66vw - 51px);
}
body.home figure.home-m, body:not(.home) figure.work-m, body.home figure.home-m a > *, body:not(.home) figure.work-m > * {
    width:calc(45.83vw - 52.5px);
}
body.home figure.home-l, body:not(.home) figure.work-l, body.home figure.home-l a > *, body:not(.home) figure.work-l > * {
    width:calc(50vw - 54px);
}
body.home figure.home-xl, body:not(.home) figure.work-xl, body.home figure.home-xl a > *, body:not(.home) figure.work-xl > * {
    width:calc(58.33vw - 57px);
}
body.home figure.home-xxl, body:not(.home) figure.work-xxl, body.home figure.home-xxl a > *, body:not(.home) figure.work-xxl > * { 
    width:calc(83.33vw - 66px);
}

body.home figure.home-s:nth-of-type(even) {
    flex-direction: row;
    justify-content: right;
    flex-grow:1;
}

/*
 * Single, Blog & Page
 */

.single .main, .page:not(.home) .main, .blog .main {
    left:calc(16.66vw - 6px);
    width:calc(83.33vw + 6px);
}
.single .wrap-single, .page:not(.home) .wrap-page, .blog .wrap-blog {
    margin-top:180px;
    width:calc(83.33vw + 8.33vw - 33px);
    flex-shrink: 0;
    margin-bottom:0;
}
.single .main .section {
    justify-content: space-between;
}

.page:not(.home):not(.page-id-273), .page:not(.home):not(.page-id-273) .header, .page:not(.home):not(.page-id-273) .footer {
    background-color: #676a63;
    color:#f7f6f3;
}
.page:not(.home):not(.page-id-273) .header h1 a, .page:not(.home):not(.page-id-273) .footer h1 a, .page:not(.home):not(.page-id-273) .main h2 a:hover, .page:not(.home):not(.page-id-273) .main h6 a:hover {
    color:#f7f6f3;
}
.page:not(.home) .wrap-page .section, .blog .wrap-blog .section {
    display:flex;
}
.page .text, .page .note {
    margin-left:calc(4.16vw + 17px);
    margin-right:calc(4.16vw + 16px);
    margin-bottom:96px;
    margin-top:41px;
    align-self: flex-start;
}
.page .text {
    width:calc(50vw - 54px);
}
.page .note {
    width: calc(25vw - 45px);
    margin-top:44px;
}
.page:not(.home) figure {
    align-self: flex-start;
}
.blog .wrap-blog, .page-id-273 .wrap-blog {
     margin-top:224px;
}
.blog .wrap-blog .section, .page-id-273 .wrap-blog .section {
    flex-direction:column;
}
.blog .main ul, .page-id-273 .main ul {
    margin-left:calc(4.16vw + 17px);
    margin-right:calc(4.16vw + 16px);    
    align-self: flex-start;
    width:100%;
    display:flex;
} 
.blog .main ul li, .page-id-273 .main ul li {
    display:inline-block;
}
.blog .main ul > li.section-thirdth, .page-id-273 .main ul > li.section-thirdth {
    margin-right:calc(8.33vw - 39px + 72px);
}
.blog .main ul > li.section-sixth, .page-id-273 .main ul > li.section-sixth {
    margin-right:36px;
}
.blog .main ul > li.section-twelfth, .page-id-273 .main ul > li.section-twelfth {
    text-align: right;
}

/*
 * Footer
 */

.footer {
    display:flex;
    flex-direction: column;
    justify-content:flex-start;
    position: relative;
    float:left;
    margin:0;
    padding:0;
    width: 100vw;
}
.footer .wrap {
    margin-top:0;
}
.footer .wrap > .section:first-of-type > .section:first-of-type {
    justify-content: flex-end;
}
.footer .wrap > .section:first-of-type > .section:not(:first-of-type) {
    justify-content: center;
}
.footer .wrap > .section:first-of-type > .section:not(:first-of-type) > .section {
    margin-left:72px;
}
.footer .wrap > .section:last-of-type > .section  {
    justify-content: flex-start;
}

@media (max-width: 720px){
    
    /*
     * Global
     */

    .main {
        min-height:calc(100vh - 129px);
    }
    .wrap {
        margin:12px 18px 15px;
    }
    .section-m {
        width: 100%;
    }
    .section-m-five-sixth {
        width: calc(83.33vw - 33px);
    }
    .section-m-two-thirdth {
        width: calc(66.66vw - 63px);
    }
    .section-m-half {
        width: calc(50vw - 51px);
    }
    .section-m-thirdth {
        width: calc(33.33vw - 24px);
    }
    .section-m-fourth {
        width: calc(25vw - 45px);
    }
    .section-m-sixth {
        width: calc(16.66vw - 21px);
    }

    /*
     * Header
     */

    .home .header {
        background-color: rgb(244, 243, 240);
        height:45px;
    }
    .single .header, .page:not(.home) .header, .blog .header {
        height:123px;
    }
    .home .header.short, .single .header.short, .page .header.short, .blog .header.short {
        height:45px;
    }
    .header.short .wrap {
        margin:12px 18px 16px;
    }
    .single .header .wrap:first-of-type, .page:not(.home) .header .wrap:first-of-type, .blog .header .wrap:first-of-type {
        margin-bottom:48px;
    }

    .header .wrap:first-of-type .section-sixth:last-of-type, .header .section-half {
        margin-left:18px;
    }
    .single .header .wrap:last-of-type > .section > .section:first-of-type, .page:not(.home) .header .wrap:last-of-type > .section > .section:first-of-type, .blog .header .wrap:last-of-type > .section > .section-sixth {
        display:none;
    }
    .header .section-m {
        margin-left:0;
    }
    
    /*
     * Menu
     */

    .menu {
        right:-100vw;
        width: 100vw;
    }
    .menu .wrap > .section {
        margin:0 0 60px;
    }
    .menu .section-fourth .section-twelfth:last-child {
        margin-left:18px;
    }
    
    /*
     * Info
     */

    .single .info {
        max-height:calc(100vh - 123px);
        display:block;
    }
    .single .info .wrap {
        margin:42px 18px 32px;
        display:block;
    }
    .info .section-m {
        display:block;
    }

    /*
     * Projects
     */

    .wrap-home {
        width:calc(100vw - 36px);
        margin: 48px auto 0;
    }
    .home .main .section {
        display:block;
    }
    .section > figure {
        display:inline-block;
        margin-left:0;
        margin-right:0;
        margin-top:48px;
        margin-bottom:0;
        float:left;
    }
    body.home figure, body.home figure a > * {
        width:calc(100vw - 36px);
    }
    body:not(.home) figure, body:not(.home) figure > * {
        width:calc(100vw - 36px);
    }
    
    body.home figure.home-xs, body:not(.home) figure.work-xs, body.home figure.home-xs a > *, body:not(.home) figure.work-xs > * {
        width:calc(66.66vw - 4px);
    }
    body.home figure.home-s, body:not(.home) figure.work-s, body.home figure.home-s a > *, body:not(.home) figure.work-s > * {
        width:calc(66.66vw - 4px);
    }
    body.home figure.home-sm, body:not(.home) figure.work-sm, body.home figure.home-sm a > *, body:not(.home) figure.work-sm > * {
        width:calc(66.66vw - 4px);
    }
    body.home figure.home-m, body:not(.home) figure.work-m, body.home figure.home-m a > *, body:not(.home) figure.work-m > * {
        width:calc(100vw - 36px);
    }
    body.home figure.home-ml, body:not(.home) figure.work-ml, body.home figure.home-ml a > *, body:not(.home) figure.work-ml > * {
        width:calc(100vw - 36px);
    }
    body.home figure.home-l, body:not(.home) figure.work-l, body.home figure.home-l a > *, body:not(.home) figure.work-l > * {
        width:calc(100vw - 36px);
    }
    body.home figure.home-xl, body:not(.home) figure.work-xl, body.home figure.home-xl a > *, body:not(.home) figure.work-xl > * {
        width:calc(100vw - 36px);
    }
    body.home figure.home-xxl, body:not(.home) figure.work-xxl, body.home figure.home-xxl a > *, body:not(.home) figure.work-xxl > * {
        width:calc(100vw - 36px);
    }
    
    body.home figure.home-s:nth-of-type(even), body.home figure.home-xs:nth-of-type(even) {
        float:right;
    }
    
    /*
     * Single
     */

    .single .main, .page:not(.home) .main, .blog .main {
        left:0;
        width:100vw;
    }
    .single .wrap-single, .page:not(.home) .wrap-page, .blog .wrap-blog {
        margin-top:126px;
        width:calc(100vw - 36px);
    }
    .single .main .section, .page:not(.home) .wrap-page .section {
        display: block;
    }
    .single .note {
        margin-top:57px;
    }
    .page .text {
        margin-left:0;
        margin-right:0;
        margin-bottom:0;
        margin-top:39px;
        align-self: flex-start;
    }
    .page .note {
        margin-left:0;
        margin-right:0;
        margin-bottom:36px;
        margin-top:57px;
        align-self: flex-start;
    }
    .page .text {
        width:calc(100vw - 36px);
    }
    .page .note {
        width: calc(100vw - 36px);
    }
    .page:not(.home) .header .wrap:last-of-type > .section-m-sixth {
        display: none;
    }
    .blog .wrap-blog, .page-id-273 .wrap-blog {
        margin-top:168px;
    }
    .blog .header .wrap:last-of-type:not(:first-of-type) .section-three-fourth .section-thirdth, .page-id-273 .header .wrap:last-of-type:not(:first-of-type) .section-three-fourth .section-thirdth {
        margin-left:0;
        margin-right:0;
    }
    .blog .main ul, .page-id-273 .main ul {
        margin-left:0;
        margin-right:0;
    }
    .blog .main ul > li.section-thirdth, .page-id-273 .main ul > li.section-thirdth {
        margin-right:18px;
    }
    .blog .main ul li.section-sixth, .page-id-273 .main ul li.section-sixth {
        display:none;
    }

    /*
     * Footer
     */

    .footer {
        display:flex;
        flex-direction: column;
        justify-content:flex-start;
        position: relative;
        float:left;
        margin:0;
        padding:0;
        width: 100vw;
    }
    .footer .wrap {
        margin-top:24px;
    }
    .footer .wrap > .section {
        flex-direction: column;
        justify-content: flex-end;
    }
    .footer .wrap > .section:first-of-type > .section:first-of-type {
        justify-content: flex-start;
        margin-bottom:18px;
    }
    .footer .wrap > .section:first-of-type > .section:not(:first-of-type) {
        justify-content: flex-start;
    }
    .footer .wrap > .section:first-of-type > .section:not(:first-of-type) > .section {
        margin-left:0;
    }
    .footer .wrap > .section:last-of-type > .section  {
        justify-content: flex-start;
    }
    .footer span {
        display: none;
    }
   
}