\/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles for your blog. The styles included
are for the listing and post templates, featured images and pagination.
Also for the post meta infromation like tags, author and published date
*********************************************************************************
****************************************************************************** */

/* TODO: Find a better place for this */

.blog-header {
  background-color: ;
  text-align: center;
}

.blog-header__inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 3.3rem 20px;
}
.blog-header__title {
  font-size: 5rem;
  text-align:center;
}
.blog-header__subtitle {
  margin: 3rem 0 3rem;
  text-align:center;
}

.blog-header__form {
  margin: 0 1rem;
}

@media screen and (min-width: 768px) {
  .blog-header__form {
    width: 500px;
    margin: 0 auto;
  }
}

.blog-index {
  display: flex;
  flex-wrap: wrap;
  padding: 3.3rem 0;
}
.blog-index:after {
  content: "";
  flex: auto;
}
.blog-index__tag-header {
  flex: 1 0 100%;
  padding: 1rem;
}
.blog-index__tag-subtitle {
  font-size: 1.16rem;
  line-height: 1.1;
}
.blog-index__tag-heading {
  padding-bottom: 1rem;
  border-bottom: 3px solid #D1D6DC;
}
.blog-index__post {
  flex:  0 0 100%;
  padding: 3rem 1rem;
}
@media screen and (min-width: 768px) {
  .blog-index__post {
    flex:  0 0 calc(100%/2);
  }
}
@media screen and (min-width: 1000px) {

  .blog-index__post {
    flex:  0 0 calc(100%/3);
  }

  .three-col .blog-index__post {
    flex:  0 0 calc(100%/3);
  }

  .two-col .blog-index__post {
    flex:  0 0 calc(100%/2);
  }

  .full-width .blog-index__post {
    flex:  0 0 calc(100%/1);
  }
}
@media screen and (min-width: 768px) {
  .blog-index__post--large {
    flex: 1 0 100%;
    display: flex;
    justify-items: space-between;
  }
}

.blog-post img {
  max-width: 100%;
}
.blog-index__post-image {
  display: block;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding-bottom: 63%;
  background-image: url('');
    }
@media screen and (min-width: 768px) {
  .blog-index__post-image--large {
    flex: 1 1 100%;
    padding-bottom: 0;
  }
  .blog-index__post-content--large {
    flex: 1 1 100%;
    padding-left: 2rem;
  }
  .blog-index__post-image--large {
    flex: 1 1 48%;
  }
  .blog-index__post-content--large {
    flex: 1 1 48%;
    padding-left: 2rem;
  }
}
.blog-index__post-content h2 {
  margin: .5rem 0;
}
.blog-index__post-content--small h2 {
  font-size: ;
}
.blog-index__post-content p {
  font-family: ;
}
.blog-index__post-content a {
  color: ;
}
.blog-index__post img {
  max-width: 100%;
  height: auto;
}

.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: ;
  margin-bottom: 3.3rem;
  flex-wrap:wrap;
}
.blog-pagination__link {
  display: inline-flex;
  padding: 1rem 1.4rem;
  margin: 0 1rem;
  color: ;
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1;
  border-radius: 7px;
}
.blog-pagination__link--active {
  border: 2px solid #B0C1D4;
}
.blog-pagination__link:hover,
.blog-pagination__link:focus {
  text-decoration: none;
}
.blog-pagination__prev-link,
.blog-pagination__next-link {
  display: inline-flex;
  align-items: center;
}
.blog-pagination__prev-link {
  text-align: right;
  margin-right: 1rem;
}
.blog-pagination__next-link {
  text-align: left;
  margin-left: 1rem;
}
.blog-pagination__prev-link--disabled,
.blog-pagination__next-link--disabled {
  color: #B0C1D4;
  pointer-events: none;
  cursor: default;
}
.blog-pagination__prev-link svg,
.blog-pagination__next-link svg {
  fill: ;
  margin: 0 5px;
}
.blog-pagination__prev-link--disabled svg,
.blog-pagination__next-link--disabled svg {
  fill: #B0C1D4;
}
.blog-pagination__number-link:hover,
.blog-pagination__number-link:focus {
  border: 2px solid #B0C1D4;
}

