.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    max-height: 100%;
}

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

    .fullscreen-bg__video {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
    }
    .tintx {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(33, 162, 169, 0.3);
    }

    .slide__text {
        z-index: 1;
    }

}
.js .loading::after,.js .loading::before{
    content:'';
    position:fixed;
    z-index:100000
}
#menuContainer,.glitch,.hidden{
    overflow:hidden
}
.content,body{
    min-height:100vh
}
#projectList,.codrops-links,.demo span{
    white-space:nowrap
}
.slide__title,body{
    font-family:'Source Sans Pro',sans-serif
}
#hamburger,.slide__navigations a{
    -o-box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    -webkit-box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    -moz-box-shadow:0 3px 6px 0 rgba(0,0,0,.35)
}
.slide-nav__button:focus,a,button{
    outline:0
}
*,::after,::before{
    box-sizing:border-box
}
html{
    background:#004DDD
}
body{
    font-size:.85em;
    font-weight:700;
    background-color:#000;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.js body{
    opacity:0;
    transition:opacity .3s
}
.js body.render{
    opacity:1
}
.js .loading::before{
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:var(--color-bg)
}
.js .loading::after{
    top:50%;
    left:50%;
    width:60px;
    height:60px;
    margin:-30px 0 0 -30px;
    pointer-events:none;
    border-radius:50%;
    opacity:.4;
    background:var(--color-link);
    animation:loaderAnim .7s linear infinite alternate forwards
}
@keyframes loaderAnim{
    to{
        opacity:1;
        transform:scale3d(.5,.5,1)
    }
}
a{
    text-decoration:none;
    color:var(--color-link)
}
a:focus,a:hover{
    color:var(--color-link-hover);
    outline:0
}
.hidden{
    position:absolute;
    width:0;
    height:0;
    pointer-events:none
}
.content,main{
    position:relative;
    overflow:hidden!important
}
.icon{
    display:block;
    width:1.5em;
    height:1.5em;
    margin:0 auto;
    fill:currentColor
}
main{
    width:100%
}
.content{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin:0 auto
}
.content--fixed{
    position:fixed;
    z-index:10000;
    top:0;
    left:0;
    display:grid;
    align-content:space-between;
    width:100%;
    max-width:none;
    min-height:0;
    height:100vh;
    pointer-events:none;
    grid-template-columns:50% 50%;
    grid-template-rows:auto auto 4em;
    grid-template-areas:'header demos' '... info' 'github info'
}
.codrops-header,.codrops-links,.demos,.slides{
    position:relative
}
.content--fixed a,.demos{
    pointer-events:auto
}
.codrops-header{
    z-index:100;
    align-self:start;
    grid-area:header;
    justify-self:start;
    -webkit-writing-mode:vertical-lr;
    writing-mode:vertical-lr;
    height:18rem
}
.codrops-header__title{
    font-size:1em;
    font-weight:700;
    margin:0;
    transform:scale(-1);
    align-self:center;
    line-height:2
}
.github,.info{
    align-self:end
}
.info{
    margin:0 0 .25rem 1.25em;
    color:var(--color-info);
    -webkit-writing-mode:vertical-lr;
    writing-mode:vertical-lr;
    grid-area:info;
    justify-self:end
}
.github{
    display:block;
    grid-area:github;
    justify-self:start;
    margin:.25rem
}
.demos{
    display:block;
    justify-self:end;
    align-self:start;
    text-align:center;
    grid-area:demos
}
.demo:not(:last-child){
    margin:0 1rem 0 0
}
a.demo--current{
    pointer-events:none;
    color:var(--color-link-hover)
}
.codrops-links{
    display:flex;
    justify-content:center;
    text-align:center;
    float:left;
    width:2rem
}
.codrops-icon{
    display:inline-block;
    margin:.15em
}
@media screen and (max-width:1040px){
    body{
        border:0!important
    }
    .content{
        flex-direction:column;
        height:auto;
        min-height:0
    }
    .content--fixed{
        position:relative;
        z-index:1000;
        display:block
    }
    .codrops-header{
        flex-direction:column;
        align-items:center;
        -webkit-writing-mode:initial;
        writing-mode:initial;
        height:auto
    }
    .codrops-header__title{
        font-weight:700;
        text-align:center;
        transform:none
    }
    .info{
        margin:1rem 0;
        -webkit-writing-mode:initial;
        writing-mode:initial;
        text-align:center
    }
    .github{
        display:none
    }
    .codrops-links{
        margin:0;
        float:none;
        width:auto
    }
    .demo-1{
        --color-link-hover:#fff;
        --color-info:#fff
    }
}
.slides--contained{
    margin:6rem 11rem 0 0
}
.js .slides--contained{
    margin:0 11rem 0 0;
    width:auto;
    display:flex;
    justify-content:flex-end
}
.js .slide{
    position:absolute;
    opacity:0;
    top:0;
    left:0;
    pointer-events:none
}
.js .slide--current{
    position:fixed;
    top:0;
    left:0;
    opacity:1;
    pointer-events:auto
}
.slide__img{
    width:100vw;
    height:100vh
}
.slides--contained .slide__img{
    max-width:100%;
    background-size:cover
}
.slide__text{
    position:absolute;
    bottom:100px;
    left:120px;
    right:120px;
    color:#fff;
    text-shadow:0 2px 5px rgba(0,0,0,.25)
}
.slide--current .slide__title{
    animation:glitch-anim-title .25s linear alternate 1 backwards
}
.slide__title{
    font-size:100px;
    letter-spacing:normal;
    font-weight:900;
    text-transform:none;
    line-height:110px;
    margin:0 0 10px -7px
}
#menuContainer article p,.slide__description{
    font-family:Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace!important
}
.slide__description{
    font-size:16px;
    font-weight:600;
    text-transform:none;
    margin:0 0 100px;
    color:#fff
}
.slide__description a{
    color:#aaa;
    pointer-events:auto
}
.slide__description a:hover,body{
    color:#fff
}
.slide__navigations{
    position:relative;
    width:330px;
    height:50px
}
.slide__navigations a{
    position:relative;
    float:left;
    height:50px;
    box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    -o-box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    -webkit-box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    -moz-box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    -o-transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -ms-transition:all .2s linear;
    transition:all .2s linear
}
.slide-nav__button,.slide__navigations a:hover{
    -o-transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -ms-transition:all .2s linear
}
.slide__navigations a:hover{
    -o-box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    -webkit-box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    -moz-box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    transition:all .2s linear
}
.slide-nav{
    position:relative;
    float:left;
    background-color:#004DDD;
    width:40px;
    height:150px;
    z-index:7
}
.slides--contained+.slide-nav{
    flex-direction:row;
    justify-content:flex-start;
    height:auto;
    margin:0 0 0 .25rem;
    top:calc(50% - .5rem);
    left:calc(100vw - 600px - 11rem - 4rem - 10vw)
}
.slide-nav__button{
    display:block;
    background:#004DDD;
    border:0;
    width:40px;
    height:75px;
    transition:all .2s linear
}
#hamburger,#socialNetworks li a,.slide-nav__button:hover,a,a:hover{
    -o-transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -ms-transition:all .2s linear
}
.slide-nav__button:hover,a,a:hover{
    transition:all .2s linear
}
.slide-nav__button:hover{
    background:#000
}
#close,#hamburger,.cv,.glitch,.glitch__img,.linkToWebsite,.viewOnBehance{
    background-repeat:no-repeat
}
.slide-nav__button span{
    display:block
}
.slide-nav__button:hover span{
    animation:glitch-anim-text .5s linear alternate 1 backwards
}
.slide-nav__text{
    font-size:4vw;
    margin:.75rem 0;
    font-weight:900;
    text-transform:lowercase;
    letter-spacing:0;
    color:inherit
}
.slide-nav__text:hover{
    color:var(--color-link-hover)
}
.slide-nav__text--current:hover,.slide-nav__text:focus{
    color:var(--color-link)
}
.slide-nav__text--current{
    background-image:linear-gradient(transparent 58%,var(--color-link) 58%,var(--color-link) 64%,transparent 64%)
}
@media screen and (max-width:1040px){
    .slides--contained{
        margin:0!important;
        width:80vw!important;
        justify-content:center!important;
        left:60px
    }
    .slide__text{
        bottom:80px;
        left:120px;
        right:120px
    }
    .slide{
        width:100%
    }
    .slide__title{
        font-size:75px;
        line-height:80px
    }
    .slide__description{
        margin-bottom:40px;
        max-width:none
    }
    .slides--contained .slide__img{
        height:calc(100vh - 150px);
        width:100%
    }
    .slides--contained+.slide-nav{
        left:auto!important;
        justify-content:center!important;
        position:relative!important;
        top:auto!important
    }
    .slide-nav__text{
        font-size:1.5rem
    }
}
#eight-type,#intro h1 b,#projectGrid,#seventh-type{
    margin-top:40px
}
.effect-1{
    --gap-horizontal:40px;
    --gap-vertical:50px;
    --time-anim:2s;
    --delay-anim:0s;
    --blend-mode-1:none;
    --blend-mode-2:luminosity;
    --blend-mode-3:none;
    --blend-mode-4:none;
    --blend-mode-5:overlay;
    --blend-color-1:transparent;
    --blend-color-2:#436161;
    --blend-color-3:transparent;
    --blend-color-4:transparent;
    --blend-color-5:#af4949
}
.effect-2{
    --gap-horizontal:10px;
    --gap-vertical:5px;
    --time-anim:2s;
    --delay-anim:0s;
    --blend-mode-1:none;
    --blend-mode-2:none;
    --blend-mode-3:none;
    --blend-mode-4:none;
    --blend-mode-5:overlay;
    --blend-color-1:transparent;
    --blend-color-2:transparent;
    --blend-color-3:transparent;
    --blend-color-4:transparent;
    --blend-color-5:#af4949
}
.glitch{
    position:relative
}
.glitch,.glitch__img{
    background-position:50% 50%;
    background-size:cover
}
.glitch__img{
    position:absolute;
    top:calc(-1 * var(--gap-vertical));
    left:calc(-1 * var(--gap-horizontal));
    width:calc(100% + var(--gap-horizontal) * 2);
    height:calc(100% + var(--gap-vertical) * 2);
    background-color:var(--blend-color-1);
    transform:translate3d(0,0,0);
    background-blend-mode:var(--blend-mode-1)
}
#av-1,#av-2,#bottomNav,#close,#cursor,#glitchGif,#hamburger,#intro,#intro article,#menu{
    position:fixed
}
#close,#hamburger{
    top:50px;
    background-position:top 15px left 15px
}
.glitch__img:nth-child(n+2){
    opacity:0
}
.glitch--animate .glitch__img:nth-child(n+2){
    animation-duration:var(--time-anim);
    animation-delay:var(--delay-anim);
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards
}
.glitch--animate .glitch__img:nth-child(2){
    background-color:var(--blend-color-2);
    background-blend-mode:var(--blend-mode-2);
    animation-name:glitch-anim-1
}
.glitch--animate .glitch__img:nth-child(3){
    background-color:var(--blend-color-3);
    background-blend-mode:var(--blend-mode-3);
    animation-name:glitch-anim-2
}
.glitch--animate .glitch__img:nth-child(4){
    background-color:var(--blend-color-4);
    background-blend-mode:var(--blend-mode-4);
    animation-name:glitch-anim-3
}
.glitch--animate .glitch__img:nth-child(5){
    background-color:var(--blend-color-5);
    background-blend-mode:var(--blend-mode-5);
    animation-name:glitch-anim-flash
}
@keyframes glitch-anim-1{
    0%,100%{
        opacity:1;
        transform:translate3d(var(--gap-horizontal),0,0) scale3d(-1,-1,1);
        -webkit-clip-path:polygon(0 2%,100% 2%,100% 5%,0 5%);
        clip-path:polygon(0 2%,100% 2%,100% 5%,0 5%)
    }
    20%{
        -webkit-clip-path:polygon(0 15%,100% 15%,100% 15%,0 15%);
        clip-path:polygon(0 15%,100% 15%,100% 15%,0 15%)
    }
    30%{
        -webkit-clip-path:polygon(0 10%,100% 10%,100% 20%,0 20%);
        clip-path:polygon(0 10%,100% 10%,100% 20%,0 20%)
    }
    40%{
        -webkit-clip-path:polygon(0 1%,100% 1%,100% 2%,0 2%);
        clip-path:polygon(0 1%,100% 1%,100% 2%,0 2%)
    }
    50%{
        -webkit-clip-path:polygon(0 33%,100% 33%,100% 33%,0 33%);
        clip-path:polygon(0 33%,100% 33%,100% 33%,0 33%)
    }
    55%{
        -webkit-clip-path:polygon(0 44%,100% 44%,100% 44%,0 44%);
        clip-path:polygon(0 44%,100% 44%,100% 44%,0 44%)
    }
    60%{
        -webkit-clip-path:polygon(0 50%,100% 50%,100% 20%,0 20%);
        clip-path:polygon(0 50%,100% 50%,100% 20%,0 20%)
    }
    65%{
        -webkit-clip-path:polygon(0 70%,100% 70%,100% 70%,0 70%);
        clip-path:polygon(0 70%,100% 70%,100% 70%,0 70%)
    }
    70%{
        -webkit-clip-path:polygon(0 80%,100% 80%,100% 80%,0 80%);
        clip-path:polygon(0 80%,100% 80%,100% 80%,0 80%)
    }
    80%{
        -webkit-clip-path:polygon(0 50%,100% 50%,100% 55%,0 55%);
        clip-path:polygon(0 50%,100% 50%,100% 55%,0 55%)
    }
    85%{
        -webkit-clip-path:polygon(0 60%,100% 60%,100% 65%,0 65%);
        clip-path:polygon(0 60%,100% 60%,100% 65%,0 65%)
    }
    95%{
        -webkit-clip-path:polygon(0 72%,100% 72%,100% 78%,0 78%);
        clip-path:polygon(0 72%,100% 72%,100% 78%,0 78%)
    }
}
@keyframes glitch-anim-2{
    0%,100%{
        opacity:1;
        transform:translate3d(calc(-1 * var(--gap-horizontal)),0,0);
        -webkit-clip-path:polygon(0 25%,100% 25%,100% 30%,0 30%);
        clip-path:polygon(0 25%,100% 25%,100% 30%,0 30%)
    }
    10%{
        -webkit-clip-path:polygon(0 3%,100% 3%,100% 3%,0 3%);
        clip-path:polygon(0 3%,100% 3%,100% 3%,0 3%)
    }
    15%{
        -webkit-clip-path:polygon(0 5%,100% 5%,100% 20%,0 20%);
        clip-path:polygon(0 5%,100% 5%,100% 20%,0 20%)
    }
    17%{
        -webkit-clip-path:polygon(0 20%,100% 20%,100% 20%,0 20%);
        clip-path:polygon(0 20%,100% 20%,100% 20%,0 20%)
    }
    19%{
        -webkit-clip-path:polygon(0 40%,100% 40%,100% 40%,0 40%);
        clip-path:polygon(0 40%,100% 40%,100% 40%,0 40%)
    }
    33%{
        -webkit-clip-path:polygon(0 52%,100% 52%,100% 59%,0 59%);
        clip-path:polygon(0 52%,100% 52%,100% 59%,0 59%)
    }
    35%{
        -webkit-clip-path:polygon(0 60%,100% 60%,100% 60%,0 60%);
        clip-path:polygon(0 60%,100% 60%,100% 60%,0 60%)
    }
    40%{
        -webkit-clip-path:polygon(0 75%,100% 75%,100% 75%,0 75%);
        clip-path:polygon(0 75%,100% 75%,100% 75%,0 75%)
    }
    45%{
        -webkit-clip-path:polygon(0 65%,100% 65%,100% 40%,0 40%);
        clip-path:polygon(0 65%,100% 65%,100% 40%,0 40%)
    }
    49%{
        -webkit-clip-path:polygon(0 45%,100% 45%,100% 50%,0 50%);
        clip-path:polygon(0 45%,100% 45%,100% 50%,0 50%)
    }
    50%{
        -webkit-clip-path:polygon(0 14%,100% 14%,100% 33%,0 33%);
        clip-path:polygon(0 14%,100% 14%,100% 33%,0 33%)
    }
    55%{
        -webkit-clip-path:polygon(0 15%,100% 15%,100% 35%,0 35%);
        clip-path:polygon(0 15%,100% 15%,100% 35%,0 35%)
    }
    60%{
        -webkit-clip-path:polygon(0 15%,100% 15%,100% 15%,0 15%);
        clip-path:polygon(0 15%,100% 15%,100% 15%,0 15%)
    }
    70%{
        -webkit-clip-path:polygon(0 65%,100% 65%,100% 60%,0 60%);
        clip-path:polygon(0 65%,100% 65%,100% 60%,0 60%)
    }
    80%{
        -webkit-clip-path:polygon(0 80%,100% 80%,100% 85%,0 85%);
        clip-path:polygon(0 80%,100% 80%,100% 85%,0 85%)
    }
    90%{
        -webkit-clip-path:polygon(0 55%,100% 55%,100% 65%,0 65%);
        clip-path:polygon(0 55%,100% 55%,100% 65%,0 65%)
    }
}
@keyframes glitch-anim-3{
    0%,100%{
        opacity:1;
        transform:translate3d(0,calc(-1 * var(--gap-vertical)),0) scale3d(-1,-1,1);
        -webkit-clip-path:polygon(0 1%,100% 1%,100% 3%,0 3%);
        clip-path:polygon(0 1%,100% 1%,100% 3%,0 3%)
    }
    5%{
        -webkit-clip-path:polygon(0 10%,100% 10%,100% 9%,0 9%);
        clip-path:polygon(0 10%,100% 10%,100% 9%,0 9%)
    }
    11%{
        -webkit-clip-path:polygon(0 5%,100% 5%,100% 6%,0 6%);
        clip-path:polygon(0 5%,100% 5%,100% 6%,0 6%)
    }
    20%{
        -webkit-clip-path:polygon(0 20%,100% 20%,100% 20%,0 20%);
        clip-path:polygon(0 20%,100% 20%,100% 20%,0 20%)
    }
    25%{
        -webkit-clip-path:polygon(0 10%,100% 10%,100% 10%,0 10%);
        clip-path:polygon(0 10%,100% 10%,100% 10%,0 10%)
    }
    35%{
        -webkit-clip-path:polygon(0 30%,100% 30%,100% 25%,0 25%);
        clip-path:polygon(0 30%,100% 30%,100% 25%,0 25%)
    }
    42%{
        -webkit-clip-path:polygon(0 15%,100% 15%,100% 16%,0 16%);
        clip-path:polygon(0 15%,100% 15%,100% 16%,0 16%)
    }
    48%{
        -webkit-clip-path:polygon(0 40%,100% 40%,100% 39%,0 39%);
        clip-path:polygon(0 40%,100% 40%,100% 39%,0 39%)
    }
    50%{
        -webkit-clip-path:polygon(0 20%,100% 20%,100% 21%,0 21%);
        clip-path:polygon(0 20%,100% 20%,100% 21%,0 21%)
    }
    56%{
        -webkit-clip-path:polygon(0 60%,100% 60%,100% 55%,0 55%);
        clip-path:polygon(0 60%,100% 60%,100% 55%,0 55%)
    }
    61%{
        -webkit-clip-path:polygon(0 30%,100% 30%,100% 31%,0 31%);
        clip-path:polygon(0 30%,100% 30%,100% 31%,0 31%)
    }
    68%{
        -webkit-clip-path:polygon(0 70%,100% 70%,100% 69%,0 69%);
        clip-path:polygon(0 70%,100% 70%,100% 69%,0 69%)
    }
    72%{
        -webkit-clip-path:polygon(0 40%,100% 40%,100% 41%,0 41%);
        clip-path:polygon(0 40%,100% 40%,100% 41%,0 41%)
    }
    77%{
        -webkit-clip-path:polygon(0 80%,100% 80%,100% 75%,0 75%);
        clip-path:polygon(0 80%,100% 80%,100% 75%,0 75%)
    }
    81%{
        -webkit-clip-path:polygon(0 50%,100% 50%,100% 51%,0 51%);
        clip-path:polygon(0 50%,100% 50%,100% 51%,0 51%)
    }
    86%{
        -webkit-clip-path:polygon(0 90%,100% 90%,100% 90%,0 90%);
        clip-path:polygon(0 90%,100% 90%,100% 90%,0 90%)
    }
    90%{
        -webkit-clip-path:polygon(0 60%,100% 60%,100% 60%,0 60%);
        clip-path:polygon(0 60%,100% 60%,100% 60%,0 60%)
    }
    92%{
        -webkit-clip-path:polygon(0 100%,100% 100%,100% 99%,0 99%);
        clip-path:polygon(0 100%,100% 100%,100% 99%,0 99%)
    }
    94%{
        -webkit-clip-path:polygon(0 70%,100% 70%,100% 71%,0 71%);
        clip-path:polygon(0 70%,100% 70%,100% 71%,0 71%)
    }
}
@keyframes glitch-anim-text{
    0%,100%{
        transform:translate3d(2px,-2px,0) scale3d(-1,-1,1);
        -webkit-clip-path:polygon(0 20%,100% 20%,100% 21%,0 21%);
        clip-path:polygon(0 20%,100% 20%,100% 21%,0 21%)
    }
    20%{
        -webkit-clip-path:polygon(0 33%,100% 33%,100% 33%,0 33%);
        clip-path:polygon(0 33%,100% 33%,100% 33%,0 33%)
    }
    41%{
        -webkit-clip-path:polygon(0 44%,100% 44%,100% 44%,0 44%);
        clip-path:polygon(0 44%,100% 44%,100% 44%,0 44%)
    }
    52%{
        -webkit-clip-path:polygon(0 50%,100% 50%,100% 20%,0 20%);
        clip-path:polygon(0 50%,100% 50%,100% 20%,0 20%)
    }
    61%{
        -webkit-clip-path:polygon(0 70%,100% 70%,100% 70%,0 70%);
        clip-path:polygon(0 70%,100% 70%,100% 70%,0 70%)
    }
    75%{
        -webkit-clip-path:polygon(0 80%,100% 80%,100% 80%,0 80%);
        clip-path:polygon(0 80%,100% 80%,100% 80%,0 80%)
    }
    80%{
        -webkit-clip-path:polygon(0 50%,100% 50%,100% 55%,0 55%);
        clip-path:polygon(0 50%,100% 50%,100% 55%,0 55%)
    }
    96%{
        -webkit-clip-path:polygon(0 70%,100% 70%,100% 80%,0 80%);
        clip-path:polygon(0 70%,100% 70%,100% 80%,0 80%)
    }
}
@keyframes glitch-anim-title{
    0%,100%{
        transform:translate3d(2px,-2px,0);
        -webkit-clip-path:polygon(0 20%,100% 20%,100% 21%,0 21%);
        clip-path:polygon(0 20%,100% 20%,100% 21%,0 21%)
    }
    20%{
        -webkit-clip-path:polygon(0 33%,100% 33%,100% 33%,0 33%);
        clip-path:polygon(0 33%,100% 33%,100% 33%,0 33%)
    }
    41%{
        -webkit-clip-path:polygon(0 44%,100% 44%,100% 44%,0 44%);
        clip-path:polygon(0 44%,100% 44%,100% 44%,0 44%)
    }
    52%{
        -webkit-clip-path:polygon(0 50%,100% 50%,100% 20%,0 20%);
        clip-path:polygon(0 50%,100% 50%,100% 20%,0 20%)
    }
    61%{
        -webkit-clip-path:polygon(0 70%,100% 70%,100% 70%,0 70%);
        clip-path:polygon(0 70%,100% 70%,100% 70%,0 70%)
    }
    75%{
        -webkit-clip-path:polygon(0 80%,100% 80%,100% 80%,0 80%);
        clip-path:polygon(0 80%,100% 80%,100% 80%,0 80%)
    }
    80%{
        -webkit-clip-path:polygon(0 50%,100% 50%,100% 55%,0 55%);
        clip-path:polygon(0 50%,100% 50%,100% 55%,0 55%)
    }
    96%{
        -webkit-clip-path:polygon(0 70%,100% 70%,100% 80%,0 80%);
        clip-path:polygon(0 70%,100% 70%,100% 80%,0 80%)
    }
}
@keyframes glitch-anim-flash{
    0%,5%{
        opacity:.2;
        transform:translate3d(var(--gap-horizontal),var(--gap-vertical),0)
    }
    100%,5.5%{
        opacity:0;
        transform:translate3d(0,0,0)
    }
}
@media screen and (max-width:800px){
    .slides--contained .slide__img{
        height:100vh
    }
    .slide__title{
        font-size:50px;
        line-height:60px
    }
    .slide-nav{
        width:100%;
        height:50px
    }
    .slide-nav__button:first-of-type{
        float:right!important;
        width:50%;
        height:50px
    }
    .slide-nav__button:last-of-type{
        float:left!important;
        width:50%;
        height:50px
    }
    #previousBtn{
        background-color:#000
    }
    .slide-nav__button:hover{
        background-color:inherit
    }
    #previousBtn:hover{
        background-color:#000!important
    }
    .slide__text{
        position:fixed;
        bottom:100px;
        left:50px;
        right:50px
    }
}
#projectGrid,#socialNetworks{
    height:auto;
    position:relative
}
#close,#hamburger,#menuContainer article a{
    height:50px
}
#close,#hamburger,.linkToWebsite{
    width:50px;
    background-size:20px
}
#intro,#menu{
    height:100vh;
    z-index:10;
    top:0
}
#intro,#menuContainer{
    background-color:#000
}
#close:hover,#hamburger:hover,#projectGrid li{
    background-color:#004DDE
}
#mailTo-Tv,#menuContents,#screen{
    position:absolute
}
@media screen and (max-width:640px){
    .slide__description{
        font-size:14px;
        line-height:18px
    }
    .slide__text{
        bottom:100px;
        left:25px;
        right:25px
    }
    .slide__title{
        font-size:35px;
        line-height:40px
    }
}
*{
    user-drag:none!important;
    user-select:none!important;
    -moz-user-select:none!important;
    -webkit-user-drag:none!important;
    -webkit-user-select:none!important;
    -ms-user-select:none!important;
    padding:0;
    margin:0;
    cursor:none!important
}
body,html{
    overflow-x:hidden
}
#flickering,body{
    overflow:hidden!important
}
body{
    cursor:none!important;
    height:100%;
    width:100%
}
#intro{
    left:0;
    width:100vw
}
button{
    border:0
}
#socialNetworks{
    display:block;
    clear:both;
    width:calc(100% - 200px);
    text-align:left;
    overflow:auto;
    margin-left:100px;
    margin-right:100px;
    margin-bottom:80px
}
#socialNetworks li{
    display:inline-block;
    margin-right:10px;
    margin-left:10px;
    margin-bottom:20px
}
#socialNetworks li a{
    width:50px;
    height:50px;
    border-radius:100%;
    text-align:center;
    line-height:50px;
    -webkit-box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    transition:all .2s
}
#socialNetworks li a:hover{
    -o-box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    -webkit-box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    -moz-box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    -o-transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -ms-transition:all .2s linear;
    transition:all .2s
}
.fa{
    font-size:17px!important
}
.fa-behance{
    background-color:#0057ff
}
.fa-dribbble{
    background-color:#ea4c89
}
.fa-facebook{
    background-color:#3b5998
}
.fa-instagram{
    background-color:#ef622e
}
.fa-linkedin{
    background-color:#0073b1
}
.fa-at{
    background-color:#ff9a00;
    display:none!important
}
#close,#hamburger,#projectGrid li a div{
    background-color:#fff
}
#hamburger{
    right:50px;
    z-index:5;
    box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    transition:all .2s linear;
    border-radius:100%;
    background-image:url(../img/list.svg)
}
#close,#hamburger:hover{
    -o-transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -ms-transition:all .2s linear;
    border-radius:100%;
    transition:all .2s linear
}
#hamburger:hover{
    -o-box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    -webkit-box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    -moz-box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    background-image:url(../img/list_white.svg)
}
#close,#skipIntroduction{
    -o-box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    -moz-box-shadow:0 3px 6px 0 rgba(0,0,0,.35)
}
#close{
    right:50px;
    z-index:15;
    -webkit-box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    background-image:url(../img/cross.svg)
}
#projectGrid li,.menuOpen{
    background-position:center center;
    background-size:cover
}
#close:hover{
    -o-box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    -webkit-box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    -moz-box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    box-shadow:0 6px 12px 0 rgba(0,0,0,.25);
    -o-transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -ms-transition:all .2s linear;
    transition:all .2s linear;
    border-radius:100%;
    background-image:url(../img/cross_white.svg)
}
#menu{
    width:100%;
    right:0;
    display:none
}
.menuOpen{
    background-image:url(../img/glitcheffect.gif);
    display:block!important
}
#menuContainer{
    width:calc(100% - 40px);
    height:calc(100vh - 40px);
    margin:20px;
    position:relative;
    display:none
}
#menuContents{
    height:100%;
    width:calc(100% + 50px);
    left:0;
    top:0;
    overflow:scroll
}
#menuContainer h1{
    font-size:100px;
    margin-left:100px;
    margin-top:100px;
    float:left;
    max-width:calc(50% - 150px);
    line-height:90px;
    margin-right:50px
}
#menuContainer article{
    float:right;
    margin-top:100px;
    margin-right:150px;
    margin-bottom:50px;
    max-width:calc(50% - 150px)
}
#menuContainer article p{
    font-size:16px;
    color:#fff;
    line-height:20px;
    width:100%;
    height:auto;
    margin-bottom:40px
}
#av-1,#av-2,#projectGrid li a span{
    font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
    font-style:normal;
    font-variant:normal;
    color:#2f5;
    font-weight:500
}
#projectGrid{
    width:calc(100% - 250px);
    margin-left:100px;
    list-style:none!important;
    z-index:0;
    display:block;
    clear:both
}
#projectGrid li{
    float:left;
    list-style:none!important;
    width:33.3334%;
    height:280px
}
#projectList,#projectList li{
    list-style:none;
    position:relative;
    margin-top:0
}
#projectGrid li a{
    display:block;
    height:100%;
    position:relative;
    overflow:hidden
}
#projectGrid li:last-of-type{
    margin-bottom:50px
}
#LIambitious{
    background-image:url(../img/projects/adictic.jpg)
}
#LIspaintech{
    background-image:url(../img/projects/spaintechco.jpg)
}
#LIsimplico{
    background-image:url(../img/projects/ringbell.jpg)
}
#LIbrabantsdagblad{
    background-image:url(../img/projects/masar.jpg)
}
#LIcampus{
    background-image:url(../img/projects/iesede.jpg)
}
#LIfontshop{
    background-image:url(../img/projects/olo.jpg)
}
#LIawwwards{
    background-image:url(../img/projects/pocket.jpg)
}
#LIhonderdeneenbranding{
    background-image:url(../img/101-branding.jpg)
}
#LIconsilium{
    background-image:url(../img/consilium.jpg)
}
#LImcdonalds{
    background-image:url(../img/mcdonalds.jpg)
}
#LIliquidlady{
    background-image:url(../img/liquid-lady.jpg)
}
#LIcookassistant{
    background-image:url(../img/cook-assistant.jpg)
}
#av-1,#av-2{
    top:30px;
    left:30px;
    font-size:60px;
    z-index:12;
    display:none
}
#projectGrid li a span{
    font-size:30px;
    line-height:26.4px;
    padding:20px;
    display:block
}
.cv,.viewOnBehance{
    border-radius:50px;
    font-size:14px;
    z-index:1
}
#projectGrid li a div{
    width:100%;
    padding:25px 30px;
    color:#000;
    position:absolute;
    left:0;
    bottom:-200px;
    font-weight:500;
    font-family:Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace
}
.cv,.viewOnBehance{
    width:auto;
    padding-left:65px;
    padding-right:35px;
    line-height:50px
}
#projectGrid li a div b{
    font-weight:800;
    display:block;
    font-family:'Source Sans Pro',sans-serif!important
}
#projectList li,.cv,.linkToWebsite,.viewOnBehance{
    display:inline-block
}
#projectList li p,.cv,.viewOnBehance,.viewOnBehance:hover{
    font-family:Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace!important
}
.projectOut{
    background-image:url(../img/glitcheffect-tv-2.gif);
    background-size:cover
}
.viewOnBehance{
    background-color:#004DDD;
    background-image:url(../img/behance.svg);
    background-size:20px;
    background-position:top 15px left 30px
}
#glitchGif,.linkToWebsite{
    background-position:center center
}
.viewOnBehance:hover{
    background-color:#333
}
.cv,.linkToWebsite{
    background-color:#fff
}
#cursor,#headerBar,.cv:hover,.linkToWebsite:hover{
    background-color:#004DDE
}
.linkToWebsite{
    border-radius:50px;
    margin-left:20px;
    background-image:url(../img/link.svg);
    z-index:1
}
.linkToWebsite:hover{
    background-image:url(../img/link_white.svg)
}
.cv{
    background-image:url(../img/v-card.svg);
    background-size:26px;
    background-position:top 12px left 24px;
    color:#000;
    margin-left:20px
}
#glitchGif,#mailTo-Tv,#screen{
    background-size:cover
}
#mailTo-Tv,#responsiveMail,#screen{
    display:none
}
#intro h1 b,#projectList li p b,#typewriter p span,canvas{
    display:block
}
.cv:hover{
    background-image:url(../img/v-card_white.svg)
}
#mailTo-Tv{
    bottom:-40px;
    right:50px;
    height:590px;
    width:375px;
    background-image:url(../img/glitcheffect-tv.png);
    z-index:12;
    pointer-events:none!important
}
#screen{
    width:290px;
    height:198px;
    bottom:0;
    right:120px;
    z-index:11;
    background-image:url(../img/glitcheffect-tv-still.png),url(../img/glitcheffect-tv.gif)
}
#screen:hover{
    background-image:url(../img/glitcheffect-tv.gif)
}
#cursor{
    width:15px;
    height:15px;
    margin-top:-7.5px;
    margin-left:-7.5px;
    z-index:999999;
    pointer-events:none!important;
    opacity:.9;
    border-radius:100%;
    -o-transition:width .4s,height .4s,margin .4s;
    -moz-transition:width .4s,height .4s,margin .4s;
    -webkit-transition:width .4s,height .4s,margin .4s;
    transition:width .4s,height .4s,margin .4s
}
.hideCursor{
    -o-transition:width .4s,height .4s,margin .4s;
    -moz-transition:width .4s,height .4s,margin .4s;
    -webkit-transition:width .4s,height .4s,margin .4s;
    transition:width .4s,height .4s,margin .4s;
    width:0!important;
    height:0!important
}
#projectList li,.active{
    -o-transition:all .4s linear;
    -webkit-transition:all .4s linear;
    -ms-transition:all .4s linear;
    transition:all .4s linear
}
#headerBar,#introBar{
    height:5px;
    z-index:5;
    position:fixed;
    top:0
}
#flickering,#glitchGif{
    width:100%;
    height:100vh
}
#introBar{
    width:100%;
    background-color:#000
}
#intro article{
    bottom:100px;
    left:120px;
    height:auto;
    max-width:1100px;
    width:calc(100% - 240px)
}
#intro h1{
    font-size:40px;
    line-height:45px;
    color:#fff;
    font-weight:600
}
#intro h1 b{
    font-weight:900;
    font-size:60px
}
#headerBar{
    width:100%;
    left:0
}
#bottomNav{
    bottom:0;
    right:0;
    width:40%;
    height:150px;
    background:#151515;
    z-index:5
}
#Chevron_small_left,#Chevron_small_right{
    fill:#fff!important;
    height:25px;
    width:auto
}
#projectList{
    float:left;
    width:calc(100% - 40px);
    height:170px;
    overflow-x:scroll
}
#projectList li{
    padding:0 50px;
    height:150px;
    margin-left:-3px;
    border:0;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.active{
    background-color:#000!important
}
#projectList li:hover{
    background-color:#222;
    -o-transition:all .4s linear;
    -webkit-transition:all .4s linear;
    -ms-transition:all .4s linear;
    transition:all .4s linear
}
#projectList li span{
    margin-top:30px;
    padding-bottom:15px;
    margin-bottom:15px;
    width:50px;
    border-bottom:2px solid #004DDE;
    display:block;
    font-size:16px;
    font-weight:900
}
#projectList li p{
    font-weight:300;
    font-size:14px
}
#projectList li p b{
    clear:both;
    font-weight:600;
    font-family:'Source Sans Pro',sans-serif
}
canvas{
    float:right
}
#typewriter{
    font-size:16px;
    margin:0;
    font-family:Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
    color:#fff!important
}
.typer:after{
    color:#fff;
    content:"|";
    animation:blink 1s linear infinite alternate
}
@-webkit-keyframes blink{
    0%,100%,20%,61%{
        opacity:0
    }
    21%,60%{
        opacity:1
    }
}
@-moz-keyframes blink{
    0%,100%,20%,61%{
        opacity:0
    }
    21%,60%{
        opacity:1
    }
}
@keyframes blink{
    0%,100%,20%,61%{
        opacity:0
    }
    21%,60%{
        opacity:1
    }
}
.action{
    opacity:.6
}
.good{
    color:#004DDE;
    margin-bottom:20px
}
.goodxx{
    margin-bottom:20px
}
.goodx{
    color:#004DDE;
}
#skipIntroduction{
    width:auto;
    padding:0 30px;
    height:50px;
    position:fixed!important;
    background-color:#222!important;
    -webkit-box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    box-shadow:0 3px 6px 0 rgba(0,0,0,.35);
    -o-transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -ms-transition:all .2s linear;
    transition:all .2s linear;
    color:#fff;
    font-family:Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace!important;
    border-radius:none!important;
    bottom:-100px;
    font-size:14px
}
#glitchGif{
    z-index:99;
    top:0;
    left:0;
    pointer-events:none!important;
    background-image:url(../img/glitcheffect.gif)
}
.number{
    font-weight:600;
    font-size:35px;
    margin-bottom:25px
}
.number span{
    font-size:16px;
    top:-10px;
    position:relative
}
#flickering,#flickering::before{
    content:" ";
    display:block;
    top:0;
    left:0;
    pointer-events:none
}
#flickering{
    position:fixed;
    z-index:99999;
    background:rgba(31,31,31,.02);
    opacity:.2;
    user-drag:none;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-drag:none;
    -webkit-user-select:none;
    -ms-user-select:none
}
#flickering::before{
    position:absolute;
    bottom:0;
    right:0;
    z-index:2;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(31,31,31,0)),color-stop(50%,rgba(6,6,6,.25))),-webkit-gradient(linear,left top,right top,from(rgba(255,0,0,.06)),color-stop(rgba(0,255,0,.02)),to(rgba(0,0,255,.06)));
    background:linear-gradient(rgba(31,31,31,0) 50%,rgba(6,6,6,.25) 50%),linear-gradient(90deg,rgba(255,0,0,.06),rgba(0,255,0,.02),rgba(0,0,255,.06));
    background-size:100% 2px,3px 100%
}
@-webkit-keyframes flicker{
    0%,15%,85%{
        opacity:.05
    }
    30%,5%{
        opacity:.75
    }
    10%,20%,50%,65%{
        opacity:.1
    }
    25%{
        opacity:.2
    }
    35%,55%,60%{
        opacity:.12
    }
    40%,70%,75%{
        opacity:.15
    }
    45%{
        opacity:.01
    }
    100%,80%,90%{
        opacity:.06
    }
    95%{
        opacity:.075
    }
}
@keyframes flicker{
    0%,15%,85%{
        opacity:.05
    }
    30%,5%{
        opacity:.75
    }
    10%,20%,50%,65%{
        opacity:.1
    }
    25%{
        opacity:.2
    }
    35%,55%,60%{
        opacity:.12
    }
    40%,70%,75%{
        opacity:.15
    }
    45%{
        opacity:.01
    }
    100%,80%,90%{
        opacity:.06
    }
    95%{
        opacity:.075
    }
}
@media screen and (max-width:1260px){
    #menuContainer h1{
        font-size:70px;
        max-width:calc(40% - 150px);
        line-height:60px;
        margin-bottom:40px
    }
    #menuContainer article{
        max-width:calc(60% - 150px)
    }
    #intro article{
        bottom:60px
    }
    #cookieAlert{
        padding:0 60px
    }
}
@media screen and (max-width:1125px){
    #menuContainer h1{
        font-size:7.5vw;
        max-width:calc(100% - 150px);
        line-height:auto
    }
    #menuContainer article{
        max-width:calc(100% - 250px);
        float:left;
        margin-left:100px;
        margin-top:0
    }
    #projectGrid li{
        width:50%
    }
    #socialNetworks li a{
        width:35px;
        height:35px;
        line-height:35px
    }
}
@media screen and (max-width:1040px){
    #bottomNav{
        width:100%;
        height:150px
    }
}
@media screen and (max-width:800px){
    #mailTo-Tv,#projectList,#screen{
        display:none!important
    }
    #menuContainer article,#menuContainer h1{
        margin-right:50px;
        margin-left:50px
    }
    br{
        display:none
    }
    #bottomNav{
        width:100%;
        height:50px
    }
    #projectGrid li{
        width:100%;
        margin-bottom:40px
    }
    .viewOnBehance{
        width:auto
    }
    #menuContainer article{
        max-width:calc(100% - 150px)
    }
    #projectGrid{
        width:calc(100% - 150px);
        margin-left:50px
    }
    #projectGrid li a div{
        bottom:0!important;
        padding:12.5px 15px
    }
    #intro article{
        bottom:100px;
        left:50px;
        width:calc(100% - 100px)
    }
    #Chevron_small_left,#Chevron_small_right{
        width:30px
    }
    #socialNetworks li a{
        width:50px;
        height:50px;
        line-height:50px
    }
    #socialNetworks{
        text-align:center;
        margin-left:0;
        margin-right:0;
        width:calc(100% - 50px)
    }
    .fa-at{
        display:inline-block!important
    }
}
@media screen and (max-width:640px){
    #projectGrid li:last-of-type,#responsiveMail{
        margin-bottom:40px
    }
    #menuContainer article a{
        width:100%!important
    }
    .cv{
        margin-left:0;
        margin-top:20px
    }
    #menuContainer{
        width:calc(100% - 20px);
        height:calc(100vh - 20px);
        margin:10px
    }
    #menuContainer h1{
        max-width:calc(100% - 50px);
        margin:50px 25px 25px
    }
    #menuContainer article{
        margin-left:25px;
        margin-right:25px;
        max-width:calc(100% - 100px)
    }
    #close,#hamburger{
        top:25px;
        right:25px
    }
    #projectGrid{
        width:calc(100% - 100px);
        margin-left:25px
    }
    #typewriter{
        font-size:14px;
        line-height:18px
    }
    #intro article{
        left:25px;
        right:25px;
        width:calc(100% - 50px)
    }
    .projectOut{
        background-image:none
    }
}
.viewInvision{
        background-image: none !important;
        padding-left: 35px !important;
}
/* Localized */