/* compiled by scssphp v0.0.11 on Tue, 21 May 2019 07:11:33 +0000 (0.0216s) */

.header-wrap {
  background-color: #fff;
  font-family: 'Avenir-Heavy', sans-serif; }
  @media (min-width: 881px) {
    .header-wrap #nav-mobile {
      display: none !important; } }
  .header-wrap .header {
    display: flex;
    align-items: center;
    justify-content: space-between; }
    @media (max-width: 880px) {
  .header-wrap .header .logo a {
    display: flex; } }
  @media (min-width: 1024px) {
  .header-wrap {
    height: 70px;
    border-bottom: 0.5px solid #f5f5f5; } }
  .header-wrap .header {
    border-bottom: 1px solid #f5f5f5; }
  .header-wrap .logo a {
    display: flex;
    width: 141px;
    height: 50px; }
    @media (min-width: 881px) and (max-width: 992px) {
  .header-wrap .logo a {
    width: 120px; } }
    .header-wrap .logo a img {
      width: 100%;
      height: 100%; }
  @media (min-width: 1024px) {
      .header-wrap .menu-nav-container li, .header-wrap .desktop-menu-nav-container li {
        margin-left: 10px !important; } }
    @media (min-width: 1200px) {
    .header-wrap .menu-nav-container li, .header-wrap .desktop-menu-nav-container li {
      margin-left: 41px !important; } }
    @media (max-width: 880px) {
    .header-wrap .menu-nav-container li, .header-wrap .desktop-menu-nav-container li {
      background-color: rgba(255, 255, 255, 0.9); } }
    @media (min-width: 881px) {
      .header-wrap .menu-nav-container li a, .header-wrap .desktop-menu-nav-container li a {
        border-radius: 5px; }
        .header-wrap .menu-nav-container li a:hover, .header-wrap .desktop-menu-nav-container li a:hover {
          background-color: #0066ff; } } /*#f5f5f5*/
      .header-wrap .menu-nav-container li a:focus, .header-wrap .desktop-menu-nav-container li a:focus {
        outline: none; }
    .header-wrap .menu-nav-container li a, .header-wrap .desktop-menu-nav-container li a, .header-wrap .menu-nav-container li strong, .header-wrap .desktop-menu-nav-container li strong {
      font-family: 'Avenir', sans-serif;
      font-size: 15px;
      color: #3c3c50; }
      @media (min-width: 768px) {
    .header-wrap .menu-nav-container li a.buy, .header-wrap .desktop-menu-nav-container li a.buy, .header-wrap .menu-nav-container li strong.buy, .header-wrap .desktop-menu-nav-container li strong.buy {
      border-radius: 5px;
      text-transform: uppercase;
      padding: 15px 24px;
      background-color: #1a9fe7; }
      .header-wrap .menu-nav-container li a.buy strong, .header-wrap .desktop-menu-nav-container li a.buy strong, .header-wrap .menu-nav-container li strong.buy strong, .header-wrap .desktop-menu-nav-container li strong.buy strong {
        color: #fff; }
      .header-wrap .menu-nav-container li a.buy:hover, .header-wrap .desktop-menu-nav-container li a.buy:hover, .header-wrap .menu-nav-container li strong.buy:hover, .header-wrap .desktop-menu-nav-container li strong.buy:hover {
        background-color: #1a9fe7; } }
    .header-wrap .menu-nav-container ul li a.active, .header-wrap .desktop-menu-nav-container ul li a.active {
      font-weight: 900; }
    @media (min-width: 881px) {
  .header-wrap .menu-nav-container ul li a, .header-wrap .desktop-menu-nav-container ul li a {
    padding: 10px 10px;
    border-radius: 5px; }
    .header-wrap .menu-nav-container ul li a.active, .header-wrap .desktop-menu-nav-container ul li a.active {
      background: #3d3c4f !important;
      color: #fff !important; } }
    @media (min-width: 992px) {
  .header-wrap .menu-nav-container ul li a, .header-wrap .desktop-menu-nav-container ul li a {
    padding: 7.5px 24px; } }
    .header-wrap .menu-nav-container ul li a.active, .header-wrap .desktop-menu-nav-container ul li a.active {
      font-weight: 900; }
    @media (min-width: 992px) {
  .header-wrap .menu-nav-container ul li a.active, .header-wrap .desktop-menu-nav-container ul li a.active {
    background: #3d3c4f !important;
    color: #fff !important;
    padding: 7.5px 20px;
    border-radius: 5px; } }
  @media (min-width: 881px) and (max-width: 1023px) {
  .header-wrap #nav li {
    margin-left: 10px; }
  .header-wrap.header-wrap .logo {
    width: 110px; } }

.home-banner-wrapper {
  height: 700px;
  background-size: cover;
  width: 100%;
  left: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  cursor: pointer; }
  .home-banner-wrapper .home-nav-link {
    display: block;
    height: 100%; }
  @media (min-width: 768px) and (max-width: 1440px) {
  .home-banner-wrapper {
    height: 700px; } }
  @media (min-width: 1441px) {
  .home-banner-wrapper {
    height: 820px; } }
  .home-banner-wrapper p {
    max-width: 100%; }
    @media (min-width: 768px) {
  .home-banner-wrapper p {
    max-width: 350px;
    margin: 0;
    line-height: 24px;
    font-size: 17.5px; } }
  .home-banner-wrapper .title {
    margin-bottom: 32px; }
    .home-banner-wrapper .title p {
      line-height: 1.37; }
    @media (min-width: 881px) {
  .home-banner-wrapper .title {
    margin-bottom: 30px; } }
    .home-banner-wrapper .title strong {
      font-family: 'Avenir-Heavy', sans-serif; }
  .home-banner-wrapper .mac-image {
    width: 80%;
    position: absolute;
    bottom: 10px;
    right: -40%; }
  .home-banner-wrapper .head-main-title {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: left;
    height: 100%;
    font-family: Avenir, sans-serif !important; }
    @media (max-width: 767px) {
  .home-banner-wrapper .head-main-title p {
    max-width: 70%;
    margin: 0;
    font-size: 17.5px; } }
    .home-banner-wrapper .head-main-title .title, .home-banner-wrapper .head-main-title .subtitle {
      font-family: Avenir, sans-serif !important; }
  .home-banner-wrapper .app-store-link {
    position: absolute;
    width: 220px;
    bottom: 8%;
    left: 25px; }

.iphone-section-wrapper .head-main-title h1.title, .iphone-section-wrapper .head-main-title h1.title strong, .iphone-section-wrapper .head-main-title h1.title span, .iphone-section-wrapper .head-main-title p {
  color: #000;
  text-shadow: none; }

.user-container {
  background-color: #f5f5f5;
  padding: 20px 0; }
  .user-container .user-block {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    height: 85px;
    background-size: cover;
    padding: 0 35px;
    background-color: #fff;
    border-radius: 15px;
    justify-content: space-between; }
    @media (max-width: 767px) {
  .user-container .user-block {
    height: 85px; } }
    .user-container .user-block img {
      width: 40px;
      height: 33px; }
    .user-container .user-block span {
      color: #3c3c50;
      font-weight: 700;
      letter-spacing: 1px;
      font-size: 20px;
      width: 100%;
      text-align: center; }
  .user-container .tutorials-block {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    cursor: pointer; }
    .user-container .tutorials-block span {
      color: #3c3c50;
      font-weight: 700;
      letter-spacing: 2px;
      font-size: 20px;
      display: block;
      margin-bottom: 20px;
      text-align: center; }
    .user-container .tutorials-block .tutorials-images {
      display: flex;
      align-items: center;
      justify-content: space-evenly; }
    .user-container .tutorials-block .tutorials-images .tutorials-icons {
      display: block;
      width: 31%;
      pointer-events: none;
      pointer-events: none;
      margin-right: 10px; }
      .user-container .tutorials-block .tutorials-images .tutorials-icons:last-child {
        margin-right: 0px; }
      .user-container .tutorials-block .tutorials-images .tutorials-icons img {
        width: 100%; }
  @media (min-width: 768px) {
    .user-container .user-wrapper {
      display: flex;
      justify-content: space-between; }
      .user-container .user-wrapper .user-guide-block, .user-container .user-wrapper .tutorials-block {
        height: 295px; }
        .user-container .user-wrapper .user-guide-block .user-block, .user-container .user-wrapper .tutorials-block .user-block {
          height: 85px; }
      .user-container .user-wrapper .user-guide-block {
        width: 38%; }
      .user-container .user-wrapper .tutorials-block {
        width: 60%; } }