.button {
  background-color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  border-width: 1px;
  border-style: solid;
  padding: 15px 0;
  text-align: center;
  cursor: pointer;
  line-height: 142%;
  letter-spacing: 3px;
  text-decoration: none; }
  .button:hover, .button:active, .button:focus {
    text-decoration: none; }
  @media screen and (max-width: 570px) {
    .button {
      padding: 10px 0; } }
  @media screen and (max-width: 360px) {
    .button {
      font-size: 10px;
      padding: 12px 0; } }
  .button.top {
    width: 170px;
    height: 50px;
    margin-top: 20px; }
    .button.top:not(:first-child) {
      margin-right: 30px; }
      @media screen and (max-width: 570px) {
        .button.top:not(:first-child) {
          margin-right: 15px; } }
    @media screen and (max-width: 570px) {
      .button.top {
        height: 40px; } }
  .button.grey {
    border-color: #c8c9cb;
    color: #c8c9cb; }
    .button.grey:hover {
      color: #ffffff;
      background-color: #c8c9cb; }
  .button.blue {
    border-color: #5db4e5;
    color: #5db4e5; }
    .button.blue:hover {
      color: #ffffff;
      background-color: #5db4e5; }

.title {
  font-weight: 700;
  font-size: 26px;
  line-height: 139%;
  text-transform: uppercase;
  letter-spacing: 2px; }
  .title.blue {
    color: #3487B5; }
  .title.white {
    color: #ffffff; }
  .title.grey {
    color: #7b7b7f; }
  .title.small {
    font-size: 14px; }
  @media screen and (max-width: 570px) {
    .title {
      font-size: 22px; } }

.subtitle {
  font-weight: 300;
  font-size: 16px;
  line-height: 138%;
  color: #7b7b7f; }

.module-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 136%;
  text-transform: uppercase;
  margin-bottom: 10px; }
  .module-title.module1 {
    color: #0099CC; }
  .module-title.module2 {
    color: #353795; }
  .module-title.module3 {
    color: #0264A0; }

.text {
  font-size: 12px;
  line-height: 184%; }
  .text.white {
    color: #ffffff; }
  .text.grey {
    color: #7b7b7f; }

.link {
  font-size: 10px;
  text-decoration: underline;
  cursor: pointer; }
  .link.grey {
    color: #7b7b7f; }
  .link.white {
    color: #ffffff; }
  .link.active {
    color: #3487B5; }

.list {
  padding: 0;
  margin: 10px 0 30px;
  list-style: none; }
  .list li {
    color: #7b7b7f;
    font-size: 12px;
    line-height: 184%; }
    .list li .disc {
      width: 4px;
      height: 4px;
      float: left;
      border-radius: 4px;
      background: #7b7b7f;
      margin-top: 10px; }
    .list li .text {
      margin: 0 0 0 30px !important; }

.form-control {
  color: #7b7b7f;
  font-size: 12px;
  font-family: "Open Sans"; }

::-webkit-input-placeholder {
  color: #bbbdbf !important; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #bbbdbf !important; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #bbbdbf !important; }

:-ms-input-placeholder {
  color: #bbbdbf !important; }

.alert {
  font-size: 14px;
  font-weight: 700; }

nav {
  max-width: 1170px;
  margin: auto; }
  nav .logo {
    height: 50px;
    width: 200px;
    margin-top: 20px;
    float: left; }
    nav .logo img {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%; }
    @media screen and (max-width: 570px) {
      nav .logo {
        max-width: 125px; } }
    @media screen and (max-width: 480px) {
      nav .logo {
        float: none;
        width: 200px;
        max-width: none;
        margin: 10px auto 0px; } }
  nav .buttons {
    float: right; }
    @media screen and (max-width: 480px) {
      nav .buttons {
        float: none;
        width: 320px;
        max-width: none;
        margin: 0px auto 0px;
        padding: 0 10px; } }
    @media screen and (max-width: 480px) {
      nav .buttons .button {
        width: 140px;
        margin-top: 10px; } }
    @media screen and (max-width: 480px) {
      nav .buttons .button:first-child {
        margin-right: 5px; } }
  @media screen and (max-width: 1024px) {
    nav {
      padding: 0 30px; } }
  @media screen and (max-width: 480px) {
    nav {
      padding: 0; } }

body {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  overflow-x: hidden;
  max-width: 100vw; }
  body .bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: url(../img/charts.svg);
    background-position: center top;
    background-repeat: repeat-x;
    z-index: -1;
    width: 100%;
    height: 100%; }
    @media screen and (max-width: 768px) {
      body .bg {
        background-position: right top; } }
    @media screen and (max-width: 400px) {
      body .bg {
        background-position: 520px -50px; } }
  body .a1 {
    margin: 50px 0;
    position: relative; }
    @media screen and (max-width: 480px) {
      body .a1 {
        margin: 20px 0; } }
    body .a1 > .title {
      max-width: 600px;
      margin: auto; }
      @media screen and (max-width: 768px) {
        body .a1 > .title {
          padding: 0 50px; } }
      @media screen and (min-width: 1367px) {
        body .a1 > .title {
          max-width: 550px;
          margin: auto; } }
      @media screen and (max-width: 480px) {
        body .a1 > .title {
          padding: 0 15px; } }
    body .a1 .top {
      margin: 50px 0;
      position: relative; }
      @media screen and (max-width: 768px) {
        body .a1 .top {
          text-align: center; } }
      body .a1 .top .intro {
        float: left;
        width: 450px;
        color: #fff;
        margin: 220px 150px 0; }
        @media screen and (max-width: 1280px) {
          body .a1 .top .intro {
            margin: 220px 100px 0; } }
        @media screen and (max-width: 1024px) {
          body .a1 .top .intro {
            margin: 220px 0 0 30px;
            width: 400px; } }
        @media screen and (max-width: 768px) {
          body .a1 .top .intro {
            padding: 175px 30px 0 30px;
            width: 100%;
            margin: 0; } }
        @media screen and (max-width: 400px) {
          body .a1 .top .intro {
            padding: 180px 15px 0; } }
        body .a1 .top .intro .title {
          font-size: 16px;
          margin-bottom: 20px; }
          @media screen and (max-width: 768px) {
            body .a1 .top .intro .title {
              text-align: center; } }
        body .a1 .top .intro .subtitle {
          color: #fff; }
          @media screen and (max-width: 768px) {
            body .a1 .top .intro .subtitle {
              text-align: center; } }
          @media screen and (max-width: 400px) {
            body .a1 .top .intro .subtitle {
              text-align: center;
              font-size: 14px; } }
      body .a1 .top img {
        max-width: 596px;
        max-height: 451px;
        box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25); }
        @media screen and (max-width: 1024px) {
          body .a1 .top img {
            max-width: 585px; } }
        @media screen and (max-width: 768px) {
          body .a1 .top img {
            padding-top: 30px;
            max-height: 370px; } }
        @media screen and (max-width: 400px) {
          body .a1 .top img {
            max-height: 340px;
            padding-bottom: 30px; } }
      @media screen and (max-width: 480px) {
        body .a1 .top {
          margin: 0;
          max-width: 100%;
          overflow: hidden; } }
    body .a1 .bottom {
      margin: 50px 0; }
      @media screen and (max-width: 480px) {
        body .a1 .bottom {
          margin: 0; } }
      body .a1 .bottom .left {
        padding: 0;
        margin: 0;
        position: relative; }
        @media screen and (max-width: 768px) {
          body .a1 .bottom .left {
            margin-bottom: 70px; } }
        body .a1 .bottom .left .back {
          max-width: 596px;
          max-height: 520px;
          box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25); }
          @media screen and (max-width: 1110px) {
            body .a1 .bottom .left .back {
              margin-left: -75px; } }
          @media screen and (max-width: 1024px) {
            body .a1 .bottom .left .back {
              max-width: 585px; } }
          @media screen and (max-width: 768px) {
            body .a1 .bottom .left .back {
              max-width: 455px; } }
        body .a1 .bottom .left .front {
          position: absolute;
          left: 65px;
          top: 70px;
          max-width: 328px;
          max-height: 607px; }
          @media screen and (max-width: 1024px) {
            body .a1 .bottom .left .front {
              max-height: 395px; } }
          @media screen and (max-width: 768px) {
            body .a1 .bottom .left .front {
              max-width: 228px; } }
          @media screen and (max-width: 480px) {
            body .a1 .bottom .left .front {
              position: relative;
              top: 0;
              margin: -100% auto 0; } }
        @media screen and (max-width: 767px) {
          body .a1 .bottom .left {
            float: none;
            clear: both;
            margin-bottom: 70px; } }
        @media screen and (max-width: 480px) {
          body .a1 .bottom .left {
            max-width: 100%;
            overflow: hidden; } }
        @media screen and (max-width: 400px) {
          body .a1 .bottom .left {
            margin-bottom: 0; } }
      body .a1 .bottom .right {
        float: right;
        margin: 160px 0 120px; }
        @media screen and (max-width: 768px) {
          body .a1 .bottom .right {
            float: none;
            clear: both;
            width: 100%;
            margin: 0 0 30px; } }
        body .a1 .bottom .right .content {
          max-width: 570px; }
          @media screen and (max-width: 768px) {
            body .a1 .bottom .right .content {
              max-width: none; } }
          body .a1 .bottom .right .content .icon {
            margin-bottom: 30px; }
            @media screen and (max-width: 768px) {
              body .a1 .bottom .right .content .icon {
                float: left;
                margin-right: 20px;
                margin-top: 8px; } }
            @media screen and (max-width: 400px) {
              body .a1 .bottom .right .content .icon {
                height: 70px; } }
            body .a1 .bottom .right .content .icon img {
              max-width: 52px;
              max-height: 52px; }
            @media screen and (max-width: 768px) {
              body .a1 .bottom .right .content .icon {
                margin-bottom: 10px; }
                body .a1 .bottom .right .content .icon img {
                  max-width: 36px;
                  max-height: 36px; } }
          body .a1 .bottom .right .content .title {
            margin-bottom: 20px; }
            @media screen and (max-width: 768px) {
              body .a1 .bottom .right .content .title {
                margin-bottom: 10px; } }
        @media screen and (max-width: 768px) {
          body .a1 .bottom .right {
            margin-top: 15px; } }
        @media screen and (max-width: 767px) {
          body .a1 .bottom .right {
            float: none;
            clear: both;
            margin: 0 auto 25px; } }
        @media screen and (max-width: 400px) {
          body .a1 .bottom .right {
            margin: 0 auto 50px; } }
  body .a2 {
    position: relative; }
    body .a2 .content {
      padding: 0 25px; }
      @media screen and (max-width: 480px) {
        body .a2 .content {
          padding: 0 15px;
          margin-top: 50px; } }
      @media screen and (max-width: 400px) {
        body .a2 .content {
          margin-top: 0px; } }
      body .a2 .content > .title {
        margin: 30px 0 15px; }
        @media screen and (max-width: 400px) {
          body .a2 .content > .title {
            margin-top: 0px; } }
    body .a2 .top {
      margin: 50px auto;
      max-width: 430px;
      position: absolute;
      left: 50%;
      right: 0;
      margin-left: -26px; }
      @media screen and (max-width: 480px) {
        body .a2 .top {
          max-width: 380px; } }
      body .a2 .top .icon {
        float: left; }
        body .a2 .top .icon img {
          max-width: 52px;
          max-height: 52px; }
      body .a2 .top .description {
        max-width: 350px;
        float: left;
        margin-left: 15px; }
        @media screen and (max-width: 480px) {
          body .a2 .top .description {
            max-width: 300px; } }
        @media screen and (max-width: 400px) {
          body .a2 .top .description {
            max-width: 260px; } }
        @media screen and (max-width: 320px) {
          body .a2 .top .description {
            max-width: 220px; } }
      @media screen and (max-width: 768px) {
        body .a2 .top {
          position: relative;
          left: 0;
          margin-left: auto;
          margin-bottom: 30px; } }
    body .a2 .bottom {
      max-width: 1200px;
      margin: 140px auto 0;
      position: relative; }
      @media screen and (max-width: 768px) {
        body .a2 .bottom {
          margin-top: 0; } }
      @media screen and (max-width: 480px) {
        body .a2 .bottom {
          max-width: 380px; } }
      body .a2 .bottom .icon {
        float: left; }
        body .a2 .bottom .icon img {
          max-width: 52px;
          max-height: 52px; }
      body .a2 .bottom .description {
        max-width: 350px;
        float: left;
        margin-left: 15px; }
        @media screen and (max-width: 1024px) {
          body .a2 .bottom .description {
            max-width: 300px; } }
      body .a2 .bottom .left {
        position: absolute;
        left: 0;
        bottom: 0; }
        body .a2 .bottom .left .icon {
          float: right; }
          @media screen and (max-width: 768px) {
            body .a2 .bottom .left .icon {
              float: left; } }
        body .a2 .bottom .left .description {
          margin-left: 0;
          margin-right: 15px; }
          @media screen and (max-width: 768px) {
            body .a2 .bottom .left .description .module-title,
            body .a2 .bottom .left .description .text {
              text-align: left; } }
          @media screen and (max-width: 768px) {
            body .a2 .bottom .left .description {
              margin-right: 0;
              margin-left: 15px; } }
          @media screen and (max-width: 400px) {
            body .a2 .bottom .left .description {
              max-width: 260px; } }
          @media screen and (max-width: 320px) {
            body .a2 .bottom .left .description {
              max-width: 220px; } }
        @media screen and (max-width: 768px) {
          body .a2 .bottom .left {
            position: relative;
            left: 0;
            margin: 0 auto 30px;
            max-width: 430px; } }
      body .a2 .bottom .right {
        position: absolute;
        right: 0;
        bottom: 0; }
        @media screen and (max-width: 768px) {
          body .a2 .bottom .right {
            position: relative;
            right: 0;
            margin: auto;
            max-width: 430px; } }
        @media screen and (max-width: 400px) {
          body .a2 .bottom .right .description {
            max-width: 260px; } }
        @media screen and (max-width: 320px) {
          body .a2 .bottom .right .description {
            max-width: 220px; } }
      body .a2 .bottom .center {
        margin: 0 400px;
        float: none; }
        body .a2 .bottom .center img {
          max-width: 400px;
          max-height: 400px; }
          @media screen and (max-width: 1024px) {
            body .a2 .bottom .center img {
              max-width: 250px;
              max-height: 250px; } }
        @media screen and (max-width: 1110px) {
          body .a2 .bottom .center {
            margin: 0 360px;
            max-width: 250px;
            max-height: 250px; } }
        @media screen and (max-width: 768px) {
          body .a2 .bottom .center {
            display: none; } }
    body .a2 .more {
      max-width: 370px;
      margin: 60px auto 30px; }
    body .a2 .contact {
      display: none;
      background: url(../img/chart_contact.svg);
      background-position: center 80%;
      background-repeat: repeat-x; }
      @media screen and (max-width: 480px) {
        body .a2 .contact {
          padding: 0 20px; } }
      body .a2 .contact .center {
        max-width: 570px;
        margin: auto; }
        @media screen and (max-width: 570px) {
          body .a2 .contact .center {
            max-width: 530px; } }
      body .a2 .contact .close {
        float: right;
        font-size: 24px;
        font-weight: 400;
        margin-right: 98px; }
        body .a2 .contact .close:hover {
          color: #3487B5; }
        @media screen and (max-width: 570px) {
          body .a2 .contact .close {
            margin-right: 20px; } }
      body .a2 .contact .title {
        margin: 30px 0 15px; }
      body .a2 .contact form {
        margin-top: 20px; }
        body .a2 .contact form .title {
          margin: 0 0 5px; }
        body .a2 .contact form .horizontal .col-xs-6:first-child {
          margin-left: 0;
          padding-left: 0; }
        body .a2 .contact form .horizontal .col-xs-6:nth-child(2) {
          margin-right: 0;
          padding-right: 0; }
        body .a2 .contact form textarea {
          height: 155px;
          resize: none; }
        body .a2 .contact form .form-group {
          margin-bottom: 20px; }
        body .a2 .contact form .send {
          margin-bottom: 75px; }
        body .a2 .contact form input {
          height: 40px; }
      body .a2 .contact .alert {
        padding: 20px;
        z-index: 2;
        width: 100%;
        max-width: 570px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        position: absolute;
        bottom: -70px;
        opacity: 0;
        transition: opacity 1s; }
        @media screen and (max-width: 480px) {
          body .a2 .contact .alert {
            max-width: 480px; } }
        @media screen and (max-width: 400px) {
          body .a2 .contact .alert {
            max-width: 320px; } }
        body .a2 .contact .alert i {
          font-size: 36px; }
        body .a2 .contact .alert .alert-text {
          display: inline-block;
          line-height: 36px;
          vertical-align: top;
          padding-left: 20px; }
        body .a2 .contact .alert.alert-success {
          background: #DFF2E1;
          border: 1px solid #60BD68;
          color: #60BD68; }
          body .a2 .contact .alert.alert-success .close {
            color: #60BD68; }
          body .a2 .contact .alert.alert-success button {
            border: none;
            background: none;
            float: right;
            color: #60BD68; }
            body .a2 .contact .alert.alert-success button:hover {
              color: #60BD68; }
        body .a2 .contact .alert.alert-danger {
          background: #FDE5E5;
          border: 1px solid #F15854;
          color: #F15854; }
          body .a2 .contact .alert.alert-danger .close {
            color: #F15854; }
          body .a2 .contact .alert.alert-danger button {
            border: none;
            background: none;
            float: right;
            color: #F15854; }
            body .a2 .contact .alert.alert-danger button:hover {
              color: #F15854; }
        body .a2 .contact .alert .icon {
          position: absolute;
          top: 0;
          left: 10px;
          font-size: 26px;
          bottom: 0;
          height: 26px;
          width: 30px;
          margin: auto;
          line-height: 30px; }
  body .a3 .border-background, body .a3 .container .vertical-border, body .a3 .container .feature .horizontal-border {
    background: #bbbdbf;
    background: -moz-radial-gradient(center, ellipse cover, #bbbdbf 0%, rgba(187, 189, 191, 0) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #bbbdbf), color-stop(100%, rgba(187, 189, 191, 0)));
    background: -webkit-radial-gradient(center, ellipse cover, #bbbdbf 0%, rgba(187, 189, 191, 0) 100%);
    background: -o-radial-gradient(center, ellipse cover, #bbbdbf 0%, rgba(187, 189, 191, 0) 100%);
    background: -ms-radial-gradient(center, ellipse cover, #bbbdbf 0%, rgba(187, 189, 191, 0) 100%);
    background: radial-gradient(ellipse at center, #bbbdbf 0%, rgba(187, 189, 191, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbdbf', endColorstr='#bbbdbf', GradientType=1 ); }
  body .a3 .title {
    margin-top: 50px;
    margin-bottom: 15px; }
  body .a3 .subtitle {
    margin-bottom: 34px; }
  body .a3 .container {
    max-width: 1170px;
    margin: auto;
    position: relative;
    height: 535px;
    padding: 0; }
    @media screen and (max-width: 768px) {
      body .a3 .container {
        height: auto; } }
    body .a3 .container.medium, body .a3 .container.small {
      display: none; }
    @media screen and (max-width: 768px) {
      body .a3 .container {
        display: none; } }
    @media screen and (max-width: 768px) {
      body .a3 .container.medium {
        display: block; } }
    @media screen and (max-width: 400px) {
      body .a3 .container.medium {
        display: none; } }
    body .a3 .container.medium .feature {
      width: calc((100% - 3px)/2); }
    body .a3 .container.medium .item-row {
      height: 700px; }
      body .a3 .container.medium .item-row .f1 .content,
      body .a3 .container.medium .item-row .f2 .content {
        margin-bottom: 0; }
      body .a3 .container.medium .item-row .f3 .content,
      body .a3 .container.medium .item-row .f4 .content {
        margin-top: -1px; }
      @media screen and (max-width: 570px) {
        body .a3 .container.medium .item-row {
          height: 790px; } }
      @media screen and (max-width: 480px) {
        body .a3 .container.medium .item-row {
          height: 900px; } }
    @media screen and (max-width: 400px) {
      body .a3 .container.small {
        display: block; } }
    body .a3 .container.small .feature {
      width: calc((100% - 2px)); }
    body .a3 .container.small .item-row {
      height: 1280px;
      padding: 0 20px; }
      body .a3 .container.small .item-row .f1 .content {
        margin-top: 30px; }
      body .a3 .container.small .item-row .f1 .content,
      body .a3 .container.small .item-row .f2 .content,
      body .a3 .container.small .item-row .f3 .content {
        margin-bottom: 0; }
      body .a3 .container.small .item-row .f2 .content,
      body .a3 .container.small .item-row .f3 .content,
      body .a3 .container.small .item-row .f4 .content {
        margin-top: -1px; }
    body .a3 .container .item-row {
      height: 435px;
      width: 100%; }
    body .a3 .container .title {
      margin-top: 30px; }
    body .a3 .container .text {
      margin-bottom: 30px; }
    body .a3 .container .vertical-border {
      width: 1px;
      height: 100%;
      float: left; }
    body .a3 .container .feature {
      float: left;
      width: calc((100% - 5px)/4);
      position: relative; }
      body .a3 .container .feature .icon {
        margin: 30px auto;
        background-repeat: no-repeat;
        background-size: 100%; }
        body .a3 .container .feature .icon.i1 {
          height: 34px;
          width: 37px;
          background-image: url(../img/icon_cron.svg); }
        body .a3 .container .feature .icon.i2 {
          height: 35px;
          width: 41px;
          background-image: url(../img/icon_hand.svg); }
        body .a3 .container .feature .icon.i3 {
          height: 34px;
          width: 27px;
          background-image: url(../img/icon_comparison.svg); }
        body .a3 .container .feature .icon.i4 {
          height: 36px;
          width: 28px;
          background-image: url(../img/icon_alert.svg); }
      body .a3 .container .feature .horizontal-border {
        width: 100%;
        height: 1px; }
      body .a3 .container .feature .content {
        margin: 30px 0;
        padding: 0 30px;
        color: #7b7b7f; }
        @media screen and (max-width: 1024px) {
          body .a3 .container .feature .content {
            padding: 0 20px; } }
        @media screen and (max-width: 768px) {
          body .a3 .container .feature .content {
            padding: 0 40px; } }
        @media screen and (max-width: 570px) {
          body .a3 .container .feature .content {
            padding: 0 20px; } }
      body .a3 .container .feature .f1 .content {
        margin-top: 70px; }
      body .a3 .container .feature .f3 .content {
        margin-top: 160px; }
      body .a3 .container .feature .f1, body .a3 .container .feature .f2, body .a3 .container .feature .f3, body .a3 .container .feature .f4 {
        cursor: default; }
        body .a3 .container .feature .f1:hover .content, body .a3 .container .feature .f2:hover .content, body .a3 .container .feature .f3:hover .content, body .a3 .container .feature .f4:hover .content {
          background-color: #3487B5;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
          color: #ffffff; }
          body .a3 .container .feature .f1:hover .content .icon.i1, body .a3 .container .feature .f2:hover .content .icon.i1, body .a3 .container .feature .f3:hover .content .icon.i1, body .a3 .container .feature .f4:hover .content .icon.i1 {
            background-image: url(../img/icon_cron_hover.svg); }
          body .a3 .container .feature .f1:hover .content .icon.i2, body .a3 .container .feature .f2:hover .content .icon.i2, body .a3 .container .feature .f3:hover .content .icon.i2, body .a3 .container .feature .f4:hover .content .icon.i2 {
            background-image: url(../img/icon_hand_hover.svg); }
          body .a3 .container .feature .f1:hover .content .icon.i3, body .a3 .container .feature .f2:hover .content .icon.i3, body .a3 .container .feature .f3:hover .content .icon.i3, body .a3 .container .feature .f4:hover .content .icon.i3 {
            background-image: url(../img/icon_comparison_hover.svg); }
          body .a3 .container .feature .f1:hover .content .icon.i4, body .a3 .container .feature .f2:hover .content .icon.i4, body .a3 .container .feature .f3:hover .content .icon.i4, body .a3 .container .feature .f4:hover .content .icon.i4 {
            background-image: url(../img/icon_alert_hover.svg); }
  body .a4 {
    position: relative;
    padding-bottom: 180px; }
    @media screen and (max-width: 480px) {
      body .a4 > .title, body .a4 > .subtitle {
        padding: 0 20px; } }
    body .a4 .container {
      max-width: 1170px;
      margin: auto;
      padding: 0 0 70px; }
      @media screen and (max-width: 1024px) {
        body .a4 .container {
          width: 100%;
          overflow: hidden; } }
      @media screen and (max-width: 400px) {
        body .a4 .container {
          margin-top: 20px; } }
    body .a4 .colapsible {
      margin: 20px 0 0 50px;
      display: none; }
      body .a4 .colapsible.s2 .title:not(:first-child) {
        margin-top: 30px; }
      body .a4 .colapsible.s3 .title:not(:first-child) {
        margin-top: 30px; }
    body .a4 .left {
      width: 50%;
      float: left;
      padding-right: 120px; }
      @media screen and (max-width: 1024px) {
        body .a4 .left {
          padding-left: 30px; } }
      @media screen and (max-width: 768px) {
        body .a4 .left {
          width: 40%;
          padding: 0 0 0 10px; } }
      @media screen and (max-width: 570px) {
        body .a4 .left {
          width: 100%;
          padding: 0 20px;
          float: none; } }
    body .a4 .right {
      width: 50%;
      float: right;
      min-height: 450px; }
      @media screen and (max-width: 768px) {
        body .a4 .right {
          width: 60%; } }
      @media screen and (max-width: 570px) {
        body .a4 .right {
          display: none; } }
    body .a4 > .title {
      margin-top: 50px;
      margin-bottom: 15px; }
    body .a4 .text {
      margin: 5px 0; }
    body .a4 .line {
      display: table;
      margin: 50px 0 0; }
      @media screen and (max-width: 768px) {
        body .a4 .line {
          margin: 30px 0 0; } }
      body .a4 .line .link {
        font-size: 12px; }
      body .a4 .line.active .icon.i1 {
        background-image: url(../img/icon_indicators_hover.svg); }
      body .a4 .line.active .icon.i2 {
        background-image: url(../img/icon_statistics_hover.svg); }
      body .a4 .line.active .icon.i3 {
        background-image: url(../img/icon_config_hover.svg); }
      body .a4 .line.active .link {
        color: #5db4e5;
        text-decoration: none;
        font-weight: 700; }
    body .a4 .icon {
      margin: 0 15px 0 0;
      background-repeat: no-repeat;
      height: 52px;
      width: 52px;
      background-size: 100%; }
      @media screen and (max-width: 768px) {
        body .a4 .icon {
          width: 36px;
          height: 36px; } }
      body .a4 .icon.i1 {
        background-image: url(../img/icon_indicators.svg); }
      body .a4 .icon.i2 {
        background-image: url(../img/icon_statistics.svg); }
      body .a4 .icon.i3 {
        background-image: url(../img/icon_config.svg); }
    body .a4 .tl,
    body .a4 .description {
      display: table-cell;
      vertical-align: top; }
    body .a4 .default {
      position: relative;
      width: 100%;
      height: 100%; }
      body .a4 .default img {
        position: absolute;
        margin-top: -25px;
        top: 0;
        right: 0;
        left: 15px;
        z-index: -1;
        max-width: 697px;
        max-height: 508px;
        transition: opacity 0.5s;
        box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25); }
        body .a4 .default img.opacity {
          opacity: 0.0; }
      body .a4 .default .scroller {
        margin: 0 0 0 100px;
        top: 0;
        overflow: auto;
        max-height: 400px; }
        @media screen and (max-width: 768px) {
          body .a4 .default .scroller {
            margin: 0 10px 0 40px; } }
        body .a4 .default .scroller.s1 {
          margin-top: 50px;
          height: 0;
          opacity: 0;
          transition: opacity 0.5s; }
          body .a4 .default .scroller.s1.active {
            height: 100%;
            opacity: 1;
            transition: opacity 0.5s; }
        body .a4 .default .scroller.s2 {
          height: 0;
          opacity: 0;
          transition: opacity 0.5s; }
          body .a4 .default .scroller.s2 .title:not(:first-child) {
            margin-top: 50px; }
          body .a4 .default .scroller.s2.active {
            height: 100%;
            opacity: 1;
            transition: opacity 0.5s; }
        body .a4 .default .scroller.s3 {
          height: 0;
          opacity: 0;
          transition: opacity 0.5s; }
          body .a4 .default .scroller.s3 .title:not(:first-child) {
            margin-top: 30px; }
          body .a4 .default .scroller.s3.active {
            height: 100%;
            opacity: 1;
            transition: opacity 0.5s; }
  body footer .bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-image: url(../img/footer.svg);
    background-position: center bottom;
    background-repeat: repeat-x;
    z-index: -2;
    width: 100%;
    height: 100%; }
  body footer .content {
    position: relative;
    max-width: 1366px;
    margin: auto; }
  body footer .logos {
    position: absolute;
    bottom: 30px;
    left: 100px; }
    body footer .logos .logo {
      float: left;
      margin-right: 30px; }
      body footer .logos .logo:first-child img {
        max-width: 76px;
        max-height: 30px; }
      body footer .logos .logo:nth-child(2) img {
        max-width: 70px;
        max-height: 30px; }
      body footer .logos .logo:last-child img {
        max-width: 45px;
        max-height: 30px; }
    @media screen and (max-width: 1024px) {
      body footer .logos {
        left: 30px; } }
    @media screen and (max-width: 640px) {
      body footer .logos {
        position: relative;
        margin: 0 auto 5px;
        width: 285px;
        height: 30px; } }
  body footer .line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 23px; }
    @media screen and (max-width: 1024px) {
      body footer .line {
        position: relative;
        float: right;
        width: 600px; } }
    @media screen and (max-width: 768px) {
      body footer .line {
        width: 500px; } }
    @media screen and (max-width: 640px) {
      body footer .line {
        width: 100%; } }
    @media screen and (max-width: 480px) {
      body footer .line {
        font-size: 10px; } }
    body footer .line .link {
      font-size: 12px; }

html:not(.svg) body > .bg {
  background: url(../img/charts.png);
  background-position: center top;
  background-repeat: repeat-x; }
html:not(.svg) .a2 .contact {
  background: url(../img/chart_contact.png);
  background-position: center bottom;
  background-repeat: repeat-x; }
html:not(.svg) .a3 .container .feature .icon.i1 {
  background-image: url(../img/icon_cron@2x.png); }
html:not(.svg) .a3 .container .feature .icon.i2 {
  background-image: url(../img/icon_hand@2x.png); }
html:not(.svg) .a3 .container .feature .icon.i3 {
  background-image: url(../img/icon_comparison@2x.png); }
html:not(.svg) .a3 .container .feature .icon.i4 {
  background-image: url(../img/icon_alert@2x.png); }
html:not(.svg) .a3 .container .feature:hover .content .icon.i1 {
  background-image: url(../img/icon_cron_hover@2x.png); }
html:not(.svg) .a3 .container .feature:hover .content .icon.i2 {
  background-image: url(../img/icon_hand_hover@2x.png); }
html:not(.svg) .a3 .container .feature:hover .content .icon.i3 {
  background-image: url(../img/icon_comparison_hover@2x.png); }
html:not(.svg) .a3 .container .feature:hover .content .icon.i4 {
  background-image: url(../img/icon_alert_hover@2x.png); }
html:not(.svg) .a4 .icon.i1 {
  background-image: url(../img/icon_indicators@2x.png); }
html:not(.svg) .a4 .icon.i2 {
  background-image: url(../img/icon_statistics@2x.png); }
html:not(.svg) .a4 .icon.i3 {
  background-image: url(../img/icon_config@2x.png); }
html:not(.svg) .a4 .line.active .icon.i1 {
  background-image: url(../img/icon_indicators_hover@2x.png); }
html:not(.svg) .a4 .line.active .icon.i2 {
  background-image: url(../img/icon_statistics_hover@2x.png); }
html:not(.svg) .a4 .line.active .icon.i3 {
  background-image: url(../img/icon_config_hover@2x.png); }
html:not(.svg) footer .bg {
  background-image: url(../img/footer@1x.png); }

/*# sourceMappingURL=main.css.map */