/* BLOG POST */

.blog-post__featured-image-wrapper {
  max-height: 458px;
  overflow: hidden;
  margin-bottom:1.4rem;
}

.blog-post__featured-image-wrapper__image {
  width: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: var(--image-ratio-style-2);
  /**** panoramic, blog hero ****/
}


.blog-post__article {
  max-width: 1200px;
  padding:0 16px;
  margin: 0 auto;
}

.blog-post__article__title {
  margin: 1.4rem 0;
}

.blog-post__article__meta {
  display: flex;
  gap: 5px;
  font-size: 16px;
  align-items: center;
  margin-bottom: 1.4rem;
  margin-top: 1rem;
}

.blog-post__article__meta__author {

}

.blog-post__article__meta__read-time,
.blog-post__article__meta__timestamp {
  font-size: 14px;
}

.blog-post__article__meta__social-links {
  margin-left:auto;
} 

.blog-post__article__meta__social-links__list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 8px;
}
  
.blog-post__article__meta__social-links__list__item{
  display: flex;
}

.blog-post__article__meta__social-links__list__item svg {
  height: 20px;'
  color: var(--primary-2);
  fill: var(--primary-2);
}


.blog-post__article__meta__timestamp {
  display: block;
}

.blog-post__article__body{

}

.blog-post__article__body ul {
  margin-left: 32px;
}

@media screen and (max-width: 768px) {
  .blog-post__article__meta{
    flex-direction: column;
    align-items: flex-start;
  }
  .blog-post__article__meta__author,
  .blog-post__article__meta__read-time,
  .blog-post__article__meta__timestamp{
    width:100%;
  }

  .blog-post__article__meta__social-links__list,
  .blog-post__article__meta__social-links{
    margin-left: 0;
  }
  .blog-post__article__meta__social-links{
    margin-top:1rem;
  }
  
}

/* COMMENTS */


#comments-listing .comment-reply-to {
  color: ;
}

#comments-listing .comment-reply-to:hover,
#comments-listing .comment-reply-to:focus {
  color: ;
}

#comments-listing .comment-reply-to:active {
  color: ;
}

.blog-comments {
  margin: 0 auto;
  width: 100%;
  max-width: 96ch;
}

.blog-comments .new-comments {
  margin-top: 32px;
}

.blog-comments .new-comments .comment.depth-0 {
  border-top: 1px solid var(--grey-200);
  padding-top: 32px;
  margin-top: 32px;
}

.blog-comments .new-comments .comment.depth-0:last-child {
  border-bottom: 1px solid #eee;
  padding-bottom: 32px;
  margin-bottom: 32px;
}

.blog-comments .new-comments .comment.depth-1 {
  background-color: var(--grey-100);
  margin-left:32px;
  padding: 32px;
  position:relative;
}

.blog-comments .new-comments .comment.depth-1:after {
  content: '';
  position: absolute;
  left:16px;
  top:38px;
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--grey-500);
}


.blog-comments .hs-submit {
  text-align: center;
}

.blog-comments .comment-reply-to {
  border: 0 none;
}

.blog-comments .comment-reply-to:hover,
.blog-comments .comment-reply-to:focus {
  background-color: transparent;
  text-decoration: underline;
}

.blog-comments .replying {
  padding: 32px;
  background-color: #eee;
  margin-bottom: 32px;
}

.blog-comments .replying .replying-to {
  font-weight: bold;
  margin-bottom: 32px;
  display: block;
}

.blog-comments .replying .hs-form-field>label {
  padding-left: 0;
}


.blog-comments .comment-reply-to.hs-button.secondary {
  display: block;
}



.blog_card_group-item {
  display: flex;
  row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 60px;
  /* space for navigation */
}

.blog_card_group-item.swiper-slide{
  height:auto;
}


@media screen and (min-width: 480px) {
  .add_border.swiper-slide {
    height: auto;
  }
}

.link_style-bullet {
  text-decoration: dotted;
}

.swiper.card_swiper-slide,
.swiper.card_swiper-fade,
.swiper.card_swiper-zoom {
  padding: 0 0 40px;
}


