@media only screen and (min-width: 800px) {.d0fivecolumnwrapper {display: flex; overflow: hidden; width: 100%;}} @media only screen and (max-width: 799px) {.d0fivecolumnwrapper {display: flex; flex-direction: column; overflow: hidden; width: 100%;}} .d0fivecolumn {flex: 1 1 20%; box-sizing: border-box; padding: 0 5px;}


@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap');
#r8_content p {
  font-family: "Karla", sans-serif;
}
#r8_content h1 {font-family: 'Playfair Display';font-weight:500;}
#r8_content h2 {font-family: 'Playfair Display';font-weight:500;}
#r8_content h3 {font-family: 'Playfair Display';font-weight:500;}


/* Changed the selector names to match your HTML exactly */
.jh-solid-box01 {
  background-color: #F0EEE8; 
  border: 1px solid #8A9194;
  border-top: 5px solid #27B8D1;
  padding: 10px; 
  min-height: 0px;
  margin: 10px;
  margin-top: 1em; 
  display: block;
}

.jh-solid-box00 {
  background-color: #F0EEE8; 
  border: 1px solid #8A9194;
  border-top: 5px solid #242A2E; 
  padding: 10px; 
  min-height: 0px;
  margin: 10px;
  margin-top: 1em; 
  display: block;
}

.jh-solid-box02 {
  background-color: #242A2E; 
  border-top: 5px solid #27B8D1;
  padding: 10px; 
  min-height: 0px;
  margin: 10px;
  margin-top: 1em; 
  display: block;
}

.jh-solid-box03 {
  background-color: #E3E7E9; 
  border: 1px solid #8A9194;
  border-top: 5px solid #27B8D1;
  padding: 10px; 
  min-height: 0px;
  margin: 10px;
  margin-top: 1em; 
  display: block;
}

.jh-hover-box {
    display: block;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1px 15px; 
    text-decoration: none !important;
    transition: all 0.25s ease;
min-height: 0px;
 margin-bottom: 10px; 
}
  .jh-hover-box:hover {background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);}