.sub-menu {
  display:none;
}

.grid-container {
  position: relative;
}
.image-fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-grid{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.overlay-text {
  padding: 10px;
  border: 3px solid #FFC300;
  color: white;
}

.grid-container:hover .overlay-grid {
  opacity: 1;
}


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

  li{ 
    list-style-type: none; margin-bottom: 40px;
    text-align: center;
  }
  ul{ margin: 20px 0; }

  section#gallery{ padding: 20px; }
  section#gallery > h1{
      text-align: center; font-size: 3em;
      padding: 40px 0;
      font-weight: normal;
  }

  .button-group{ text-align: center; margin-bottom: 40px;}
  .btn{
      padding: 10px 20px;
      margin: 10px 0;
      background: #333; color: #fff;
      text-transform: uppercase;
      font-size: 12px;
      border: none;
      width:100%;
  }
  .btn.on{
      background: white;
      color: #FFC300;
  }

  .btn:hover {
    color: #FFC300;
    background-color: white;
  }

  .sub-menu-container {
    border-top: 3px solid #FFC300;
  }

  /* grid */
  .grid { display: flex;
}
  .grid-item { 
    width:100%;
    padding-left: 15px; padding-right: 15px;
  }	


  @media only screen and (min-width: 600px) {
    .grid-item {
      width:50%;
    }
  }

  @media only screen and (min-width: 1100px) {
    .grid-item {
      width:33.3%;
    }
  }


  .preloader {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }