html {
  background-color: #000;
}

body {
  background-color: #f7fafc;
  width: 1080px;
  margin: auto;
}
body nav.navbar {
  padding: 32px 0;
  background-color: #162856;
}
body section#home {
  height: 1767px;
  background-image: url("https://mitratel.lodagency.co.id/android/assets/img/bg-body.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;
}
body section#home .container-fluid .akhlak-wrapper {
  margin: auto;
  width: 800px;
  height: 600px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1);
  background-image: url("../img/home/background.svg");
  background-repeat: no-repeat;
}
body section#home .container-fluid .akhlak-wrapper #hand {
  height: 200px;
  width: 100%;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  bottom: 50px;
}
body section#home .container-fluid .akhlak-wrapper #akhlak {
  height: 32px;
  width: 100%;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  bottom: 340px;
}
body section#home .container-fluid .akhlak-wrapper .type {
  height: 100%;
  position: relative;
  width: 660px;
}
body section#home .container-fluid .akhlak-wrapper .type #a {
  position: absolute;
  bottom: 100px;
  left: 10px;
  transition: 0.25s ease-in-out;
}
body section#home .container-fluid .akhlak-wrapper .type #a:hover {
  transform: scale(1.125);
}
body section#home .container-fluid .akhlak-wrapper .type #a > div {
  position: absolute;
  left: -110px;
  top: 140px;
}
body section#home .container-fluid .akhlak-wrapper .type #a > div img {
  height: 24px;
}
body section#home .container-fluid .akhlak-wrapper .type #k {
  position: absolute;
  bottom: 310px;
  transition: 0.25s ease-in-out;
}
body section#home .container-fluid .akhlak-wrapper .type #k:hover {
  transform: scale(1.125);
}
body section#home .container-fluid .akhlak-wrapper .type #k > div {
  position: absolute;
  left: -160px;
  top: 80px;
}
body section#home .container-fluid .akhlak-wrapper .type #k > div img {
  height: 30px;
}
body section#home .container-fluid .akhlak-wrapper .type #h {
  position: absolute;
  bottom: 485px;
  left: 90px;
  transition: 0.25s ease-in-out;
}
body section#home .container-fluid .akhlak-wrapper .type #h:hover {
  transform: scale(1.125);
}
body section#home .container-fluid .akhlak-wrapper .type #h > div {
  position: absolute;
  left: -90px;
  top: -10px;
}
body section#home .container-fluid .akhlak-wrapper .type #h > div img {
  height: 24px;
}
body section#home .container-fluid .akhlak-wrapper .type #l {
  position: absolute;
  bottom: 485px;
  left: 345px;
  transition: 0.25s ease-in-out;
}
body section#home .container-fluid .akhlak-wrapper .type #l:hover {
  transform: scale(1.125);
}
body section#home .container-fluid .akhlak-wrapper .type #l > div {
  position: absolute;
  right: -20px;
  top: -10px;
}
body section#home .container-fluid .akhlak-wrapper .type #l > div img {
  height: 30px;
}
body section#home .container-fluid .akhlak-wrapper .type #a2 {
  position: absolute;
  bottom: 310px;
  left: 470px;
  transition: 0.25s ease-in-out;
}
body section#home .container-fluid .akhlak-wrapper .type #a2:hover {
  transform: scale(1.125);
}
body section#home .container-fluid .akhlak-wrapper .type #a2 > div {
  position: absolute;
  right: -120px;
  top: 80px;
}
body section#home .container-fluid .akhlak-wrapper .type #a2 > div img {
  height: 30px;
}
body section#home .container-fluid .akhlak-wrapper .type #k2 {
  position: absolute;
  bottom: 100px;
  left: 440px;
  transition: 0.25s ease-in-out;
}
body section#home .container-fluid .akhlak-wrapper .type #k2:hover {
  transform: scale(1.125);
}
body section#home .container-fluid .akhlak-wrapper .type #k2 > div {
  position: absolute;
  right: -140px;
  top: 140px;
}
body section#home .container-fluid .akhlak-wrapper .type #k2 > div img {
  height: 24px;
}
body section#select-games {
  height: 1920px;
}
body section#select-games #puzzle {
  height: 960px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../img/home/game-1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
  transition: 0.5s ease-in-out;
}
body section#select-games #puzzle::before {
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  background-image: linear-gradient(90deg, rgba(33, 46, 80, 0.85), rgba(255, 255, 255, 0));
  z-index: -1;
}
body section#select-games #puzzle:hover img {
  transform: scale(1.2);
}
body section#select-games #matching {
  height: 960px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../img/home/game-2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
  transition: 0.5s ease-in-out;
}
body section#select-games #matching::before {
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  background-image: linear-gradient(90deg, rgba(33, 46, 80, 0.85), rgba(255, 255, 255, 0));
  z-index: -1;
}
body section#select-games #matching:hover img {
  transform: scale(1.2);
}
body section#detail {
  background-image: url("https://mitratel.lodagency.co.id/android/assets/img/bg-body.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;
  padding: 64px 0;
  min-height: 1767px;
}
body section#detail header h1 {
  font-size: 96px;
  color: #162856;
}
body section#detail header p, body section#detail header ul li {
  font-size: 28px;
  color: #272727;
}
body section#detail article {
  margin-top: 64px;
}
body section#detail article .preview-image {
  margin-bottom: 64px;
}
body section#detail article .preview-image img, body section#detail article .preview-image video {
  border-radius: 25px;
  height: 550px;
  -o-object-fit: cover;
     object-fit: cover;
}
body section#detail article .carousel .item {
  border-radius: 25px;
  overflow: hidden;
}
body section#detail article .carousel .item img {
  -o-object-fit: cover;
     object-fit: cover;
}
body section#detail article .carousel .item .video {
  position: relative;
  height: 200px;
}
body section#detail article .carousel .item .video video {
  -o-object-fit: cover;
     object-fit: cover;
  height: 200px;
}
body section#detail article .carousel .item .video button {
  background-color: rgba(22, 40, 86, 0.75);
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body section#puzzle {
  background-image: url("https://mitratel.lodagency.co.id/android/assets/img/bg-body.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;
  min-height: 1767px;
  padding: 64px 0;
}
body section#puzzle #collage .item.ui-draggable.ui-draggable-handle.ui-droppable {
  border: 1px solid #fff;
}
body section#puzzle #collage-res {
  color: #162856;
  padding: 0 2rem;
}
body section#puzzle #collage-res p {
  font-size: 28pt !important;
  font-weight: 200;
}
body section#puzzle #collage-res h2 {
  font-size: 46pt;
  font-weight: 600;
}
body section#puzzle #collage-res #time div {
  border: 5px solid #162856;
  font-size: 36px;
}
body section#puzzle .puzzle-leaderboard {
  margin-top: 64px;
}
body section#puzzle .puzzle-leaderboard h3 {
  margin-bottom: 32px;
  font-size: 36px;
}
body section#puzzle .puzzle-leaderboard table thead th {
  background-color: #162856 !important;
  color: #fff;
  font-size: 24px;
  padding: 18px 12px;
  text-align: center;
}
body section#puzzle .puzzle-leaderboard table tbody td, body section#puzzle .puzzle-leaderboard table tbody th {
  font-size: 24px;
  text-align: center;
  padding: 18px 12px;
}
body section#matching {
  background-image: url("https://mitratel.lodagency.co.id/android/assets/img/bg-body.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;
  min-height: 1767px;
}
body section#matching .countdown {
  margin: auto;
  height: 200px;
  width: 200px;
  border-radius: 100px;
  background: #dc3545;
  display: flex;
  align-items: center;
  justify-content: center;
}
body section#matching .countdown #tracker {
  color: #fff;
  font-size: 64px;
  margin: 0;
}
body section#matching #select1, body section#matching #select2 {
  opacity: 0;
}
body section#matching .eraseLink {
  font-size: 24px;
  margin-bottom: 32px !important;
}
body section#matching .FL-left {
  width: 45% !important;
  margin-top: 32px !important;
}
body section#matching .FL-left li {
  background: #162856 !important;
}
body section#matching .FL-mid {
  width: 10% !important;
  margin-top: 32px !important;
}
body section#matching .FL-right {
  width: 45% !important;
  margin-top: 32px !important;
}
body section#matching .FL-right li {
  background: #08a1ac !important;
}
body section#matching .fieldsLinker li {
  font-size: 28px;
  border-radius: 25px !important;
  border: 0 !important;
  min-height: 200px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 32px;
}
body section#matching .fieldsLinker li > div {
  pointer-events: none;
  font-weight: 400 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#transition {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  background-color: #162856;
  display: none;
  transition: 0.5s ease-in-out;
}
#transition.show {
  display: block;
  opacity: 0;
}
#transition.play-in {
  opacity: 1;
}
#transition.play-out {
  opacity: 1;
}

