// Zone grey & blue

@media (min-width: $screen-sm-min) {

  .zone::before, .row::after {
    /* the 2 underneath colored sections */
    content: '';
    position: fixed;
    /* trick to remove some annoying flickering on webkit browsers */
    width: 89.8%;
    max-width: 1170px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    height: 50%;
    z-index: -100;
  }

  .zone::before {
    top: 0;
    background-color: $green !important;
    transition: all 1s;
  }

  .zone::after {
    top: 50%;
    background-color: $red !important;
  }

  .zone.color-1::before {
    background-color: $green !important;
  }

  .zone.color-2::before {
    background-color: $red !important;
  }

  .color-1-text {
    background-color: $green !important;
  }

  .color-2-text {
    background-color: $red !important;
  }
}

// Images settings

.image {
  width: 184px;
  background-repeat: no-repeat;
}

.image-1 {
  @extend .image;
  height: 156px;
  background-image: url("../images/01cro.png");
}

.image-2 {
  @extend .image;
  height: 230px;
  background-image: url("../images/02platon.png");
}

.image-3 {
  @extend .image;
  height: 311px;
  background-image: url("../images/03new.png");
}

.image-4 {
  @extend .image;
  height: 349px;
  background-image: url("../images/04marie.png");
}

.image-5 {
  @extend .image;
  height: 386px;
  background-image: url("../images/05steve.png");
}

// Filling

.fill-color {
  height: 300px;
  width: 184px;
}

.medium-fill-color {
  height: 450px;
}

.large-fill-color {
  height: 900px;
}

.fill-gray {
  @extend .fill-color;
  background-color: $gray;
}

.fill-gray-large {
  @extend .large-fill-color;
  background-color: $gray;
}

.fill-gray-space {
  @extend .fill-color;
  background-image: url("../images/00greyspace.png");
}

.fill-gray-space-large {
    @extend .large-fill-color;
    background-image: url("../images/00greyspace.png");
}

.fill-white {
  @extend .fill-color;
  background-color: $white;
}

.fill-white-space {
  @extend .fill-color;
  background-image: url("../images/00whitespace.png");
}

.fill-white-space-medium {
  @extend .medium-fill-color;
  background-image: url("../images/00whitespace.png");
}

.gray {
  background-color: $gray;
}

.white {
  background-color: $white;
}


.bg {
  background-position: middle center;
  background-size: contain;
  background-repeat: no-repeat;
}

.bg-right {
    @extend .bg;
    background-image: url("../images/bg_element_right.png");
}

.bg-right-2 {
    @extend .bg;
    background-image: url("../images/bg_element_right_2.png");
}

.bg-left {
    @extend .bg;
    background-image: url("../images/bg_element_left.png");
}
