/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
    display: none;
  }

  #gallerytiles {
    width: 48%; 
    display: inline-block;
    margin-top: 2em;
  }

  #gallerydisplay {
    width: 48%; 
    display: inline-block;
    max-height: 100%;
    margin-top: 2em;
    position: fixed;
    overflow-y: hidden; 
    z-index: -1;
  }

  #imgtext {
    color: black;
    font-size: 20px;
  }

  /* Closable button inside the image */
  .closebtn {
    color: black;
    font-size: 35px;
    cursor: pointer;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 50%;
    padding: 0 4px;
  }
  
  .column img {
    margin-top: -7px;
    vertical-align: middle;
    width: 100%;
    cursor: pointer; 
    transition: 0.2s;
    box-shadow: none;
  }

  .column img:hover {
     box-shadow: 8px 8px rgba(119, 181, 215, 0.8); 
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }

    #gallerydisplay {
        display: none; 
    }

    #gallerytiles {
        width: 100%; 
        display: block;
      }
  }