html{scroll-behavior: smooth;
    font-size:16px;}
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,figure,legend,input,textarea,p,blockquote,th,td{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:normal}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:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
  a{
      cursor: pointer;
  text-decoration: none;
  }
  .process a{font-family: fontthree;}
  video{max-width:100%;
    max-height:auto;}

  html, body {
      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: black;
    width: 100vw;
    justify-content: space-around;
    flex-direction: column;
    opacity: 0.85;
    display: flex;
    align-items: center;
    z-index: 99999;
}
img {
    max-width:100%;
    max-height:auto;
    }
    video {
max-width: 100%;
max-height: auto;
    }
  
.containfit{
    height: 40vh;
    object-fit: contain;
    width: 100%;
}
.paddingtop{
    padding-top: 10vh;
}
.coverimage,
.objectfitcover{
    object-fit: cover;
    width: 100vw;
}  
.containimage{
object-fit: cover;
}
.kfk_body  .full{
    background-color: gray;
}

.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:0em 12em 0em 12em;
}
.imagepadding{
    padding:0em 4em 0em 4em;
}
.paddingbottom15vh{
    padding-bottom: 20vh;
}




.image{
display: flex;
} 
.fullvideo{
   display: flex;
   align-content: start;
   height: 100vh;

}


.image img{object-fit:contain;
} 
.padding{padding: 0em 0em 0em 0em;}
.imagepadding {
padding: 0em 9em 0em 9em;
}
.ux_body .projbody span{
    font-weight: 600;
    font-family: neue-haas-grotesk-display, sans-serif;
    }
    .spanthin{
        font-weight: 200;
    }
  
.blackback{
    background-color: black;
}
  

/*typefaces and text sizes */
    @font-face {
font-family: fontone;
src: url(fonts/SuisseIntl-Book.ttf);
     }

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

    @font-face {
font-family: Fonttwo;
src: url(fonts/SuisseIntl-Light.ttf);
     }
     @font-face {
font-family: Fontfour;
src: url(fonts/SangBleuEmpireTrial-Medium.ttf);
     }
h2 {
    font-family: neue-haas-grotesk-display, sans-serif;
    letter-spacing: .03em;
    line-height: .9em;
    font-weight: 500;
    font-size: 1.2em;
    margin-bottom: 2vh;
}


h1{
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    scroll-behavior: initial;
    user-select: none; /* Standard */
    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;
}
.indexbio h1{color: white;}
.projhead h1{font-family: Fontone;
    font-size: 2.9rem;
    font-weight: 500;
    margin-right: 6vw;
    color: black;
    letter-spacing: 0.96px;
    line-height: 3rem;}

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

  .smcolumns_about h4{color: white;} 
 
  .about_inner_columns h3{color: white;} 
  .smcolumns_desc h4{color: black;}
  .smcolumns_desc .about_inner_columns h3{color: black;}


.biotext h6{color: white;
    font-size: 2rem;
}}
  h6{
    font-family: Neue Haas Grotesk Text Pro;
    font-style: normal;
    font-weight: normal;
    font-size: .85rem;
    line-height: 3em;
    letter-spacing: 0.04em;
    color: #000000;
}
footer{
    height: 10vh;
    line-height: 40vh;
    padding: 5rem;
}
.footer h4,
.footer a{
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: white;
    line-height: 6vh;
    font-weight: 300;
    font-size: 1.5rem;
}
.footer{line-height: 12vh;height: 20vh;padding: 3em 1em 2em 6em;background-color: black;}
.bio_head h3{
    font-size: 4rem;
    color: white;
    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: 0.04em;
    word-wrap: break-word;
    word-wrap: break-word;
    color: #000000;
    }

  h5{
    font-family: neue-haas-grotesk-display, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 34px;
    letter-spacing: 0.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: normal;
    font-size: .85rem;
    line-height: 3em;
  /* or 28px */
    letter-spacing: 0.04em;
    color: #000000;
    }
    h5{
      font-family: neue-haas-grotesk-display, sans-serif;
      font-style: normal;
      font-weight: 500;
      font-size: 13px;
      line-height: 23px;
  /* identical to box height */
      letter-spacing: 0.09em;
      color: #302F2F;
      }
