:root{
    --color-primary: #06125c;
    --color-secondary: #123fa4;
    --color-tertier: #D9D9D9;
    --color-hover-link: #d29c4a;
  }

  *{
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
    list-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  a {
    color: #fff;
    text-decoration: none;
}
  
  html{
    font-size: 14px;
    font-weight: 400;
  }
  
  body{
    width: 100vw;
    height: 100vh;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    overflow-x:hidden;
  }

  .warna-primary{
      color: var(--color-primary);
  }
  .warna-tertier{
    color: rgba(0, 0, 0, 0.4);
}

/* ================================= GLOBAL ================================= */
.container-fluid{
    padding-left: 0;
    padding-right: 0;
}
.section-title{
      text-align: center;
      font-size: 48px;
      font-style: normal;
      font-weight: 700;
      color: var(--color-primary);
      padding: 60px 0 40px;
      line-height: 56.25px;
}
#video .section-title, #event .section-title{
    padding-top: 0px;
}
.btn-utama {
    background-color: var(--color-secondary);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    height: 35px;
    width: 146px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.btn-utama:hover{
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.text-utama{
    color: var(--color-primary);
}
.text-kedua{
    color: var(--color-secondary);
}

.bg-utama{
    background-color: var(--color-primary);
    color: #fefefe;
}
.bg-kedua{
    background-color: var(--color-secondary);
}

h5.section-title{
    letter-spacing: 3px;
}

.sub-title{
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-transform: uppercase;
    margin-bottom: 35px;
}
.tabel-web tr td{
    font-size: 16px;
    color: var(--color-primary);
}


.isi-posting p{
    text-align: justify;
}
.isi-posting ol li{
    list-style-type: decimal;
    text-align: justify;
}
.isi-posting ul li{
    list-style-type: square;
    text-align: justify;
}

.isi-posting ul li p, .isi-posting ol li p{
    margin-bottom: 0px;
}

/* TABLE List */
.isi-posting table tr td {
    font-size: 14px;
    color: var(--color-primary);
}
a.link-tautan{
    color: var(--color-secondary);
}
a.link-tautan:hover{
    color: var(--color-primary);
}

/* icons fontawesome at home */
.icons i.fab, .icons i.fas{
    font-size: 5em;
}

/* ================================= ...GLOBAL ================================= */

/* ========== Multi dropdown ========== */
.navbar-nav li:hover>ul.dropdown-menu{
	display: block;
}
.dropdown-submenu{
	position: relative;
}
.dropdown-submenu>.dropdown-menu{
	top: 0;
	margin-top: -5px;
	left: 100%;
}
.dropdown-menu>li>a:hover::after{
	text-decoration: underline;
	transform: rotate(-90deg);
}

/* dropdown menu */
.dropdown-menu {
    display: none;
    color: rgba(255,255,255,.7);
    background-color: var(--color-primary);
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
    border-top: 5px solid var(--color-secondary);
    margin-top: 1rem;
}

.dropdown-item{
    color: rgba(255,255,255,.6);
}
.dropdown-item:focus, .dropdown-item:hover {
    color: #fff;
    background-color: transparent;
}


/* triangle dropdown */
.dropdown-menu:after{
    content: '';
    position: absolute; 
    top: 0;
    left: 35%;
    margin-left: -15px;
	margin-top:-15px; 
    width: 0;
    z-index:1;
    height: 0;
    border-bottom: solid 10px var(--color-secondary); 
    border-left: solid 10px transparent; 
    border-right: solid 10px transparent; 
}

a.dropdown-item ul.dropdown-menu:after, .dd-two:after{
    content: '';
    position: absolute; 
    top: 0;
    left: 35%;
    margin-left: -15px;
	margin-top:-15px; 
    width: 0;
    z-index:1;
    height: 0;
    border: none;
}


/* additional */
header{
    position: sticky;
    top: 0px;
    background-color: var(--color-primary);
    width: 100%;
    z-index: 1000;
}
/* ...additional */



/* ----------NAVBAR---------- */
.navbar-dark .navbar-nav .nav-link.active{
    color: yellow;
}
.navbar-dark .navbar-nav .nav-link{
    color: rgb(236, 235, 241);
    font-weight: 500;
}
/* .navbar-nav{
    margin-left: 200px;
} */

.navbar-qu{
    position: relative;
    background-color: var(--color-primary);
    height: 70px;
    width: 100vw;
    border-bottom: 5px solid;
    border-image: linear-gradient(45deg, purple, orange) 1;
}
.top-logo{
    width: 50%;
    height: auto;
    padding: 10px 0;
}

.navbar-brand{
    top: 0;
}
.ipb-logo{
    display: none;
    width: 50px;
}
.p2sdm-logo{
    display: none;
    width: 180px;
}

.btn-search{
    color: #fff;
    background-color: #985D2C;
    border-color: #985D2C;
}
.nav-kotak{
    background-color: #F88C00;
    height: 18px;
}


@media only screen and (min-width: 992px) {
    #navbarNavDropdown li.nav-item{
        margin: 0 15px;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        margin-top: 1rem;
    }
}
.dropdown-toggle::after {
    display: none;
}

/* ----------VIDEO HEADER---------- */


.hero-bg-media video {
    position: relative;
    height: calc(100vh - 75px);
    width: 100vw;
}
.hero-bg-media * {
    object-fit: cover;
}



/* ----------BERITA---------- */
section#berita{
    height: 730px;
    background-color: #F4F4F4;
}
h6.card-title{
    font-weight: 500;
    font-size: 18px;
}
.card-body p{
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: left;
    color:rgba(49, 49, 49, 0.7);
}

