/*-------------------------------------------------------

    Baseline

-------------------------------------------------------*/

html {
    scroll-behavior: smooth;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
}

.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
}

.clearfix:after {
    clear: both;
}

body {
    font-family            : 'Heebo', 'Roboto', sans-serif;
    font-size              : 16px;
    background             : #ffffff;
    background-size        : cover;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow               : hidden;
    overflow-y             : scroll;
    position               : absolute;
    width                  : 100%;
    height                 : 100%;
}

body.noscroll {
    overflow-y: hidden;
}

body.notreadyyet {
    opacity: 0;
}

.wrap {
    margin   : 0 auto;
    max-width: 1400px;
    width    : 100%;
    padding  : 30px;
}

.wrap.skinny {
    max-width: 720px;
}

.wrap.skinnyish {
    max-width: 960px;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clearfix:after {
    visibility: hidden;
    display   : block;
    font-size : 0;
    content   : " ";
    clear     : both;
    height    : 0;
}

* html .clearfix {
    zoom: 1;
}

/* IE6 */

*:first-child+html .clearfix {
    zoom: 1;
}

/* IE7 */

.spacer_1 {
    height: 100px;
}

.spacer_2 {
    padding-bottom: 66%;
}

.spacer_3 {
    padding-bottom: 33%;
}

/*-------------------------------------------------------

    DARK THEME

-------------------------------------------------------*/

body.dark {
    background: #000000;
    color     : #FFFFFF;
}

body.dark .nav-item {
    color: #FFFFFF;
}

body.dark .header svg {
    fill: #FFFFFF;
}

body.dark .header path {
    fill: #FFFFFF;
}

body.dark .rwlogo path {
    fill: #FFFFFF;
}

body.dark .rwlogo svg {
    fill: #FFFFFF;
}

body.dark .rwlogo polygon {
    fill: #FFFFFF;
}

body.dark .rwlogo-mobile path {
    fill: #FFFFFF;
}

body.dark .rwlogo-mobile svg {
    fill: #FFFFFF;
}

body.dark .rwlogo-mobile polygon {
    fill: #FFFFFF;
}

body.dark .header .rw-box {
    stroke: #FFFFFF;
}

body.dark .header .rw-letter {
    fill: #FFFFFF;
}

body.dark #footer {
    background: #242424;
}

body.dark .social_links li a {
    color: #FFFFFF;
}

body.dark a.cta-button {
    color : rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

body.dark .up-next a {
    color: #FFFFFF;
}

body.dark .gray {
    opacity: 0.7;
}

.wave_dark {
    display: none;
}

body.dark .wave_dark {
    display: block;
}

body.dark .wave_light {
    display: none;
}

body.dark #scrim {
    background: #000000;
}

body.dark .link span {
    background     : url(../img/ic_open_dark.svg);
    background-size: contain;
}

body.dark .work-experience li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark .project-text a {
    color: #FFFFFF;
}

body.dark .project-item {
    color: #FFFFFF;
}

/*  ------------------------------------------------------------------------

    T Y P O G R A P H Y

    ------------------------------------------------------------------------ */

button {
    background        : 0 0;
    outline           : 0;
    border            : none;
    cursor            : pointer;
    -webkit-appearance: none;
    transition        : color 400ms ease, background-color 400ms ease, border-color 400ms ease;
}

a {
    color          : #4285f4;
    text-decoration: none;
    transition     : color 150ms ease;
}

a,
a:hover,
a:active,
a:focus {
    outline: 0;
}

h1 {
    font-size  : 64px;
    font-weight: 600;
}

h2 {
    font-size    : 48px;
    font-weight  : 600;
    margin-bottom: 0;
}

h2.project-title {
    margin: 0;
}

h3 {
    font-size: 20px;
}

p {
    font-size  : 20px;
    line-height: 1.5;
}

p.subtext {
    font-size     : 14px;
    padding-bottom: 10%;
}

p.italix {
    font-style: italic;
    color     : #807E7E;
    margin-top: 24px;
}

a.cta-button {
    color        : rgba(0, 0, 0, 0.4);
    font-size    : 20px;
    font-weight  : 600;
    border       : 1px solid rgba(0, 0, 0, 0.12);
    padding      : 8px 16px;
    border-radius: 80px;
    display      : inline-block;
    transition   : all 150ms ease;
}