.bio_body p{
    width: 47vw;
}
  p{
        font-family: Fonttwo;
        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: black;
        letter-spacing: 0.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: 2rem;
        line-height: 1em;
        letter-spacing: 0.04em;
        word-wrap: break-word;
        word-wrap: break-word;
        color: #000000;
        }

        @media (max-width:1920px) and (min-width:1601px) {
            h1{
                font-size: 3.4rem;
                line-height: 1.6em;
            }
            .projectdescription h4{
                font-size: 3rem;
                line-height: 1em; 
            }
            h5{
            font-size: 1rem;
            line-height: 2em;
            }
      P{
          font-size:2rem;
      }
      .projhead h1{
          font-size: 4rem;
          line-height: 3.8rem;
      }
      .process a{font-size: 1.4rem;}
            
        }
        @media (max-width:1600px) and (min-width:1025px) {
    h1{
        font-size: 2.15rem;
        letter-spacing: .05em;
        line-height: 1.5em;
    }
  
    h2{font-size:1.2rem;}

}


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

    h1{
        font-size: 1.8rem;
    }
 
.projhead h1{
    font-size: 2.3rem;
    line-height: 2.2rem;
    margin-bottom: 6vh;
}
p,
.ux_body p, .bg_body p{font-size: 1.1rem;}
 .experience h1{
        font-size:2rem;
    }
    h4{font-size:2.5rem;}

}
@media (max-width:767px) and (min-width:599px) {
    .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;
}
        
    p,
    .ux_body p, .bg_body p{font-size: 1.1rem;}
    .projhead h1{
        font-family: Fontone;
        font-size: 2.9rem;
        font-weight: 500;
        margin-right: 6vw;
        color: black;
        letter-spacing: 0.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;}
        h3{ font-size: 1.5rem;
            line-height: 3em;
            font-family: neue-haas-grotesk-display, sans-serif;}
    
    }
 @media (max-width:598px) and (min-width:376px) { 
    .bio_body p {
        width: 87vw;
    }
        .footer h4,
        .footer a{
            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: black;
    letter-spacing: 0.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;line-height: 4rem;}
    h3{ font-size: 1.5rem;
        line-height: 3em;
        font-family: neue-haas-grotesk-display, sans-serif;}
        .smcolumns_desc h4{color: white;}
        .smcolumns_desc .about_inner_columns h3{color: white;}
}
@media (max-width:375px) and (min-width:0px) { 
    .bio_body p {
        width: 87vw;
    }
    .footer h4,
    .footer a{
        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: black;
letter-spacing: 0.96px;
line-height: 3rem;
}
.projhead h1{font-size: 1.6rem;line-height: 1.6rem;margin-bottom: 3vh;}
    
p{font-size: 1.2rem;line-height: 1.64em;}
h4{font-size: 1.75rem;}
h5{font-size: .65rem;}

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

.dropdown h3{font-size: 4.05rem;line-height: 4rem;}
h3{ font-size: 1.5rem;
    line-height: 3em;
    font-family: neue-haas-grotesk-display, sans-serif;}
    .smcolumns_desc h4{color: white;}
    .smcolumns_desc .about_inner_columns h3{color: white;}
}

/* close type section*/

  



/*nav change section*/

.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: #000000;
    transition: all .2s linear;
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    text-decoration: none;
    color: black;
}


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: white;
    
    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: white;

    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 0.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(0px, 1px);
      }
 
 .dropdown{
    text-decoration: none;
    margin: 0em 2em 4em 3em;
    border-bottom: .1px solid black;
    }

.dropdown h3{font-size: 4.05rem;line-height: 4rem;}

  .dropdown:hover .nav-links-drop {
       display: none;
  }

}

/*close nav change section*/
/* open interior full image  section*/
.full {
    height: 100vh;
    display: flex;
    position: sticky;
    top: 0;
    background: white;
}
.bg_full{
    width: 100vw;
    object-fit: cover;
}

.remix_body .full,
.tedx_body .full {

    background: black;
}
.bb_body .full{
}



@media (max-width:1920px) and (min-width:1601px) {
  
}
@media (max-width:1600px) and (min-width:1025px) {


}


@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: white;
}
}







/*open index section*/

