/*------------------------------------*\
//  #HERO BLOCK
// \*------------------------------------*/

.c-hero {
  display: block;
  overflow: hidden;
  position: relative;

  .c-section-home-hero {
    height: calc(100% - 2rem);
  }
}

.c-hero__item {
  position: relative;

  &.tns-item {
    cursor: grab;
  }
}

.c-hero--centered {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;

  &.c-hero--gradient,
  &.c-hero--no-background-image {
    .c-hero__headline {
      margin-bottom: 0;
    }
  }

  h2 {
    margin-bottom: 0;
  }
}

.c-hero__img {
  display: block;
  max-width: none;
  overflow: hidden;
  width: auto;
}

@supports (object-fit: cover) {
  .c-hero__img {
    max-width: 100%;
    object-fit: cover;
    /* width: 100%; */
  }
}

.c-hero__body {
  bottom: 1rem;
  left: 1rem;
  max-width: 60%;
  padding: 8vh 0 8vh 8vw;
  position: absolute;
  right: 1rem;
  top: 1rem;

  @media all and (min-width: 35em) {
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 0;
    margin-left: 12vw;
    max-width: 650px;
    padding: 0;
    position: absolute;
    top: 14vw;
    width: 50vw;
  }

  @media all and (min-width: 90em) {
    margin-left: 170px;
    top: 190px;
  }
	@media all and (max-width: 60rem) {
		width: auto;
        max-width: 100%;
	}

  .c-btn {
    align-self: flex-start;
  }
}

.align-right {
  .c-hero__body {
    margin-right: 12vw;
    max-width: 100%;
    width: 50vw;
    left: auto;
    right: 0;
  }
}

/**
 * Gradiant Overlay
 */

.c-hero--gradient-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

  &.background_gradient_mobile {
    @media only screen and (max-width: 780px) {
      display: none;
    }

  }
}

.c-hero--dark {
  .gradiant-overlay-mobile {
    @media only screen and (max-width: 780px) {
      background: rgb(0, 0, 0) !important;
      opacity: .3;
    }

  }
}

/* light */
.c-hero--light {
  /* .gradiant-overlay-desktop {

     &.standard {
       @media only screen and (min-width: 780px) {
         background: rgb(244, 244, 244);
         background: linear-gradient(90deg, rgba(244, 244, 244, 1) 0%, rgba(244, 244, 244, 0) 60%);
       }
     }

     &.strong {
       @media only screen and (min-width: 780px) {
         background: rgb(244, 244, 244);
         background: linear-gradient(90deg, #F4F4F4 35%, rgba(244, 244, 244, 0.8) 55%, rgba(244, 244, 244, 0) 70%);
       }
     }
   }*/

  .gradiant-overlay-mobile {

    @media only screen and (max-width: 780px) {
      background: rgb(244, 244, 244) !important;
      opacity: .3;
    }

  }
}


/**
  * Hero Headline
  */
.c-hero__headline {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0;
  text-shadow: 0 1px 4px rgba(var(--color-neutral-black), 0.4);
  transition: all var(--anim-fade-quick) var(--anim-ease);

  @media all and (min-width: 47em) {
    font-size: 44px;
  }

  @media all and (min-width: 1441px) {
    /* font-size: 60px;*/
  }

  i {
    font-style: normal;
    white-space: nowrap;
  }
}

.c-hero__headline+* {
  margin-top: 1rem;
}

.c-hero__text {
  color: white;
  font-size: 18px;
}

/* .c-hero__description {
   margin-top: 1rem;
 } */
#oldHero {
  &.c-hero--no-background-image {
    .c-hero__description {
      max-width: 580px;
    }

    .c-hero__content-wrapper {
      justify-content: center;
    }
  }
}

.c-hero--home {
  background-color: var(--color-neutral-gray-53);

  .c-hero__item {
    height: 464px;
    overflow: hidden;

    @media all and (min-width: 35em) {
      max-height: 630px;
      height: 73vh;
    }

    @media all and (min-width: 1441px) {
      /* height: 850px;*/
    }
  }

  .c-hero__headline {
    color: var(--color-neutral-white);
  }

  .c-hero__body {
    @media (min-width: 35em) {
      top: 7vw;
    }

    @media all and (min-width: 90em) {
      max-width: 680px;
    }
  }

  .c-hero__img {
    @supports (display: grid) {
      height: 464px;

      @media all and (min-width: 35em) {
        max-height: 630px;
        height: 73vh;
        width: 100%;
      }

      @media all and (min-width: 1441px) {
/*         height: 850px; */
      }
    }
  }
}

