/*******************
  HOME EXPERTISE
*******************/

.home-expertise {
  padding: 10em 0 var(--gutter) 0;
  text-align: left;
}
.home-expertise .home-expertise-layout {
  margin-top: calc(var(--gutter) * 1.5);
}

.home-expertise-layout .ill {
  position: relative;
  flex: 1;
}
.home-expertise-layout .ill::before {
  content: '';
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: 1s 1s;
}
  .reveal .home-expertise-layout .ill::before {
    left: 100%;
    width: 0;
  }

.home-expertise-layout .content {
  position: relative;
  flex: 0 0 43%;
  padding: 0 calc(var(--gutter) * 2);
}
.home-expertise-layout .content::before {
  content: '';
  z-index: 3;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: 1s 1s;
}
  .reveal .home-expertise-layout .content::before {
    right: 100%;
    width: 0;
  }
.home-expertise-layout .inner {
  max-width: 36em;
  margin: 0 auto 0 0;
  text-align: left;
  padding-bottom: calc(var(--gutter) * 0.5);
}
.home-expertise-layout .label {
  display: inline-block;
  padding: calc(var(--gutter) * 0.75) var(--gutter) calc(var(--gutter) * 0.75) calc(var(--gutter) * 4);
  text-align: right;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  left: 100%;
  margin-bottom: var(--gutter);
  transition: 2.5s 0.5s;
}
  .reveal .home-expertise-layout .label {
    left: calc(var(--gutter) * -4);
  }
.home-expertise-layout .title {
  margin-bottom: var(--gutter);
}
.home-expertise-layout .text {
  color: #666666;
}
.home-expertise-layout .action {
  margin-top: calc(var(--gutter) * 0.5);
}


@media screen and (max-width: 1200px) {
  .home-expertise { padding-top: calc(var(--gutter) * 2); }
}
@media screen and (max-width: 1100px) {
  .home-expertise-layout .content {
    flex: 0 0 55%;
    padding: 0 calc(var(--gutter) * 1.5);
  }
}
@media screen and (max-width: 800px) {
  .home-expertise-layout .ill {
    flex: 0 0 100%;
    height: 60vw;
  }
  .home-expertise-layout .content {
    flex: 0 0 100%;
    padding: 0 var(--gutter);
  }
  .home-expertise-layout .label {
    padding-left: var(--gutter);
  }
  .reveal .home-expertise-layout .label {
    left: calc(var(--gutter) * -1);
  }
  .home-expertise-layout .inner {
    max-width: 100%;
  }
}

/* V2022 */
@media screen and (min-width: 1201px) {
  .home-expertise { z-index: 4; }
  .home-expertise-layout .content { padding-bottom: 13em; }
}