:root {
  --white-color:            #ffffff;
  --white-trans:            rgba(255,255,255,0.75);
  --green-color:            #46b084;
  --green-trans:            rgba(70,176,132,0.75);
  --yellow-color:           #ffdf81;
  --yellow-trans:           rgba(255,223,129,0.75);
  --red-color:              #f65129;
  --red-trans:              rgba(246,81,41,0.75);
  --section-bg-color:       #f0f8ff;
  --alternate-color:        #366854;
  --dark-color:             #000000;
  --dark-trans:             rgba(0,0,0,0.75);
  --p-color:                #212529;
  --border-color:           #e9eaeb;

  --body-font-family:       "League Spartan", sans-serif;
  --heading-font-family:    "Bree Serif", serif;
  --font-weight-thin:       200;
  --font-weight-light:      300;
  --font-weight-regular:    400;
  --font-weight-medium:     600;
  --font-weight-bold:       700;

  --body-font-size:         calc(15px + 0.390625vw);
  --giant-font-size:        2.8rem;
  --jumbo-font-size:        2.5rem;
  --xxxlarge-font-size:     2rem;
  --xxlarge-font-size:      1.8rem;
  --xlarge-font-size:       1.5rem;
  --large-font-size:        1.3rem;
  --medium-font-size:       1.2rem;
  --upnormal-font-size:     1.1rem;
  --normal-font-size:       1rem;
  --small-font-size:        0.8rem;
  --mini-font-size:         0.75rem;

  --border-radius-large:    100px;
  --border-radius-medium:   30px;
  --border-radius-small:    10px;
}

body {
/*  background-image: url('../images/close-up-young-business-team-working.jpg');*/
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-light);
  font-size: var(--body-font-size);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
  font-family: var(--heading-font-family);
}

h1 { font-size: var(--xxlarge-font-size); }
h2 { font-size: var(--xlarge-font-size); }
h3 { font-size: var(--large-font-size); }
h4 { font-size: var(--medium-font-size); }
h5 { font-size: var(--upnormal-font-size); }
h6 { font-size: var(--body-font-size); }

@media (min-width: 576px) {
    h1 { font-size: var(--giant-font-size); }
    h2 { font-size: var(--jumbo-font-size); }
    h3 { font-size: var(--xxxlarge-font-size); }
    h4 { font-size: var(--xxlarge-font-size); }
    h5 { font-size: var(--xlarge-font-size-font-size); }
    h6 { font-size: var(--medium-font-size); }
}

p {  }

ul li {  }

a, 
button {
  touch-action: manipulation;
  transition: all 0.3s;
}

a {
  color: var(--green-color);
  text-decoration: none;
}

a:hover {
  color: var(--red-color);
}

b,
strong {
  font-weight: var(--font-weight-medium);
}

nav[aria-label="breadcrumb"] {
  background: var(--white-color);
  border-radius: var(--border-radius-large);
  display: inline-block;
  padding: 7px 16px 3px 16px;
}

small { font-size: var(--small-font-size); }

.fs-mini { font-size: var(--mini-font-size)!important }
.fs-small { font-size: var(--small-font-size)!important }
.fs-normal { font-size: var(--normal-font-size)!important }
.fs-upnormal { font-size: var(--upnormal-font-size)!important }
.fs-medium { font-size: var(--medium-font-size)!important }
.fs-large { font-size: var(--large-font-size)!important }
.fs-xlarge { font-size: var(--xlarge-font-size)!important }
.fs-xxlarge { font-size: var(--xxlarge-font-size)!important }
.fs-xxxlarge { font-size: var(--xxxlarge-font-size)!important }
.fs-jumbo { font-size: var(--jumbo-font-size)!important }
.fs-giant { font-size: var(--giant-font-size)!important }


.bg-white {
  background-color: var(--white);
}

.bg-white-trans {
  background-color: var(--white-trans);
}

.bg-dark-trans {
  background-color: var(--dark-trans);
}

.bg-green {
  background-color: var(--green-color);
}

.bg-green-trans {
  background-color: var(--green-trans);
}

.bg-red {
  background-color: var(--red-color);
}

.bg-red-trans {
  background-color: var(--red-trans);
}

.bg-yellow {
  background-color: var(--yellow-color);
}

.bg-yellow-trans {
  background-color: var(--yellow-trans);
}

.bg-hover-white:hover {
  background-color: var(--white);
}

.bg-hover-white-trans:hover {
  background-color: var(--white-trans);
}

.bg-hover-dark-trans:hover {
  background-color: var(--dark-trans);
}

.bg-hover-green:hover {
  background-color: var(--green-color);
}

.bg-hover-green-trans:hover {
  background-color: var(--green-trans);
}