.add_border .blog_card_group__image-wrapper {
  padding: 20px;
}


/* NEW BLOG STYLES */

 /* CARDS */
.blog_post_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #fff;
  border-radius:10px;
  box-shadow: 0 4px 21px 0 rgba(0,0,0,.07);
  overflow: hidden;
}

.blog_post_card.swiper-slide{
  opacity:1;
  height:auto;
}

.blog_post_card__image-wrapper {
  display: flex;
  width: 100%;
  position: relative;
  padding:16px 16px 0;
}
.blog_post_card__image-wrapper.no-padding {
  padding:0;
}
 
.blog_post_card__post-link{ /*-- add image?? */
  line-height: 0;
  overflow: hidden;
  display: block;
  width:100%;
  border-radius: 10px 10px 0 0;
  display: flex;
  height: 158px;
  position: relative;
}
.blog_post_card__post-link.no-image{
  background-color:#3b4157;
}
.blog_post_card__post-link.no-image:before{
  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  content: "\e902";
  font-family: icomoon !important;
  font-size: 4.8rem;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  left: 50%;
  line-height: 1;
  opacity: .4;
  position: absolute;
  text-transform: none;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}


.blog_post_card__image-wrapper__image{
  object-fit: cover;
  transition: transform 1s ease-in-out;
  aspect-ratio: var(--image-ratio-style-2);
  height: 250px;
}

.blog_post_card__post-link:hover .blog_post_card__image-wrapper__image{ 
  transform: scale(1.1);
}

.blog_post_card__image-wrapper__inner-wrapper{

}

.blog_post_card__body {
  padding:16px;
}

.blog_post_card__header{
  display: flex;
}

.text-left .blog_post_card__header {
  justify-content: flex-start;
}

.text-right .blog_post_card__header {
  justify-content: flex-end;
}

.text-center .blog_post_card__header {
  justify-content: center;
}

.blog_post_card__header__title {
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.5;
}

.blog_post_card__header__title a{
  font-weight:bold;
  text-decoration:none;
  color:var(--primary-1);
  font-family:'Gotham Bold'!important;
}

.blog_post_card__post-date-author {
  font-size: 14px;
  display: flex;
  flex-direction:column;
  margin-bottom:8px
}

.text-left .blog_post_card__post-date-author {
  justify-content: flex-start;
}

.text-right .blog_post_card__post-date-author {
  justify-content: flex-end;
}

.text-center .blog_post_card__post-date-author {
  justify-content: center;
}

.blog_post_card__post-date-author__author {

}

.blog_post_card__post-date-author__author__link {

}



.blog_post_card__post-date-author__post-date {
  font-size:0.722rem;
  color:var(--grey-900);
  padding-left:20px;
  }
.blog_post_card__post-date-author__post-date .icon{
  position:relative;
}
.blog_post_card__post-date-author__post-date .icon:before{
  speak:never;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:icomoon!important;
  font-style:normal;
  font-variant:normal;
  font-weight:400;
  line-height:1;
  text-transform:none;
  content:"\e900";
  font-size:1.1rem;
  position:absolute;
  top:50%;
  left:-20px;
  transform: translateY(-50%);
}


.blog_post_card__read-time {
  font-size: 12px;
}

.blog_post_card__description {
  display: flex;
}

.text-left .blog_post_card__description {
  justify-content: flex-start;
}

.text-right .blog_post_card__description {
  justify-content: flex-end;
}

.text-center .blog_post_card__description {
  justify-content: center;
}

.blog_post_card__description__body { 
  font-size:.778rem;
}

/* TAGS  */

.blog-tags { /* wrapper */
 display: block;
 margin-bottom:32px;
}

.blog-tags__list{
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}

.text-left .blog-tags__list{
  justify-content: flex-start;
}

.text-right .blog-tags__list{
  justify-content: flex-end;
}

.text-center .blog-tags__list{
  justify-content: center;
}

.blog-tags__list__item{
 display: block;
}

