/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

html, body {
  scroll-behavior: smooth;
}

div.header-container-wrapper {
  background-color: transparent;
}

/*=========================== Typography ================================*/

h1, h2, h3, h4, h5, h6 {
  color: white;
  font-family: 'Open Sans',serif;
  font-weight: 300;
  margin: 0 0 1.4rem;
  word-break: break-word;
}

h1{
  font-size: clamp(60px, 5vw, 80px);
  font-weight: 300 !important;
}
h1 a {
  color: #fff;
}
h2 {
  font-size: clamp(38px, 3vw, 42px);
  font-weight: 700;
  margin-top: .5em;
}

h3{
  font-size: clamp(32px, 2.5vw, 40px);
  font-weight: 100;
  font-weight: normal;
}
}
h3 a {
  color: #fff;
}

h4 {
  font-size: clamp(22px, 1.875vw, 30px);
  font-weight: 100;
}

h5:after {
  content: url(https://www.nativehope.org/hubfs/red-line.svg);
  position: relative;
  top: -4px;
  left: 18px;
}

h6{
  font-size: clamp(22px, 1.875vw, 30px); 
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 100;
}


.blog-2022 a:hover, .blog-2022 a:focus, .blog-2022 a:active {
  color: #c41b22;
}


/*====================== Blog Listing Page Styles =====================*/
.container-fluid .row-fluid .page-center.lg{
  max-width: 1920px;
}

.section.blog-sub {
  background-color: #000;
}

.blog-2022 .cm-fullheight-banner {
  min-height: 50vh !important;
}

.hs-search-field .hs-search-field__input {
  background-color: #000;
  border: none;
  color: #fff;
  border-top: solid 1px #212121;
  border-bottom: solid 1px #212121;
  padding-left: 50px;
  margin-left: -40px;
}

.hs-search-field .hs-search-field__input:focus {
  color: #fff;
}

.highlight-bg span, span.highlight-bg, a.highlight-bg {
  background: rgb(105,15,18);
  background: linear-gradient(0deg, rgba(105,15,18,1) 0%, rgba(105,15,18,1) 30%, rgba(36,50,96,0) 30%, rgba(3,66,132,0) 100%);
  background-color: transparent !important;
}

/*=========== Button Styles ==============*/
[class*="btn-more"] {
  padding: 12px 60px;
}
[class*="btn-more"].red {
  background-color: #b3191f;
  color: #fff;
}
[class*="btn-more"].red:hover {
  background-color: #c41b22;
  color: #fff;
}

[class*="btn"].underline-red {
  padding: 12px 0px 2px !important;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
}

[class*="btn"].underline-red:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color:#c41b22;
}


/*=========================== Popular Post Styles ===================*/

.blog-2022 .popular-posts.new .block {
  background-color: #212121;
  margin-top: 50px;
  padding: 20px 30px;
}
.blog-2022 .popular-posts.new h3 {
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3125rem, 1.0781rem + 0.75vw, 1.5rem);
}
.blog-2022 .popular-posts.new li.hs-postlisting-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: solid 1px #858585;
}
.blog-2022 .popular-posts.new li.hs-postlisting-item img {
  border-radius: 50%;
  width: 125px;
  height: 100px;
  overflow: hidden;
}
.blog-2022 .popular-posts.new li.hs-postlisting-item a {
  color: #fff;
  font-size: clamp(1rem, 1rem + 0vw, 1rem);
  text-align: left;
  padding-left: 15px;
  position: relative;
  text-decoration: underline;
  text-decoration-color: #b3191f;
} 

.blog-2022 .popular-posts.new li.hs-postlisting-item a:hover {
  color: #c41b22;
}

/*============================== Blog Post Listings ========================*/
body.blog-astonish.blog-2022 .post-listing .post-item {
  background-color: #212121;
}

body.blog-astonish.blog-2022 .post-listing .post-item:hover {
  background-color: #000;
}

body.blog-astonish.blog-2022 .post-listing .post-item:hover a {
  color: #c41b22;
}


body.blog-astonish.blog-2022 .post-listing .post-item .hs-featured-image-wrapper {
  position: relative;
}

body.blog-astonish.blog-2022 .post-listing .post-item .hs-featured-image-wrapper .category-tl {
  position: absolute;
  top: 0;
  right: 10px;
  background-color: #000;
  padding: 0px 8px 4px;
  margin-top: 10px;
}

body.blog-astonish.blog-2022 .post-listing .post-item .hs-featured-image-wrapper .category-tl a{
  color: #fff;
  font-weight: bold;
  font-size: 13px;
}

body.blog-astonish.blog-2022 .post-listing .post-item h3.post-title{
  font-size: clamp(1.375rem, 2.2344rem + -2.75vw, 0.6875rem);
}

body.blog-astonish.blog-2022 .post-listing .post-item .content-post-wrapper{
  padding: 10px;
}

body.blog-astonish.blog-2022 .post-listing .post-item .post-data {
  display: flex;
  align-items: center;
  gap: 5px;
}
body.blog-astonish.blog-2022 .post-listing .post-item .post-data a {
  color: #fff;
}

body.blog-astonish.blog-2022 .post-listing .post-item .post-data a:hover {
  color: #c41b22;
}


/*================================== Blog Email Subscription Section ==============================*/
.blog-email-sub-wrapper p {
  color: #fff;
}
.blog-email-sub-wrapper input[type="email"], .blog-email-sub-wrapper input[type="email"]::placeholder {
  color: #000;
}

.blog-email-sub-wrapper form div.actions{
  display: flex;
  justify-content: center;
}

