/* ==========================================================================
*
* Custom CSS Stylesheet. This is where you should add your own styles!
*
** ========================================================================== */

/* Simple style overrides or custom adds */
body {
    background-color: inherit;
    font-size: 13px;
}
#eocnewsticker a{
    color: #fff !important;
}
.hide{
    display: none;
}
.acc-group strong {
    font-weight: bolder;
    text-transform: uppercase;
}

.kl-contentmaps__panel-info {
    font-size: 12px;
}
.kl-contentmaps__panel-title {
    font-size: 1.2rem;
}
.kl-contentmaps__panel {
    top: 28%;
}
.kl-contentmaps__panel-info-text-01 {
    font-size: 14px;
}
ul.agd-list {
    margin-left: 25px;
}
.mengenai strong{
    color: #334489;
}
.vertical_tabs.kl-style-1 .tabbable .nav > li > a {
    color: #333;
    font-size: 14px;
}
h4 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #334489;
}
.gensearch__input {
    width: 100%;
    color: #928c8c;
}
.tab-content {
    font-size: 13.5px;
    text-align: justify;
}
.some-css-selector {font-size:13px;}
.agd-select-box {
    height: 42px;
    width: 100%;
    padding: 0 20px;
    outline: none;
    border: 1px solid #ddd;
    font-size: 0.8rem;
    margin-top: 10px;
    color: #928c8c;
}
.btn-fullcolor, .btn-fullcolor:focus {
    background-color: #ff0100;
    color: #fff;
    margin-top: 10px;
}
button.btn.agd-btn {
    background: #e41719;
    color: #fff;
}
.agd-landing-logo {
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    background: url(../img/logo-jan.svg) no-repeat;
    padding-left: 35px;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.site-header .kl-header-toptext {
    margin-left: 0px;
}
.main-nav > ul > li > a {
    font-size: 12px;
}
.agd-pengumuman{
    background: #1d2244;
    color: #fff;
    font-size: 12.5px;
    padding: 10px;
    border-top: 1px solid #fff;
}
.site-header-main-center {
    margin-right: inherit;
}
.agd-logo-slider{
    background: url(../img/logo-slider.png) no-repeat;
    background-size: 60%;
    height: 200px;
    margin-top: -30px;
}
.agd-footer {
    font-size: 10.5px;
}
.agd-box {
    font-size: 13px;
}
.agd-box-01 {
    background: url(../img/bg-landing.png) bottom;
    position: relative;
    background-size: contain;
    color: #fff;
    background-repeat: no-repeat;
}
.agd-box-02 {
    background: url(../img/building-01.png) bottom right no-repeat;
    background-size: 15%;
}
.agd-box-03 {
    background: url(../img/building-03.png) bottom;
    position: relative;
    background-size: cover;
    color: #1d3286;
    padding: 25px;
}
.agd-link-box-02 {
    text-align: right;
}
.agd-news{
    font-size: 14px;
}
.agd-box-title-01 {
    font-family: 'russo';
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 0px;
    text-transform: uppercase;
    letter-spacing: .7px;
}
.agd-box-title-02 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.agd-box-title-03 {
    font-family: 'russo';
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #364ca2;
}
.agd-tahun {
    font-family: 'russo';
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #364ca2;
    margin-right: 10px;
    line-height: 35px;
}
.agd-siri {
    font-family: 'russo';
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #364ca2;
    margin-right: 10px;
    line-height: 35px;
    margin-left: 15px;
}
.agd-box-title-04 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}
.agd-box-no{
    font-family: 'russo';
    font-size: 30px;
}
.agd-footer-header {
    font-family: 'russo';
    font-size: 14px; 
    letter-spacing: .5px;
    margin-bottom: 15px;
    color: #fff;
}
#footer {
    padding: 20px;
    border-top: 0px !important;
}
#footer img{
    max-width: 100px;
}
.hids-portal-month{
    color: #fcde6b;
    font-size: 40px;
    font-family: 'russo';
    text-align: center;
}
.hids-portal-day{
color: #fcde6b;
    font-size: 60px;
    font-family: 'russo';
    line-height: 60px;
}

.laporan {
    margin-bottom: 10px;
}
.laporan-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
}
.laporan-title-01 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
}
.laporan-isu{
    font-size: 15px;
    padding-bottom: 10px;
    color: #333;
}
.laporan-Penemuan{
    font-size: 13.5px;
    color: #333;
    border-bottom: 1px dotted grey;
    padding-bottom: 7px;
    margin-bottom: 7px;
    text-align: justify;
    text-justify: inter-word;
}
.laporan-Penemuan button {
    border: none;
    text-align: justify;
    background: inherit;
    cursor: pointer;
}
.laporan-Penemuan-footer{
    font-size: 11.5px;
    color: grey;
    text-transform: uppercase;
}
.laporan-img {
    margin-top: 7px;
}

