/* Supernormal Stylesheet */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  overflow-x: hidden;
}

/* {
  animation: fade-in 1s ease;
}*/

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.container  {
  padding-top: 7em;
}
  @media (max-width: 1224px) {
    .container {
      padding-top: 15vmin; }
    }
    @media (max-width: 567px) {
      .container {
        padding-top: 4.5em; }
      }
.spacer {
  position: static;
    top: 0;
    left: 0;
    right: 0;
  width: 100vw;
  max-width: 100%;
  height: 10vw;
}
nav {
  padding: .5em;
  position: fixed;
  display: block;
    width: 100%;
    height: auto;
  background: rgb(253,253,253);
  background: linear-gradient(180deg, rgba(253,253,253,1) 30%, rgba(253,253,253,0) 100%);
  z-index: 999; }

#menuContainer {
  height: auto;
  overflow: visible;
  display: flex;
  flex-flow: row;
  justify-content: space-between; }

  .menuCategory {
    padding: 0;
    margin: 0; }
/* SUPER NORMAL MENU */
    .menuTitle {
      width: auto;
      vertical-align: top;
      display: inline-block; }
      .menuTitle h1 {
        display: inline-block;
        max-width: 100%;
        font-family: neue-haas-grotesk-display,sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 11vw;
        line-height: .75;
        letter-spacing: -0.0125em;
        padding: 0; margin: 0; }
        .menuTitle.ebc h1 {
          font-size: 6.75vw;
        }
        /* Larger than phablet */
        @media (min-width: 1224px) {
          .menuTitle h1 {
            font-size: 10rem;
            letter-spacing: -.03em;
            display: inline-block;
          }
        }
        .outline {
          color: #fff;
          text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

      .menuItems {
        margin: .125em 0.25em;
          width: auto;
          height: auto;
        display: inline-flex;
          flex-flow: column;
          flex-wrap: wrap-reverse;
          justify-content: space-around;
         }
      /* MOBILE MENU */
        .non-mobile {
          display: run-in; }
         .mobile, .mobile-menuContainer {
           display: none; }

         @media (max-width: 1224px) {
           .menuItems {
             display: none; }
            .mobile {
              display: inline; }
            .non-mobile {
              display: none; }

            #mobile-menuContainer {
              display: none; /* change onClick */
                flex-flow: column;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: space-around;
              position: fixed;
               top: 25%;
               right: 25%;
               bottom: 25%;
               left: 25%;
              background-color: #fff;
              box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
              padding: 10%;
            }
              #mobile-menuContainer a {
                margin: 0; padding: 0;
                border-bottom: 1px dotted black;
                width: 100%;
              }
              #mobile-menuContainer li {
                list-style-type: none;
                margin: 0; padding: 0;
              }
           }


        .menuItems li {
          font-size: 1em;
          line-height: 1.75;
          display: block;
          padding: 0; margin: 0;
          }
      .menuItemsInline li {
        display: inline-block;
        padding: 0; margin: 1;
        line-height: 1.35; }

/* Landing Page */

#list  {
  position: absolute;
  min-width: 100vw;
  height: 100vh;
  overflow: visible;
  display: flex;
    flex-direction: row;
   vertical-align: middle;
   align-items: center;
   animation: slide-left 250s linear infinite;
}

#list li {
  padding-left: 200px;
  font-size: 1em;
  letter-spacing: .01em;
  white-space: nowrap;
  list-style-type: none;
  display: inline;
  /* margin-right: 75vw; */
}

@keyframes slide-left {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}



/* PROJECT */

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row;
  flex-wrap: wrap;
}
.researchProject {
  display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-flow: row;
    flex-wrap: wrap;
  padding: 1.75em;
}
  .researchProject .projectContainer {
    max-width: 500px;
    max-height:500px;
    aspect-ratio: 1/1;
    margin: 2em 0.5em 4em 0.5em;
  }
  .researchProject .projectContainer .projectImage img {
    width:500px;
    height:500px;
    aspect-ratio: 1/1;
    object-fit:cover;
  }
  @media (max-width: 600px) {
      .researchProject {
        display: flex;
          justify-content: space-between;
          align-items: center;
          flex-flow: column;
          margin: 2em 0 4em 0;
          padding: 0;
      }
      .researchProject .projectContainer, .researchProject .projectContainer .projectImage img {
        width: 100%;
        height: auto;
      }
  }

.projectContainer {
  width: auto;
  margin: 1.5em 0;
}
  .projectImage {
    width: 100%;
    margin: 0; padding: 0;
    line-height: 0;
  }
  @media (max-width: 1224px) {
    .projectImage {
      text-align: center; }
    }
  .coverImage {
    width: 100%;
    margin: 0; padding: 0;
    line-height: 0;
    text-align: center;
  }
     .coverImage img, .projectImage img {
       max-width: 100%;
       height: auto;
       max-height: 22em;
     }

  .projectCaption {
    font-style: normal;
    line-height: 1.35;
    margin-top: 1em;
    height: auto;
    display: inline-block;}

    .imageCaption {
      display: block;
        text-align: center;
        font-size: smaller;
        line-height: 1.5;
      color: grey;
      margin: 1em 0 2em;
      padding: 0 1em;
    }


  .noImage {
    width: 500px;
    height: 500px;
      margin: 0;
      padding: 3em;
    text-align: center;
    background-color: #fffdeb; /* POST IT YELLOW */
    display: flex;
      align-items: center;
      justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }
    @media (max-width: 600px) {
        .noImage {
          width: 100%;
          height: auto;
          aspect-ratio: 1/1;
        }
    }
  .tags {
    font-family: neue-haas-grotesk-text,sans-serif;
    /*font-family: 'Fira Mono', monospace;*/
    /*font-size: .99em;*/
    /*letter-spacing: -0.08rem;*/
    line-height: 1;
  }
    .pagination {
      width: 100vw;
      max-width: 100%;
      height: auto;
      display: relative;
        left:0;
        right: 0;
        bottom: 0;
      margin-top: 1em;
    }


footer {
  width: 100%;
  padding: 1em;
  position: relative;
    left:0;
    bottom: 0;
  z-index: -1; }


  /* styles for the stage and animated elements */
  .random-image {
    z-index: -2!important;
    position: fixed;
      top: -50%;
      right: -100%;
    max-width: 100%;
    height: auto;
    background: repeat 50% 50%;
  }

  ::selection {
  background-color: #fffdeb;
}

/* randomize floats */

.float-left {float: left;}
.float-right {float: right;}

#leftarrow {
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg);
}