#finish-layer, #failed-layer {
  background-image: url("https://mitratel.lodagency.co.id/android/assets/img/bg-body.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  transform: translateY(100%);
  transition: 0.5s ease-in-out;
}
#finish-layer.show, #failed-layer.show {
  transform: translateY(0);
}
#finish-layer header, #failed-layer header {
  text-align: center;
}
#finish-layer header h3, #failed-layer header h3 {
  margin-bottom: 0;
  font-size: 32px;
}
#finish-layer header h1, #failed-layer header h1 {
  font-size: 96px;
  font-weight: 600;
}
#finish-layer article, #failed-layer article {
  text-align: center;
}
#finish-layer article p, #failed-layer article p {
  margin: 32px 0;
  font-size: 32px;
  color: #777777;
}
#finish-layer article p span, #failed-layer article p span {
  color: #162856;
  font-weight: 600;
}
#finish-layer article h3, #failed-layer article h3 {
  font-size: 48px;
  font-weight: 600;
}
#finish-layer article a, #failed-layer article a {
  font-size: 32px;
  border: 0;
  border-radius: 0;
  padding: 24px 36px;
  margin-top: 36px;
  background-color: #162856;
}
#finish-layer #confetti, #failed-layer #confetti {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: block;
  z-index: -1;
}

