body {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700
}

a:hover {
  text-decoration: none
}

.bgWhite {
  background: #fff
}

.bgGrey {
  background: #f5f5f5
}

.heading {
  overflow: hidden
}

.heading h2 {
  float: left;
  margin: 0;
  color: #183b56;
  font-size: 16px;
  text-align: left
}

.heading a {
  float: right;
  color: #ef3340;
  font-size: 13px
}

.navbar .navbar-brand img {
  width: 85px
}

.navbar button .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.navbar #navbarResponsive ul li {
  position: relative
}

.navbar #navbarResponsive ul li a {
  color: #183b56;
  font-size: 13px;
  font-weight: 600
}

.navbar #navbarResponsive ul li a::after {
  display: none
}

.navbar #navbarResponsive ul li a i {
  color: #183b56;
  margin-left: 4px
}

.navbar #navbarResponsive ul li.iconBasket a img {
  width: 13px;
  position: absolute
}

.navbar #navbarResponsive ul li.iconBasket a .boxValue {
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  right: -15px;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  border-radius: 50%;
  text-align: center;
  background: #ef3340
}

.navbar #navbarResponsive ul li.user {
  padding-top: 5px;
  margin-left: 25px
}

.navbar #navbarResponsive ul li.user .boxUser {
  width: 140px
}

.navbar #navbarResponsive ul li.user .boxUser img {
  width: 25px;
  float: left;
  margin-right: 8px;
  border-radius: 50%
}

.navbar #navbarResponsive ul li.user .boxUser p {
  color: #183b56;
  font-size: 12px;
  font-weight: 600;
  padding-top: 3px;
  margin-bottom: 0
}

.navbar #navbarResponsive ul li.user .boxUser p::after {
  display: none
}

.navbar #navbarResponsive ul li.user .boxUser p i {
  margin-left: 4px
}

.boxCartMobile {
  display: none
}

@media only screen and (min-width:320px) and (max-width:480px) {
  .iconBasket {
    display: none
  }

  .boxCartMobile {
    position: relative;
    z-index: 1;
    display: block
  }

  .boxCartMobile .basket {
    margin-top: -2px;
    margin-right: 6px
  }

  .boxCartMobile .basket img {
    width: 16px
  }

  .boxCartMobile .basket .boxBasketMobile {
    position: absolute;
    top: -9px;
    right: -6px;
    background: #ef3340;
    color: #fff;
    width: 19px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    font-size: 11px;
    border-radius: 50%
  }

  .navbar button.navbar-toggler {
    position: relative;
    z-index: 1;
    padding-left: 0
  }

  .navbar button.navbar-toggler:focus {
    outline: 0
  }

  .navbar .boxLogo {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    text-align: center
  }

  .navbar .boxLogo a img {
    padding-top: 3px
  }

  .navbar #navbarResponsive ul li.user {
    margin-left: 0
  }
}

footer {
  background: #001561
}

footer .contentFooter h3 {
  color: #fff;
  font-size: 14px
}

footer .contentFooter ul {
  overflow: hidden;
  padding-left: 0
}

footer .contentFooter ul li {
  float: left;
  list-style: none;
  margin-right: 15px
}

footer .contentFooter ul li a {
  color: #d7dcff;
  font-size: 13px
}

footer .contentFooter ul li .boxIcon {
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border-radius: 3px;
  background: #fff
}

footer .contentFooter ul li .boxIcon i {
  color: #001561;
  font-size: 12px
}

footer .contentFooter img {
  width: 100px;
  margin-bottom: 20px
}

footer .contentFooter p {
  color: #d7dcff;
  font-size: 14px
}

footer .contentSosmed {
  text-align: center
}

footer .contentSosmed .listSosmed ul {
  justify-content: center;
  display: flex;
  padding-top: 8px;
  padding-left: 15px
}

footer .copyright p {
  color: #d7dcff;
  font-size: 14px
}

