/* -------------------------------------- FONTS --------------------------------------
    font-family: "monotype-modern-display", sans-serif;
    font-weight: 400;
    font-style: normal;

    font-family: "brandon-grotesque", sans-serif;
    font-weight: 300;
    font-style: normal;

    font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;

    font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: italic;

    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    font-style: normal;

    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    font-style: italic;
*/

/* -------------------------------------- GENERAL --------------------------------------*/
*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #000;
}

:root{
    --light-blue-grey: #e8f3f8;
    --white: #FFFFFF;
    --black: #000102;
    --menu-font:18px;
    --menu-font-mobile:14px;
    --text-default-size: 18px;
    --project-title-size: 48px;
    --project-title-mobile-size: 24px;
}

nav#menu{
    position: absolute;
    z-index: 999;
}

p, span{
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 300;
    font-size: var(--text-default-size);
    line-height: 24px;
}

a{
    text-decoration: none;
    color: var(--black);
    -webkit-tap-highlight-color: transparent;
}

h2{
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text-default-size);
    line-height: 24px;
}

div.content_wrapper{
    width: 1300px;
    left: 50vw;
    transform: translate3d(-50%,0,0);
    position: relative;
    margin: 0 auto;
    float: left;
    padding: 50px 0;
}

.bold{
    font-weight: 700;
}

/* -------------------------------------- INTRO --------------------------------------*/
canvas{
    width: 150vw !important;
    height: 150vh !important;
    position: absolute;
    filter: blur(100px);
    mix-blend-mode: hard-light;
    transform: translate3d(-50%,-50%,0);
    top: 50%;
    left: 50%;
    pointer-events: none;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    border: 2px solid;
    box-sizing: border-box;
    border-radius: 50%;
    display: grid;
    animation: l11 1.5s infinite ease-in-out;
    transform-origin: 50% 80%;
    border-color: rgba(255,255,255, 1);
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
}

.loader:before, .loader:after {
    content: "";
    grid-area: 1/1;
    border: inherit;
    border-radius: 50%;
    animation: inherit;
    animation-duration: 3s;
    transform-origin: inherit;
}

.loader:before{
    border-color: rgba(255,255,255, 1);
}

.loader:after {
    --s:-1;
    border-color: rgba(255,255,255, 1);
}

@keyframes l11 {
    50%{opacity: 0.3;}
    100% {transform:rotate(calc(var(--s,1)*1turn));}
}

div#welcome{
    width: 100%;
    min-width: 1300px;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: var(--white);
    opacity: 0;
    transition: opacity 1s ease-in;
}

img#jun_okida{
    width: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 99;
    margin-top: -100px;
    pointer-events: none;
}

img#role{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 99;
    margin-top: 300px;
    pointer-events: none;
}

img#vision{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate3d(-50%,-50%,0);
    z-index: 99;
    margin: 200px 0 0 250px;
    pointer-events: none;
}

p#author{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 99;
    margin: -320px 0 0 -400px;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 300;
    pointer-events: none;
    font-size: var(--text-default-size);
}

/* -------------------------------------- MENU --------------------------------------*/
nav#menu{
    width: 30vw;
    height: 30px;
    min-width: 170px;
    position: fixed;
    z-index: 999;
    top: 50%;
    right: 0;
    border-bottom: 1px solid #FFF;
    margin-top: -300px;
}

nav#menu ul{
    list-style: none;
    margin-left: 15px;
}

nav#menu ul li{
    float: left;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    color: var(--white);
    font-size: var(--menu-font);
    text-transform: uppercase;
    margin-right: 30px;
    cursor: pointer;
    letter-spacing: 2px;
}

nav#menu ul li.current{
    color: var(--balck);
}

/* -------------------------------------- BIO --------------------------------------*/

div#bio{
    width: 100%;
    min-width: 1300px;
    min-height: 100vh;
    position: relative;
    float: left;
    background: linear-gradient(to bottom,  var(--white), var(--light-blue-grey));
}

