/*SCSS*/
/*
 * $lightblue: #86d3d9;
$yellow: #fbbb5c;
$greyblue: #84a2ce;
$green: #34b593;

$darkblue: #003a63;

#nav {
  .logo a img {
    width: 206px;
    height: 66px;
  }
  ul li {
    color: $darkblue;
  }
  .skew-link {
    color: white;

    &:first-of-type {
      div {
        transform: skewX(-12.5deg);
        background-color: #008df1;
        p {
          transform: skewX(12.5deg);
        }
      }
    }
    &:last-of-type {
      div {
        transform: skewX(-12.5deg);
        background-color: #0060a4;
        p {
          transform: skewX(12.5deg);
        }
      }
    }
  }
}
.hero {
  background-color: $darkblue;
  height: 593px;
  @media (min-width: 1440px) {
    max-width: 1440px;
  }
  &:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 18px;
    background: linear-gradient(105deg, #008df1 64.7%, #0060a4 64.7%);
    left: 0;
    bottom: 0;
  }
}

.hero-item {
  padding: 77px 30px;
  width: 22%;
  position: relative;
  transition: width 1s, border-right 0s, padding 1s;
  transform: skewX(-15deg);
  overflow: hidden;

  .label {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    color: black;
    height: 100%;
    width: 43px;
    display: none;

    p {
      transform: rotate(-90deg) skewX(-12.5deg);
    }
  }

  .hero-item-content {
    transform: skewX(15deg);
    flex-direction: column;
    align-items: center;

    .text-4xl {
      font-size: 40px;
    }

    .topic {
      font-size: 30px;
    }
    .description {
      display: none;
    }
    .more p {
      display: none;
    }
  }

  img.keyart {
    max-width: unset !important;
    position: absolute;
    top: 53%;
    left: 25px;
    transform: scale(1) skewX(15deg);
    transition: all 0.6s;
  }

  &[data-label="Professionals"] {
    border-right: 5px solid $lightblue;

    .label {
      background-color: $lightblue;
    }
    .hero-item-content {
      .more {
        color: $lightblue;
      }
      .topic {
        color: $lightblue;
      }
    }
    img.keyart {
      width: 307px;
      height: 309px;
    }
  }
  &[data-label="Quality & Safety"] {
    border-right: 5px solid $yellow;

    .label {
      background-color: $yellow;
    }
    .hero-item-content {
      .more {
        color: $yellow;
      }
      .topic {
        color: $yellow;
      }
    }
    img.keyart {
      width: 332px;
      height: 308px;
    }
  }
  &[data-label="Technology"] {
    border-right: 5px solid $greyblue;

    .label {
      background-color: $greyblue;
    }
    .hero-item-content {
      .more {
        color: $greyblue;
      }
      .topic {
        color: $greyblue;
      }
    }
    img.keyart {
      width: 329px;
      height: 305px;
    }
  }
  &[data-label="Fleet"] {
    border-right: 5px solid $green;
    .label {
      background-color: $green;
    }
    .hero-item-content {
      .more {
        color: $green;
      }
      .topic {
        color: $green;
      }
    }
    img.keyart {
      width: 308px;
      height: 327px;
    }
  }

  &.open {
    width: 83%;
    padding: 80px 180px;

    .description {
      display: block;
      width: 356px;
    }

    .hero-item-content {
      flex-direction: row;
      align-items: center;

      .more {
        color: white;

        p {
          display: block;
        }
      }
    }

    img.keyart {
      transform: scale(1.2) skewX(15deg);
      top: 20%;
      left: 650px;
    }
  }

  &.closed {
    width: 42px;
    padding: 0px;
    border: none;

    img.keyart {
      display: none;
    }

    .hero-item-content {
      .more {
        display: none;
      }
      p {
        display: none;
      }
    }
  }

  &.open .label,
  &.closed .label {
    display: flex;
    color: $darkblue;
  }
}

 * 
 * */
