/* http://meyerweb.com/eric/tools/css/reset/     v2.0 | 20110126    License: none (public domain) */  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body *{box-sizing: border-box}

html{ scroll-behavior: smooth }

body{
    background: #111;

    font-size: 62.5%;
    font-family: sans-serif;
    color: #FFF;
}

body[data-status='project-view']{
    overflow: hidden;
}

.screen-reader-only{
    position: fixed;
    top: -100px; left: 100px;
    width: 0px; height: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: .1em;
}

.content{
    display: block;
    position: relative;
    z-index: 99;
    /* height: 2000px; */
    width: 100%;
}

.mobile-only{ display: block }
@media (min-width: 800px ){ .mobile-only{ display: none }}

.dotcom-only{ display: none }
@media ( min-width: 800px ){ .dotcom-only{ display: block } }


body[data-state='loading']{
  height: 100vh;
  overflow: hidden;
}

.loading-text{
  position: fixed; top: 50vh;
  font-size: 4em;
  width: 100%; text-align: center;
}

body[data-state='loading'] section:not(.hero){ display: none }

body[data-state='loaded'] .loading-text{ display: none }

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  BACKGROUND                                                             ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#background{
    z-index: 0;
    position: fixed;
    top: 0px; left: 0px;
    width: 100%; height: 100%;
}

#background hr{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: .3;
    height: .5px;
    border: none;
    background: #FFF;
}

#background hr:first-of-type{ 
    opacity: .15; 
    top: 200px;
    height: 2px;
}

#static-effect{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: .05;
}

#noise-effect{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: .2;
}

#static-effect .static,
#noise-effect .noise{
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
}

#static-effect .static[data-state='hide'],#noise-effect .noise[data-state='hide']{ opacity: 0 }
#static-effect .static[data-state='show'], #noise-effect .noise[data-state='show']{ opacity: 1 }

#static-effect .static[data-number='1']{ background-image: url('../MEDIA/EFFECTS/static1.png') }
#static-effect .static[data-number='2']{ background-image: url('../MEDIA/EFFECTS/static2.png') }
#static-effect .static[data-number='3']{ background-image: url('../MEDIA/EFFECTS/static3.png') }
#static-effect .static[data-number='4']{ background-image: url('../MEDIA/EFFECTS/static4.png') }
#static-effect .static[data-number='5']{ background-image: url('../MEDIA/EFFECTS/static5.png') }
#static-effect .static[data-number='6']{ background-image: url('../MEDIA/EFFECTS/static6.png') }

#noise-effect .noise[data-number='1']{ background-image: url('../MEDIA/EFFECTS/dmg1.png') }
#noise-effect .noise[data-number='2']{ background-image: url('../MEDIA/EFFECTS/dmg2.png') }
#noise-effect .noise[data-number='3']{ background-image: url('../MEDIA/EFFECTS/dmg3.png') }
#noise-effect .noise[data-number='4']{ background-image: url('../MEDIA/EFFECTS/dmg4.png') }
#noise-effect .noise[data-number='5']{ background-image: url('../MEDIA/EFFECTS/dmg5.png') }

#background > * { transition: opacity .5s linear }

body:not([data-status="hero"]) #background > *{ opacity: .3 }
body:not([data-status="hero"]) #background #static-effect{ opacity: .07 }
body:not([data-status="hero"]) #background #noise-effect{ opacity: .1 }

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  NAVIGATION                                                             ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

