@font-face {
  font-family: Metropolis;
  src: url(/fonts/Metropolis-Regular.otf?f7b5e589f88206b4bd5cb1408c5362e6);
}

@font-face {
  font-family: Metropolis Medium;
  src: url(/fonts/Metropolis-Medium.otf?f4bca87fd0d19e61c27dc96299c75f8c);
}

@font-face {
  font-family: Metropolis Bold;
  src: url(/fonts/Metropolis-Bold.otf?dea4998b081c6c1133a3b5b08ff2218c);
}

@font-face {
  font-family: Metropolis Semibold;
  src: url(/fonts/Metropolis-SemiBold.otf?2556a4f74e2c523893e6928d6e300f1c);
}

@font-face {
  font-family: Metropolis Light;
  src: url(/fonts/Metropolis-Light.otf?c82170e08b76657553ab939bd28e8515);
}

body,
html {
  font-family: Metropolis, sans-serif;
  font-size: 1.095vw;
  color: #000000;
}

body {
  height: 100%;
  background-color: #ffffff;
}

body#landing-page {
  background-color: #ffffff;
}

html {
  height: 100%;
}

a {
  color: #0A4A9B;
  cursor: pointer;
}

a:hover {
  color: #07336b;
  text-decoration: none;
}

section {
  padding: 50px 0;
}

section.footer-section {
  padding: 25px 0;
}

h1 {
  font-size: 2.571em;
}

h2 {
  font-size: 2.143em;
  line-height: 1.4em;
}

h3 {
  font-size: 1.714em;
  line-height: 1.4em;
}

h4 {
  font-size: 1.286em;
  margin-top: 0;
  line-height: 1.4em;
}

h5 {
  font-size: 1.143em;
  line-height: 1.4em;
}

p {
  font-size: 1em;
  line-height: 1.8em;
}

.text-small {
  font-size: 0.857em;
}

.text-xsmall {
  font-size: 0.714em;
  line-height: 1.4em;
}

.text-regular {
  font-family: Metropolis !important;
}

.text-bold {
  font-family: Metropolis Bold !important;
}

.text-semibold {
  font-family: Metropolis Semibold !important;
}

.text-medium {
  font-family: Metropolis Medium !important;
}

.text-italic {
  font-style: italic;
}

.text-prime {
  color: #0A4A9B;
}

.mg-none {
  margin: 0 !important;
}

.mg-l-none {
  margin-left: 0 !important;
}

.mg-l-sm {
  margin-left: 10px !important;
}

.mg-l-m {
  margin-left: 30px !important;
}

.mg-l-lg {
  margin-left: 60px !important;
}

.mg-r-none {
  margin-right: 0 !important;
}

.mg-r-sm {
  margin-right: 10px !important;
}

.mg-r-m {
  margin-right: 30px !important;
}

.mg-r-lg {
  margin-right: 60px !important;
}

.mg-t-none {
  margin-top: 0 !important;
}

.mg-t-xs {
  margin-top: 5px !important;
}

.mg-t-sm,
.mt-10 {
  margin-top: 10px !important;
}

.mg-t-m {
  margin-top: 30px !important;
}

.mg-t-lg {
  margin-top: 60px !important;
}

.mg-b-none {
  margin-bottom: 0 !important;
}

.mg-b-sm {
  margin-bottom: 10px !important;
}

.mg-b-m {
  margin-bottom: 30px !important;
}

.mg-b-lg {
  margin-bottom: 60px !important;
}

.pad-l-none {
  padding-left: 0 !important;
}

.pad-l-sm {
  padding-left: 10px !important;
}

.pad-l-m {
  padding-left: 30px !important;
}

.pad-l-lg {
  padding-left: 60px !important;
}

.pad-r-none {
  padding-right: 0 !important;
}

.pad-r-sm {
  padding-right: 10px !important;
}

.pad-r-m {
  padding-right: 30px !important;
}

.pad-r-lg {
  padding-right: 60px !important;
}

.pad-b-none {
  padding-bottom: 0 !important;
}

.pad-b-sm {
  padding-bottom: 10px !important;
}

.pad-b-m {
  padding-bottom: 30px !important;
}

.pad-b-lg {
  padding-bottom: 60px !important;
}

.bg-blue-foodizz {
  background: #F2F6FF;
}