.c-hero--home,
.c-hero--inner {
  .tns-nav {
    transform: translateY(-55px);

    @media all and (min-width: 47em) {
      transform: translateY(-105px);
    }

    button::after {
      border-color: var(--color-neutral-white);
    }

    .tns-nav-active::after {
      background-color: var(--color-neutral-white);
    }

    button:focus-visible {
      outline: -webkit-focus-ring-color auto 1px;
    }
  }

  .tns-controls {

    transform: translateY(400px);
    z-index: 1;
    position: relative;

    @media all and (min-width: 35em) {
      transform: translateY(300px);
    }

    @media all and (min-width: 90em) {
      transform: translateY(400px);
    }

    button {
      border: 0;
      background: transparent;
      color: transparent;

      &[data-controls="prev"] {
        margin-top: auto;
        left: 20px;
        position: absolute;
        z-index: 1;
        width: 47px;
        height: 47px;
        transition: 0.2s;

        &::before {
          content: '';
          color: var(--color-neutral-white);
          border: 1px solid transparent !important;
          border-radius: 30px;
          background: rgba(255, 255, 255, 0);
          font-size: 25px;
          padding: 16px 33px 20px;
          -webkit-filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, .6));
          filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, .6));

        }

        &:hover {
          &::before {
            color: var(--primary-color);
          }
        }

        @media all and (min-width: 47em) {
          left: 3.5vw;
          top: -90px;
        }
      }

      &[data-controls="next"] {
        margin-top: auto;
        right: 20px;
        position: absolute;
        z-index: 1;
        width: 47px;
        height: 47px;

        &::before {
          content: '';
          color: var(--color-neutral-white);
          border: 1px solid transparent !important;
          border-radius: 30px;
          font-size: 25px;
          padding: 16px 33px 20px;
          -webkit-filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, .6));
          filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, .6));

        }

        &:hover {
          &::before {
            color: var(--primary-color);

          }
        }

        @media all and (min-width: 47em) {
          right: calc(3.5vw);
          top: -90px;
        }

        @media all and (max-width: 35em) {
          margin-top: auto;
        }
      }

      &:focus-visible {
        outline: -webkit-focus-ring-color auto 1px;
      }
    }
  }
}

.c-hero--inside {
  .c-hero__body {
    bottom: 0;
    color: var(--color-neutral-white);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    margin: 0;
    max-width: 70vw;
    padding: 0 8vw;
    position: absolute;
    right: 0;
    top: 0;

    @media all and (max-width: 35em) {
      max-width: 100%;
    }

    &.full-width {
      max-width: 100%;
    }
  }

  .c-hero__headline {
    margin: 0;
  }

  .c-hero__description {
    font-size: 1.4rem;
  }
}

.c-hero--inside:not(.c-hero--inside--has-form) {
  .c-hero__body {
    width: 100%;
  }
}

.c-hero--inside {
  display: flex;
  overflow: hidden;
  min-height: 340px;
  margin: auto;
  display: block;

  picture {
    position: absolute;
    height: 100%;
    width: 100%;

    @media (max-width: 1000px) {
      overflow-x: hidden;
    }

    &.rightAlignImage {
      img {
        @media only screen and (min-width: 780px) {
          object-position: top right;
        }
      }

    }

    /* &.rightAlignImageM {
       img{
         @media only screen and (max-width: 780px) {
           object-position: top right;
           min-width: 700px;
         }
       }

     }

     &.centerTextImageM {
       img{
         @media only screen and (max-width: 780px) {
           object-position: top center;
           min-width: 700px;
         }
       }

     }

     &.leftTextImageM {
       img{
         @media only screen and (max-width: 780px) {
           object-position: top left;
           min-width: 700px;
         }
       }

     } */


    img {
      height: 100%;
      min-width: 100%;
    }

    &.scale-image {
      display: flex;
      justify-content: right;

      img {
        min-width: inherit;
      }
    }
  }

  &:not(.c-hero--no-background-image) {
    display: flex;

    .c-hero__content-wrapper {
      position: relative;
      padding: 3rem 1rem;
      align-self: center;
    }
  }

  &.c-hero--gradient {
    padding: 0;
  }

  &.c-hero--no-background-image {
    min-height: auto;
  }

  .c-hero__content-wrapper {
    display: flex;
    flex-direction: column-reverse;
    right: 0;
    top: 0;
    left: 0;
    height: 100%;
    align-self: center;
    /*padding: 40px 0;*/
    width: 100%;

    @media all and (min-width: 60em) {
      flex-direction: row;

      /* justify-content: center; */
      height: 100%;
    }

    .c-hero__body {
      position: relative;

      @media (min-width: 780px) {
        /*  align-self: center;*/
      }
    }

    .c-hero__logo {
      justify-content: center;
      display: flex;
      height: auto;

      img {
        margin: 30px 0 20px;
        max-height: 150px;
        width: auto;
        padding: 0 8vw;
      }

      @media all and (min-width: 60em) {

        img {
          padding: 0 8vw 0 0;
          margin: auto;
          max-height: none;
        }
      }
    }
  }
}