nav{
    position: fixed;
        top: 0px;
        left: 0px;
    display: flex;
        justify-content: space-between;
    width: 100%;
    z-index: 999;

    font-family: 'Share Tech Mono', monospace;
    text-transform: uppercase;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  TOP NAVIGATION                                                         ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

nav.top-nav ul{
    display: none;
}

nav.top-nav ul[data-status='active']{
    display: flex;
}

nav.top-nav .right ul li{
    position: relative;
    margin-left: 4px;
    font-size: 1.4em;
    letter-spacing: 1px;
    padding: 8px;
}

nav.top-nav .right ul li a{
    display: block;
    padding: 8px 8px 6px 8px;
    background: #111;

    color: #FFF;
    text-decoration: none;
}

nav.top-nav .right ul li a:hover{
    background: #FFF;
    color: #111;

    box-shadow: 1px 1px 0 0 red, -1px -1px 0 0 green, 1px -1px 0 0 blue;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  SIDE NAVIGATION                                                        ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

nav.side-nav{
    display: flex;
        flex-direction: column;
        justify-content: center;
    width: 150px;
    height: 100%;
}

nav.side-nav[data-showing='no']{
    display: none;
}

nav.side-nav ul{
    position: relative;
    padding-left: 48px;
}

nav.side-nav ul::before{
    content: '';
    position: absolute;
        top: -25px;
        left: 25px;
    width: 64px;
    height: 40px;
    border-left: 1px solid #FFF;
    border-top: 1px solid #FFF;
}

nav.side-nav ul::after{
    content: 'Navigation';
    position: absolute;
    top: -32px;
    left: 90px;
    border-left: 1px solid #FFF;
    padding: 3px 0 2px 8px;
    
    font-size: .9em;
    color: #FFF;
    letter-spacing: 2px;
}

nav.side-nav ul li{
    padding-left: 8px;
    margin-bottom: 16px;
}

nav.side-nav ul li a{
    position: relative;
    color: #FFF;
    text-decoration: none;
    font-size: 1.25em;
    letter-spacing: 1px;
    padding: 2px;
}

nav.side-nav ul li a:hover{
    background: #FFF;
    color: #111;
    box-shadow: 1px 1px 0 0 red, -1px -1px 0 0 green, 1px -1px 0 0 blue;
}

nav.side-nav ul li a::before,
nav.side-nav ul li a::after{
    content: '';
    position: absolute;
    top: 4px;
    left: -16px;
    width: 4px;
    height: 4px;
    border: 1px solid #FFF;
}

nav.side-nav ul li a::after{ 
    display: none;
    top: 3px;
    left: -18px;
    background: #FFF;
}

nav.side-nav ul li[data-status='active'] a::after{
    display: block;
}

@media (max-width: 1200px){
  nav.side-nav{ display: none !important }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  SECTIONS                                                               ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#white-logo{ fill: #FFF }

section{
    position: relative;
    width: 100%;
    font-family: 'Share Tech Mono', monospace;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  HERO                                                                   ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section.hero{
  display: flex;
    flex-direction: column;
    justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: hidden; /* Needed to prevent X Scroll */
}

section.hero .hero-logo{
  position: relative;  
  display: block;
    width: 100%; 
      max-width: 1450px;
    margin: 0 auto;
      margin-top: -6vw;
}

body[data-state='loading'] section.hero .hero-logo,
body[data-state='loading'] section.hero h2{ display: none }

section.hero .hero-logo img{
    position: absolute;
    width: 100%;
}

section.hero .hero-logo img[data-state='hide'] { opacity: 0 }
section.hero .hero-logo img[data-state='show'] { opacity: 1 }

section.hero .hero-logo img.red-logo,
section.hero .hero-logo img.green-logo,
section.hero .hero-logo img.blue-logo{
    opacity: .4;
}

section.hero .hero-logo img.red-logo{ transform: translate(-2px, -2px) }
section.hero .hero-logo img.blue-logo{ transform: translate(2px, -2px) }
section.hero .hero-logo img.green-logo{ transform: translate(-2px, 2px) }

section.hero h2{
    width: 100%;
    margin-top: 26vw;
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 5px;
    text-align: center;
    font-family: 'Share Tech Mono', monospace;
}

section.hero h2 span{
    position: relative;
    font-size: 1.2em;
    text-transform: lowercase;
    letter-spacing: 0;
}

section.hero .scroll-arrow{
    position: absolute;
    bottom: 40px;
    left: calc(50% - 12.5px);
    width: 25px; height: 25px;
    border-bottom: 3px solid #FFF;
    border-right: 3px solid #FFF;
}

@media (min-width: 800px){
  section.hero {
    height: 100vh;
  }
}

@media (min-width: 1475px){
  section.hero h2{
    margin-top: 362px;
  }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  CONTENT SECTIONS                                                       ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section:not(.hero){
    padding: 8px;
}

section:not(.hero) h2{
    position: relative;
    margin-bottom: 16px;

    font-size: 6em;
    letter-spacing: -5px;
    text-shadow: 1px 1px 0  red, -1px -1px 0  green, 1px -1px 0  blue;
}

section:not(.hero) p{
    font-size: 1.5em;
    line-height: 1.4;
    max-width: 650px;
}

section:not(.hero) p + p{
    margin-top: 16px;
}

section.split{
    display: flex;
      flex-wrap: wrap;
}
section.split .right{
    width: 100%;
    padding-top: 32px;
}
section.split .left{
    width: 100%;
}

@media (min-width: 550px){
  section:not(.hero) p{
    padding-left: 4px;
    font-size: 1.8em;
  }
}

@media (min-width: 800px){
  section:not(.hero){
    padding: 48px;
  }

  section:not(.hero) h2{
    font-size: 9em;
  }

  section.split .left,
  section.split .right{
    width: 50%;
  }
}

@media (min-width: 1200px){
  section:not(.hero){
    padding: 80px;
    padding-left: 200px;
  }

  section.split .right{ padding-top: 175px }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  ABOUT                                                                  ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#about .left{
    padding-top: 32px;
}

#about .left .img-placeholder{
    width: 100%;
    height: 500px;
    border: 1px solid #FFF;

    background: url(../MEDIA/me.png);
      background-position: top center;
}

#about h2::before{
    position: absolute;
    top: 30px;
    left: -20px;
    width: 20px;
    height: 20px;
    border-left: 1px solid #FFF;
}

#about h2::after{
    position: absolute;
    top: 40px;
    left: -35%;
    width:32.5%;
    height: 1px;
    border-top: 1px solid #FFF;
}

#about a{
  display: inline-block;
  margin-top: 16px;
  font-size: 1.5em;
  color: #FFF;
}

@media (min-width: 800px){
  #about h2{ font-size: 7em }
  #about .left{
    padding-right: 32px
  }

  #about a{ font-size: 1.75em }
}