a.cta-button:hover {
    color     : #FFFFFF !important;
    background: #4285f4;
}

.gray {
    opacity: 0.4;
}

/*  ------------------------------------------------------------------------

    C O L U M N S

    ------------------------------------------------------------------------ */

.col {
    padding: 0 16px;
    float  : left;
}

.col-2 {
    width: 16.666%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 20%;
}

.col-3.padded {
    padding-top: 42px;
}

.col-6 {
    width: 50%;
}

.col-9 {
    width: 66.666%;
}

.col-8 {
    width: 75%;
    float: left
}

.col-12 {
    width: 100%;
}

.col.centered-video {
    /* width: 100%;
    height: 100%; */
    text-align: center;
}

.centered-video video {
    width : 600px;
    height: 600px;
}

.video-block {
    display  : block;
    margin   : 0 auto;
    width    : 600px;
    /* height: 600px; */
}

.row:after {
    clear: both;
}

.row:before,
.row:after {
    content: "";
    display: table;
}

.full {
    width: 100%;
}

img.wide-img {
    width: 100%;
}

.centered {
    text-align: center;
}

section {
    padding-top: 60px;
}

.stagger {
    display       : inline-block;
    padding-bottom: 60%;
}

.grid img {
    padding-bottom: 32px;
}

/*  ------------------------------------------------------------------------

    N A V I G A T I O N

    ------------------------------------------------------------------------ */

.header {
    position: fixed;
    height  : 160px;
    width   : 100%;
    z-index : 9999;
}

.header-left {
    float         : left;
    pointer-events: none;
}

.header-left.hidden {
    opacity       : 0;
    pointer-events: none;
}

.header-right {
    float: right;
}

#header-container {
    position: relative;
}

.wrapper {
    padding-left : 7vw;
    padding-right: 7vw;
}

.rwlogo {
    cursor      : pointer;
    /* padding  : 52px; */
    padding-left: 0px;
    padding-top : 52px;
    width       : 130px;
}

.rwlogo-mobile {
    cursor           : pointer;
    /* padding       : 52px; */
    padding-left     : 0px;
    /* padding-top   : 5%; */
    padding-bottom   : 25px;
    width            : 130px;
    margin-left      : auto;
    margin-right     : auto;
}

.nav-item {
    display       : inline-block;
    padding       : 66px 16px;
    font-size     : 20px;
    pointer-events: all;
    cursor        : pointer;
}

a .nav-item {
    color: black;
}

.nav-item svg {
    margin-bottom: -5px;
    width        : 20px;
}

li.null-item {
    pointer-events: none;
}

/*  ------------------------------------------------------------------------

    F O O T E R

    ------------------------------------------------------------------------ */

#footer {
    background : #f5f5f5;
    padding-top: 72px;
}

#footer .wrap {
    padding-bottom: 0;
}

ul.social_links {
    margin : 0;
    padding: 0;
}

.social_links li {
    list-style : none;
    font-size  : 20px;
    cursor     : pointer;
    font-weight: 600;
}

.social_links li a {
    color         : #000;
    transition    : all 150ms;
    display       : inline-block;
    padding-bottom: 24px;
    width         : 100%;
}

.social_links li a:hover {
    padding-left: 8px;
}

.thanks {
    margin     : 0;
    text-align : center;
    font-weight: 600;
}

.thanks a {
    color: #000;
}

.wavey {
    text-align    : center;
    height        : 320px;
    overflow      : hidden;
    position      : relative;
    pointer-events: none;
}

.wavey img {
    margin-bottom: -10px;
    width        : 450px;
    position     : absolute;
    left         : 50%;
    bottom       : 0;
    transform    : translateX(-50%);
}

/*  ------------------------------------------------------------------------

    404

    ------------------------------------------------------------------------ */

#mybad {
    position : fixed;
    left     : 50%;
    width    : 100%;
    top      : 50%;
    transform: translateX(-50%) translateY(-50%);
}

#mybad img {
    max-width: 480px;
}

#mybad h2 {
    margin-top   : 60px;
    margin-bottom: 16px;
}

/*  ------------------------------------------------------------------------

    H O M E   H E R O

    ------------------------------------------------------------------------ */

.intro {
    height    : 105%;
    min-height: 800px;
    ;
    position: relative;
}