.bg-gradient-foodizz {
  background: transparent linear-gradient(180deg, #F2F6FF 0%, #2B85C4 100%) 0% 0% no-repeat padding-box;
}

.navbar.navbar-default.navbar-transparent {
  background-color: #ffffff;
  border-color: transparent;
  padding-top: 0;
  box-shadow: 0 5px 10px 0 rgba(139, 127, 98, 0.35);
}

.navbar.navbar-default.navbar-transparent .navbar-nav > li > a {
  font-family: Metropolis Semibold;
  color: #0A4A9B;
}

.navbar-brand img {
  height: 50px;
}

.header-intro {
  margin-top: 80px;
}

.header-intro .owl-dots {
  position: absolute;
  bottom: 30px;
  width: 100%;
  height: 20px !important;
}

.header-intro .owl-dots .owl-dot span {
  background: transparent !important;
  border: 2px solid #0A4A98;
}

.header-intro .owl-dots .owl-dot.active span {
  background: #0A4A98 !important;
}

.btn.btn-ext {
  padding-right: 60px;
  padding-left: 60px;
}

.card {
  position: relative;
  border-radius: 5px;
  background: #ffffff;
  margin-bottom: 30px;
}

.card h3.card-heading,
.card h4.card-heading {
  margin-bottom: 30px;
  margin-top: 0;
}

.card h4.card-title {
  font-size: 1.429em;
}

.card.card-pd__none {
  padding: 0;
}

.card.card-pd__lg {
  padding: 60px;
}

.card.card-pd__md,
.card .card-pd__md {
  padding: 40px;
}

.card.card-pd__md.card-pd_tb__none,
.card .card-pd__md.card-pd_tb__none {
  padding-top: 0;
  padding-bottom: 0;
}

.card.card-pd__md.card-pd_tb__sm,
.card .card-pd__md.card-pd_tb__sm {
  padding-top: 20px;
  padding-bottom: 20px;
}

.card.card-pd__sm {
  padding: 20px;
}

.card.card-pd__sm.card-pd_tb__md {
  padding-top: 40px;
  padding-bottom: 40px;
}

.card.card-boxed {
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.2);
}

.card.card-list-header {
  padding: 15px 0;
}

.card.card-list-header .list-group {
  height: calc(65vh - 38px);
  margin-bottom: 0;
}

.card.card-list-header .list-group .list-header {
  padding: 0 15px 15px 15px;
  position: relative;
}

.card.card-list-header .list-group .list-header .line-separator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #2B85C4 0%, #539BCF 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 10px #0000001A;
}

.card.card-list-header .list-group .list-group-item {
  border-radius: 0 !important;
  border: 0;
  padding: 8px 15px;
}

.card.card-list-header .list-group .list-group-item.active {
  background: transparent linear-gradient(270deg, #B2D1EC 0%, #539BCF 100%) 0% 0% no-repeat padding-box;
}

.card.card-list-header .list-group .list-group-item img.icon {
  width: 25px;
  margin-right: 10px;
}

.media.media-promo .media-right {
  width: 25%;
}

.media.media-50 .media-right,
.media.media-50 .media-left {
  width: 50%;
}

.tiles {
  margin-right: -10px;
}

.tiles .tile {
  display: block;
  float: left;
  width: 270px !important;
  position: relative;
  overflow: hidden;
  margin: 0 10px 10px 0;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
}

.home-reg-step {
  color: #0A4A9B;
}

.home-reg-step img {
  margin-bottom: 15px;
}

.home-reg-step p span {
  font-size: 2.143em;
  margin-right: 10px;
}

.panel-group.panel-bb .panel {
  border-color: #0A4A9B;
}

.panel-group.panel-bb .panel .panel-heading {
  background-image: linear-gradient(277deg, #4878B2 100%, #0A4A9B);
  color: #ffffff;
}

.panel-group.panel-bb .panel .panel-heading.collapsed {
  background-color: #ffffff;
  background-image: none;
  color: #5f5f5f;
}

.panel-group.panel-bb .panel .list-group a.list-group-item {
  border: none;
}

.panel-group.panel-bb .panel .list-group a.list-group-item:hover,
.panel-group.panel-bb .panel .list-group a.list-group-item:focus {
  background: #D7E9ff;
}

.vertical-tab.tab-left > li {
  float: none;
  margin: 0;
}

ul.list-numbering li {
  list-style: decimal;
}

.home-background {
  background-position: center !important;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  height: 65vh !important;
}

#bb-landing-page {
  background-color: #ffffff;
}

#bb-landing-page .card.card-pd__md .card-equal,
#bb-landing-page .card .card-pd__md .card-equal {
  height: 180px;
}