@media only screen and (min-width:320px) and (max-width:480px) {
  footer .contentSosmed {
    text-align: left
  }

  footer .contentSosmed .listSosmed ul {
    padding-left: 0;
    justify-content: inherit
  }
}

#showListKaryawan .modal-content .modal-header {
  padding: 10px;
  position: relative;
  display: inline-table
}

#showListKaryawan .modal-content .modal-header button {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  width: 35px;
  padding: 0;
  height: 100%;
  border-radius: 3px
}

#showListKaryawan .modal-content .modal-header button span {
  position: relative;
  top: -1px
}

#showListKaryawan .modal-content .modal-header button:focus {
  outline: 0
}

#showListKaryawan .modal-content .modal-body .media img {
  width: 25%
}

#showListKaryawan .modal-content .modal-body .media .media-body h5 span {
  color: #253067;
  font-size: 12px;
  font-weight: 400;
  margin-left: 5px
}

#showListKaryawan .modal-content .modal-body .media .media-body p {
  color: #253067;
  font-size: 14px
}

#showListKaryawan .modal-content .modal-body .media .media-body table tr td {
  padding-bottom: 5px
}

#showListKaryawan .modal-content .modal-body .media .media-body table tr td.label {
  width: 60px;
  color: #7b8994;
  font-size: 14px
}

#showListKaryawan .modal-content .modal-body .media .media-body table tr td.val {
  color: #253067;
  font-size: 14px
}

#slider {
  padding-top: 70px
}

#carousel-1 {
  position: relative
}

#carousel-1 .owl-item .item .textSlider {
  position: absolute;
  bottom: 110px;
  color: #fff
}

#carousel-1 .owl-dots {
  position: absolute;
  bottom: 15px;
  width: 100%
}

#carousel-1 .owl-dots button span {
  width: 9px;
  height: 9px;
  margin: 5px 4px
}

#boxProfile {
  z-index: 1;
  margin-top: -13px;
  position: relative
}

#boxProfile .profile {
  padding: 0 20px;
  position: relative;
  border-radius: 8px
}

#boxProfile .profile .colLeft .media img {
  width: 130px;
  margin-top: -30px;
  border-radius: 5px;
  border: 5px solid #fff
}

#boxProfile .profile .colLeft .media .media-body {
  padding-top: 25px
}

#boxProfile .profile .colLeft .media .media-body h5 {
  color: #253067;
  font-size: 24px
}

#boxProfile .profile .colLeft .media .media-body p {
  color: #253067;
  font-size: 14px
}

#boxProfile .profile .colRight {
  padding-top: 30px
}

#boxProfile .profile .colRight form label {
  color: #7b8994;
  font-size: 13px
}

#boxProfile .profile .colRight form input {
  color: #253067;
  font-size: 13px
}

#boxProfile .profile .boxBtnChange {
  position: absolute;
  top: 7px;
  right: 8px
}

#boxProfile .profile .boxBtnChange .btnChange {
  width: 55px;
  border-radius: 4px;
  text-align: center;
  background: #eff1f9
}

#boxProfile .profile .boxBtnChange .btnChange a {
  color: #a01e33;
  display: block;
  font-size: 13px;
  padding: 3px 0 2px 0
}

#boxProfile .searchKaryawan {
  border-radius: 7px
}

#boxProfile .searchKaryawan form input {
  color: #b4b7c6;
  font-size: 14px;
  border: 1px solid #f0f0f0
}

#boxProfile .searchKaryawan form a {
  width: 100%;
  font-size: 14px;
  background: #ef3340;
  border: 1px solid #ef3340
}

li.select2-results__option {
  font-size: 13px
}

#kalenderjba .headCalendar {
  overflow: hidden
}

#kalenderjba .headCalendar .rightheadCalendar {
  float: right
}

#kalenderjba .headCalendar .rightheadCalendar .boxSearchRight span.select2-selection__rendered {
  width: 235px;
  color: #a2a2a2;
  font-size: 14px
}

#kalenderjba .listActive .headActive {
  padding: 15px;
  background: #001561;
  border-radius: 10px 10px 0 0
}