.intro-header {
    font-size     : 20px;
    text-align    : center;
    padding       : 66px;
    pointer-events: none;
}

.word {
    position: absolute;
}

.word h1 {
    font-size      : 104px;
    margin         : 0;
    padding        : 0;
    transform      : scale(1);
    -moz-transition: transform 250ms ease;
    -ms-transition : transform 250ms ease;
    -o-transition  : transform 250ms ease;
    transition     : transform 250ms ease;
}

.word h1:hover {
    transform: scale(1.06);
}

.word {
    cursor: move;
    /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

/* (Optional) Apply a "closed-hand" cursor during drag operation. */

.word:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

#draggable_words {
    width      : 100px;
    height     : 100px;
    left       : 50%;
    top        : 50%;
    position   : absolute;
    margin-left: -50px;
    margin-top : -50px;
}

#word1 {
    top : -40px;
    left: -534px;
}

#word2 {
    top : -40px;
    left: -175px;
}

#word3 {
    top : -40px;
    left: 107px;
}

#word4 {
    top : -40px;
    left: 277px;
}

#word5 {
    top : -40px;
    left: 366px;
}

.color_0 {
    color: #000000;
}

.color_1 {
    color: #FF4E45;
}

.color_2 {
    color: #FF8D40;
}

.color_3 {
    color: #FFC200;
}

.color_4 {
    color: #E5E52C;
}

.color_5 {
    color: #63C678;
}

.color_6 {
    color: #00E5BE;
}

.color_7 {
    color: #00DBFF;
}

.color_8 {
    color: #6EA2FF;
}

.color_9 {
    color: #B47BFF;
}

.color_10 {
    color: #FF78FF;
}

/*  ------------------------------------------------------------------------

    F E A T U R E D   W O R K

    ------------------------------------------------------------------------ */

#featured-work {
    padding    : 90px 0;
    padding-top: 10%;
}

.featured-project {
    display         : inline-block;
    width           : 100%;
    /* margin-bottom: 50px; */
    margin-bottom   : -7px;
}

.project-image {
    cursor          : pointer;
    width           : 50%;
    display         : inline-block;
    position        : relative;
    /* border-radius: 16px; */
    transition      : all 350ms ease;
    overflow        : hidden;
}

.project-image.full {
    width            : 100%;
    /* padding-bottom: 48%; */
}


.project-image.deadlink:hover {
    transform  : scale(1);
    /*transform: scale(0.95);*/
    cursor     : auto;
}

.project-image-inner {
    position: absolute;
    width   : 100%;
    height  : 100%;
}

.project-text {
    width         : 45%;
    padding       : 0 10%;
    position      : relative;
    padding-bottom: 58%;
}

.project-block {
    width      : 45%;
    display    : inline-block;
    position   : relative;
    /* overflow: hidden; */
}

.project-text a {
    color: #000000;
}

.project-image,
.project-text {
    padding-bottom: 50%
}

.center-vert {
    position : absolute;
    top      : 50%;
    transform: translateY(-50%);
    width    : 70%;
}

.project-cam {
    background     : url(../img/camera/project_pixel.png);
    background-size: cover;
}

.project-uptime {
    overflow: hidden;
}

.project-beba {
    background         : url(../img/bebapay/bebapay.png);
    background-size    : cover;
    background-position: center;
    background-size    : 60%;
    background-repeat  : no-repeat;
    background-color   : #59C084;
}

.project-uptime video {
    width    : 100%;
    position : absolute;
    top      : 50%;
    transform: translateY(-50%);
}

.project-audio {
    background: #ACDAFF;
    overflow  : hidden;
}

.project-audio video {
    width: 100%;
}

.project-youtube {
    background         : #282828;
    background         : url(../img/archive/project_shorts.png);
    background-size    : cover;
    background-position: center;
}

.project-essentials {
    background: #4EDEBE;
}

.project-keep {
    background         : #ffe097;
    background         : url(../img/keep/project_keep.jpeg);
    background-size    : cover;
    background-position: center;
}

.project-fit {
    background-color: #f15e5b;
}

.project-fit .project-image-inner {
    background         : url(../img/fit/fit-goal.png);
    background-size    : 85%;
    background-repeat  : no-repeat;
    background-position: center bottom;
}

.project-reels video {
    height    : 76%;
    margin    : 0 auto;
    display   : block;
    margin-top: 15%;
}

