body { overflow-x:hidden; margin:20px; padding-bottom: 20px;}


.navigation {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  width: 100vw;
  padding: 1rem 2vw;

  display: flex;
  justify-content: space-between;
  align-items: center;

  font-family: "Solway", serif;
  font-size: 1.2em;
  line-height: 1em;
  color: black;
}

.bg {
  position: fixed;
  background-color: white;
  width: 100vw;
  height: 3rem;
  top: 0;
  left: 0;
  z-index: 0;
}

/* LEFT SIDE */
.navi{  padding-left: 1em ;
  z-index:2;
}
.navi img {
  height: 40px;
}

/* RIGHT SIDE MENU */
.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
.nav{
  position: fixed;
  top: 0;
  right: 17px;
  padding: 1rem 2vw;
  color: black;
  z-index:2;
  word-spacing: 5em;
}

/* LINKS */
.nav a,
.dropdown-btn {
  text-decoration: none;
  color: black;
  font-family: "Solway", serif;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

/* DROPDOWN */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;

  list-style: none;
  margin: 0;
  padding: 0.5rem 0;

  background: white;
  border: 1px solid #ddd;
  min-width: 160px;
}

.dropdown-menu li {
  padding: 0.5rem 1rem;
}

.dropdown-menu li a {
  color: black;
  display: block;
}

/*.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}*/



/*NAVIGATION*/

/*  .navigation {
  position: fixed;
  top: 5px; left: 0; z-index: 1000;
  width: 100vw;
  padding: 1rem 2vw;

  font-family: "Solway", serif; font-weight: 400; font-style: normal;
  font-size: 1.2em; line-height:1em;
  color: black;
  height:2.3vw;
}
.bg{
    position:fixed;
    background-color:white;
    width:100vw;
    height:3rem;
    top:0;
    left:0;
}

.navi{
  position: fixed;
  top: 0;
  left: 15px;
  padding: 1rem 2vw;
  color: black;
  z-index:2;
}
.navi img{ height:35px }
.nav{
  position: fixed;
  top: 0;
  right: 17px;
  padding: 1rem 2vw;
  color: black;
  z-index:2;
  word-spacing: 5em;
}


.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-links a,
.dropdown-btn {
  text-decoration: none;
  color: black;
  font-family: sans-serif;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  list-style: none;
  margin: 0;
  padding: 0.5rem 0;

  background: white;
  border: 1px solid #ddd;
  min-width: 160px;
}

.dropdown-menu li {
  padding: 0.5rem 1rem;
}

.dropdown-menu li a {
  color: black;
  display: block;
}*/