@media (min-width: 1500px){
  #about h2{ font-size: 9em }
  #about h2::before,#about h2::after{ content: '' }
  #about .left .img-placeholder{ width: 50%; margin-left: 15% }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  PROJECTS                                                               ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#projects{
    margin: 0 auto;
    text-align: left;
    padding-top: 64px;
}

#projects ul.projects-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 8px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

#projects ul.projects-list li{
    position: relative;
    width: calc(50% - 8px);
    margin-bottom: 8px;
}

body[data-status='project-view'] #projects .carousel-content{
    transform: translateX(-50%);
}

#projects ul.projects-list li button{
    position: relative;
    width: 100%; height: 100%;
    border: none;
    background: none;
    overflow: hidden;
}

#projects ul.projects-list li button:hover{
    cursor: pointer;
    border: 1px solid #FFF;
}

#projects ul.projects-list li button:hover img{
    animation: hoverJitter 2s linear 0s infinite;
}

#projects ul.projects-list li button:hover::after{
    position: absolute;
    content: 'Project Name';
    top: 156px;
    left: -16px;
    width: 100%;
    padding: 16px;
    background: #FFF;
    
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.8em;
    letter-spacing: 2px;
    text-transform: uppercase;
    -webkit-text-stroke: 1px #111;
}

#projects ul.projects-list li[data-value='krill-meat'] button:hover::after{ content: 'Krill Meat' }
#projects ul.projects-list li[data-value='absorb'] button:hover::after{ content: 'Absorb' }
#projects ul.projects-list li[data-value='remix'] button:hover::after{ content: 'Impact' }
#projects ul.projects-list li[data-value='servello'] button:hover::after{ content: 'Servello' }
#projects ul.projects-list li[data-value='attagirl'] button:hover::after{ content: 'Attagirl' }
#projects ul.projects-list li[data-value='outlaw'] button:hover::after{ content: 'Outlaw Stitches' }

#projects ul.projects-list li img{
    width: 100%;
    z-index: 99;
}

@media (min-width: 800px){
  #projects{
    text-align: center;
    padding-top: 80px;
    padding-left: 64px;
    padding-right: 64px;
  }

  #projects ul.projects-list{
    padding-top: 32px;
  }

  #projects ul.projects-list li{
    width: calc(33.333333% - 48px);
  }
}