.project-essentials video {
    height    : 84%;
    margin    : 0 auto;
    display   : block;
    margin-top: 10%;
}

.project-vfx {
    background         : url(../img/vfx/project_vfx2.jpeg);
    background-size    : cover;
    background-position: center;
}

#viewmore {
    text-align   : center;
    margin-bottom: 80px;
    margin-top   : 80px;
}

.project-text.full a.project-link.cta-button {
    position: absolute;
    right   : 0;
    top     : 0;
}

.project-text.full {
    padding      : 0;
    margin-bottom: 250px;
    width        : 100%;
}

video.cover {
    width    : 100%;
    position : absolute;
    top      : 50%;
    transform: translateY(-50%);
}

/*  ------------------------------------------------------------------------

    about

    ------------------------------------------------------------------------ */

ul.work-experience {
    padding: 0;
    margin : 0;
}

.work-experience li {
    list-style: none;
    padding   : 32px 32px;
}

.work-experience li:last-child {
    border: none !important;
}

.work-experience-list {
    cursor             : pointer;
    border-width       : 1px;
    border-top-color   : rgba(127, 127, 127, 0);
    border-bottom-color: rgba(127, 127, 127, 0.2);
    border-bottom-style: solid;
    border-top-style   : solid;
    -moz-transition    : all 250ms ease;
    -ms-transition     : all 250ms ease;
    -o-transition      : all 250ms ease;
    transition         : all 250ms ease;
}

.work-experience-list:hover {
    padding-left: 0px;
    cursor      : pointer;
    border-width: 1px;
    border-color: rgba(127, 127, 127, 0.5);
    ;
    border-bottom-style: solid;
    border-top-style   : solid;
    background-color   : rgba(127, 127, 127, 0.1);
}

.work-experience-list .link {
    margin-right   : -10px;
    -moz-transition: all 250ms ease;
    -ms-transition : all 250ms ease;
    -o-transition  : all 250ms ease;
    transition     : all 250ms ease;
}

.work-experience-list:hover .link {
    margin-right   : -20px;
    -moz-transition: all 250ms ease;
    -ms-transition : all 250ms ease;
    -o-transition  : all 250ms ease;
    transition     : all 250ms ease;
}

​ p.title {
    font-weight: 800;
    width      : 50%;
    float      : left;
}

p.link {
    width     : 50%;
    float     : right;
    text-align: right;
}

.link span {
    width          : 24px;
    height         : 24px;
    background     : url(../img/ic_open.svg);
    background-size: contain;
    display        : inline-block;
    opacity        : 0.4;
    -moz-transition: all 250ms ease;
    -ms-transition : all 250ms ease;
    -o-transition  : all 250ms ease;
    transition     : all 250ms ease;
}

.work-experience p {
    margin : 0;
    padding: 0;
}

p.location {
    width  : 50%;
    float  : left;
    opacity: 0.4;
}

p.year {
    text-align: right;
    opacity   : 0.4;
}

.work-experience li:last-child {
    border-bottom: none;
}

/*  ------------------------------------------------------------------------

    P R O J E C T S

    ------------------------------------------------------------------------ */

#header-container.heroed #hamburger li {
    background: #fff;
}

#header-container.heroed .nav-item {
    color: #FFFFFF;
}

#header-container.heroed svg path,
#header-container.heroed svg polygon {
    fill: #fff;
}

.project_hero {
    height       : 70%;
    min-height   : 400px;
    top          : 0;
    position     : relative;
    margin-bottom: 120px;
    background   : #000;
}

.project_hero h1 {
    margin        : 0;
    position      : absolute;
    top           : 50%;
    transform     : translateY(-50%);
    color         : #fff;
    font-weight   : 600;
    letter-spacing: -0.03em;
    font-size     : 108px;
    width         : 100%;
    text-align    : center;
}

.hero_video {
    height  : 100%;
    width   : 100%;
    overflow: hidden;
}

.hero_video video {
    min-width : 100%;
    min-height: 100%;
}

.timemarker_hero_video video {
    min-width : 100%;
    min-height: 100%;
    margin-top: -16%;
}


.video_overlay {
    width         : 100%;
    height        : 100%;
    position      : absolute;
    pointer-events: none;
    top           : 0;
}

.about_me {
    font-weight: 500;
    margin-top : 200px;
}