#footer {
    background: url(../img/bg-footer.png);
    position: relative;
    background-size: cover;
}
.kl-cta-ribbon {
    background: #1d224491 !important;
}
.kl-cta-ribbon .trisvg {
    fill: #1d224491 !important;
}
.tcolor {
    color: #35478f !important;
}
.th-accordion p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 13px;
    color: #333;
}
.th-accordion ul li {
    font-size: 13.5px;
    color: #333;
    list-style: circle;
}
.th-accordion ol li {
    font-size: 13.5px;
    color: #333;
    list-style: circle;
}
.agd-list ol li {
    font-size: 13.5px;
    color: #333;
    list-style: circle !important;
}

.agd-list ul li {
    font-size: 13.5px;
    color: #333;
    list-style: circle !important;
}
table.agd-table-style{
    width: 100%;
    font-size: 13.5px;
    width: 100%;
}
table.agd-table-style td{
    border: 1px solid #80808042;
    padding: 5px 10px;
}
table.agd-table-style th {
    border: 1px solid #80808042;
    padding: 5px 10px;
}
.hg_accordion_element.style5 .th-accordion a::before {
    content: attr(data-number);
    background: #334489;
}
.kl-bottommask--shadow_ud {
    border-bottom: inherit;
}
.page-subheader.uh_light_gray, .kl-slideshow.uh_light_gray {
    background-color: transparent;
}
.agd-pengumuman-title {
    font-family: 'russo';
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: .5px;
}
.agd-breadcrumbs {
    text-transform: uppercase;
    font-size: 12px;
    padding-bottom: 15px;
}
.agd-back {
    border-radius: 2px;
    width: auto;
    padding: 0 10px 0 10px;
    margin-right: 20px;
    text-align: center;
    background: red;
    text-decoration: none;
    font-weight: bold;
    color: #fff!important;
    -webkit-font-smoothing: antialiased;
}
.breadcrumbs_saperator {
    padding: 0px 10px;
}
.agd-box img {
    max-width: 65px;
}
.kl-ioscaption--style4 .title_small:before {
    background: rgb(0 0 0 / 69%);
}
.select-style {
    height: 52px !important;
}
.contact-popup-panel .contactForm {
    padding: 10px 5px !important;
}
.pop-up-des{
    font-size: 12px;
}
.pop-up-des ol {
    margin-left: -25px;
}
.contactForm.pop-up-form {
    padding: 10px 5px !important;
}



