@font-face {
    font-family: 'Nunito-Bold';
    src: url('/static/fonts/Nunito-Bold.ttf?ca343abc4139') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito-Light';
    src: url('/static/fonts/Nunito-Light.ttf?ca343abc4139') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito-Regular';
    src: url('/static/fonts/Nunito-Regular.ttf?ca343abc4139') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito-Italic';
    src: url('/static/fonts/Nunito-Italic.ttf?ca343abc4139') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quantico-Bold';
    src: url('/static/fonts/Quantico-Bold.ttf?a5c2795c6c61') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quantico-BoldItalic';
    src: url('/static/fonts/Quantico-BoldItalic.ttf?a5c2795c6c61') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quantico-Italic';
    src: url('/static/fonts/Quantico-Italic.ttf?a5c2795c6c61') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quantico-Regular';
    src: url('/static/fonts/Quantico-Regular.ttf?a5c2795c6c61') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-Black';
    src: url('/static/fonts/Calibre-Black.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-BlackItalic';
    src: url('/static/fonts/Calibre-BlackItalic.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-Bold';
    src: url('/static/fonts/Calibre-Bold.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-BoldItalic';
    src: url('/static/fonts/Calibre-BoldItalic.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-Light';
    src: url('/static/fonts/Calibre-Light.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-LightItalic';
    src: url('/static/fonts/Calibre-LightItalic.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-Medium';
    src: url('/static/fonts/Calibre-Medium.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-MediumItalic';
    src: url('/static/fonts/Calibre-MediumItalic.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-Regular';
    src: url('/static/fonts/Calibre-Regular.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-RegularItalic';
    src: url('/static/fonts/Calibre-RegularItalic.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-Semibold';
    src: url('/static/fonts/Calibre-Semibold.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-SemiboldItalic';
    src: url('/static/fonts/Calibre-SemiboldItalic.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-Thin';
    src: url('/static/fonts/Calibre-Thin.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibre-ThinItalic';
    src: url('/static/fonts/Calibre-ThinItalic.otf?0b071d037da2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Font redeclared due to wkhtmltopdf bug */

@font-face {
    font-family: 'BOLD';
    src: url('/static/fonts/Calibre-Bold.otf?0b071d037da2') format('opentype');
    font-weight: bold;
    font-style: normal;
}

html {
  overflow-x: hidden; }

body {
  font: 14px/22px "Calibre-Regular";
  color: #1D1C20;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box; }

img {
  width: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Calibre-Bold"; }

a {
  text-decoration: none;
  font-family: "Calibre-Regular";
  color: #ED182D; }
  a:hover {
    color: #ED182D; }

input:focus, textarea:focus, select:focus {
  outline: none; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; }

.bg-black {
  background: black; }
  .bg-black:before {
    display: none; }

.box-container {
  padding: 0 80px;
  box-sizing: border-box; }

.text-align-center {
  text-align: center; }
  .text-align-center .button {
    margin: 0 auto; }

.mt-0 {
  margin-top: 0 !important; }

.mb-20 {
  margin-bottom: 20px; }

.mb-60 {
  margin-bottom: 60px; }

.mt-50 {
  margin-top: 50px; }

.mt-80 {
  margin-top: 80px; }

.mt-100 {
  margin-top: 100px; }

a.back {
  font: 24px/28px "Calibre-Bold";
  color: #1D1C20;
  margin-bottom: 50px; }
  a.back span {
    position: relative;
    top: 2px; }
  a.back svg {
    margin-right: 20px; }

.payments-page .subscribe-wrapper {
  position: relative;
  top: 0;
  margin-top: 0; }

.gray-color {
  color: #9D9D9D; }

.subscribe-wrapper.payment-section .price {
  font: 16px/20px "Calibre-Regular";
  border-bottom: 1px solid #DDDDDD;
  margin-bottom: 20px;
  padding-bottom: 20px; }

.subscribe-wrapper.payment-section .price.less-border {
  border: none;
  margin-bottom: 0;
  padding-bottom: 0; }

.subscribe-wrapper.payment-section .price.add-margin-top {
  margin-top: 8px; }

.subscribe-wrapper.payment-section .price.align-top {
  display: flex;
  align-items: flex-start; }

.subscribe-wrapper.payment-section .hidden {
  display: none; }

.subscribe-wrapper.payment-section .grand_total {
  font: 20px/24px "Calibre-Medium"; }

.subscribe-wrapper.payment-section .price span:nth-child(2) {
  text-align: right; }

.subscribe-wrapper.payment-section .ori-price {
  font-size: 14px;
  line-height: 16.8px; }

.block {
  display: block; }

.flex-center, .division-logo .gradient, footer .logo {
  display: flex;
  align-items: center;
  justify-content: center; }

.flex-top, footer .nav {
  display: flex;
  align-items: start;
  justify-content: center; }

.flex-row {
  flex-direction: row; }

.flex-column {
  flex-direction: column; }

.mobile {
  display: none; }

.row {
  display: flex;
  flex-wrap: wrap; }

.show {
  display: block; }

.hide {
  display: none; }

.red-color {
  color: #ED182D; }

.blue-color {
  color: #4AE1D2; }

.button {
  font: 20px/20px "Calibre-Medium";
  padding: 19px 35px 13px;
  border-radius: 20px;
  background: #ED182D;
  color: white;
  text-align: center;
  box-sizing: border-box;
  display: table;
  border: none;
  cursor: pointer; }
  .button:hover {
    color: white;
    background: #ED182D; }
  .button.disabled {
    cursor: not-allowed;
    pointer-events: none;
    background: #DDDDDD; }
  .button.full {
    width: 100%;
    margin-right: 20px; }
    .button.full:last-child {
      margin-left: 0; }
  .button.white {
    background: white;
    color: #ED182D;
    border: 1px solid #ED182D; }
    .button.white:hover {
      color: #ED182D;
      background: white; }
  .button.gray {
    background: #F2F2F2;
    color: #1D1C20;
    border: 1px solid #F2F2F2; }
    .button.gray:hover {
      color: #1D1C20;
      background: #F2F2F2; }
  .button.mt-20 {
    margin-top: 20px; }
  .button.small {
    padding: 14px 21px 9px; }
  .button.subscribed {
    background: #1d1c20cc;
    cursor: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; }
    .button.subscribed img {
      width: 16px;
      margin-top: -4px; }
  .button svg {
    position: relative;
    top: -3px;
    margin-right: 5px; }
  .button.animated {
    max-height: 64px;
    overflow: hidden;
    transition: max-height 0.25s ease-in-out, padding 0.25s ease-in-out; }
    .button.animated.hidden {
      max-height: 0px;
      padding-top: 0px;
      padding-bottom: 0px; }
  .button.middle-font {
    font: 16px/18px "Calibre-Regular";
    display: inline-flex;
    padding: 13px 21px 8px; }
  .button.less-border {
    border: none;
    padding: 0; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px; }
  .pagination a, .pagination a:link {
    font: 15px/20px "Calibre-Bold";
    color: #1D1C20;
    text-transform: uppercase; }
  .pagination a {
    margin-right: 20px; }
    .pagination a:last-child {
      margin-right: 0; }
  .pagination span {
    font-size: 10px;
    position: relative;
    top: -2px; }
  .pagination a:hover {
    color: #ED182D; }

.sidebar {
  font: 20px/24px "Calibre-Regular";
  background: white;
  border: 1px solid #DDDDDD;
  box-sizing: border-box;
  border-radius: 16px; }
  .sidebar a {
    color: #1D1C20;
    border-bottom: 1px solid #DDDDDD;
    padding: 22px 25px 15px;
    position: relative; }
    .sidebar a:last-child {
      border-bottom: none; }
    .sidebar a.active, .sidebar a:hover {
      font-family: "Calibre-Medium"; }
    .sidebar a.active:before, .sidebar a:hover:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0%, -50%);
      width: 100%;
      height: 24px;
      border-left: 4px solid #ED182D; }
    .sidebar a.logout {
      color: #9D9D9D; }
    .sidebar a.logout:hover {
      font-family: "Calibre-Regular"; }
    .sidebar a.logout:hover:before {
      display: none; }
  .sidebar svg {
    position: relative;
    top: -3px;
    margin-right: 8px; }

.header-container {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background: white; }

.vertical-middle {
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center; }

.vertical-middle-left {
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: left; }

.vertical-middle-right {
  display: flex;
  align-items: center;
  justify-content: flex-end; }
  .vertical-middle-right.top {
    align-self: flex-start; }
  .vertical-middle-right.bottom {
    align-self: flex-end; }

.space-between {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.scores {
  background: white;
  border: 1px solid #F2F2F2;
  box-sizing: border-box;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 30px;
  max-height: 256px;
  overflow: hidden;
  transition: max-height 0.30s ease-in-out, padding 0.25s ease-in-out, margin-bottom 0.40s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out; }
  .scores .score {
    font: 40px/52px "Calibre-Bold";
    border: 6px solid #4AE1D2;
    border-radius: 50%;
    min-width: 87px;
    min-height: 87px;
    margin-right: 20px; }
  .scores .score.red {
    border: 6px solid #ED182D; }
  .scores .points {
    position: relative;
    top: 5px; }
  .scores .desc {
    width: 100%; }
  .scores h2 {
    font: 21px/28px "Calibre-Regular";
    margin: 0 0 10px; }
  .scores.hidden {
    max-height: 0px;
    padding: 0px 20px;
    margin-bottom: -30px;
    box-shadow: none;
    border: 1px solid transparent; }
  .scores.clear .button-action {
    display: none; }
  .scores.clear h2 {
    margin: 0; }

.download-template-pdf {
  -webkit-print-color-adjust: exact;
  -webkit-filter: blur(0);
  border: none;
  box-shadow: none;
  padding: 0px !important;
  margin: 0px;
  max-width: unset;
  overflow: visible; }

.certificates-wrapper.download-template {
  background: transparent;
  min-width: 1950px;
  margin: 0 auto;
  padding: 0px; }
  .certificates-wrapper.download-template img {
    max-width: 438px;
    margin-bottom: 75px; }
  .certificates-wrapper.download-template h2 {
    font: 96px/108px 'BOLD';
    margin: 0 0 60px;
    font-weight: bold; }
  .certificates-wrapper.download-template h3 {
    font: 60px/75px "Calibre-Medium";
    margin: 0 0 45px; }
  .certificates-wrapper.download-template h4 {
    font: italic 48px/54px "Calibre-RegularItalic";
    margin: 0 0 24px;
    color: #9D9D9D;
    display: inline-block; }
  .certificates-wrapper.download-template .info h4 {
    margin-bottom: 15px; }
  .certificates-wrapper.download-template .desc {
    font: 48px/60px "Calibre-Medium";
    margin: 0 0 8px; }
  .certificates-wrapper.download-template .instructor-name {
    font: 32px/48px "Calibre-Regular";
    color: #9D9D9D;
    display: inline-block;
    margin: 0 0 60px; }
  .certificates-wrapper.download-template .date {
    font: 42px/48px "Calibre-Regular";
    margin: 0;
    color: #ED182D; }
  .certificates-wrapper.download-template .box {
    padding: 120px 90px; }
  .certificates-wrapper.download-template .box-wrapper {
    padding: 50px; }

.certificates-wrapper {
  background: #F2F2F2;
  border-radius: 16px;
  padding: 20px;
  text-align: center; }
  .certificates-wrapper h2 {
    font: 15px/18px "Calibre-Bold";
    margin: 0 0 20px; }
  .certificates-wrapper h3 {
    font: 9px/12px "Calibre-Medium";
    margin: 0 0 5px; }
  .certificates-wrapper h4 {
    font: italic 7px/12px "Calibre-Regular";
    margin: 0 0 2px;
    color: #9D9D9D; }
  .certificates-wrapper .desc {
    font: 7px/8px "Calibre-Medium";
    margin: 0; }
  .certificates-wrapper .date {
    font: 7px/12px "Calibre-Regular";
    margin: 0;
    color: #ED182D; }
  .certificates-wrapper .by {
    font: 6px/12px "Calibre-Regular";
    margin: 0 0 5px;
    color: #9D9D9D; }
  .certificates-wrapper .box-wrapper {
    padding: 20px;
    background: url("/static/images/academy/certificate_bg_top.png?f752aefa46ac") no-repeat top left, url("/static/images/academy/certificate_bg_bottom.png?f752aefa46ac") no-repeat bottom left white;
    background-size: contain; }
  .certificates-wrapper .box {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0px 3.86508px 11.5952px rgba(0, 0, 0, 0.08);
    padding: 10px; }
  .certificates-wrapper img {
    max-width: 71px;
    margin-bottom: 10px; }
  .certificates-wrapper .download {
    margin: 20px 0 0;
    font: 16px/18px "Calibre-Regular";
    color: #1D1C20;
    text-decoration: underline; }
  .certificates-wrapper svg {
    position: relative;
    top: -3px;
    margin-right: 5px; }

header {
  display: grid;
  grid-template-columns: 150px 1fr 475px; }
  header.container {
    padding: 14px 0; }
  header .left {
    display: flex;
    justify-content: flex-end; }
  header .right {
    display: flex;
    justify-content: flex-end;
    align-items: center; }
  header .logo img {
    width: auto;
    height: 48px; }
  header .hamburger {
    display: none; }
  header ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0; }
    header ul li {
      margin: 15px 20px 9px;
      position: relative; }
    header ul li:last-child {
      margin-left: 110px; }
    header ul ul li {
      margin: 0 20px; }
  header .teams svg {
    position: relative;
    top: -3px; }
  header .dropdown-box li, header .dropdown-box li:last-child {
    margin-left: 20px; }
  header a {
    color: #1D1C20;
    font: 20px/24px "Calibre-Medium";
    display: flex;
    align-items: center;
    gap: 8px; }
    header a:hover {
      color: #ED182D; }
  header .dropdown-menu {
    position: relative; }
  header .dropdown-menu svg {
    position: relative;
    top: -3px; }
  header .dropdown-menu:hover .dropdown-box {
    opacity: 1;
    visibility: visible; }
  header .right .dropdown-menu .dropdown-box {
    left: auto;
    right: 0; }
  header .teams svg.rotate {
    transform: rotate(180deg); }
  header .mobile {
    display: none; }
  header .sign-in {
    color: #ED182D;
    margin-top: 5px; }

.main {
  padding-bottom: 50px; }
  .main.curriculums-page {
    overflow-x: hidden; }

footer {
  padding: 42px 0;
  background: #f7f7f8; }
  footer .container {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 0.8fr; }
  footer .logo img {
    height: auto;
    width: 120px; }
  footer .copyright {
    font: 12px/16px "Calibre-Regular";
    color: #1D1C20;
    margin-top: 30px; }
  footer .linktree {
    display: flex;
    flex-direction: column; }
    footer .linktree .wrapper img {
      width: 28px;
      margin-right: 12px; }
  footer ul {
    width: 100%;
    grid-gap: 14px;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0; }
  footer li {
    margin-bottom: 10px; }
    footer li:last-child {
      margin-bottom: 0; }
  footer h2 {
    font: 18px/25px "Calibre-Bold";
    color: #1D1C20;
    margin: 0 0 10px; }
  footer a {
    font: 18px/25px "Calibre-Regular";
    color: #9D9D9D; }
    footer a:hover {
      color: #ED182D; }

.back-url {
  font: 20px/25px "Calibre-Regular";
  color: #1D1C20;
  position: relative;
  left: -6px;
  margin: 0 0 20px; }
  .back-url svg {
    position: relative;
    top: -4px;
    margin-right: 5px; }

.order_history_detail_wrapper {
  background: white;
  border: 1px solid #DDDDDD;
  box-sizing: border-box;
  border-radius: 16px; }

a.underline {
  text-decoration: underline; }

a.italic {
  font-style: italic; }

.seperator {
  padding-bottom: 20px; }

.order-history-box {
  border-bottom: 1px solid #DDDDDD;
  padding: 20px 20px 10px;
  width: 100%;
  box-sizing: border-box; }
  .order-history-box:last-child {
    border-bottom: none; }
  .order-history-box div.columns {
    margin: 0 4% 0 0; }
    .order-history-box div.columns:nth-child(2n+2) {
      margin-right: 0; }
    .order-history-box div.columns:last-child {
      margin-right: 0; }
  .order-history-box .label {
    font: 16px/20px "Calibre-Medium";
    color: #9D9D9D;
    margin-bottom: 5px; }
    .order-history-box .label.black {
      color: #1D1C20; }
    .order-history-box .label.bold {
      font-weight: "Calibre-Bold"; }
  .order-history-box.subtotal .label {
    margin-bottom: 10px; }
  .order-history-box h2 {
    font: 20px/25px "Calibre-Bold";
    margin: 0; }
    .order-history-box h2 a {
      font: 20px/25px "Calibre-Bold";
      color: #1D1C20; }
  .order-history-box a {
    font: 16px/18px "Calibre-Regular"; }
  .order-history-box a .text {
    font: 16px/18px "Calibre-Regular";
    color: #1D1C20;
    text-decoration: underline;
    position: relative;
    top: 2px;
    margin-left: 10px; }
  .order-history-box a .arrow {
    transform: rotate(180deg); }
  .order-history-box a.active .arrow {
    transform: rotate(0deg); }
  .order-history-box a.active + .payment-dropdown-box {
    display: block; }
  .order-history-box .duplicate {
    font: 16px/18px "Calibre-RegularItalic";
    color: #ED182D; }
  .order-history-box .order-status {
    font: 14px/16px "Calibre-Regular";
    padding: 10px 15px 5px;
    box-sizing: border-box;
    border-radius: 20px;
    display: table;
    margin-bottom: 10px; }
  .order-history-box .order-status.red-color {
    color: #ED182D;
    background: #FFE7E9;
    border: 0.9px solid #ED182D; }
  .order-history-box .order-status.blue-color {
    color: #4AE1D2;
    background: #E7FFFD;
    border: 0.9px solid #4AE1D2; }
  .order-history-box .order-status.gray-color {
    color: #9D9D9D;
    background: #C4C4C4;
    border: 0.9px solid #9D9D9D; }
  .order-history-box .button {
    margin-top: 10px; }
  .order-history-box .payment-dropdown {
    margin-bottom: 10px; }
  .order-history-box .button-container {
    margin-bottom: 20px; }
  .order-history-box .button-container a {
    margin-top: 0;
    margin-right: 10px; }
    .order-history-box .button-container a:last-child {
      margin-right: 0; }
  .order-history-box .list form {
    display: inline-block; }
  .order-history-box .help {
    margin-top: 5px;
    width: 100%; }
    .order-history-box .help svg {
      position: relative;
      top: -3px;
      margin-right: 5px; }
  .order-history-box .help a {
    font: 16px/20px "Calibre-Regular";
    text-decoration: underline;
    margin-top: 8px; }
  .order-history-box .ori-price {
    font: 16px/20px "Calibre-Regular";
    text-decoration: line-through;
    color: #9D9D9D;
    margin-left: 5px; }

.payment-dropdown-box {
  padding-top: 10px;
  display: none; }
  .payment-dropdown-box a {
    font: 16px/18px "Calibre-Medium";
    color: #9D9D9D; }
  .payment-dropdown-box .payment-category .active {
    color: #1D1C20;
    font-family: "Calibre-Medium";
    border-bottom: 4px solid #1D1C20; }

.payment-content {
  font: 18px/22px "Calibre-Regular";
  display: none; }
  .payment-content.active {
    display: block; }
  .payment-content ul, .payment-content ol {
    font: 18px/22px "Calibre-Regular";
    padding-left: 15px;
    margin-bottom: 0; }
  .payment-content li {
    margin-bottom: 8px; }
    .payment-content li:last-child {
      margin-bottom: 0; }
  .payment-content img {
    height: auto;
    width: 240px;
    margin-top: 12px; }

.order_history_wrapper .head {
  font: 16px/20px "Calibre-Medium";
  color: #9D9D9D;
  border-bottom: 1px solid #DDDDDD;
  padding-bottom: 5px;
  margin-bottom: 0; }
  .order_history_wrapper .head .six.columns {
    margin-bottom: 0; }

.order_history_wrapper label {
  font: 16px/20px "Calibre-Medium";
  color: #9D9D9D; }

.order_history_wrapper a {
  color: #1D1C20; }

.order_history_wrapper .view-detail {
  font: italic 14px/16px "Calibre-Regular";
  color: #9D9D9D;
  text-decoration: underline; }

.order_history_wrapper .order_history {
  font: 16px/20px "Calibre-Medium";
  padding: 25px 0 20px;
  border-bottom: 1px solid #DDDDDD; }

.order_history_wrapper .ori-price {
  font: 14px/16px "Calibre-Regular";
  text-decoration: line-through;
  color: #9D9D9D;
  display: block; }

.introduction-wrapper-bg {
  position: relative;
  padding: 30px 0;
  margin-bottom: 50px; }
  .introduction-wrapper-bg .introduction-desc {
    position: relative;
    z-index: 1; }
  .introduction-wrapper-bg:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    background: #f7f7f8;
    height: 100%;
    width: 300%;
    display: block;
    z-index: 0; }
  .introduction-wrapper-bg section.title {
    margin-bottom: 0; }
  .introduction-wrapper-bg p {
    font: 21px/28px "Calibre-Regular";
    color: #9D9D9D;
    margin: 10px 0 25px; }

.introduction-wrapper {
  position: relative;
  padding-top: 30px;
  padding-bottom: 50px; }
  .introduction-wrapper p {
    font: 21px/28px "Calibre-Regular";
    color: #9D9D9D;
    margin: 0 0 25px; }

.why-wrapper {
  margin: 50px 0; }
  .why-wrapper h2 {
    font: 48px/52px "Calibre-Bold";
    color: #1D1C20;
    margin: 0 0 15px; }
  .why-wrapper p {
    font: 21px/28px "Calibre-Regular";
    color: #9D9D9D;
    margin: 0 0 25px; }

.dropdown-box {
  display: flex;
  background: white;
  position: absolute;
  top: 100%;
  padding: 20px 32px 15px;
  align-items: flex-start;
  box-sizing: border-box;
  left: -32px;
  flex-direction: column;
  gap: 16px;
  width: 205px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease-out, visibility 0.1s ease-out;
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  background: #FFFFFF;
  border: 1px solid #F2F2F2;
  border-radius: 0px 0px 20px 20px; }
  .dropdown-box li {
    margin: 0px; }
  .dropdown-box li:last-child {
    margin-left: 32px; }

.dropdown-section {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #DDDDDD; }
  .dropdown-section h2 {
    font: 24px/28px "Calibre-Medium";
    margin: 0 0 5px; }
  .dropdown-section a {
    font: 21px/25px "Calibre-Regular";
    margin-bottom: 5px; }
    .dropdown-section a:last-child {
      margin-bottom: 0; }
  .dropdown-section .logout {
    color: #9D9D9D; }
  .dropdown-section svg {
    width: 20px; }
  .dropdown-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0; }

.banner-wrapper {
  position: relative;
  margin-top: 56px;
  overflow: hidden;
  width: 100%; }
  .banner-wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85%;
    background: linear-gradient(0deg, #8E909C -100%, #FFFFFF 20%); }
  .banner-wrapper .container {
    z-index: 100;
    position: relative; }
  .banner-wrapper.curriculum {
    min-height: 280px;
    background-position: top center;
    background-size: cover; }
    .banner-wrapper.curriculum:before {
      height: 100%;
      background: rgba(29, 28, 32, 0.7); }
    .banner-wrapper.curriculum .container {
      min-height: 280px; }
    .banner-wrapper.curriculum.less-bg:before {
      display: none; }
  .banner-wrapper.contact-bg {
    min-height: 320px;
    background-position: top center;
    background-size: cover; }
    .banner-wrapper.contact-bg:before {
      display: none; }
    .banner-wrapper.contact-bg .container {
      min-height: 320px; }
  .banner-wrapper .academy-icon {
    max-width: 225px; }

.promo-code-box .input-field {
  margin-top: 10px;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  position: relative; }

.promo-code-box input {
  font: 16px/22px "Calibre-Regular";
  width: 100%;
  padding: 12px 100px 8px 20px;
  border-radius: 20px;
  border: 1px solid #DDDDDD;
  box-sizing: border-box; }
  .promo-code-box input:placeholder {
    font: 16px/22px "Calibre-Regular";
    color: #9D9D9D; }

.promo-code-box button {
  font: 20px/22px "Calibre-Medium";
  position: absolute;
  right: 0;
  top: 0;
  background: #ED182D;
  color: white;
  padding: 14px 22px 9px;
  border: none;
  border-radius: 20px;
  box-sizing: border-box;
  cursor: pointer; }

.promo-code-box svg {
  position: absolute;
  top: 7px;
  right: 10px;
  display: none;
  cursor: pointer; }

.promo-code-box .info {
  font: 16px/22px "Calibre-Regular";
  padding: 12px 20px 6px;
  border-radius: 20px;
  background: #E7FFFD;
  border: 1px solid #4AE1D2;
  margin-top: 15px;
  display: none; }
  .promo-code-box .info.show {
    display: block; }
  .promo-code-box .info.error {
    background: #FFE7E9;
    border: 1px solid #ED182D; }

.promo-code-box.active button {
  display: none; }

.promo-code-box.active svg {
  display: block; }

.info-message-box {
  font: 16px/22px "Calibre-Regular";
  text-align: center; }
  .info-message-box p, .info-message-box .info-message-box-wrapper {
    background: #E7FFFD;
    border: 1px solid #4AE1D2;
    margin: 0; }
  .info-message-box a {
    display: block; }
  .info-message-box p, .info-message-box .errorlist, .info-message-box .info-message-box-wrapper {
    padding: 12px 20px 6px;
    border-radius: 20px; }
  .info-message-box > .errorlist {
    border: 1px solid #ED182D;
    background-color: #FFE7E9;
    color: transparent;
    font-size: 0;
    line-height: 0; }
  .info-message-box .errorlist .errorlist {
    font: 16px/22px "Calibre-Regular";
    padding: 0;
    margin: 0;
    color: #1D1C20; }
  .info-message-box ul {
    font: 16px/22px "Calibre-Regular";
    padding: 0;
    margin: 0;
    list-style-type: none; }
  .info-message-box.popup {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; }
    .info-message-box.popup.fade-out {
      opacity: 0;
      transition: opacity 1s ease 1s; }

.curriculums-page .curriculums-wrapper {
  margin-top: 0; }

.banner-box {
  text-align: center;
  max-width: 70%;
  margin: 80px auto; }
  .banner-box h1 {
    font: 48px/52px "Calibre-Bold";
    color: white;
    margin: 0; }
  .banner-box .instructor {
    border: none;
    margin: 0 auto;
    display: table; }
  .banner-box .instructor img {
    margin: 0;
    width: 75px;
    height: 75px; }
  .banner-box .instructor span {
    font: 20px/25px "Calibre-Medium";
    width: 100%;
    display: block;
    color: #9D9D9D; }
  .banner-box label {
    font: 14px/18px "Calibre-Regular";
    color: white;
    border-radius: 10px;
    text-align: center;
    padding: 5px 30px 0;
    background: rgba(18, 17, 20, 0.25);
    display: table;
    margin: 0 auto 5px; }
  .banner-box .button {
    margin: 20px auto 0; }

section.title {
  width: 100%;
  display: block;
  text-align: center;
  margin-bottom: 20px; }
  section.title.left {
    text-align: left; }
  section.title h1 {
    font: 30px/36px "Calibre-Bold";
    color: #1D1C20;
    margin: 0 0 20px; }
  section.title h2 {
    font: 48px/52px "Calibre-Bold";
    color: #1D1C20;
    margin: 30px 0 20px; }
  section.title .sub-info {
    font: 21px/28px "Calibre-Regular";
    color: #9D9D9D;
    margin-top: 10px; }

.curriculums-wrapper {
  padding: 20px 0;
  margin-top: 80px;
  display: block; }

.experts {
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08);
  line-height: 0;
  border-radius: 20px;
  overflow: hidden; }
  .experts h2 {
    font: 30px/36px "Calibre-Bold";
    color: #1D1C20;
    max-width: 70%;
    margin: 20px auto; }
  .experts .six.columns {
    margin-bottom: 0; }

.tiktok img {
  position: relative;
  top: 4px; }

.faqs-wrapper {
  margin-top: 80px; }

.faqs .list {
  background: #F2F2F2;
  border-radius: 8px;
  padding: 15px 30px 9px;
  margin-bottom: 15px; }
  .faqs .list:last-child {
    margin-bottom: 0; }

.faqs svg {
  position: relative;
  top: -2px; }

.faqs a {
  font: 20px/28px "Calibre-Medium";
  color: #1D1C20; }
  .faqs a:hover {
    color: #1D1C20; }

.faqs p {
  font: 16px/28px "Calibre-Regular";
  color: #1D1C20;
  margin: 0 0 20px; }
  .faqs p:first-child {
    margin-top: 10px; }
  .faqs p:last-child {
    margin-bottom: 0; }

.faqs a.active + .dropdown-content {
  display: block; }

.view-all {
  font: 24px/28px "Calibre-Medium";
  text-align: center;
  color: #ED182D;
  display: block;
  padding-top: 20px; }
  .view-all:hover {
    color: #ED182D; }
  .view-all svg {
    position: relative;
    top: 1px;
    margin-left: 5px; }

.dropdown-content {
  display: none; }

.teams-icon {
  max-width: 400px; }

.curriculums {
  margin-top: 30px; }
  .curriculums a {
    border-radius: 15px;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    margin-bottom: 4%;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08);
    display: grid; }
  .curriculums h2 {
    font: 20px/24px "Calibre-Medium";
    color: #1D1C20;
    margin: 0; }
  .curriculums h5 {
    font: 16px/20px "Calibre-Regular";
    color: #9D9D9D;
    margin: 0 0 10px; }
  .curriculums .box {
    padding: 0 25px 20px;
    box-sizing: border-box;
    align-self: flex-end; }
  .curriculums .box-head .desc {
    padding: 10px 25px 0;
    box-sizing: border-box; }
  .curriculums .box-head img {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    object-fit: cover;
    aspect-ratio: 3 / 2; }
  .curriculums .box-head {
    position: relative; }

.retake-quiz {
  max-width: 50%; }

.payment-method {
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 20px 25px;
  box-sizing: border-box;
  background: white; }
  .payment-method h2 {
    font: 20px/24px "Calibre-Medium";
    margin-bottom: 10px; }

.payments .list {
  font: 16px/20px "Calibre-Regular";
  color: #1D1C20;
  margin-bottom: 10px;
  position: relative;
  width: 100%;
  display: table; }

.payments span {
  position: relative;
  top: 2px; }

.payments img {
  width: auto;
  max-height: 24px; }

.payments svg {
  position: absolute;
  top: -8px;
  right: -8px;
  display: none; }

.payments input[type="radio"] {
  display: none; }

.payments .label-text {
  box-shadow: inset 0px 0px 0px 1px #DDDDDD;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  cursor: pointer; }
  .payments .label-text:hover {
    box-shadow: inset 0px 0px 0px 3px #4AE1D2; }
  .payments .label-text .text-wrapper {
    display: flex;
    flex-direction: column; }
    .payments .label-text .text-wrapper .min-10k-text {
      display: none;
      color: #ED182D; }

.payments input:checked + .label-text {
  box-shadow: inset 0px 0px 0px 3px #4AE1D2; }
  .payments input:checked + .label-text svg {
    display: block; }

.payments hr {
  margin: 22px -25px 10px;
  border: none;
  border-top: 1px solid #DDDDDD; }

.payments .ovo-number.hidden {
  display: none; }

.payments .ovo-number label {
  display: block;
  font: 16px/20px "Calibre-Medium";
  color: #1D1C20;
  margin-top: 24px;
  margin-bottom: 10px; }

.payments .ovo-number input {
  font: 20px/20px "Calibre-Regular";
  color: #1D1C20;
  width: 100%;
  padding: 14px 10px 8px 75px;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 0; }
  .payments .ovo-number input::placeholder {
    font: italic 20px/20px "Calibre-Regular"; }

.payments .ovo-number p {
  font: 16px/20px "Calibre-Medium";
  color: #ED182D;
  margin-bottom: 0; }

.payments .ovo-field {
  position: relative; }
  .payments .ovo-field span {
    font: 20px/20px "Calibre-Regular";
    position: absolute;
    top: 0;
    left: 0;
    padding: 17px 15px 10px;
    border-right: 1px solid #DDDDDD; }

.payments .previous-payment-method, .payments .min-10k {
  pointer-events: none; }
  .payments .previous-payment-method > div, .payments .min-10k > div {
    background: rgba(0, 0, 0, 0.2);
    filter: brightness(0.8);
    opacity: 0.8; }

.payments .min-10k .label-text {
  padding: 12px 20px; }
  .payments .min-10k .label-text .min-10k-text {
    display: inline; }

.quiz-wrapper h2 {
  font: 20px/24px "Calibre-Medium";
  margin-bottom: 10px; }

.question-wrapper {
  margin-bottom: 40px; }
  .question-wrapper input {
    display: none; }
  .question-wrapper .label-text {
    font: 16px/20px "Calibre-Regular";
    background: white;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 11px 20px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.25s ease-in-out; }
  .question-wrapper .label-text span:nth-child(2) {
    max-width: 95%; }
  .question-wrapper span {
    margin-top: 0.375em;
    position: relative; }
  .question-wrapper .label-text:hover {
    background: #FAFAFA;
    border: 1px solid #F2F2F2; }
  .question-wrapper input:checked + .label-text {
    background: #F2F2F2;
    border: 1px solid #1D1C20; }
    .question-wrapper input:checked + .label-text:hover {
      background: #F2F2F2;
      border: 1px solid #1D1C20; }
  .question-wrapper input:disabled + .label-text {
    background: unset;
    border: unset;
    cursor: initial; }
  .question-wrapper .right .label-text, .question-wrapper .right input:checked + .label-text, .question-wrapper .right input:disabled + .label-text {
    background: #D1FFFA;
    border: 1px solid #4AE1D2; }
  .question-wrapper .wrong .label-text, .question-wrapper .wrong input:checked + .label-text, .question-wrapper .wrong input:disabled + .label-text {
    background: #FFE7E9;
    border: 1px solid #ED182D; }
  .question-wrapper .choice {
    width: 24px;
    text-align: center;
    margin-right: 12px; }
  .question-wrapper .choice:before {
    content: '';
    position: absolute;
    background: #FFFFFF;
    top: -5px;
    left: 0;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    border-radius: 20px;
    width: 24px;
    height: 24px; }

.curriculum-list-steps {
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  margin-top: 30px;
  padding-bottom: 20px;
  background: white; }
  .curriculum-list-steps h2 {
    font: 24px/28px "Calibre-Bold";
    padding: 20px 25px;
    margin-bottom: 0; }
  .curriculum-list-steps h3 {
    font: 16px/18px "Calibre-Regular";
    margin: 0;
    color: #1D1C20; }
  .curriculum-list-steps h4 {
    font: 16px/18px "Calibre-Regular";
    margin: 0 0 2px;
    color: #9D9D9D; }
  .curriculum-list-steps .list {
    padding: 10px 25px;
    margin-bottom: 5px;
    position: relative;
    width: 100%;
    display: block;
    box-sizing: border-box; }
    .curriculum-list-steps .list.active {
      background: #F2F2F2;
      box-shadow: inset 4px 0px 0px 0px #ED182D; }
    .curriculum-list-steps .list:hover {
      background: #F2F2F2; }

.subscribe-wrapper.subscription-wrapper {
  padding: 0;
  line-height: 0;
  box-shadow: none;
  border-radius: none; }
  .subscribe-wrapper.subscription-wrapper .images {
    width: 100%;
    max-width: 201px; }
  .subscribe-wrapper.subscription-wrapper .images img {
    max-width: 201px;
    border-radius: 4px; }
  .subscribe-wrapper.subscription-wrapper .box {
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%; }
  .subscribe-wrapper.subscription-wrapper .subscription-box {
    align-items: start; }
  .subscribe-wrapper.subscription-wrapper .subscription {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #DDDDDD; }
    .subscribe-wrapper.subscription-wrapper .subscription:last-child {
      margin-bottom: 0;
      border-bottom: none; }

.subscribe-wrapper {
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 20px 25px;
  box-sizing: border-box;
  position: sticky;
  top: 100px;
  margin-top: -70px;
  background: white; }
  .subscribe-wrapper.no-float {
    top: 0;
    position: relative;
    margin-top: 0; }
  .subscribe-wrapper .instructor {
    border-top: none;
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: 25px;
    padding-bottom: 25px;
    margin-top: 0; }
  .subscribe-wrapper .instructor span {
    margin-top: 5px; }
  .subscribe-wrapper h5 {
    font: 16px/22px "Calibre-Regular";
    color: #9D9D9D;
    margin: 0 0 5px; }
  .subscribe-wrapper h2 {
    font: 20px/24px "Calibre-Medium";
    margin: 0; }
    .subscribe-wrapper h2 a {
      font: 20px/24px "Calibre-Medium";
      color: #1D1C20; }
  .subscribe-wrapper .price {
    font: 24px/28px "Calibre-Bold";
    margin: 0 0 15px; }
  .subscribe-wrapper .button {
    width: 100%;
    margin-bottom: 25px; }
  .subscribe-wrapper .subscription-box .button {
    width: auto; }
  .subscribe-wrapper .benefits .list {
    font: 20px/24px "Calibre-Medium";
    margin: 0 0 10px; }
    .subscribe-wrapper .benefits .list:last-child {
      margin-bottom: 0; }
  .subscribe-wrapper .list svg {
    position: relative;
    top: -4px;
    margin-right: 10px; }
  .subscribe-wrapper .promo {
    font: 14px/14px "Calibre-Medium";
    color: #ED182D;
    padding: 5px 8px 0px;
    border: 1px solid #ED182D;
    border-radius: 8px;
    position: relative;
    top: -2px;
    margin-left: 5px; }
  .subscribe-wrapper .ori-price {
    font: 20px/22px "Calibre-Medium";
    color: #9D9D9D;
    text-decoration: line-through;
    margin-top: 2px; }

.search-wrapper {
  position: relative; }
  .search-wrapper svg {
    position: absolute;
    left: 10px;
    top: 11px; }
  .search-wrapper input {
    font: 20px/20px "Calibre-Regular";
    color: #1D1C20;
    border-radius: 8px;
    padding: 10px 5px 4px 35px;
    border: 1px solid #9D9D9D; }
    .search-wrapper input:placeholder {
      font: 20px/20px "Calibre-Regular";
      color: #9D9D9D; }
    .search-wrapper input:focus, .search-wrapper input:active {
      border-color: #9D9D9D; }

.curriculum-list .time {
  font: 21px/28px "Calibre-Regular";
  color: #9D9D9D;
  display: block;
  margin-bottom: 0; }

.curriculum-list h2 {
  font: 24px/28px "Calibre-Medium";
  color: #1D1C20;
  margin: 0; }

.curriculum-list .list {
  margin-bottom: 20px; }
  .curriculum-list .list:last-child {
    margin-bottom: 0; }

.curriculum-list .image {
  position: relative;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden; }

.curriculum-list .image svg {
  display: table;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.curriculum-list .image .lock-icon {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 16px; }

.curriculum-list svg path {
  fill: #ED182D; }

.curriculum-list svg.lock-icon {
  display: none; }
  .curriculum-list svg.lock-icon path {
    fill: #FFFFFF; }

.bg-white {
  width: 100%;
  background: white; }

.bg-transparent {
  display: block;
  height: 500px; }

.image-banner {
  transform-origin: center top;
  transform: scaleY(calc(1 - 0.1));
  height: 3350px;
  position: absolute;
  top: 0;
  z-index: -2; }

.image-container {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  margin-top: -87vh; }
  .image-container img {
    display: block;
    position: absolute;
    top: 40vh;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.lock {
  pointer-events: none; }
  .lock .image:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #1D1C20;
    opacity: 0.7; }
  .lock .image .lock-icon {
    display: table; }
  .lock .play path {
    fill: #9D9D9D; }
  .lock svg path {
    fill: #9D9D9D; }
  .lock .course circle {
    fill: #9D9D9D; }

.reviews h3 {
  font: 21px/28px "Calibre-Regular";
  color: #9D9D9D;
  display: block;
  margin: 0; }

.reviews h2 {
  font: 24px/28px "Calibre-Bold";
  color: #1D1C20;
  margin: 0; }

.reviews p {
  font: 21px/28px "Calibre-Regular";
  color: #9D9D9D;
  margin: 0; }

.reviews .stars {
  margin: 5px 0 10px;
  position: relative; }

.reviews .star-icons {
  position: relative;
  z-index: 1; }

.reviews .stars-bg {
  position: absolute;
  top: 0; }

.reviews .list {
  margin-bottom: 30px; }
  .reviews .list:last-child {
    margin-bottom: 0; }

.progress .persen {
  font: 20px/24px "Calibre-Medium";
  color: #ED182D; }
  .progress .persen.blue {
    color: #4AE1D2;
    display: flex;
    gap: 8px;
    align-items: baseline; }
  .progress .persen img {
    width: 16px;
    height: auto; }

.progress span {
  font: 16px/20px "Calibre-Regular";
  color: #9D9D9D; }

.progress .status-bar {
  width: 100%;
  border: 1px solid #F2F2F2;
  background: #F2F2F2;
  height: 6px;
  position: relative; }
  .progress .status-bar span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ED182D; }

.progress.mobile {
  display: none; }

.progress .status-desc {
  font: 20px/24px "Calibre-Medium";
  color: #4AE1D2; }

.progress .status-desc svg {
  position: relative;
  top: -3px;
  margin-right: 5px; }

.progress .ratings span {
  font: 13px/13px "Calibre-Regular";
  color: #9D9D9D;
  margin-bottom: 2px; }

.progress .status + .ratings {
  margin-top: 20px; }
  .progress .status + .ratings .give-rate, .progress .status + .ratings .button.gray {
    padding: 12px 8px 10px; }

.progress .stars-wrapper {
  min-width: 115px; }

.progress .give-rate {
  font: 16px/18px "Calibre-Regular";
  color: #1D1C20;
  padding: 6px 20px 4px;
  margin: 0 10px 0 0;
  background: #F9C94C; }
  .progress .give-rate svg {
    position: relative;
    top: 2px;
    margin-right: 2px; }

.progress .button.gray {
  font: 16px/18px "Calibre-Regular";
  color: #1D1C20;
  padding: 6px 20px 4px;
  margin: 0;
  background: #F2F2F2;
  min-width: 160px; }
  .progress .button.gray svg {
    position: relative;
    top: 2px;
    margin-right: 2px; }

.progress .button.red {
  font: 16px/18px "Calibre-Regular";
  color: white;
  padding: 8px 5px 3px 20px;
  margin: 0;
  background: #ED182D; }
  .progress .button.red svg {
    position: relative;
    top: -2px;
    margin-left: 2px; }

.instructor {
  font: 16px/20px "Calibre-Regular";
  border-top: 1px solid #DDDDDD;
  margin-top: 15px;
  padding: 15px 0 0;
  color: #9D9D9D;
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: left; }
  .instructor.less-border {
    border: none;
    margin-bottom: 0; }
  .instructor.pb-0 {
    padding-bottom: 0; }
  .instructor img {
    background: #C4C4C4;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px; }
  .instructor span {
    margin-top: 10px; }

.games {
  padding: 0 80px;
  box-sizing: border-box; }
  .games h2 {
    font: 30px/36px "Calibre-Bold";
    color: #1D1C20;
    margin: 0; }
  .games h5 {
    font: 21px/28px "Calibre-Regular";
    color: #9D9D9D;
    margin: 0 0 10px; }
  .games img {
    border-radius: 12px;
    filter: drop-shadow(0px 8px 24px rgba(0, 0, 0, 0.08));
    margin-bottom: 15px;
    aspect-ratio: 1;
    object-fit: cover; }
  .games a {
    line-height: 0; }

.slider-box {
  position: relative;
  max-width: 1040px;
  margin: 0 auto; }
  .slider-box .games {
    box-sizing: border-box;
    flex-wrap: initial;
    padding: 0; }
    .slider-box .games a.columns {
      margin-left: 0; }

.slider-box-overflow {
  overflow: hidden; }

.row.games.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  gap: 32px; }
  .row.games.grid a {
    margin-left: 0px;
    width: 100%; }

.control-box a {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(0%, -50%);
  cursor: pointer;
  border: none;
  text-decoration: none;
  outline: none; }

.control-box.middle a {
  top: 45%;
  transform: translate(0%, -50%); }

.control-box .prev {
  left: -5%; }

.control-box .next {
  right: -5%;
  left: auto; }

.banner img {
  width: 100%; }

.banner .play {
  max-width: 395px;
  margin-top: 60px;
  margin-bottom: 20px; }

.banner h2 {
  font: 20px/24px "Calibre-Regular";
  color: #1D1C20;
  letter-spacing: 5px;
  display: block;
  margin-bottom: 20px; }

.tns-nav {
  display: flex;
  justify-content: center;
  margin: 64px 0; }
  .tns-nav .tns-nav-active {
    opacity: 100%; }
  .tns-nav button {
    background: #ED182D;
    opacity: 20%;
    border: none;
    width: 24px;
    height: 6px;
    margin: 0 6px;
    border-radius: 20px; }

.division-logo {
  display: flex;
  justify-content: center;
  align-items: flex-end; }
  .division-logo .gradient {
    width: 100%;
    background: linear-gradient(0deg, #1D1C20 30%, rgba(0, 0, 0, 0) 100%); }
  .division-logo img {
    width: 320px; }

.team {
  display: block; }

.team:hover .background {
  opacity: 1 !important; }

.team-mobile {
  display: none; }

.team-card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  .team-card .photo {
    height: 98%;
    margin-top: 2%;
    margin-left: 2%; }
  .team-card .logo-wrapper {
    height: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin-right: 2%; }
  .team-card .logo {
    height: 30%;
    margin-left: 5%; }

.form-field label {
  font: 16px/22px "Calibre-Medium";
  margin: 0 0 15px;
  color: #1D1C20;
  opacity: 1; }

.form-field input {
  font: 21px/21px "Calibre-Regular";
  margin: 0 0 10px;
  border: none;
  width: 100%;
  padding: 10px 15px 5px;
  text-align: left;
  border: 1px solid #DDDDDD;
  box-sizing: border-box;
  border-radius: 8px; }
  .form-field input::placeholder {
    font: 21px/21px "Calibre-Regular";
    color: #9D9D9D; }
  .form-field input:disabled {
    color: #9D9D9D;
    background: #DDDDDD; }

.form-field button {
  font: 20px/21px "Calibre-Medium";
  width: 100%;
  text-align: center;
  border: none;
  border-radius: 20px;
  margin-top: 20px;
  cursor: pointer; }

.form-field .field-wrapper {
  margin-top: 30px; }

.form-field .field {
  margin-bottom: 20px; }
  .form-field .field:last-child {
    margin-bottom: 0; }

.contact-wrapper {
  position: relative;
  top: -30px; }

.form-center.border-field {
  background: white;
  padding: 40px 30px;
  margin: 0 auto;
  max-width: 500px; }
  .form-center.border-field input, .form-center.border-field textarea {
    font: 21px/22px "Calibre-Regular";
    border: 1px solid #DDDDDD;
    width: 100%;
    text-align: left;
    padding: 15px 12px 9px;
    box-sizing: border-box;
    border-radius: 8px; }
    .form-center.border-field input::placeholder, .form-center.border-field textarea::placeholder {
      font: 21px/22px "Calibre-Regular";
      text-align: left; }
  .form-center.border-field label {
    text-align: left;
    margin-bottom: 2px; }
  .form-center.border-field textarea {
    height: 150px; }

.form-center {
  margin: 100px auto;
  display: table;
  width: 100%;
  max-width: 460px;
  text-align: center;
  padding: 40px 60px 140px;
  background: white;
  border: 1px solid #F2F2F2;
  box-sizing: border-box;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  position: relative;
  background: url("/static/images/academy/form_bg.png?f752aefa46ac") no-repeat bottom left;
  background-size: 250px 102px; }
  .form-center .logo-img {
    max-width: 200px;
    margin-bottom: 30px; }
  .form-center h1 {
    font: 48px/52px "Calibre-Bold";
    margin: 0 0 10px; }
  .form-center h2 {
    font: 24px/28px "Calibre-Bold";
    margin: 0 0 10px; }
  .form-center h3 {
    font: 21px/28px "Calibre-Regular";
    color: #9D9D9D;
    margin: 0 0 20px; }
  .form-center h3 span {
    font: 21px/28px "Calibre-Regular";
    color: #1D1C20;
    margin: 0;
    display: block; }
  .form-center h5 {
    font: 16px/22px "Calibre-Medium";
    margin: 10px 0px;
    color: #9D9D9D; }
    .form-center h5 span {
      color: #1D1C20; }
  .form-center a {
    font: 16px/22px "Calibre-Medium";
    color: #ED182D; }
    .form-center a:hover {
      color: #ED182D; }
  .form-center label {
    font: 16px/22px "Calibre-Medium";
    margin: 0 0 10px;
    color: #1D1C20;
    opacity: 1;
    display: block; }
  .form-center input {
    font: 24px/28px "Calibre-Regular";
    margin: 0 0 10px;
    border: none;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    border-bottom: 1px solid #9D9D9D; }
    .form-center input::placeholder {
      font: 24px/28px "Calibre-Regular";
      color: #9D9D9D; }
  .form-center select {
    font: 21px/25px "Calibre-Regular";
    border: 1px solid #DDDDDD;
    width: 100%;
    background: transparent;
    padding: 14px 10px 9px;
    border-radius: 8px;
    cursor: pointer;
    margin: 0 0 10px; }
  .form-center button {
    font: 20px/21px "Calibre-Medium";
    width: 100%;
    text-align: center;
    border: none;
    border-radius: 20px;
    margin-top: 20px;
    cursor: pointer; }
  .form-center .notif {
    font: italic 16px/22px "Calibre-Medium";
    margin: 10px 0;
    color: #ED182D;
    display: flex;
    text-align: left; }
    .form-center .notif svg {
      width: 90px;
      position: relative;
      top: -2px; }
  .form-center .field-wrapper {
    margin-top: 30px; }
  .form-center .field {
    margin-bottom: 20px; }
    .form-center .field:last-child {
      margin-bottom: 0; }
    .form-center .field.required label:after {
      content: '*';
      color: #ED182D; }
  .form-center .info {
    font: 16px/22px "Calibre-Regular";
    padding: 12px 20px 6px;
    border-radius: 20px;
    background: #E7FFFD;
    border: 1px solid #4AE1D2;
    margin-top: 10px; }
  .form-center .select-field {
    position: relative; }
    .form-center .select-field select {
      -webkit-appearance: none;
      -moz-appearance: none;
      text-indent: 1px;
      text-overflow: '';
      position: relative;
      z-index: 2; }
    .form-center .select-field svg {
      position: absolute;
      top: 42%;
      right: 5px;
      transform: translate(0, -50%);
      z-index: 1; }

.text-page .desc-content {
  font: 21px/28px "Calibre-Regular";
  color: #757476; }
  .text-page .desc-content h2 {
    font: 21px/28px "Calibre-Bold";
    color: #1D1C20;
    margin-bottom: 30px; }
  .text-page .desc-content h3 {
    font: 21px/28px "Calibre-Regular";
    color: #757476;
    margin: 0; }
  .text-page .desc-content p {
    color: #757476;
    margin-bottom: 30px; }

.text-page .faqs {
  padding: 0; }
  .text-page .faqs .dropdown-content {
    padding: 10px 0 0; }
  .text-page .faqs .dropdown-content p {
    font: 21px/28px "Calibre-Regular";
    color: #757476;
    margin: 10px 0 0; }
    .text-page .faqs .dropdown-content p:last-child {
      margin-top: 0; }

.rate-curriculum {
  position: relative; }
  .rate-curriculum .game {
    font: 16px/18px "Calibre-Regular";
    color: #9D9D9D;
    text-align: left;
    margin: 0 0 5px; }
  .rate-curriculum .desc {
    font: 20px/25px "Calibre-Medium";
    color: #1D1C20;
    text-align: left;
    margin: 0 0 20px; }
  .rate-curriculum h1 {
    font: 24px/28px "Calibre-Bold";
    color: #1D1C20;
    text-align: left;
    margin: 0 0 5px; }
  .rate-curriculum .stars-rate {
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 20px; }
  .rate-curriculum .stars {
    transform: rotateY(180deg); }
    .rate-curriculum .stars label {
      display: inline; }
    .rate-curriculum .stars input {
      position: absolute;
      opacity: 0;
      height: 0;
      width: 0; }
  .rate-curriculum .stars-rate label {
    cursor: pointer; }
  .rate-curriculum .stars-rate label:hover path {
    fill: #F9C94C; }
  .rate-curriculum .stars-rate label:hover ~ label path {
    fill: #F9C94C; }
  .rate-curriculum .stars-rate label.active ~ label path,
  .rate-curriculum .stars-rate label.active path {
    fill: #F9C94C; }
  .rate-curriculum .stars-info.active {
    font: 16px/18px "Calibre-Regular";
    color: #9D9D9D;
    margin: 10px 0 0; }
  .rate-curriculum .close {
    position: absolute;
    top: 10px;
    right: 10px; }
  .rate-curriculum .submitted {
    font: 24px/28px "Calibre-Bold";
    color: #1D1C20; }

.modal-window-background,
.block-background {
  width: 100%;
  height: 100%;
  display: table; }

.modal-window-background body,
.block-background body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: table; }

.modal-window-background:after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  height: 100%;
  width: 100%;
  z-index: 1002;
  background: rgba(0, 0, 0, 0.3); }

.modal-window {
  position: fixed;
  z-index: 1003;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: table;
  width: 100%;
  max-width: 700px;
  box-sizing: border-box;
  background: white;
  border-radius: 8px;
  max-width: 411px;
  box-shadow: 3px 6px 30px rgba(0, 0, 0, 0.15); }
  .modal-window.hide {
    display: none; }

.modal-window-button {
  cursor: pointer; }

.hamburger.mobile.active img,
.hamburger.mobile svg {
  display: none; }

.hamburger.mobile.active svg {
  display: block;
  position: relative;
  right: -5px; }

.mobile-menu {
  display: none; }

.mobile-menu.active {
  position: fixed;
  top: 68px;
  z-index: 1000;
  display: block;
  width: 100%;
  height: calc(100% - 68px);
  overflow-x: auto;
  background: white;
  padding: 30px 0 50px;
  box-sizing: border-box; }
  .mobile-menu.active .button.small {
    padding: 12px 21px 8px;
    font-size: 18px;
    color: white;
    margin: 0; }
  .mobile-menu.active h2 {
    font: 22px/25px "Calibre-Medium";
    margin: 0 0 5px; }
  .mobile-menu.active a {
    font: 20px/22px "Calibre-Medium";
    display: block;
    margin-bottom: 20px;
    color: #1D1C20; }
    .mobile-menu.active a svg {
      position: relative;
      top: -2px; }
    .mobile-menu.active a:last-child {
      margin-bottom: 0; }
  .mobile-menu.active .dropdown {
    padding: 0 0 0 10px;
    margin: 29px 0 10px;
    list-style-type: none;
    display: none;
    position: relative;
    top: -10px; }
    .mobile-menu.active .dropdown li {
      margin-bottom: 20px; }
    .mobile-menu.active .dropdown li:last-child {
      margin-bottom: 0; }
  .mobile-menu.active .dropdown-menu.active + .dropdown {
    display: block; }
  .mobile-menu.active .logout svg {
    top: 3px;
    margin-right: 10px; }
  .mobile-menu.active .logout {
    color: #9D9D9D; }
  .mobile-menu.active .account {
    font: 18px/22px "Calibre-Medium";
    color: #ED182D; }
  .mobile-menu.active .account svg {
    top: 2px;
    margin-right: 10px; }
  .mobile-menu.active .mobile-menu-block {
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: 30px;
    padding: 0 20px 30px; }
    .mobile-menu.active .mobile-menu-block.small-m {
      margin-bottom: 15px; }
    .mobile-menu.active .mobile-menu-block.small-p {
      padding-bottom: 15px; }
    .mobile-menu.active .mobile-menu-block.less-border {
      border-bottom: none;
      margin-bottom: 0; }
    .mobile-menu.active .mobile-menu-block:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none; }

.breadcrumbs {
  font: 20px/22px "Calibre-Regular";
  color: white;
  margin-bottom: 20px; }
  .breadcrumbs a {
    font: 20px/22px "Calibre-Regular";
    color: white;
    position: relative; }
    .breadcrumbs a:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      bottom: 3px;
      border-bottom: 1px solid white; }

.subscribed_box {
  font: 16px/18px "Calibre-Regular";
  padding: 9px 17px 4px;
  text-align: center;
  color: white;
  width: auto;
  position: absolute;
  top: 5%;
  left: 0;
  background: rgba(29, 28, 32, 0.75);
  border-radius: 0px 8px 8px 0px; }
  .subscribed_box svg {
    position: relative;
    top: 1px; }

.copy-text-result {
  height: 0;
  line-height: 0;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  color: transparent; }

.tns-controls, .tns-liveregion,
.tns-nav {
  display: none; }

.tns-nav > [aria-controls] {
  width: 11px;
  height: 11px;
  padding: 0;
  margin: 0 5px;
  border-radius: 50%;
  border: none;
  text-align: center;
  cursor: pointer; }
  .tns-nav > [aria-controls]:nth-child(2) {
    background: rgba(255, 255, 255, 0.9); }
  .tns-nav > [aria-controls]:nth-child(3) {
    background: rgba(255, 255, 255, 0.8); }
  .tns-nav > [aria-controls]:nth-child(4) {
    background: rgba(255, 255, 255, 0.7); }
  .tns-nav > [aria-controls]:nth-child(5) {
    background: rgba(255, 255, 255, 0.6); }
  .tns-nav > [aria-controls]:nth-child(6) {
    background: rgba(255, 255, 255, 0.5); }

.tns-nav > .tns-nav-active {
  background: white !important;
  width: 14px;
  height: 14px;
  position: relative;
  top: 1px; }

.tns-nav {
  text-align: center;
  margin: 5px 0 20px; }

@media (min-width: 100px) {
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }
  .one.column,
  .one.columns {
    width: 4.66666666667%; }
  .two.columns {
    width: 13.3333333333%; }
  .three.columns {
    width: 22%; }
  .four.columns {
    width: 30.6666666667%; }
    .four.columns:nth-child(3n+1) {
      margin-left: 0; }
  .five.columns {
    width: 39.3333333333%; }
  .six.columns {
    width: 48%;
    margin-bottom: 4%; }
    .six.columns:nth-child(2n+1) {
      margin-left: 0; }
  .seven.columns {
    width: 56.6666666667%; }
  .eight.columns {
    width: 65.3333333333%; }
  .nine.columns {
    width: 74.0%; }
  .ten.columns {
    width: 82.6666666667%; }
  .eleven.columns {
    width: 91.3333333333%; }
  .twelve.columns {
    width: 100%;
    margin-left: 0; }
  .one-third.column {
    width: 30.6666666667%; }
  .two-thirds.column {
    width: 65.3333333333%; }
  .one-half.column {
    width: 48%; }
  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns {
    margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns {
    margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns {
    margin-left: 26%; }
  .offset-by-four.column,
  .offset-by-four.columns {
    margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns {
    margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns {
    margin-left: 52%; }
  .offset-by-seven.column,
  .offset-by-seven.columns {
    margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns {
    margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns {
    margin-left: 78.0%; }
  .offset-by-ten.column,
  .offset-by-ten.columns {
    margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns {
    margin-left: 95.3333333333%; }
  .offset-by-one-third.column,
  .offset-by-one-third.columns {
    margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns {
    margin-left: 69.3333333333%; }
  .offset-by-one-half.column,
  .offset-by-one-half.columns {
    margin-left: 52%; } }

.box > a > h2 {
  color: #1D1C20; }

@media screen and (max-width: 1200px) {
  .container, header.container {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box; }
  header {
    grid-template-columns: 0px 1fr 280px; } }

@media screen and (max-width: 1024px) {
  .container, header.container {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box; }
  header {
    grid-template-columns: unset;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; }
  header ul li:last-child {
    margin-left: 150px; }
  .customized-controls-games {
    display: none; }
  .progress .status + .ratings {
    display: inline-block;
    width: 100%; }
    .progress .status + .ratings .button {
      margin-top: 10px; }
  .curriculum.bg-black iframe {
    height: auto; }
  .certificates .columns.full_width {
    width: 100%;
    margin: 0 0 20px; }
  .progress.space-between.website {
    display: inline-block;
    width: 100%; }
    .progress.space-between.website .status-desc {
      margin-bottom: 10px; }
  .box-container {
    padding: 0 40px; }
  .curriculums .box {
    padding: 0 20px 20px; }
  .curriculums .box-head .desc {
    padding: 10px 20px 0; }
  .banner-wrapper .academy-icon {
    max-width: 135px; }
  .image-banner {
    position: relative;
    top: 0;
    height: auto;
    overflow: hidden;
    transform: none; }
  .subscribe-wrapper .button {
    font-size: 14px;
    line-height: 18px; }
  .subscribe-wrapper .benefits .list {
    font-size: 16px;
    line-height: 20px; }
  .banner .play {
    max-width: 178px;
    margin-top: 20px;
    margin-bottom: 5px; }
  .introduction-wrapper-bg:before {
    width: 200%;
    left: -10%; }
  .payments-page .eight.full_width {
    width: 100%; }
  .sidebar {
    font-size: 19px;
    line-height: 20px; }
    .sidebar a {
      padding: 20px 20px 12px; }
  .order_history_wrapper .order_history {
    font-size: 14px;
    line-height: 20px; }
    .order_history_wrapper .order_history .two.columns {
      width: 17.333333%; }
    .order_history_wrapper .order_history .seven.columns {
      width: 52.666667%; }
  .progress .button.gray,
  .progress .button.red {
    font-size: 14px;
    line-height: 20px; }
  .progress .persen,
  .progress .status-desc {
    font-size: 16px;
    line-height: 20px; }
  .subscribe-wrapper.subscription-wrapper .box {
    padding-right: 0; }
  .faqs .list {
    padding: 15px 20px 9px; }
  .progress .button.gray {
    min-width: 125px;
    padding-left: 5px;
    padding-right: 5px; }
  .banner-wrapper {
    margin-top: 78px; }
  .image-container {
    position: relative;
    top: 0;
    margin: 0;
    height: auto; }
    .image-container img {
      position: relative;
      top: 0;
      width: 100%; }
  .bg-transparent {
    height: auto; }
  .bg-white {
    display: inline-block; } }

@media screen and (max-width: 819px) {
  .container {
    padding: 0 20px;
    box-sizing: border-box; }
  .website {
    display: none; }
  .mobile {
    display: block; }
  .mb-60 {
    margin-bottom: 30px; }
  .mobile-mb-30 {
    margin-bottom: 30px; }
  .sidebar {
    display: none; }
  .full_width {
    width: 100%;
    max-width: 100%;
    display: inline-block;
    margin-left: 0;
    margin-right: 0; }
    .full_width.columns.new_columns, .full_width.columns {
      width: 100%;
      margin-left: 0;
      margin-right: 0; }
  .curriculums a {
    padding: 0;
    border: none;
    box-shadow: none;
    margin-bottom: 25px; }
  .curriculums .box-head {
    display: flex;
    vertical-align: middle;
    justify-content: left;
    padding: 0;
    box-sizing: border-box; }
  .curriculums .box {
    padding: 0; }
  .curriculums .box-head img {
    width: 35%;
    border-radius: 8px; }
  .curriculums h2 {
    font-size: 16px;
    line-height: 20px; }
  .curriculums h5 {
    font-size: 13px;
    line-height: 16px;
    margin-bottom: 2px;
    font-family: "Calibre-Medium"; }
  .curriculums .box-head .desc {
    padding: 0 0 0 15px; }
  .curriculums .instructor {
    font-size: 13px;
    line-height: 16px;
    font-family: "Calibre-Medium";
    padding: 0;
    margin-top: 10px;
    border: none; }
  .curriculums .instructor img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 50%; }
  .curriculums .instructor span {
    margin-top: 6px; }
  section.title h2, .why-wrapper h2 {
    font-size: 28px;
    line-height: 32px;
    text-align: center; }
  section.title .sub-info, .why-wrapper .sub-info {
    font-size: 16px;
    line-height: 20px; }
  .banner-wrapper.curriculum .container,
  .banner-wrapper.curriculum {
    min-height: 190px; }
    .banner-wrapper.curriculum .container .academy-icon,
    .banner-wrapper.curriculum .academy-icon {
      width: auto;
      max-width: initial;
      max-height: 60px; }
  .introduction-wrapper-bg section.title {
    margin-bottom: 0; }
  .curriculums-page {
    overflow: hidden; }
    .curriculums-page section.title {
      margin-bottom: 10px; }
      .curriculums-page section.title h2 {
        margin-top: 10px;
        margin-bottom: 0; }
    .curriculums-page .subscribe-wrapper {
      padding: 15px 20px; }
      .curriculums-page .subscribe-wrapper h5 {
        font: 16px / 22px "Calibre-Medium"; }
      .curriculums-page .subscribe-wrapper .price {
        margin: 0 0 10px; }
      .curriculums-page .subscribe-wrapper .instructor {
        margin-bottom: 15px;
        padding-bottom: 15px;
        padding-top: 8px; }
        .curriculums-page .subscribe-wrapper .instructor span {
          font: 16px / 22px "Calibre-Medium"; }
        .curriculums-page .subscribe-wrapper .instructor img {
          width: 30px;
          height: 30px; }
    .curriculums-page .progress .status + .ratings .give-rate,
    .curriculums-page .progress .status + .ratings .button.gray {
      padding: 8px 15px; }
    .curriculums-page .progress .status + .ratings {
      margin-top: 10px; }
    .curriculums-page .subscribe-wrapper .progress .stars-wrapper {
      position: relative; }
    .curriculums-page .progress span.persen {
      font-size: 17px; }
      .curriculums-page .progress span.persen img {
        position: relative;
        top: -4px; }
  .curriculums {
    margin-top: 15px; }
  section.title.mobile-text-align-left h2 {
    text-align: left;
    margin-top: 0; }
  .why-wrapper {
    margin: 25px 0; }
    .why-wrapper .box-container {
      flex-direction: column-reverse; }
    .why-wrapper p {
      font-size: 16px;
      line-height: 22px;
      margin-bottom: 15px; }
  .experts .desc {
    margin: 50px 0; }
  .experts .teams-icon {
    max-width: 280px; }
  .experts h2 {
    font-size: 17px;
    line-height: 22px; }
  .faqs-wrapper {
    margin-top: 50px; }
  footer .nav {
    display: block; }
    footer .nav ul {
      margin-bottom: 10px; }
      footer .nav ul:last-child {
        margin-bottom: 0; }
  .faqs a, .faqs p {
    font-size: 15px;
    line-height: 20px; }
  .faqs .list {
    padding: 15px 15px 9px; }
  .faqs svg {
    width: 10px; }
  .box-container {
    padding: 0; }
  .button.small {
    padding: 13px 20px 7px;
    font-size: 16px;
    line-height: 15px; }
  .mt-100 {
    margin-top: 80px; }
  .slider-container {
    overflow-x: hidden; }
  .games h2 {
    font-size: 20px;
    line-height: 25px; }
  .games h5 {
    font-size: 14px;
    line-height: 18px; }
  .games.slider {
    flex-wrap: unset;
    overflow: hidden; }
  .games.slider.grid {
    display: flex; }
  .games .columns {
    margin-left: 2%; }
  .banner .play {
    max-width: 270px;
    margin-top: 40px; }
  .banner h2 {
    font-size: 13px;
    letter-spacing: 3px; }
  .banner .button {
    font-size: 14px;
    line-height: 14px;
    padding: 13px 28px 9px;
    margin-bottom: 30px; }
  .banner .banner-image {
    width: 115%;
    left: -7%;
    position: relative; }
  .header-container {
    height: auto; }
  header {
    grid-template-columns: 145px 1fr 100px; }
    header.container {
      padding: 10px 20px; }
    header .container {
      padding: 0; }
    header .logo img {
      margin-top: 0; }
    header ul {
      position: absolute;
      top: 56px;
      left: 0px;
      width: 100vw;
      height: calc(100vh - 56px);
      flex-direction: column;
      background: #1D1C20;
      padding: 51px 32px;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 24px;
      box-sizing: border-box;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.15s ease-out, visibility 0.15s ease-out; }
      header ul.open {
        visibility: visible;
        opacity: 1; }
      header ul li {
        margin: 0px;
        font-size: 24px;
        width: 100%; }
      header ul .mobile {
        display: initial; }
    header .right {
      grid-column: 3;
      justify-content: flex-end; }
    header .hamburger {
      position: relative;
      right: -6px;
      background: none;
      border: none;
      cursor: pointer;
      display: initial; }
    header .hamburger img {
      width: 21px; }
    header .logo.mobile {
      display: block; }
    header .left {
      justify-content: flex-start;
      margin-left: 22px;
      z-index: 1; }
    header .mobile {
      display: flex; }
    header .user-icon svg:first-child {
      margin-right: 5px; }
  .dropdown-box {
    position: relative;
    height: 100%;
    max-height: 0px;
    left: 32px;
    top: 0px;
    width: 100%;
    padding: 0px;
    visibility: visible;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.15s ease-in-out, margin-top 0.15s ease-in-out;
    gap: 24px; }
    .dropdown-box.open {
      margin-top: 24px;
      max-height: 999px; }
  section .title {
    font-size: 24px;
    line-height: 31.32px; }
  footer .container {
    grid-template-columns: 1fr;
    row-gap: 30px;
    text-align: center; }
  footer .nav ul {
    grid-template-columns: 1fr; }
  footer .linktree {
    align-items: center;
    margin-right: 0; }
  footer .wrapper {
    margin-top: 0px;
    margin-bottom: 15px; }
  footer .copyright {
    margin-top: 5px; }
  .banner-box {
    max-width: 80%; }
    .banner-box h1 {
      font-size: 28px;
      line-height: 33px; }
    .banner-box label {
      font-size: 16px;
      line-height: 22px; }
    .banner-box .instructor span {
      font-size: 15px;
      line-height: 18px; }
    .banner-box .button {
      padding: 15px 22px 8px; }
  .introduction-wrapper {
    padding-bottom: 30px;
    margin-bottom: 20px; }
  .curriculum-list .image-wrapper {
    width: 42%; }
  .curriculum-list .desc-wrapper {
    width: 54%; }
  .curriculum-list .play {
    width: 10%; }
  .curriculum-list h2 {
    font: 16px / 20px "Calibre-Medium";
    margin-top: 5px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical; }
  .curriculum-list .play svg {
    width: 26px; }
  .curriculum-list .time {
    font-size: 14px;
    line-height: 16px; }
  .curriculum-list .lock .image svg {
    width: 16px; }
  .reviews .image-wrapper {
    width: 20%; }
  .reviews .desc-wrapper {
    width: 76%;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: left; }
  .reviews h2 {
    font-size: 20px;
    line-height: 25px; }
  .reviews h3 {
    font-size: 18px;
    line-height: 22px; }
  .reviews p {
    font-size: 16px;
    line-height: 22px; }
  .reviews .stars {
    margin-top: 10px; }
  .explore-list-wrapper {
    width: 100%; }
    .explore-list-wrapper .curriculums {
      margin-top: 0; }
  .form-center {
    padding: 30px 0;
    margin-top: 70px;
    margin-bottom: 0;
    border: none;
    box-shadow: none;
    background: none; }
    .form-center h2 {
      font: 20px / 24px "Calibre-Bold";
      margin: 0 0 10px; }
    .form-center h3 {
      font: 16px / 20px "Calibre-Regular"; }
    .form-center h3 span {
      font: 16px / 20px "Calibre-Regular"; }
    .form-center h5 {
      font: 12px / 14px "Calibre-Medium"; }
    .form-center a {
      font: 12px / 14px "Calibre-Medium"; }
    .form-center label {
      font: 12px / 14px "Calibre-Medium"; }
    .form-center input, .form-center select {
      font: 16px / 18px "Calibre-Regular"; }
      .form-center input::placeholder, .form-center select::placeholder {
        font: 16px / 18px "Calibre-Regular"; }
    .form-center button {
      font: 14px / 15px "Calibre-Medium"; }
    .form-center .logo-img {
      max-width: 135px;
      margin-bottom: 25px; }
    .form-center .notif {
      font: italic 12px / 14px "Calibre-Medium"; }
    .form-center .notif svg {
      width: 40px;
      top: -5px;
      margin-right: 5px; }
    .form-center .field-wrapper {
      margin-top: 30px; }
    .form-center .field {
      margin-bottom: 20px; }
      .form-center .field:last-child {
        margin-bottom: 0; }
  .curriculums-wrapper {
    margin-top: 30px; }
  .sign-in svg {
    display: block; }
  .banner-wrapper iframe {
    height: 200px; }
  a.back {
    margin-bottom: 30px; }
  .main.introduction-wrapper {
    margin-top: 0;
    padding-top: 0; }
  .scores {
    vertical-align: middle;
    align-items: center;
    justify-content: center; }
    .scores h2 {
      font-size: 16px;
      line-height: 18px;
      margin-bottom: 5px; }
    .scores .score {
      margin-right: 25px; }
    .scores .button-action {
      flex-direction: column; }
      .scores .button-action a, .scores .button-action button {
        margin-bottom: 10px;
        max-height: 38px; }
      .scores .button-action a:last-child {
        margin-bottom: 0; }
  .subscribe-wrapper.subscription-wrapper h2 {
    font-size: 15px;
    line-height: 18px; }
  .subscribe-wrapper.subscription-wrapper h5 {
    font-size: 13px;
    line-height: 16px; }
  .subscribe-wrapper.subscription-wrapper .instructor {
    font: 13px / 13px "Calibre-Medium";
    margin-bottom: 0;
    padding-bottom: 10px; }
    .subscribe-wrapper.subscription-wrapper .instructor span {
      margin-top: 0; }
  .subscribe-wrapper.subscription-wrapper .instructor img {
    max-width: 24px;
    max-height: 24px;
    position: relative;
    top: -2px;
    margin-right: 5px; }
  .subscribe-wrapper.subscription-wrapper .images {
    max-width: 45%;
    min-height: 99px; }
    .subscribe-wrapper.subscription-wrapper .images img {
      border-radius: 4px;
      object-fit: cover;
      aspect-ratio: 3 / 2; }
  .subscribe-wrapper.subscription-wrapper .subscription {
    margin-bottom: 25px; }
  .subscribe-wrapper.subscription-wrapper .box {
    padding: 0 0 0 10px; }
  .subscribe-wrapper.subscription-wrapper .subscription-box {
    align-items: start;
    margin-bottom: 10px; }
  .progress .status-bar {
    height: 5px; }
  .progress span {
    font-size: 12px; }
  .progress .status-desc {
    font: 14px / 16px "Calibre-Medium";
    width: 100%;
    margin-right: 10px; }
  .progress .persen {
    font-size: 14px; }
  .progress svg {
    width: 15px; }
  .progress .ratings span {
    font: 12px / 15px "Calibre-Medium"; }
  .progress .ratings .stars svg {
    width: 17px; }
  .progress .status-desc svg {
    width: 13px;
    top: -2px; }
  .progress .ratings {
    margin-top: 10px;
    justify-content: initial; }
  .progress span.persen {
    font: 20px / 25px "Calibre-Medium";
    color: #ED182D;
    position: relative;
    top: 2px; }
    .progress span.persen.blue {
      color: #4AE1D2;
      display: flex;
      gap: 6px;
      align-items: center; }
    .progress span.persen img {
      width: 16px;
      height: auto; }
  .progress.mobile {
    display: block; }
  section.title h1 {
    font-size: 28px;
    line-height: 30px; }
  .subscribe-wrapper {
    top: 0;
    margin-top: 0; }
    .subscribe-wrapper .instructor span {
      margin-top: 3px; }
    .subscribe-wrapper .button.small {
      font-size: 16px;
      line-height: 12px;
      min-width: auto;
      padding: 17px 25px 11px;
      width: 100%; }
    .subscribe-wrapper .button.small.red {
      font-size: 16px;
      line-height: 12px;
      min-width: auto;
      padding: 17px 25px 11px;
      width: 100%; }
  .subscribe-wrapper .progress {
    top: 0;
    margin-top: 0; }
    .subscribe-wrapper .progress .instructor span {
      margin-top: 3px; }
    .subscribe-wrapper .progress .button.small {
      font-size: 16px;
      line-height: 12px;
      padding: 7px 20px;
      vertical-align: middle;
      width: auto;
      display: inline-block;
      position: relative; }
      .subscribe-wrapper .progress .button.small.continue {
        padding: 13px 25px 7px 20px; }
    .subscribe-wrapper .progress .ratings {
      display: flex;
      align-items: center;
      justify-content: flex-end; }
    .subscribe-wrapper .progress .stars-wrapper {
      position: absolute;
      left: 0;
      min-width: 130px; }
    .subscribe-wrapper .progress .button svg {
      position: relative;
      top: 2px;
      margin-right: 2px; }
      .subscribe-wrapper .progress .button svg.arrow {
        width: 21px;
        top: 6px;
        position: absolute; }
  .sidebar-mobile {
    border-radius: 8px;
    padding: 10px 20px;
    background: #ED182D;
    margin-bottom: 30px; }
    .sidebar-mobile span {
      position: relative;
      top: 3px; }
    .sidebar-mobile a {
      font: 18px / 22px "Calibre-Bold";
      color: white; }
  .form-field label {
    font-size: 15px;
    margin-bottom: 5px;
    display: table; }
  .form-field input, .form-field input::placeholder {
    font-size: 14px;
    padding: 15px 15px 10px; }
  .form-field .field {
    margin-bottom: 10px; }
  .order_history_wrapper .head {
    display: none; }
  .order_history .row {
    display: block;
    position: relative; }
    .order_history .row .columns {
      width: 100%;
      display: block;
      margin: 0 0 20px; }
      .order_history .row .columns:last-child {
        margin-bottom: 0; }
    .order_history .row a {
      position: absolute;
      bottom: 0; }
  .order_history .order_status {
    display: flex; }
    .order_history .order_status .vertical-middle-right {
      margin: auto 0 0; }
  .order-history-box .order-status {
    margin-top: 10px; }
  .order-history-box .four.columns {
    padding-bottom: 20px; }
    .order-history-box .four.columns:last-child {
      padding-bottom: 0; }
  .order-history-box .help-center-btn {
    padding: 9px 20px 4px; }
  .payment-content ul, .payment-content ol {
    font-size: 17px; }
  .contact-page .banner-wrapper.contact-bg {
    background-image: url("/static/images/academy/contact_mb.png?b3f600a4ab66") !important;
    min-height: 205px; }
  .contact-page .form-center {
    padding: 30px 15px; }
    .contact-page .form-center h1 {
      font-size: 28px;
      line-height: 30px; }
    .contact-page .form-center label {
      font-size: 15px;
      line-height: 18px; }
    .contact-page .form-center input, .contact-page .form-center input::placeholder, .contact-page .form-center textarea, .contact-page .form-center textarea::placeholder {
      font-size: 16px;
      line-height: 18px; }
  .text-page .mt-50 {
    margin-top: 80px; }
  .text-page .faqs .dropdown-content p {
    font: 17px / 22px "Calibre-Regular"; }
  .text-page .faqs a {
    font: 17px / 22px "Calibre-Medium"; }
  .text-page .desc-content {
    font: 17px / 22px "Calibre-Regular"; }
    .text-page .desc-content p, .text-page .desc-content h3 {
      font: 17px / 22px "Calibre-Regular";
      margin-bottom: 25px; }
    .text-page .desc-content h2 {
      font: 17px / 22px "Calibre-Bold";
      margin-bottom: 25px; }
    .text-page .desc-content h3 {
      margin-bottom: 0; }
  .curriculum-list .image svg,
  .curriculum-list .lock .image svg {
    width: 35px; }
  .curriculum-list .lock .image .lock-icon {
    width: 12px;
    top: 15px;
    left: 15px; }
  .curriculum-review-wrapper {
    margin-top: 50px; }
    .curriculum-review-wrapper.first {
      margin-top: 20px; }
    .curriculum-review-wrapper.mb-60 {
      margin-bottom: 50px; }
  .modal-window {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    height: 100%;
    border: none;
    position: fixed;
    border-radius: 0; }
    .modal-window .modal-close svg {
      width: 28px; }
    .modal-window .game {
      margin-top: 15px; }
  .rate-curriculum .stars-rate {
    padding: 12px; }
    .rate-curriculum .stars-rate svg {
      width: 40px; }
    .rate-curriculum .stars-rate .info.active {
      margin-top: 0; }
  .contact-page .form-center {
    padding: 0; }
    .contact-page .form-center h1 {
      font-size: 25px; }
    .contact-page .form-center label {
      font-size: 16px;
      margin-bottom: 10px; }
    .contact-page .form-center textarea, .contact-page .form-center textarea::placeholder {
      font-size: 18px; }
  .contact-wrapper {
    margin-top: 30px;
    top: 0; }
  .introduction-wrapper-bg {
    margin-bottom: 30px; }
  .image-banner {
    position: relative;
    top: 0;
    height: auto;
    overflow: hidden; }
  .image-container {
    position: relative;
    top: 0;
    margin: 0;
    height: auto; }
    .image-container img {
      position: relative;
      top: 0;
      width: auto;
      height: 125px; }
  .bg-white {
    display: inline-block; }
  .bg-transparent {
    display: none; }
  .promo-code-box button {
    font-size: 16px;
    line-height: 18px;
    padding: 16px 21px 10px; }
  .breadcrumbs {
    font: 16px / 18px "Calibre-Regular";
    margin-bottom: 10px; }
    .breadcrumbs a {
      font: 16px / 18px "Calibre-Regular"; }
  .game-page .games.grid {
    display: flex;
    justify-content: space-between;
    grid-template-columns: initial;
    gap: 0; }
    .game-page .games.grid a {
      width: 48%;
      margin-right: 2%;
      margin-bottom: 2%; }
      .game-page .games.grid a:nth-child(2n+2) {
        margin-right: 0; }
  .view-all {
    font-size: 15px;
    line-height: 16px; }
    .view-all svg {
      position: relative;
      top: 3px;
      margin-left: 3px;
      width: 5px; }
  .control-box {
    display: none; }
  .retake-quiz {
    max-width: 100%; }
  .info-message-box {
    font: 14px / 16px "Calibre-Regular"; }
    .info-message-box .errorlist .errorlist {
      font: 14px / 16px "Calibre-Regular"; }
    .info-message-box ul {
      font: 14px / 16px "Calibre-Regular"; }
  .button.subscribed img {
    position: relative;
    top: -2px; }
  .games img {
    margin-bottom: 8px;
    height: 116px; }
  .games a {
    margin-bottom: 35px; }
  .games .button.small {
    position: absolute;
    bottom: 0; }
  .payments .ovo-number input {
    font: 16px / 20px "Calibre-Regular";
    padding: 14px 10px 8px 60px; }
    .payments .ovo-number input::placeholder {
      font: italic 14px / 20px "Calibre-Regular"; }
  .payments .ovo-number p {
    font: 16px / 20px "Calibre-Medium"; }
  .payments .ovo-field span {
    font: 16px / 20px "Calibre-Regular";
    padding: 15px 12px 9px; }
  .pagination a, .pagination a:link {
    font: 13px / 18px "Calibre-Bold"; }
  .pagination span {
    font-size: 8px; }
  .my-subscribe-page .subscription-wrapper {
    display: inline-flex;
    gap: 4%;
    flex-wrap: wrap; }
    .my-subscribe-page .subscription-wrapper .subscription {
      max-width: 48%;
      width: 100%; }
    .my-subscribe-page .subscription-wrapper h2 {
      font-size: 16px;
      line-height: 18px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical; }
    .my-subscribe-page .subscription-wrapper .subscription-box {
      display: block; }
    .my-subscribe-page .subscription-wrapper .subscription-box .images {
      width: 100%;
      max-width: 100%;
      min-height: auto;
      margin-bottom: 10px; }
      .my-subscribe-page .subscription-wrapper .subscription-box .images img {
        border-radius: 4px; }
    .my-subscribe-page .subscription-wrapper .subscription {
      margin-bottom: 0;
      border: none; }
    .my-subscribe-page .subscription-wrapper .box {
      padding: 0; }
    .my-subscribe-page .subscription-wrapper .instructor {
      padding-top: 10px;
      padding-bottom: 0; }
    .my-subscribe-page .subscription-wrapper .progress .ratings {
      display: block;
      margin-top: 0; }
      .my-subscribe-page .subscription-wrapper .progress .ratings .button {
        width: 100%; }
    .my-subscribe-page .subscription-wrapper .progress .status-desc,
    .my-subscribe-page .subscription-wrapper .progress span.persen {
      font-size: 16px;
      line-height: 18px;
      margin-bottom: 10px; }
    .my-subscribe-page .subscription-wrapper .progress .button.small {
      font-size: 14px;
      line-height: 12px;
      margin: 0 0 10px;
      padding: 4px 20px; }
      .my-subscribe-page .subscription-wrapper .progress .button.small:last-child {
        margin-bottom: 0; }
      .my-subscribe-page .subscription-wrapper .progress .button.small svg {
        width: 10px;
        top: 2px; }
    .my-subscribe-page .subscription-wrapper .progress .stars-wrapper {
      position: relative;
      margin-bottom: 15px; }
    .my-subscribe-page .subscription-wrapper .progress .button.small.continue {
      padding: 10px 25px 6px 20px; }
      .my-subscribe-page .subscription-wrapper .progress .button.small.continue svg.arrow {
        width: 18px;
        top: 4px; }
  .subscribed_box {
    font: 11px / 15px "Calibre-Regular";
    padding: 3px 8px 2px;
    border-radius: 0px 4px 4px 0px;
    top: 8%; }
    .subscribed_box svg {
      top: 2px;
      max-width: 10px; } }