/* ibm-plex-sans-regular - latin */
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: normal;
      font-weight: 400;
      src: local(''),
           url('/fonts/ibm-plex-sans-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ibm-plex-sans-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* ibm-plex-sans-500 - latin */
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: normal;
      font-weight: 500;
      src: local(''),
           url('/fonts/ibm-plex-sans-v14-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ibm-plex-sans-v14-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* ibm-plex-sans-500italic - latin */
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: italic;
      font-weight: 500;
      src: local(''),
           url('/fonts/ibm-plex-sans-v14-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ibm-plex-sans-v14-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* ibm-plex-sans-700 - latin */
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: normal;
      font-weight: 700;
      src: local(''),
           url('/fonts/ibm-plex-sans-v14-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ibm-plex-sans-v14-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* ibm-plex-sans-700italic - latin */
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: italic;
      font-weight: 700;
      src: local(''),
           url('/fonts/ibm-plex-sans-v14-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ibm-plex-sans-v14-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }

    /* nunito-sans-200 - latin */
    @font-face {
      font-family: 'Nunito Sans';
      font-style: normal;
      font-weight: 200;
      src: local(''),
           url('nunito-sans-v12-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('nunito-sans-v12-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* nunito-sans-regular - latin */
    @font-face {
      font-family: 'Nunito Sans';
      font-style: normal;
      font-weight: 400;
      src: local(''),
           url('nunito-sans-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('nunito-sans-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* nunito-sans-italic - latin */
    @font-face {
      font-family: 'Nunito Sans';
      font-style: italic;
      font-weight: 400;
      src: local(''),
           url('nunito-sans-v12-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('nunito-sans-v12-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* nunito-sans-600 - latin */
    @font-face {
      font-family: 'Nunito Sans';
      font-style: normal;
      font-weight: 600;
      src: local(''),
           url('nunito-sans-v12-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('nunito-sans-v12-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* nunito-sans-600italic - latin */
    @font-face {
      font-family: 'Nunito Sans';
      font-style: italic;
      font-weight: 600;
      src: local(''),
           url('nunito-sans-v12-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('nunito-sans-v12-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }




* {
  box-sizing: border-box;
  padding:0;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}



html, body {
  width:100vw;
  max-width: 100vw;
  margin: 0;
}

body {
  background-color:#F9F9F7;

  font-family: 'Libre Franklin', sans-serif;
  font-display: swap;
  font-weight: 300;
  -webkit-text-size-adjust: 100%;
  line-height: 1.3;
  text-align: left;
  max-width: 100vw;

}


section{
  padding-bottom:10vh;
  height: fit-content;
}

blockquote {
  max-inline-size: 66ch;
  line-height: 2;
  font-style: italic;
  font-family: 'IBM Plex Sans';
}

video,
img {
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain; /*  object-fit: cover; */
  object-position: top center;
  height: auto;
  width:100%;
  draggable: false;
}

figure {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  position:relative;
}

figcaption{
    display: inline-block;
    align-items: top;
    color: #898989;
    line-height: 1;
    font-size: clamp(0.6rem,  1vw, 2rem);
    max-width: 60ch;
    text-align: left;
    position: absolute;
    bottom: 5vh;
    left: 3vw;
    color:white;
}

figcaption .title {
    color: #302d2d;
}

figcaption .author {
    color: #302d2d;
}


nav {
  margin-top: 10vh;
  margin-left: 3vw;
  width:30%;
}

h1 {
  color: #292929;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 1.6vw;
  font-size: clamp(0.4rem,1.2vw, 1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.5vw;
  text-align: left;
  vertical-align: text-top;
  margin-bottom: 10vh;
}

h5 {
  color: #292929;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 0.8vw;
  font-size: clamp(0.4rem,  0.8vw, 1rem);
  font-weight: 400;
  line-height: 0.08;
  letter-spacing: 0.1vw;
  text-align: left;
 }

 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 300px;
    font-size: clamp(0.4rem,  1.6vw, 2rem);
    color: black;
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 400;
    text-align: left;
  }

  li {
  display: block;
  text-decoration: none;
  font-size: clamp(0.4rem,  1.6vw, 2rem);
  color: black;
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 400;
  line-height: 3;
  text-align: left;

}

  li a {
  display: block;
  text-decoration: none;
  font-size: clamp(0.4rem,  1.6vw, 2rem);
  color: black;
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 400;
  text-align: left;

}

/* color change on hover */
li a:hover {
  color: #292929;

}



/******************************************************************************/


.subMenuItem  a {
  display: block;
  text-decoration: none;
  font-size:1vw;
  font-size: clamp(0.4rem,  1.6vw, 2rem);
  color: blackout;
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 400;
  line-height: 3;
  text-align: left;
  margin-left:1.5vw;
  line-height: 2;
}


.sidebar-says {
    display: grid;
    grid-template-columns: minmax(50px, 15vw) 1fr;
    column-gap: 0.25vw;
    margin-left:  2vw;
    margin-right: 2vw;
  }

.sidebar-says .areaHeader { grid-area: 1 / 1 / 1 / 1 ; position: fixed; margin-top:5vh;}
.sidebar-says .areaContent { grid-area: 1 / 2 / 2 / 2;}


.pancake {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }


.pancake .areaHeader { grid-area: 1 / 1 / 1 / 1; position: fixed;}
.pancake .areaContent { grid-area: 1/ 2 / 1 / 2; }

/******************************************************************************/

.slideShow{
  position:relative;
  display: grid;
  place-items: center;
  width:100%;
  height:100vh;
}

.slides {display:block;
 position:absolute;;
  top: 0px;
  left: 0px;
  text-align: center;
  margin: auto;
}

.slides p {
  max-width: 60ch;
  color: black;
  text-align: left;
  font-family: 'Montserrat', serif;
  font-size: 1.2vw;
  line-height: 1.8;
  letter-spacing: .4px;
  font-weight: 400;
  font-style: normal;
}


.slides img {
 max-height: 100vh;
 width:auto;
 object-fit: contain;
}

/******************************************************************************/




/******************************************************************************/


.icon-instgram {

  width: 4vh;
  height: 4vh;
  background: url('/icons/Instagram_simple.svg');
  background-size: 4vh 4vh;
  background-repeat: no-repeat;
  background-position: left center;
  z-index: 80;
  display: block
}



#story-view {
  position: fixed;
  width: 4vh;
  height: 4vh;
  background: url('/icons/story.svg');
  background-size: 4vh 4vh;
  background-repeat: no-repeat;
  background-position: left center;
  top:3vh;
  right:10vw;
  z-index: 80;
  display: block
}


#slide-view {
     position: fixed;
     width: 4vh;
     height: 4vh;
     background: url('/icons/slideshow-mw.svg');
     background-size: 4vh 4vh;
     background-repeat: no-repeat;
     background-position: left center;
     top:3vh;
     right:10vmax;
     z-index: 80;
     display: block
}


#grid-view {
  position: fixed;
  width: 4vh;
  height: 4vh;
  background: url('/icons/grid-view-mw.svg');
  background-size: 4vh 4vh;
  background-repeat: no-repeat;
  background-position: left center;
  top:3vh;
  right:10vmax;
  z-index: 80;
  display: block
}

#navigate-before {
     position: fixed;
     width: 4vmax;
     height: 4vmax;

     background: url('/icons/navigate_before-mw.svg');
    background-size: 3.2vmax 3.2vmax;
     background-repeat: no-repeat;
     top:2.5vh;
     right:20vmax;
     z-index: 99;

}

#navigate-after {
  position: fixed;
  width: 4vmax;
  height: 4vmax;
  background: url('/icons/navigate_next-mw.svg');
  background-size: 3.2vmax 3.2vmax;
  background-repeat: no-repeat;
  top:2.5vh;
  right:15vmax;
  z-index: 99;
}



#navigate-before2 {
  position: fixed;
  width: 50vw;
  height: 50vh;

 background: url('/icons/navigate_before-mw.svg');
 background-size: 8vw 8vw;
  background-repeat: no-repeat;
 background-position: 10% center;

  top:25vh;
  left:0vw;
  z-index: 92;



}

#navigate-after2 {
  position: fixed;
  width: 50vw;
  height: 50vh;

 background: url('/icons/navigate_next-mw.svg');
 background-position: 90% center;
 background-size: 8vw 8vw;
  background-repeat: no-repeat;
  top:25vh;
  left:50vw;
  z-index: 92;


}


/******************************************************************************/
.ram {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

.clamp {
  width: clamp(23ch, 50%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.card-deck1 {
  height: auto;
  overflow:scroll;
  display: grid;
  grid-gap: 3vw;
  margin-left: 33vw;
  margin-bottom: 5vmin;
  grid-template-columns: 50%;
}

.card-deck2 {
  height: auto;
  display: grid;
  grid-gap: 3vw;
  margin-left: 5vw;
  margin-right: 5vw;
  margin-bottom: 5vmin;
  grid-template-columns: repeat(2, 1fr);

}


.card-deck2P {
  display: grid;
  grid-gap: 5vw;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-bottom: 5vmin;
  max-height:95vh;
  grid-template-columns: repeat(2, 1fr);
  object-fit: scale-down;

}

.card-deck2P img {
  margin-top:10vh;
  height:80vh;
  object-fit: scale-down;
}

.card-deck3 {
  height: auto;
  display: grid;
  grid-gap: 3vw;
  margin-left: 5vw;
  margin-right: 5vw;
  margin-bottom: 5vmin;
  grid-template-columns: repeat(3, 1fr);
}


.card {  /* use with card-deck or ram */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



.sticky1 {
   position:-webkit-sticky;
   position:sticky;
   top:15vh;
   align-self: flex-start;
  }

.center-section{
  display: grid;
  place-items: center;
  margin-bottom:5vmin;
}

.center-section-small{
  display: grid;
  place-items: center;
  width:70vw;
  height:90vh;
  margin-left:15vw;
  margin-bottom:5vmin;
  overflow:hidden;
}


.center-section-full-height{display: grid;
place-items: center;
width:70vw;
height:auto;
margin-left:15vw;
margin-bottom:5vmin;
overflow:hidden;
}

.center-section-height{
display: grid;
place-items: center;
height:95vh;
width: 70%;
margin-left: 15vw;
margin-bottom:5vmin;
overflow:hidden;
    object-fit:fill;
}




.background-image {
  height: 100vh;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}


.central-image-on-page {
  display: grid;
  place-items: center;
  height: 99vh;
}


.img-medium {
  display: grid;
  place-items: center;
  justify-content: center;
  align-items: center;
}

.img-medium img {
 max-width: 70vw;
}


.aleft {
  display: grid;
  place-items: center;
  justify-content: center;
  align-items: center;
}

.img-small {
  display: grid;
  place-items: center;
  justify-content: center;
  align-items: center;
}

.img-small img {
 max-width: 50vw;
}


.img-vsmall {
  display: grid;
  place-items: center;
  justify-content: center;
  align-items: center;
}

.img-vsmall img {
 max-width: 30%;
}





.img-width-vlarge {
   width:95%;
   height:auto;
}

.img-width-large {
   width:80%;
   height:auto;
}
.img-width-medium {
   width:45%;
   height:auto;
}
.img-width-small {
   width:30%;
   height:auto;
}

.img-width-vsmall {
   width:20%;
   height:auto;
}





.offset64 {
  display: grid;
  grid-template-columns: 4.5fr 6fr 5vw;
  grid-template-rows: 2fr ;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: center;
  align-content: center;
  align-items: center;
/*  font-family: 'Libre Franklin', sans-serif;
  font-size: 22.8px;

  line-height: 32px;
  letter-spacing: .4px;
  color: #292929;
*/
}

.offset64-2 {
  display: grid;
  grid-template-columns: 4.5fr 6fr 15vw;
  grid-template-rows: 2fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: center;
  align-content: center;
  align-items: center;
/*  font-family: 'Libre Franklin', sans-serif;
  font-size: 22.8px;

  line-height: 32px;
  letter-spacing: .4px;
  color: #292929;
*/
}

.o64 { grid-area: 1 / 2 / 2 / 3; }


.offset46 {
  display: grid;
  grid-template-columns:  5vw 6fr 4.5fr;
  grid-template-rows:  2fr ;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: center;
  align-content: center;
  align-items: center;
}



.offset46-2 {
  display: grid;
  grid-template-columns:  15vw 6fr 4.5fr;
  grid-template-rows:  2fr ;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.o46 { grid-area: 1 / 2 / 2 / 3; }

.centeralCol {
display: grid;
grid-template-columns: 25fr 50fr 25fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.cc50 { grid-area: 1 / 2 / 2 / 3; }

.ar-45{
 aspect-ratio: 5 / 4;
}

.ar-32{
 aspect-ratio: 3 / 2;
}

.ar-169{
 aspect-ratio: 16 / 9;
}

.center-text {
    display: grid;
    place-items: center;
    text-align: center
  }


  .narrative {
      font-family: 'Montserrat', serif;
      font-size: 1vw;
      line-height: 1;
      font-weight: 400;
      font-style: normal;
      color: ##474747;
      text-align: left;
      max-width:66ch;
      position:block;
    }



  .text-height-full{
    height: 100vh;
    color: black;
    display:block;
    margin:auto;

  }


  .text-height-full  p {
    font-family: 'Montserrat', serif;
    font-size: 1.6vw;
    line-height: 1.8;
    max-inline-size: 66ch;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin: auto;
    color: ##474747;
    text-align: left;
    margin-bottom: 3vh;
  }

  h4 {
    font-family: 'Montserrat', sans-serif;
    color: #292929;
    line-height: 2;
    font-size: 1.6vw;
    font-weight: 400;
    text-align: center;
    padding-bottom:2vh;
    padding-top:3vh;
    color: #474747;
    width:60%;
    margin:auto;
  }


  .icon-arrow-down {
       position: relative;
       width: 3vh;
       height: 3vh;
       background: url('/icons/arrow-down.svg');
       background-size: 3vh 3vh;
       background-repeat: no-repeat;
       background-position: left center;
       opacity: 1;
       margin-left:10vw;
       margin-top:-15vh;
       margin-bottom:15vh;
  }


  #popup-fullpage {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-color: black;
    object-fit: contain;

  }




  .background-image-scrollover{
    height: 100vh;
    width:100%;

    background-position: center bottom;
    background-repeat: no-repeat;

    background-size: contain;

  }


    .background-image-scrollover-top{
      height: 100vh;
      width:100%;

      background-position: center center;
      background-repeat: no-repeat;

      background-size: contain;

    }


  .img-scrol33lover{
    min-height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('DeGroenteamsterdammer-Terrafoto©JolandaKruse-08.jpg');
  }






    article { display:block; }
    @media only screen and (orientation:portrait){
      #content{
        display: none;
      }
      #warning {
        display:block;
        font-size: 4.209rem;
    font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 0.07rem;
        line-height: 1.333;
        text-align: center;
        margin-top: 33vh;

      }
    }

    @media only screen and (orientation:landscape){
      #content {
        width:100vw;
        max-width: 100vw;
        overflow-y: hidden;
      }
      #warning {
        display:none;
      }
    }

  * {
    box-sizing: border-box;
    padding:0;
  }

  img,
  video,
  iframe {
    max-inline-size: 100%;
    block-size: auto;
      object-fit: cover;
  }

  @media only screen and (orientation:portrait){
    html {
      font-size: 2vmax;
    }


    .image-width-full {
      width:100%;
      height:100vh;
      overflow: hidden;
      object-fit: cover;
      object-position: 70% top;
      animation-name: fadex; animation-duration: 4s;
        animation-timing-function: ease-in-out;animation-play-state: running;
        animation-iteration-count:1; animation-fill-mode: forwards;}


          @keyframes fadex {
          0%   { opacity: 0 ; }
          100% { opacity: 1;  }
          }

          .popup-container {
             display:none;
          }

          #info-popup {
            position: absolute;
            top:12vh;
            left:5vw;
            width:90vw;
            height:85vh;
            background-color: white;
            z-index:99;
            opacity:1;
            overflow-x: scroll;
          }

          .blackout {
            position: absolute;
            top:0vh;
            left:0vw;
            width:100vw;
            height:100vh;
            background-color: white;
            z-index:90;
            opacity:0.1;
          }


        #icon-menu {
               position: fixed;
               width: 4vh;
               height: 4vh;
               background: url('/icons/menu.svg');
               background-size: 4vh 4vh;
               background-repeat: no-repeat;
               background-position: left center;
               top:3vh;
               right:5vw;
               z-index: 80;
          }


          #icon-logo {
                 position: fixed;
                 width: 4vh;
                 height: 4vh;
                 background: url('/icons/terrafoto_logo.png');
                 background-size: 4vh 4vh;
                 background-repeat: no-repeat;
                 background-position: left center;
                 top:3vh;
                 right:5vw;
                 z-index: 80;
            }


          .icon-close {
              position: absolute;
              width: 3vw;
              height: 3vh;
              background: url('/icons/close.svg');
              background-size: 3vw 3vw;
              background-repeat: no-repeat;
              background-position: left center;
              top: 6vh;
              right: 4vw;
              z-index: 99;
              opacity: 1;
          }

          .icon-closewhite {
              position: absolute;
              width: 3vw;
              height: 3vh;
              background: url('/icons/close-white.svg');
              background-size: 3vw 3vw;
              background-repeat: no-repeat;
              background-position: left center;
              top: 6vh;
              right: 4vw;
              z-index: 99;
              opacity: 1;
          }

  }



  @media only screen and (orientation:landscape){
    html {
      font-size: 1.2vw;
    }



    .image-width-full {
      width:auto;
      height:80vh;
      overflow: hidden;
      object-fit: contain;
      animation-name: fadex; animation-duration: 4s;
          animation-timing-function: ease-in-out;animation-play-state: running;
          animation-iteration-count:1; animation-fill-mode: forwards;}


          @keyframes fadex {
            0%   { opacity: 0 ;  }
          100% { opacity: 1;  }
        }


        .popup-container {
           display:none;
        }

     #info-popup {
       position: absolute;
       top:15vh;
       left:10vw;
       width:80vw;
       height:70vh;
       background-color: white;
       z-index:99;
       opacity:1;
         overflow-x: scroll;
     }

     .blackout {
       position: absolute;
       top:0vh;
       left:0vw;
       width:100vw;
       height:100vh;
       background-color: white;
       z-index:90;
       opacity:0.1;
     }

     #icon-menu {
          position: fixed;
          width: 4vw;
          height: 4vh;
          background: url('/icons/menu.svg');
          background-size: 3vw 3vw;
          background-repeat: no-repeat;
          background-position: left center;
          top:3vh;
          right:3vw;
          z-index: 80;

     }

     .icon-close {
         position: absolute;
         width: 3vw;
         height: 3vh;
         background: url('/icons/close.svg');
         background-size: 3vw 3vw;
         background-repeat: no-repeat;
         background-position: left center;
         top: 3vh;
         right: 4vw;
         z-index: 99;
         opacity: 1;
     }


     .icon-closewhite {
         position: absolute;
         width: 3vw;
         height: 3vh;
         background: url('/icons/close-white.svg');
         background-size: 3vw 3vw;
         background-repeat: no-repeat;
         background-position: left center;
         top: 6vh;
         right: 4vw;
         z-index: 99;
         opacity: 1;
     }

  }


  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html, body {
    width:100vw;
    max-width: 100vw;
    margin: 0;
    padding:0;

  }

   body {
     max-width: 100vw;
     background-color: #F0F1FF;

     background-color:#DFE2D9;
     background-color:#DEE2D8;
     background-color: white;


     text-rendering: optimizeLegibility;
     scroll-behavior: smooth;
     margin:0;
     height: 100vh;
     width:100vw;
     overflow-x: hidden;
     font-size: 0.75rem;

  }


  h2 {
    font-family: 'Open Sans', sans-serif;
    font-size:1Rem;
    margin-bottom:0.563rem;
    margin-top:3.157rem;

  }



  .scroller {
      height: 100vh;
      width:100vw;
      max-width:100vw;
      overflow-y: scroll;
      overflow-x: hidden;

  }

  .scroller section {
      scroll-snap-align: start;
      height: fit-content;
      width:100vw;
      max-width:100vw;
      overflow-y: hidden;
  }

  .container-relative {
    position: relative;
  }

  .logo {
       position: fixed;
       width: 60vw;
       height: 4vw;
       background-size: 4vw 4vw;
       background-repeat: no-repeat;
       backgound-color: transparent;
       margin: auto;
       top:3vh;
       left:10vw;
       z-index: 99;
       font-size:1.777rem;
       color:black;
       color: #A68C63;
       color: #4A5B31;
       color: #9239A8;
       color: black;
       text-decoration: none;
       font-family: 'Josefin Sans', sans-serif;
       font-weight: 200;

  }


  .title {
       position: fixed;
       width: 20vw;
       height: 4vw;
       background-size: 4vw 4vw;
       background-repeat: no-repeat;
       margin: auto;
       top:95vh;
       left:80vw;
       z-index: 99;
       animation-name: exlode-reveal; animation-duration: 20s;
       animation-fill-mode: backwards; animation-delay: 25s;
       font-size:1.333rem;
       color:#F0F1FF;
       color:##5C3B36;
       letter-spacing: 0.25rem;
       font-family: 'Josefin Sans', sans-serif;
  }

  .warning .logo{
    top:30vh;
    left:42vw;
    width: 15vh;
    height: 15vh;
     background-size: 15vh 15vh;
     transform: rotate(90deg);
     animation: none;
  }



  .layout-info {
  display: grid;
  grid-template-columns:  5vw 28vw 61vw 5vw;
  grid-template-rows: 7.478vh   41.956vh 17.713vh 5.61vh;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width:100vw;
  color: #292929;
  align-items: center;

  }

  .lay-i-title { grid-area: 2 / 2 / 2 / 3; text-align: left;
    font-size: 3.157rem;
  font-family: 'Josefin Sans', sans-serif;
    font-weight: 100;
    letter-spacing: -0.2rem;
    font-style: normal;
    line-height: 1.333;
    align-self: baseline;
  }
  .lay-i-quote { grid-area: 2 / 3 / 3 / 4;align-self: start; justify-content: center; text-align: left;margin-top:10vh}
  .lay-i-info1 { grid-area: 3 / 3 / 4 / 4; border-bottom: solid ;border-top:solid; border-width: 1px;
    font-size: 1rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.07rem;
    line-height: 1.333;
    justify-content: center;
    padding-bottom: 0.5rem;
  }
  .lay-i-info2 { grid-area: 4 / 3 /5 / 4; border-bottom: solid ; border-width: 1px;
    font-size: 1rem;
    font-family: 'Josefin Sans', sans-serif;

    font-weight: 400;

    font-style: normal;
    letter-spacing: 0.07rem;
    line-height: 1.333;
    padding-bottom: 0.5rem;
  }






  .text-bio{
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.777;
    justify-content: center;
    padding-bottom: 0.5rem;
    width:60vw;
    margin:auto;
  }

  a {
    text-decoration: none;
    color: grey;
      opacity:1;
  }

  a:hover {
    opacity:0.5;
  }

#logo-container{
 z-index:999;position:fixed;top:5vh;left:5vw
}


  .menu-container{
    display:none;
  }


  #menu-popup {
    position: fixed;
    top:0px;
    right:0px;
    width:22vmax;
    min-height:100vh;
    background-color: #877058;
    z-index:99;
    opacity:0.9;
    overflow-x: scroll;
  }



    * {
      box-sizing: border-box;
      padding:0;
    }

    *,
    *:before,
    *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    html { font-size: 1.2vw ; }


    body {
          background-color: #f8f8ff;

          background-color: #F6FAF0;


            background-color: #D9DEDC;
            background-color: white;
    }


    img {
      max-inline-size: 100%;
      block-size: auto;
      object-fit: contain; /*  object-fit: cover; */
      object-position: top center;
      height: auto;
      width:100%;
      draggable: false;
    }



  .card-deck1 {
    height: auto;
    overflow:scroll;
    display: grid;
    grid-gap: 3vw;
    margin-left: 33vw;
    margin-bottom: 5vmin;
    grid-template-columns: 50%;
  }

  .card-deck2 {
    height: auto;
    display: relative;
    grid-gap: 3vw;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-bottom: 5vmin;
    grid-template-columns: repeat(2, 1fr);
    overflow:hidden;
  }


  .card-deck2P {
    display: flex;
    grid-gap: 5vw;
    margin-left: 5vw;
    margin-right: 10vw;
    margin-bottom: 5vmin;
    max-height:95vh;
    grid-template-columns: repeat(2, 1fr);
    object-fit: scale-down;
    overflow: auto;
  }

  .card-deck2P img {
    margin-top:10vh;
    height:80vh;
    object-fit: contain;
  }

  .card-deck2P-image-text {
    display: flex;
    grid-gap: 5vw;
    margin-left: 5vw;
    margin-bottom: 5vmin;
    max-height:95vh;
    grid-template-columns: 30vw,45vw;
    object-fit: scale-down;
  }

  .card-deck2P-image-text img {
    height:80vh;
    object-fit: contain;
  }

  .card-deck2P-image-text p {
    font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
    font-weight: 400;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: oldstyle-nums;
    font-size: 1.333rem;
    line-height: 2.369rem;
    max-width: 66ch;
    width:45vw;
    height:80vh;
    margin-bottom: 2.369vh;

  }


  .card-deck2x {
    height: auto;
      margin:auto;
    display: grid;
    grid-gap: 7vw;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom:5vh;
    width:80vw;

  }



  .card-deck3 {
    height: auto;
    display: grid;
    grid-gap: 5vw;
    margin-left: 5vw;
    margin-right: 5vw;
    grid-template-columns: repeat(3, 1fr);
  }


  .card {  /* use with card-deck or ram */
    display: flex;
    flex-direction: column;
  }

  .card blockquote {
  margin: 0;
  font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.777;
  margin-bottom:5.61vh;
  letter-spacing: .5px;
  width: 70%;
  text-align: center;
  height:5vh;
  }




  .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 2vh;
    width:30vw;
    margin-left:5vw;
    object-fit: contain;
  }


  .sticky1 {
    position: -webkit-sticky;
    position: sticky;
    top: 5vh;
    width:100%;
    margin:auto;
    object-fit: contain;
  }



  .sticky blockquote {
  margin: 0;
  font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.777;
  margin-top:2.369vh;
  margin-bottom:5.61vh;
  letter-spacing: .5px;
  width: 100%;
  text-align: center;
  height:5vh;
  }

  .image-left {
    top: 15vh;
    width:30vw;
    margin-left:5vw;
    object-fit: contain;
  }


  .vertical-filler {

    margin-bottom:50vh;
  }

    img {
      object-fit: contain;
    }

    .text-right { margin-left:45vw; width:45vw;}

    .text-left { margin-left:5vw; width:45vw;}

    .text-center {
      margin-left: auto;
      margin-right: auto;
      width: 60vw;
      max-width: 60ch;
      margin-bottom:5rem;
       }



    .text-bio {     margin-left: auto;
        margin-right: auto;
        width: 60vw;font-size:0.75rem;text-align:right }









  h1 {
    font-family: 'IBM Plex Sans',Times New Roman,Georgia,serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    font-size: 2.369rem;
    line-height: 28px;
    letter-spacing: .9px;
    text-align: center;
    margin-top:5.61vh;
  }

  h2{
    margin: 0;
  font-family: 'IBM Plex Sans',Times New Roman,Georgia,serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.777rem;
  line-height: 2.369rem;
  letter-spacing: .5px;
    text-align: center;
  }

  h3 {
     font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
     font-weight: 400;
     font-style: normal;
     width: 60%;
     margin-left: auto;
     margin-right: auto;
     font-size: 1.777rem;
     line-height: 2.369rem;
    letter-spacing:0.08rem;
     text-align: center;
   }

   h4 {
      font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
      font-weight: 100;
      font-style: normal;
      margin-left: auto;
      margin-right: auto;
      font-size: 1.333rem;
      line-height:1;
      width: 100%;
      text-align: center;
    }

    h5 {
      font-family: 'IBM Plex Sans',Times New Roman,Georgia,serif;
      font-weight: 700;
      font-style: italic;
      font-size: 2rem;
      line-height: 28px;
      letter-spacing: .9px;
      text-align: center;
      margin-top:5.61vh;
      margin-bottom:5.61vh;
      width:100%;
    }
    h6 {
       font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
       font-weight: 400;
       font-style: normal;
       width: 60%;
       margin-left: auto;
       margin-right: auto;
       font-size: 0.75rem;
       line-height: 1;
      letter-spacing:0.08rem;
       text-align: center;
     }

   p {
     font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
     font-weight: 400;
     font-style: normal;
     font-variant-ligatures: normal;
     font-variant-numeric: oldstyle-nums;
     font-size: 1.333rem;
     line-height: 1.6;
     max-inline-size: 66ch;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing:0.05rem;
   }

   .image-hero-full {position:absolute;  width:100vw; height: auto; object-fit: contain;

   }
   .text-reveal{ }

   .explode-to-text { height:100vh; }
   .explode-to-text img { position:absolute;  width:100vw; object-fit:contain;}
   .explode-to-text .text-reveal { position:absolute;  width:100vw;
       max-width:100vw; height: auto; overflow-y: hidden;
       animation-name: exlode-reveal; animation-duration: 4s;
       animation-fill-mode: backwards; animation-delay: 10s}

   .text-reveal .logo {
         animation-name: exlode-reveal; animation-duration: 10s;
         animation-fill-mode: backwards; animation-delay: 10s
       }


   .text-delay {
     opacity: 0;
     animation-name: exlode-reveal; animation-duration: 4s;
     animation-fill-mode: backwards; animation-delay: 18s;}

   @keyframes explode {
         0%   { opacity: 1; transform: scale(1,1);}
         99% { opacity: 0; transform: scale(2,2); }
         100% { opacity: 0; transform: scale(1,1); }
   }
   @keyframes exlode-reveal {
         0%   { opacity: 0; }
         100% { opacity: 1;  }
   }


   .cental-image-on-page
   {
       height:100vh;
       display: flex;
       justify-content: center;
       object-fit: cover
       align-content: center;
       justify-items: center;
       align-items: center;
       position: relative;
       overflow:hidden;
   }

   .name-big {


        width:100vw;
        height:100vh;
        background: url('terrafoto_logo-2_transparent.svg');
        background-size: 30vw 22vw;
        margin: auto;
        z-index: 99;
        opacity: 1;
        background-position: center center;
        background-repeat: no-repeat;
        animation-name: fade-name; animation-duration: 4s;
        animation-fill-mode: forwards; animation-delay:9s;

      }




     .claim {
       color: white ;
       font-family: 'Nunito Sans', sans-serif;
       font-weight: 600;
       font-size: 3vw;
       letter-spacing: .2rem;
       text-align: center;
       padding-top:40vh;
       }


       .claim div{  opacity:0;  animation-name: fade-in-fast; animation-duration: 1s;
           animation-fill-mode: forwards; ;}
       .claim div:nth-child(1) { animation-delay: 1s;  }
       .claim div:nth-child(2) { animation-delay: 2s;  }
       .claim div:nth-child(3) { animation-delay: 3s;  }

    .landscape-big {
      position: relative;
      overflow: hidden;
       width:90vw;
       height:90vh;
       background: url('images/phone_iphone_black_48dp.svg');
       background-size: 80vw 60vw;
       margin: auto;
       z-index: 99;
       opacity: 1;
       background-position: center center;
       background-repeat: no-repeat;
       animation-name: anima-rotate; animation-duration: 5s;
       animation-iteration-count: infinite;
     }

     @keyframes fade-name {
       0%   { opacity: 1; }
       100% { opacity: 0; }
     }

     @keyframes fade-in {
       0%   { opacity: 0; }
       100% { opacity: 1; }
     }
     @keyframes fade-in-fast {
       0%   { opacity: 0; }
       50% { opacity: 1; }
       100% { opacity: 1; }
     }


     @keyframes anima-rotate {
       0%   { opacity: 0.3;transform: rotate(0deg); }
       70% { opacity: 1; transform: rotate(-90deg);}
       100% { opacity: 1; transform: rotate(-90deg);}
     }



  .important  {max-inline-size: 66ch;}


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>"Volunteer Voices"</title>
  <link rel="stylesheet" type="text/css" href="/css/kirja-om9.css?ver=0.10">


  <meta name="robots" content="noindex">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <script>
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
      showDivs(slideIndex += n);
    }

    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("slides");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      x[slideIndex-1].style.display = "block";
    }


  </script>


  <script>

    const numSteps = 20.0;

    let boxElement;
    let prevRatio = 0.0;
    let increasingColor = "rgba(40, 40, 190, ratio)";
    let decreasingColor = "rgba(190, 40, 40, ratio)";

    // Set things up
    window.addEventListener("load", (event) => {
      boxElement = document.querySelector('.intersection-observer-checkpoint');

      createObserver();
    }, false);


    function createObserver() {
      let observer;

      let options = {
        root: null,
        rootMargin: "0px",
        threshold: "0.5"
      };

      observer = new IntersectionObserver(handleIntersect, options);
      observer.observe(boxElement);
    }

    function handleIntersect(entries, observer) {
      entries.forEach((entry) => {
        if (entry.intersectionRatio > prevRatio) {
          plusDivs(1);
        }
      });
    }

    </script>
  <style>


    /* ibm-plex-sans-regular - latin */
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: normal;
      font-weight: 400;
      src: local(''),
           url('/fonts/ibm-plex-sans-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ibm-plex-sans-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* ibm-plex-sans-500 - latin */
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: normal;
      font-weight: 500;
      src: local(''),
           url('/fonts/ibm-plex-sans-v14-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ibm-plex-sans-v14-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* ibm-plex-sans-500italic - latin */
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: italic;
      font-weight: 500;
      src: local(''),
           url('/fonts/ibm-plex-sans-v14-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ibm-plex-sans-v14-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* ibm-plex-sans-700 - latin */
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: normal;
      font-weight: 700;
      src: local(''),
           url('/fonts/ibm-plex-sans-v14-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ibm-plex-sans-v14-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* ibm-plex-sans-700italic - latin */
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: italic;
      font-weight: 700;
      src: local(''),
           url('/fonts/ibm-plex-sans-v14-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ibm-plex-sans-v14-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }

    /* nunito-sans-200 - latin */
    @font-face {
      font-family: 'Nunito Sans';
      font-style: normal;
      font-weight: 200;
      src: local(''),
           url('nunito-sans-v12-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('nunito-sans-v12-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* nunito-sans-regular - latin */
    @font-face {
      font-family: 'Nunito Sans';
      font-style: normal;
      font-weight: 400;
      src: local(''),
           url('nunito-sans-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('nunito-sans-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* nunito-sans-italic - latin */
    @font-face {
      font-family: 'Nunito Sans';
      font-style: italic;
      font-weight: 400;
      src: local(''),
           url('nunito-sans-v12-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('nunito-sans-v12-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* nunito-sans-600 - latin */
    @font-face {
      font-family: 'Nunito Sans';
      font-style: normal;
      font-weight: 600;
      src: local(''),
           url('nunito-sans-v12-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('nunito-sans-v12-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* nunito-sans-600italic - latin */
    @font-face {
      font-family: 'Nunito Sans';
      font-style: italic;
      font-weight: 600;
      src: local(''),
           url('nunito-sans-v12-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('nunito-sans-v12-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }


    * {
      box-sizing: border-box;
      padding:0;
    }

    *,
    *:before,
    *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    html { font-size: 1.2vw ; }


    body {
          background-color: #f8f8ff;

          background-color: #F6FAF0;


            background-color: #D9DEDC;
            background-color: white;
    }


    img {
      max-inline-size: 100%;
      block-size: auto;
      object-fit: contain; /*  object-fit: cover; */
      object-position: top center;
      height: auto;
      width:100%;
      draggable: false;
    }



  .card-deck1 {
    height: auto;
    overflow:scroll;
    display: grid;
    grid-gap: 3vw;
    margin-left: 33vw;
    margin-bottom: 5vmin;
    grid-template-columns: 50%;
  }

  .card-deck2 {
    height: auto;
    display: relative;
    grid-gap: 3vw;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-bottom: 5vmin;
    grid-template-columns: repeat(2, 1fr);
    overflow:hidden;
  }


  .card-deck2P {
    display: flex;
    grid-gap: 5vw;
    margin-left: 5vw;
    margin-right: 10vw;
    margin-bottom: 5vmin;
    max-height:95vh;
    grid-template-columns: repeat(2, 1fr);
    object-fit: scale-down;
    overflow: auto;
  }

  .card-deck2P img {
    margin-top:10vh;
    height:80vh;
    object-fit: contain;
  }

  .card-deck2P-image-text {
    display: flex;
    grid-gap: 5vw;
    margin-left: 5vw;
    margin-bottom: 5vmin;
    max-height:95vh;
    grid-template-columns: 30vw,45vw;
    object-fit: scale-down;
  }

  .card-deck2P-image-text img {
    height:80vh;
    object-fit: contain;
  }

  .card-deck2P-image-text p {
    font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
    font-weight: 400;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: oldstyle-nums;
    font-size: 1.333rem;
    line-height: 2.369rem;
    max-width: 66ch;
    width:45vw;
    height:80vh;
    margin-bottom: 2.369vh;

  }


  .card-deck2x {
    height: auto;
      margin:auto;
    display: grid;
    grid-gap: 7vw;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom:5vh;
    width:80vw;

  }



  .card-deck3 {
    height: auto;
    display: grid;
    grid-gap: 5vw;
    margin-left: 5vw;
    margin-right: 5vw;
    grid-template-columns: repeat(3, 1fr);
  }


  .card {  /* use with card-deck or ram */
    display: flex;
    flex-direction: column;
  }

  .card blockquote {
  margin: 0;
  font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.777;
  margin-bottom:5.61vh;
  letter-spacing: .5px;
  width: 70%;
  text-align: center;
  height:5vh;
  }




  .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 2vh;
    width:30vw;
    margin-left:5vw;
    object-fit: contain;
  }


  .sticky1 {
    position: -webkit-sticky;
    position: sticky;
    top: 5vh;
    width:100%;
    margin:auto;
    object-fit: contain;
  }



  .sticky blockquote {
  margin: 0;
  font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.777;
  margin-top:2.369vh;
  margin-bottom:5.61vh;
  letter-spacing: .5px;
  width: 100%;
  text-align: center;
  height:5vh;
  }

  .image-left {
    top: 15vh;
    width:30vw;
    margin-left:5vw;
    object-fit: contain;
  }


  .vertical-filler {

    margin-bottom:50vh;
  }

    img {
      object-fit: contain;
    }

    .text-right { margin-left:45vw; width:45vw;}

    .text-left { margin-left:5vw; width:45vw;}

    .text-center {
      margin-left: auto;
      margin-right: auto;
      width: 60vw;
      max-width: 60ch;
      margin-bottom:5rem;
       }



    .text-bio {     margin-left: auto;
        margin-right: auto;
        width: 60vw;font-size:0.75rem;text-align:right }


    section{margin-bottom:1.333rem; display: grid;}




   .intersection-observer-checkpoint {


   }



  h1 {
    font-family: 'IBM Plex Sans',Times New Roman,Georgia,serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    font-size: 2.369rem;
    line-height: 28px;
    letter-spacing: .9px;
    text-align: center;
    margin-top:5.61vh;
  }

  h2{
    margin: 0;
  font-family: 'IBM Plex Sans',Times New Roman,Georgia,serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.777rem;
  line-height: 2.369rem;
  letter-spacing: .5px;
    text-align: center;
  }

  h3 {
     font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
     font-weight: 400;
     font-style: normal;
     width: 60%;
     margin-left: auto;
     margin-right: auto;
     font-size: 1.777rem;
     line-height: 2.369rem;
    letter-spacing:0.08rem;
     text-align: center;
   }

   h4 {
      font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
      font-weight: 100;
      font-style: normal;
      margin-left: auto;
      margin-right: auto;
      font-size: 1.333rem;
      line-height:1;
      width: 100%;
      text-align: center;
    }

    h5 {
      font-family: 'IBM Plex Sans',Times New Roman,Georgia,serif;
      font-weight: 700;
      font-style: italic;
      font-size: 2rem;
      line-height: 28px;
      letter-spacing: .9px;
      text-align: center;
      margin-top:5.61vh;
      margin-bottom:5.61vh;
      width:100%;
    }
    h6 {
       font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
       font-weight: 400;
       font-style: normal;
       width: 60%;
       margin-left: auto;
       margin-right: auto;
       font-size: 0.75rem;
       line-height: 1;
      letter-spacing:0.08rem;
       text-align: center;
     }

   p {
     font-family: 'Nunito Sans',Times New Roman,Georgia,serif;
     font-weight: 400;
     font-style: normal;
     font-variant-ligatures: normal;
     font-variant-numeric: oldstyle-nums;
     font-size: 1.333rem;
     line-height: 1.6;
     max-width: 66ch;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  letter-spacing:0.05rem;
   }


    </style>