/* Blog post */
a{text-decoration:none;}
.blog-post {
  margin: 0 auto;
  max-width: 960px;
}

.blog-post__meta {
  margin-bottom: 1.4rem;
}

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

.blog-post__timestamp {
  display: block;
}

.blog-post__tags svg {
  height: auto;
  margin-right: 0.35rem;
  width: 15px;
}

.blog-post__tag-link {
  font-size: 0.875rem;
}

/* Blog related posts */

.blog-related-posts {
  background-color: #F8FAFC;
}

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

.blog-related-posts__list {
  display: flex;
  flex-wrap: wrap;
}

.blog-related-posts__post {
  flex: 0 0 100%;
  padding: 1rem;
}


.hs-blog-post{ background: #F1F1F1;}

/* .small-header .section.post-header,.mobile-open .section.post-header {z-index: 1;}

.section.post-header {z-index: 99999;} */
.hs-blog-post .wrapper-header{box-shadow:none;}
.hs-blog-post.small-header  .wrapper-header{box-shadow:0 0 15px #d0d0d0;}

.section.post-header { display: flex; align-items: center; padding: 35px 0; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 465px; position: relative; }
/* .section.post-header:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: -1; } */
.post-header h1 { max-width: 700px; color: #fff;}

a.topic-link { font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 500; }

.hubspot-editable,a.author-link { color: #fff; font-size: 16px; font-weight: 600; }
p#hubspot-topic_data { margin: 0;}

.section.post-body { background: #fff;}
.inner-post-body { padding: 60px 20px; max-width: 630px; margin: 0 auto; text-align: left; position:relative;}
.inner-post-body:before { position: absolute; content: ""; background: #59595B; width: 90px; height: 2px; bottom: 50px; left: 0; right: 0; margin: 0 auto; }

.share-buttons ul li { margin-right: 20px; color: #45b7ae; font-size: 18px; font-weight: 300; display: inline-block;}
.share-buttons ul li:last-child { margin-right: 0px; }

.top-back { border-bottom: 4px solid; padding: 23px 20px; background: #fff; }
.inner-back { display: flex; flex-wrap: wrap; align-items: center; max-width: 930px; margin: 0 auto; }

.back-btn { width: 50%;}
.back-btn span { color: #45b7ae; font-size: 18px; font-weight: 300; }
.back-btn span:hover { color: #000;}
.back-btn i.fa.fa-angle-left { font-size: 20px; padding-right: 10px;}
ul.vertical {
    padding: 0;
      margin: 0;
}
.social-connection { text-align: right; width: 50%;}
.social-connection .fa { font-size: 16px; border-radius: 5px; background: #CACACA; color: #fff; padding: 4px 2px; width: 25px; height: 25px; text-align: center;}
.social-connection .fa:hover{ background:#45b7ae;}

.post-body { font-size: 16px;Font-style: normal; line-height:1.5; font-weight: 400;color:#59595B;padding:0;}
.post-body strong{font-size: 16px;Font-style: normal;font-weight: 700;color:#59595B; padding:0;margin:0 auto;}
.post-body p { line-height:1.5; font-size: 16px;Font-style: normal;font-weight: 400 padding:0;margin:0 auto 30px;}
.post-body p span{font-size: 16px;Font-style: normal;font-weight: 400; padding:0;margin:0 auto;}
.post-body p strong{font-size: 16px;Font-style: normal;font-weight: 700; padding:0;margin:0 auto;}
.post-body h1{margin: 85px auto 60px; line-height:1.5;}
.post-body h2{ font-size: 26px; Font-style: normal; font-weight: 300; color:#38637E; padding:0 ; margin:0 auto 30px; line-height:1.5; }
.post-body h3{ font-size: 24px; Font-style: normal; font-weight: 300; padding:0 0 35px; margin:0 auto 50px; line-height:1.5; position: relative;}
.post-body h4{ font-size: 22px; Font-style: normal; font-weight: 400; color:#59595B; padding:0; margin:0 auto 30px; line-height:1.5;}
.post-body h5{ font-size: 22px; Font-style: normal; font-weight: 300; color:#000000; padding:0; margin:0 auto; line-height:1.5;}
.post-body h6{font-size: 20px;Font-style: normal;font-weight: 300;color:#000000; padding:0;margin:0 auto;}
.post-body ul li{ list-style: inside;font-size: 16px;Font-style: normal;font-weight: 400;color:#59595B; padding:0;margin:0 auto;}
.post-body ol li{ list-style: inherit; font-size: 16px;Font-style: normal;font-weight: 400;color:#59595B; padding:0;margin:0 auto;}
.post-body ul li span{font-size: 16px;Font-style: normal;font-weight: 400;color:#59595B; padding:0;margin:0 auto;}
.post-body ol li span{font-size: 16px;Font-style: normal;font-weight: 400;color:#59595B; padding:0;margin:0 auto;}
.post-body a{ font-size: 16px;Font-style: normal;font-weight: 400;color:#38637E; padding:0;margin:0 auto;}
.post-body a:hover{ color:#59595B;}
.post-body ul li{ padding:0;margin:0 auto;}
.post-body ul,.post-body ol { padding:0;margin:0 auto 30px;}
.post-body .top-post h1 { line-height: 1.2; margin: 0 0 60px;}
.top-post p#hubspot-topic_data { margin-bottom: 30px;}
.post-body blockquote { color:#000; margin:60px 0 ;line-height:1.3; position:relative; padding-left: 0; font-size: 32px; font-weight: 300;}
.post-body blockquote span { font-size:13px; display: block; text-transform: uppercase; color: #45b7ae; font-weight: 400; margin-top: 20px;}
.post-body blockquote:before { content: ""; position: absolute; left: 0; top: -27px; width: 100px; height: 1px; background: #59595b; opacity: 0.5; }
.post-body blockquote:after { content: ""; position: absolute; left: 0; bottom: -27px; width: 100px; height: 1px; background: #59595b; opacity: 0.5; }
.post-body .vidyard-player-container { margin-bottom: 30px !important;}
.body-container--blog-post .post-body h3:before { width: 135px; height: 2px; background: #38637e; position: absolute; content: ""; bottom: 0; left: 0; right: 0; margin: 0 auto; }

.hs-responsive-embed-wrapper.hs-responsive-embed { max-width: 100% !important; min-width: 100% !important; margin: 0 auto 30px !important; }

input#myInput { position: absolute; z-index: -1; opacity: 0;}

.tooltip { position: relative; display: inline-block;margin-right: 20px;}
.tooltip button {
    border: 0;
    box-shadow: none;
    outline: 0;cursor: pointer;
    background: transparent;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color:#45b7ae;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size:13px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #45b7ae transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

@media(max-width:1024px){
.section.post-header {
    margin-top: -100px;
}
  .inner-post-body { padding: 40px 20px;}
  .post-body .top-post h1{ line-height: 1; margin:0 0 40px;}
  .top-post p#hubspot-topic_data { margin-bottom: 10px;}
  .post-body blockquote{ font-size:26px;}
  
}

@media(max-width:767px){

  .inner-post-body{ max-width:100%;}
  .post-body h3{ font-size: 20px;}
  .section.post-header{ text-align:center;}
  .post-body .top-post h1 span { font-size: 30px;}
  .post-body blockquote{font-size:24px;}
   .section.post-header{height:385px;}
}
  @media(min-width:481px) and (max-width:767px){
  .blog-section .blog-post-wrapper>.content-wrapper {
    padding: 0 80px;
  }
}
@media(max-width:640px){

  .back-btn { margin-bottom: 30px; width: 100%;}
  .social-connection { text-align: center; width: 100%;}
  .inner-back{ text-align:center;}
  .share-buttons ul li,.tooltip { margin-right: 10px;}
  .post-body blockquote{ font-size:20px;}
  
}

@media screen and (min-width: 768px) {
  .blog-related-posts__post {
    flex: 0 0 calc(100% / 2);
  }
}

@media screen and (min-width: 1000px) {
  .blog-related-posts__post {
    flex: 0 0 calc(100% / 3);
  }
}

.blog-related-posts__image {
  height: auto;
  max-width: 100%;
}

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

/* Blog comments */

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

.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;
}