.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: white;
}
.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;
    t: center;
}
.biotext a{
    color: white;
    border-bottom: 9px white;
    font-family: fontthree;
    color: white;
    border-bottom: .25px solid currentColor;
    display: inline-block;
    line-height: 4.8vh;
}
.lineone{
   border: .5px solid darkgray;
   top: 0;
   position: sticky;
   top: 2vh;
   height: 82vh;
   width: .001vw;
   bottom: 2vh;
}
.projectdescription{margin-bottom: 10vh;}
.container{
    position: relative;
    padding: 0em 7em 2em 7em;
}
.spanthreecenter{grid-column: 1/4;
justify-self: center;}


.imageindex{
    height: 40vh;
    object-fit: cover;
    width: 100%;
}

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


@media (max-width:1920px) and (min-width:1601px) {
    .container {
        position: relative;
        padding: 7em 4em 2em 4em;
    }
    .imageindex{
        height: 52vh;
    }
.biotext{width: 58vw;}
}
@media (max-width:1600px) and (min-width:1025px) {
    .container {
        position: relative;
        padding: 0em 7em 2em 7em;
    }
    .imageindex{
        height: 46vh;
    }
    .biotext{
        width: 46vw;
    }

}


@media (max-width:1024px) and (min-width:768px) {
    .biotext {
        width: 65vw;
    }
    .container {
        padding: 03em 3em 2em 3em;
    }
}
@media (max-width:767px) and (min-width:599px) {
    .container {
        padding: 2em 1em 6em 1em;}
        .projectdescription{    margin-bottom: 8vh;}  
        .biotext {
            width: 75vw;}
    }
     @media (max-width:598px) and (min-width:0px) { 

            .imageindex{height: 50vh;}
            

        .container {
            padding: 2em 1em 6em 1em;}
            .projectdescription{    margin-bottom: 8vh;}
            .biotext {
                width: 85vw; }  
}






/*interior change sections*/



/* interior  sections grid*/
.two_column_grid, .one_column_grid {
    display: grid;
    padding: inherit;
    background: white;
    grid-gap: 2rem;
    position: relative;
    padding-bottom:10vh;
}
.two_column_grid, 
.one_column_grid,
.three_column_grid {
    display: grid;
    background: white;
    padding: inherit;
    padding: 5vh 0vw 0vh 0vw;
    grid-gap: 5rem;
    align-items: center;
    grid-template-rows: 100;
    position: relative;
}
.two_column_grid{
    grid-template-columns: repeat(2, 1fr);
}

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



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

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

/* close interior  grids section*/

/* open interior background section*/

.fullscreen-bg {
    background:white;
    background-attachment: fixed;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    min-width: 100vw;
}
.earth_body{background-image: url("images/earth/earth2.gif");}
 .bb_body{background-image:url("images/index/bb_home.jpg");}
 .bg_body{background-image:url("images/index/bg_home.jpg");}
 
 .kfk_body{background-image:url("images/index/kfk_home.gif");}
  .gif_body{
   background-image: url("images/index/gif_home.gif");
 }
 .mva_body{  background-image: url("images/index/mva_home.jpg");
 }
  .emperical_body{background-image: url("images/index/emperical_home.jpg");}
  .rg_body{background-image: url("images/index/rg_home.jpg");
  }
  .horror_body{background-image: url("images/index/horror_home.mp4");}
  .tedx_body{background-image: url("images/index/tedx/11.mp4");}
 
  .emperical_body,
  .tedx_body,
  .bg_body,
  .bb_body,
  .horror_body,
  .kfk_body,
  .earth_body,
  .mva_body,
  .gif_body,
  .rg_body{
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   background-repeat: no-repeat;
 width:100%;}
 
 .fullscreen-bg {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   z-index: -100;
   min-width: 100vw;
 }
 
 .fullscreen-bg__video {
   position: absolute;
   top: 0;
   color: black;
   background: black;
   left: 0;
   min-width: 100vw;
   height: 100%;
 }
 
/* close interior background section*/

/* open interior info section*/
#hidden{display:none;}
.project_desc {
    height: 110vh;
    padding: 4em 4em 0em 4em;
    top: 0;
    margin-top: 100vh;
    top: 0;
    flex-direction: column;
    position: sticky;
    align-items: center;
    background: white;
    display: flex;
}

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