.blog-header__author-avatar {
  height: 200px;
  width: 200px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  box-shadow: 0 0 12px 0 rgba(0,0,0,0.15);
  margin: 0 auto 1.5rem;
}
.blog-header__author-social-links a {
  display: inline-block;
  position: relative;
  background-color: #000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: 0 5px;
}
.blog-header__author-social-links a:hover {
  background-color: ;
}
.blog-header__author-social-links svg {
  fill: #fff;
  height: 15px;
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blog-post {
  max-width: 960px;
  margin: 0 auto;
  padding: 3.3rem 0;
}

.blog-post h1 {
  font-size: 5rem;
}
.blog-post__meta {
  margin: 2rem 0;
}
.blog-post__meta a {
  color: ;
  text-decoration: underline;
}

.blog-post__tags {
  font-family: ;
  color: #000;
  padding:20px 0;
}
.blog-post__tags svg {
  width: 15px;
  height: auto;
  margin-right: 10px;
}
.blog-post__tag-link {
  font-size: 2rem;
  color: #000;
}

.blog-recent-posts {
  margin-top: 3rem;
  background-color: ;
  padding: 2rem 0;
}
.blog-recent-posts h2 {
  text-align: center;
}
.blog-recent-posts__list {
  display: flex;
}
.blog-recent-posts__post {
  display: block;
  flex:  0 0 100%;
  color: ;
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  .blog-recent-posts__post {
    flex:  0 0 calc(100%/2);
  }
}
@media screen and (min-width: 1000px) {
  .blog-recent-posts__post {
    flex:  0 0 calc(100%/3);
  }
}
.blog-recent-posts__post:hover {
  text-decoration: none;
}
.blog-recent-posts__image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding-bottom: 63%;
}
.blog-recent-posts__title {
  margin: 1rem 0 .5rem;
}

.blog-comments {
  max-width: 680px;
  margin: 0 auto;
}
.blog-comments form {
  max-width: 100%;
}

.blog-comments .comment-reply-to {
  border: 0 none;
  color:#010101;

}
.blog-comments .comment-reply-to:hover {
  background-color: transparent;
  text-decoration: underline;
  color: #010101;
}

/*             Blog Listing with Sidebar            */

.post-item .page-center{
  display: -webkit-flex; /* Safari */
  display: flex; /* Standard syntax */
  margin-bottom: 20px;
}
.post-item .page-center .span4, .post-item .page-center .span8 {
  -webkit-flex: 1; /* Safari */
  -ms-flex: 1; /* IE 10 */
  flex: 1; /* Standard syntax */
}
.post-item .page-center .span8 {
  flex-basis: 31.914893614%;

}
img.featured-image {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
}


/*             Blog Grid Listing            */

.blog-index__post.blog-index__post--small {
  display: flex;
}

.blog-index__post.blog-index__post--small.no-image {
  height:100%;
}

.blog-index__post-inner-card {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  border-radius: 5px;
  background: #fff;
}

.blog-index__post-image {
  border-radius: 5px 5px 0 0;
}

.blog-index__post-inner-card .blog-index__post-content {
  display: flex;
  flex-direction: column;
  padding: 24px 30px 30px 30px;
  height: 100%;
}

.blog-post__tag-link,
.blog-post__tags {
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  letter-spacing: .5rem;
}

.blog-post__tag-link:hover{
  text-decoration: none;
}

.blog-index__post-content--small h2 {
  font-size: 3.1rem;
}

.blog-index__post-content--small h2 a:hover {
  text-decoration: none;
  transition: all .5s;
}

.blog-post__meta-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  padding-top: 30px;
  font-size: 2rem;
  margin:0 -5px;
}

.blog-post__meta-section>* {
  padding:0 5px;
}


.blog-post__read-more a:hover {
  text-decoration: none;
}

.read-more__arrow {
  position: relative;
  padding-left: 10px;
}

.blog-post__read-more svg {
  width: 15px;
  height: auto;
}

.blog-post__read-more a svg {
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}

@media screen and (max-width: 767px) {
  .blog-index.sidebar {
    padding: 1rem 0;
    padding-bottom: 3.3rem;
  }

  .blog-sidebar .blog-sidebar-topic-filter h3:after,
  .blog-sidebar .blog-sidebar-post-listing h3:after {
    content: "+";
    padding-left: 6px;
  }

  .blog-sidebar .blog-sidebar-topic-filter .child-open>h3:after,
  .blog-sidebar .blog-sidebar-post-listing .child-open>h3:after {
    content: "-";
    padding-left: 7px;
  }



}

/*             Blog Grid Listing with Sidebar            */

.blog-index.sidebar {
  display:flex;
}