@media (min-width: 1200px){
  #projects{
    padding-left: 200px;
    padding-right: 64px; 
  }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  PROCESS                                                                ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#projects .project-process{ padding-top: 64px; height: 0px }
body[data-status='project-view'] #projects .project-process{ padding-top: 0px }

#projects .project-process .process{
    display: flex;
      flex-wrap: wrap;
    width: 100%;
    height: 100%;
}

#projects .project-process .process h3{
    margin-top: 16px;
    font-size: 6.5em;
    text-align: left;
    text-shadow: 1px 1px 0 red, -1px 1px 0 green, -1px -1px 0 blue;
}

#projects .project-process .process h4{
    font-size: 4em;
    margin-top: 32px;
    text-align: left;
}

#projects .project-process .process p{
    text-align: left;
    margin-top: 24px;
}

#projects .project-process .process h3 + p{ margin-top: 16px }
#projects .project-process .process h4 + p{ margin-top: 16px }

#projects .project-process .process[data-status='inactive']{ display: none; }

#projects .project-process .process button.project-return{
  position: relative;
  background: none;
  color: #FFF;
  border: none;
  text-align: left;
  margin-bottom: 16px;
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.5em;
  padding-left: 32px;
  transform: translate(4px);
}

#projects .project-process .process button.project-return::before{
  content: '';
  position: absolute;
  top: 8px; left: 0px;
  width: 16px;
  height: 1px;
  background :#FFF;
}

#projects .project-process .process button.project-return::after{
  content: '';
  position: absolute;
  top: 4px; left: 0px;
  width: 8px;
  height: 8px;
  border-left: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
  transform: rotate(45deg);
}

@media (min-width: 800px){
  #projects .project-process{ padding-top: 0px }

  #projects .project-process .process h3{ margin-top:0 }
  #projects .project-process .process h3 + p{ margin-top: 32px }
}

@media (min-width: 1000px){ 
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  PROCESS - LEFT                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#projects .project-process .process .left{
    position: relative;
    width: 100%;
    padding-right: 0px;
    padding-left: 16px;
}

body[data-status='project-view'] #projects .project-process .process .left{
  padding-left: 0px;
}

#projects .project-process .process .left ul{
    display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    width: 100%;
    margin-top: 16px;
    text-align: right;
    font-size: 1.5em;
}

#projects .project-process .process .left ul li{
    position: relative;
    padding-left: 32px;
    margin-top: 8px;
}

#projects .project-process .process .left ul li:nth-last-child(-n+2){
    width: 100%;
    margin-top: 16px;
}

#projects .project-process .process .left ul li::before{
    content: '+';
    position: absolute;
    top: 0px; left: 12px;
    font-size: 1em;
    color: #FFF;
}

#projects .project-process .process .left ul li:first-of-type::before,
#projects .project-process .process .left ul li:nth-last-child(-n+2)::before{
    content: '';
}

#projects .project-process .process .left ul li:nth-last-child(-n+2) a{
    color: #FFF;
}

#projects .project-process .process .left img{
    width: 100%;
}

@media (min-width: 800px){
  #projects .project-process .process .left{
    width: 30%;
    padding-right: 64px;
    padding-left: 0px;
  }

  #projects .project-process .process .left::before{
    position: absolute;
    top: 180px; right: 24px;
    content: '';
    width: 64px;
    height: 400px;
    border-right: 1px solid #FFF;
    border-top: 1px solid #FFF;
  }

  #projects .project-process .process .left img{
    width: 100%;
  }

  #projects .project-process .process .left ul{
    width: 100%;
  }

  #projects .project-process .process .left ul a.website{
    font-size: 2em;
  }
}

@media (min-width: 1200px){
  #projects .project-process .process .left img{
    width: 90%;
    margin-left: 10%;
  }
  #projects .project-process .process .left ul{
    width: 90%;
    margin-left: 10%;
  }
}

