html {
    scroll-behavior: smooth;
    font-size: 16px
}

blockquote,
body,
code,
dd,
div,
dl,
dt,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset,
img {
    border: 0
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: 400
}

ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none
}

caption,
th {
    text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 400
}

q:after,
q:before {
    content: ''
}

abbr,
acronym {
    border: 0;
    font-variant: normal
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit
}

legend {
    color: #000
}

#yui3-css-stamp.cssreset {
    display: none
}

a {
    cursor: pointer;
    text-decoration: none
}

a.btn {
    z-index: 99999;
    color: currentColor;
    position: fixed;
    right: 15px;
    opacity: 1;
    top: 94vh
}

#top a {
    text-transform: none
}

.btn h3 {
    font-size: .65rem;
    text-align: center;
    line-height: 1.15em;
    text-transform: uppercase;
    line-height: 1.15em
}
p.in-progress {
    position: fixed;
    filter: invert(1);
    left: 2vw;
    top: 94vh;
    z-index: 9;
    mix-blend-mode: exclusion;
    font-size: .9rem;
}
@media (max-width:598px) and (min-width:0px) {
    a.btn {
        top: 94vh
    }
    .btn h3 {
        font-size: .75rem;
        line-height: 1.15em
    }
    a.btntwo {
        left: -155vw;
        right: 0
    }
}

.process a,
.processtwo a {
    font-family: fontthree;
    border-bottom: .25px solid currentColor;
    display: inline-block;
    line-height: 2.8vh
}

video {
    max-width: 100%;
    max-height: auto
}

body,
html {
    width: 100vw;
    height: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word
}

body {
    overflow-y: scroll;
    overflow-x: hidden
}

#OVERlay-menu {
    background-color: transparent
}

.warning {
    position: fixed;
    height: 100vh;
    background: #000;
    width: 100vw;
    justify-content: space-around;
    flex-direction: column;
    opacity: .85;
    display: flex;
    align-items: center;
    z-index: 99999
}

img {
    max-width: 100%;
    max-height: auto
}

video {
    max-width: 100%;
    max-height: auto
}
.caption {
    width: 28%;
    height: 30vh;
    left: 0;
    align-items: flex-end;
    display: flex;
    mix-blend-mode: exclusion;
    filter: invert(1);
    bottom: 0;
    position: absolute;
    align-self: flex-end;
}
.caption p{
    font-size: .75rem;
    line-height: 1.2em;
}
@media (max-width:5000px) and (min-width:2499px) {
    .caption {
        width: 28%;
        height: 30vh;
        left: 0;
        mix-blend-mode: exclusion;
        filter: invert(1);
        bottom: 10vh;
        position: absolute;
        align-items: flex-end;
        align-self: initial;
    }   
}
.containfit {
    height: 40vh;
    object-fit: contain;
    width: 100%
}
.three_column_grid div .caption {
    padding: 4vh 3vw;
}
img.contain-fit{
    object-fit: contain;
    width: 100%;
}

.paddingtop {
    padding-top: 10vh
}

.coverimage,
.objectfitcover {
    object-fit: cover;
    height: 100vh;
    width: 100vw
}

.containimage {
    object-fit: cover
}
.video-contain{
    width: 100%;
}

.kfk_body .full {
    background-color: gray
}
section.full.image {
    width: 100vw;
    justify-content: center;
    background: white;
}

.logo {
    width: 100%;
    margin: 1.5vh 1vw
}