.slide-indikator{
    text-align: center;
    margin: 81px 0 61px;
}

.btn-outline-utama {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    border-radius: 16px;
    height: 35px;
    width: 146px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.btn-outline-utama:hover{
    background-color: var(--color-secondary);
    color: #fff;
}

.carousel-indicators [data-bs-target] {
    background-color: var(--color-primary);
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.carousel-indicators {
    top: 330px;
}

.blok-berita{
    margin-top: 110px;
}
.tombol-list-berita{
    text-align: center;
}

.card-img-top{
    height: 200px;
}

.card-title a{
    color: var(--color-primary);
}

/* .tgl-home{

} */

/* ----------EVENT---------- */
#event{
    height: 480px;
    background-color: #a2d9ff;
}
.box-event{
    width: 300px;
}
.box-event .judul, .box-event .isi{
    text-align: center;
}
.box-event .isi{
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    margin-top: 5px;
    height: 40px;
}

.start-event p{
    font-size: 14px;
    font-weight: 400;
}

/* VIDEO */
section#video{
    height: 480px;
}

.box-video{
    width: 320px;
    height: 200px;
    background-color: #0088CC;
}
.box-video iframe{
    width: 320px;
    height: 200px;
}

.box-text{
    width: 320px;
    height: 80px;
}
.baris-satu{
    padding: 5px 5px 0;
}
.baris-satu .foto{
    padding: 5px;
    display: inline-block;
}
.baris-satu .judul{
    width: 250px;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
}
img.foto-uploader{
    width: 40px;
    height: auto;
}

.baris-dua{
    padding-left: 2px;
    color: rgb(38, 36, 36);
    font-size: 12px;
}

ul.ul-tgl{
    padding-left: 1.5rem;
    display: inline-block;
}
ul.ul-tgl li{
    list-style-type: disc;
}


/* ----------AGENDA---------- */
.tombol-agenda{
    margin: 60px 0;
    text-align: center;
}

.box-date{
    height: 100px;
    width: 100px;
    border-radius: 14px;
    background-color: var(--color-primary);
    text-align: center;
}

.data-tanggal{
    padding-top: 20px;
}
p.tanggal{
    font-size: 32px;
    color: #fff;
    font-weight: 500;
    line-height: 15px;
}
p.bulan{
    font-size: 24px;
    color: #FFE7A4;
    font-weight: 500;
    line-height: 15px;
}
p.hari{
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    line-height: 15px;
}

p.judul{
    font-size: 16px;
    color: var(--color-primary);
    font-weight: 500;
    width: 237px;
    margin-bottom: .8rem;
}
p.penulis{
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 400;
    margin-bottom: .8rem;
    width: 300px;
}

/* agenda detail view */
.foto-agenda{
    width: 100%;
    height: auto;
}
.view-tgl tr td{
    color: var(--color-primary);
}
tr.text-small td{
    font-size: 11px;
}
tr.text-medium td{
    font-size: 15px;
    font-weight: 500;
}

.list-view{
    border: solid 2px #eaeaea;
    border-radius: 2px;
}
.latest-box{
    margin: 10px 0;
    padding: 0 10px;
}

.judul-agenda{
    font-size: 14px;
    font-weight: 500;
}
.waktu-agenda{
    font-size: 12px;
}
.view-content, .view-content p{
    text-align: justify;
}

.text-foto{
    margin-top: .6rem;
    line-height: 1rem;
    font-size: 12px;
    color: lightslategray;
}
.info-media{
    text-align: center;
    font-size: 13px;
    margin-top: 1.2rem;
    color: #666;
}
.tgl-media{
    text-align: center;
    font-size: 12px;
    margin-top: 1.2rem;
    color: lightslategray;
}
.bagikan-media{
    text-align: center;
    font-size: 14px;
    margin-top: 1rem;
}