div#bio img#hello{
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translate3d(-650px,0,0);   
    transition: .5s ease-in-out .2s;
    pointer-events: none;
}

div#social{
    width: 60px;
    position: absolute;
    left: 50%;
    top: 584px;
    transform: translate3d(-50%,-50%,0);
    margin: 0 0 0 -25px;
    transition: .5s ease-in-out .2s;
}

div#social.hidden{
    opacity: 0;
}

div#social img#linkedin{
    width: 25px;
    float: left;
}

div#social img#mail{
    width: 25px;
    float: left;
    margin: 3px 0 0 10px;
}

div#bio img#hello.hidden{
    opacity: 0;
    transform: translate3d(-650px,0,0) scale(0.9);
}

div#bio p#mini_bio{
    width: 530px;
    position: absolute;
    left: 50%;
    top: 490px;
    transform: translate3d(-50%,0,0); 
    margin: 0 0 0 298px;
    transition: .5s ease-in-out .2s;
}

div#bio p#mini_bio.hidden{
    opacity: 0;
}

div#bio div#experience{
    width: 588px;
    position: absolute;
    left: 50%;
    top: 490px;
    transform: translate3d(-50%,0,0); 
    margin: 107px 0 0 -281px;
    transition: .5s ease-in-out .2s;
}

div#bio div#experience.hidden{
    opacity: 0;
}

div#bio div#awards{
    width: 588px;
    position: relative;
    left: 50%;
    transform: translate3d(-50%,0,0); 
    margin: 883px 0 0 -281px;
    float: left;
    transition: .5s ease-in-out .3s;
}

div#bio div#awards div.column{
    width: 100%;
    float: left;
    transition: .5s ease-in;
    overflow: hidden;
}

div#bio div#awards.hidden{
    opacity: 0;
}

div#bio div#awards div.column_hidden{
    width: 100%;
    height: 0;
    float: left;
    transition: .5s ease-in;
    overflow: hidden;
}

div#bio div#awards div.column_hidden.show{
    height: auto;
}

p#view_all{
    cursor: pointer;
    margin-top: 5px;
}

p#view_all.hide{
    display: none;
}

/* -------------------------------------- WORK --------------------------------------*/

div#work{
    width: 100%;
    min-width: 1300px;
    min-height: 100vh;
    position: relative;
    float: left;
    background-image: linear-gradient(to bottom, var(--white), var(--light-blue-grey));
    /* background: radial-gradient(circle at 100% 50%, rgb(255, 183, 0), transparent 400px),
        radial-gradient(circle at 100% 50%, rgba(255, 0, 255, 0.9), transparent 1000px),
        radial-gradient(circle at 80% 50%, rgb(0, 191, 255), transparent 1000px),                
        linear-gradient(to bottom,  var(--white), var(--light-blue-grey)); */
}

@keyframes gradio {
    0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
  }

div#work div#projects_label_title, .quote_left{
    margin: 100px 0 15px 0;
    transition: .5s ease-out .3s;
    padding-left: 20px;
    float: left;
}

div#work div#projects_label_title p, .quote_left p{
    width: 100%;
    font-weight: 300;
    font-size: 20px;
    text-align: left;
    letter-spacing: 30px;
    line-height: 30px;
    text-transform: uppercase;
}

div#work div#projects_label_title.hidden, .quote_left.hidden{
    opacity: 0;
    transform: translate3d(-50px,0,0);
}

div#work div#projects_label_cta, .quote_right{
    width: 100%;
    margin: 15px 0 100px 0;
    transition: .5s ease-out .6s;
    padding-right: 20px;
    float: right;
}

div#work div#projects_label_cta p, .quote_right p{
    width: 100%;
    font-weight: 300;
    font-size: 20px;
    text-align: right;
    letter-spacing: 30px;
    text-transform: uppercase;
    line-height: 30px;
}

div#work div#projects_label_cta.hidden, .quote_right.hidden{
    opacity: 0;
    transform: translate3d(50px,0,0);
}

