* {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    outline: 0;
    color: black;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-button {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: #000000;
    border: 0px solid #ffffff;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: #000000;
}

::-webkit-scrollbar-thumb:active {
    background: #000000;
}

::-webkit-scrollbar-track {
    background: #ffffff;
    border: 0px none #ffffff;
    border-radius: 0px;
}

::-webkit-scrollbar-track:hover {
    background: #ffffff;
}

::-webkit-scrollbar-track:active {
    background: #000000;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.box {
    border: 1vw solid black;
    padding: 1vw;
    font-size: 3vw;
    display: flex;
    text-transform: uppercase;
    line-height: 5vw;
    justify-content: center;
    flex-direction: column;
    border-right: 0;
    flex-grow: 1;
}

body > .left span.box b.fadeout {}

.thumbs .box {
    width: 100vw;
    min-height: 50vh;
    font-size: 5vw;
    display: flex;
    text-transform: uppercase;
    line-height: 6vw;
}

.thumbs span {
    cursor: pointer
}

.thumbs span:hover > b {
    text-decoration: underline
}

.logo {
    letter-spacing: 0.2vw;
    width: 16vw;
    height: 16vw;
    flex-grow: 0;
    cursor: pointer;
}

.logo a {
    text-decoration: none
}

.box:last-child {
    border-right: 1vw solid black;
}

.left {
    display: flex;
    float: left;
    width: 100%;
}

div:last-of-type .box.logo:hover,
div:last-of-type .box.logo:hover b,
.nav.active,
.nav:hover,
.nav:hover b,
.nav:hover a {
    background: black;
    color: white!important;
    cursor: pointer;
}

.nav a {
    text-decoration: none
}

.nav:hover a {
    text-decoration: none
}

.left .nav.active b {
    color: white;
}

#map {
    float: left;
    width: 100%;
    height: 50vh;
    /* -webkit-filter: grayscale(100%) contrast(1.6); */
    /* filter: grayscale(100%) contrast(1.6);         */
}

.project #map {
    border: 1vw solid black;
    padding: 1vw;
    box-sizing: border-box;
    height: 40vh;
}

.left.thumbs {
    flex-wrap: wrap;
}

.thumb.box {
    background-size: cover;
    background-position: center;
    flex-direction: row;
    border: 0px;
}

.thumb .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1vw;
}

.thumb .info b:first-child {
    font-size: 2vw;
    line-height: 2vw;
}

body.project .box .info b.title {
    font-size: 3vw;
    line-height: 3vw;
}

.thumb .info b,
.thumb .info div {
    display: inline-block;
    float: left;
    clear: both;
}

.thumb .info div {
    font-size: 60%;
    text-transform: none;
    line-height: 140%;
}

.thumb .info,
.thumb .thumbnail {
    flex: 1;
}

.thumbnail {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.project .thumbnail.gallery {
    border: 1.5vw solid;
    background-color: black;
}

.home .thumb:hover b {
    text-decoration: underline;
    cursor: pointer;
}

.box.thumb:nth-child(2n+2) {
    flex-direction: row-reverse;
}

.thumbnail.box {}

#okgallery {}

.nopadding {
    padding: 0;
}

.nopadding .info {
    padding: 10vh 1vw;
    padding-top: 5.25vw;
    max-height: 47vw;
    overflow-y: auto;
    display: inline-block;
}

.noborder {
    border: 0!important
}

.biggie {
    border: 0;
    font-style: italic;
    text-align: center;
}

.biggie b {
    font-weight: 900;
    font-size: 8vw;
    line-height: 160%;
    text-decoration: underline;
}

html.past .thumb.project.past,
html.present .thumb.project.present,
html.future .thumb.project.future {
    display: flex
}

.thumb.project {
    display: none
}

html.page.About .box.nav.about,
html.page.Contact .box.nav.contact {
    display: none
}

.description {
    white-space: pre-line
}

.details {
    font-size: 1.25vw;
}

.page {
    float: left
}

.page .title {
    padding: 10px;
    font-size: 6vw;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1vw;
    padding-top: 10vh;
}

.page .content {
    padding: 10px;
    font-size: 3vw;
    white-space: pre-line;
    font-weight: 300;
    margin-bottom: 10vh;
}

.dots {
    display: none
}

html.hidepast div.left.pastprojects,
html.hidepast #pastthumbs {
  display:none
}

@media (max-width: 880px) {
    .page .content {
        font-size: 18px
    }
    .left.projectbox .thumb.box {
        flex-direction: column;
    }
    .project .thumbs .box {
        width: 100vw;
        height: auto;
        font-size: 5vw;
        display: flex;
        text-transform: uppercase;
        line-height: 6vw;
        padding: 3vh 0;
        min-height: auto;
    }
    .project .nopadding.box {
        font-size: 4vw;
    }
    .thumb .info div {
        font-size: 100%;
    }
    .logo {
        width: 17vw;
        height: 17vw;
    }
    body.project .box .info b.title {
        font-size: 7vw;
        line-height: 9vw;
    }
    .thumb .info b:first-child {
        font-size: 3vw;
        line-height: 6vw;
    }
}