.mengenai-agd {
    background: red;
    height: 200px;
    margin-top: 30px;
    padding: 20px;
    position: relative;

    box-shadow: 0 2px 5px #ccc;
    border: 20px solid #35478f5c;
    text-shadow: 1px 1px white;
    background: #ffffff;
    line-height: 19px;
    font-size: 12px;
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
.mengenai-agd-v1 {
    min-height: 430px;
    margin-top: 30px;
    padding: 20px;
    position: relative;

    box-shadow: 0 2px 5px #ccc;
    border: 20px solid #35478f5c;
    text-shadow: 1px 1px white;
    background: #ffffff;
    line-height: 19px;
    font-size: 12px;
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
.mengenai-agd-01{
    height: 420px;
    margin-top: 30px;
    padding: 20px;
    position: relative;

    box-shadow: 0 2px 5px #ccc;
    border: 1px solid #fff;
    text-shadow: 1px 1px white;
    line-height: 19px;
    font-size: 12px;
    background: url(../img/1.jpeg) no-repeat;
    background-size: 100%;
}

.mengenai-agd-02{
    height: 420px;
    margin-top: 30px;
    padding: 20px;
    position: relative;
    box-shadow: 0 2px 5px #ccc;
    border: 1px solid #fff;
    text-shadow: 1px 1px white;
    line-height: 19px;
    font-size: 12px;
    background: url(../img/2.jpeg) no-repeat;
    background-size: 100%;
}
.mengenai-agd-03{
    height: 400px;
    margin-top: 30px;
    padding: 20px;
    position: relative;

    box-shadow: 0 2px 5px #ccc;
    border: 1px solid #fff;
    text-shadow: 1px 1px white;
    line-height: 19px;
    font-size: 12px;
    background: url(../img/3.jpeg) no-repeat;
    background-size: 111%;
}
.mengenai-agd-04{
    height: 400px;
    margin-top: 30px;
    padding: 20px;
    position: relative;

    box-shadow: 0 2px 5px #ccc;
    border: 1px solid #fff;
    text-shadow: 1px 1px white;
    line-height: 19px;
    font-size: 12px;
    background: url(../img/4.jpeg) no-repeat;
    background-size: 111%;
}

.mengenai-agd-05{
    height: 400px;
    margin-top: 30px;
    padding: 20px;
    position: relative;

    box-shadow: 0 2px 5px #ccc;
    border: 1px solid #fff;
    text-shadow: 1px 1px white;
    line-height: 19px;
    font-size: 12px;
    background: url(../img/5.jpeg) no-repeat;
    background-size: 100%;
}
.mengenai-agd-content {
    /* bottom: 0px; */
    position: absolute;
    width: calc(100% - 40px);
    /* padding-top: 25px; */
    margin-bottom: 17px;
    padding-top: 310px;
}
.mengenai-agd-content-01 {
    /* bottom: 0px; */
    position: absolute;
    width: calc(100% - 40px);
    /* padding-top: 25px; */
    margin-bottom: 17px;
    padding-top: 280px;
}
.agd-box-01{
    height: 135px;
}
/*
.agd-box-04-01 {
    min-height: 515px;
    background: #ffffff7a;
    border: 1px solid #fff;
    box-shadow: 0 2px 5px #00000021;
    padding: 20px;
    background: linear-gradient(to bottom, #ffffff80 0%,#ffffff 100%);
*/
.agd-box-04-01 {
    min-height: 515px;
    border: 1px solid #fff;
    box-shadow: 0 2px 5px #00000021;
    padding: 20px;
    background: url(../img/bg-02.png);
    background-size: cover;
    /*background: linear-gradient(to bottom, #ffffff80 0%,#ffffff 100%);*/
}
.agd-box-04-01-title {
    font-family: 'russo';
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #092a63;
    text-align: center;
    line-height: 17px;
    margin-bottom: 20px;
}

.agd-box-04-02 {
    min-height: 450px;
    background: #ffffff7a;
    border: 1px solid #fff;
    box-shadow: 0 2px 5px #00000021;
    padding: 20px;
}

.agd-box-04-03 {
    background: #ffffff7a;
    border: 1px solid #fff;
    box-shadow: 0 2px 5px #00000021;
    padding: 15px;
    margin-bottom: 30px;
}
.agd-box-04-03-icon {
    width: 80px;
    font-size: 50px;
    float: left;
    line-height: 42px;
    font-weight: bold;
}
.agd-box-04-03-title {
    font-family: 'russo';
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #092a63;
}
.mengenai-agd-content-icon img{
    margin: auto;
    text-align: center;
    display: block;
}
.mengenai-agd-content-icon {
background: #1d2b63;
    width: 100px;
    border-radius: 50%;
    height: 100px;
    display: block;
    margin: auto;
    margin-bottom: 30px;
    margin-top: 30px;
}
.mengenai-agd-content-icon img {
    margin: auto;
    text-align: center;
    display: block;
    background-size: 80%;
    color: #fff;
    filter: invert(100%) sepia(79%) saturate(476%) hue-rotate( 
86deg
 ) brightness(118%) contrast(119%) !important;
        padding-top: 23px;
}
select{
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 244px;
}

thead {
    background: linear-gradient(-120deg, #1f264d, #3c55a9, #081237);
    text-transform: uppercase;
    color: #fff;
    box-shadow: antiquewhite;
    webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0;
}
tfoot {
    background: linear-gradient(-120deg, #1f264d, #3c55a9, #081237);
    text-transform: uppercase;
    color: #fff;
    box-shadow: antiquewhite;
    webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0;
}
.table-style-01 {
    background-color: #8080801a;
    border-right: 3px solid #202851 !important;
}

@font-face {
  font-family: 'russo';
  src: url('../fonts/russo/russo.otf'), /* IE9 Compat Modes */
  url('../fonts/russo/russo.woff'); /* IE9 Compat Modes */
}
@font-face {
  font-family: 'square';
  src: url('../fonts/square/square.otf'), /* IE9 Compat Modes */
  url('../fonts/square/square.woff'); /* IE9 Compat Modes */
}

span.agd-footer-count {
    font-size: 13.5px !important;
}

/* ==========================================================================
** Responsive styles custom rules
* These rules are ready to be used for either overrides
* or just your own custom rules.
========================================================================== */

/** Freestyle **/
@media (max-width: 767px) {
    .pt-150 {
        padding-top: 30px !important;
    }
    #footer {
        text-align: center !important;
    }
    #footer img{
        margin-top: 20px;
    }
    #footer .text-right{
        text-align: center !important;
    }
    .agd-box img {
        margin-top: 30px;
        margin-bottom: 10px;
    }   
    .agd-box {
        text-align: center;
    }   
    .agd-box-02 {
        text-align: center;
    }
    .agd-link-box-02 {
        text-align: center;
        margin-top: 30px;
    }
    .site-header-top-wrapper{
        display: none;
    }
    .btn-fullwidth {
        width: 100%;
    }
}

/** Higher screens+ **/
@media only screen and (min-width : 1921px){

}


/** Desktop+ **/
@media (min-width: 1200px) {

}


/** Laptop **/
@media (max-width: 1200px) {

}


/** Laptop+ **/
@media (min-width: 991px) {

}


/** Laptop **/
@media (min-width: 992px) and (max-width: 1199px) {

}


/** Large Tablets **/
@media (max-width: 992px) {

}


/** Tablets (landscape mode)  **/
@media (min-width: 768px) and (max-width: 991px) {

}


/** Tablets+  **/
@media (min-width: 768px) {

}


/** Tablets (portrait mode)  **/
@media (min-width : 481px) and (max-width : 768px) {

}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 767px) {

}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 600px) {

}


/** Smartphone portrait mode **/
@media (max-width: 480px) {

}


/** Normal phone portrait mode+ **/
@media (min-width: 320px) {
    
}