/* - LEFT - */

div.project_left{
    width: 100%;
    float: left;
    margin: 100px 0;
    transition: .5s ease-out .2s;
    cursor: pointer;
}

div.project_left.hidden{
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
}

div.project_left.hidden div.img_wrapper{
    transform: translate3d(0, 40px, 0);
}

div.project_left.hidden div.img_wrapper img, div.project_left.hidden div.img_wrapper video{
    transform: translate3d(0, 0, 0);
}

div.project_left div.img_wrapper{
    transition: 5s ease-out .2s;
    float: left;
    overflow: hidden;
}

div.project_left img.project_thumb, div.project_left video.project_thumb{
    max-width: 650px;
    max-height: 100vh;
    float: left;
    transition: 2s ease-out .5s;
    pointer-events: none;
}

div.project_left h2.title{
    font-family: "monotype-modern-display", sans-serif;
    font-weight: 400;
    font-size: var(--project-title-size);
    line-height: 50px;
    text-transform: none;
}

div.project_left.hidden div.work_title_wrapper{
    margin-left: 20px !important;
}

div#work div.project_left div.work_title_wrapper{
    max-width: 35%;
    transform: translate3d(0,60px,0);
    margin-left: -20px;
    float: left;
    pointer-events: none;
    transition: 1s ease-out .5s;
}

/* - RIGHT - */

div.project_right{
    width: 100%;
    float: left;
    margin: 100px 0;
    transition: .5s ease-out .5s;
    cursor: pointer;
}

div.project_right.hidden{
    opacity: 0;
    transform: translate3d(50px, 0, 0);
}

div.project_right.hidden div.img_wrapper{
    transform: translate3d(0, -40px, 0);
}

div.project_right.hidden div.img_wrapper img, div.project_right.hidden div.img_wrapper video{
    transform: translate3d(0, 0, 0);
}

div.project_right.hidden div.work_title_wrapper{
    margin-right: 20px !important;
}

div#work div.project_right div.work_title_wrapper{
    max-width: 35%;
    transform: translate3d(0,60px,0);
    margin-right: -20px;
    float: right;
    pointer-events: none;
    transition: 1s ease-out .5s;
}

div.project_right p.client{
    text-align: right;
}

div.project_right p.more{
    text-align: right;
}

div.project_right h2.title{
    font-family: "monotype-modern-display", sans-serif;
    font-weight: 400;
    line-height: 50px;
    font-size: var(--project-title-size);
    text-align: right;
    text-transform: none;
}

div.project_right div.img_wrapper{
    float: right;
    overflow: hidden;
    transition: 5s ease-out .2s;
}

div.project_right img.project_thumb, div.project_right video.project_thumb{
    max-width: 650px;
    max-height: 100vh;
    float: right;
    transition: 2s ease-out .2s;
    pointer-events: none;
}

/* -------------------------------------- PROJECT DETAIL --------------------------------------*/
div#project_detail{
    width: 100%;
    position: absolute;
    z-index: 1000;
}

div#project_detail nav#menu{
    top: 80px;
    margin-top: 0;
    border-bottom: 1px solid #000;
}

div#project_detail nav#menu ul li{
    color: var(--balck);
}

div#project_detail nav#menu ul li.current{
    color: #000;
}

div#project_detail div#description{
    width: 100%;
    height: 100vh;
    background-color: var(--white);
    position: fixed;
    /* background-image: radial-gradient(circle, var(--white), var(--light-blue-grey)); */
    background-image: linear-gradient(to bottom, var(--white), var(--light-blue-grey));
    /* background: radial-gradient(circle at 100% 100%, rgb(255, 183, 0), transparent 400px),
        radial-gradient(circle at 100% 100%, rgba(255, 0, 255, 0.9), transparent 1000px),
        radial-gradient(circle at 80% 100%, rgb(0, 191, 255), transparent 1000px),                
        linear-gradient(to bottom,  var(--white), var(--light-blue-grey)); */
}