#kalenderjba .listActive .headActive img {
  width: 45px;
  border-radius: 50%
}

#kalenderjba .listActive .headActive .media-body {
  position: relative
}

#kalenderjba .listActive .headActive .media-body h5 {
  color: #fff;
  font-size: 14px;
  padding-top: 10px;
  margin-bottom: 0
}

#kalenderjba .listActive .headActive .media-body .iconActive {
  position: absolute;
  right: 0;
  bottom: 5px
}

#kalenderjba .listActive .headActive .media-body .iconActive .bullet {
  background: #57cc7b;
  height: 12px;
  width: 12px;
  border-radius: 50%
}

#kalenderjba .listActive .lists {
  padding: 15px
}

#kalenderjba .listActive .lists ul li {
  margin: 15px 0
}

#kalenderjba .listActive .lists ul li img {
  width: 35px;
  border-radius: 50%
}

#kalenderjba .listActive .lists ul li .media-body {
  position: relative
}

#kalenderjba .listActive .lists ul li .media-body h5 {
  font-size: 15px;
  color: #183b56;
  padding-top: 6px;
  margin-bottom: 0
}

#kalenderjba .listActive .lists ul li .media-body .iconActive {
  position: absolute;
  right: 0;
  bottom: 5px
}

#kalenderjba .listActive .lists ul li .media-body .iconActive .bullet {
  background: #57cc7b;
  height: 9px;
  width: 9px;
  border-radius: 50%
}

#kalenderjba .listActive .lists ul li .media-body .iconActive .notActive {
  background: #f2b500
}

#boxMeeting .boxSearchRight {
  float: right;
  width: 255px
}

#boxMeeting .boxSearchRight span {
  color: #929292;
  font-size: 14px
}

#boxMeeting .boxSearchRight span.select2-container--default .select2-selection--single {
  border: 1px solid #e0e0e0
}

#boxMeeting .boxSearchRight .select2-container--default .select2-selection--single {
  height: 35px;
  padding-top: 3px
}

#boxMeeting .boxSearchRight .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 35px
}

#boxMeeting .boxSearch form .form-group {
  position: relative
}

#boxMeeting .boxSearch form .form-group .iconSearch {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  line-height: 35px;
  border-radius: 3px;
  text-align: center
}

#boxMeeting .boxSearch form .form-group .iconSearch svg {
  color: #b7b7b7
}

#boxMeeting .boxCalender ul {
  margin-bottom: 20px;
  border-bottom: 10px solid #f5f5f5
}

#boxMeeting .boxCalender ul li a {
  border: 0;
  color: #a8b2b9;
  font-size: 12px;
  font-weight: bolder;
  text-transform: uppercase
}

#boxMeeting .boxCalender ul li a:hover {
  border: 0
}

#boxMeeting .boxCalender ul li a.active {
  color: #253067;
  border: 0;
  border-bottom: 2.5px solid #253067
}

#boxMeeting .boxCalender .calendar .fc-toolbar .fc-left .fc-button-group button {
  height: 23px;
  padding: 0 3px
}

#boxMeeting .boxCalender .calendar .fc-toolbar .fc-left .fc-button-group button span {
  font-size: 14px;
  line-height: 10px
}

#boxMeeting .boxCalender .calendar .fc-toolbar .fc-left button {
  height: 23px;
  font-size: 14px
}

#boxMeeting .boxCalender .calendar .fc-toolbar .fc-right .fc-button-group button {
  height: 23px;
  padding: 0 5px;
  line-height: 20px
}

#boxMeeting .boxCalender .calendar .fc-toolbar .fc-center h2 {
  font-size: 23px
}

#boxMeeting .boxCalender .calendar table thead tr td span {
  color: #8a888a;
  font-size: 14px
}

#boxMeeting .boxCalender .calendar table tbody tr td a {
  padding: 2px;
  font-size: 12px;
  border-radius: 0
}

#listAkses .boxAkses ul {
  padding: 0;
  overflow: hidden
}

