html,
body {
  min-height: 100%;
}

body.in-transition {
  transition: transform 0.9s ease;
}

.container {
  padding: 0 8vw;
}

.section.center,
.container.center {
  @media screen and (max-width: 700px) {
    text-align: left;
  }
}

.section {
  padding: 4rem 0;
  position: relative;
  z-index: 1;

  @media screen and (min-width: 700px) {
    padding: 8rem 0;
  }
}

.center {
  text-align: center;
}

.middle {
  align-items: center;
}

.space-between {
  justify-content: space-between;
}

/* Blocks */

.block-wrapper {
  display: flex;
}

.block-25 {
  flex: 0 0 25%;
}

.block-30 {
  flex: 0 0 30%;
}

.block-45 {
  flex: 0 0 45%;
}

.block-50 {
  flex: 0 0 50%;
}

.block-55 {
  flex: 0 0 55%;
}

.block-70 {
  flex: 0 0 70%;
}

/* Columns */

.columns {
  display: flex;
  flex-wrap: wrap;
  margin: 1.5rem -4vw 1.5rem -4vw;
}

.column {
  padding: 4vw;
}

/* Feature blocks */
.feature-block {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;

  hr {
    border-top: 1px solid #464646;
  }

  &.ltr {
    align-items: flex-start;
    flex-direction: column;
    div:first-child {
      flex: auto;
    }
    div:last-child {
      flex: auto;
    }

    @media screen and (min-width: 700px) {
      align-items: center;
      flex-direction: row;
      div:first-child {
        flex: 0 0 calc(45% - 2rem);
      }
      div:last-child {
        flex: 0 0 55%;
      }
    }

    @media screen and (min-width: 860px) {
      div:first-child {
        flex: 0 0 calc(45% - 6rem);
      }
    }
  }

  &.rtl {
    align-items: flex-start;
    flex-direction: column;
    div:first-child {
      flex: auto;
    }
    div:last-child {
      flex: auto;
    }

    @media screen and (min-width: 700px) {
      align-items: center;
      flex-direction: row;
      div:first-child {
        flex: 0 0 calc(55% - 2rem);
      }
      div:last-child {
        flex: 0 0 45%;
      }
    }

    @media screen and (min-width: 860px) {
      div:first-child {
        flex: 0 0 calc(55% - 6rem);
      }
    }
  }

  &.vertical {
    flex-direction: column;
    justify-content: center;

    > * {
      margin-bottom: 3rem;
      &:last-child {
        margin: 0;
      }
    }

    @media screen and (max-width: 700px) {
      align-items: flex-start;
      justify-content: flex-start;
      text-align: left;
    }
  }

  .feature-block--copy {
    @media screen and (max-width: 700px) {
      margin-bottom: 3rem;
    }
  }

  .feature-block--copy > * {
    max-width: 460px;
  }

  .feature-block--illu {
    position: relative;
    width: inherit;
  }

  .feature-block--illu img {
    width: inherit;
  }

  .illu-shadow--left img {
    filter: drop-shadow(-60px 40px 40px rgba(52, 58, 64, 0.1));
  }

  .illu-shadow--right img {
    filter: drop-shadow(60px 40px 40px rgba(52, 58, 64, 0.1));
  }

  @media screen and (max-width: 700px) {
    .feature-block--copy {
      order: -2;
    }
    .feature-block--illu {
      order: -1;
    }
  }

  &.tab {
    flex-direction: column;
    justify-content: center;

    > * {
      margin-bottom: 3rem;
      &:last-child {
        margin: 0;
      }
    }

    @media screen and (max-width: 700px) {
      align-items: flex-start;
      justify-content: flex-start;
      text-align: left;
    }

    .feature-block--copy {
      margin-bottom: 0;
    }

    .feature-block--copy > * {
      max-width: 460px;
    }

    .feature-block--container {
    }

    .feature-block--content {
    }

    .feature-block--nav-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      justify-content: center;
      margin-top: 3rem;
      margin-bottom: 3rem;
    }

    .feature-block--nav-row > div {
      transition-duration: 0.3s;
      padding: 5px 30px;
      border-bottom: solid 1px #464646;
    }

    @media screen and (max-width: 700px) {
      .feature-block--nav-row > div {
        padding: 5px 8px;
      }
    }

    .feature-block--nav-row > div.active {
      color: #20c997;
      border-bottom-color: #20c997;
      transition-duration: 0.3s;
    }

    .feature-block--data {
      width: 460px;
    }

    @media screen and (max-width: 700px) {
      .feature-block--data {
        width: 100%;
      }
    }

    .feature-block--data > div,
    .feature-block--tab-content {
      display: none;
      opacity: 0;
      transition-duration: 0.3s;

      p {
        margin-bottom: 3rem;
      }
    }

    .feature-block--data > div.active,
    .feature-block--tab-content.active {
      display: block;
      opacity: 1;
      transition-duration: 0.3s;
    }

    .feature-block--illu img {
      width: inherit;
    }

    .feature-block--data-features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      grid-auto-rows: 50px;

      p {
        font-weight: 500;
      }

      p::before {
        content: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-width="2" d="M23 6L9.714 19.286a1.012 1.012 0 0 1-1.424.004L1 12"></path></svg>');
        background-color: rgb(33, 224, 158);
        -webkit-text-fill-color: white;
        color: white;
        width: 24px;
        height: 26px;
        padding-left: 0px;
        text-align: center;
        padding: 3px 6px;
        border-radius: 50%;
        margin-right: 20px;
      }
    }

    @media screen and (max-width: 700px) {
      .feature-block--data-features {
        grid-template-columns: 1fr;
      }
    }
  }
}

.desktop-only {
  display: none;
}

@media screen and (max-width: 700px) {
  .feature-block--data-features {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 701px) {
  .desktop-only {
    display: block;
  }

  .mobile-only {
    display: none;
  }
}
