@import "base";

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

.img-border {
  border: 1px solid #4a4a4a;
}

.homepage-info img {
  @include _padding(0px, 0px, 15px, 0px);
}

.homepage-info div[class*="col-"] {
  @include _padding(0px, 30px, 0px, 30px);
}

.background {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.background--primary {
  background-color: $color-background-tint-primary;
}

.bg-image {
  margin-top: 1.5em;
}

.background--swirl {
  background-image: url("../img/ocado-swirl.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.image-row {
  align-items: baseline;
  display: flex;
  justify-content: center;

  div {
    @include _padding(0px, 30px, 0px, 30px);
  }

  div:first-child {
    @include _padding(0px, 30px, 0px, 0px);
  }

  div:last-child {
    @include _padding(0px, 0px, 0px, 30px);
  }

  img {
    vertical-align: bottom;
  }

  h5 {
    @include _margin(10px, 0px, 0px, 0px);
  }
}

.portrait {
  display: block;
  margin: auto;
}

.logo {
  @include _padding($spacing * 3, $spacing * 14, $spacing * 3, $spacing * 3);
  content: url("../img/logo_cfl.png");
}

.glyphicon {
  @include _font-size(30px);
  font-weight: 500;
}

.glyphicon-home {
  @include _padding(0px, 0px, 14px, 0px);
}

.youtube img {
  border: 1px solid $color-background-secondary;
}

.grid-benefits__image {
  @include _padding(0px, 0px, 3 * $spacing, 0px);
  justify-self: center;
  align-self: center;
}

.grid-benefits__image1 {
  grid-area: image1;
}

.grid-benefits__image2 {
  grid-area: image2;
}

.grid-benefits__image3 {
  grid-area: image3;
}

.educate-homepage {
  content: url("../img/home_educate.png");
  width: 70%;
  object-fit: contain;
}

.play-homepage {
  content: url("../img/home_play.png");
  width: 70%;
  object-fit: contain;
}

.oval-blue {
  content: url("../img/oval_blue.svg");
}

.oval-pink {
  content: url("../img/oval_pink.svg");
}

.oval-yellow {
  content: url("../img/oval_yellow.svg");
}

.polygon-blue {
  content: url("../img/polygon_blue.svg");
}

.polygon-pink {
  content: url("../img/polygon_pink.svg");
}

.polygon-yellow {
  content: url("../img/polygon_yellow.svg");
}

.login-shape-left {
  @include _top(250px);
  @include _margin(-250px, 0px, 0px, 0px);
  position: relative;
  left: -17vw;
}

.login-shape-right {
  @include _top(500px);
  @include _margin(-500px, 0px, 0px, 0px);
  position: relative;
  left: 17vw;
}

@media (max-width: $tablet-large-max-width) {
  .login-shape-left {
    @include _top(300px);
    @include _margin(-300px, 0px, 0px, 0px);
    position: relative;
    left: -30vw;
    width: 150px;
  }

  .login-shape-right {
    @include _top(550px);
    @include _margin(-550px, 0px, 0px, 0px);
    position: relative;
    left: 30vw;
    width: 130px;
  }
}

@media (max-width: $mobile-max-width) {
  .login-shape-left,
  .login-shape-right {
    display: none;
  }

  .image-row {
    align-items: center;
    flex-direction: column;

    img {
      @include _padding(10px, 0px, 10px, 0px);
    }
  }

  .error-page img {
    display: none;
  }
}
