.buttonPhotography{
    margin: 4px 4px;
    border: 2px solid #4b4c4d;
    background-color: white;
    color: #4b4c4d;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

/* .no-scroll{
  position: relative;
  touch-action: none;
  height: 100%; 
} */

.containerPhoto{
    margin-right : auto;
    margin-left  : auto;
    padding-right: 15px;
    padding-left : 15px;
    width        : 100%;
    /* border: 1px solid green; */
}

.researchItemBox{
    margin-right : auto;
    margin-left  : 10%;
    width        : 80%;
    text-align   : left;  
}

hr {
    margin-left: auto;
    margin-right: auto;
    height:3px;
    border-width:0;
    min-width: 180px;
    width: 25%;
    color:gray; 
    background-color:gray;  
}

hr.b {
    margin-left: auto;
    margin-right: auto;
    height:2px;
    border-width:0;
    min-width: 100px;
    width: 10%;
    color:gray; 
    background-color:gray;  
}

h1{
    font-size :12px;
    font-family   : "Gravity-Light";
}

p.b{
    font-size : 7px;
    font-style: italic; 
    padding-top: 2px;
}


form {
  /* background-color: rgb(212, 209, 199); */
  background-color: var(--color-photography-subtle);
  width: max(300px, 50%);
  height: 44px;
  border: 1px solid #4b4c4d;
  color: var(--color-photography-subtle);
  display: flex;
  flex-direction: row;
  align-items: center;
}

input {
  all: unset;
  font: 16px system-ui;
  color: var(--color-photography-font);
  height: 100%;
  width: 100%;
  padding: 6px 10px;
}

::placeholder {
  color: var(--color-photography-font);
  opacity: 0.7; 
}

.searchButton {
  all: unset;
  cursor: pointer;
  width: 44px;
  height: 44px;
}

.searchButton svg {
  color: var(--color-photography-font);
  /* fill: currentColor; */
  width: 24px;
  height: 24px;
  /* padding-left: 10px; */
}






/* ------------   Photography part  ------------- */
#gallery {
    line-height:0;
    -webkit-column-count:2; /* split it into 5 columns */
    -webkit-column-gap:min(5vw,80px); /* give it a 5px gap between columns */
    -moz-column-count:2;
    -moz-column-gap:min(5vw,80px);
    column-count:2;
    column-gap:min(5vw,80px);
    overflow: hidden;
 }

 /* #gallery img {
    width: 100% !important;
    /* height: auto !important; */
    /* margin-bottom:min(5vw,80px); to match column gap */
 /* } */ 

 .gallery-div-landscape{
  width:100%; 
  height: 18vw;
  overflow:hidden; 
  margin-bottom:min(5vw,80px); 
  border-radius:3px; 
  display: flex; 
  justify-content: center;
 }

 .gallery-div-portrait{
  width:100%; 
  height: 36vw;
  overflow:hidden; 
  margin-bottom:min(5vw,80px); 
  border-radius:3px; 
  display: flex; 
  justify-content: center;
 }

 /* @media (max-width: 1200px) {
    #gallery {
     -moz-column-count:    3;
     -webkit-column-count: 3;
     column-count:         3;
    }
 } */

 /* @media (max-width: 800px) {
    #gallery {
     -moz-column-count:    2;
     -webkit-column-count: 2;
     column-count:         2;
    }
 } */

 @media (max-width: 400px) {
    #gallery {
     -moz-column-count:    1;
     -webkit-column-count: 1;
     column-count:         1;
    }

    .gallery-div-landscape{height: 60vw;}
    .gallery-div-portrait{height: 130vw;}
 }

 @media (min-width:400px) {
  h1{font-size : 15px;}
  p.b{font-size : 9px;}
  .containerPhoto{width: 90%;}
  .gallery-div-landscape{height: 22vw;}
  .gallery-div-portrait{height: 49vw;}
}

@media (min-width:768px) {
  h1{font-size : 20px;}
  p.b{font-size : 10px;}
  .containerPhoto{width: 80%;}  
}

@media (min-width:992px) {
  h1{font-size : 22px;}
  p.b{font-size : 10px;}
  .containerPhoto{width: 60%;}
  .gallery-div-landscape{height: 18vw;}
  .gallery-div-portrait{height: min(41vw,calc(36vw + 80px));}
  /* .gallery-div-portrait{max-height: calc(~"38vw+80px");} */
}


 /* ------------ PopUp Pictures ---------------- */
 .myImg {
    /* border-radius: 3px; */
    cursor: pointer;
    transition: 0.3s;
  }
  
  .myImg:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    padding-top: clamp(50px,20vh,200px); /* Location of the box */
    padding-bottom: 80px;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: var(--color-photography-subtle-a);
  }
  
  /* Modal Content (image) */
  .modal-content {
    margin: auto;
    display: block;
    object-fit: contain;
    max-height: 100%;
  }
  
  /* Caption of Modal Image */
  #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 720px;
    text-align: center;
    /* color: rgb(54,54,54); */
    color: var(--color-photography-font);
    padding: 10px 0;
    height: 50px;
  }
  
  /* Add Animation */
  .modal-content, #caption {  
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.6s;
    animation-name: fadeIn;
    animation-duration: 0.6s;
  }

  .modal{
    -webkit-animation-name: fade;
    -webkit-animation-duration: 0.6s;
    animation-name: fade;
    animation-duration: 0.6s;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fade {
    from {background-color: rgba(220,217,208,0); }
    to { background-color: var(--color-photography-subtle-a); }
  }
  
  /* The Close Button */
  .close {
    z-index: 2;
    position: absolute;
    top: max(5%,35px);
    right: min(5%,35px);
    color: var(--color-photography-font);
    /* color: rgb(54,54,54); */
    font-size: 30px;
    font-weight: normal;
    transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
    color: var(--color-font-hover);
    text-decoration: none;
    cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 720px){
    .modal-content {
      width: 100%;
    }
    /* .close{
        top: 55px;
    } */
  }