.blog-email-sub-wrapper form input[type="submit"] {
  background-color: #b3191f;
  border: none;
  color: #fff;
}
.blog-email-sub-wrapper form input[type="submit"]:hover {
  border: none;
}


/*======================== Blog Post Styles ============================*/

.cm-fullheight-banner.cm-fullheight-banner-center-center .cm-fullheight-banner-content {
  width: 100%;
}

.blog-section .content-share-header {
  display: flex;
  padding-bottom: 20px;
  gap: 5px;
}
.blog-section .content-share-header * {
  color: #acacac;
  font-weight: bold;
  text-transform: uppercase;
}

.blog-section .content-share-header a:hover {
  color: #c41b22;
}
.blog-section .content-share-header .divider {
  color: #c41b22;
}

.blog-section .hs-blog-social-share {
  margin-top: 50px;
}

.blog-section .post-body h2,
.blog-section .post-body h3, 
.blog-section .post-body h4,
.blog-section .post-body h5 {
  color: #000;
  margin: 1em 0 0.5em;
}

.blog-section .post-body h2 {
  color: #DE2027;
  text-transform: uppercase;
/*   font-size: 22px !important; */
  letter-spacing: 0.5px;
}

.blog-section .post-body ul li {
  margin-bottom: 15px;
}
/* .blog-section .post-body .cta_button.btn {
border-radius: 3px !important;
} */

.blog-section .post-body .hs-embed-wrapper{
  margin: 30px 0 !important;
}
.blog-section .post-body img {
  padding: 10px 15px !important;
}

a.btn.br-sm {
  border-radius: 3px !important;
  background-color: #B3191F !important;
}
a.btn.br-sm:hover {
  background-color: #de2027 !important;
}

#post-share {
  scroll-margin-top: 100px;
}

/*============================ Prev and Next Wrapper ======================================*/

.base-wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.base-wrapper .prev-next-posts-outer {
  background-color: #212121;
  display: flex;
  justify-content: center;
  width: 100%;
}
.base-wrapper .prev-next-posts-outer .prev-next-posts {
  max-width: 900px;
  border-bottom: none;
  padding: 50px;
}
.base-wrapper .prev-next-posts-outer .prev-next-posts .prev-next-post-title{
  font-size: 20px;
  max-width: 278px;
}

.base-wrapper .prev-next-posts-outer .prev-next-posts .previous:before {
  font-size: 75px;
  left: -35px;
  align-items: flex-end;
}

.base-wrapper .prev-next-posts-outer .prev-next-posts .previous:after {
  content: 'PREV';
  display: flex;
  position: absolute;
  left: -35px;
  bottom: 0;
  border-bottom: solid 1px #690f12;
}

.base-wrapper .prev-next-posts-outer .prev-next-posts .next:after {
  font-size: 75px;
  right: -35px;
  align-items: flex-end;
}

.base-wrapper .prev-next-posts-outer .prev-next-posts .next:before {
  content: 'NEXT';
  display: flex;
  position: absolute;
  right: -35px;
  bottom: 0;
  border-bottom: solid 1px #690f12;
}
.base-wrapper .prev-next-posts-outer .prev-next-posts .next h4:hover,
.base-wrapper .prev-next-posts-outer .prev-next-posts .previous h4:hover {
  color: #C41B22;
}


.base-wrapper .prev-next-posts * {
  color: #fff;
  font-weight: 600;
}
.base-wrapper .prev-next-posts strong {
  font-weight: 900;
}

/*============================ Recommended Wrapper ======================================*/

.recommended-wrapper {
  background-color: #000000;
  color: #fff;
  padding: 25px 20px 50px;
  width: 100%;
}

.recommended-wrapper .header *{
  text-align: center;
  font-weight: 400;
  margin-bottom: 25px;
}


.recommended-wrapper .related-posts-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

.recommended-wrapper .related-posts-wrapper .related-post-item{
  margin-bottom: 20px;
}

.recommended-wrapper .related-posts-wrapper .related-image {
  position: relative;
  max-height: unset;
}

.recommended-wrapper .related-posts-wrapper .related-image .category-tl {
  position: absolute;
  top: 0;
  right: 10px;
  background-color: #000;
  padding: 4px 8px;
}

.recommended-wrapper  .related-posts-wrapper .related-title {
  background-color: #212121;
  min-height: 100px;
  padding: 20px;
}

.recommended-wrapper .related-posts-wrapper .related-title a {
  color: #fff;
}

.recommended-wrapper .related-posts-wrapper .related-post-item:hover .related-title a {
  color: #C41B22;
}

/*=================== Comments Page ========================*/

.comments-wrapper h4 {
  color: #000;
}
body.blog-astonish #comments-listing .comment.depth-0:first-child {
  border-top: none !important;
}
body.blog-astonish #comments-listing .comment.depth-0 {
  border-top: 1px solid #000 !important;
  padding-top: 20px;
}

.comments-wrapper input.hs-input,
.comments-wrapper textarea.hs-input{
  background-color: #fff;
  border-color: #a3a3a3;
}

.comments-wrapper input.hs-input::placeholder,
.comments-wrapper textarea.hs-input::placeholder{
  color: #a3a3a3;
}

.comments-wrapper .widget-type-blog_comments form .hs_submit >.actions > input[type="submit"] {
  border-radius: 4px;
  background-color: #a2171c;
  color: #fff;
  position: relative;
  min-width: 250px;
}

.comments-wrapper .widget-type-blog_comments form .hs_submit >.actions > input[type="submit"]:hover {
  background-color: #DE2027;
}