:root {
    --green: #00A85F;
    --green2: #00884d;
    --grey: #606060;
    --black: #000000;
    --purple: #4475A1;
    --purple2: #305a80;
    --purple3: #98bbda;
    --blue: #0d3455;
    --blue2: #062035;
    --blue3: rgb(45, 104, 153);
    --hr: rgb(224, 224, 224);
    --gold: #C1A683;
    --gold2: rgb(156, 121, 75);
    --gold3: #c1a68396;
  }
  .btn-outline-primary
  {
    border: 1px solid white;
    color: white;
  }
  
  hr {
    border-color: var(--hr);
  }
  
  * {
    font-family: "Roboto", sans-serif;
  }
  
  body {
    background-color: white;
  }
  
  .pdless {
    padding: 0px !important;
  }
  
  .grey {
    color: #cecece;
  }
  
  .table td {
    color: #4d4d4d !important;
  }
  
  .btn {
    padding-left: 25px !important;
    padding-right: 30px !important;
  }
  
  .btn-shadow {
    box-shadow: 5px 5px 18px -12px rgba(0, 0, 0, 0.75);
  }
  
  .btn-green {
    background-color: var(--green);
    color: white !important;
  }
  
  .btn-green:hover {
    background-color: var(--green2);
    color: white;
  }
  
  .btn-white--line {
    border: 1px solid rgba(255, 255, 255, 0.164);
    color: rgba(255, 255, 255, 0.534);
  }
  
  .btn-white--line:hover {
    background-color: var(--green);
    border-color: var(--green);
    color: white;
  }
  
  .navbar-kukar {
    background-color: #f8f8f8 !important;
    box-shadow: 0px 9px 27px -30px black;
    padding: 0px !important;
  }
  
  .navbar-padding {
    padding: 10px 0px !important;
  }
  
  .nav-link {
    color: black;
    font-size: 13px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    font-family: "Roboto", sans-serif !important;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .footer-pse
  {
    width: 100%;
  }
  .nav-link.active {
    font-weight: bold !important;
  }
  .nav-link.btn
  {
    margin-left: 10px;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .dropdown-menu {
    border: 0px solid transparent;
    margin-left: 15px;
    margin-top: 30px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.75);
  }
  
  .dropdown-menu::before {
    content: "\A";
    position: absolute;
    top: -10px;
    margin-left: 10px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid white;
  }
  
  .dropdown-item {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 13px;
  }
  .navatas {
    width: 100%;
    background-color: #062035;
  }
  
  .d-inline-block.align-top,
  .nav-logo {
    padding-left: 0px !important;
  }
  
  .navatas .container {
    display: flex;
  }
  
  .navatas-content {
    padding: 15px 0px;
  }
  
  .navatas-text,
  .navatas-text:hover {
    font-size: 12px;
    margin-right: 20px;
    color: white;
  }
  
  .navatas-calendar {
    margin-right: 0px !important;
    background-color: #041727;
    padding: 19px 30px 18px;
  }
  
  .green {
    color: var(--green) !important;
    font-size: 15px;
  }
  
  .navbreaker {
    margin-top: 145px;
  }
  
  .block {
    display: block !important;
    width: 100%;
  }
  .banner {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;
    background-color: gray;
  }
  
  .banner-image {
    width: 100% !important;
    height: 600px !important;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .intro {
    position: relative;
    margin-top: -600px;
    height: 600px;
    background-color: rgba(0, 0, 0, 0.247);
  }
  .intro-search {
    padding-bottom: 200px;
    /* background-color: #0077B5; */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
  }
  
  .intro-title {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
    line-height: 10px;
    font-family: "Roboto", sans-serif;
  }
  .intro-subtext {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 25px;
    font-family: "Roboto", sans-serif;
  }
  
  .intro-text {
    font-size: 50px;
    font-weight: bold;
    color: white;
    line-height: 55px;
  }
  
  .intro-search-frame {
    margin-top: 30px;
    display: flex;
    background-color: white;
    padding: 8px;
    border-radius: 5px;
    box-sizing: border-box;
    width: 50%;
  }
  
  .intro-input {
    padding: 10px;
    flex-grow: 1;
    margin-right: 10px;
    border: 0px solid transparent;
    border-radius: 5px;
  }
  
  .intro-input:focus {
    outline: none;
    background-color: #ebebeb;
  }
  
  .intro-btn {
    padding-left: 40px;
    padding-right: 40px;
    background-color: var(--green);
    color: white;
    border-radius: 5px;
    border: 0px solid transparent;
  }
  
  .intro-btn:hover {
    background-color: var(--green2);
    color: white;
  }
  
  .hotline {
    padding: 0px;
    background-color: #12131a88;
    padding: 15px 0px;
  }
  
  .hotline .container,
  .hotline-right,
  .hotline-left,
  .hotline-heading,
  .hotline-body {
    display: flex;
  }
  
  .hotline-right {
    flex-grow: 1;
  }
  
  .hotline-heading {
    padding-right: 50px;
    border-right: 1px solid rgba(255, 255, 255, 0.11);
    margin-right: 30px;
  }
  
  .hotline-body {
    flex: 1;
  }
  
  .hotline-icon-frame {
    padding-top: 25px;
  }
  
  .hotline-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    background-color: rgba(5, 255, 101, 0.288);
    border: 3px solid #00ff8010;
    color: white;
    box-sizing: border-box;
    border-radius: 50%;
  }
  
  .hotline-right .hotline-icon {
    color: white;
    background-color: rgba(255, 255, 255, 0.068);
    border: 1px solid rgba(255, 255, 255, 0.178);
  }
  
  .hotline-content-frame {
    padding-left: 15px;
    padding-top: 20px;
  }
  
  .hotline-left .hotline-title {
    font-family: "Roboto", sans-serif !important;
  }
  
  .hotline-title {
    font-size: 12px;
    font-weight: bold !important;
    color: white;
    margin-bottom: 0px;
    margin-top: 5px;
  }
  
  .hotline-text {
    color: rgb(224, 224, 224);
    font-family: "Roboto", sans-serif !important;
  }
  .hotline-title--small
  {
    display: none;
  }
  .imagefull {
    width: 100%;
  }
  
  .frame {
    padding: 100px 0px;
  }
  
  .frame2 {
    padding: 0px 0px 100px;
  }
  
  .frame--bg {
    background-color: #0d3455;
    background-image: url(/images/wave-blue.png?5c592f67ee9c276d9eebeb931c7c202e);
  }
  
  .frame--bgmap {
    background-image: url(/images/map.png?c29c847ad7100aa1eb040b9240d3f9f0);
  }
  .frame--grey
  {
    background-color: #f2f2f2;
  }
  .headingtext {
    display: block;
  }
  
  .headingtext--sm {
    padding-top: 20px;
  }
  
  .headingtext-icon {
    padding-right: 0px;
    font-size: 25px;
  }
  
  .headingtext--sm .headingtext-icon {
    font-size: 25px;
  }
  
  .headingtext-title {
    font-size: 28px;
  }
  
  .headingtext--sm .headingtext-title {
    font-size: 20px;
  }
  
  .headingtext-link {
    float: right;
    color: #504f4f;
    padding-top: 25px;
  }
  
  .headingtext-link:hover {
    color: #504f4f;
    cursor: pointer;
  }
  
  .headingtext-text {
    color: var(--grey);
    font-size: 15px;
  }
  
  .headingtext-hr {
    display: block;
    border: 2px solid #e7e7e7;
    margin-top: 10px;
    margin-bottom: 0px;
  }
  .headingtext-back
  {
    display: inline-block;
    margin-bottom: 20px;
    color: grey;
    background-color: rgb(236, 236, 236);
    padding: 7px 23px 7px 15px;
    border-radius: 5px;
    
  }
  .headingtext-back:hover
  {
    color: grey;
    background-color: rgb(224, 224, 224);
    text-decoration: none;
  }
  .headingtext--white {
    color: white;
  }
  
  .headingtext--white .headingtext-link,
  .headingtext--white .headingtext-link:hover {
    color: rgba(255, 255, 255, 0.493);
  }
  
  .headingtext-image {
    filter: grayscale(100%);
    margin-top: 20px;
    width: 30px;
    height: 30px;
  }
  
.post {
  margin-bottom: 20px;
  padding-top: 20px;
  overflow: hidden;
}
  
  .post--sm {
    padding: 10px 15px;
    border-radius: 5px;
    background-color: #f2f2f2bb;
    margin-bottom: 10px;
  }
  
  .post--xs {
    display: flex;
    width: 100%;
  }
  
  .post-image-frame {
    height: 240px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
    background-color: grey;
    border-radius: 10px;
  }
  
  .post--xs .post-image-frame {
    width: 30%;
    height: 80px;
    border-radius: 10px;
  }
  
  .post--xs .post-content-frame {
    width: 70%;
    padding-left: 20px;
  }
  
  .post-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 5px;
    height: 240px;
  }
  
  .post-tag {
    border: 1px solid #E8E8E8;
    padding: 2px 9px 3px;
    border-radius: 5px;
    color: var(--grey);
    font-size: 13px;
    margin-bottom: 15px;
    display: inline-block;
  }
  
  .post-tag-icon {
    color: var(--green);
    font-weight: bold;
    font-size: 16px;
  }
  
  .post--xs .post-tag {
    margin-bottom: 0px;
  }
  
  .post--xs .post-tag,
  .post--xs .post-tag-icon {
    font-size: 10px;
  }
  
  .post-link {
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    line-height: 30px;
    display: block;
    margin-bottom: 5px;
    height: 58px;
    overflow: hidden;
  }
  .post-detail .post-link
  {
    height: auto;
  }
  .post-link:hover {
    cursor: pointer;
    color: var(--black);
  }
  
  .post--sm .post-tag {
    margin-bottom: 15px;
  }
  
  .post--sm .post-link {
    font-size: 15px;
    font-weight: 600;
  }
  .post--xs .post-link {
    font-size: 15px;
    line-height: 20px;
    margin-top: 0px;
  }
  
  .post-date-frame {
    margin-bottom: 10px;
    color: var(--grey);
  }
  
  .post--xs .post-date-frame {
    margin-bottom: 0px;
    margin-top: -10px;
  }
  
  .post-date {
    margin-right: 15px;
    font-size: 13px;
  }
  
  .post--sm .post-date {
    overflow: hidden;
  }
  
  .post--xs .post-date {
    font-size: 10px;
  }
  .post-text {
    color: #4d4d4d;
    text-align: justify;
    font-family: "Roboto", sans-serif !important;
    overflow: hidden;
    height: 70px;
  }
  .post-detail .post-text
  {
    height: auto;
  }
  .post-text-unlimited {
    -webkit-line-clamp: unset;
  }
  
  .post hr {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
  }
  
  .layanan {
    /* border: 2px solid rgba(206, 206, 206, 0.144); */
    /* border-radius: 5px; */
    margin: 30px 0;
    padding: 8px;
    height: 100px;
    width: 100px;
    background-color: #0d35558c;
  }
  
  .layanan.layanan--dark {
    border: 2px solid rgba(160, 160, 160, 0.062);
    background-color: #0f273b00;
  }
  
  .layanan--first {
    border: 2px solid rgba(206, 206, 206, 0.144);
  }
  
  .layanan:hover {
    border: 2px solid rgba(206, 206, 206, 0.144);
  }
  
  .layanan-icon {
    height: 80px;
    width: 80px;
    object-fit: contain;
  }
  
  .layanan-title {
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    height: 55px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  
  .layanan--dark .layanan-title {
    color: var(--blue2);
  }
  
  .layanan-url {
    padding: 3px 6px;
    background-color: #ffffff13;
    font-size: 12px;
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.61);
    margin-bottom: 10px;
    margin-top: 15px;
    display: inline-block;
  }
  .layanan-link
  {
    color: white;
    font-size: 14px;
  }
  
  .layanan--dark .layanan-url {
    background-color: #00884d00;
    color: rgba(0, 131, 70, 0.767);
    padding: 0px;
  }
  
  .layanan-text {
    color: #ffffff8f;
  }
  
  .layanan--dark .layanan-text {
    color: #0000008f;
  }
  
  .layanan .btn {
    font-size: 12px;
  }
  
  .layanan-tag {
    background-color: #0417270c;
    padding: 7px 20px;
    color: #06203556;
    font-size: 10px;
    border-radius: 5px;
    margin-top: 15px;
  }
  
  .layanan-light .layanan-tag {
    background-color: #ffffff0c;
    color: #ffffff56;
  }
  
  .opd {
    padding: 0px;
    margin-top: 20px;
    border-radius: 5px;
  }
  .opd-maps
  {
    width: 100%;
    height: 250px;
    border-radius: 10px;
  }
  .opd-title {
    font-size: 18px;
    margin-bottom: 0px;
    font-weight: bold;
    color: white;
  }
  
  .opd-text {
    font-size: 13px;
    color: #ffffffb7;
    font-family: "Roboto", sans-serif !important;
    height: 40px;
  }
  
  .opd-image-frame {
    width: 100%;
    overflow: hidden;
    height: 280px;
    margin-bottom: 15px;
    border-radius: 5px;
  }
  
  .opd-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0px;
  }
  
  .opd-icon {
    margin-top: -20px;
    color: white;
    font-size: 90px;
    float: right;
    font-weight: bold;
    opacity: 0.1;
  }
  
  .opd-link:hover {
    color: white;
    cursor: pointer;
  }
  
  .opd-flex {
    display: flex;
  }
  
  .opd-flex .opd {
    flex: 1;
    margin-bottom: 5px;
  }
  
  .opd-frame {
    border-radius: 5px;
    position: relative;
    padding: 15px;
    z-index: 1000;
    background-color: var(--green) !important;
    width: 90%;
    margin-top: -80px;
    margin-left: 5%;
    box-shadow: 5px 5px 34px -20px rgba(0, 0, 0, 0.75);
    margin-bottom: 20px;
  }
  .opd-detail .opd-frame
  {
    margin-top: -50px;
    margin-bottom: 0px;
  }
  .opd-link {
    padding: 7px 15px;
    border-radius: 5px;
    display: inline-block;
    margin: auto;
    margin-bottom: 5px;
    background-color: white;
    color: var(--green);
  }
  
  .opd-link:hover {
    background-color: white;
    color: var(--green);
  }
  
  .owl-dots button {
    padding: 5px;
    border-radius: 5px;
    border: 0px solid transparent;
    margin: 0px 2px;
    background-color: #cccccc;
  }
  
  .owl-dots button.active {
    background-color: var(--black);
  }
  
  .footer1 {
    background-color: var(--blue2);
    /* background-image: url(/images/bg-op.png?acee07729bc17e7c46f42dd2961dc958); */
    padding-bottom: 0px;
  }
  .copyright
  {
    margin-top: 80px;
    color: rgba(255, 255, 255, 0.637);
    background-color: #0e142759;
    padding-top: 20px;
    padding-bottom: 15px;
    font-size: 14px;
  }
  .copyright a
  {
    color: rgba(255, 255, 255, 0.637) !important;
  }
  .copyright a:hover
  {
    color: rgba(255, 255, 255, 0.829) !important;
  }
  .footer-logo {
    width: auto;
    height: 50px;
    margin-bottom: 20px;
  }
  
  .footer-text {
    color: rgba(255, 255, 255, 0.795);
    margin-bottom: 5px;
    font-size: 14px;
  }
  a.footer-text:hover
  {
    color: rgba(255, 255, 255, 0.795);
  }
  .footer-title {
    font-weight: bold;
    color: white;
    font-size: 20px;
  }
  .footer-hr
  {
    border: 1px solid rgba(255, 255, 255, 0.288);
  }
  .slider {
    margin-bottom: 50px;
  }
  
  .slider-image-frame {
    height: 100px;
    width: auto;
    background-color: gray;
    border-radius: 10px;
  }
  
  .slider-image {
    background-color: gray;
    border-radius: 10px;
    height: 100px;
    filter: grayscale(0.5);
    max-height: 100%;
    max-width: 100%;
  }

  .slider-video {
    background-color: gray;
    border-radius: 10px;
    width: 100%;
    height: 200px;
    filter: grayscale(0.5);
  }

  .slider-image:hover .slider-video:hover {
    cursor: pointer;
    filter: grayscale(0);
  }
  
  .pager {
    padding-top: 60px;
    padding-bottom: 80px;
    background-color: #f1f1f1;
  }
  
  .pager-bg {
    background-color: #f9f9f9;
    margin-bottom: 50px;
  }
  
  .pager--pict {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
  }
  
  .pager-link {
    color: #a5a5a5;
  }
  
  a.pager-link:hover {
    color: var(--green);
    cursor: pointer;
  }
  
  .pager-divider {
    color: #8f8f8f;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .pager-title {
    font-size: 50px;
    font-weight: bold;
    color: #2b2b2b;
    margin-bottom: 0px;
  }
  
  .pager--pict .pager-title {
    color: #dfdfdf;
  }
  .fitur
  {
    background-color: #F5F5F5;
    display: flex;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 15px;
  }
  .fitur-iconframe
  {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fitur-icon
  {
    width: 50px;
    height: 50px;
    border-radius: 3px;
    background-color: #EBEBEB;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fitur-contentframe
  {
    padding-left: 10px;
  }
  .fitur-title,
  .fitur-title:hover
  {
    color: #000000;
    margin-bottom: 0px;
    font-weight: bold;
  }
  .fitur-link
  {
    margin-bottom: 0px;
    opacity: 0.6;
  }
  .pager-line {
    width: 2px;
    height: 180px;
    background-color: var(--green);
    position: absolute;
    margin-left: -30px;
    margin-top: 15px;
  }
  .detail-text {
    color: #4d4d4d;
    text-align: justify;
    font-family: "Roboto", sans-serif !important;
  }
  
  .detail-divider {
    display: block;
    font-size: 25px;
    color: var(--green);
    margin-bottom: 10px;
  }
  
  .detail-image-frame {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    margin-bottom: 30px;
  }
  
  .detail-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .search-frame {
    display: flex;
    background-color: #f9f9f9;
    border: 1px solid #f3f3f3;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
  }
  
  .search-input {
    flex-grow: 1;
    padding-left: 20px;
    padding-right: 20px;
    background-color: transparent;
    border: 0px solid transparent;
  }
  
  .search-input:hover {
    outline: none;
  }
  
  .search-input:focus,
  .search-input:out-of-range {
    background-color: #f5f5f5;
  }
  
  .search-btn {
    border: 0px solid transparent;
    background-color: transparent;
    padding: 15px 25px;
    color: #a8a8a8;
    border-left: 1px solid #ebebeb;
  }
  
  .search-btn:hover {
    background-color: #e6e6e6;
  }
  
  .content {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
  }
  
  .content-link {
    border: 1px solid #f5f5f5;
    padding: 7px 18px;
    margin-right: 10px;
    margin-bottom: 10px;
    color: #afafaf;
    border-radius: 3px;
  }
  
  .content-link:hover {
    cursor: pointer;
    background-color: #f5f5f5;
    color: #afafaf;
  }
  
  .content-link.active {
    color: var(--green);
    background-color: white;
    border: 1px solid var(--green);
  }
  
  .content-link.active:hover {
    cursor: default;
    text-decoration: none;
  }
  
  .bupati {
    padding-top: 20px;
  }
  
  .bupati-image-frame {
    width: 100%;
    overflow: hidden;
    height: 170px;
    background-color: gray;
    border-radius: 10px 10px 0px 0px;
  }
  .bupati--opd
  {
    margin-bottom: 20px;
  }
  .bupati--opd .bupati-image-frame {
    height: 250px;
  }
  
  .bupati-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .bupati-content-frame {
    width: 100%;
    padding-top: 15px;
    height: 80px;
  }
  
  .bupati--opd .bupati-content-frame {
    height: 200px;
    border: 1px solid #f2f2f2;
    background-color: white;
    padding: 20px;
    border-radius: 0px 0px 10px 10px;
  }
  
  .bupati-name {
    font-size: 13px;
    font-weight: bold;
    color: var(--black);
  }
  
  .bupati--opd .bupati-name,
  .bupati--opd .bupati-name:hover {
    font-size: 20px;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000000;
  }
  
  .bupati-periode {
    margin-top: -15px;
    font-size: 13px;
    color: var(--blue);
  }
  
  .bupati-icon {
    color: var(--green);
    margin-right: 10px;
  }
  
  .bupati-textgrey {
    color: #555555;
    font-size: 14px;
  }
  
  .bupati table {
    font-size: 13px;
  }
  
  .kontak {
    display: flex;
    padding: 10px 20px 7px;
    background-color: whitesmoke;
    border-radius: 10px;
    margin-bottom: 30px;
  }
  
  .kontak-icon {
    font-size: 30px;
    color: #06203521;
    width: 10%;
    margin-top: 10px;
  }
  
  .kontak-content {
    padding-left: 20px;
    width: 90%;
  }
  
  .kontak-title {
    font-size: 15px;
    color: #06203575;
    margin-bottom: 0px;
    margin-top: 5px;
  }
  
  .kontak-text {
    font-size: 15px;
    font-weight: bold;
    color: var(--blue);
  }  
  .share-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px 4px 8px;
    margin: 10px;
    color: #fff;
    background-color: #333;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
  }
  
  .share-button:hover {
    color: #fff;
    background-color: #4f4f4f;
  }
  
  .share-button:active {
    top: 1px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
  }
  
  .share-button svg {
    fill: #ffffff;
    width: 19px;
    height: 19px;
    margin-right: 5px;
  }
  
  .share-button.facebook { background-color: #4A66B7; }
  .share-button.facebook:hover { background-color: #556fbb; }
  
  .share-button.twitter { background-color: #1B95E0; }
  .share-button.twitter:hover { background-color: #269ce5; }
  
  .share-button.pinterest { background-color: #c92228; }
  .share-button.pinterest:hover { background-color: #cf4146; }
  
  .share-button.linkedin { background-color: #0077B5; }
  .share-button.linkedin:hover { background-color: #1e84b9; }
  
  .share-button.reddit { background-color: #5f99cf; }
  .share-button.reddit:hover { background-color: #75a6d4; }
  
  .share-button.tumblr { background-color: #35465c; }
  .share-button.tumblr:hover { background-color: #455166; }
  
  .share-button.hacker-news { background-color: #ff6600; }
  .share-button.hacker-news:hover { background-color: #ff7515; }
  
  .share-button.designer-news { background-color: #2d72d9; }
  .share-button.designer-news:hover { background-color: #3d82e9; }
  
  .share-button.google-plus {
    background-color: #fefefe;
    color: #333;
  }
  
  .share-button.google-plus:hover {
    background-color: #f6f6f6;
    color: #333;
  }
  
  .share-button.google-plus svg {
    fill: #DB4437;
  }
.aplikasi
{
  display: flex;
  width: 100%;
  margin-left: -10px;
  margin-right: -10px;
  margin-top: 30px;
  flex-wrap: wrap;
}
  .aplikasi-frame
  {
    width: auto;
    margin: 10px;
  }
  .aplikasi-logo
  {
    width: auto;
    height: 50px;
    object-fit: cover;
    display: block;
    margin: auto;
  }
.doc {
  margin-bottom: 10px;
  padding-top: 20px;
  overflow: hidden;
}
  .doc-date{
    color: #ffffff6c;
  }
  .doc-content
  {
    height: 240px;
    width: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    background-color: #0A324F;
  }
  .doc-image-frame {
    height: 240px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 10px;
    background: rgb(9, 23, 36);
    background: linear-gradient(180deg, rgb(8, 19, 30) 0%, rgba(0, 0, 0, 0.083) 100%);
    position: relative;
  }
  .doc-file
  {
    font-size: 80px;
    color: white;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 20px;
    margin-bottom: 15px;
    opacity: 0.2;
  }
  .doc-link {
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
    line-height: 30px;
    display: block;
    margin-bottom: 5px;
    overflow: hidden;
  }
  .doc-link:hover {
    color: var(--white);
  }
  .doc-date {
    margin-right: 15px;
    font-size: 13px;
  }
  .doc-text {
    color: #ffffff6c;
    text-align: justify;
    font-family: "Roboto", sans-serif !important;
    overflow: hidden;
    height: 70px;
  }
.info {
  margin-bottom: 10px;
  padding-top: 20px;
  overflow: hidden;
}
  .info-date{
    color: #ffffff6c;
  }
  .info-image
  {
    height: 500px;
    width: 100%;
    object-fit: cover;
  }
  .info-image-frame {
    height: 500px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 10px;
    background-color: #0A324F;
    position: relative;
  }

  .info-video-frame {
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 10px;
    background-color: #0A324F;
    position: relative;
  }

  .info-content
  {
    height: 500px;
    width: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    background: rgb(9, 23, 36);
    background: linear-gradient(0deg, rgb(8, 19, 30) 0%, rgba(0, 0, 0, 0.083) 100%);
    position: absolute;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }
  .info-file
  {
    font-size: 80px;
    color: white;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 20px;
    margin-bottom: 15px;
    opacity: 0.2;
  }
  .info-link {
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
    line-height: 30px;
    display: block;
    margin-bottom: 5px;
    overflow: hidden;
  }
  .info-link:hover {
    color: var(--white);
  }
  .info-date {
    margin-right: 15px;
    font-size: 13px;
  }
  .info-text {
    color: #ffffffb5;
    text-align: justify;
    font-family: "Roboto", sans-serif !important;
    overflow: hidden;
    height: 70px;
  }
.banner-icon
{
  position: absolute;
  right: 0;
  bottom: 0;
}
  .banner-icon img
  {
    width: 70px;
    margin-right: 100px;
    margin-bottom: 100px;
  }
.hidetext
{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-bottom: 20px;
}
  .hidetext2
  {
    -webkit-line-clamp: 2; /* number of lines to show */
  }
  .hidetext3
  {
    -webkit-line-clamp: 3; /* number of lines to show */
  }
  .page-item.active .page-link
  {
    color: white;
    background-color: #00884d;
    border: 1px solid #00884d;
  }
  .page-link
  {
    color: #5e5e5e;
    /* padding: 10px 20px; */
  }
  .page-link:hover
  {
    color: #5e5e5e;
  }
@media only screen and (max-width: 575px)
{
  .navatas-left {
    padding: 15px 0px;
    padding-bottom: 10px;
    overflow: hidden;    
    height: auto;
    display: none;
  }
  .navatas-left--hide {
    height: 20px;
    
  }
  .navatas-left .navatas-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .navatas-left .navatas-text
  {
    width: 100%;
    padding-bottom: 10px;
  }
  .navatas-calendar {
    margin-top: 20px;
  }
  .navbar-padding
  {
    padding: 20px !important;
  }
  .banner {
    height: 90vh;
  }
  .navbreaker
  {
    margin-top: 120px;
  }
  .intro {
    margin-top: -90vh;
    height: 90vh;
  }
  .banner-image
  {
    height: 90vh !important;
  }
  .intro-search {
    padding-bottom: 300px;
  }
  .intro-title {
    font-size: 14px;
  }
  .intro-text {
    font-size: 20px;
    line-height: 30px;
  }
  .intro-search-frame {
    margin-top: 20px;
    padding: 3px;
    width: 100%;
  }
  .intro-input {
    font-size: 14px;
    margin-right: 3px;
  }
  .intro-btn {
    padding-left: 30px;
    padding-right: 30px;
    font-size: 14px;
  }
  .intro-btn:hover {
    background-color: var(--green2);
    color: white;
  }
  .hotline {
    padding-top: 0px;
  }
  
  .hotline .container,
  .hotline-right,
  .hotline-left,
  .hotline-heading
  {
    display: flex;
    flex-wrap: wrap;
  }
  .hotline-left{
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.171);
  }
  .hotline-title--big
  {
    display: none;
  }
  .hotline-title--small
  {
    display: block;
    font-size: 13px !important;
    padding-top: 10px;
  }
  .hotline-right {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .hotline-heading {
    padding-right: 0px;
    border-right: 0px solid rgba(255, 255, 255, 0.11);
    margin-right: 0px;
  }
  .hotline-body {
    flex: 50%;
  }
  .hotline-right .hotline-icon-frame {
    padding-top: 15px;
  }  
  .hotline-right .hotline-content-frame {
    padding-top: 10px;
  }  
  .hotline-right .hotline-icon {
    font-size: 10px;
    padding: 5px 6px;
  }
  .hotline-right .hotline-title {
    font-size: 10px;
  }
  .hotline-right .hotline-text {
    font-size: 11px;
  }
  .frame {
    padding: 50px 0px;
  }
  .headingtext-icon {
    font-size: 25px;
  }
  .headingtext--sm .headingtext-icon {
    font-size: 20px;
  }
  .headingtext-title {
    font-size: 20px;
    display: block;
  }
  .headingtext--sm .headingtext-title {
    font-size: 20px;
  }
  .headingtext-link
  {
   float: unset;
   position: absolute;
   padding: 30px 0px 15px 25px;
  }
  .b-20
  {
    margin-bottom: 20px !important;
  }
  .banner-icon
  {
    position: fixed;
    z-index: 10000;
    right: 0;
    background-color: white;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    margin-right: 10px;
    box-shadow: 6px 10px 32px -16px rgba(0,0,0,0.75);
    -webkit-box-shadow: 6px 10px 32px -16px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 10px 32px -16px rgba(0,0,0,0.75);
  }
  .banner-icon img
  {
    margin-right: 0px;
    margin-bottom: 0px;
    width: 30px;
  }
  .post-image-frame {
    height: 200px;
  }
  .post--xs .post-image-frame {
    width: 30%;
    height: 50px;
  }
  .post--xs .post-content-frame {
    width: 70%;
    padding-left: 20px;
  }  
  .dropdown-menu {
    margin-left: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.295);
  }
  .dropdown-menu::before {
    display: none;
  }
  .nav-link {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
  .nav-link.btn
  {
    margin-left: 0px;
    margin-top: 15px;
  }
  .pager {
    padding-top: 155px;
    padding-bottom: 30px;
  }
  .pager-link {
    font-size: 14px;
  }
  .pager-divider {
    padding-left: 5px;
    padding-right: 5px;
  }
  .pager-title {
    font-size: 20px;
  }
  .pager--pict .pager-title {
    color: #dfdfdf;
  }
  .pager .container
  {
    padding-left: 40px;
  }
  .pager-line {
    width: 3px;
    height: 100px;
    margin-left: -20px;
    margin-top: 10px;
  }
  .frame2 {
    padding: 0px 15px 100px;
  }
  .search-frame {
    margin-top: 20px;
  }
  .bupati {
    padding-top: 20px;
  }
  .bupati-image-frame {
    width: 100%;
    overflow: hidden;
    height: auto;
  }
  .post-text
  {
    height: 50px;
    overflow: hidden;
  }
}