* {box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0;} html, body {height: 100%; margin: 0;} .navbar__top {position: fixed; background: #142467; display: flex; top: 0; left: 0; width: 100%; padding: 10px 20px; justify-content: space-between; align-items: center; flex-wrap: nowrap; z-index: 99;} .page-wrapper {min-height: 100vh; display: flex; flex-direction: column; padding-top: 60px;} .main-content {flex: 1;} .navbar__account {display: none; width: 40px; height: 40px; font-size: 28px; align-items: center; justify-content: center; background-color: transparent; border: 0; color: #fff; cursor: pointer;} .navbar__brand {text-decoration: none; white-space: nowrap; position: relative; display: flex; height: 40px; font-size: 32px; line-height: 40px; font-weight: bold; color: #fff;} .navbar__burger {display: none; width: 40px; height: 40px; font-size: 28px; align-items: center; justify-content: center; background-color: transparent; border: 0; color: #fff; cursor: pointer; margin: 0; padding: 0; box-sizing: border-box;} .navbar__menu ul {margin: 0; padding: 0; display: flex;} .navbar__menu.open {position: fixed; display: block; width: 100%; height: 100%; background-color: #142467; top: 60px; left: 0; text-align: center;} .navbar__menu.open ul {display: block;} .navbar__menu.open ul li {display: block;} .navbar__menu.open ul li a {font-size: 20px; padding: 20px 0;} .navbar__menu li {list-style: none; display: inline-block; line-height: 40px;} .navbar__menu li a {text-decoration: none; color: #fff; padding: 10px 20px; display: block; font-size: 16px; line-height: 16px; border-radius: 3px;} .navbar__menu li a i {margin-right: 8px;} .navbar__menu li a:hover {background: rgb(130, 130, 229);} .navbar__btn {display: flex; height: 40px;} .navbar__btn a {position: relative; display: flex; outline: 0; font-size: 16px; font-weight: 500; line-height: 40px; padding: 0 30px; margin-right: 10px; height: 100%; text-decoration: none; color: #fff; cursor: pointer; justify-content: center; align-content: center;} .navbar__btn.open {position: fixed; display: block; background-color: #142467; top: 60px; left: 0; padding: 20px; width: 100%; height: 100%; text-align: center; justify-content: center;} .navbar__btn.open a {position: relative; display: block; font-size: 20px; height: 60px; padding: 0 20px; line-height: 60px; margin-top: 10px;} .btn-login {background-color: #4c549e; border: 1px solid #6161c6;} .btn-login:hover {background: #434b8c;} .btn-danger {background-color: #ff6d4b; border: 1px solid transparent;} .btn-danger:hover {background-color: #ff592f;} .container {width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; margin-right: auto; margin-left: auto;} @media (min-width: 576px) {.container {max-width: 540px; } } @media (min-width: 768px) {.container {max-width: 720px; } } @media (min-width: 992px) {.container {max-width: 960px; } } @media (min-width: 1280px) {.container {max-width: 1200px; } } @media (max-width: 900px) {.navbar__top {width: 100vw; } .navbar__btn {display: none; } .navbar__account {display: flex; } } @media (max-width: 720px) {.navbar__top {width: 100vw; } .navbar__btn, .navbar__menu {display: none; } .navbar__account, .navbar__burger {display: flex; } } .section-primary {position: relative; display: block; width: 100%; height: 100%; padding-top: 60px;} .container {display: block; width: 100%;} .primary-download {max-width: 860px; margin: 0 auto; text-align: center; padding: 20px 0;} .primary-download .logo {display: block; width: 96px; height: 96px; background-image: url(/static/images/leaf.png); background-repeat: no-repeat; margin: 0 auto;} .primary-download .title {color: #4D4D4D; font-size: 36px; margin-bottom: 30px;} ul.download-menu {list-style: none;} ul.download-menu li.download-item {list-style-type: none;} .download-menu {display: flex; flex-wrap: wrap; justify-content: center;} .download-item {display: inline-block; margin: 0 10px;} .download-item .download-title {display: flex; width: 100%; margin: 10px 0; justify-content: center; align-items: center; text-align: center;} .download-item .download-title i {font-size: 30px; margin-right: 10px;} .download-item .download-title span {font-size: 18px;} .download-item .download-btn {display: block; text-decoration: none; padding: 16px 28px; background-color: #25D366; color: #000;} .download-item .download-btn span {font-size: 16px;} .download-item .download-btn i {font-size: 16px;} .fa-windows {color: #00A2ED;} .fa-apple {color: #A2AAAD;} .fa-android {color: #32DE84;} .fa-skype {color: #00aff0;} .fa-chrome {color: #2E7CEE;} .other-download {max-width: 680px; margin: 0 auto; text-align: center; align-items: center; padding: 20px 0; color: #7c7c7c;} .other-download-item {display: flex; text-align: center; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 20px;} .other-download-title {display: inline-block; font-size: 16px; padding: 10px; width: 150px;} .other-download-link {display: inline-block;} .other-download-link a {display: inline-block; padding: 10px; margin: 5px; text-decoration: none; background-color: #7f7f7f; color: #fff; font-size: 13px; cursor: pointer;}