/* Slider */
.pinjaman-slide { background-image: linear-gradient(to top, #00000040, #00000040), url('../images/pinjaman-koperasi-misi-2.jpg'); outline: none !important; }
.pinjaman-slide > div { align-items: center; display: flex; height: 100%; }
.slide-block { height: 220px; margin-bottom: 0; padding: 15px; position: relative; text-align: center;  transition: 0.2s; }
.slide-block:after { background: none repeat scroll 0 0 transparent; background: red; bottom: 0; content: ""; display: block; height: 5px; left: 50%; position: absolute; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0;}
.slide-block img { margin: auto auto 1rem; width: 100px; }
.slide-block p { color: #ffffff; font-size: 14px; font-weight: bold; margin-bottom: 0; text-transform: uppercase; }
.slide-block small { color: #ffffff; font-size: 9px; }
.slide-block:hover { background-color: #ffffff; }
.slide-block:hover:after { left: 0; width: 100%; }
.slide-block:hover img { filter: invert(1); }
.slide-block:hover p { color: #000000; }
.slide-block:hover small { color: #000000; }
a.active .slide-block { background-color: #ffffff; border-bottom: 5px solid red; }
a.active .slide-block:hover:after { width: 0; }
a.active .slide-block img { filter: invert(1); }
a.active .slide-block p { color: #000000; }
a.active .slide-block small { color: #000000; }
.brand-bg { padding: 15px; }

/* Footer */
.contact ul { text-align: left; }


@media screen and (max-width: 1024px) {
    /* Slider */
    .slide-block { height: 160px; }
    .slide-block img { width: 80px; }
    .slide-block p { font-size: 12px; }
}

@media screen and (max-width: 800px) {
    /* Index */
    .button-8 { width: fit-content; width: -moz-fit-content; }

    label { padding: 0; width: 100%; }
}

@media screen and (max-width: 767px) {
    /* Slider */
    .slide-block { height: 180px; }
}

@media screen and (max-width: 639px) {
    /* Slider */
    /* .pinjaman-slide > div { display: none; } */
    .pinjaman-slide { height: 400px; }
    .pinjaman-slide > div { align-items: unset; display: unset; height: unset; margin-top: 15px; }
    .pinjaman-slide > div > div { margin: 10px 0; }
    .slide-block { height: 170px; }
    .slide-block img { width: 60px; }

    /* Responsive Menu */
    ul.pk-menu { padding-left: 1rem; text-align: left; }
    ul.pk-menu a li { padding: 10px 5px 5px 3rem; margin-bottom: 1rem; transition: 0.2s; }
    ul.pk-menu a li p { color: #ffffff; font-size: 16px; margin-bottom: 0; position: relative; }
    ul.pk-menu a li small { color: #ffffff; font-size: 10px; }
    ul.pk-menu a li p.home:before { background-image: url('../images/home.png'); background-position: center; background-repeat: no-repeat; background-size: cover; content: ''; height: 30px; left: -40px; position: absolute; top: -5px; width: 30px; }

    ul.pk-menu a li p.penjawat-awam:before { background-image: url('../images/public-loan.png'); background-position: center; background-repeat: no-repeat; background-size: cover; content: ''; height: 30px; left: -40px; position: absolute; top: -5px; width: 30px; }

    ul.pk-menu a li p.swasta:before { background-image: url('../images/personal-loan.png'); background-position: center; background-repeat: no-repeat; background-size: cover; content: ''; height: 30px; left: -40px; position: absolute; top: -5px; width: 30px; }

    ul.pk-menu a li p.contact:before { background-image: url('../images/contact.png'); background-position: center; background-repeat: no-repeat; background-size: cover; content: ''; height: 30px; left: -40px; position: absolute; top: -5px; width: 30px; }

    ul.pk-menu a li:hover { background-color: #ffffff; }
    ul.pk-menu a li:hover p { color: #000000; }
    ul.pk-menu a li:hover p.home:before,
    ul.pk-menu a li:hover p.penjawat-awam:before,
    ul.pk-menu a li:hover p.swasta:before,
    ul.pk-menu a li:hover p.contact:before {
        filter: invert(1);
    }

    ul.pk-menu a.active li { background-color: #ffffff; }
    ul.pk-menu a.active li p { color: #000000; }
    ul.pk-menu a.active li small { color: #000000; }
    ul.pk-menu a.active li p.home:before,
    ul.pk-menu a.active li p.penjawat-awam:before,
    ul.pk-menu a.active li p.swasta:before,
    ul.pk-menu a.active li p.contact:before {
        filter: invert(1);
    }
}

@media screen and (max-width: 500px) {
    ul.pk-menu { height: unset; }
}