@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 h3 {font-family: 'Playfair Display', serif; font-weight:500;}

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

.jh-solid-box1 {background-color: #E7EBEC;
padding:30px; min-height:350px; border-left: 5px solid #27B8D1; margin: 10px ;
margin-top: 1em ; display:block;}

.jh-solid-box2 {background-color: #E7EBEC;
padding:30px; min-height:50px; border-top: 5px solid #27B8D1; margin: 10px ; border-left: 1px solid #C9D1D4; border-right: 1px solid #C9D1D4; border-bottom: 1px solid #C9D1D4; border-radius: 3px;
margin-top: 1em ; display:block;}

.jh-solid-box3 {background-color: #F0EEE8;
padding:30px; min-height:0px; border: 2px solid #cccccc; border-radius: 3px; margin: 10px ;
margin-top: 1em ; display:block;}

#r8_content .parallax01 {background-image: url(/shared/images/content/bus_58001/10._Case_Study_-_Project_Notes_Background_1750.jpg?nocache=730); 
background-attachment: fixed; 
background-position-x: right; 
background-position-y: top;}
.parallax-light {background-color: rgba(32,38, 42,0.0); margin-top:-15px; color:#FFF;}


.timeline-wrapper{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:2rem 1rem;
}

.timeline-svg{
    display:block;
    width:100%;
    height:auto;
}

.timeline-caption{
    margin-top:1rem;
    text-align:center;
    font-size:14px;
    line-height:1.5;
    color:#475056;
}

@media only screen and (min-width: 800px) {
  .d0splitbackground {
    position: relative;
  }

  .d0splitbackground::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
      to left,
      rgba(240, 238, 232, 0) 0%,
      rgba(240, 238, 232, 0) 35%,
      rgba(240, 238, 232, 1) 35%,
      rgba(240, 238, 232, 1) 100%
    );
    pointer-events: none;
  }
}

.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);}