.Title_BodyInfo {
    display: flex;
    margin: 1em 1em 4em 1em;
}
.remix_desc .Title_BodyInfo{
    padding: 1em 1em 7em 1em;
}

.projbody{width: 120%;}
  
.process{
    align-self: flex-start;
    margin: 2em 1em 8em 1em;
    }
    .resume{
    grid-column: 1/3;
    grid-row: 2;
    width: 100%;
    margin: 1em 0em 6em 0em;
    }
.remix_desc .process{
        padding: 0em 1em 0em 0em;
    }
    

.smcolumns_desc{
        display: flex;
        margin-left: 25vw;
        flex-direction: row;
    }
.smcolumns_desc div{padding: 3em 2em 1em 0em;}
    .smcolumns_desc div .about_inner_columns div{
        padding: 0em  2em  0em  0em;
        width: 9vw;
    }
    .flexrow{
        display: unset;
   
    }
  
    @media (max-width:1920px) and (min-width:1601px) {
        .remix_desc .process {
            padding: 0em 1em 4em 0em;
        }
        .process {
         
            align-self: flex-start;
            margin: 0em 1em 9em 1em;
        }
        .smcolumns_desc div {padding: 0em 1em 0em 0em;width: 29vw;}
        .smcolumns_desc div .about_inner_columns div {
            padding: 0em 1em 0em 0em;
        }
        
        .project_desc {
            height: 110vh;
            padding: 12em 12em 0em 12em;
            top: 0;
            margin-top: 100vh;
            top: 0;
            flex-direction: column;
            position: sticky;
            align-items: center;
            background: white;
            display: flex;
        }
    }
    
    @media (max-width:1600px) and (min-width:1025px) {

        .smcolumns_desc div {padding: 0em 0em 1em 0em;width: 30vw;}
        .smcolumns_desc div .about_inner_columns div {
            padding: 0em 1em 0em 0em;
        }

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

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

        
          
}

/* CLOSE interior info section*/






/* Open About section*/

.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: 0vh 0vw 0vh 0vw;
    }
.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: 0.01em;grid-column: 1/3;grid-row: 1;}
.bio_body{
    font-size: 1rem;
    color: white;
    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: white;
    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: white;}
.smcolumns_about h4{ color: white;}
.smcolumns_about h4,
.smcolumns_desc h4{
    font-family:    font-family: Neue Haas Grotesk Text Pro;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 0rem;
    letter-spacing: .05em;
    font-variant: small-caps;
    text-transform: lowercase;
}
.about_inner_columns{
    display: flex;
    flex-direction: row;
}
.about_inner_columns div{
    padding: 0em 3em 4em 0em;
}




.experience{background-color: white;display: flex;width: 100vw;flex-direction: row;}
    .year
    {
        color: black;
        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{
       }
        .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: 0vw;
}

@media (max-width:1920px) 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 0em 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: 0vw;
      }
    .experienceone div:nth-child(1){
        width: 67px;
    }
    .experience_body p {
        font-size: 1.3rem;
        line-height: 2em;
    }
    .experience{flex-direction: column;}

    .ExperienceHead {
        padding: 2em 0em 0em 1em;
    }
    .experience_container{
        margin-top: 3vh;
        padding: 2em 3em 4em 0em;
    }
    .experience h1{
        font-size:2rem;
    }
    .logo{
        width: 129%;
    }
    .bio{
        grid-gap: 0rem;
        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: white;
        font-size: .9rem;
        line-height: 1.9em;
        }
              .bio_img{margin-top: 0vh;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 0em 0em 1em;
        }
        .experience_container{
            margin-top: 3vh;
            padding: 2em 3em 4em 0em;
        }
        .experience h1{
            font-size:2rem;
        }
        .logo{
            width: 129%;
        }
        .bio{
            grid-template-columns: repeat(1, 1fr);
            grid-gap: 0rem;
            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: white;
            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 0em 0em 1em;
    }
    .experience_container{
        margin-top: 3vh;
        padding: 2em 3em 4em 0em;
    }
    .experience h1{
        font-size:2rem;
    }
    .logo{
        width: 129%;
    }
    .bio{
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0rem;
        padding: 3em 1em 4em 1em;
        }
               .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: white;
        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;
              }

      
     
      
}