#listAkses .boxAkses ul li {
  float: left;
  width: 19.45%;
  margin: 0 3px;
  list-style: none;
  margin-bottom: 6px
}

#listAkses .boxAkses ul li a .bgAkses {
  padding: 12px;
  border-radius: 7px;
  background: #ef3340
}

#listAkses .boxAkses ul li a .bgAkses img {
  width: 18px;
  float: left;
  margin-right: 10px
}

#listAkses .boxAkses ul li a .bgAkses p {
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 0
}

#listNews .boxNews img {
  width: 100%
}

#listNews .boxNews article .boxTag ul {
  margin: 0;
  overflow: hidden;
  padding-left: 0
}

#listNews .boxNews article .boxTag ul li {
  width: 65px;
  float: left;
  list-style: none
}

#listNews .boxNews article .boxTag ul li a .bullet {
  width: 6px;
  height: 6px;
  float: left;
  margin-top: 5px;
  margin-right: 3px;
  border-radius: 50%;
  background: #b90c18;
  border: 1px solid #b90c18
}

#listNews .boxNews article .boxTag ul li a p {
  color: #5a7184;
  font-size: 11px;
  margin-bottom: 0
}

#listNews .boxNews article .titleNews h2 {
  color: #183b56;
  font-size: 14px;
  letter-spacing: .13px
}

#listNews .boxNews article .dateNews span {
  color: #7b8994;
  font-size: 10px
}

#listVideo .boxVideo {
  position: relative
}

#listVideo .boxVideo img {
  width: 100%
}

#listVideo .boxVideo .descVideo {
  position: absolute;
  bottom: 10px;
  left: 10px
}

#listVideo .boxVideo .descVideo p {
  color: #fff;
  font-size: 15px;
  margin-bottom: 0;
  letter-spacing: .13px
}

#listVideo .boxVideo .boxPlay {
  position: absolute;
  right: 10px;
  top: 10px
}

#listVideo .boxVideo .boxPlay img {
  width: 25px
}

#souvenir .boxProduk {
  border-radius: 8px;
  position: relative;
  border: 1px solid #f5f5f5
}

#souvenir .boxProduk .descProduk {
  padding: 10px
}

#souvenir .boxProduk .descProduk .titleProduk a span {
  color: #183b56;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .13px
}

#souvenir .boxProduk .descProduk .stock span {
  color: #5a7184;
  font-size: 12px
}

#souvenir .boxProduk .descProduk .price span {
  color: #183b56;
  font-size: 14px;
  font-weight: 600
}

#souvenir .boxProduk .boxCart {
  display: none;
  width: 45px;
  right: 10px;
  bottom: 10px;
  padding: 4px 3px;
  text-align: center;
  position: absolute;
  border-radius: 4px;
  background: #ef3340
}

#souvenir .boxProduk .boxCart a img {
  width: 12px;
  margin: auto
}

#souvenir .boxProduk .boxLove {
  position: absolute;
  top: 7px;
  right: 7px
}

#souvenir .boxProduk .boxLove a .bgLove {
  background: #d8d8d8;
  width: 25px;
  height: 25px;
  text-align: center;
  border-radius: 50%
}

#souvenir .boxProduk .boxLove a .bgLove svg {
  color: #fff;
  font-size: 13px
}

#souvenir .boxProduk:hover .boxCart {
  display: block
}

#souvenir .boxProduk .boxImg img {
  border-radius: 8px 8px 0 0
}

/* owl responsive*/

.owl-carousel .owl-item img {
  display: block;
  height: 100%;
  width: auto;
  min-width: 100%;
}

.owl-stage-outer * {
  height:100%;
}

#view-ad-image {
  width: 100%;
  height: 100%;
  max-height: 250px;
  overflow: hidden;
  background: red;
  position: relative;
}