/*
#nav .logo a img {
  width: 206px;
  height: 66px;
}
#nav ul li {
  color: #003a63;
}
#nav .skew-link {
  color: white;
}
#nav .skew-link:first-of-type div {
  transform: skewX(-12.5deg);
  background-color: #008df1;
}
#nav .skew-link:first-of-type div p {
  transform: skewX(12.5deg);
}
#nav .skew-link:last-of-type div {
  transform: skewX(-12.5deg);
  background-color: #0060a4;
}
#nav .skew-link:last-of-type div p {
  transform: skewX(12.5deg);
}

.hero {
  background-color: #003a63;
  height: 593px;
}
@media (min-width: 1440px) {
  .hero {
    max-width: 1440px!important;
  }
}
.hero:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 18px;
  background: linear-gradient(105deg, #008df1 64.7%, #0060a4 64.7%);
  left: 0;
  bottom: 0;
}
.hero-container:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 18px;
  background: linear-gradient(105deg, #008df1 61.1%, #0060a4 61.1%);
  left: 0;
  bottom: 0;
}

.hero-item {
  padding: 77px 30px;
  width: 22%;
  position: relative;
  transition: width 1s, border-right 0s, padding 1s;
  transform: skewX(-15deg);
  overflow: hidden;
}
.hero-item .label {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  color: black;
  height: 100%;
  width: 43px;
  display: none;
}
.hero-item .label p {
  transform: rotate(-90deg) skewX(-12.5deg);
}
.hero-item .hero-item-content {
  transform: skewX(15deg);
  flex-direction: column;
  align-items: center;
}
.hero-item .hero-item-content .text-4xl {
  font-size: 40px;
}
.hero-item .hero-item-content .topic {
  font-size: 30px;
}
.hero-item .hero-item-content .description {
  display: none;
}
.hero-item .hero-item-content .more p {
  display: none;
}
.hero-item img.keyart {
  max-width: unset !important;
  position: absolute;
  top: 53%;
  left: 25px;
  transform: scale(1) skewX(15deg);
  transition: all 0.6s;
}
.hero-item[data-label="Professionals"] {
  border-right: 5px solid #86d3d9;
}
.hero-item[data-label="Professionals"] .label {
  background-color: #86d3d9;
}
.hero-item[data-label="Professionals"] .hero-item-content .more {
  color: #86d3d9;
}
.hero-item[data-label="Professionals"] .hero-item-content .topic {
  color: #86d3d9;
}
.hero-item[data-label="Professionals"] img.keyart {
  width: 307px;
  height: 309px;
}
.hero-item[data-label="Quality & Safety"] {
  border-right: 5px solid #fbbb5c;
}
.hero-item[data-label="Quality & Safety"] .label {
  background-color: #fbbb5c;
}
.hero-item[data-label="Quality & Safety"] .hero-item-content .more {
  color: #fbbb5c;
}
.hero-item[data-label="Quality & Safety"] .hero-item-content .topic {
  color: #fbbb5c;
}
.hero-item[data-label="Quality & Safety"] img.keyart {
  width: 332px;
  height: 308px;
}
.hero-item[data-label="Technology"] {
  border-right: 5px solid #84a2ce;
}
.hero-item[data-label="Technology"] .label {
  background-color: #84a2ce;
}
.hero-item[data-label="Technology"] .hero-item-content .more {
  color: #84a2ce;
}
.hero-item[data-label="Technology"] .hero-item-content .topic {
  color: #84a2ce;
}
.hero-item[data-label="Technology"] img.keyart {
  width: 329px;
  height: 305px;
}
.hero-item[data-label="Fleet"] {
  border-right: 5px solid #34b593;
}
.hero-item[data-label="Fleet"] .label {
  background-color: #34b593;
}
.hero-item[data-label="Fleet"] .hero-item-content .more {
  color: #34b593;
}
.hero-item[data-label="Fleet"] .hero-item-content .topic {
  color: #34b593;
}
.hero-item[data-label="Fleet"] img.keyart {
  width: 308px;
  height: 327px;
}
.hero-item.open {
  width: 83%;
  padding: 80px 180px;
}
.hero-item.open .description {
  display: block;
  width: 356px;
}
.hero-item.open .hero-item-content {
  flex-direction: row;
  align-items: center;
}
.hero-item.open .hero-item-content .more {
  color: white;
}
.hero-item.open .hero-item-content .more p {
  display: block;
}
.hero-item.open img.keyart {
  transform: scale(1.2) skewX(15deg);
  top: 20%;
  left: 650px;
}
.hero-item.closed {
  width: 42px;
  padding: 0px;
  border: none;
}
.hero-item.closed img.keyart {
  display: none;
}
.hero-item.closed .hero-item-content .more {
  display: none;
}
.hero-item.closed .hero-item-content p {
  display: none;
}
.hero-item.open .label, .hero-item.closed .label {
  display: flex;
  color: #003a63;
}*/