@media screen and (min-width: 1000px) {
  .blog-index.sidebar .blog-index__post {
    flex: 0 0 calc(100%/2);
  }
}

@media screen and (max-width: 999px) {
  .blog-index.sidebar .blog-index__post {
    flex: 0 0 calc(100%/1);
  }
}

.blog-sidebar {
  padding-top: 3.9rem;
}

.hs-blog-listing .dnd-section,
.hs-blog-post .dnd-section, {
  padding:0;
}

@media screen and (max-width: 767px) {
  .blog-sidebar {
    padding: 2rem 1rem;
    padding-bottom: 0;
  }

  .blog-sidebar .dnd-section{
    padding:0;
  }

  .blog-sidebar .dnd-section>.row-fluid{
    padding:0 15px;
  }
} 

.blog-sidebar h3 {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 600;
  line-height: 37px;
}

.blog-sidebar ul {
  padding: 20px;
  margin: 0 0 40px 0;
  list-style: none;
  border-radius: 5px;
  background: #fff;
  font-size:1.9rem;
}

.blog-sidebar ul li {
  padding: 10px 0;
  border-top: 1px solid #dfddd9;
  font-weight: 600;
}

.blog-sidebar ul li:first-child {
  border-top-color: transparent;
}

.blog-sidebar a {
  text-decoration: none;
  text-transform:capitalize;
}

.blog-sidebar a:hover {
  text-decoration: none;
}

.blog-sidebar .filter-link-count {
  display: none;
}

.blog-sidebar .filter-expand-link {
  position: relative;
  top: -15px;
  display: block;
  margin-bottom: 25px;
  text-transform: capitalize;
  text-align: center;
}

.blog-sidebar-post-listing ul li {
  padding-left: 25px;
  line-height: 24px;
  text-indent: -25px;
}

.blog-sidebar-post-listing li:before {
  position: relative;
  width: 22px;
  float: left;
  content: counter(list-item);
  font-size: 2.2rem;
  font-weight: 600;
}

.blog-sidebar-post-listing li a {
  position: relative;
}

.blog-pagination.span12 {
  display: flex;
  margin-left: 0;
}

/* Mobile Blog Sidebar */

@media(max-width: 767px) {
  .hs-blog-listing .content-wrapper > .row-fluid {
    display: flex;
    flex-direction: column;
  }

  .hs-blog-listing .span3 {
    order: 1;
  }

  .hs-blog-listing .span9 {
    order: 2;
  }

  .hs-blog-listing .blog-pagination {
    order: 3;
  }

  .blog-sidebar.mobile .blog-sidebar-topic-filter h3,
  .blog-sidebar.mobile .blog-sidebar-post-listing h3 {
    cursor: pointer;
  }
  .blog-sidebar.mobile .blog-sidebar-topic-filter h3:after,
  .blog-sidebar.mobile .blog-sidebar-post-listing h3:after {
    content: "+";
    padding-left: 6px;
  }

  .blog-sidebar.mobile .blog-sidebar-topic-filter.clicked h3:after,
  .blog-sidebar.mobile .blog-sidebar-post-listing.clicked h3:after {
    content: "-";
    padding-left: 7px;
  }
}

/* Blog Subscription Section */

.subscription-form {
  display: block;
  margin: 0 auto;
  padding: 60px 0;
  width: 40%;
  text-align: center;
}

@media (max-width: 767px) {
  .subscription-form {
    width: 85%;
  }
}

.subscription-form label {
  text-align: center;
}

/*             Blog Post Layout          */

.post-featured-image {
  margin-bottom: -110px;
  min-height: 400px;
  background-size: cover;
  border-radius: 5px;
  background-position: center center;
}

.blog-post {
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 84px 100px 80px 100px;
  background: #fff;
  border-radius: 5px;
}

.blog-post.no-image {
  margin-top: 50px;
}

.blog-post__title {

}

.blog-post__meta a {
  text-decoration: none;
}

.blog-post__links {
  display: block;
  padding: 26px 0;
}

.blog-post__links-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  flex-wrap:wrap;
  -ms-flex-wrap:wrap;
}

.hs-blog-social-share .hs-blog-social-share-list {
  margin:0;
}

.blog-post__back-to-blog {
  text-decoration: none;
}

.blog-post__back-to-blog svg {
  position: relative;
  top: -1px;
  margin-right: 10px;
  width: 20px;
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}

@media (max-width: 767px) {
  .blog-post {
    width: 100%;
    padding: 30px 20px;
  }
}