.image {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.heightvideo {
    height: auto;
    width: 100vw;
    object-fit: contain
}

.contentright {
    display: flex
}

.spantwoleft {
    grid-column: 1/3
}

.spanthree {
    grid-column: 1/4
}

.padding {
    padding: 0 12em 0 12em
}

.imagepadding {
    padding: 0 4em 0 4em
}

.paddingbottom15vh {
    margin-bottom: 12vh
}

.image {
    display: flex
}

.fullvideo {
    display: flex;
    align-content: start;
    height: 100vh;
    width: 100vw;
    object-fit: cover;
}

.image img {
    object-fit: contain
}

.padding {
    padding: 0
}

.imagepadding {
    padding: 0 9em 0 9em
}

.ux_body .projbody span {
    font-weight: 600;
    font-family: neue-haas-grotesk-display, sans-serif
}

.spanthin {
    font-weight: 200
}

.blackback {
    background-color: #000
}

/* Note: SuisseIntl-Book.ttf and ogg-roman.ttf should be placed in the /fonts/ folder */
@font-face {
    font-family: fontone;
    src: url(../fonts/SuisseIntl-Book.ttf)
}

@font-face {
    font-family: fontthree;
    src: url(../fonts/ogg-roman.ttf)
}

@font-face {
    font-family: Fonttwo;
    src: url(../fonts/ogg-roman.ttf)
}

@font-face {
    font-family: Fontfour;
    src: url(../fonts/ogg-roman.ttf)
}

h2 {
    font-family: neue-haas-grotesk-display, sans-serif;
    letter-spacing: .03em;
    line-height: .9em;
    font-weight: 300;
    font-size: 1.2em;
    margin-bottom: 2vh;
}
em.em-dash{
    font-weight: 100;
}

h1 {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    scroll-behavior: initial;
    user-select: none;
    font-style: 100;
    font-family: neue-haas-grotesk-display, sans-serif;
    letter-spacing: .05em;
    line-height: .9em;
    font-weight: 300;
    line-height: 1.5em;
    font-size: 2.3rem
}
h1.mood-site {
    align-self: center;
    z-index: 99999;
    cursor: pointer;
}

.indexbio h1 {
    color: #fff
}

.projhead h1 {
    font-family: Fontone;
    font-size: 2.9rem;
    font-weight: 500;
    margin-right: 6vw;
    color: #000;
    letter-spacing: .96px;
    line-height: 3rem
}

h3 {
    font-size: 1rem;
    font-family: neue-haas-grotesk-display, sans-serif
}

.smcolumns_about h4 {
    color: #fff
}

.about_inner_columns h3 {
    color: #fff
}

.smcolumns_desc h4 {
    color: #000
}

.smcolumns_desc .about_inner_columns h3 {
    color: #000
}

.biotext h6 {
    color: #fff;
    font-size: 2rem
}

h6 {
    font-family: Neue Haas Grotesk Text Pro;
    font-style: normal;
    font-weight: 400;
    font-size: .85rem;
    line-height: 3em;
    letter-spacing: .04em;
    color: #000
}

footer {
    height: 10vh;
    line-height: 40vh;
    padding: 5rem
}

.footer a,
.footer h4 {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #fff;
    line-height: 6vh;
    font-weight: 300;
    font-size: 1.5rem
}

.footer {
    line-height: 12vh;
    height: 20vh;
    padding: 3em 1em 2em 6em;
    background-color: #000
}

.bio_head h3 {
    font-size: 4rem;
    color: #fff;
    font-family: fonttwo
}

h4 {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-weight: 400;
    font-size: 3.5rem;
    line-height: 1em;
    letter-spacing: .04em;
    word-wrap: break-word;
    word-wrap: break-word;
    color: #000
}

h5 {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 34px;
    letter-spacing: .09em;
    color: #302f2f
}

h3 {
    font-size: 1.05rem;
    font-family: neue-haas-grotesk-display, sans-serif
}

h6 {
    font-family: Neue Haas Grotesk Text Pro;
    font-style: normal;
    font-weight: 400;
    font-size: .85rem;
    line-height: 3em;
    letter-spacing: .04em;
    color: #000
}

h5 {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 23px;
    letter-spacing: .09em;
    color: #302f2f
}

.bio_body p {
    width: 47vw
}

p {
    font-family: neue-haas-grotesk-display, sans-serif;
    width: 100%;
    font-weight: 300;
    font-style: normal;
    font-size: 1.15rem;
    letter-spacing: .05em;
    line-height: 1.6
}

.startLogo {
    position: fixed
}

.ExperienceHead h1 {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-size: 3rem;
    font-weight: 500;
    color: #000;
    letter-spacing: .96px;
    line-height: 3rem
}

.experience_body p {
    font-size: 1rem;
    line-height: 1em
}

.projectdescription h4 {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.85rem;
    line-height: 1em;
    letter-spacing: .04em;
    word-wrap: break-word;
    word-wrap: break-word;
    color: #000
}

@media (max-width:5000px) and (min-width:2499px) {
    .caption p{
        font-size: 1.5rem;
        line-height: 1.2em;
    }
    h2 {font-size: 1.5rem;}
    a.btntwo {
        left: 0;
        right: 90vw
    }
    h1 {
        font-size: 5.75rem;
        line-height: 1.26em;
    }
    .projectdescription h4 {
        font-size: 3.5rem;
        line-height: 1em;
    }
    h5 {
        font-size: 1.1rem;
        line-height: 2em;
    }
    P {
        font-size: 1.5rem;
    }
    .projhead h1 {
        font-size: 4rem;
        line-height: 3.8rem
    }
    .process a {
        font-size: 1.4rem
    }
    h3{
        font-size: 1.05rem;
    }
    .biotext a{font-size: 7rem;}
}
@media (max-width:2500px) and (min-width:1601px) {
    a.btntwo {
        left: 0;
        right: 90vw
    }
    h1 {
        font-size: 2.75rem;
        line-height: 1.6em
    }
    .projectdescription h4 {
        font-size: 2rem;
        line-height: 1em
    }
    h5 {
        font-size: .85rem;
        line-height: 2em
    }
    P {
        font-size: 1.5rem;
    }
    .projhead h1 {
        font-size: 4rem;
        line-height: 3.8rem
    }
    .process a {
        font-size: 1.4rem
    }
}

@media (max-width:1600px) and (min-width:1025px) {
    a.btntwo {
        left: 0;
        right: 90vw
    }
    h1 {
        font-size: 2.15rem;
        letter-spacing: .05em;
        line-height: 1.5em
    }
    h2 {
        font-size: 1.2rem
    }
    .fullscreen-bg.mood-background video {
    object-fit: contain;
    object-fit: contain;
}
}

@media (max-width:1024px) and (min-width:768px) {

    a.btntwo {
        left: 0;
        right: 90vw
    }
    h1 {
        font-size: 1.8rem
    }
    .projhead h1 {
        font-size: 2.3rem;
        line-height: 2.2rem;
        margin-bottom: 6vh
    }
    .bg_body p,
    .ux_body p,
    p {
        font-size: 1.1rem
    }
    .experience h1 {
        font-size: 2rem
    }
    h5 {
        font-size: .75rem
    }
    h4 {
        font-size: 2.5rem
    }
}

@media (max-width:767px) and (min-width:599px) {
    a.btntwo {
        left: 0;
        right: 90vw
    }
    .bio_body p {
        width: 87vw
    }
    h1 {
        font-size: 1.8rem
    }
    .ux_body .projhead h1 {
        font-size: 2rem;
        line-height: 2rem
    }
    .projhead h1 {
        font-size: 2.3rem;
        line-height: 2.2rem;
        margin-bottom: 6vh
    }
    .bg_body p,
    .ux_body p,
    p {
        font-size: 1.1rem
    }
    .projhead h1 {
        font-family: Fontone;
        font-size: 2.9rem;
        font-weight: 500;
        margin-right: 6vw;
        color: #000;
        letter-spacing: .96px;
        line-height: 3rem
    }
    .projhead h1 {
        font-size: 2.3rem;
        line-height: 2.2rem;
        margin-bottom: 3vh
    }
    p {
        font-size: 1.1rem
    }
    h4 {
        font-size: 2.5rem
    }
    h5 {
        font-size: .65rem
    }
    .dropdown h3 {
        font-size: 4.05rem;
        line-height: 4rem;
        font-weight: 400
    }
    h3 {
        font-size: 1.5rem;
        line-height: 3em;
        font-family: neue-haas-grotesk-display, sans-serif
    }
    a.btntwo {
        left: -90vw;
        right: 74vw
    }
    a.btntwo {
        left: -90vw;
        right: 74vw
    }
}

@media (max-width:598px) and (min-width:376px) {
    a.btn {
        top: 94vh
    }
    .btn h3 {
        font-size: .75rem;
        line-height: 1.15em
    }
    a.btntwo {
        left: -155vw;
        right: 0
    }
    .bio_body p {
        width: 87vw
    }
    .footer a,
    .footer h4 {
        font-size: 1.25rem
    }
    h1 {
        font-size: 1.85rem
    }
    .projhead h1 {
        font-family: Fontone;
        font-size: 2.9rem;
        font-weight: 500;
        margin-right: 6vw;
        color: #000;
        letter-spacing: .96px;
        line-height: 3rem
    }
    .projhead h1 {
        font-size: 2.3rem;
        line-height: 2.2rem;
        margin-bottom: 3vh
    }
    p {
        font-size: 1rem
    }
    h4 {
        font-size: 2.255rem
    }
    h5 {
        font-size: .65rem
    }
    h3 {
        font-size: 1.05rem;
        font-family: neue-haas-grotesk-display, sans-serif
    }
    .dropdown h3 {
        font-size: 4.05rem;
        font-weight: 400;
        line-height: 4rem
    }
    h3 {
        font-size: 1.5rem;
        line-height: 3em;
        font-weight: 400;
        font-family: neue-haas-grotesk-display, sans-serif
    }
    .smcolumns_desc h4 {
        color: #fff
    }
    .smcolumns_desc .about_inner_columns h3 {
        color: #fff
    }
}

@media (max-width:375px) and (min-width:0px) {
    a.btn {
        top: 94vh
    }
    .btn h3 {
        font-size: .75rem;
        line-height: 1.15em
    }
    a.btntwo {
        left: -155vw;
        right: 0
    }
    .bio_body p {
        width: 87vw
    }
    .footer a,
    .footer h4 {
        font-size: 1.25rem
    }
    h1 {
        font-size: 1.5rem
    }
    .projhead h1 {
        font-family: Fontone;
        font-size: 2.9rem;
        font-weight: 500;
        margin-right: 6vw;
        color: #000;
        letter-spacing: .96px;
        line-height: 3rem
    }
    .projhead h1 {
        font-size: 1.6rem;
        line-height: 1.6rem;
        margin-bottom: 3vh
    }
    p {
        font-size: 1rem;
        line-height: 1.4em
    }
    h4 {
        font-size: 1.75rem
    }
    h5 {
        font-size: .65rem
    }
    h3 {
        font-size: 1.05rem;
        font: 400;
        font-family: neue-haas-grotesk-display, sans-serif
    }
    .dropdown h3 {
        font-size: 4.05rem;
        font-weight: 400: 4rem
    }
    h3 {
        font-size: 1.5rem;
        line-height: 3em;
        font-family: neue-haas-grotesk-display, sans-serif
    }
    .smcolumns_desc h4 {
        color: #fff
    }
    .smcolumns_desc .about_inner_columns h3 {
        color: #fff
    }
    .projectdescription h4 {
        font-size: 1.6rem
    }
p.in-progress{
    top: 97%;
}
}

.index_body #content-back,
.index_body #content-back .content-container {
    position: absolute;
    width: 100%;
    min-height: 100%
}

