$o-hero-bp1: 456;

.o-hero {
  position: relative;

  .ie & {

    background-image: url("/img/home/farmfun-020.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    @include mq(500) {
      background-image: url("/img/home/farmfun-025.jpg");
    }

    @include mq(600) {
      background-image: url("/img/home/farmfun-050.jpg");
    }

    @include mq(1240) {
      background-image: url("/img/home/farmfun-075.jpg");
    }
  }
}


.o-hero__main {
  @include contain;
  @include vspacing(
    'padding-top' 1
  );
}


.o-hero__image {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  height: 100%;
  max-height: 960px;

  .ie & {
    display: none;
  }
}

.o-hero__video {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  height: 100%;
  max-height: 960px;
  //overflow: hidden;
  pointer-events: none;



  .c-video {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: none;
    min-width: 1145px;
    background-image: url("/img/hero-loader.jpg?v=2");
    background-size: cover;
    background-position: center;

    &:before {
      content: '';
      z-index: 2;
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: palette(secondary, 900);
      opacity: 0.7;
    }
  }

  .c-video__placeholder {
    padding-bottom: calc(100% / 560 * 315);
    background-color: transparent;

    //&:before {
    //  content: '';
    //  z-index: 2;
    //  display: block;
    //  position: absolute;
    //  left: 0;
    //  top: 0;
    //  right: 0;
    //  bottom: 0;
    //  background-color: palette(secondary, 900);
    //  opacity: 0.7;
    //}
  }
}


.o-hero__planner {
  @include border-radius(s);
  width: 100%;
  padding: space(3);
  background-color: palette(primary);

  @include mq($o-hero-bp1) {
    width: $site-column-size * 4px;
  }

}

.o-hero__title {
  @include font-family(secondary);
  @include font-size(xl);
  @include font-weight(regular);
  color: palette(alt, 400);
  margin-bottom: space(3);

  @include mq($o-hero-bp1) {
    @include font-size(xxl);
  }

  .o-hero__title-area & {
    color: white;

    @include mq(680, 1600) {
      font-size: 2.3rem;
    }

    @include mq(1600) {
      font-size: 3.2rem;
    }
  }
}

.o-hero__title-area {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;

  @include mq(1150) {
    height: 30vw;
  }

  @include mq($max: 1150) {
    padding-top: space(6);
    padding-bottom: space(6);
  }

  .c-button__text {
    margin-right: 10px;
  }
}


.o-hero__rating {
  margin-top: space(3);

  @include mq(600) {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

.o-hero--main {
  .o-hero__main {
    padding-top: 0 !important;
  }

  .o-hero__rating {
  }
}