/* Blog Comments */

.blog-comments {
  max-width: 100%;
}

.comment.depth-0:first-child {
  margin-top: 2em;
}

.comment.depth-1 {
  padding-left: 2em;
  padding-top: 1em;
  margin-top: 1em;
}

.blog-comments form {
  margin-top: 2em;
  padding-top: 2em;
}

.comment-date {
  display:block !important;
}

#comments-listing .comment-reply-to {
  padding-left:40px;
  background-position:15px center;
}


/* Blog related posts */

.blog-related-posts {
  margin: 6rem 0;
  padding: 3rem 0;
}

.blog-related-posts .sec-title {
  text-align: center;
}

.blog-related-posts__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.blog-related-posts .blog-index__post-content h2 {
  text-align: left;
}

.blog-related-posts .blog-post__meta-section {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.blog-related-posts__image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
  max-width: 100%;
  padding-bottom: 63%;
}

.blog-related-posts__title {
  margin: 1rem 0 0.5rem;
}

.blog-related-posts__title a {
  color: #494a52;
}

.blog-sidebar .widget-module {
  display:none;
}

.hs-search-field--open .hs-search-field__suggestions {
  padding: 20px;
  margin: 0 0 40px;
}

.hs-search-field--open .hs-search-field__suggestions li#results-for {
  padding: 10px 0;
}

.hs-search-field--open .hs-search-field__suggestions li a{
  padding: 5px 15px;
}
.hs-blog-social-share .hs-blog-social-share-item-linkedin span {
  vertical-align: top !important;
}

.hs-blog-social-share {
  height:auto !important;
}

.content-wrapper .dnd-section>.row-fluid {
  max-width:100%;
  width:100%;
  padding:0;
}

.blog-post__read-more a {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  word-break:break-word;  
}

.blog-post__body {
  line-height:1.5;
  margin: 1.5rem 0 2rem;
}

.post-footer form input[type="text"],
.post-footer form input[type="password"], 
.post-footer form input[type="datetime"], 
.post-footer form input[type="datetime-local"], 
.post-footer form input[type="date"], 
.post-footer form input[type="month"], 
.post-footer form input[type="time"], 
.post-footer form input[type="week"], 
.post-footer form input[type="number"], 
.post-footer form input[type="email"], 
.post-footer form input[type="url"], 
.post-footer form input[type="search"], 
.post-footer form input[type="tel"], 
.post-footer form input[type="color"],
.post-footer form input[type="file"],
.post-footer form textarea,
.post-footer form  select,
.post-footer .hs-input {
  padding:5px 15px;
  height:auto;
}

.post-footer .hs-button,
.post-footer .hs-button.primary {
  font-size: 2.5rem;
  padding: 10px 15px;
  min-width: 200px;
}

@media (min-width:768px) {
  .blog-sidebar .widget-module {
    display:block !important;
    height:auto !important;
    overflow:visible !important;
  }

}

@media (max-width:991px) {
  .row-fluid .span9.sidebar,
  .row-fluid .span3.blog-sidebar {
    width:100% !important;
    float:none !important;
    margin:0 !important;
  } 
}

@media (max-width:767px) {

  .blog-sidebar h3 {
    cursor:pointer;
  }

  .post-item .page-center {
    flex-wrap:wrap;
  }

  .post-item .page-center .span8 {
    flex-basis: auto;
  }

  .post-featured-image {
    margin-bottom:20px;
  }

  .blog-post {
    width:100%;
  }

  .hs-blog-social-share .hs-blog-social-share-list {
    list-style: none;
    padding-left: 0;
    margin: 20px 0 20px;
  }

  .blog-post__sharing {
    width:100%;
  }

  .blog-sidebar ul {
    padding: 0;
    box-shadow: none !important;
  }

}

@media (max-width: 479px) {
  .hs-recaptcha {
    overflow:auto !important;
  }

  .hs-blog-social-share .hs-blog-social-share-item {
    float:none !important;
    margin:15px 0;
    width:100% !important;
  }

  .blog-index__post-inner-card .blog-index__post-content,
  .blog-index__post-inner-card .blog-index__post-content {
    padding:15px;
  }

  .blog-index__post-content--small h2 {
    font-size:3.6rem;
  }

  .blog-post h1 {
    font-size:4rem;
  }

  .blog-pagination__link {
    padding: .5rem .8rem;
    margin: 0 .5rem;
  }

}