@charset "utf-8";
/* mobile first */
 html {
     overflow: hidden;
     height: 100%;
}
 body {
     height: 100%;
     overflow: auto;
     margin :0;
     overscroll-behavior: none;
     background-color: #f0f0f0;
}
 * {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
}

/* image filters*/
.greyscale{
    filter: none;
    -webkit-filter: none;
    transition: 1000ms;
}
button:hover{
    filter: opacity(.7);
    -webkit-filter: opacity(.7);
    text-shadow: -1px -1px 0px #000;
}
/* Remove effect on Hover */
.img:hover{
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
/* image filters*/


/* NON FLEX BOX ITEMS */

 #title {
     position: relative;
     text-align: center;
     align-items: center;
     padding-bottom: 0%;

     margin-top: 25%;

}

#caption {
    width: 100%;
    padding-top: .5%;
    padding-left: 1%;
    padding-bottom: 2%;
}

.fullscreen {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.fullscreen > img {
    min-height: 100vh;
    max-height: none;
    max-width: none;
    min-width: 100%;
    object-fit: cover;

}
/* NON FLEX BOX ITEMS */

/* universal page-flex style (index + project pages)*/

.page-flex {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    margin: 3%;
    width: 94%;
}



/* Text align flex (for use in the index pages) */
 .left {
     text-align: left;
}
 .right {
     text-align: right;
}
/* div controll */

.middle {
    align-self: center;
}

.end {
    align-self: flex-end;
}

/* divs */
 .ten {
     width: 10%;
     margin-bottom: 10%;
 }

 .twenty {
     width: 20%;
     margin-bottom: 10%;
 }
 
 .twenty >img {
     width:100%;
 }
 
  .thirtythree {
     width: 33.33333%;
     margin-bottom: 10%;
 }
 
 .thirtythree >img {
     width:100%;
 }

  .forty {
     width: 40%;
     margin-bottom: 10%;
 }

 .forty > img, svg {
     width: 100%;
 }
 .sixty {
     width: 60%;
     margin-bottom: 10%;
 }

 .sixty > img {
     width: 100%;
 }
 .large {
     flex: 1 1 auto;
     margin-bottom: 10%;
     justify-content: center;
     max-width: 100%;
     display: flex;
     flex-flow: column nowrap;
     margin: auto;
     padding-top: 5%;
     padding-bottom: 5%;

 }
 
 .largewrap {
        margin: auto;

 }

 .largewrap > img {
   max-height: 80vh;
   width:auto;
   max-width: 100%;
   margin: auto;

 }

 .video {
     width: 100%;
     height: 100vh;
     padding: 10%;
}

.text {
    padding-left: 7.5%;
    padding-right: 7.5%;
    padding-bottom: 7.5%;
}
.text > div {
    width: 40%;
    float: right;
    text-align: left;
    padding-left: 3%;
    padding-top: 7%;
}
.text > div > img {
    width: 100%;
}
.text > div > div > img {
    width: 100%;
}

 /* universal page-flex style (index + project pages)*/

 /* Project page styles */
  .project {
      background-color: #f0f0f0;
      width: 100%;
      position: relative;
      overflow: auto;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: wrap;
 }

  .projecttitle {
      position: fixed;
      text-align: center;
      justify-content: space-around;
      display: block;
      margin: 0;
      padding: 0;
      overflow: hidden;
      width: auto;
      z-index: 6;
      bottom: .5%;
      left: 2.5%;
 }
  .project > .fullscreen {
      height: 100vh;
      width: 100%;
      overflow: hidden;
 }
  .project > .fullscreen > img {
      height: 100vh;
      max-width: none;
      min-width: 100%;
 }
  .project > .large {
      padding: 3%;
      justify-content: center;
 }
  .project > .large > img {
      max-height: 100%;
      width:auto;
      max-width: 100%;
 }
  .project > .leftimg {
      padding: 3%;
      width: 100%;
      float: left;
 }
  .project > .leftimg > img {
      width: 80%;
 }
  .project > .leftimgportrait {
      padding: 3%;
      width: 80%;
      float: left;
 }
  .project > .leftimgportrait > img {
      width: 100%;
 }
  .project > .rightimg {
      padding: 3%;
      width: 80%;
      align-items: right;
      vertical-align: baseline;
 }
  .project > .rightimg > img {
      width: 100%;
 }
  .project > .rightimgnote {
      padding: 3%;
      width: 30%;
      align-items: right;
 }
  .project > .rightimgnote > img {
      width: 70%;
 }
  .projectsvg {
      padding-left: 3%;
      float: left;
      width: 20%;
 }
  .project > .text {
      padding-left: 3%;
      padding-right: 3%;
 }
  .project > .text > div {
      width: 40%;
      float: right;
      text-align: left;
      padding-left: 3%;
 }
  .project > .text > div > img {
      width: 100%;
 }
  .project > .text > div > div > img {
      width: 100%;
 }
  .project > .gridimg {
      display: grid;
      grid-template-columns: 33.33333% 33.33333% 33.33333%;
      grid-gap: 10px;
      padding-left: 10%;
      padding-right: 10%;
      padding-bottom: 10%;
 }
  .project > .gridimg > div > img {
      width: auto;
      height: 15vw;
 }
 /* Project page styles */


 /* mobile main Page */
  .page {
      position: relative;
      width: auto;
      height: auto;
      padding-bottom: 50%;
      padding-left: 4%;
      padding-right: 4%;
      padding-top: 14%;
      margin-bottom: 0;
      overflow: auto;
      z-index: 1;
      background-color: #749c91;
 }
 /* mobile main page */




 /* DESKTOP */
  @media only screen and (min-width: 900px) {


.page-flex {

    margin: 10%;
    width: 80%;
}

      /* DESKTOP main page */
       .page {
           width: 100%;
           height: 100%;
           padding-bottom: 0;
    
           padding-top: 0;
           margin-bottom: 0;
      }
      /* DESKTOP main page */


      /* DESKTOP Project page styles */
       .project {
           background-color: #f0f0f0;
           width: 100%;
           overflow: auto;

      }

.text {
    padding-left: 17.5%;
    padding-right: 17.5%;
    
}

.text > div {

    padding-top: 5%;
}
       .projecttitle {
           position: absolute;
           text-align: center;
           justify-content: space-around;
           display: block;
           margin: 0;
           padding: 0;
           overflow: hidden;
           width: auto;
           z-index: 6;
           bottom: .5%;
           left: 2.5%;
      }

      /* Project page styles */
}