.blog-tags__list__item__link{
  color: var(--grey-000);
  padding: 7px 10px;
  background-color: var(--primary-1);
  border-radius: 5px;
  font-size: 0.7rem;
  text-decoration: none;
  display:inline-block;
}

.blog-tags__list__item__link:hover{
 /* background-color: var(--primary-1);
  color: var(--secondary-3);*/
  text-decoration: underline;
}

.blog-tags__list__item__link--active{
  color: var(--grey-000);
  background-color: var(--primary-2);
  pointer-events: none;

}

.blog-tags--card.blog-tags{
  margin-top:auto;
  margin-bottom:0;
}

.blog-tags--card .blog-tags__list {
  padding: 0 16px 16px;
  gap: 6px 8px;
}

.blog-tags--card .blog-tags__list__item__link{
  font-size: 0.55rem;
  padding: 4px 8px;
}

/* PAGENATION */

.page-load-button,
.blog-pagination {
  display: flex;
  justify-content: center;
  gap:16px;
}

.blog-pagination__view-more {
  margin: auto;
}

.blog-pagination-center{
  display:flex;
  gap:14px;
}

.blog-pagination-left,
.blog-pagination-right{
  display:flex;
  gap:16px;
}

.blog-pagination-left{

}

.blog-pagination-right{

}

.blog-pagination__link {
  align-items: center;
  border: 1px solid var(--primary-1);
  border-radius: 40px;
  color: var(--primary-1);
  display: flex;
  height: 40px;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  width: 40px;
}

.blog-pagination__link.ellipses{
  border-color: transparent;
  letter-spacing:4px;
}

.blog-pagination__link--active{
  background-color: var(--primary-1);
  color: #fff;
  pointer-events: none;
}

.blog-pagination__link:hover,
.blog-pagination__link:focus {
  text-decoration: none;
}

/*
.blog-pagination__link--prev {
  margin-right: 14px;
}
.blog-pagination__link--next {
  margin-left: 14px;
}
*/

.blog-pagination__link.blog-pagination__link--prev,
.blog-pagination__link.blog-pagination__link--next {
  background-color: transparent;
  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: icomoon !important;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
}
.blog-pagination__link.blog-pagination__link--prev span,
.blog-pagination__link.blog-pagination__link--next span{
  display:none;
}
.blog-pagination__link.blog-pagination__link--prev:after{
  content: "\e905"
}

.blog-pagination__link.blog-pagination__link--next:after {
  content: "\e906";
}

.blog-pagination__link.blog-pagination__link--disabled {
  color: var(--grey-300);
  cursor: default;
  pointer-events: none;
}
/*
.blog-pagination__number-link:hover,
.blog-pagination__number-link:focus {
  color: var(--grey-000);
  background-color: var(--grey-600);
  text-decoration: underline;
}
*/
@media (max-width: 767px) {

.page-load-button, .blog-pagination{
  align-items:center;
  flex-direction: column;
}
  /*
  .blog-pagination__number-link {
    display: none;
  }
  */
}
/* LIST */

.blog-search__form label{
  color:inherit
}

/* LAYOUT  */

/****************Grid Layout **************/
.blog_cards_wrapper{

}


.blog_cards_wrapper__inner_wrapper {
 /* display: flex; 
 */
 display: grid;
  flex-wrap: wrap;
  justify-content: center;
  gap:32px
}

@media screen and (min-width: 1280px) {

  .blog_cards--grid-col-2 {
    grid-template-columns: 1fr 1fr;
  }

  .blog_cards--grid-col-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .blog_cards--grid-col-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 1279px) {

  .blog_cards--grid-col-2 {
    grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
  }

  .blog_cards--grid-col-3 {
    grid-template-columns: repeat(auto-fill, minmax(30.5%, 1fr));
  }

  .blog_cards--grid-col-4 {
    grid-template-columns: repeat(auto-fill, minmax(22%, 1fr));
  }

}
@media screen and (max-width: 560px) {

  .blog_cards--grid-col-2,
  .blog_cards--grid-col-3,
  .blog_cards--grid-col-4 {
    grid-template-columns: 1fr;
  }
  .text-left .blog-tags__list{
    gap:8px;
  }

}