p.up-next {
    text-align: center;
    font-size : 36px;
    margin    : 14px;
}

.up-next a {
    color: #000;
}

.wavey.upnext {
    height: 232px;
}

p.project-meta.gray {
    margin-top   : 8px;
    margin-bottom: 48px;
}

span.bullet {
    padding: 0 8px;
}

.header-left a {
    position      : absolute;
    cursor        : pointer !important;
    pointer-events: all;
}

.fit {
    width: 100%;
}

.bigass_video {
    margin-top   : 100px;
    margin-bottom: 100px;
}

.bigassphone_1,
.bigassphone_2 {
    width   : 100%;
    height  : 100%;
    position: relative;
}

.bigassphone_3 {
    width   : 100%;
    height  : 130%;
    position: relative;
}

.bigassphone_1 img {
    position : absolute;
    left     : 50%;
    top      : 50%;
    transform: translateX(-50%) translateY(-51%);
    height   : 70%;
}

.bigassphone_1 video {
    position : absolute;
    height   : 70%;
    left     : 50%;
    top      : 50%;
    transform: translateX(-50%) translateY(-50%);
}

.bigassphone_2 video,
.bigassphone_3 video {
    position : absolute;
    height   : 90%;
    left     : 50%;
    top      : 50%;
    transform: translateX(-50%) translateY(-50%);
}

.bigassphone_3 video {
    height: 70%;
}

.bigassphone_1.pixel_white,
.bigassphone_3.pixel_white {
    background-image   : url(../img/pixel_white.png);
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : auto 87%;
}

.laptop {
    position: relative;
}

.laptop video {
    position: absolute;
    width   : 74%;
    left    : 13%;
    top     : 5%;
    border  : 1px solid gray;
}

.laptop .screen {
    position: absolute;
    width   : 74%;
    left    : 13%;
    top     : 5%;
    border  : 1px solid gray;
}

.bg_white {
    background-color: #FFFFFF;
}

.bg_gray {
    background-color: #e8e8e8;
}

.bg_gray_2 {
    background-color: #F5F5F5;
}

.bg_gray_3 {
    background-color: rgba(127, 127, 127, 0.2);
}

.bg_black {
    background-color: #000000;
}

.body-list li {
    font-size    : 16px;
    margin-bottom: 16px;
    line-height  : 1.6em;
    opacity      : 0.54;
}

.pixel.black {
    width              : 88%;
    padding-bottom     : 188%;
    background-color   : transparent;
    background-image   : url(../img/pixel_black.png);
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : 100%;
    position           : relative;
    z-index            : initial;
    pointer-events     : none;
    margin-bottom      : 0;
    margin             : 0 auto;
}

.pixel.white {
    width              : 100%;
    padding-bottom     : 205%;
    background-color   : transparent;
    background-image   : url(../img/pixel_white.png);
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : 100%;
    position           : relative;
    z-index            : initial;
    pointer-events     : none;
    margin-bottom      : 0;
}

.pixel img,
.pixel video {
    border   : 0;
    position : absolute;
    width    : 89%;
    left     : 50%;
    top      : 50%;
    transform: translateX(-50%) translateY(-51%);
    z-index  : 1;
}

.device {
    width              : 88%;
    padding-bottom     : 188%;
    background-color   : transparent;
    background-position: center !important;
    background-repeat  : no-repeat !important;
    background-size    : 100% !important;
    position           : relative;
    z-index            : initial;
    pointer-events     : none;
    margin-bottom      : 0;
    margin             : 0 auto;
}

.device.iphone-wireframe {
    background-image: url(../img/device_1.svg);
}

.device.pixel-wireframe {
    background-image: url(../img/device_2.svg);
}

.device video,
.device img {
    width   : 90%;
    position: absolute;
    left    : 5%;
    top     : 11%;
}

.device.pixel-wireframe video,
.device.pixel-wireframe img {
    top: 12%;
}

img.bigass-icon {
    margin    : 0 auto;
    display   : block;
    width     : 50vw;
    max-width : 800px;
    padding   : 5vw;
    text-align: center;
}

p.big-description {
    font-size: 36px;
    color    : #606060;
}

.project-banner {
    height       : 640px;
    color        : #fff;
    margin-bottom: 80px;
    margin-top   : 80px;
}

.project-banner.italia,
.square.italia {
    background         : #3F51B5;
    background-image   : url(../img/italia/map.png);
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : cover;
}

