/*---------------------------------------------------------------*/
/*------------- Put CSS to overwrite Blog CSS here  -------------*/
/*---------------------------------------------------------------*/





.blog-widget .blog-widget-article {
  color: var(--fontColor);
  background: var(--cardBG);
  border: solid 1px rgba(var(--opacityColor2),.15);
  cursor: pointer;
  padding: 0px;
  border-radius: 12px;
  overflow: hidden;
    box-shadow: none;
}

.blog-widget .blog-widget-article:hover {
    box-shadow: var(--cardShadow);
}

.blog-widget .blog-widget-article .blog-widget-article-img {
 border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.blog-widget .blog-widget-article:nth-last-child(1) {
  border-bottom:solid 1px rgba(var(--opacityColor2),.15);
}


.blog-widget .blog-widget-article .blog-widget-article-preview .blog-widget-article-preview-title {
  line-height: 1.2em;
  padding: 0.5em 0 .2em;
  color: var(--headingColor);
  font-family: var(--headingFont);
  font-weight: var(--headingWeight);
  font-size: 1.2em;
}

.blog-widget .blog-widget-article .blog-widget-article-preview {
  padding: 1em 25px 4em;
}


.blog-widget .blog-widget-article .blog-widget-article-preview .blog-widget-article-content-text {
  padding: 0.6em 0;
  line-height: 1.4em;
  font-size: .9em;
}

.blog-widget .blog-widget-article .blog-widget-article-preview .blog-widget-article-content-button,
.blogPost .blogPostDetails a.blogBtn{
  bottom: 25px;
  left: 25px;
  margin: 0;
  padding: .5em 1em;
  width: max-content;
  font-size: .8em;
}

.blog-widget .blog-widget-heading {
  display: none;
}

section:not([class*="M_"]):has(.siteContent > .blogWidget) {
  background: var(--primaryLight);
} 


.blogPost {
  margin: calc(var(--gridSpacing) * 2) 0 var(--gridSpacing);
  color: var(--fontColor);
  background: var(--white);
  border:solid 1px rgba(var(--opacityColor2),.15);
  box-shadow: none;
    border-radius: 12px;
  overflow: hidden;
}


.blogPost:hover {
  box-shadow: var(--cardShadow);
}

.blogPost .blogPostDetails {
  padding: 25px;
}

.blogPost .blogPostDetails .blogPostText {
  line-height: 1.4em;
  padding: 0.4em 0 1em;
  font-size: .9em;
}

.blogPost .blogPostDetails .blogTitle {
  font-variation-settings:"wdth" 87.5;
  font-family: var(--headingFont);
  color: var(--headingColor);
}



@media all and (min-width:781px) {
  .blogPost .blogPostHero {
  width: 30%;
}

.blogPost .blogPostDetails {
    width: calc(100% - 30%);
}
}


@media all and (max-width: 780px) {
  .blogNavigation {
    text-align: center;
  }
  .blogArticle .blogArticleWrap .blogPostHero {
    float: none;
    max-width: none;
    margin: 1em 0;
  }
  .blogArticle .blogArticleImages .container div {
    width: 49%;
  }
  .categorySection .container {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }

    .blogPost .blogPostHero {
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 15em;
    margin: 0 0 1em;
  }
  .blogPost .blogPostDetails {
    width: 100%;
      padding: 10px 25px 25px;
  }


}