.index_body .change-navbar-two {
    display: none
}

.index_body .change-navbar {
    position: fixed;
    width: 100%;
    opacity: 0;
    top: 0;
    transition: background-color .2s linear;
    -moz-transition: background-color .2s linear;
    -webkit-transition: background-color .2s linear;
    -o-transition: background-color .2s linear
}

.change-navbar,
.change-navbar-two {
    width: 100%;
    height: 3.88889rem;
    position: absolute;
    z-index: 120
}

.change-navbar .container-fluid,
.change-navbar-two .container-fluid {
    padding: 0
}

.change-navbar .logo a,
.change-navbar-two .logo a {
    color: #000
}

a {
    color: #000;
    transition: all .2s linear;
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    text-decoration: none;
    color: #000
}

nav {
    right: 0;
    text-align: right
}

.change-navbar .logo,
.change-navbar nav,
.change-navbar-two .logo,
.change-navbar-two nav {
    position: absolute;
    height: 2%;
    line-height: 1
}

.change-navbar .nav-active {
    background-color: #fff;
    mix-blend-mode: none
}

.menu {
    display: flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    height: 100%
}

.menu li {
    padding: 1.2em 3em 1em 1em
}

.dropdown {
    position: relative;
    display: inline-block;
    transition: ease-in-out .4s
}