.project-banner.gruppo {
    background-image   : url(../img/italia/gruppo.jpg);
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : cover;
}

.project-banner.italia_ux {
    background-image   : url(../img/italia/uxd.jpg);
    background-repeat  : no-repeat;
    background-position: center bottom;
    background-size    : cover;
}

.project-banner.lowes {
    background-color   : #42A5F5;
    background-image   : url(../img/lowes/mobile_customer.png);
    background-repeat  : no-repeat;
    background-position: right bottom;
    background-size    : contain;
}

.project-banner.marina {
    background-color   : #42A5F5;
    background-image   : url(../img/knotty/marina.jpg);
    background-repeat  : no-repeat;
    background-position: right bottom;
    background-size    : cover;
}

/*  ------------------------------------------------------------------------

    FOCALS 2.0

    ------------------------------------------------------------------------ */

.project_hero.focals_v2 {
    background         : url(../img/focals_v2/focals_v2_hero.jpg);
    background-size    : cover;
    background-position: center;
}

/*  ------------------------------------------------------------------------

    FOCALS

    ------------------------------------------------------------------------ */

.project_hero.focals .video_overlay {
    background: rgba(0, 0, 0, 0.7);
}

.credit {
    position   : absolute;
    bottom     : 0;
    padding    : 16px;
    font-size  : 12px;
    font-weight: 100;
    right      : 0;
    color      : white;
    opacity    : 0.5;
}

#header-container.heroed.focals .nav-item {
    color: #FFFFFF;
}

#header-container.heroed.focals svg path {
    fill: #FFFFFF;
}

#header-container.heroed.focals .rw-box {
    stroke: #FFFFFF;
}

/*  ------------------------------------------------------------------------

    Hetki

    ------------------------------------------------------------------------ */

.project_hero.hetki {
    background: #2D2824;
}

.project_hero.hetki h1 {
    color: #E6B88C;
}

#header-container.heroed.hetki .nav-item {
    color: #E6B88C;
}

#header-container.heroed.hetki svg path {
    fill: #E6B88C;
}

#header-container.heroed.hetki .rw-box {
    stroke: #E6B88C;
}


/*  ------------------------------------------------------------------------

    Demo

    ------------------------------------------------------------------------ */

    .project_hero.demo {
        background: #ffffff;
    }
    
    .project_hero.demo h1 {
        color: #1ec3ce;
    }
    
    #header-container.heroed.demo .nav-item {
        color:#1ec3ce;
    }
    
    #header-container.heroed.demo svg path {
        fill: #1ec3ce;
    }
    
    #header-container.heroed.demo .rw-box {
        stroke: #1ec3ce;
    }


/*  ------------------------------------------------------------------------

    TIMEMARKER

    ------------------------------------------------------------------------ */

.project_hero.timemarker .video_overlay {
    background: rgba(0, 0, 0, 0.7);
}


.project_hero.timemarker {
    background         : url(../img/timemarker/timemarker_hero.jpg);
    background-size    : cover;
    background-position: center;
}

img.timemarker {
    display     : block;
    margin-left : auto;
    margin-right: auto;
    width       : 100%;
}

#header-container.heroed.timemarker .nav-item {
    color: #EA13BD;
}

#header-container.heroed.timemarker svg path {
    fill: #EA13BD;
}

#header-container.heroed.timemarker .rw-box {
    stroke: #EA13BD;
}

.colour-picker {
    width : 150px;
    margin: auto;
}

/*  ------------------------------------------------------------------------

    BORDERPATROL

    ------------------------------------------------------------------------ */

.project_hero.borderpatrol {
    background         : url(../img/borderpatrol/borderpatrol_hero.jpg);
    /* background-size : cover; */
    background-size    : 1200px;
    background-position: center;
    background-repeat  : no-repeat;
    background-color   : #FFFFFF;
}

img.borderpatrol {
    display     : block;
    margin-left : auto;
    margin-right: auto;
}

#header-container.heroed.borderpatrol .nav-item {
    color: #EA13BD;
}

#header-container.heroed.borderpatrol svg path {
    fill: #EA13BD;
}

#header-container.heroed.borderpatrol .rw-box {
    stroke: #EA13BD;
}

.colour-picker {
    width : 150px;
    margin: auto;
}