@media only screen and (min-width:320px) and (max-width:480px) {
  #slider {
    height: 500px
  }

  .slidercontent{
    height: auto !important;
  }

  #carousel-1 .owl-item .item .listSlide img {
    height: 200px
  }

  #carousel-1 .owl-item .item .listSlide .textSlider {
    bottom: 55px
  }

  #carousel-1 .owl-item .item .listSlide .textSlider h2 {
    font-size: 24px
  }

  #carousel-1 .owl-item .item .listSlide .textSlider .period {
    font-size: 14px;
    font-weight: 300
  }

  #carousel-1 .owl-dots {
    display: none
  }

  #boxProfile .profile {
    padding: 0 15px
  }

  #boxProfile .profile .colLeft .media img {
    width: 100px;
    margin-top: -28px;
    margin-right: 10px !important
  }

  #boxProfile .profile .colLeft .media .media-body {
    padding-top: 4px
  }

  #boxProfile .profile .colLeft .media .media-body .box {
    width: 78%
  }

  #boxProfile .profile .colLeft .media .media-body .box h5 {
    font-size: 17px
  }

  #boxProfile .profile .colLeft .media .media-body .box h5 span {
    font-size: 12px;
    font-weight: lighter
  }

  #boxProfile .profile .colLeft .media .media-body .box p {
    font-size: 13px;
    line-height: 16px
  }

  #boxProfile .profile .boxBtnChange {
    top: 4px;
    right: 4px
  }

  #boxProfile .profile .boxBtnChange .btnChange {
    width: 45px
  }

  #boxProfile .profile .boxBtnChange .btnChange a {
    font-size: 11px;
    padding: 1px 0 1px 0
  }

  #boxProfile .profile .colRight {
    padding-top: 0
  }

  #boxProfile .profile .colRight form label {
    padding-bottom: 0
  }

  #boxProfile .profile .colRight form input {
    padding-top: 0
  }

  #listVideo .boxVideos {
    padding: 1px !important
  }

  #listVideo .boxVideos .boxVideo .descVideo p {
    line-height: 18px
  }

  #boxMeeting .boxSearchRight {
    float: left;
    margin-top: 15px
  }

  #listAkses .boxAkses {
    overflow: scroll
  }

  #listAkses .boxAkses ul {
    margin-bottom: 5px;
    display: inline-flex
  }

  #kalenderjba .listActive {
    margin-top: 20px
  }

  #souvenir .owl-carousel .owl-dots button span {
    width: 9px;
    height: 9px;
    margin: 5px 3px
  }
}

#content {
  padding-top: 70px
}

#listProduk .listboxProduk .produk img {
  width: 100%
}

#listProduk .listboxProduk .produk span {
  color: #183b56;
  font-size: 14px;
  position: relative;
  top: 1px
}

#listProduk .listboxProduk .produk .boxContentProduk {
  padding-top: 5px;
  position: relative
}

#listProduk .listboxProduk .produk .boxContentProduk .boxDownload {
  display: none;
  position: absolute;
  top: 9px;
  right: 3px;
  width: 18px;
  height: 18px;
  color: #fff;
  line-height: 16px;
  text-align: center;
  border-radius: 3px;
  background: #ed3343
}

#listProduk .listboxProduk .produk .boxContentProduk .boxDownload svg {
  width: 12px
}

#listProduk .listboxProduk .produk:hover .boxDownload {
  display: block
}

#listProduk .formList .boxFormList {
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e8e8e8
}

#listProduk .formList .boxFormList form label {
  color: #183b56;
  font-size: 14px
}

#listProduk .formList .boxFormList form input {
  font-size: 14px;
  background: 0 0
}

#listProduk .formList .boxFormList form select {
  color: #7b7b7b;
  font-size: 14px;
  background: 0 0
}

#listProduk .formList .boxFormList form textarea {
  font-size: 14px;
  background: 0 0
}

#listProduk .formList .boxFormList form button {
  width: 100%;
  font-size: 13px;
  border-radius: 6px;
  background: #ef3340;
  border: 1px solid #ef3340
}

#listProduk .formList .boxFormList form button:focus {
  box-shadow: none
}