/**************************************************
Stylesheet: Defaults Variables for Hammerhead Trenchless
**************************************************/
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;1,600;1,700&family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
@font-face {
  font-family: 'nexa_rust_sansblack';
  src: url("/wp-content/themes/element/assets/fonts/nexarustsans-black-webfont.eot");
  src: url("/wp-content/themes/element/assets/fonts/nexarustsans-black-webfont.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/element/assets/fonts/nexarustsans-black-webfont.woff") format("woff"), url("/wp-content/themes/element/assets/fonts/nexarustsans-black-webfont.ttf") format("truetype"), url("/wp-content/themes/element/assets/fonts/nexarustsans-black-webfont.svg#nexa_rust_sansblack") format("svg");
  font-weight: normal;
  font-style: normal; }

/**************************************************
Stylesheet: Mixins Stylesheet
**************************************************/
/*******************
    FONT MIXINS (family, size, color, weight, line-height)
    ********************/
/*********************
	Column split into X columns
	@include column-count(3);
	*********************/
/*********************
	Column split with px gap
	@include column-gap(40px);
	*********************/
/*********************
	Column split style
	@include column-rule-style(solid);
	*********************/
/*********************
	Column split border
	@include column-rule(1px solid #ededed);
	*********************/
/*********************
	Background gradient 2 color
	@include background-gradient($gray, #000);
	*********************/
/*********************
	Background gradient 3 color
	@include accordion-gradient($gray, #000, #666);
	*********************/
/*********************
	Transform duration by X seconds
	@include transition(1.5s);
	*********************/
/*********************
	Transform Rotate element by x degrees
	@include rotate(180);
	*********************/
/*********************
	Creates a 6px arrow with pure css
	@include arrow(#000);
	*********************/
/*********************
	Clip 10px corner off the bottom right corner
	@include cornerclip(#000);
	*********************/
/*********************
	Clip 3px corner off the bottom right corner
	@include cornerclipsmall(#000);
	*********************/
/*********************
	Clip 10px corner off the top right corner
	@include cornercliptop(#000);
	*********************/
/*********************
	Clip 10px corner off the top left corner
	@include cornercliptopleft(#000);
	*********************/
#wrapper-main {
  background-color: #ffffff; }

.single-blog .wrapper {
  flex-direction: column;
  padding-top: 30px; }

.post-header {
  max-width: 100%;
  width: 100%;
  position: relative; }
  .post-header .inner-top {
    margin-bottom: 30px; }
    .post-header .inner-top a {
      font-family: "Roboto Condensed", sans-serif, sans-serif;
      font-size: 18px;
      color: #000000;
      font-weight: 500;
      line-height: 26px;
      letter-spacing: 0.36px;
      text-decoration: none; }
      .post-header .inner-top a:hover {
        text-decoration: underline; }
      .post-header .inner-top a:before {
        content: "";
        display: inline-block;
        width: 30px;
        height: 11px;
        background-image: url("/wp-content/themes/element/assets/images/arrow-left.svg");
        background-repeat: no-repeat;
        background-size: 8px;
        background-position: left center; }
    @media (min-width: 800px) {
      .post-header .inner-top {
        margin-bottom: 0;
        position: absolute;
        top: 38px; } }
  .post-header .inner-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start; }
    .post-header .inner-bottom .post-meta {
      font-family: "Roboto Condensed", sans-serif, sans-serif;
      font-size: 20px;
      color: #D71920;
      font-weight: 700;
      line-height: 26px;
      text-transform: uppercase; }
      @media (min-width: 700px) {
        .post-header .inner-bottom .post-meta {
          font-family: "Roboto Condensed", sans-serif, sans-serif;
          font-size: 24px;
          color: #D71920;
          font-weight: 700;
          line-height: 30px; } }
      .post-header .inner-bottom .post-meta .post-cat {
        padding-right: 10px; }
      .post-header .inner-bottom .post-meta .post-date {
        padding-left: 10px; }
    .post-header .inner-bottom .half-left {
      max-width: 100%;
      background-color: rgba(234, 234, 234, 0.9);
      z-index: 3;
      box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 6px 6px 0px rgba(0, 0, 0, 0.13), 0px 13px 8px 0px rgba(0, 0, 0, 0.07), 0px 24px 10px 0px rgba(0, 0, 0, 0.02), 0px 37px 10px 0px rgba(0, 0, 0, 0);
      padding: 30px;
      margin-bottom: 30px; }
      .post-header .inner-bottom .half-left h1 {
        line-height: 40px;
        letter-spacing: 0.8px;
        text-transform: capitalize;
        margin-top: 20px;
        margin-bottom: 0; }
    .post-header .inner-bottom .half-right {
      max-width: 100%;
      width: 100%; }
      .post-header .inner-bottom .half-right img {
        max-width: 100%;
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center; }
    @media (min-width: 500px) {
      .post-header .inner-bottom .half-left {
        padding: 50px; } }
    @media (min-width: 800px) {
      .post-header .inner-bottom {
        flex-wrap: nowrap; }
        .post-header .inner-bottom .half-left {
          margin-top: 84px;
          max-width: 50%;
          margin-right: -100px;
          margin-bottom: 0px; }
        .post-header .inner-bottom .half-right {
          max-width: 60%; } }
    @media (min-width: 1260px) {
      .post-header .inner-bottom .half-left {
        max-width: 600px;
        padding: 100px; }
      .post-header .inner-bottom .half-right {
        max-width: 700px; } }
.post-content {
  max-width: 800px;
  width: 100%;
  margin: 30px auto; }
  .post-content .inner *:first-child {
    margin-top: 0; }
  .post-content .inner *:last-child {
    margin-bottom: 0; }
  .post-content a:link, .post-content a:visited {
    color: #000000; }
  .post-content a:hover, .post-content a:focus {
    color: #D71920; }
  .post-content blockquote {
    position: relative;
    max-width: 670px;
    width: 100%;
    margin: 20px auto; }
    .post-content blockquote:before {
      content: "";
      width: 10px;
      height: 100%;
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 2;
      background: linear-gradient(0deg, #670609 0%, #D7191F 52.08%, #670609 100%); }
    .post-content blockquote p {
      font-size: 24px;
      line-height: 28px;
      font-style: normal;
      font-weight: 600;
      margin: 0;
      padding-left: 30px; }
      @media (min-width: 650px) {
        .post-content blockquote p {
          font-size: 30px;
          line-height: 34px; } }
  @media (min-width: 800px) {
    .post-content {
      margin: 60px auto 70px; } }