@import '~Breakpoints';
@import '~Colors';
@import '~Layout';
@import '~FontSize';
@import "~Type";

.index {
  position:   relative;

  text-align: center;
  color:      white;

  height:     calc(100vh - 8rem); //needs explicit height for IE11
  opacity:    1;
}

.overlay {
  position:         absolute;
  width:            100%;
  height:           100%;
  top:              0;
  left:             0;
  background-color: $gray-dark;
  opacity:          0.5;
  //z-index: -1;
}

.inner {
  @extend .index;
  //background-image: url('Images/slider2.jpg');
  background-size: cover;
  height:          50vh;
  //z-index:         -2;
}

.imgWrapper {
  //position: fixed;
  @include legacy-grid-child(1, 3, 1, 3);
  @include grid-child(1, 3, 1, 3);

  height:   100%;
  width:    100%;
  overflow: hidden;
  z-index:  -2;

}

.figure {
  z-index:               -1;
  @include grid-parent();
  -ms-grid-columns:      10vw 1fr 10vw;
  -ms-grid-rows:         10vh 1fr 10vh;
  grid-template-columns: 10vw 1fr 10vw;
  grid-template-rows:    10vh 1fr 10vh;
  &.active {
    opacity: 1;
    z-index: 1;
  }
  display:               block;
  position:              absolute;
  top:                   0;
  left:                  0;

  opacity:               0;
  transition:            opacity .75s ease;
  height:                100%;
  width:                 100%;
  img {
    z-index:    -1;
    position:   fixed;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    object-fit: cover;
  }
}

.content {
  @include legacy-grid-child(2, 1, 2, 1);
  @include grid-child(2, 1, 2, 1);
}

.headline {
  text-transform: uppercase;
  @include fontSizer(6);
  font-weight:    500;
  line-height:    1.33;
  letter-spacing: .6rem;
}

.tagline {
  font-weight: 200;
  @include fontSizer(4);
  @include media-breakpoint-up(sm) {
    padding: 0 10%;

  }
  @include media-breakpoint-up(md) {

    padding: 0 20%;
  }
  @include media-breakpoint-up(xl) {

    padding: 0 25%;
  }
}

.iOSFix {
  background-attachment: scroll !important;
}

$btnSpace: 4rem;

.prevBtn, .nextBtn {
  display:          none;
  @include media-breakpoint-up(md) {
    display: block;
  }
  top:              50%;
  transform:        translateY(-50%);
  z-index:          1000;
  color:            white;
  border:           none;
  background-color: transparent;
  cursor:           pointer;
  line-height:      0;
  @include fontSizer(3);
  position:         absolute;
}

.prevBtn {
  margin-left: 1.5rem;
  left:        0;
}

.nextBtn {
  margin-right: 1.5rem;
  right:        0;
}