/*------------------------------------*\
  #Hero Text Styling
 \*------------------------------------*/

.c-hero__content-wrapper {
  &.leftalign {
    text-align: left;
    justify-content: left;

    @media all and (min-width: 780px) {
      margin-left: 8%;
    }
  }


  &.righttalign {
    @media all and (min-width: 780px) {
      margin-right: 8%;
      text-align: right;
      justify-content: end;

      .c-hero__body {
        align-items: end;

        .c-btn,
        .c-chat {
          align-self: end;
        }
      }
    }

  }

  &.centertext {
    text-align: center;
    justify-content: center;

    .c-hero__body {

      .c-btn,
      .c-chat {
        align-self: center;
      }
    }

    .c-hero__description {
      text-align: center;
      margin: 16px auto 0;
    }
  }
}





.c-find-a-clinic--floating__container {
  .c-hero--inside {
    height: 230px;

    @media all and (min-width: 47em) {
      height: 440px;
    }
  }

  .c-hero__img {
    height: 100%;
  }

  .c-hero__headline {
    color: var(--color-neutral-white);
  }

  .c-hero__body {
    justify-content: center;
    line-height: 1.4;
    max-width: 100%;
    text-align: center;
    width: 100%;

    @media all and (min-width: 47em) {
      justify-content: flex-end;
      max-width: 70vw;
      padding-bottom: 4vw;
      padding-right: 0;
      text-align: left;
      width: 48vw;
    }

    @media all and (min-width: 60em) {
      max-width: 720px;
    }

    @media all and (min-width: 90em) {
      padding-bottom: 100px;
    }
  }

  .c-hero__headline {
    padding: 0;
  }

  .c-description {
    margin-bottom: 0;

    @media all and (min-width: 47em) {
      font-size: var(--font-size-med-1);
    }
  }
}

/*------------------------------------*\
     #HERO VARIATIONS
 \*------------------------------------*/

/* HERO W/ NO BACKGROUND IMAGE */
.c-hero--no-background-image {
  padding: 1rem 0;

  @media all and (min-width: 47em) {
    padding: 3rem 0;
  }

  &.c-hero--inside .c-hero__body {
    width: var(--l-max-width-xs);
    max-width: 92%;
  }

  .c-hero__content-wrapper.righttalign {
    width: 92%;
    margin-left: 0;
  }

  .c-hero__body {
    left: auto;
    line-height: 1.2;
    /* margin-left: auto;
       margin-right: auto; */
    max-width: var(--mobile-gutter);
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
    right: auto;
    /* text-align: center; */
    top: auto;

    @media all and (min-width: 47em) {
      padding-left: 2rem;
      padding-right: 2rem;
    }

    @media all and (min-width: 60em) {
      padding-left: 0;
      padding-right: 0;
      width: 90%;
    }
  }

  .c-hero__headline {
    font-size: var(--font-size-xl);
    font-weight: normal;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 0;
    text-shadow: none;
  }

  .c-hero__description {
    color: var(--color-body-text);
    font-size: 1.4rem;
    margin-bottom: 0;
    margin-top: 1rem;
    /* text-align: left; */


    *:last-child {
      margin-bottom: 0;
    }
  }
}

/* GRADIENT HERO */
.c-hero--gradient {
  align-items: center;
  display: flex;
  min-height: 300px;
  padding: 1rem;
  position: relative;

  &::after {
    @media all and (min-width: 47em) {

      bottom: 10%;
      content: "";
      left: 50%;
      opacity: 0.2;
      position: absolute;
      right: 2rem;
      top: 10%;
    }
  }

  &.c-hero--gradient-clinician {
    &::after {
      @media all and (min-width: 47em) {}
    }
  }

  &.c-hero--blog::after {
    content: none;
  }

  @media all and (min-width: 60em) {
    padding: 3rem 1rem;
  }

  *:last-child {
    margin-bottom: 0;
  }

  &.c-hero--inside .c-hero__body {
    bottom: auto;
    left: auto;
    position: relative;
    right: auto;
    top: auto;
  }

  .c-hero__headline {
    text-shadow: none;
  }

  .c-hero__description {
    max-width: 540px;
  }
}

