@media (min-width: 1200px) {
  .features-section {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; } }

.feature {
  margin: auto;
  max-width: 850px; }
  @media (min-width: 1200px) {
    .feature {
      width: 50%; }
      .feature.feature:nth-child(odd) {
        padding-right: 50px; }
      .feature.feature:nth-child(even) {
        padding-left: 50px; }
      .feature.feature:nth-child(n+3) {
        margin-top: 100px; } }
  .feature + .feature {
    margin-top: 50px; }
    @media (min-width: 1000px) and (max-width: 1199px) {
      .feature + .feature {
        margin-top: 100px; } }
    @media (min-width: 1200px) {
      .feature + .feature {
        margin-top: 0; } }
  @media (min-width: 541px) {
    .feature {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  @media (min-width: 750px) {
    .feature {
      -webkit-align-items: stretch;
          -ms-flex-align: stretch;
              align-items: stretch; } }

@media (min-width: 541px) {
  .feature__icon, .feature__text {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; } }

.feature__icon {
  margin: 0 0 25px; }
  @media (min-width: 541px) {
    .feature__icon {
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      margin: 0;
      width: 33%; }
      .feature:nth-child(even) .feature__icon {
        -webkit-order: 1;
            -ms-flex-order: 1;
                order: 1; }
        @media (min-width: 1200px) {
          .feature:nth-child(even) .feature__icon {
            -webkit-order: 0;
                -ms-flex-order: 0;
                    order: 0; } } }
  @media (min-width: 1200px) {
    .feature__icon {
      width: 28%; } }
  .feature__icon .svg {
    display: block; }
    @media (max-width: 540px) {
      .feature__icon .svg {
        height: 100%;
        margin: auto; } }
    @media (min-width: 541px) {
      .feature__icon .svg {
        height: 100%;
        margin: 0;
        width: 100%; } }

.feature__text p {
  margin-bottom: 0; }
@media (min-width: 541px) {
  .feature__text {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 62%; } }
@media (min-width: 750px) {
  .feature__text {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; } }
@media (min-width: 1200px) {
  .feature__text {
    width: 68%; } }

.hd {
  color: #fff;
  min-height: 400px;
  padding: 5.92593vw 0 80px;
  position: relative; }
  @media (min-width: 541px) {
    .hd {
      background-position: 50%;
      max-height: 655px;
      padding-top: 40px; } }
  @media (min-width: 1000px) {
    .hd {
      height: 50vw; } }

.hd__logo {
  font-size: 1em;
  margin: auto;
  padding-left: 6.2963vw; }
  @media (min-width: 541px) {
    .hd__logo {
      padding-left: 40px; } }
  @media (max-width: 540px) {
    .hd__logo .svg {
      height: 8.7037vw;
      width: 44.81481vw; } }
  @media (min-width: 541px) {
    .hd__logo .svg {
      height: 46px;
      width: 234px; } }

.hd__text {
  margin: auto;
  max-width: 1500px;
  padding: 30px 11.11111vw 0; }
  @media (min-width: 541px) {
    .hd__text {
      padding-left: 40%;
      padding-right: 50px;
      padding-top: 30px; } }
  @media (min-width: 1000px) {
    .hd__text {
      padding-top: 5vw; } }
  @media (min-width: 1600px) {
    .hd__text {
      padding-left: 524px;
      padding-top: 80px; } }
  .hd__text p {
    font-size: 5.55556vw;
    line-height: 1.33333;
    margin: 0.8em 0 1.2em; }
    @media (min-width: 541px) {
      .hd__text p {
        font-size: 20px; } }
    @media (min-width: 1000px) {
      .hd__text p {
        font-size: 2.1vw;
        line-height: 1.22222; } }
    @media (min-width: 1600px) {
      .hd__text p {
        font-size: 30px; } }

@media (max-width: 540px) {
  .hd__cta {
    display: block; } }

.hd__icons {
  overflow: hidden; }
  .hd__icons li {
    line-height: 1;
    float: left;
    bottom: 20px;
    position: absolute;
    width: auto; }
    .hd__icons .docs {
      right: 130px; }
    .hd__icons .docs a path {
      -webkit-transition: all 0.3s;
         -moz-transition: all 0.3s;
              transition: all 0.3s; }
    .hd__icons .docs a:hover path {
      fill: #6e9903; }
    .hd__icons .github {
      right: 80px; }
    .hd__icons .github a path {
      -webkit-transition: all 0.3s;
         -moz-transition: all 0.3s;
              transition: all 0.3s; }
    .hd__icons .github a:hover path {
      fill: #111111; }
    .hd__icons .twitter {
      right: 30px; }
    .hd__icons .twitter a path {
      -webkit-transition: all 0.3s;
         -moz-transition: all 0.3s;
              transition: all 0.3s; }
    .hd__icons .twitter a:hover path {
      fill: #2ba9e1; }

.hd {
  position: relative; }
  .hd:before {
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    background-color: #247c7f;
    background-position: 40% 50%;
    background-size: cover;
    height: 100%;
    z-index: -1; }
    .supports-mix-blend-mode .hd:before {
      background-image: url(../images/background.svg); }
    .no-mix-blend-mode .hd:before {
      background-image: url(../images/background-800.png); }
      @media (min-width: 541px) {
        .no-mix-blend-mode .hd:before {
          background-image: url(../images/background-1000.png); } }
      @media (min-width: 1000px) {
        .no-mix-blend-mode .hd:before {
          background-image: url(../images/background-2400.png); } }

.hd > ul {
  list-style: none;
  margin: 0;
  padding: 0; }

.hd__nav {
  padding: 25px 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.hd__nav > ul > li {
  background: rgba(17, 96, 96, .05);
}

@media (max-width: 960px) {
    .explain__anim {
        display: none;
    }
}

#download-btn {
  margin-top: 36px;
}

.logo-section {
  background: #f1f5f5;
  padding: 10px;
}

.logo-section .logos {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.logo-section .logos::after {
  clear: both;
  content: "";
  display: table;
}

.logo-section .logos img {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 18%;
  padding: 1.5rem 2.9rem;
  opacity: 0.6;
}

.logo-section .logos img:last-child {
  margin-right: 0;
}

.logo-section .logos img:nth-child(5n) {
  margin-right: 0;
}

.logo-section .logos img:nth-child(5n+1) {
  clear: left;
}

@media screen and (max-width: 45rem) {
  .logo-section .logos img {
    margin-right: 7.42297%;
    width: 40%;
    padding: 2rem 4rem;
  }

  .logo-section .logos img:last-child {
    margin-right: 0;
  }

  .logo-section .logos img:nth-child(2n) {
    margin-right: 0;
  }

  .logo-section .logos img:nth-child(2n+1) {
    clear: left;
  }
}

.header-banner {
  height: 60px;
  background: #E66B55;
  color: white;
  line-height: 60px;
  padding: 0 40px;
}

.header-banner__content {
  font-size: 20px;
  font-weight: 300;
}

.header-banner__stride {
  font-weight: bold;
  color: white;
}

.header-banner__stride:hover {
  color: white;
  text-decoration: underline;
}

.header-banner .btn {
  position: relative;
  top: 10px;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 14px;
  background: #CB4D36;
  border-radius: 2px;
  vertical-align: top;
  margin-left: 10px;
  font-size: 14px;
}

@media screen and (max-width: 900px) {
  .header-banner__content {
    font-size: 16px;
  }

  .header-banner .btn {
    padding: 0 10px;
    font-size: 12px;
  }
}

@media screen and (max-width: 740px) {
  .header-banner__long-content {
    display: none;
  }
}

@media screen and (max-width: 540px) {
  .header-banner {
    padding: 0 6.2963vw;
  }

  .header-banner__content {
    font-size: 14px;
  }

  .header-banner .btn {
    padding: 0 10px;
    font-size: 10px;
  }
}