@media (min-width: 1325px){
  #projects{ padding-left: 280px; padding-right: 80px }
  #projects .project-process .process button.project-return{ transform: translate(-32px) }
  #projects .project-process .process .left img{
    width: 80%;
    margin-left: 20%;
  }
  #projects .project-process .process .left ul{
    width: 80%;
    margin-left: 20%;
  }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  PROCESS - RIGHT                                                        ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#projects .project-process .process .right{
    text-align: left;
    width: 100%;
    padding-right: 8px;
}

#projects .project-process .right{
    overflow-y: scroll;
    height: 100%;
    padding-top: 32px;
    padding-bottom: 32px;
}

#projects .project-process .right::-webkit-scrollbar{
    border: 1px solid #FFF;
    width: 5px;
}
#projects .project-process .right::-webkit-scrollbar-button{
    display: none;
}
#projects .project-process .right::-webkit-scrollbar{
    background: rgba(0,0,0,0);
}
#projects .project-process .right::-webkit-scrollbar-thumb{
    background: #FFF;
}

#projects .project-process .right img{
    text-align: left;
    width: 100%;
}

#projects .project-process .right img.mobile-img{
  padding-right: 8px;
}

#projects iframe{
    width: calc(100% - 32px);
    margin-top: 32px;
}

#projects .project-process .right a{
  display: inline-block;
  margin-top: 16px;
  font-size: 1.75em;
  color: #FFF;
}

@media (min-width: 800px ){
  #projects .project-process .process .right{
     width: 70%;
     padding-left: 16px;
     padding-top: 152px;
     padding-bottom: 0px;
  }
}

#projects .project-process .right .wireframe-wrap{
  display: flex;
  width: 100%;
  margin-top: 32px;
  max-width: 750px;
}

#projects .project-process .right .wireframe-wrap.mobile img{
  width: 33.3333333%;
}

#projects .project-process .right h4{ 
  position: relative;
}

#projects .project-process .right h4.type{ display: inline-block }

#projects .project-process .right h4.type::after{
  content: '';
  position: absolute;
  top: 21px; right: -100px;
  width: 80px;
  height: 42px;
  border-right: 1px solid #FFF;
  border-top: 1px solid #FFF;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  PROCESS - RIGHT - IMAGES                                               ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#projects .project-process .right h4 + .img-row{ margin-top: 32px }

#projects .project-process .right .img-row{
  display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  max-width: 800px;
  margin-bottom: 12px;
}

#projects .project-process .right .img-row .full{ width: 100%; }
#projects .project-process .right .img-row .full.type-spec{ max-width: 600px; }

#projects .project-process .right .img-row .half{ 
  width: 100%;
  margin-bottom: 12px;
}

#projects .project-process .right .img-row .half:last-of-type{ margin-bottom: 0px }

#projects .project-process .right .img-row .half:last-of-type{ margin-right: 0 }

#projects .project-process .right .img-row .third{
  width: calc(33.33% - 8px);
  margin-right: 12px;
}
#projects .project-process .right .img-row .third:last-of-type{ margin-right: 0 }

#projects .project-process .right .img-row .two-third{ width: calc(66.66% - 8px)}

@media (min-width: 650px){
  #projects .project-process .right .img-row{ flex-wrap: nowrap }
  #projects .project-process .right .img-row .half{ 
    width: calc(50% - 8px);
    margin-right: 12px;
    margin-bottom: 0;
  }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  PROCESS - RIGHT - COLOR BLOCKS                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#projects .project-process .right ul.color-swatches{
  display: flex;
    flex-wrap: wrap;
  margin-top: 32px;
  max-width: 800px;
}

#projects .project-process .right ul.color-swatches li{
  border: 4px solid #FFF;
  width: calc(50% - 8px);
  margin-right: 8px;
  margin-bottom: 8px;
}

#projects .project-process .right ul.color-swatches li .color-block{
  width: calc(100% - 16px);
  padding-top: 50%;
  margin: 8px;
  background: green;
}

#projects .project-process .right ul.color-swatches li p{
  text-transform: uppercase;
  width: 100%;
  background: #FFF;
  color: #111;
  text-align: center;
  padding: 8px;
  margin-top: 0px;
  font-size: 2em;
}

#projects .project-process .right ul.color-swatches li p span{
  width: 100%;
  display: block;
}

#projects .project-process .right ul.color-swatches li p .name{
  font-size: .8em;
}

