/* @font-face {
  font-family: HelveticaNeue;
  src: url(/landing_media/fonts/HelveticaNeueLight.ttf);
} */
body {
  font-size: 14px;
  line-height: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #333333
}

/* ------------ HEADER ------------ */
.section--header{
  width: 100%;
  overflow: hidden;
}

/* Left */
.section--header-container{
  padding: 0px;
}
.section--header-left-container {
  position: relative;
}

.bg-header-left-container {
  background-color:#517FD8;
}

.section-center-right-container{
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Right */
.section--header-right-container{
  margin-top: 48px;
  margin-left: 24px;
  margin-right: 24px;
  margin-bottom: 48px;
}
.section--header-wrap-text{
  padding-right: 64px;
  /* padding-left: 40px; */
}
.section--header-wrap-sub-text{
  /* color: #fff; */
  padding-right: 64px;
  /* padding-left: 40px; */
  padding-top: 48px;
  /* padding-left: 16px; */
}
.section--header-title{
  font-size: 30px;
  font-weight: bold;
  line-height: 32px;
}
.section--header-sub-title{
  font-size: 24px;
  font-weight: bold;
  line-height: 20px;
}
.section--header-text{
  font-size: 16px;
  line-height: 20px;
  margin-top: 16px;
}

.section--header-small-text{
  font-size: 14px;
  line-height: 20px;
  margin-top: 16px;
}

.section--header-icon-download{
  display: flex;
  padding-top: 12px;
}

.section--header-above-icon-download{
  display: flex;
  padding-top: 12px;
  font-size: medium;
  font-style: italic;
  font-weight: bold;
  color: #21c7e4;
}

.section--top-right-circle-guie {
  width: 305px;
  height: 305px;

  background: #5C82D6;
  border-radius: 50%;

  position: absolute;
  /* top: 150px; */
  left: 50%;
  transform: translate(-20%, 30%);
  z-index: -9999;
}

/*------------ REVIEW GROUP ------------*/
.group-review{
  margin-top: 24px;
}
.group-review-icon{
  margin: 0px 16px 0px 16px;
  display: flex;
  align-items: flex-end;
}
.group-review-icon img{
  margin: 1px;
  width: 16px;
}
.group-review-icon img:first-child{
  margin: 0px;
}
/* .group-review-wrap-text{
  padding-left: 40px;
} */
.group-review-text-time{
  margin: 6px 20px 0px 20px;
  font-size: 12px;
  line-height: 20px;
  color: #828282
}
.group-review-text{
  margin: 6px 20px 0px 20px;
  font-size: 14px;
  line-height: 20px;
}

/*------------ DOWNLOAD STEP ------------*/
.section--download{
  width: 100%;
}
.section--download-container{
  padding: 5%;
  background-color: #F7F8FA;
}
.section--download-step{
  font-size: 24px;
  padding: 8px 12px;
  border-radius: 50%;
  color: #fff;
  background-color: #2B72C2;
  display: inline-block;
}
.section--download-wrap-text{
  padding-left: 60px;
}
.section--download-text{
  color: #333333;
  font-size: 16px;
  line-height: 20px;
  margin: 0px;
  margin-top: 24px;
}

/* ------------ TOP ------------ */
.section--top {
  width: 100%;
  overflow-x: hidden;
}
.section--top-container {
  padding: 5% 5% 100px 5%;
}

/* Top left */
.section--top-left-container{
  margin-left: 60px;
}
.section--top-left-title {
  padding-top: 24px;
  font-size: 16px;
  line-height: 20px;
}
.section--top-left-title .title-top{
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 56px;
}
.section--top-left-title p {
  margin:0
}
.section--top-link {
  padding-top: 40px;
  padding-left: 60px;
}
.section--top-link a {
  text-decoration: underline;
  color: #2d9cdb;
}
.section--top-icon-download{
  display: flex;
  /* justify-content: center; */
  padding-top: 24px;
  padding-left: 16px
}
/* Timeline top left */
.timeline {
  list-style-type: none;
  position: relative;
  padding-right: 16px;
}
.timeline:before {
  width: 1px;
  height: 100%;

  background: #f1f1f1;
  display: inline-block;
  position: absolute;

  left: 28px;
  content: " ";
  z-index: 400;
}
.timeline > li {
  margin: 20px 0;
  padding-left: 20px;
}
.timeline > li > .timeline-badge {
  width: 24px;
  height: 24px;

  color: #fff;
  background-color: #f68800;

  text-align: center;
  display: inline-block;
  position: absolute;

  font-size: 16px;
  line-height: 24px;
  left: 16px;
  z-index: 400;
  border-radius: 50%;
}

.timeline > li > .timeline-panel {
  margin-top: 44px;
}
.timeline > li > .timeline-panel a{
  color:#000
}

/* Top right */
  .section--top-right-title {
    display: none;
  }
.section--top-right-container {
  position: relative;
}

.section--top-right-wrap-image {
  margin-top: 35px;
  position: relative;
  display: flex;
  justify-content: center;
}

.section--top-left-wrap-image {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  height: 100%;
}

.section--top-left-wrap-image-content{
  width:80%;
}
.section--top-left-wrap-logo-content{
  width:60%;
  margin-bottom: -40px;
}
.section--top-right-wrap-image-frame {
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translate(-50%, 0);
}

.section--top-right-circle-intro {
  width: 305px;
  height: 305px;

  background: #2B72C2;
  border-radius: 50%;

  position: absolute;
  /* top: 150px; */
  left: 50%;
  transform: translate(-20%, 50%);
  z-index: -9999;
}

/* ------------ BOTTOM ------------ */
.section--bottom {
  background-color: #F7F8FA;
  color: #333333;
}

.section--bottom a {
  color: #333333;
}

.section--bottom-container {
  padding: 40px 5% 20px 5%;
  position: relative;
}
.section--bottom-logo-small{
  position: absolute;
  top: 12px;
  right: 10%;
}
.section--bottom-faq {
  font-size: 40px;
  font-weight: bold;
  line-height: 49px;
  margin-left: 60px;
}
.section--bottom-question {
  width: 80%;
  margin-top: 24px;
  margin-left: 60px;
}
.section--bottom-question-title {
  font-size: 18px;
  font-weight: bold;
}
.section--bottom-question-answer {
  margin-top: 8px;
  margin-bottom: 0px;
}
.section--bottom-copy-right {
  margin-top: 80px;
  margin-left: 60px;
}

@media (max-width: 576px) {
  /* ------------ HEADER ------------ */
  .section--header-icon-download{
    display: flex;
    padding-top: 8px;
    padding-left: 0px;
    justify-content: center
  }

  .section--header-above-icon-download{
    display: flex;
    padding-top: 0px;
    padding-left: 0px;
    justify-content: center;
    font-size: medium;
    font-style: italic;
    font-weight: bold;
    color: #21c7e4;
  }


/*------------ DOWNLOAD STEP ------------*/  
  .section--download-wrap-text{
    padding-left: 12px;
    margin-bottom: 36px;
  }
  .section--download-text{
    margin-top: 12px;
  }
  /* ------------ TOP ------------ */
  /* Top left */
  .section--top-left-container{
    margin-left: 12px;
  }
  .section--top-left-title {
    padding: 56px 16px 0px 16px;
    display: none;
  }
  .section--header-wrap-text{
    padding: 0px;
  }
  .section--header-wrap-sub-text{
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 48px;
  }
  .section--top-right-wrap-image {
    margin-top: 35px;
    margin-bottom: 56px;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .section--top-right-wrap-image-frame {
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translate(-50%, 0);
  }
  .section--top-link {
    padding-top: 40px;
    padding-left: 16px;
    text-align: center;
  }

  /* Top left */
  .section--top-right-title {
    padding-left: 12px;
    font-size: 16px;
    line-height: 20px;
    display: inline-block;
  }
  .section--top-right-title .title-top{
    font-size: 16px;
    line-height: 20px;
    /* margin-bottom: 56px; */
  }
  .section--top-right-title p {
    margin:0
  }
  /* ------------ BOTTOM ------------ */
  .section--bottom-container {
    padding: 20px 32px 20px 32px;
  }
  .section--bottom-logo-small{
    position: absolute;
    top: 15px;
    right: 32px;
  }
  .section--bottom-question {
    width: 100%;
    margin-top: 24px;
    margin-left: 0px;
  }
  .section--bottom-copy-right {
    margin-left: 0px;
  }
  .section--bottom-faq {
    margin-left: 0px;
  }
}