body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

span {
  font-size: 16px;
}

/* Remove the shadow from the container/border */
.navbar-custom .avatar-container .avatar-img-border {
  width: 120%;
  border-radius: 50%;
  margin-left: -60%;
  display: inline-block;
  box-shadow: none; /* Shadow removed from here */
}

/* Apply the shadow directly to the image */
.navbar-custom .avatar-container .avatar-img {
  width: 100%;
  border-radius: 0%;
  display: block;

  /* Remove box-shadow and use drop-shadow instead */
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.5));
  -webkit-filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.5));
}
  /* Fix for gap in style rules on smaller phones*/
  /* This targets the "gap" where you DON'T want the styles to apply */
  @media only screen and (min-width: 340px) and (max-width: 365px) {
    
    .header-section.has-img .intro-header.no-img {
      display: none; /* Or whatever the default was */
    }
  
    .intro-header.big-img {
      width: auto;   /* Resets from 100% */
      height: auto;  /* Resets from 220px */
    }
  
    .intro-header.big-img .page-heading,
    .intro-header.big-img .post-heading {
      display: block; /* Brings back the hidden text */
    }
  
    .header-section.has-img .big-img {
      margin-bottom: 35px;
    }
  }