.nav-links-drop {
    display: none;
    position: fixed;
    z-index: 1
}

.nav-links-drop a {
    color: #fff;
    text-decoration: none;
    display: block;
    position: relative
}

.change-navbar {
    mix-blend-mode: exclusion;
    filter: invert(1)!important
}

.change-navbar {
    display: block!important;
    opacity: 1!important
}

.change-navbar-two {
    display: none
}

.dropdown:hover .nav-links-drop {
    display: block
}

.change-navbar-two .logo a {
    display: none
}

@media (max-width:999px) and (min-width:0px) {
    .change-navbar-two {
        mix-blend-mode: exclusion;
        filter: invert(1)!important
    }
    .change-navbar-two {
        display: block!important;
        opacity: 1!important
    }
    .index_body .change-navbar-two {
        position: fixed;
        display: block;
        width: 30%;
        opacity: 0;
        top: 0;
        transition: background-color .2s linear;
        -moz-transition: background-color .2s linear;
        -webkit-transition: background-color .2s linear;
        -o-transition: background-color .2s linear
    }
    .index_body .change-navbar {
        width: 30%;
        right: 0
    }
    .change-navbar-two .logo a {
        display: block
    }
    .change-navbar .logo a {
        display: none
    }
    .nav-bar-two {
        display: flex
    }
    .change-navbar {
        mix-blend-mode: unset;
        filter: invert(0)!important
    }
    .change-navbar {
        z-index: 999;
        display: block!important;
        opacity: 1!important
    }
    .nav-links {
        text-align: left;
        padding-top: 10vw;
        right: 0;
        display: block;
        transform: translateX(100%);
        transition: all ease-in-out .3s;
        text-align: center;
        width: 100%;
        height: 100%;
        top: 0;
        display: flex;
        flex-direction: column;
        transition: all ease-in-out .3s;
        justify-content: flex-start;
        align-items: left;
        transform: translate(100%);
        justify-content: baseline
    }
    .nav .nav-links {
        display: flex
    }
    .burger {
        cursor: pointer;
        right: 0;
        display: block;
        margin: 2vh 2vw;
        position: fixed;
        top: 0
    }
    .nav-active {
        padding-top: 2vh;
        height: 100vh;
        text-align: left;
        width: 100vw;
        transform: translateX(0);
        transform: 0
    }
    .bar1,
    .bar2,
    .bar3 {
        width: 38px;
        height: 1px;
        background-color: gray;
        margin: 6.5px;
        transition: all ease .3s
    }
    .change .bar1 {
        transform: rotate(-45deg) translate(-12px, 10px)
    }
    .change .bar2 {
        opacity: 0
    }
    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-2px, -2px);
        transform: rotate(45deg) translate(0, 1px)
    }
    .dropdown {
        text-decoration: none;
        margin: 0 2em 4em 3em;
        border-bottom: .1px solid #000
    }
    .dropdown h3 {
        font-size: 4.05rem;
        font-weight: 400;
        line-height: 4rem
    }
    .dropdown:hover .nav-links-drop {
        display: none
    }
}

.full {
    height: 100vh;
    display: flex;
    position: sticky;
    top: 0;
    background: #fff
}

.bg_full {
    width: 100vw;
    object-fit: cover
}

.remix_body .full,
.tedx_body .full {
    background: #000
}

@media (max-width:1024px) and (min-width:768px) {
    .full {
        height: 100vh
    }
}

@media (max-width:767px) and (min-width:599px) {
    .full {
        height: 100vh
    }
}

@media (max-width:598px) and (min-width:0px) {
    
    .full {
        height: 100vh;
        display: flex;
        position: sticky;
        top: 0;
        background: #fff
    }
}

.index .imggrid {
    display: grid;
    position: relative;
    align-items: center;
    height: auto;
    width: 100vw;
    grid-template-columns: 49% 2% 49%;
    height: auto;
    grid-auto-rows: 90vh;
    background: #fff
}

.index {
    position: absolute
}

.indexbio {
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    position: sticky;
    height: 90vh;
    top: 0
}

.biotext {
    display: fixed;
    width: 50vw;
    position: sticky;
    top: 0;
    margin-top: 30vh
}

.biotext a {
    color: #fff;
    border-bottom: 9px #fff;
    font-family: fontthree;
    color: #fff;
    border-bottom: .25px solid currentColor;
    display: inline-block;
    line-height: 5.8vh;
}

.biotext h5 {
    color: #fff;
    margin-top: 1.5em;
    font-weight: 300;
    letter-spacing: .12em;
}

.biotext h5 a {
    color: #fff;
    border-bottom: .25px solid currentColor;
    display: inline;
    line-height: inherit;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-size: 13px;
    font-weight: 300;
}

.lineone {
    border: .5px solid #a9a9a9;
    top: 0;
    position: sticky;
    top: 1vh;
    grid-row: 1/6;
    height: 80vh;
    grid-column: 2/3;
    width: .001vw;
    bottom: 2vh;
}

