@media screen and (max-width: 980px) {
  .features-wrap .headline {
    font-size: 16px;
    height: auto;
    padding: 16px;
  }
  .features-wrap .headline .icon {
    font-size: 18px;
  }
  .features-wrap .col-body {
    padding: 20px 16px;
  }
  .features-wrap .col-body .title {
    font-size: 14px;
  }
  .features-wrap .col-body .list li {
    font-size: 13px;
  }
  .features-wrap .col-body .list li + li {
    margin-top: 18px;
  }
}
@media screen and (max-width: 840px) {
  .main-header {
    padding: 10px 0;
  }
  .main-header .inner-wrap {
    display: block;
    float: left;
    width: 100%;
  }
  .main-header .logo {
    float: left;
    width: auto;
  }
  .main-header .logo img {
    max-height: 26px;
    margin-top: 4px;
  }
  .main-header .nav-toggle {
    display: block;
  }
  .main-header .main-nav-wrap {
    display: none;
    position: fixed;
    top: 54px;
    left: 0;
    z-index: 99;
    width: 100%;
    padding: 20px 15px;
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  }
  .main-header .main-nav-wrap.in {
    display: block;
  }
  .main-header .main-nav-wrap .main-nav {
    width: 100%;
    float: left;
    position: relative;
    display: block;
  }
  .main-header .main-nav-wrap li {
    float: left;
    width: 100%;
  }
  .main-header .main-nav-wrap li a {
    float: left;
    width: 100%;
    text-align: center;
    padding: 10px;
    margin-bottom: 8px;
  }
}
@media screen and (max-width: 767px) {
  .section-icon-wrap {
    margin-bottom: 32px;
  }

  .section-headline {
    font-size: 24px;
  }
  .section-headline + .subtitle {
    margin-top: 40px;
  }

  .subtitle {
    font-size: 18px;
  }

  .section-subtitle {
    margin-bottom: 40px;
  }

  .intro-wrap {
    height: auto;
    padding-top: 40px;
  }

  .features-wrap {
    flex-wrap: wrap;
  }
  .features-wrap .col {
    flex-basis: 100%;
  }
  .features-wrap .col + .col {
    margin-top: 20px;
  }

  .info-wrapper.bg {
    padding-bottom: 0;
  }
  .info-wrapper.bg:before {
    top: 8.5%;
  }

  .description-wrap .box {
    flex-wrap: wrap;
    padding: 30px 0;
  }
  .description-wrap .box .title {
    flex-basis: 100%;
    margin-bottom: 20px;
  }
  .description-wrap .box .text {
    flex-basis: 100%;
  }

  .main-footer .copy-wrap {
    font-size: 13px;
  }
}