#bb-landing-page .card.card-pd__md .img-abs-bottom,
#bb-landing-page .card .card-pd__md .img-abs-bottom {
  position: absolute;
  bottom: -40px;
}

#bb-landing-page .card.card-list-pelatihan {
  padding: 15px 0;
}

#bb-landing-page .card.card-list-pelatihan .list-group {
  padding: 8px 15px;
  height: calc(589px - 30px);
  margin-bottom: 0;
}

#bb-landing-page .card.card-list-pelatihan .list-group .list-group-item {
  border-radius: 0 !important;
  border: 0;
}

#bb-landing-page .card.card-list-pelatihan .list-group .list-group-item.active {
  background: transparent linear-gradient(270deg, #B2D1EC 0%, #539BCF 100%) 0% 0% no-repeat padding-box;
}

#bb-landing-page .card.card-list-pelatihan .list-group .list-group-item img.icon {
  width: 25px;
  margin-right: 10px;
}

#bb-landing-page .custom-tab {
  border-bottom: none;
}

#bb-landing-page .custom-tab > li a {
  border-radius: 50px !important;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 10px;
  color: #979797;
}

#bb-landing-page .custom-tab > li a:focus {
  background-color: #ffffff;
}

#bb-landing-page .custom-tab > li.active a {
  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.15);
  font-family: Metropolis Semibold;
  color: #5f5f5f;
}

#bb-landing-page .thumbnail {
  height: auto;
}

#bb-landing-page .thumbnail.jelajahi-pelatihan > img {
  width: 100%;
  height: 112px;
}

#bb-landing-page .custom-thumbnail {
  position: relative;
  height: auto;
  cursor: auto;
  overflow: visible;
}

#bb-landing-page .custom-thumbnail .image-container {
  position: relative;
}

#bb-landing-page .custom-thumbnail .image-container > img {
  width: 100%;
  height: 160px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 5px;
}

#bb-landing-page .custom-thumbnail .image-container .circle-icon {
  position: absolute;
  text-align: center;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
  bottom: -50px;
}

#bb-landing-page .custom-thumbnail .image-container .circle-icon > img {
  height: 50px;
  margin-top: calc(50% - 25px);
}

#bb-landing-page .custom-thumbnail .caption .abs-button {
  position: absolute;
  bottom: -20px;
}

#bb-landing-page .training-category .row {
  margin: 0 -7.5px;
}

#bb-landing-page .training-category .row [class*="col-"] {
  padding: 0 7.5px;
}

#bb-landing-page .training-category .media {
  padding: 25px;
  margin-bottom: 15px;
  border-radius: 5px;
  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.15);
  background: #ffffff;
}

#bb-landing-page .training-category .media .media-left {
  height: 40px;
  padding-right: 30px;
}

#bb-landing-page .training-category .media .media-left img {
  max-width: 120px;
  max-height: 120px;
}

#bb-landing-page .video-trailer {
  padding: 0;
  overflow: hidden;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  box-shadow: 15px 15px 0px 0px #6aa5d2, 25px 15px 50px -20px #0c6cb6;
}

#bb-landing-page .fdz-carousel .owl-dots {
  margin-top: 10px;
}

#bb-landing-page .fdz-carousel .owl-nav {
  position: absolute;
  width: 100%;
  top: calc(50% - 30px);
  margin-top: 0;
  color: #414141;
}

#bb-landing-page .fdz-carousel .owl-nav .owl-prev,
#bb-landing-page .fdz-carousel .owl-nav .owl-next {
  position: absolute;
  background: #ffffff !important;
  width: 30px;
  height: 30px;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.16);
  border-radius: 50%;
}

#bb-landing-page .fdz-carousel .owl-nav .owl-prev i,
#bb-landing-page .fdz-carousel .owl-nav .owl-next i {
  font-size: 18px;
  color: #414141;
  line-height: 1.1em;
}

#bb-landing-page .fdz-carousel .owl-nav .owl-prev {
  left: -15px;
}

#bb-landing-page .fdz-carousel .owl-nav .owl-next {
  right: -15px;
}

#bb-landing-page .testimoni .media {
  padding: 0;
  margin-bottom: 15px;
  border-radius: 5px;
  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.15);
  background: #ffffff;
}

#bb-landing-page .testimoni .media .media-left {
  padding-right: 30px;
}

#bb-landing-page .testimoni .media .media-left img {
  max-height: 120px;
}