#projects .project-process .process[value='attagirl'] ul.color-swatches li:first-of-type .color-block{ background: #F2C2CF }
#projects .project-process .process[value='attagirl'] ul.color-swatches li:nth-of-type(2) .color-block{ background: #F25C84 }
#projects .project-process .process[value='attagirl'] ul.color-swatches li:nth-of-type(3) .color-block{ background: #AF0000 }
#projects .project-process .process[value='attagirl'] ul.color-swatches li:nth-of-type(4) .color-block{ background: #010440 }

#projects .project-process .process[value='absorb'] ul.color-swatches li:first-of-type .color-block{ background: #060606 }
#projects .project-process .process[value='absorb'] ul.color-swatches li:nth-of-type(2) .color-block{ background: #D9D8D3 }

#projects .project-process .process[value='remix'] ul.color-swatches li:first-of-type .color-block{ background: #FFF }
#projects .project-process .process[value='remix'] ul.color-swatches li:nth-of-type(2) .color-block{ background: #000 }
#projects .project-process .process[value='remix'] ul.color-swatches li:nth-of-type(3) .color-block{ background: #FFA20F }
#projects .project-process .process[value='remix'] ul.color-swatches li:nth-of-type(4) .color-block{ background: #72ECFC }

#projects .project-process .process[value='servello'] ul.color-swatches li:first-of-type .color-block{ background: #6B705C }
#projects .project-process .process[value='servello'] ul.color-swatches li:nth-of-type(2) .color-block{ background: #A5A58D }
#projects .project-process .process[value='servello'] ul.color-swatches li:nth-of-type(3) .color-block{ background: #FFE8D6 }
#projects .project-process .process[value='servello'] ul.color-swatches li:nth-of-type(4) .color-block{ background: #DDBEA9 }
#projects .project-process .process[value='servello'] ul.color-swatches li:last-of-type .color-block{ background: #CB997E }

#projects .project-process .process[value='outlaw'] ul.color-swatches li:first-of-type .color-block{ background: #FFFAFA }
#projects .project-process .process[value='outlaw'] ul.color-swatches li:nth-of-type(2) .color-block{ background: #222222 }
#projects .project-process .process[value='outlaw'] ul.color-swatches li:nth-of-type(3) .color-block{ background: #FC4747 }

@media (min-width: 600px){
  #projects .project-process .right ul.color-swatches li{ width: calc(25% - 16px); margin-right: 16px }
  #projects .project-process .right ul.color-swatches li .color-block{ padding-top: 100% }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  PROCESS - RIGHT - CODE BLOCK                                           ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#projects .project-process .right .code-block{
  position: relative;
  max-width: 800px;
  border: 1px solid #FFF;
  margin-top: 32px;
  padding: 48px 32px 32px 32px;

  font-size: 1.5em;
}

#projects .project-process .right .code-block::before{
  position: absolute;
  top: 0px;
  left: 0px;
  background: #FFF;
  color: #111;
  text-transform: uppercase;
  padding: 4px 8px;
}

#projects .project-process .right .code-block[data-type='html']::before{ content: 'HTML' }
#projects .project-process .right .code-block[data-type='css']::before{ content: 'CSS' }
#projects .project-process .right .code-block[data-type='javascript']::before{ content: 'Javascript' }

.code-block .green{ color: #A6E22E }
.code-block .red{ color: #F92672 }
.code-block .blue{ color: #66D9EF }
.code-block .orange{ color: #FD971F }
.code-block .gray{ color: #75715E }
.code-block .yellow{ color: #E6DB74  }
.code-block .purple{ color: #AE81FF }

#projects .code-block p.code-line{ 
  margin-top: 0px;
  margin-bottom: 8px;
  font-size: .75rem ;
}
#projects .code-block p.code-line:last-of-type{ margin-bottom: 0 }
#projects .code-block p.code-line.empty{height: 8px}
#projects .code-block p.code-line.i1{padding-left: 16px}
#projects .code-block p.code-line.i2{padding-left: 32px}
#projects .code-block p.code-line.i3{padding-left: 48px}
#projects .code-block p.code-line.i4{padding-left: 64px}

/* WORK SPECIFIC */
#projects .project-process .right .rubik{
  position: relative;
  font-family: 'Rubik', sans-serif;
  line-height: 1;
}

#projects .project-process .right h4.type + p{
  position: relative;
  display: block;
}

#projects .project-process .right .rubik.black{
  font-size: 8em;
  font-weight: 900;
  margin-top: 32px;
}

#projects .project-process .right .rubik.medium{
  margin-top: 0px;
  margin-bottom: 40px;
  font-weight: 500;
  font-size: 3em;
}

#projects .project-process .right h4.type + p::before{
  position: absolute;
  content: '';
  top: -8px;
  left: -16px;
  width: 75%;
  height: calc(100% + .65em);
  border: 1px solid #FFF;
}

#projects .project-process .process[value='servello'] .img-wrapper.packaging{
  display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  width: calc(100% - 32px);
  max-width: 750px;
  margin-top: 16px;
}

