/* ========== General Layout ========== */
* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}



/* ========== Media Text Block ========== */
@media (max-width: 768px) {
  .wp-block-media-text__media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* ========== Photo Styling ========== */
.photo {
  margin: 1em;
  border: 1px solid #BFC2C6;
  padding: 6px;
  background-color: #F0F2F6;
}

.phototext {
  text-align: center;
  font-size: 12px;
}

/* ========== Header Image ========== */
@media screen and (max-width: 450px) {
  .site-header-image {
    padding-top: 0;
    z-index: 21;
    height: auto;
    max-width: 580px;
  }
}

/* ========== Quotes ========== */
.quote-symbol {
  font-size: calc(70px + (90 - 70) * ((100vw - 240px) / (1600 - 240)));
  font-weight: 400;
  color: #A61C35;
  font-family: Georgia;
  line-height: 5px;
  padding-bottom: 0px;
  margin-top: 35px;
}

.quote,
.ref {
  font-size: calc(14px + (18 - 14) * ((100vw - 240px) / (1600 - 240)));
  font-weight: 400;
  font-family: Segoe UI;
  color: #025159;
  text-align: center;
  padding: 0px 14px 14px 14px;
  display: block;
}

/* ========== Tables ========== */
.project-table {
  border-collapse: collapse;
  margin: auto;
  margin-bottom: 10px;
  margin-top: 15px;
}

.project-table th,
.project-table td {
  border: 1px dotted #54668b;
  padding: 8px;
}

.project-table th {
  color: #5E5F50;
  background-color: #fff;
}


/* ========== Gallery Styling ========== */
div.gallery {
  border: 1px solid #ccc !important;
  padding: 0;
  background-color: transparent;
  max-width: 300px;
  margin: auto;
  box-sizing: border-box;
}

div.gallery:hover {
  border: 1px solid #777 !important;
}

div.gallery img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

@media only screen and (max-width: 700px) {
  div.gallery {
    border-width: 0.5px !important;
    max-width: 90%;
  }

  div.gallery img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }
}

div.desc {
  padding: 12px;
  text-align: center;
  font-size: calc(14px + (13 - 14) * ((100vw - 240px) / (1600 - 240)));
}

.gallery p:empty {
  display: none;
}