.projectdescription {
    margin-bottom: 48px
}

.projectdescription h5 {
    margin-bottom: 24px
}

.container {
    position: relative;
    padding: 0 7em 2em 7em
}

.spanthreecenter {
    grid-column: 1/4;
    justify-self: center
}

.imageindex {
    height: 40vh;
    object-fit: cover;
    width: 100%;
    border-radius: 20px;
    display: block
}

.index_body,
.index_body .content-container {
    background: #000;
    position: relative
}

.index_body .content-container,
.index_remix {
    background: 0 0;
    position: relative
}

@media (max-width:5000px) and (min-width:2499px) {
    .index .imggrid{
        grid-gap: 20vh 0vw;
    }
    .container {
        position: relative;
        padding: 6em 12em 1em 8em;
    }
    .imageindex {
        height: 62vh;
    }
    .projectdescription {
        margin-bottom: 48px
    }
    .biotext {
        width: 65vw;
    }
}
@media (max-width:2500px) and (min-width:1601px) {

    .container {
        position: relative;
        padding: 6em 12em 1em 8em
    }
    .imageindex {
        height: 52vh
    }
    .projectdescription {
        margin-bottom: 48px
    }
    .biotext {
        width: 50vw
    }
}

@media (max-width:1600px) and (min-width:1025px) {
    .container {
        position: relative;
        padding: 7vh 3vw 10vh 5vw;
    }
    .imageindex {
        height: 55vh;
    }
    .projectdescription {
        margin-bottom: 48px
    }
    .biotext {
        width: 46vw
    }
    .index .imggrid {
        grid-auto-rows: 90vh
    }
}

@media (max-width:1024px) and (min-width:768px) {
    .index .imggrid {
        grid-auto-rows: 87vh
    }
    .biotext {
        width: 65vw
    }
    .projectdescription {
        margin-bottom: 48px
    }
    .container {
        padding: 3vh 4vw 12vh 4vw
    }
    .imageindex {
        height: 37vh
    }
}

@media (max-width:767px) and (min-width:599px) {
    .projectdescription {
        margin-bottom: 48px
    }
    .biotext {
        width: 75vw
    }
    .index .imggrid {
        grid-auto-rows: 90vh
    }
}

@media (max-width:598px) and (min-width:0px) {
    .imageindex {
        height: 51vh;
        width: 100%
    }
    .index .imggrid {
        grid-auto-rows: 90vh
    }
    .index .imggrid {
        grid-auto-rows: 90vh
    }
    .container {
        padding: 5vh 11vw 8vh 10vw
    }
    .projectdescription {
        margin-bottom: 32px
    }
    .biotext {
        width: 70vw
    }
}

.one_column_grid,
.two_column_grid {
    display: grid;
    padding: inherit;
    background: #fff;
    grid-gap: 2rem;
    position: relative;
    padding-bottom: 10vh
}

.one_column_grid,
.three_column_grid,
.two_column_grid {
    display: grid;
    background: #fff;
    padding: inherit;
    padding: 5vh 0 0 0;
    grid-gap: 5rem;
    align-items: center;
    grid-template-rows: auto;
    position: relative
}

.two_column_grid {
    grid-template-columns: repeat(2, 1fr)
}

.three_column_grid {
    grid-gap: 39vh 4vw;
    grid-template-columns: repeat(3, 1fr);
}

.one_column_grid {
    grid-template-columns: repeat(1, 1fr)
}

.one_column_grid div,
.three_column_grid div,
.two_column_grid div {
    padding: 0
}

@media (max-width:768px) and (min-width:0px) {
    .one_column_grid div,
    .three_column_grid div,
    .two_column_grid div {
        padding: 4vh 0 7vh 0;
    }
    .caption {
    width: 80%;
    
    left: 3vw;
    align-items: BASELINE;
    
}
        .three_column_grid.mood div{
                  padding: 0;
  
        } 
        .carousel.flickity-enabled.is-draggable {
    width: 100vw;
}

    .index .imggrid,
    .three_column_grid,
    .two_column_grid {
        display: flex;
        flex-direction: column;
        grid-template-rows: auto
    }
    .lineone {
        display: none
    }
}

.fullscreen-bg {
    background: #fff;
    background-attachment: fixed;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    width: 100vw;
}

.earth_body {
    background-image: url(../images/earth2.gif)
}

.bb_body {
    background-image: url(../images/bb_home.jpg)
}

.bg_body {
    background-image: url(../images/bg_home.jpg)
}

.kfk_body {
    background-image: url(../images/kfk_home.gif)
}

.gif_body {
    background-image: url(../images/gif_home.gif)
}

.mva_body {
    background-image: url(../images/mva_home.jpg)
}

.emperical_body {
    background-image: url(../images/emperical_home.jpg)
}

.rg_body {
    background-image: url(../images/rg_home.jpg)
}

.horror_body {
    background-image: url(../images/horror_home.mp4)
}

.tedx_body {
    background-image: url(../images/tedx_11.mp4)
}