#bb-landing-page .map-info {
  width: 100%;
  list-style-type: none;
  display: table;
  max-width: 100%;
}

#bb-landing-page .map-info .list-info {
  display: table-cell;
  margin-right: 1px;
  padding: 0 15px;
}

#bb-landing-page .map-info .list-info img {
  width: 100%;
}

#footer-top {
  margin-top: 100px;
  padding: 0 0 100px 0;
}

#footer-top .footer__list-title {
  font-size: 16px;
  font-family: Metropolis Bold;
  color: #404041;
}

#footer-top .footer__list-1 {
  padding: 0;
  margin-bottom: 20px;
}

#footer-top .footer__list-1 li {
  list-style: none;
}

#footer-top .footer__list-1 li a {
  color: #5b5b5b;
}

@media only screen and (min-width: 1440px) {
  .card.card-list-header .list-group {
    height: calc(53vh - 38px);
  }

  #bb-landing-page .card.card-pd__md .card-equal,
  #bb-landing-page .card .card-pd__md .card-equal {
    height: 300px;
  }

  #bb-landing-page .thumbnail > img {
    height: 210px;
  }

  #bb-landing-page .thumbnail > p.name {
    line-height: 1.4em !important;
  }

  #bb-landing-page .custom-thumbnail .image-container > img {
    height: 250px;
  }

  #footer-top {
    padding: 0 0 100px 0;
  }
}

@media only screen and (min-width: 1920px) {
  .leaderboard {
    height: 300px !important;
    padding: 127px 0 !important;
  }

  .home-background {
    height: 53vh !important;
  }

  .card.card-list-header {
    padding: 15px 0;
  }

  .card.card-list-header .list-group {
    height: calc(53vh - 38px);
  }

  .card.card-pelatihan {
    min-height: 830px !important;
  }

  #bb-landing-page .thumbnail.jelajahi-pelatihan > img {
    height: 200px;
  }

  #bb-landing-page .thumbnail > .caption > p.name {
    height: 2.5em;
    line-height: 1.35em !important;
  }

  #bb-landing-page .card.card-list-pelatihan {
    padding: 15px 0;
  }

  #bb-landing-page .card.card-list-pelatihan .list-group {
    height: calc(830px - 30px) !important;
  }
}

