* {
    box-sizing: border-box;
}

body {
    margin:0;
    padding:0;
    width:100%;
    height:auto;
    opacity:0;
    transition:opacity 200ms;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.show{
    opacity:1;
}

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

polyline, path, line{
    vector-effect:non-scaling-stroke;
}

#arrow{
    stroke:black;
    fill:none;
    stroke-width:1.2px;
    position:absolute;
    pointer-events: none;
    opacity:0;
    z-index:3;
    transition: opacity 100ms, stroke 200ms;
}

#arrow.mobile{
    display:none;
}

a {
    color:black;
    text-decoration: none;
}

a:hover{
    text-decoration:underline;
}

a:active{
    text-decoration:none;
}

::-moz-selection {
  background: rgb(230,230,230);
}

::selection {
  background: rgb(230,230,230);
}

img {
    width:100%;
    height:auto;
    display:inline-block;
}

header {
    position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top:0;
    left:0;
    width:100%;
    padding:8px;
    z-index: 1;
    text-align:center;
    
    display:flex;
    flex-flow: wrap;
    justify-content:center;
    
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    line-height:22px;
    text-transform: uppercase;
}

header div{
    margin:0 12px 0 0; 
}

main {
    z-index:0;
    position:relative;
    width:74%;
    margin:0 auto 0 auto;
    padding:42px 0 8px 0;
    display:flex;
    flex-flow:wrap;
    max-width:1400px;
}

.column-one{
    position:relative;
    width:50%;
    padding-right:10px;
}

.column-two{
    position:relative;
    width:50%;
    padding-left:10px;
}

.about{
    position:relative;
    width:100%;
    margin:100px 0 0 0;
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    line-height:22px;
    text-transform: uppercase;
    text-align: center;
    display:flex;
    flex-flow: wrap;
    justify-content: center;
    opacity:0;
    transition: opacity 200ms;
}

.about.show {
    opacity:1;
}

.about div + div{
    margin-left:4px;
}

.project {
    position:relative;
    line-height: 0;
    text-align: center;
}

.project + .project{
    margin:20px 0 0 0;
}

.project-images{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.project img{
    cursor:pointer;
    width:100%;
    height:auto;
}

aside{
    position:fixed;
    top:0;
    left:0;
    background:white;
    color:black;
    width:100vw;
    height:100vh;
    opacity:0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 200ms, background 200ms, color 200ms;
}

aside.open{
    opacity:1;
    pointer-events: auto;
}

.aside-top{
    background:white;
    position:fixed;
    width:100%;
    height:100px;
    top:-100px;
    left:0;
    z-index:2;
}

.project-header {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding:8px 8px 0 8px;
    z-index: 3;
    text-align:center;
    
    display:flex;
    flex-flow: wrap;
    justify-content:center;
    
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    line-height:22px;
    text-transform: uppercase;
}

.project-header div{
    margin:0 12px 0 0; 
}

.project-image {
    position:absolute;
    z-index: 0;
    height:86%;
    width:auto;
    line-height: 0;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%) translate3d(0,0,0);
    -ms-transform: translate(-50%, -50%) translate3d(0,0,0);
    transform: translate(-50%, -50%) translate3d(0,0,0);
    opacity:0;
    transition: opacity 200ms;
    pointer-events: none;
}

.project-image.show{
    opacity:1;
    pointer-events: auto;
}

.project-image.mobile{
    height:auto !important;
    width:calc(100% - 40px) !important;
}

.project-image.misery{
    margin-top:0.8%;
    min-height:500px;
    min-width:500px;
}

.project-image.ghoulish{
    max-height:700px !important;
    max-width:700px !important;
}

.next-image{
    top:0;
    right:0;
    position:absolute;
    z-index:1;
    width:40%;
    height:100%;
    cursor:none;
    pointer-events: none;
}

.prev-image{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width:40%;
    height:100%;
    cursor:none;
    pointer-events: none;
}

.next-image.active, .prev-image.active{
    pointer-events: auto;
}

.project-back:hover, .project-more:hover{
    cursor:pointer;
}

.project-more{
    display:none;
}

.project-more.show{
    display:block;
}

.read-more{
    position:absolute;
    top:0;
    right:0;
    z-index:2;
    width:100%;
    height:100%;
    pointer-events:none;
    background:white;
    opacity:0;
    transition: opacity 200ms;
    cursor:pointer;
}

.read-more-box{
    position:absolute;
    left:50%;
    top:50%;
    width:100%;
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    line-height:21px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    cursor:auto;
    padding:40px;
}

.read-more p{
    margin:0 auto 0 auto;
    padding:0;
    width:100%;
    max-width:520px;
}

.read-more p + p{
    margin:8px auto 0 auto;
}

.read-more.open {
    pointer-events: auto;
    opacity:1;
}

aside.black{
    background:black;
    color:white;
}

aside.black a{
    color:white;
}

aside.black #arrow{
    stroke:white;
}

aside.black .read-more{
    background:black;
    color:white;
}

aside.red{
    background:#ff2e05;
    color:white;
}

aside.red a{
    color:white;
}

aside.red #arrow{
    stroke:white;
}

aside.red .read-more{
    background:#ff2e05;
    color:white;
}

@media only screen and (max-width: 660px) {
    header {
        font-size: 12px;
        line-height:18px;
    }
    
    header .name{
        flex-basis: 100%;
    }
    
    header .desc{
        flex-basis: 100%;
    }
    
    .about{
        font-size: 12px;
        line-height:18px;
    }
    
    .project-header {
        font-size: 12px;
        line-height:18px;
    }
    
    .read-more-box{
        font-size: 12px;
        line-height:16px;
        padding:20px;
    }
    
    .project-desc{
        flex-basis:100%;
    }

    .desc {
        flex-basis: 100%;
    }

    .pro {
        flex-basis: 100%;
    }
    
    .project-image.misery{
        margin-top:0;
    }
}