.bb_body,
.bg_body,
.earth_body,
.emperical_body,
.gif_body,
.horror_body,
.kfk_body,
.mva_body,
.rg_body,
.tedx_body {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    width: 100%
}
.fullscreen-bg video{
   object-fit: cover;
   width:;
   width: 100%;
}
.fullscreen-bg.mood-background video {
    width: 47%;
}
@media (max-width:1024px) and (min-width:0px) {
    .fullscreen-bg.mood-background video {
    object-fit: contain;
    width: 100%;
}}
.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    justify-content: center;
    bottom: 0;
    display: flex;
    left: 0;
    overflow: hidden;
    z-index: -100;
    width: 100vw;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    object-fit: cover;
    color: #000;
    background: #000;
    left: 0;
    min-width: 100vw;
    height: 100%
}

#hidden {
    display: none
}

.project_desc {
    height: 110vh;
    padding: 6em 4em 0 4em;
    top: 0;
    margin-top: 100vh;
    top: 0;
    flex-direction: column;
    position: sticky;
    align-items: center;
    background: #fff;
    display: flex
}

.projhead {
    ALIGN-SELF: baseline;
    width: 100%;
    margin: 0 0 0 4vw;
}

.Title_BodyInfo {
    display: flex;
    margin: 1vh 1vw 16vh 1vw;
}

.projbody {
    width: 120%
}

.process,
.processtwo {
    align-self: flex-start;
    margin: 4vh 2vw 21vh 6vw
}

.resume {
    grid-column: 1/3;
    grid-row: 2;
    width: 100%;
    margin: 1em 0 6em 0
}

.bg_desc .processtwo {
    padding: 2vh 0 14vh 1vw;
    margin: 0 0 0 1vw
}

.bg_desc .process {
    padding: 5vh 0 0 1vw;
    margin: 0 0 0 1vw
}

.smcolumns_desc {
    display: flex;
    margin-left: 25vw;
    flex-direction: row
}

.smcolumns_desc div {
    padding: 3em 2em 1em 0
}

.smcolumns_desc div .about_inner_columns div {
    padding: 0 2em 0 0;
    width: 9vw
}
@media (max-width:5000px) and (min-width:2499px) {

    .remix_desc .process {
        padding: 0 1em 4em 0
    }
    .process {
        align-self: flex-start;
        margin: 0 1em 9em 1em
    }
    .smcolumns_desc div {
        padding: 0 1em 0 0;
        width: 29vw
    }
    .smcolumns_desc div .about_inner_columns div {
        padding: 0 1em 0 0
    }
    .project_desc {
        height: 110vh;
        padding: 0vh 12vw 0 12vw;
        top: 0;
        margin-top: 100vh;
        top: 0;
        flex-direction: column;
        justify-content: center;
        position: sticky;
        align-items: center;
        background: #fff;
        display: flex;
    }
}
@media (max-width:2500px) and (min-width:1601px) {
    .remix_desc .process {
        padding: 0 1em 4em 0
    }
    .process {
        align-self: flex-start;
        margin: 0 1em 9em 1em
    }
    .smcolumns_desc div {
        padding: 0 1em 0 0;
        width: 29vw
    }
    .smcolumns_desc div .about_inner_columns div {
        padding: 0 1em 0 0
    }
    .project_desc {
        height: 110vh;
        padding: 12em 12em 0 12em;
        top: 0;
        margin-top: 100vh;
        top: 0;
        flex-direction: column;
        position: sticky;
        align-items: center;
        background: #fff;
        display: flex
    }
}

@media (max-width:1600px) and (min-width:1025px) {
    .smcolumns_desc div {
        padding: 0 0 1em 0;
        width: 30vw
    }
    .smcolumns_desc div .about_inner_columns div {
        padding: 0 1em 0 0
    }
}

@media (max-width:1024px) and (min-width:768px) {
    .smcolumns_desc div {
        padding: 0 1em 1em 0;
        width: 100%;
    }
    .smcolumns_desc div .about_inner_columns div{
        width:100%
    }
    .project_desc {
        padding: 5vh 1vw 3vh 1vw;
        margin-top: 80vh
    }
    .smcolumns_desc {
        margin-left: 3vw
    }
    .process {
        padding: 1vh 0 2vh 0
    }
    .projbody {
        width: 100%
    }
    .process {
        align-self: flex-start;
        margin: 1vh 2vw 15vh 6vw
    }
    .projhead {
        margin: 0 0 0 1em
    }
}

@media (max-width:767px) and (min-width:599px) {
    .project_desc {
        padding: 1em 2em 3em 2em;
        margin-top: 80vh
    }
    .Title_BodyInfo {
        padding: 5em 0 2em 1em
    }
    .process {
        padding: 1em 0 2em 1em
    }
    .projbody {
        width: 100%
    }
    .smcolumns_desc div .about_inner_columns div {
        padding: 0 2em 0 0;
        width: 9vw
    }
}

@media (max-width:598px) and (min-width:376px) {
    .smcolumns_desc {
        flex-direction: column
    }
    .smcolumns_desc div {
        padding: 0 4em 2em 0
    }
    .project_desc {
        padding: 4em 1em 3em 1em;
        margin-top: 90vh;
        height: 86vh
    }
    .Title_BodyInfo,
    .remix_desc .Title_BodyInfo {
        padding: 1em 0 0 1em;
        margin-bottom: 1vh;
        flex-direction: column
    }
    .process,
    .remix_desc .process {
        padding: 2em 1em 1em 2em;
        margin: 0
    }
    .pro {
        display: none
    }
    .projectdesc .pro {
        display: none
    }
    .projbody {
        width: 100%
    }
    #hidden {
        display: block;
        position: relative;
        background: #000;
        margin-top: 0
    }
    .projhead {
        margin: 0
    }
    .flexrow {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        width: 100%
    }
    #hidden .smcolumns_desc div {
        padding: 0 0 3em 0
    }
    .smcolumns_desc div .about_inner_columns div {
        padding: 0 1em 0 0
    }
    .smcolumns_desc div .about_inner_columns div {
        padding: 0 2em 0 0;
        width: 100vw
    }
}