#projects .project-process .process[value='servello'] .img-wrapper.packaging img{
  width: calc(50% - 8px);
    margin: 4px;
  }

#projects .project-process .right .matao{
  font-family: 'Matao', sans-serif;
  font-variant-ligatures: none;
  font-size: 8em;
}

#projects .project-process .right h4.type + p::before{
  position: absolute;
  content: '';
  top: -8px;
  left: -16px;
  width: 75%;
  height: calc(100% + .65em);
  border: 1px solid #FFF;
}

#projects .project-process .right img.application-img{ width: calc(100% - 32px); max-width: 750px; margin-top: 32px; }

#projects .project-process .right .montserrat{
  font-family: 'Montserrat', sans-serif;
  font-size: 3.25em;
  margin-top: -16px;
  margin-bottom: 32px;
  padding-bottom: 16px;
}

.screenshot-wrap{
  display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  width: calc(100% - 24px);
    max-width: 750px;
  margin-top: 16px;
}

#projects .project-process .right .screenshot-wrap img.mobile{ width: calc(33.333% - 8px) }
#projects .project-process .right .screenshot-wrap img.desktop{ width: 100% }

#projects .project-process .right .screenshot-wrap img{ margin: 4px }
#projects .project-process .right .screenshot-wrap img.mobile:last-of-type{ margin-right: 0}

#projects .project-process .right h4.type + .rigeko{ font-size: 8em }
#projects .project-process .right h4.type + .rigeko::before{ height: calc(100% + .9em)}
#projects .project-process .right h4.type + .rigeko + .quicksand{ 
  font-size: 4em;
  margin-top: -8px;
  margin-bottom: 48px;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  SKILLSET                                                               ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#skillset h2{
  margin-bottom: 16px;
}

#skillset a{
  display: inline-block;
  font-size: 2em;
  color: #FFF;
  margin-left: 60px;
  margin-bottom: 32px;
}

#skillset .skills-lists{
  display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  max-width: 1200px;
}

#skillset .skills-lists ul{
  width: calc(50% - 16px);
  margin-bottom: 32px;
}

#skillset .skills-lists ul li{
  font-size: 2em;
  margin-bottom: 8px;
  border-left: 1px solid #FFF;
  padding: 8px;
    padding-left: 16px;
}

#skillset .skills-lists ul li:first-of-type{
  text-transform: uppercase;
  padding-left: 0px;
  border-left: none;
  font-size: 2.25em;
}

@media (min-width: 700px){
  #skillset h2{
    margin-bottom: 64px;
  }

  #skillset .skills-lists{
    padding-left: 32px;
  }
  #skillset .skills-lists ul{
    width: calc(25% - 16px);
    padding-left: 24px;
  }
}

@media (min-width: 1200px){
    #skillset{
      padding-left: 280px;
    }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  CONTACT                                                                ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#contact{
    min-height: 600px !important;
}

#contact h2{
  margin-bottom: 64px;
}

#contact p{
  margin-bottom: 32px;
}

#contact ul li{
  font-size: 3.5em;
  margin-bottom: 24px;
}

#contact ul li a{
  color: #FFF;
}

@media (min-width: 1200px){
  #contact{ padding-left: 280px }
}


footer{
    width: 100%;
    height: 25px;
}

footer p{
    width: 100%;
    font-size: 1.02em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #AAA;
}