a { color:black; text-decoration: none; transition: opacity 0.25s ease; color: inherit; }
a:hover { color: #a2d2fc; text-decoration: none; }
.link{ color:#F4559A; }








/*TYPOGRAPHY*/
h1 {
  font-family: "Solway", serif; font-weight:400; font-style: normal;
  font-size: 2em; line-height: ; 
}
.projects{
    bottom:7em;
    font-family: "Solway", serif; font-weight:300; font-style:normal;
    font-size: 1.1em;
    line-height: 1.4em;
    position: fixed;
    left: 3em;
    width: 15em;
}



.intro{ 
  font-family: "Solway", serif; font-weight:400; font-style: normal;
  font-size: 1.2em; line-height: ;
  position:absolute; top:7vw; left:3em; width:20vw }







.image-container {
  position: fixed;
  right: 0vw;
  top: 7vw;
  width: 70vw;
  height: auto;
}

.full-slide{ position:absolute; top:-3vw; }
.slide {
  position: absolute;
  width: 100%;
  height: auto;
  opacity: 0;
  /*transition: opacity 0.6s ease;*/
}

.slide.active {
  opacity: 1;
}


.fade-in {
  opacity: 0;
  transform: translateY(60px) scale(0.98);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}


.project-item {
  display: block;
  color: #888;
}

.project-item:hover {
  color: #a2d2fc;
}

.project-item.active {
  color: black;
}

.section.img-grid{
   padding-bottom:0;
}







/*SIDE BAR*/

.project-info{
    z-index: 100;
    position: fixed;
    width: 3em;
    height: 100vw;
}

.rectangle {
    position: absolute;
    left: -20px;
    top: -10px;
    width: 30em;
    height: 110vh;
    background-color: white;
}


.title {
   position:relative;
   width:300px;
   margin-top:7rem;
   left:50px;
   /*margin-bottom:1em;*/
   line-height: 1;
}

.overview {
    font-family: "Solway", serif; font-weight:300; font-style:normal;
    font-size: 1em;
    line-height: 1.6em;
    position: absolute;
    left: 50px;
    width: 25em;
}

.overview-section{ font-weight:500; margin-top: 2em; }
.overview-info{ font-weight:300; margin-top: 0.5em;
}

.copyright{ font-weight:300; font-size:0.7em; margin-top: 2.5em; }



/*page flow*/
.project-layout{}

.section { 
    font-family: "Solway", serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1em;
    line-height: 1.6em;

    position: relative;

    margin: 6vw 0 6vw 30vw;
    left: 0;
}





  h3 { position:relative; left:1.5vw;font-size:1.2em; }

.section-caption{
   width:60vw;
   line-height:1.8em;
   position:relative;
   left:1vw;

   column-count: 2;
   column-gap: 3vw;

   display:block;
   padding-bottom: 4vw;
}

/*navigation within page flow*/
.navigating{ position:relative;width:100% }
.back{ 
  font-family: "Solway", sans-serif;
  font-size:1.2em;
  position: absolute;
  left:0px;
  margin-top: 1vw;
  color: black;
  width: 20%;}
.go{ 
  font-family: "Solway", sans-serif;
  font-size:1.2em;
  position: absolute;
  right:-30px;
  margin-top: 1vw;
  color: black;
  width: 20%;}




.tl{top:105vw}
.th{top:95vw; }






.full-bleed{ position:absolute; width:100%; left: 50px}
.content{ position:absolute; }

.img-grid{
    position: relative;
    left: 30vw;
    width: 60vw;
    height: auto;
    overflow: visible;
    display: flex;
    justify-content: flex-end;
    padding-right: 6vw;
   padding-bottom:2vw;
}

.pg1{ min-height:125vw; }
.pg2{ min-height:190vw; }
.pg3{ min-height:100vw; }
.pg4{ min-height:103vw; }
.pg5{ min-height:60vw; }
.pg6{ min-height:143vw; }
.pg7{ min-height:40vw; }
.pg8{ min-height:50vw; }
.pg9{ min-height:200vw; }
.pg10{ min-height:82vw; }
.pg11{ min-height:165vw; }
.pg12{ min-height:15vw; }
.pg13{ min-height:3vw; }
.pg14{ min-height:97vw; }
.pg15{ min-height:11vw; }
.pg16{ min-height:115vw; }
.pg17{ min-height:105vw; }
.pg18{ min-height:220vw; }



.n1{ left:0; top:170vw;}
.tk1-1{ left:0; top:0vw;}
.n2 { width:40%; left:1vw; top:60vw; }
.n3{ width:70%; right:0vw; top:50vw; }
.n4{ width:40%; right:0vw; top:110vw; z-index:-10 }
.n5{ width:56%; left:-5vw; top:110vw;z-index:-9}
.n6{ width:56%; left:-5vw; top:134vw;z-index:-10}
.n7{ left:0; top:175vw;}

.tk1{ left:0; top:7rem;}
.tk1-1{ left:0; top:0vw;}
.tk2 { width:50%; left:0vw; top:49vw; }
.tk3{ width:30vw; right:0vw; top:92vw; }
.tk4{ width:50%; left:10vw; top:78vw; }
.tk5{  left:0vw; top:125vw; }

.h1{ left:0vw; top:5vw; }
iframe { position: relative; width: 65vw; height: 36.56vw; }
.h2{ top:147vw; left:0 }
.h3{  width:30vw; left:10vw; top:60vw; z-index:10; }
.h4{ width:30vw; left:35vw; top:47vw; }
.h5{ width:30vw; left:2vw; top:88vw; z-index:11; }
.h6{ width:30vw; left:25vw; top:100vw; z-index:12; }
.h7{ width:40vw; left:26vw; top:120vw; }
.h8{ width:60vw;left:0vw; top:0 }
.h9 { width:27vw; left:4vw; top:43vw; }
.h10{ width:27vw; left:35vw; top:43vw; }
.h11{ width:27vw; left:4vw; top:63vw; }
.h12{ width:27vw; left:35vw; top:63vw; }

.b1 { width:32vw; left:0vw; top:52vw; }
.b2{ width:32vw; left:34vw; top:52vw; }
.b3{ width:32vw; left:0vw; top:73vw; }
.b4{ width:32vw; left:34vw; top:73vw; }
.b5{ width:23vw;left:0vw; top:47vw; }
.b6{ width:20vw; left:23vw; top:47vw; }
.b7{ width:22vw; left:43vw; top:50vw; }
.b8{ top:80vw; left:0; }
.b9 { border: 2px solid #555; width:31vw; left:0vw; top:0vw; }
.b10{ border: 2px solid #555; width:31vw; left:34vw; top:0vw; }
.b11{ border: 2px solid #555; width:31vw; left:0vw; top:27vw; }
.b12{ border: 2px solid #555; width:31vw; left:34vw; top:27vw; }
 
.tl1{ left:0; top:50vw }
.tl2{ left:0; top:100vw }

.t1 { width:42vw; left:0vw; top:45vw; }
.t2 { width:22vw; left:44vw; top:45vw; }
.t3{  height:26vw; left:0vw; top:75vw; }
.t4 { height:26vw; left:22.5vw; top:75vw; }
.t5 { height:26vw; left:47.5vw; top:75vw; }

.web1{
    width:31.5vw;
    left:0;
    top:45vw;
}
.web2{
    width:31.5vw;
    left:33.5vw;
    top:45vw;
}
.web3{
    width:31.5vw;
    left:0;
    top:65vw;
}
.web4{
    width:31.5vw;
    left:33.5vw;
    top:65vw;
}
.web5{
    width:31.5vw;
    left:0;
    top:85vw;
}
.web6{
    width:31.5vw;
    left:33.5vw;
    top:85vw;
}
.a1{
    position:absolute;
    width:46vw;
    left:20vw;
    top:45vw;
}
.a2{
    position:absolute;
    height:35vw;
    left:-5vw;
    top:45vw;
    z-index:-1;
}










.copyright-home{
    position:absolute;
    font-family: "Solway", sans-serif;
    font-size: 0.7em;
    line-height: 4;
    left:2vw;
    color:dimgray;
    bottom:-100px;
}
.copyright{
    position:absolute;
    font-family: "Solway", sans-serif;
    font-size: 0.7em;
    line-height: 4;
    color:dimgray;
    margin-top:4vw;
    margin-bottom:4vw;
    padding-top:50px;
    padding-bottom:50px;
}
.copyright-home{
    position:absolute;
    font-family: "Solway", sans-serif;
    font-size: 0.7em;
    line-height: 4;
    color:dimgray;
    margin-top:4vw;
    margin-bottom:4vw;
    padding-top:50px;
    padding-bottom:50px;
}

.credits{
    position:relative;
    right:20vw;
    padding-top:50px;
    font-family: "Solway", sans-serif;
    padding-bottom:50px;
}

.icon{ position: relative; display: inline-block; width: 2em; height: 2em; }
.icon img { position: absolute; top: 0; left: 0; transition: opacity 0.25s ease; }

.icon-hover { opacity: 0; }
.icon:hover .icon-hover { opacity: 1; }
.icon:hover .icon-default { opacity: 0; }




footer img{ width:2em; }











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

.navigation {  font-size: 1em; }
.navi{ top: -2vw; }
.navi img{ height:30px }
.nav{ left: 120px; word-spacing: 10vw; }







h1 {
  font-size: 1.4em; line-height: ; 
}
.intro{ 
  font-size: 0.7em; line-height: ;
  position:absolute; top:90vw; left:3em; width:50vw } 
.image-container { left:0; top: 10vw; width: 100vw; }

.projects{
    bottom:5em;
    font-family: "Solway", serif; font-weight:300; font-style:normal;
    font-size: 1em;
    line-height: 1em;
    position: absolute;
    left: 2em;
    width: 25em;
}




/*SIDE BAR*/
/*
.project-info{
    z-index: 100;
    position: fixed;
    width: 3em;
    height: 100vw;
}

.rectangle {
    position: absolute;
    left: -20px;
    top: -10px;
    width: 30em;
    height: 110vh;
    background-color: white;
}


.title {
   position:relative;
   width:300px;
   margin-top:7rem;
   left:20px;
  
   line-height: 1;
}

.overview {
    font-family: "Solway", serif; font-weight:300; font-style:normal;
    font-size: 1em;
    line-height: 1.6em;
    position: absolute;
    left: 20px;
    width: 80vw;
    margin
}

.overview-section{ font-weight:500; margin-top: 2em; }
.overview-info{ font-weight:300; margin-top: 0.5em;
}

.copyright{ font-weight:300; font-size:0.7em; margin-top: 2.5em; }









.project-info{ position: relative; }
.rectangle { opacity: 0 }

.copyright{ font-weight:300; font-size:0.7em; margin-top: 2.5em; }
.copyright-home{ font-weight:300; font-size:0.7em; bottom: -20px; }



.full-bleed{ position:absolute; width:65vw; border-radius: 20px; left: 0px}
.content{ position:absolute; border-radius:20px;
    filter:drop-shadow(0px 0px 2px #d3d3d3);
}

.img-grid{
    overflow-x:hidden;
    z-index:10;
    width:80vw;
    left:3vw;
    position:relative;
    margin-top: 50vw;
    margin-bottom: 6vw;
}




.tk1{ left:0; top:7rem;}
.tk1-1{ left:0; top:0vw;}
.tk2 { width:50%; left:0vw; top:49vw; }
.tk3{ width:30vw; right:0vw; top:92vw; }
.tk4{ width:50%; left:10vw; top:78vw; }
.tk5{  left:0vw; top:132vw; }




footer {
  position: relative;
  text-align: center;
  margin-left:3vw; }

footer img{ width:2em; }



}*/




.overview,
.section-caption{
   position: relative;
}




















@media (max-width: 60em) {
body {
    padding: 2vw;
  }

  .project-info {
    position: relative;
    width: 100%;
    padding-bottom: 25vw;
  }


  .section-caption {
    position: relative;
  }

  .img-grid {
    width: 90vw;
    left: 5vw;
  }






.navigation {  font-size: 1em; }
.navi{ top: -2vw; }
.navi img{ height:30px }
.nav{ left: 120px; word-spacing: 10vw; }


.page{ position:absolute }






h1 {
  font-size: 1.4em; line-height: ; 
}
.intro{ 
  font-size: 0.7em; line-height: ;
  position:absolute; top:90vw; left:3em; width:50vw } 
.image-container { left:0; top: 10vw; width: 100vw; }

.projects{
    bottom:5em;
    font-family: "Solway", serif; font-weight:300; font-style:normal;
    font-size: 1em;
    line-height: 1em;
    position: absolute;
    left: 2em;
    width: 25em;
}





/*SIDE BAR*/

.rectangle {
    position: absolute;
    left: -20px;
    top: -10px;
    width: 30em;
    height: 110vh;
    background-color: white;
}


.title { left:5px; }

.overview {
    font-family: "Solway", serif; font-weight:300; font-style:normal;
    font-size: 1em;
    line-height: 1.6em;
    position: relative;
    left: 5px;
    width: 80vw;
    margin-bottom:2em;
}

.section{
    display:block;
    width:85vw;
    left:0;
    margin:0 auto;
    padding:0;
    min-height:auto;
    height:auto;
}
.section.img-grid{
   padding-bottom:0;
}

  .section-caption{
   width: 85vw;
   column-count: 1;
}

  h3{ position:relative; font-size:1.5em; left:5px }
  /*.section-caption{  width:85vw; left:5px; font-size:0.8em; position:absolute; }*/





.overview-section{ font-weight:500; margin-top: 2em; }
.overview-info{ font-weight:300; margin-top: 0.5em;
}








.project-info{ position: relative; }
.rectangle { opacity: 0 }

.copyright{ opacity:0; position: relative; top:150em }
.copyright-home{ font-weight:300; font-size:0.7em; bottom: -20px; }



.full-bleed{ position:absolute; width:75vw; left: 0px}
.content{ position:absolute;}

/*.img-grid{
    overflow-x:hidden;
    z-index:10;
    width:80vw;
    left:3vw;
    position:relative;
    
    margin-bottom: 6vw;
}
*/


.pg1{ height:125vw; }
.pg2{ height:210vw; }
.pg3{ height:100vw; }
.pg4{ height:110vw; }
/*.pg5{ height:60vw; }
.pg6{ height:143vw; }*/
.pg7{ height:45vw; }
./*pg8{ height:50vw; }
.pg9{ height:200vw; }*/
.pg10{ height:150vw; }
.pg11{ height:200vw; }
.pg12{ height:30vw; }
.pg13{ height:15vw; }

.pg14{ height:100vw; }
.pg15{ height:11vw; } 
.pg16{ height:125vw; } /*
.pg17{ height:107vw; }*/


.tk1{ left:5px; top:0vw;}
.tk1-1{ left:5px; top:0vw;}
.tk2 { width:50%; left:40px; top:49vw; }
.tk3{ width:40%; right:2vw; top:95vw; }
.tk4{ width:40%; left:5px; top:80vw; }
.tk5{  left:0vw; top:136vw; }

.h1{ top:0vw; }
.h2{ top:160vw; left:0 }
.h3{  width:35vw; left:10vw; }
.h4{ width:35vw; left:40vw; }
.h5{ left:2vw; top:93vw; }
.h6{ left:25vw; top:110vw; }
.h7{ width:40vw; left:26vw; top:130vw; }
.h8{ width:70vw;}
.h9 { width:30vw; left:4vw; top:47vw; }
.h10{ width:30vw; left:35vw; top:47vw; }
.h11{ width:30vw; left:4vw; top:70vw; }
.h12{ width:30vw; left:35vw; top:70vw; }

.t1 { width:48vw; left:0vw; top:45vw; }
.t2 { width:24vw; left:52vw; top:45vw; }
.t3{  height:28vw; left:0vw; top:80vw; }
.t4 { height:28vw; left:26vw; top:80vw; }
.t5 { height:28vw; left:55vw; top:80vw; }

.b1 { width:36vw; left:1vw; top:54vw; }
.b2{ width:36vw; left:40vw; top:54vw; }
.b3{ width:36vw; left:1vw; top:78vw; }
.b4{ width:36vw; left:40vw; top:78vw; }
.b5{ width:23vw;left:0vw; top:47vw; }
.b6{ width:20vw; left:23vw; top:47vw; }
.b7{ width:22vw; left:43vw; top:50vw; }
.b8{ top:80vw; left:0; }
.b9 { border: 2px solid #555; width:36vw; left:0vw; top:0vw; }
.b10{ border: 2px solid #555; width:36vw; left:40vw; top:0vw; }
.b11{ border: 2px solid #555; width:36vw; left:0vw; top:32vw; }
.b12{ border: 2px solid #555; width:36vw; left:40vw; top:32vw; }

.a1{
    width:48vw;
    left:27vw;
}
.a2{
    height:37vw;
    left:0vw;
}
 



.navigating{ width:100% }
.back{ 
  font-family: "Solway", sans-serif;
  font-size:1em;
  position: absolute;
  left:0px;
  margin-top: 1vw;
  color: black;
  width: 20%;}
.go{ 
  font-family: "Solway", sans-serif;
  font-size:1em;
  position: absolute;
  right:30px;
  margin-top: 1vw;
  color: black;
  width: 15%;}


.tl{top:105vw}
.th{top:95vw; }


}