:root {
  --default-width: 25%;
  --default-height: 270px;
  --background-col: #fff;
}

@media all and (max-width: 1400px) {
  :root {
    --default-width: 33%;
  }
}

@media all and (max-width: 1000px) {
  :root {
    --default-width: 50%;
  }
}

@media all and (max-width: 750px) {
  :root {
    --default-width: 100%;
    --default-height: 80vw;
  }

  [class*="cell"] {
    font-size: 13px;
    max-height: 75vw;
    max-width: 100%;
  }
}

@media all and (min-height: 2000px) {
  :root {
  }
}

@media all and (min-width: 2500px) {
  :root {
    --default-height: 300px;
  }
}

#hero {
  padding: 0vh;
}

/* ---- grid  def---- */

#hero #grid-container {
  text-align: center;
}

#hero #grid {
  margin: auto;
  max-width: 2000px;
}

#hero #grid:after {
  clear: both;
  content: "";
  display: block;
}

/* ---- grid elements ---- */

#hero .dimensioner,
#hero .cell {
  width: var(--default-width);
}

#hero .cell {
  background: transparent;
  border: 2px solid var(--background-col);
  color: white;
  font-size: 15px;
  height: var(--default-height);
  overflow: hidden;
  visibility: hidden;
  width: var(--default-width);
}

#hero .cell-content {
  background: transparent;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: none;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease-in-out;
  width: 100%;
}

#hero .cell-content::after {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.3) 35%,
    rgba(0, 0, 0, 0.1) 65%,
    rgba(0, 0, 0, 0) 75.5%,
    rgba(0, 0, 0, 0) 100%
  );
  /* background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.01) 82.85%, rgba(0, 0, 0, 0) 80%);*/
  /* background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,#000 90%);
    background: -webkit-linear-gradient(top,#b6464600 0%,#000 90%);*/
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

#hero .cell-content .tags {
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.7em;
  font-weight: 400;
  letter-spacing: 0.88px;
  padding: 1rem;
  padding-bottom: 0rem;
  text-align: left;
  /*text-shadow: 0 0 1px #000,1px -1px 1px #000,-1px 1px 1px #000,-1px -1px 1px #000,1px 1px 1px #000;*/
  text-transform: uppercase;
  width: 100%;
  z-index: 1;
}

#hero .cell-content .title {
  align-self: flex-end;
  color: #eee;
  font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
  font-size: 1.9em;
  letter-spacing: 0.03em;
  line-height: 1.2;
  padding: 1rem;
  padding-bottom: 1.5rem;
  padding-top: 0.3rem;
  text-align: left;
 /* text-shadow: 0 0 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
    -1px -1px 1px #000, 1px 1px 1px #000;*/
  width: 100%;
  z-index: 1;
}

#hero .cell-content:hover,
#hero .cell-content:focus {
  cursor: pointer;
  transform: scale(1.025);
}

#hero .cell:hover,
#hero .cell:focus {
  /*z-index: 4;*/
}

/* single cell*/
#hero .c1 {
  height: var(--default-height);
  width: var(--default-width);
}

/* double width */
#hero .w2 {
  width: calc(var(--default-width) * 2);
}

/* double height */
#hero .h2 {
  height: calc(var(--default-height) * 2);
}

/* 4x cell square*/
#hero .c4 {
  height: calc(var(--default-height) * 2);
  width: calc(var(--default-width) * 2);
}

/* ----  end ---- */

#hero .cell .anchor-overlay {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  text-decoration: none !important;
  top: 0;
  z-index: 2;
}

#hero .cell .anchor-overlay:hover::before,
#hero .cell .anchor-overlay:hover::after,
#hero .cell .anchor-overlay::before {
  background: none;
  color: none;
}

#loadMoreContainer {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 1.5em;
  text-align: center;
}

#loadMoreButt {
  border: 0.1px solid rgb(255, 255, 255);
  border-radius: 0.5em;
  color: #000;
  cursor: pointer;
  font-size: 1.4em;
  margin: 10px;
  padding: 0.3em 3.5em;
  transition: 0.4s;
}

#loadMoreButt:hover {
    border: 0.1px solid #bbb;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072);
 
}
#loadMoreButt:active {
  border: 2px solid rgb(0, 0, 0);
}

@media screen and (max-device-width: 800px) {
  #loadMoreButt {
    border: 0.5px solid #bbb;
  }
}


#bbt-grid {
  margin-bottom: 0 !important;
  margin-top: 3em !important;
}