div#project_detail div#description div.left_breadcrumb{
    left: 10px;
    top: 50%;
    transform-origin: 50% 0;
    transform: translate3d(-50%, 0, 0) rotate(-90deg);
    position: absolute;
}

div#project_detail div#description div.left_breadcrumb span{
    line-height: 17px;
    font-size: 14px;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    float: left;
    text-transform: uppercase;
}

div#project_detail div#description div.left_breadcrumb hr{
    border-top: 2px solid #000;
    width: 150px;
    float: left;
    margin: 7px 10px 0 10px;
}

div#project_detail div#description div#project_info{
    width: 1180px;
    top: 50%;
    left: 50%;
    position: relative;
    float: left;
    transform: translate3d(-50%,-50%,0);
    margin-top: -70px;
}

div#project_detail div#description p{
    margin: 0;
}

div#project_detail div#description p.project_client{
    line-height: 30px;
    text-transform: uppercase;
    letter-spacing: 10px;
    font-size: 14px;
}

div#title_wrapper{
    width: 700px;
    position: relative;
    margin-bottom: 50px;
    float: left;
}

div#project_detail div#description h2.title{
    font-family: "monotype-modern-display", sans-serif;
    font-weight: 400;
    line-height: 50px;
    font-size: var(--project-title-size);
    line-height: 40px;
    margin: 0;
    text-transform: none;
}

div.video_case{
    width: 700px;
    height: 394px;
    position: relative;
    background-color: #000;
    float: left;
}

div.role{
    width: 450px;
    position: relative;
    float: left;
    margin:0 0 0 30px;
}

div.role p{
    margin-bottom: 20px !important;
}

div#personal_title_wrapper{
    width: 35%;
    height: 100%;
    left: 0;
    position: relative;
    float: left;
    margin-right: 2%;
}

div#personal_title_wrapper p{
    text-align: right;
}

div#personal_title_wrapper h2{
    text-align: right;
    z-index: 99;
    position: relative;
}

div#personal_title_wrapper img, div#personal_title_wrapper video{
    max-width: 100%;
    margin-top: -10px;
    float: right;
}

div#personal_proj_description{
    width: 61%;
    height: 100%;
    left: 0;
    position: relative;
    float: left;
    margin:40px 0 0 2%;
}

div#personal_proj_description p{
    margin-bottom: 20px !important;
}

div#cta_scroll{
    width: 100%;
    height: 17px;
    position: absolute;
    bottom: 80px;
}

div#cta_scroll img#arrow_down{
    height: 8px;
    margin-left: -13px;
    position: absolute;
    left: 50%;
    transform: rotate(270deg);
    cursor: pointer;
    top: 60px;
    animation: 5s ease 0s infinite normal none running bounce;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0) rotate(270deg);
    }
    40% {
      transform: translateY(-15px) rotate(270deg);
    }
    60% {
      transform: translateY(-5px) rotate(270deg);
    }
  }

div#cta_scroll span#scroll_cta_label{
    width: 100%;
    height: 30px;
    line-height: 17px;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 20px;
    text-align: center;
    position: absolute;
    text-transform: uppercase;
    pointer-events: none;
}

div#proj_nav{
    width: 100%;
    height: 17px;
    position: relative;
    margin-top: 20px;
    float: left;
}

div#proj_nav a{
    position: relative;
}

div#proj_nav img#arrow_left{
    height: 8px;
    position: absolute;
    left: 30px;
    cursor: pointer;
    top: 5px;
    z-index: 10;
}

div#proj_nav img#arrow_right{
    height: 8px;
    position: absolute;
    right: 30px;
    transform: rotate(180deg);
    cursor: pointer;
    top: 5px;
}

div#proj_nav span#proj_nav_label{
    width: 100%;
    height: 30px;
    line-height: 17px;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 20px;
    text-align: left;
    position: absolute;
    text-transform: uppercase;
    pointer-events: none;
}

div#project_detail div#assets{
    width: 100%;
    top: 100vh;
    background-color: rgba(0,0,0,.9);
    position: absolute;
    right: 0;
    z-index: 999;
}

div#project_detail div#assets_white{
    width: 100%;
    top: 100vh;
    background-color: rgba(255,255,255,.9);
    position: absolute;
    right: 0;
    z-index: 999;
}

div#project_detail div#assets .half, div#project_detail div#assets_white .half{
    width: 46%;
    margin:50px 2%;
    float: left;
    transition: 1s ease-in-out .2s;
    cursor: pointer;
}

div#project_detail div#assets .quarter, div#project_detail div#assets_white .quarter{
    width: 21%;
    margin:50px 2%;
    float: left;
    transition: 1s ease-in-out .2s;
    cursor: pointer;
}

div#project_detail div#assets .third, div#project_detail div#assets_white .third{
    width: 31%;
    margin:50px 1.1%;
    float: left;
    transition: 1s ease-in-out .2s;
    cursor: pointer;
}

div#project_detail div#assets .full, div#project_detail div#assets_white .full{
    width: 100%;
    float: left;
    margin: 50px 0;
    transition: 1s ease-in-out .2s;
}

div#project_detail div#assets div.text{
    color: var(--white);
}

div#project_detail div#assets div.text p, div#project_detail div#assets_white div.text p{
    padding: 0 30px;
}

div#project_detail div#assets div.text hr, div#project_detail div#assets_white div.text hr{
    margin: 0 30px;
    border-top: 1px solid var(--light-blue-grey);
}

div#project_detail div#assets .hidden, div#project_detail div#assets_white .hidden{
    transform: scale(.9);
    opacity: 0;
}

/* -------------------------------------- TABLET --------------------------------------*/
@media (min-width: 621px) AND (max-width: 1300px) {
    /* -------------------------------------- GENERAL --------------------------------------*/
    div.content_wrapper{
        width: 100vw;
    }

    /* -------------------------------------- INTRO --------------------------------------*/
    canvas{
        width: 200vw !important;
        height: 200vh !important;
        position: absolute;
        filter: blur(70px);
        mix-blend-mode: hard-light;
        transform: translate3d(-50%,-50%,0);
        top: 50%;
        left: 50%;
        pointer-events: none;
    }

    div#welcome{
        min-width: auto;
    }

    img#jun_okida{
        width: 650px;
        margin-top: -80px;
    }

    p#author{
        margin: -270px 0 0 -370px;
    }

    img#role{
        width: 300px;
        margin-top: 260px;
    }

    img#vision{
        margin-top: 130px;
    }

    /* -------------------------------------- BIO --------------------------------------*/

    div#bio{
        width: 100vw;
        min-width: auto;
    }

    div#bio img#hello{
        transform: translate3d(-550px,0,0);   
    }

    div#bio img#hello.hidden{
        opacity: 0;
        transform: translate3d(-550px,0,0) scale(0.9);
    }

    div#bio div#social{
        margin: 0 0 0 75px;
    }

    div#bio p#mini_bio{
        width: 410px;
        margin: 0 0 0 338px;
    }

    div#bio div#experience{
        margin: 107px 0 0 -181px;
    }

    div#bio div#awards{
        margin: 885px 0 0 -181px;
    }

    div#bio div#awards div.column{
        width: 100%;
    }
    /* -------------------------------------- WORK --------------------------------------*/
    div#work{
        width: 100vw;
        min-width: auto;
        overflow: hidden;
    }

    div.project_left img, div.project_left video{
        margin-left: 20px;
    }

    div.project_right img, div.project_right video{
        margin-right: 20px;
    }

    /* -------------------------------------- PROJECT DETAIL --------------------------------------*/
    div#project_detail div#description div#project_info{
        width: 1100px;
        margin-top: -70px;
    }

    div#project_detail div#description div.left_breadcrumb{
        display: none;
    }
    
    div#project_detail div#description div.video_case{
        width: 600px;
        height: 338px;
        position: relative;
        background-color: #000;
        float: left;
    }

    div#project_detail div#description div#title_wrapper{
        width: 650px;
        position: relative;
    }

    div#project_detail div#description div.role{
        width: 440px;
    }
    
}

