/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */
#hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 200px;
  padding-bottom: 40px;
  min-height: 100vh;
  color: #ffffff; }
  @media screen and (min-width: 641px) {
    #hero {
      padding-bottom: 40px;
      padding-top: 225px; } }
  @media screen and (min-width: 769px) {
    #hero {
      padding-top: 250px; } }
  @media screen and (min-width: 1025px) {
    #hero {
      padding-top: 275px; } }
  #hero .banner-content {
    margin-bottom: 4rem; }
    #hero .banner-content h1 {
      text-transform: uppercase;
      line-height: 0.8;
      letter-spacing: clamp(0.1725rem, calc(2.76px + (4.92 - 2.76) * ((100vw - 320px) / (1920 - 320))), 0.3075rem); }

#hero {
  position: relative; }
  #hero:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent linear-gradient(116deg, #000000 0%, #00000010 100%) 0% 0% no-repeat padding-box;
    z-index: -1;
    opacity: 0.42; }

.blog-content {
  background-color: #f7f7f7; }
  .blog-content .entry-meta {
    font-family: "Roboto", sans-serif;
    color: #5D5D5D !important;
    font-weight: 700; }
  .blog-content .content-area h1,
  .blog-content .content-area h2,
  .blog-content .content-area h3,
  .blog-content .content-area h4,
  .blog-content .content-area h5,
  .blog-content .content-area h6,
  .blog-content .content-area .h1,
  .blog-content .content-area .h2,
  .blog-content .content-area .h3,
  .blog-content .content-area .h4,
  .blog-content .content-area .h5,
  .blog-content .content-area .h6 {
    color: #212322;
    letter-spacing: 0; }
  .blog-content .content-area ul,
  .blog-content .content-area ol {
    margin-bottom: 2rem;
    padding-left: 3rem; }
  .blog-content .content-area h2 {
    padding-bottom: 2rem;
    margin-bottom: 2rem; }
    .blog-content .content-area h2:first-of-type {
      border-bottom: 1px solid #212322; }
  .blog-content .back-btn {
    position: relative;
    color: #212322;
    font-size: 20px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    text-decoration: none !important; }
    .blog-content .back-btn:before {
      font-family: "standard-icons" !important;
      content: "\e900";
      font-weight: normal;
      margin-right: 1rem;
      font-size: 39px; }
    .blog-content .back-btn:hover {
      color: #ff9933; }

/* Social Share buttons */
.social-share-wrapper .share-btns {
  list-style: none;
  margin: 0;
  padding: 0; }
  .social-share-wrapper .share-btns li {
    display: block;
    cursor: pointer;
    position: relative;
    top: 0;
    transition: 0.2s all linear;
    margin-right: 15px; }
    .social-share-wrapper .share-btns li:first-of-type {
      font-size: 24px;
      text-transform: uppercase;
      font-weight: 700;
      color: #212322;
      margin-right: 1rem; }
      @media (min-width: 641px) {
        .social-share-wrapper .share-btns li:first-of-type {
          margin-right: 2rem; } }
    .social-share-wrapper .share-btns li:nth-of-type(n + 2) i {
      color: #ff9933;
      font-size: 36px; }
    .social-share-wrapper .share-btns li:nth-of-type(n + 2):hover {
      top: -3px; }
    .social-share-wrapper .share-btns li:last-child {
      margin-right: 0; }
    .social-share-wrapper .share-btns li a {
      text-decoration: none; }

.related-posts {
  background-color: #f7f7f7; }
  .related-posts .top .h2 {
    color: #212322;
    margin: 0; }
  .related-posts .top hr {
    border-top: solid 1px #212322;
    opacity: 1;
    background-color: #212322; }
  .related-posts #related-posts-slider-nav-container button {
    border: 1px solid #d8d8d8;
    outline: none;
    box-shadow: 0;
    color: #212322;
    background-color: transparent;
    padding: 14px; }
    .related-posts #related-posts-slider-nav-container button i {
      font-size: 32px; }
    .related-posts #related-posts-slider-nav-container button.owl-prev {
      margin-right: 1rem; }
  .related-posts .blog-card {
    display: flex;
    flex-direction: column; }
    @media (min-width: 641px) {
      .related-posts .blog-card {
        flex-direction: row; } }
    .related-posts .blog-card .img-wrap {
      width: 100%; }
      @media (min-width: 641px) {
        .related-posts .blog-card .img-wrap {
          width: 206px; } }
      @media (min-width: 769px) {
        .related-posts .blog-card .img-wrap {
          width: 206px; } }
      @media (min-width: 1025px) {
        .related-posts .blog-card .img-wrap {
          width: 206px; } }
      .related-posts .blog-card .img-wrap picture,
      .related-posts .blog-card .img-wrap img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 226px;
        max-width: 100% !important;
        transition: all 0.2s linear; }
      .related-posts .blog-card .img-wrap:hover picture,
      .related-posts .blog-card .img-wrap:hover img {
        transform: scale(1.01, 1.05);
        transition: all 0.2s linear; }
    .related-posts .blog-card .card-content {
      padding: 1rem 0 0 0;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #212322;
      width: 100%; }
      @media (min-width: 641px) {
        .related-posts .blog-card .card-content {
          width: calc(100% - 206px);
          padding: 1rem 2rem 0 1.5rem;
          margin-left: 20px; } }
      .related-posts .blog-card .card-content .card-title {
        margin-top: 0;
        display: block;
        text-decoration: none !important; }
        .related-posts .blog-card .card-content .card-title h4 {
          font-family: "Roboto", sans-serif;
          font-weight: 700;
          color: #212322;
          letter-spacing: 0; }
        .related-posts .blog-card .card-content .card-title:hover h4 {
          color: #ff9933; }
      .related-posts .blog-card .card-content .card-text {
        margin-bottom: 1.5rem; }
      .related-posts .blog-card .card-content .btn-arrow {
        margin-top: auto; }
  .related-posts .owl-dots {
    margin-top: 3rem; }
    .related-posts .owl-dots button span {
      height: 17px !important;
      width: 17px !important;
      background-color: white !important;
      border: 1px solid #707070; }
    .related-posts .owl-dots button.active span {
      background-color: #c9c9c9 !important; }