@media (max-width:375px) and (min-width:0px) {
    .smcolumns_desc div .about_inner_columns div {
        padding: 0 2em 0 0;
        width: 100vw
    }
    .smcolumns_desc {
        flex-direction: column;
        margin-left: 4vw
    }
    .smcolumns_desc div {
        padding: 0 4em 2em 0
    }
    .project_desc {
        padding: 2em 1em 3em 0;
        margin-top: 80vh;
        height: 86vh
    }
    .Title_BodyInfo {
        padding: 1em 0 0 1em;
        margin-bottom: 1vh;
        flex-direction: column
    }
    .process,
    .remix_desc .process {
        padding: 2em 1em 1em 2em;
        margin: 0
    }
    .pro {
        display: none
    }
    .projectdesc .pro {
        display: none
    }
    .projbody {
        width: 100%
    }
    #hidden {
        display: block;
        background: #000;
        margin-top: 0;
        position: relative;
        height: 100%
    }
    .projhead {
        margin: 0
    }
    #hidden .smcolumns_desc div {
        padding: 0 0 2em 0
    }
}

.bio {
    grid-template-rows: 10vh;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 4rem;
    padding: 9em 3em 16em 18em;
    height: 100%;
    top: 0;
    width: 100vw
}

.bio div {
    padding: 0
}

.bio_img {
    height: 40vh;
    filter: grayscale(1);
    grid-column: 2/5;
    grid-row: 1;
    transition: ease 3s
}

.bio_img:hover {
    height: 55vh;
    filter: grayscale(0)
}

.bio_head {
    letter-spacing: .01em;
    grid-column: 1/3;
    grid-row: 1
}

.bio_body {
    font-size: 1rem;
    color: #fff;
    align-self: baseline;
    margin-left: 6vw;
    justify-self: flex-start;
    grid-row: 2;
    align-self: center;
    width: 61%;
    grid-column: 2/5;
    font-family: fonttwo
}

.smcolumns_about {
    color: #fff;
    grid-column: 1/3;
    justify-content: space-evenly;
    display: flex;
    grid-row: 2;
    margin-top: 19vh;
    align-self: right;
    justify-self: flex-start;
    flex-direction: column
}

.about_inner_columns h3 {
    font-size: .9rem;
    line-height: 1.75em;
    font-family: font-family: Neue Haas Grotesk Text Pro;
    font-weight: 500
}

.pro-hidden .smcolumns_desc h4 {
    color: #fff
}

.smcolumns_about h4 {
    color: #fff
}

.smcolumns_about h4,
.smcolumns_desc h4 {
    font-family: font-family: Neue Haas Grotesk Text Pro;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 0;
    letter-spacing: .05em;
    font-variant: small-caps;
    text-transform: lowercase
}

.about_inner_columns {
    display: flex;
    flex-direction: row
}

.about_inner_columns div {
    padding: 0 3em 4em 0
}

.experience {
    background-color: #fff;
    display: flex;
    width: 100vw;
    flex-direction: row
}

.year {
    color: #000;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .04em
}

.ExperienceHeader {
    display: flex;
    flex-direction: row
}

.experienceone {
    display: flex;
    margin-bottom: 11vh;
    align-items: center;
    padding: 1rem 2rem 1rem 1rem
}

.experienceone div:nth-child(1) {
    margin-right: 3vw;
    align-items: stretch;
    width: 80px
}

.ExperienceHead {
    padding: 5em 5em 5em 5em
}

.experience_container {
    display: flex;
    margin-top: 24vh;
    flex-direction: column;
    width: 100vw
}

.bio_body {
    margin-left: 0
}

@media (max-width:5000px) and (min-width:2499px) {

    .bio_body {
        margin-left: 5vw
    }
    .smcolumns_about h4,
    .smcolumns_desc h4 {
        font-size: 1.65rem
    }
    .bio {
        grid-template-rows: 10vh;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 4rem;
        padding: 9em 5em 16em 13em;
        height: 100%;
        top: 0;
        width: 100vw
    }
    .about_inner_columns h3 {
        font-size: 1.2rem;
        line-height: 1.75em
    }
}
@media (max-width:2500px) and (min-width:1601px) {
    .bio_body {
        margin-left: 5vw
    }
    .smcolumns_about h4,
    .smcolumns_desc h4 {
        font-size: 1.65rem
    }
    .bio {
        grid-template-rows: 10vh;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 4rem;
        padding: 9em 5em 16em 13em;
        height: 100%;
        top: 0;
        width: 100vw
    }
    .about_inner_columns h3 {
        font-size: 1.2rem;
        line-height: 1.75em
    }
}

@media (max-width:1600px) and (min-width:1025px) {
    .bio_body {
        margin-left: 12vw
    }
    .bio {
        grid-template-rows: 10vh;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 4rem;
        padding: 9em 5em 17em 9em;
        height: 100%;
        top: 0;
        width: 100vw
    }
}