.borderpatrol_UI_img {
    padding: 40px;
}

.collapseStroke {
    padding-bottom: 5%;
    margin-left   : 35px;
}

/*  ------------------------------------------------------------------------

    archive

    ------------------------------------------------------------------------ */

#scrim {
    position       : fixed;
    left           : 0;
    top            : 0;
    width          : 100%;
    height         : 100%;
    background     : #FFFFFF;
    opacity        : 0;
    pointer-events : none;
    z-index        : 10;
    -moz-transition: all 250ms ease;
    -ms-transition : all 250ms ease;
    -o-transition  : all 250ms ease;
    transition     : all 250ms ease;
}

#scrim.visible {
    opacity: 1.0;
}

.filterer {
    padding-top: 160px;
    z-index    : 99;
    display    : inline-block;
    position   : absolute;
    margin-left: 24px;
}

.filterer h2,
#answers {
    font-size  : 36px;
    font-weight: 600;
    float      : left;
    margin     : 0;
}

#answers {
    display              : inline-block;
    text-align           : left;
    overflow             : hidden;
    cursor               : pointer;
    padding              : 0px;
    height               : 48px;
    overflow             : hidden;
    margin-left          : 12px;
    /*    -moz-transition: height 250ms ease;
    -ms-transition       : height 250ms ease;
    -o-transition        : height 250ms ease;
    transition           : height 250ms ease;*/
}

#answers.open {
    height: 336px
}

#answers.open li#first {
    display: none;
    opacity: 0;
}

#answers ul {
    padding-left: 0;
    margin      : 0;
}

#answers ul li {
    list-style     : none;
    padding-bottom : 16px;
    -moz-transition: all 150ms ease;
    -ms-transition : all 150ms ease;
    -o-transition  : all 150ms ease;
    transition     : all 150ms ease;
}

#answers ul li:hover {
    padding-left: 8px;
    /* color    : #4285F4; */
}

.pushdown {
    padding-top: 278px;
}

.grid {
    z-index      : 1;
    margin-bottom: 120px;
}

.project-item {
    width        : 33.33%;
    margin-bottom: 64px;
    color        : #000;
}

.project-item h3 {
    font-size    : 24px;
    margin-bottom: 4px;
    margin-top   : 16px;
}

.project-item p {
    margin        : 0;
    font-size     : 16px;
    letter-spacing: 0.1em;
    font-weight   : 600;
}

.item-inner {
    padding        : 0 24px;
    -moz-transition: all 150ms ease;
    -ms-transition : all 150ms ease;
    -o-transition  : all 150ms ease;
    transition     : all 150ms ease;
}

.item-inner:hover {
    -webkit-transform: scale(1.03);
    -moz-transform   : scale(1.03);
    -ms-transform    : scale(1.03);
    -o-transform     : scale(1.03);
    transform        : scale(1.03);
}

.archive-img {
    width          : 100%;
    padding-bottom : 100%;
    background     : #f3f3f3;
    border-radius  : 16px;
    opacity        : 1;
    -moz-transition: all 150ms ease;
    -ms-transition : all 150ms ease;
    -o-transition  : all 150ms ease;
    transition     : all 150ms ease;
}


.archive-img.stories {
    background: url(../img/archive/project_stories.png);
}

.archive-img.essentials {
    background: url(../img/archive/project_essentials.png);
}

.archive-img.vfx {
    background: url(../img/archive/project_vfx.png);
}

.archive-img.uptime {
    background: url(../img/archive/project_uptime.png);
}

.archive-img.pixel {
    background: url(../img/archive/project_pixel.png);
}

.archive-img.handy {
    background: url(../img/archive/project_handy.png);
}

.archive-img.nove {
    background: url(../img/archive/project_nove.png);
}

.archive-img.lowes {
    background: url(../img/archive/project_lowes.png);
}

.archive-img.keep {
    background: url(../img/archive/project_keep.png);
}

.archive-img.fit {
    background: url(../img/archive/project_fit.png);
}

.archive-img.hetki {
    background: url(../img/archive/project_hetki.png);
}

.archive-img.demo {
    background: url(../img/archive/project_demo.jpg);
}

.archive-img.misc {
    background: url(../img/archive/project_misc.png);
}

.archive-img.newlayer {
    background: url(../img/archive/project_newlayer.png);
}