.bg-hover-red:hover {
  background-color: var(--red-color);
}

.bg-hover-red-trans:hover {
  background-color: var(--red-trans);
}

.bg-hover-yellow:hover {
  background-color: var(--yellow-color);
}

.bg-hover-yellow-trans:hover {
  background-color: var(--yellow-trans);
}

.text-green {
  color: var(--green-color);
}

.text-red {
  color: var(--red-color);
}

.text-yellow {
  color: var(--yellow-color);
}

.text-dark {
  color: var(--dark-color);
}

.text-white {
  color: var(--white-color);
}

.text-hover-green:hover {
  color: var(--green-color);
}

.text-hover-red:hover {
  color: var(--red-color);
}

.text-hover-yellow:hover {
  color: var(--yellow-color);
}

.text-hover-dark:hover {
  color: var(--dark-color);
}

.text-hover-white:hover {
  color: var(--white-color);
}

#headerCarousel .owl-dots {
  display: none;
}

@media screen and (max-width: 767px) {
  #headerCarousel .ratio-21x9 {
    --bs-aspect-ratio: 80%;
  }
}

/* NAVBAR */
.navbar-nav {
  width: 100%;
}

.navbar-nav .nav-link {
  font-weight: var(--font-weight-regular);
  padding: 15px 20px;
}
.navbar-expand-lg .navbar-nav .nav-link {
  padding-left: 15px;
  padding-right: 15px;
  font-size: var(--upnormal-font-size);
}
.navbar-nav .nav-item > .nav-link.active,
.navbar-nav .nav-item > .nav-link:hover {
  color: var(--red-color);
}

.navbar-nav .nav-item > .nav-link:hover {
  background: var(--yellow-color);
}

.dropdown-menu {
  border: 1px solid var(--border-color);
}

.dropdown-item {
  font-weight: var(--font-weight-regular);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  padding-top: 8px;
  padding-bottom: 8px;
}

.dropdown-menu li:last-child .dropdown-item {
  border-bottom: 0;
}

.dropdown-item.active, 
.dropdown-item:active,
.dropdown-item:focus, 
.dropdown-item:hover {
  background: transparent;
  color: var(--red-color);
}

.dropdown-toggle::after {
  position: relative;
  float: right;
  left: 3px;
  top: 10px;
}

@media screen and (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

.navbar-toggler {
  border: 0;
  padding: 0;
  cursor: pointer;
  margin: 0;
  width: 30px;
  height: 35px;
  outline: none;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
  top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transform: rotate(-45deg);
}

.navbar-toggler .navbar-toggler-icon {
  background: var(--dark-color);
  transition: background 10ms 300ms ease;
  display: block;
  width: 30px;
  height: 2px;
  position: relative;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
  transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
  position: absolute;
  right: 0;
  left: 0;
  background: var(--dark-color);
  width: 30px;
  height: 2px;
  content: '';
}

.navbar-toggler .navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
  top: 8px;
}


/* FORM */
.form-floating>label { font-size: var(--normal-font-size); }
.form-floating>.form-control, .form-floating>.form-control-plaintext { padding: 0.75rem }

#pejabat .card {  }
#pejabat .card .card-title { display: none }
#pejabat .card:hover .card-title { display: block }
#pejabat .card:hover .card-text { display: none }
#pejabat .card .card-img-overlay { height: auto }
#pejabat .card:hover > .card-img-overlay { height: auto }

#berita .card img { max-width:100%; margin: 1rem 0; }
h6.card-title { font-size: var(--body-font-size); }

.img-cover {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

#peta iframe {
  width: 100%;
  height: 300px;
}

#layanan a:hover {
  background-color: var(--red-color) ;
}

#carousel img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  position: absolute;
  top: 30%;
  left: 3rem;
  opacity: 0.15;
}

.columns-break      { padding: 1rem 1rem }
.columns-break p    { text-align: justify }

#peta iframe {
  height: 100%;
}

@media (min-width:768px){
  .columns-break {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count:    2; /* Firefox */
    column-count:         2;
    -webkit-column-gap:   50px; /* Chrome, Safari, Opera */ 
    -moz-column-gap:      50px; /* Firefox */
    column-gap:           50px;
    column-rule-color: #ccc; /* Optional */
    column-rule-style: dashed; /* Optional */
    column-rule-width: 2px; /* Optional */
  }
}

@media (min-width:1024px){
    .columns-break {
        -webkit-column-count: 3;
        -moz-column-count:    3;
        column-count:         3;
        -webkit-column-gap:   50px;
        -moz-column-gap:      50px;
        column-gap:           50px;
        column-rule-color: #ccc;
        column-rule-style: dashed;
        column-rule-width: 2px;
    }
}