#start-layer {
  background-image: url("https://mitratel.lodagency.co.id/android/assets/img/bg-body.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  z-index: 999;
  transform: translateY(0);
  transition: 0.25s ease-in-out;
}
#start-layer.hide {
  transform: translateY(-100%);
}
#start-layer .matching-leaderboard {
  margin-top: 128px;
}
#start-layer .matching-leaderboard h3 {
  margin-bottom: 32px;
  font-size: 36px;
}
#start-layer .matching-leaderboard table thead th {
  background-color: #162856 !important;
  color: #fff;
  font-size: 24px;
  padding: 18px 12px;
  text-align: center;
}
#start-layer .matching-leaderboard table tbody td, #start-layer .matching-leaderboard table tbody th {
  font-size: 24px;
  text-align: center;
  padding: 18px 12px;
}
#start-layer header {
  text-align: center;
}
#start-layer header h3 {
  margin-bottom: 0;
  font-size: 32px;
}
#start-layer header h1 {
  font-size: 96px;
  font-weight: 600;
}
#start-layer article {
  text-align: center;
}
#start-layer article p {
  margin: 32px 0;
  font-size: 32px;
  color: #777777;
}
#start-layer article p span {
  color: #162856;
  font-weight: 600;
}
#start-layer article button {
  padding: 0;
  text-decoration: none;
  font-size: 48px;
  background-color: transparent;
  border: 0;
  height: 200px;
  width: 200px;
  border-radius: 100px;
  background: #dc3545;
}

#navbarPopupSplash .modal-body {
  position: relative;
}
#navbarPopupSplash .modal-body img.cover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-backdrop-filter: blur(5px) grayscale(100%);
          backdrop-filter: blur(5px) grayscale(100%);
}
#navbarPopupSplash .modal-body .fast-forward {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
}
#navbarPopupSplash .modal-body .fast-forward button {
  font-size: 32px;
  border: 0;
  border-radius: 0;
  height: 100px;
  width: 100px;
  border-radius: 100px;
  margin-top: 36px;
  background-color: #162856;
  margin-bottom: 256px;
}/*# sourceMappingURL=style.css.map */