.archive-img.audio {
    background: url(../img/archive/project_audio.png);
}

.archive-img.lunr {
    background: url(../img/archive/project_lunr.png);
}

.archive-img.fundo {
    background: url(../img/archive/project_fundo.png);
}

.archive-img.figma {
    background: url(../img/archive/project_figma.png);
}

.archive-img.uxu {
    background: url(../img/archive/project_uxu.png);
}

.archive-img.focals_v2 {
    background: url(../img/archive/project_focals_v2@2x.jpg);
}

.archive-img.shapestory {
    background: url(../img/archive/project_shapestory.png);
}

.archive-img.focals {
    background: url(../img/archive/project_focals@2x.jpg);
}

.archive-img.bb10 {
    background: url(../img/archive/project_bb10@2x.jpg);
}

.archive-img.timemarker {
    background: url(../img/archive/project_timemarker@2x.jpg);
}

.archive-img.borderpatrol {
    background: url(../img/archive/project_borderpatrol@2x.png);
}

.archive-img {
    background-size    : cover !important;
    background-position: center !important;
}

.archive-img.hetki .archive-img.focals_v2 {
    background-position: right !important;
}

/*  ------------------------------------------------------------------------

    gradient header

    ------------------------------------------------------------------------ */

canvas {
    /* width         : 120%;
    height        : 120%;
    margin-top    : 1200px; */
    width         : 120%;
    height        : 180%;
    margin-top    : 880px;
    z-index       : -1;
    position      : fixed;
    top           : -740px;
    left          : -65%;
    transform     : translate(50%, -50%);
    opacity       : 1;
    /* filter     : invert(80%);  */
    pointer-events: none;
}

.gradient-bg-static {
    background: none;
}

.intro-heading {
    color           : #000;
    margin-left     : auto;
    margin-right    : auto;
    padding-top     : 20%;
    padding-bottom  : 20%;
    /* padding-left : 9%; */
    /* padding-right: 9%; */
    max-width       : 920px;
    font-family     : 'Heebo', 'Roboto', sans-serif;
    font-size       : 57px;
    line-height     : 64px;
    font-weight     : 600;
    opacity         : 1;
    z-index         : 2;
}

.intro-secret {
    opacity    : 0.1;
    font-weight: 600;
}

.intro-name {
    color           : #000;
    background-color: rgba(255, 0, 242, 0.2);
}

.intro-name:hover {
    text-decoration-line: none;
    opacity             : 0.5;
    color               : #FFF;
    background-color    : #000;
}

#content1::after {
    content    : "\a";
    white-space: pre;
}

/* ================== Vimeo =================  */

.video-box {
    max-width     : 100%;
    margin        : auto;
    padding-bottom: 30px;
}

.embed-container {
    position      : relative;
    padding-bottom: 56.25%;
    height        : 0;
    overflow      : hidden;
    max-width     : 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
}

.lyrics {
    width : 100%;
    margin: 0 auto;
}

.language {
    padding-left  : 15%;
    display       : inline-block;
    vertical-align: top;
}

/*   #language {
    width: 40%;
    margin: auto;
  } */

/*  ------------------------------------------------------------------------

    Focals v2

    ------------------------------------------------------------------------ */

.project-text-block {
    padding       : 0 80px;
    padding-top   : 30px;
    padding-bottom: 60px;
    width         : 600px;
    display       : block;
    margin        : auto;
}

.blocks {
    width  : 1200px;
    padding: 0;
}

/*  ------------------------------------------------------------------------

    BB10 / BlackBerry 10

    ------------------------------------------------------------------------ */

.project_hero.bb10 {
    background: rgb(152, 134, 255);
    background: linear-gradient(312deg, rgba(152, 134, 255, 1) 27%, rgba(50, 235, 255, 1) 65%);
}

.project_hero.bb10 h1 {
    color: #212121;
}

#header-container.heroed.bb10 .nav-item {
    color: #212121;
}

#header-container.heroed.bb10 svg path {
    fill: #212121;
}

#header-container.heroed.bb10 .rw-box {
    stroke: #212121;
}

.white-block {
    padding-top     : 9%;
    background-color: #FFFFFF;
}

/*  ------------------------------------------------------------------------

    RW LOGO

    ------------------------------------------------------------------------ */

.rw-letter {
    fill: black;
}

.rw-box {
    stroke: black;
}