@media only screen and (min-width: 1240px) {
  .container-fluid.fluid-lg {
    padding-right: 160px;
    padding-left: 160px;
  }

  .container-fluid.fluid-md {
    padding-right: 120px;
    padding-left: 120px;
  }

  .container-fluid.fluid-md .no-gutter_left {
    margin-left: -120px;
  }

  .container-fluid.fluid-md .no-gutter_right {
    margin-right: -120px;
    float: right;
  }

  .container-fluid.fluid-sm {
    padding-right: 60px;
    padding-left: 60px;
  }

  .container-fluid.fluid-xs {
    padding-right: 25px;
    padding-left: 25px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .container-fluid.fluid-lg {
    padding-right: 20px;
    padding-left: 20px;
  }

  .container-fluid.fluid-md {
    padding-right: 20px;
    padding-left: 20px;
  }

  .container-fluid.fluid-md .no-gutter_left {
    margin-left: -120px;
  }

  .container-fluid.fluid-md .no-gutter_right {
    margin-right: -120px;
  }
}

@media only screen and (min-width: 768px) {
  .float-right_md {
    float: right;
  }

  .no-float-column {
    display: table-cell;
    vertical-align: middle;
    float: none;
  }

  .text-right_md {
    text-align: right;
  }

  .pad-r-none_md {
    padding-right: 0;
  }

  .navbar-header .x-logo {
    padding-right: 15px;
    padding-left: 15px;
  }

  .navbar-header .x-logo img {
    height: 30px;
    margin-top: 7px;
  }

  .leaderboard {
    height: 200px;
    padding: 77px 0;
  }

  .header__cpw {
    padding: 16% 0;
  }

  .card.card-pelatihan {
    min-height: 589px;
  }

  #bb-landing-page .thumbnail .caption p.name {
    line-height: 1.5em;
    height: 3em;
  }

  #bb-landing-page .custom-thumbnail .image-container .circle-icon {
    right: 30px;
  }

  #bb-landing-page .custom-thumbnail .caption {
    padding: 30px;
  }

  #bb-landing-page .card-background {
    background: url("/image/bedahbisnis/general/grphc-prakerja.jpg");
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@media only screen and (max-width: 767px) {
  body,
  html {
    font-size: 12px;
  }

  section {
    padding: 50px 0;
  }

  .mg-b-none_xs {
    margin-bottom: 0 !important;
  }

  .mg-b-sm_xs {
    margin-bottom: 10px !important;
  }

  .mg-b-m_xs {
    margin-bottom: 30px !important;
  }

  .mg-b-lg_xs {
    margin-bottom: 60px !important;
  }

  .navbar-header .main-logo {
    padding: 10px 15px;
    border-right: 1px solid #979797;
  }

  .navbar-header .main-logo.navbar-brand {
    height: auto;
  }

  .navbar-header .main-logo.navbar-brand > img {
    height: 25px;
  }

  .navbar-header .x-logo {
    float: left;
    padding-top: 10px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .navbar-header .x-logo img {
    height: 20px;
    margin-top: 3px;
  }

  .container-fluid.fluid-md .no-gutter_left {
    margin-left: -15px;
  }

  .container-fluid.fluid-md .no-gutter_right {
    margin-right: -15px;
    float: right;
  }

  .header-pkj .header-background {
    background: #e9f2fe !important;
  }

  .leaderboard {
    padding: 15px 0 !important;
  }

  .home-background {
    background-position: center !important;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    height: 21vh !important;
  }

  .header-intro .owl-dots {
    bottom: 20px;
  }

  #bb-landing-page .card.card-pd__md .card-equal,
  #bb-landing-page .card .card-pd__md .card-equal {
    height: auto;
  }

  #bb-landing-page .card.card-pd__md .img-abs-bottom,
  #bb-landing-page .card .card-pd__md .img-abs-bottom {
    position: relative;
    bottom: 0;
  }

  #bb-landing-page .card.card-list-pelatihan .list-group {
    height: 190px;
  }

  #bb-landing-page .card.card-list-pelatihan .list-group .list-group-item img.icon {
    margin-bottom: 0;
  }

  #bb-landing-page .custom-thumbnail .image-container > img {
    height: 120px;
  }

  #bb-landing-page .custom-thumbnail .image-container .circle-icon {
    bottom: -25px;
    right: 15px;
    width: 50px;
    height: 50px;
  }

  #bb-landing-page .custom-thumbnail .image-container .circle-icon > img {
    height: 30px;
    margin-top: calc(50% - 15px);
  }

  #bb-landing-page .custom-thumbnail .abs-button {
    width: calc(100% - 9px);
    text-align: center;
  }

  #bb-landing-page .home-reg-step {
    margin-bottom: 15px;
    text-align: center;
  }

  #bb-landing-page .fdz-carousel .owl-nav .owl-prev {
    left: 0;
  }

  #bb-landing-page .fdz-carousel .owl-nav .owl-next {
    right: 0;
  }

  #bb-landing-page .map-info {
    padding: 0;
  }

  #bb-landing-page .map-info .list-info {
    display: inline-block;
    margin-right: 1px;
    width: 48%;
    margin-bottom: 15px;
  }

  .card.card-list-header {
    margin-bottom: 15px;
  }

  .card.card-list-header .list-group {
    height: 190px;
  }

  .card.card-list-header .list-group .list-group-item img.icon {
    margin-bottom: 0;
  }

  .media.media-promo .media-body {
    display: block;
    width: 100%;
    text-align: center;
  }

  .media.media-promo .media-right {
    display: block;
    width: 100%;
  }

  .media.media-testimoni .media-left,
  .media.media-testimoni .media-body {
    display: block;
    width: 100%;
    padding-right: 0;
  }

  .media.media-50 .media-body {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }

  .media.media-50 .media-right {
    display: block;
    width: 100%;
    padding-left: 0;
  }

  #footer-top {
    text-align: center;
  }
}

@media (min-width: 560px) and (max-width: 767px) {
  .m-horizontal-scroll .col-xs-10 {
    width: 41.66666667%;
  }
}

@media only screen and (max-width: 420px) {
  .card.card-pd__lg,
  .card.card-pd__md,
  .card .card-pd__md {
    padding: 30px 15px;
  }

  .card.card-tabs {
    padding: 0;
  }

  .card.card-tabs .tab-default .nav > li {
    width: 100%;
    text-align: center;
  }

  .card.card-tabs .tab-default .nav > li > a {
    padding: 15px;
  }

  .card.card-tabs .tab-pd__md .nav-tabs {
    padding: 0;
  }

  .card.card-tabs .tab-pd__md .tab-content {
    padding: 15px;
  }
}