/* -------------------------------------- MOBILE --------------------------------------*/
@media (max-width: 620px) {

    /* -------------------------------------- GENERAL --------------------------------------*/
    div.content_wrapper{
        width: 100vw;
    }
    
    /* -------------------------------------- INTRO --------------------------------------*/
    canvas {
        filter: blur(70px);
        width: 200vw !important;
        height: 200vh !important;
        position: absolute;
        mix-blend-mode: hard-light;
        transform: translate3d(-50%,-50%,0);
        top: 50%;
        left: 50%;
    }

    div#welcome{
        min-width: auto;
    }

    img#jun_okida{
        width: 320px;
    }

    img#role{
        width: 180px;
        margin-top: 100px;
    }

    img#vision{
        display: none;
    }

    /* -------------------------------------- MENU --------------------------------------*/
    nav#menu{
        top: 70px;
        margin: 0;
    }

    nav#menu ul li{
        font-size: var(--menu-font-mobile);
    }

    /* -------------------------------------- BIO --------------------------------------*/
    div#bio{
        min-width: auto;
        overflow: hidden;
    }

    div#bio img#hello{
        width: 350px;
        position: relative;
        left: 50%;
        top: auto;
        transform: translate3d(-50%,0,0);  
    }

    div#bio img#hello.hidden{
        opacity: 0;
        transform: translate3d(-50%,0,0) scale(0.9);
    }

    div#social {
        width: 60px;
        top: 180px;
        transform: translate3d(-50%, 0, 0);
        margin: 62px 0 0 -119px;
    }

    div#bio p#mini_bio{
        width: 320px;
        position: relative;
        left: 50vw;
        top: 0;
        transform: translate3d(-50%,0,0); 
        margin: 65px 0 30px 13px;
        transition: .5s ease-in-out .4s;
    }

    div#bio div#experience{
        width: 320px;
        position: relative;
        left: 50vw;
        top: 0;
        transform: translate3d(-50%,0,0); 
        margin: 15px 0 30px 13px;
    }

    div#bio div#awards{
        width: 320px;
        position: relative;
        left: 50vw;
        top: 0;
        transform: translate3d(-50%,0,0); 
        margin: 0 0 30px 13px;
    }

    div#bio div#awards div.column{
        width: 100%;
    }

    /* -------------------------------------- WORK --------------------------------------*/
    div#work{
        width: 100vw;
        min-width: auto;
        overflow: hidden;
    }

    div#work_header{
        width: 100%;
    }

    div#work div#projects_label_title, .quote_left{
        width: 100%;
        margin: 100px 0 10px 0;
        padding: 0;
    }

    div#work div#projects_label_title p, .quote_left p{
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        letter-spacing: 10px;
    }
    
    div#work div#projects_label_title.hidden, .quote_left.hidden{
        opacity: 0;
        transform: translate3d(0,0,0);
    }
    
    div#work div#projects_label_cta, .quote_right{
        width: 100%;
        margin: 10px 0 100px 0;
        padding: 0;
    }

    div#work div#projects_label_cta p, .quote_right p{
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        letter-spacing: 10px;
    }
    
    div#work div#projects_label_cta.hidden, .quote_right.hidden{
        opacity: 0;
        transform: translate3d(0,0,0);
    }
    
    div#work img.project_thumb, div#work video.project_thumb{
        max-width: 50vw;
    }

    div#work h2.title{
        font-size: var(--project-title-mobile-size);
        line-height: 25px;
    }

    div#work p.client{
        font-size: 14px;
    }

    /* - LEFT - */
    div.project_left{
        position: relative;
        margin: 70px 0;
    }

    div.project_left img, div.project_left video{
        margin-left: 10px;
    }

    div.project_left.hidden img, div.project_left.hidden video{
        transform: translate3d(0, 30px, 0);
    }

    div#work div.project_left div.work_title_wrapper{
        transform: translate3d(0,10px,0);
        margin-left: -5px;
    }

    /* - RIGHT - */
    div.project_right{
        position: relative;
        margin: 70px 0;
    }

    div.project_right img, div.project_right video{
        margin-right: 10px;
    }

    div.project_right.hidden img, div.project_right.hidden video{
        transform: translate3d(0, -30px, 0);
    }

    div#work div.project_right div.work_title_wrapper{
        transform: translate3d(0,10px,0);
        margin-right: -5px;
    }

    /* -------------------------------------- PROJECT DETAIL --------------------------------------*/
    div.video_case{
        width: 350px;
        height: 197px;
        margin:0 0 20px 0;
        position: relative;
    }

    div#title_wrapper{
        width: 350px;
        position: relative;
        margin:0 0 20px 0;
    }

    div#project_detail div#description div.left_breadcrumb{
        display: none;
    }

    div#project_detail div#description p.project_client{
        font-size: var(--menu-font-mobile);
        line-height: 14px;
    }

    div#project_detail div#description h2.title{
        font-size: var(--project-title-mobile-size);
    }

    div#project_detail nav#menu{
        width: 170px;
        top: 10px;
        margin-top: 0;
        border-bottom: 1px solid #000;
    }

    div#project_detail div#description div#project_info{
        width: 350px;
        margin-top: -60px;
    }

    div#project_detail div#description div.role{
        width: 350px;
        position: relative;
        float: left;
        left: 50%;
        top: 0;
        transform: translate3d(-50%,0,0);
        margin: 0;
    }
    
    div#project_detail div#description div.role p{
        margin: 0;
        padding: 0;
        line-height: 16px;
        font-size: 14px;
    }

    div#proj_nav{
        width: 100%;
        height: 17px;
        position: relative;
        bottom: -20px;
    }
    
    div#proj_nav a{
        position: relative;
    }
    
    div#proj_nav img#arrow_left{
        height: 8px;
        position: absolute;
        left: 30px;
        cursor: pointer;
        top: 5px;
        z-index: 10;
    }
    
    div#proj_nav img#arrow_right{
        height: 8px;
        position: absolute;
        right: 30px;
        transform: rotate(180deg);
        cursor: pointer;
        top: 5px;
    }
    
    div#proj_nav span#proj_nav_label{
        letter-spacing: 10px;
        padding-left: 0;
    }

    div#cta_scroll span#scroll_cta_label{
        display: none;
    }

    div#personal_title_wrapper{
        width: 100%;
        margin-right: 0;
    }
    
    div#personal_title_wrapper p{
        text-align: left;
    }
    
    div#personal_title_wrapper h2{
        text-align: left;
    }
    
    div#personal_title_wrapper img, div#personal_title_wrapper video{
        max-height: 100px;
        margin-top: 10px;
        float: left;
        position: relative;
        left: 50%;
        transform: translate3d(-50%,0,0);
    }
    
    div#personal_proj_description{
        width: 100%;
        height: 100%;
        margin:20px 0 0 0%;
    }
    
    div#personal_proj_description p{
        margin-bottom: 10px !important;
        font-size: 14px;
        line-height: 16px;
    }

    div#project_detail div#assets div.text{
        width: 90% !important;
        margin: 30px 5%;
    }

    div#project_detail div#assets div.text p, div#project_detail div#assets_white div.text p{
        padding: 0 10px;
    }

    div#project_detail div#assets .half, div#project_detail div#assets_white .half{
        margin:20px 2%;
    }
    
    div#project_detail div#assets .quarter, div#project_detail div#assets_white .quarter{
        margin:20px 2%;
    }
    
    div#project_detail div#assets .third, div#project_detail div#assets_white .third{
        margin:20px 1.1%;
    }
    
    div#project_detail div#assets .full, div#project_detail div#assets_white .full{
        margin: 20px 0;
    }
}