/* SHARE BUTTON */
.btn {
    transition: .5s;
}
.btn-square{
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
    width: 40px;
    height: 40px;
}

.btn-outline-wa {
    color: #198754;
    border: 1.5px solid #198754;
}
.btn-outline-wa:hover {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.btn-outline-twitter {
    color: #1DA1F2;
    border: 1.5px solid #1DA1F2;
}
.btn-outline-twitter:hover, .btn-outline-twitter i.fa-twitter:hover {
    color: #fff;
    background-color: #1DA1F2;
    border-color: #1DA1F2;
}

.btn-outline-telegram {
    color: #0088CC;
    border: 1.5px solid #0088CC;
}
.btn-outline-telegram:hover {
    color: #fff;
    background-color: #0088CC;
    border-color: #0088CC;
}

.btn-outline-fb {
    color: #3C5A99;
    border: 1.5px solid #3C5A99;
}
.btn-outline-fb:hover, .btn-outline-fb i.fa-facebook-f:hover {
    color: #fff;
    background-color: #3C5A99;
    border-color: #3C5A99;
}

.fa16{
    font-size: 1.6em;
}






/* FOOTER */
footer{
    /* background: linear-gradient(180deg, rgba(248, 140, 0, 0) 0%, #F88C00 100%); */
    background: var(--color-secondary);
    height: 300px;
}

.logo-footer{
    margin-top: 2rem;
}
table.table-footer tr td{
    padding: 5px 0;
}
table.table-footer tr, table tr td{
    font-size: 14px;
    color: #fff;
}
table.table-footer i.fas{
    font-size: 1.6em;
}

.text-footer,
.footer-link p{
    color: #fff;
}
.footer-link a{
    font-size: 14px;
}
.footer-link a:hover{
    color: #48260a;
}

.text-footer{
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    margin-top: 1.5rem!important
}

.bottom-footer{
    /* height: 70px; */
    background: var(--color-primary);
    position: relative;
    width: 100vw;
}

.footer-peta iframe{
    width: 330px;
}

.fa-facebook-f:hover{
    color: #1877f2;
}
.fa-instagram:hover{
    color: #c32aa3;
}
.fa-twitter:hover{
    color: #1DA1F2;
}
.fa-youtube:hover{
    color: #FF0000;
}

.ul-link{
    padding-left: 0px;
}
a.url-footer:hover{
    color: var(--color-hover-link);
}


.kontak-darurat a.kontak:hover{
    color: red;
}



/* BACK TO TOP */
.back-to-top{
    position: fixed;
    width: 46px;
    height: 46px;

    right: 10px;
    bottom: 20px;

    background: rgba(6, 18, 92, .6);
    border-radius: 6px;
    cursor: pointer;
}

.back-to-top a{
    color: #fff;
}
.back-to-top a:hover{
    color: var(--color-secondary);
}

.back-to-top i.fas{
    font-size: 1.8em;
    padding-top: 8px;
}

/* WhatsApp */
.wa-logo{
    position: relative;
}
.wa-logo .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #128c7e;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    position: fixed;
    bottom: 83px;
    right: 65px;
    z-index: 1;
  }
  .wa-logo:hover .tooltiptext {
    visibility: visible;
  }
.logo-wa{
    position: fixed;
    width: 50px;
    height: 50px;

    right: 10px;
    bottom: 75px;

    cursor: pointer;
}




/* ############## PAGE BERITA ############## */
.foto-viewberita{
    width: 100%;
    height: auto;
}
.isi-viewberita p{
    text-align: justify;
}

/* viewberita */
.waktu-berita{
    font-size: 12px;
    color: grey;
}
.isi-viewberita .judul{
    font-size: 28px;
    font-weight: 700;;
}


/* ======== PAGINATION ======== */
.page-item.active .page-link {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.page-link{
    color: var(--color-primary);
}


/* zoom gambar */
.mainwrapper {
    background: #fefefe;
    display: flex;
    width: 100%;
    height: 650px;
    justify-content: center;
    align-items: center;
}

img.imgthumb {
    width: 150px;
    border-radius: 10px;
}

.overlay {
    width: 0;
    height: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
    transition: .8s;
    text-align: center;
    padding: 150px 0;
}

.overlay:target {
    width: auto;
    height: auto;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .7);
}

.overlay img {
    /* max-height: 100%; */
    box-shadow: 2px 2px 7px rgba(0, 0, 0, .5);
}

.overlay:target img {
    animation: zoomDanFade 1s;
}

.overlay .close {
    position: absolute;
    top: 2%;
    right: 2%;
    margin-left: -20px;
    color: white;
    text-decoration: none;
    line-height: 14px;
    padding: 5px;
    opacity: 0;
}

.overlay:target .close {
    animation: slideDownFade .5s .5s forwards;
}

