@media (orientation:portrait){
  #intro-screen{
    background-position: 57%;
    background-image: url("../img/cover33.jpg");
  }

  .centered-modal{
  width: 100%;
  height: 100%;
}

.basic-modal {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.intro-name{
  font-size: 2.5rem;
}

.menu-item{
  padding: .5rem 1rem .5rem .3rem;
  font-size: 1.1rem;
}

.upload-folder{
  margin-top: 1.3rem;
}



.folder-div:hover{
  filter: brightness(100%);
}

  .grid-item {
    width: calc(50% - 4px);
    /* height: 100px; */
    /* background-size: cover; */
  }

  #gallery-bar{
    position: sticky;
    top: 0;
    overflow-x: hidden;
    width: 100%;
    height: 5rem;
    height: 4.5rem;
    /* height: calc(4.5rem + var(--photoBarHeight)); */
    /* height: 18.5rem; */
    background-color: white;
    z-index: 4;
  }

  /* .scroll-mode { */
    .scroll-mode #gallery-bar{
      height: calc(4.5rem + var(--photoBarHeight, 28vh));
      height: calc(2.5rem + 5vh + var(--photoBarHeight, 28vh));
      transition: height .35s;
    }

    .scroll-mode #photo-bar::after{
      content: 'TAP TO EXPAND';
      height: fit-content;
      width: 100%;
      text-align: center;
      color: darkgray;
      position: absolute;
      top: 50%;
      left: 0;
      translate: 0 calc(-50% - 0px);
      line-height: calc(100% - 2.5rem - 5vh);
    }



    .scroll-mode .expand #photo-bar::after{
      /* display: none; */
    }

    .scroll-mode .expand #photo-bar::after{
      content: '';
      position: absolute;
      right: 0%;
      top: 50%;
      translate: 0 -50%;
    }

    .scroll-mode .photo-bar-img{
      max-height: 70%;
      max-width: 90%;
      top: calc(43% - .5rem);
      top: calc(50% - 2vh);
      /* display: none; */
      opacity: 0;
    }

    .scroll-mode .expand .photo-bar-img{
      max-height: 70%;
      max-width: 90%;
      display: block;
      /* top: calc(50% - 2rem); */
      opacity: 1;
    }

    .scroll-mode .expand#gallery-bar{
      height: calc(4.5rem + var(--photoBarHeight2, 65vh));
      transition: height .35s;
    }

    /* .expand#gallery-wrap{
      opacity: .6;
    } */
  /* } */

  .gallery-wrap{
    min-height: calc((var(--vh, 1vh) * 100) - 5rem);
    min-height: calc(100vh - 4.5rem);
    /* opacity: .6; */
  }

  .photo-bar-inner{
    scrollbar-width: none;
  }

  .photo-bar-inner::-webkit-scrollbar {
  display: none;
}

  .martin{

      font-family: Inter;
      display: block;
      width: 100%;
      font-size: 1.2rem;
      padding: .2rem .5rem;
      opacity: .85;
      position: relative;
      /* top: 50%; */
      /* transform: translateY(-50%); */
      padding-right: 3rem;
      height: 2.5rem;
      line-height: 2.5rem;
      vertical-align: top;

  }
  #gallery-bar-inner{
    overflow-x: auto;
    display: block;
    vertical-align: top;
    height: 2rem;
    height: calc(2rem);
    /* line-height: 2rem; */
    width: 100%;
    background-color: rgb(240,240,240);
    white-space: nowrap;
    overflow: -moz-scrollbars-none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#gallery-bar-inner::-webkit-scrollbar {
    display: none;  /* Chrome Safari */
}

  #gallery-bar-buffer{
    position: relative;
    top:0;
    left:0;
    overflow-x: auto;
    display: block;
    vertical-align: top;
    height: 2rem;
    line-height: 2rem;
    width: 100%;
    background-color: rgb(230,230,230);
    z-index: 1;
    opacity: 0;
    display: none;
  }
  .gallery-bar-item{
    font-family: Inter;
    display: inline-block;
    font-size: .65rem;
    padding: 0rem .8rem;
    opacity: .4;
    position: relative;
    top: 50%;
    font-size: .75rem;
    transform: translateY(-50%);
    height: calc(2rem - 0px);
    line-height: calc(2rem - 0px);
    text-transform: uppercase;
    box-sizing: border-box;
  }

  .gallery-bar-item.selected-item{
    border-bottom: 2px solid darkgray;
    border-color: rgb(60,60,60);
    font-weight: 500;
    /* background-color: rgb(220,220,240); */
  }

  .new-picture-modal{
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    height: 80vh;
    width: 95vw;
    height: 100%;
    width: 100%;
    top: 0;

  }
  #upload-display{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* bottom: 20%; */
    /* background-color: lightgray; */
    max-width: 100%;
    width: 100%;
    height: 80%;
    /* width: fit-content; */
    text-align: center;
    overflow-y: auto;
  }

  .display-image-blank{
    /* position: absolute; */
    /* left: 50%; */
    top:50%;
    transform: translateY(-50%);
    /* max-width: 80%; */
    max-height: 82%;
    max-width: 70%;
    border: 1px solid darkgrey;
    position: relative;
    margin: .2rem;
    display: inline-block;
  }

  .display-image{
    /* position: absolute; */
    /* left: 50%; */
    top:50%;
    transform: translateY(-50%);
    /* max-width: 80%; */
    max-height: 82%;
    max-width: 70%;
    border: 1px solid darkgrey;
    display: inline-block;
    position: relative;
    margin: .2rem;
  }

  .upload-success{
   border: 3px solid #2ecc71;
  }

  .multiple-rows-mobile .display-image{
    top:auto;
    transform: translateY(0);
    max-height: 45%;
  }

  .small-images-mobile .display-image{
  max-height: 30%;
  }

  .single-view-image-wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 80%;
  }

  .single-view-image{
    height: auto;
    width: 100%;
  }

  .login-wrap{
    width: 100%;
  text-align: center;
  padding: 2rem 0;
  }

  .folder-order-wrap{
    margin-top: 25%;
  }

}

 @media screen and (orientation:landscape) and (max-width: 1200px) {
  #intro-screen{
    background-position: 0px -100px;
  }
   .grid-item {
     width: calc(50% - 4px);
     /* height: 100px; */
     /* background-size: cover; */
   }

   .contact-inputs-wrap{
     overflow: scroll;
   }

   .contact-long-message-wrap{
     height: 80%;
   }

   #gallery-bar-inner{
     overflow-x: auto;
     display: block;
     vertical-align: top;
     height: 2rem;
     height: 1.6rem;
     line-height: 1.6rem;
     width: 100%;
     background-color: rgb(230,230,230);
     white-space: nowrap;
     overflow: -moz-scrollbars-none;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }

 .martin{
  font-size: 1.2rem;
  height: 2rem;
  line-height: 2rem;
 }


 .gallery-bar-item{
   font-family: Inter;
   display: inline-block;
   font-size: .75rem;
   padding: 0rem .5rem;
   opacity: .5;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   height: 1.6rem;
   line-height: 1.6rem;
   text-transform: uppercase;
   box-sizing: border-box;
 }

 .gallery-bar-item.selected-item{
   border-bottom: 2px solid darkgray;
   border-color: rgb(60,60,60);
 }


 }