@media (max-width:1024px) and (min-width:768px) {
    .bio_body {
        margin-left: 13vw
    }
    .bio {
        grid-template-rows: 10vh;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 4rem;
        padding: 9em 3em 16em 18em;
        height: 100%;
        top: 0;
        width: 100vw
    }
    .ExperienceHead {
        padding: 3em 6em 0 2em
    }
    .experience_container {
        margin-top: 3vh;
        padding: 3em 3em 4em 4em
    }
    .about_inner_columns h3 {
        font-size: .75rem;
        line-height: 2em
    }
    .bio {
        padding: 12vh 5vw 3vh 7vw
    }
}

@media (max-width:767px) and (min-width:599px) {
    .bio_body {
        margin-left: 0
    }
    .experienceone div:nth-child(1) {
        width: 67px
    }
    .experience_body p {
        font-size: 1.3rem;
        line-height: 2em
    }
    .experience {
        flex-direction: column
    }
    .ExperienceHead {
        padding: 2em 0 0 1em
    }
    .experience_container {
        margin-top: 3vh;
        padding: 2em 3em 4em 0
    }
    .experience h1 {
        font-size: 2rem
    }
    .logo {
        width: 129%
    }
    .bio {
        grid-gap: 0;
        flex-direction: column;
        display: flex;
        padding: 8vh 4vw 10vh 5vw
    }
    .bio_head {
        z-index: 3;
        width: 100%;
        grid-row: 1;
        grid-column: span1
    }
    .bio_img {
        grid-column: 1/3
    }
    .smcolumns_about {
        grid-column: span 1;
        grid-row: 5
    }
    .bio_body {
        margin-top: 10vh;
        margin-left: 0;
        width: 100%;
        align-self: unset
    }
    .about_inner_columns h3 {
        color: #fff;
        font-size: .9rem;
        line-height: 1.9em
    }
    .bio_img {
        margin-top: 0;
        transition: none;
        height: 35vh;
        z-index: 1;
        grid-column: span 1;
        grid-row: 2
    }
    .bio_img:hover {
        height: 30vh
    }
    .resume {
        grid-row: 3
    }
}

@media (max-width:598px) and (min-width:376px) {
    .experienceone div:nth-child(1) {
        width: 67px
    }
    .experience_body p {
        font-size: 1rem;
        line-height: 2em
    }
    .experience {
        flex-direction: column
    }
    .ExperienceHead {
        padding: 2em 0 0 1em
    }
    .experience_container {
        margin-top: 3vh;
        padding: 2em 3em 4em 0
    }
    .experience h1 {
        font-size: 2rem
    }
    .logo {
        width: 129%
    }
    .bio {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0;
        flex-direction: column;
        display: flex;
        padding: 6vh 5vw 4vh 5vw
    }
    .bio_head {
        grid-column: span 1;
        z-index: 3
    }
    .bio_img {
        grid-column: 1/3
    }
    .smcolumns_about {
        grid-column: span 1;
        grid-row: 4
    }
    .bio_body {
        margin-top: 10vh;
        grid-row: 3;
        width: 83%;
        grid-column: span 1;
        align-self: unset
    }
    .about_inner_columns h3 {
        color: #fff;
        font-size: .9rem;
        line-height: 1.9em
    }
    .bio_img {
        margin-top: 10vh;
        transition: none;
        height: 30vh;
        z-index: 1;
        grid-column: span 1;
        grid-row: 2
    }
    .bio_img:hover {
        height: 30vh
    }
}

@media (max-width:375px) and (min-width:0px) {
    .experienceone div:nth-child(1) {
        width: 67px
    }
    .experience_body p {
        font-size: 1rem;
        line-height: 2em
    }
    .experience {
        flex-direction: column
    }
    .ExperienceHead {
        padding: 2em 0 0 1em
    }
    .experience_container {
        margin-top: 3vh;
        padding: 2em 3em 4em 0
    }
    .experience h1 {
        font-size: 2rem
    }
    .logo {
        width: 129%
    }
    .bio {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0;
        display: flex;
        padding: 3em 1em 4em 1em;
        flex-direction: column
    }
    .bio_head {
        grid-column: span 1;
        z-index: 3
    }
    .bio_img {
        grid-column: 1/3
    }
    .smcolumns_about {
        grid-column: span 1;
        grid-row: 4;
        padding: 1rem 1rem 1rem 1rem
    }
    .bio_body {
        margin-top: 10vh;
        grid-row: 3;
        width: 100%;
        grid-column: span 1;
        align-self: unset
    }
    .about_inner_columns h3 {
        color: #fff;
        font-size: 1rem;
        line-height: 1.9em
    }
    .bio_img {
        margin-top: 10vh;
        transition: none;
        height: 30vh;
        z-index: 1;
        grid-column: span 1;
        grid-row: 1
    }
    .bio_img:hover {
        height: 30vh
    }
}

.carousel.flickity-enabled.is-draggable {
    grid-column: 1/4;
    height: 100vh;
}

/*
     FILE ARCHIVED ON 02:38:08 Jan 04, 2022 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 12:55:32 Apr 06, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.764
  exclusion.robots: 0.065
  exclusion.robots.policy: 0.052
  esindex: 0.014
  cdx.remote: 30.914
  LoadShardBlock: 47.93 (3)
  PetaboxLoader3.resolve: 46.173 (2)
  PetaboxLoader3.datanode: 82.079 (5)
  load_resource: 107.355
  loaddict: 36.208
*/