/* animasi */
@keyframes zoomDanFade {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slideDownFade {
    0% {
        opacity: 0;
        margin-top: -20px;
    }

    100% {
        opacity: 1;
        margin-top: 0;
    }
}

/* ...############## PAGE BERITA ############## */



/* ############## PAGE TRENDING ############## */
section#trending{
    margin-top: 80px;
    margin-bottom: 30px;
}


/* ############## POPUP MODAL HOME ############## */
#popupModal .modal-dialog {
    margin: 9rem auto;
}



/* ############## PAGE TENTANG ############## */

.about-content p{
    text-align: justify;
}
.visi, .misi{
    margin-top: 30px;
}
.misi{
    margin-bottom: 50px;
}
.sejarah{
    margin: 30px 0 50px;
}
section.visi, section.sejarah{
    background-color: rgb(244, 244, 244);
}
.visi .left-vision{
    padding: 15px 10px;
}
.sejarah .left-history{
    padding: 30px 10px 0 0;
}
.sejarah .right-history{
    padding-top: 55px;
}
.isi-vision{
    text-align: justify;
}
.isi-history{
    width: 100%;
    text-align: justify;
}
.visi .right-vision{
    padding: 90px 10px 30px;
}

.right-vision .foto, .right-history .foto{
    width: 100%;
    height: auto;
}


.text-mission{
    text-align: center;
    margin: 40px 0 30px;
}
.misi .box{
    text-align: center;
    background-color: rgb(244, 244, 244);
    padding: 25px;
    width: 360px;
    height: 315px;
}
.misi .col-lg-4, .misi .col-sm-12{
    margin-top: 20px;
}
.box .icons{
    padding-bottom: 10px;
}
.box .icons, .box .title, .box .content{
    margin-top: 10px;
}
.box .title{
    font-weight: 600;
}


/* PAGE TUJUAN dan MOTO */
.tujuan-moto{
    margin: 40px 180px;
    text-align: center;
}
.tujuan-moto p{
    font-family: 'Merriweather', serif;
    font-size: larger;
    font-style: italic;
    font-weight: 400;
    line-height: 35px;
    letter-spacing: 1.3px;
}

.renstra-tupoksi{
    margin-bottom: 30px;
}
.list-kotak, .list-angka{
    width: 90%;
}
.list-kotak ul li{
    list-style-type:square;
    text-align: justify;
}
.list-angka ol li{
    list-style-type:decimal;
    text-align: justify;
}

.isi-moto{
    text-align: center;
    margin-top: 50px;
}
.isi-moto div{
    margin: 20px 0;
    height: 30px;
    width: 200px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 18px;
}
.isi-moto .bg-utama,.isi-moto .bg-info,.isi-moto .bg-warning{
    border-radius: 8px;
}
.isi-moto .bg-info{
    margin-left: 50px;
}
.isi-moto .bg-warning{
    margin-left: 100px;
}

/* ########### GALLERY ########### */
.gall{
    margin: 4em 0 3em;
}
.subgallery{
    padding: 0;
    position: relative;
    width: 380px;
    height: 258px;
}
.box-gall{
    position: relative;
}
.img-lb{
    width: 100%;
    height: 100%;
}
.subgallery a:hover .img-lb{
    opacity: .4;
}
.subgallery a:hover .kotak{
    opacity: .75;
}
.kotak{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: var(--color-primary);
}
.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }

/* lightbox */
.lb-data .lb-caption {
    font-size: 14px;
}




/* ########### BIMTEK MULTI ITEM ########### */
.multi-item{
    margin: 30px 0;
}
.multi-item .box .teks{
    font-size: 16px;
    margin-top: 5px;
    height: 40px;
}
.multi-item .box .isi{
    font-size: 16px;
    margin-top: 10px;
}
.multi-item .box .tombol-next{
    margin-top: 10px;
}

.teks-multi{
    margin-top: 15px;
}

/* ########### LOGIN ########### */
.box-login{
    padding: 25px 20px 10px;
    background-color: #66cef7;
    border-radius: 10px;
}

.img-tabel{
    width: 90px;
    height: 90px;
}


/* ########### MEDIA VIDEO ########### */

#media-video{
    margin: 5rem 0px;
}

.text-gallery{
    margin-top: .6rem;
}
.text-gallery h5{
    margin-bottom: 0px;
}

.isi-tooltip{
    position: absolute;
    background-color: var(--color-primary);
    color: blanchedalmond;
    bottom: 30px;
    padding: 5px 5px;
    border-radius: 5px;
    visibility: hidden;
}
.judul-lengkap{
    font-size: 14px;
}
.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--color-primary);

    bottom: -10px;
    position: absolute;
}

.text-gallery:hover .isi-tooltip{
    visibility: hidden;
}