/* GRADIENT HERO */
.c-hero--logo-overlay {
  align-items: center;
  display: flex;
  min-height: 300px;
  padding: 1rem;
  position: relative;

  /* &::after {
     @media all and (min-width: 47em) {
       background: url("/wp-content/themes/hanger/src/images/logo-mark-white.svg")
         no-repeat 100% 50% / contain;
       bottom: 10%;
       content: "";
       left: 50%;
       opacity: 0.2;
       position: absolute;
       right: 2rem;
       top: 10%;
     }
   } */

  @media all and (min-width: 60em) {
    padding: 3rem 1rem;
  }

  *:last-child {
    margin-bottom: 0;
  }

  &.c-hero--inside .c-hero__body {
    bottom: auto;
    left: auto;
    position: relative;
    right: auto;
    top: auto;
  }

  .c-hero__headline {
    text-shadow: none;
  }

  .c-hero__description {
    max-width: 540px;
  }

  &.c-hero--small .c-hero__img {
    height: auto;
  }
}

/* LIGHT HERO */
.c-hero--light {
  color: var(--color-neutral-gray-70);

  .c-hero__headline {
    color: var(--color-neutral-gray-70);
    text-shadow: none;
  }

  .c-hero__description {
    font-weight: 400;
    margin: 0;
    max-width: 580px;
  }

}

/* DARK HERO */
.c-hero--dark {
  background-color: var(--color-neutral-gray-70);
  color: var(--color-neutral-white);

  .c-hero__body {
    color: var(--color-neutral-white);
  }

  .c-hero__headline {
    color: var(--color-neutral-white);
    padding: 0;
  }

  .c-hero__description {
    font-weight: 400;
    margin: 0;
    max-width: 580px;
  }

  .c-btn {
    margin-top: 10px;
  }
}

/* LARGE HERO */
.c-hero--large {
  height: 550px;

  .c-hero__img {
    min-height: 460px;

    @media all and (min-width: 47em) {
      height: 550px;
    }
  }

}

/* SMALL HERO */
.c-hero--small {
  .c-hero__img {
    /*height: 340px; */
  }

  height: 375px;

  .c-hero__headline {
    @media all and (min-width: 1441px) {
      font-size: 44px;
    }
  }

  .c-hero__body {
    max-width: none;
  }
}

.single-events .c-hero--no-background-image .c-hero__description {
  text-align: center;
}

/* IE11 hacks */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .c-hero--inside {
    overflow: hidden;
  }

  .c-hero--small .c-hero__img,
  .c-hero--large .c-hero__img {
    height: auto;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    width: auto;
  }

  .c-hero__item.c-hero--small,
  .c-hero--inner .tns-slider {
    height: 340px;
  }

  .c-hero__item.c-hero--large {
    height: 460px;

    @media all and (min-width: 47em) {
      height: 43vw;
    }
  }

  .c-hero__img {
    height: auto;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }

  .c-hero--carousel,
  .c-hero--home {
    &.c-hero--small {
      height: 340px;
      overflow: hidden;

      .c-hero__img {
        height: auto;
      }

      .c-hero__body {
        height: 340px;
      }
    }

    .c-hero__img {
      left: auto;
      position: relative;
      top: auto;
      transform: none;
      width: auto;

      @media all and (min-width: 90em) {
        width: 1920px;
      }
    }
  }
}

.hero--blog {
  display: flex;
  justify-content: center;
}

.c-hero--blog {


  @media all and (min-width: 47em) {}

  img {
    width: 486px;
  }

  .c-hero__headline {
    font-size: 18px;
    font-weight: 400;
    margin-top: 14px;
    text-transform: uppercase;

    @media all and (min-width: 35em) {
      font-size: 24px;
    }

    @media all and (min-width: 35em) {
      font-size: 30px;
    }
  }
}

.tax-event_categories {
  .tns-controls {
    transform: translateY(150px);

    @media all and (min-width: 90em) {
      transform: translateY(140px);
    }
  }

  .c-hero--inner .tns-nav {
    transform: translateY(-55px);
  }
}