body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Roboto
}

.section-header h2,
.welcome h1,
.widget-title h3 {
    text-transform: uppercase
}

.comment-list-wrapper ul,
.list-menus ul,
.post-meta ul,
.share-icon ul,
.social-icons {
    list-style: none
}

body {
    font-size: 14px
}

.left {
    float: left !important
}

#header {
    height: 425px;
    background: url(assets/img/background/bg3.jpg) center center/cover no-repeat rgba(0, 0, 0, 1);
    background-position: 50% 0
}

@media (min-width:768px) {
    .navbar-transparent {
        background: 0 0 !important;
        border-color: transparent
    }
}

.navbar-shadow {
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35)
}

.navbar-brand h1 {
    font-family: Merriweather, georgia, serif !important;
    font-size: 18px;
    margin: 0;
    font-weight: 700;
    line-height: 30px;
    font-style: italic
}

.hero {
    padding: 80px 0
}

.welcome {
    color: #FFF
}

.welcome h1 {
    font-size: 45px;
    font-weight: 700
}

.welcome h2 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 300
}

.section-header {
    margin-top: 60px;
    padding: 30px 0;
    color: #EFEFEF
}

.section-header h2 {
    margin: 0 0 5px;
    font-weight: 400
}

.main {
    padding: 30px 0
}

.content {
    font-size: 18px;
    line-height: 1.8
}

.content h2 {
    margin: 0 0 10px;
    font-size: 27px;
    font-weight: 500
}

.panel-img img {
    width: 100%;
    height: 350px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px
}

.post-meta {
    font-size: 12px;
    color: #777
}

.post-meta ul {
    padding: 0
}

.post-meta ul li {
    display: inline-block;
    margin-right: 10px;
    color: #FFF
}

.post-meta ul li a {
    color: #FFF
}

.widget {
    margin-bottom: 30px
}

.widget-title h3 {
    margin: 0 0 15px;
    font-weight: 700;
    font-size: 16px
}

.list-menus ul {
    padding-left: 0
}

.list-menus ul li:first-child {
    border-top: 1px solid #DDD
}

.list-menus ul li {
    padding: 10px 0;
    border-bottom: 1px solid #DDD
}

.list-menus ul li a {
    font-weight: 500
}

a.tags {
    background: #009688;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    margin-bottom: 3px;
    padding: 7px
}

.com-title,
.comment-inner i {
    font-size: 20px
}

.share-icon ul {
    margin: 0
}

.share-icon ul li {
    display: inline;
    margin-right: 15px
}

.share-icon ul li a {
    color: #009688
}

.comment-inner {
    background: #FFF;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .12), 0 1px 6px 0 rgba(0, 0, 0, .12)
}

.comment-reply-form,
.comment-reply-section {
    margin-bottom: 42px
}

.com-title {
    color: #444;
    line-height: 1.6;
    margin-bottom: 25px
}

.com-title a {
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid #ddd
}

.comment-img {
    margin-right: 20px;
    width: 60px;
    height: 60px
}

.comment-img img {
    width: 100%
}

.comment-list-wrapper {
    margin-left: -20px
}

.comment-list {
    padding-left: 20px
}

.comment-list .comment-inner p {
    margin-top: 0
}

.comment-list .comment-inner {
    margin-bottom: 20px;
    padding: 20px
}

.comment-meta {
    position: relative
}

.comment-list .comment-inner .comment-meta .author,
.comment-list .comment-inner .comment-meta .author a {
    color: #444;
    font-size: 14px;
    font-weight: 500
}

.comment-list .comment-inner .comment-meta .author {
    margin-bottom: 5px
}

.comment-list .comment-inner .comment-meta .date {
    color: #727272;
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 15px
}

.comment-list .comment-inner .reply-btn {
    position: absolute;
    top: -5px;
    right: 0;
    color: #444;
    font-size: 20px
}

.comment-inner .comment-content {
    padding: 0;
    border: none;
    overflow: hidden
}

.comment-list .comment-inner .comment-text,
.comment-list .comment-inner .comment-text p {
    color: #777;
    font-size: 14px;
    line-height: 23px;
    font-weight: 400
}

.comm-submit {
    padding-right: 15px;
    padding-left: 15px;
    font-size: 13px
}

.cform-wrapper .input-field.textarea-input {
    margin-bottom: 40px
}

@media (max-width:767px) {
    .comment-reply-form .submit-wrap {
        margin-top: 40px;
        margin-bottom: 0
    }

    .comment-reply-form {
        margin-bottom: 0
    }
}

@media (max-width :500px) {
    .comment-inner .comment-content {
        overflow: visible
    }

    .comment-list .comment-inner .comment-meta .date {
        margin-bottom: 25px
    }
}

.social-icons {
    float: left;
    padding: 0;
    font-size: 20px
}

.social-icons li {
    display: inline-block;
    margin-right: 20px
}

.copyright {
    float: none;
    margin: 10px 0;
    text-align: center
}

.logo {
    margin-bottom: 10px;
    margin-top: 10px
}

#logo {
    margin-right: 10px
}

.layananonline {
    width: 200px;
    vertical-align: top;
    margin: 20px 30px 50px
}

.layanan_kami {
    width: 350px;
    margin: 20px 30px 15px
}

.material-icons {
    display: inline-block;
    width: 30px;
    font-size: 1.5rem;
    color: #fff;
    position: relative;
    border-radius: 50%;
    padding: 2px;
    margin: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    transition: color .2s ease, background-color .2s ease, transform .3s ease
}

.material-icons:after {
    width: 100%;
    height: 100%;
    border: 2px solid;
    transform: scale(.8);
    position: absolute;
    top: -2px;
    left: -2px;
    border-radius: 50%;
    transition: all .3s ease
}

.material-icons:hover:after {
    transform: scale(1);
    box-shadow: 10px 0 20px rgba(0, 0, 0, .19), 6px 0 6px rgba(0, 0, 0, .23)
}

.material-icons:nth-of-type(1) {
    background-color: #fff
}

.material-icons:nth-of-type(1):hover {
    color: #0f5380
}

.material-icons:nth-of-type(1):after {
    border-color: #0f5380
}

.material-icons:hover {
    background-color: #228b22;
    transform: scale(1.6) rotate(360deg);
    cursor: pointer;
    box-shadow: none
}

.material-pic {
    color: #fff;
    position: relative;
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .55);
    transition: color .2s ease, background-color .2s ease, transform .3s ease;
    width: 75px
}

.material-pic:after {
    width: 100%;
    height: 100%;
    border: 2px solid;
    transform: scale(.8);
    position: absolute;
    top: -2px;
    left: -2px;
    border-radius: 50%;
    transition: all .3s ease
}

.material-pic:hover:after {
    transform: scale(1);
    box-shadow: 10px 0 20px rgba(0, 0, 0, .19), 6px 0 6px rgba(0, 0, 0, .23)
}

.material-pic:nth-of-type(1) {
    background-color: #fff
}

.material-pic:nth-of-type(1):hover {
    color: #0f5380
}

.material-pic:nth-of-type(1):after {
    border-color: #0f5380
}

.material-pic:hover {
    background-color: #228b22;
    transform: scale(1.3) rotate(360deg);
    transition: .7s;
    cursor: pointer;
    box-shadow: none
}

.material-button {
    height: 73px;
    background-color: #fff;
    position: relative;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .55);
    transition: color .2s ease, background-color .2s ease, transform .3s ease;
    margin: 10px
}

.material-button:hover {
    background-color: #228b22;
    transform: scale(1.1) rotate(9deg);
    cursor: pointer;
    box-shadow: none
}

.container-1 {
    overflow: hidden;
    width: 200px;
    vertical-align: middle;
    white-space: nowrap
}

.container-1 input#search {
    width: 200px;
    height: 27px;
    background: #d1d1d2;
    border: none;
    font-size: 10pt;
    float: left;
    color: #fff;
    padding-left: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.container-1 input#search::-webkit-input-placeholder {
    color: #65737e
}

.container-1 input#search:-moz-placeholder {
    color: #65737e
}

.container-1 input#search::-moz-placeholder {
    color: #65737e
}

.container-1 input#search:-ms-input-placeholder {
    color: #65737e
}

.container-1 button.icon {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: none;
    background: #232833;
    height: 27px;
    width: 30px;
    color: #4f5b66;
    opacity: 0;
    font-size: 10pt;
    -webkit-transition: all .55s ease;
    -moz-transition: all .55s ease;
    -ms-transition: all .55s ease;
    -o-transition: all .55s ease;
    transition: all .55s ease
}

.container-1:active button.icon,
.container-1:focus button.icon,
.container-1:hover button.icon {
    outline: 0;
    opacity: 1;
    margin-left: -50px
}

.container-1:hover button.icon:hover {
    background: #fff
}

body {
    background-color: #228B22
}

.container {
    background: #fff
}

.nav li a:hover,
.navbar-default .navbar-nav>li>a:hover {
    background: #239e23;
    transform: scale(.9);
    border-radius: 5px
}

.nav .navbar-nav {
    font-family: sans-serif
}

.nav li a,
.navbar-default .navbar-nav>li>a {
    float: left;
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 15px;
    font-family: ebrima;
    font-weight: 700;
    text-decoration: none
}

.nav li a {
    color: #228b22
}

.nav li a:hover {
    color: #fff;
    transition: transform .2s
}

.navbar-default .navbar-nav>li>a {
    color: #228b22
}

.navbar-default .navbar-nav>li>a:hover {
    color: #fff;
    transition: transform .5s
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: #228b22
}

.nav .icon {
    display: none
}

.navbar-default .navbar-nav>li>a .nav .open>a {
    background-color: #228b22;
    color: #fff;
    border-radius: 5px
}

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
    background-color: #000;
    color: #fff
}

.nav>li>a:focus,
.nav>li>a:hover {
    background-color: #228b22;
    color: #fff;
    border-radius: 5px
}

@media screen and (max-width:600px) {
    .nav a:not(:first-child) {
        display: none
    }

    .nav a.icon {
        float: right;
        display: block
    }

    .nav.responsive {
        position: relative
    }

    .nav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0
    }

    .nav.responsive a {
        float: none;
        display: block;
        text-align: left
    }
}

#cssmenu>ul>li,
.module {
    float: left
}

#footer {
    padding: 25px 0;
    background-color: #126812
}

.radio label .check,
.radio label .circle {
    color: #fff;
    border-color: #fff
}

.radio input[type=radio]:checked~.circle,
.radio-default input[type=radio]:checked~.circle {
    border-color: #fff
}

.radio input[type=radio]:checked~.check,
.radio-default input[type=radio]:checked~.check {
    background-color: #fff
}

.modal-content {
    background: #195c80;
    box-shadow: 0 0 24px 0 rgba(255, 252, 252, .6);
    border-radius: 10px;
    border: none
}

.modal-body .panel .panel-body {
    text-align: center;
    padding: 15px;
    font-family: Calibri;
    font-size: 17px
}

.module {
    background-size: cover;
    position: relative
}

.opp h2,
.opp2 h2 {
    font: 10px Calibri;
    background: rgba(255, 255, 255, .75);
    color: #000
}

.opp h2,
.opp2 h2,
.opp3 h2 {
    position: absolute;
    padding: 15px;
    text-align: center;
    margin: 0
}

.opp h2 {
    width: 149px;
    top: 50px;
    height: 50px
}

.opp2 h2 {
    width: 148px;
    top: 32px;
    height: 52px
}

.opp3 h2 {
    width: 401px;
    top: 267px;
    height: 70px;
    font: 18px Calibri;
    background: #dedede;
    color: #228b22;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px
}

.font-kantor,
.modal-header {
    font-weight: 700
}

body.modal-open {
    padding-left: 17px;
    overflow: inherit
}

.bendera,
.bendera-baru {
    margin-right: 5px;
    padding: 1px
}

.bendera {
    width: 4%;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .55);
    transition: color .2s ease, background-color .2s ease, transform .3s ease
}

.bendera-baru:after,
.bendera:after {
    border: 2px solid;
    height: 100%;
    position: absolute;
    top: -2px;
    left: -2px
}

.bendera:after {
    width: 100%;
    transform: scale(.8);
    border-radius: 50%;
    transition: all .3s ease
}

.bendera:hover:after {
    transform: scale(1);
    box-shadow: 10px 0 20px rgba(0, 0, 0, .19), 6px 0 6px rgba(0, 0, 0, .23)
}

.bendera:hover {
    background-color: #098dc5;
    transform: scale(.75);
    transition: transform .2s;
    cursor: pointer;
    box-shadow: none
}

.bendera-baru {
    width: 3%;
    margin-top: 2px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .55);
    transition: color .2s ease, background-color .2s ease, transform .3s ease
}

.bendera-baru:after {
    width: 100%;
    transform: scale(.8);
    border-radius: 50%;
    transition: all .3s ease
}

.bendera-baru:hover:after {
    transform: scale(1);
    box-shadow: 10px 0 20px rgba(0, 0, 0, .19), 6px 0 6px rgba(0, 0, 0, .23)
}

.bendera-baru:hover {
    background-color: #098dc5;
    transform: scale(.75);
    transition: transform .2s;
    cursor: pointer;
    box-shadow: none
}

.maklumat {
    width: 250px;
    margin-bottom: 20px;
    vertical-align: top
}

.maklumat:after {
    width: 100%;
    height: 100%;
    border: 2px solid;
    transform: scale(.8);
    position: absolute;
    top: -2px;
    left: -2px;
    border-radius: 50%;
    transition: all .3s ease
}

.maklumat:hover:after {
    transform: scale(1);
    box-shadow: 10px 0 20px rgba(0, 0, 0, .19), 6px 0 6px rgba(0, 0, 0, .23)
}

.maklumat:hover {
    transform: scale(1.1);
    transition: transform 1s;
    cursor: pointer
}

.nav-pills .dropdown-menu,
.nav-tabs .dropdown-menu,
.navbar .dropdown-menu {
    margin-top: 0
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, .2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px
}

.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    top: 11px;
    left: -6px
}

.carousel-indicators li {
    background-color: #2e7296
}

.panel-heading a:after {
    font-family: 'Glyphicons Halflings';
    content: "\e113";
    float: right;
    color: #fff
}

.panel-heading a.collapsed:after {
    content: "\e114"
}

.swiper-container {
    width: 100%;
    background: grey
}

.swiper-slide {
    font-size: 18px;
    background: grey;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

.menu-full {
    width: 1150px
}

.statistik-chart {
    width: 515px;
    height: 490px
}

#return-to-top {
    color: #fff;
    text-align: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(30, 108, 151, .7);
    width: 67px;
    text-decoration: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    display: none;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

#return-to-top:hover {
    background: rgba(30, 108, 151, .9);
    transform: scale(1.5)
}

#return-to-top:hover i {
    color: #fff;
    top: 6px
}

#gmaps {
    height: 380px
}

.mbot-xs-100 {
    margin-bottom: 100px
}

.mbot-xs-75 {
    margin-bottom: 75px
}

.mbot-xs-70 {
    margin-bottom: 70px
}

.mbot-xs-50 {
    margin-bottom: 50px
}

.mbot-xs-25 {
    margin-bottom: 25px
}

.mbot-xs-15 {
    margin-bottom: 15px
}

.mbot-xs-10 {
    margin-bottom: 10px
}

.mbot-xs-0 {
    margin-bottom: 0
}

.mtop-xs-175 {
    margin-top: 175px
}

.mtop-xs-155 {
    margin-top: 155px
}

.mtop-xs-125 {
    margin-top: 125px
}

.mtop-xs-100 {
    margin-top: 100px
}

.mtop-xs-75 {
    margin-top: 75px
}

.mtop-xs-65 {
    margin-top: 65px
}

.mtop-xs-70 {
    margin-top: 70px
}

.mtop-xs-50 {
    margin-top: 50px
}

.mtop-xs-55 {
    margin-top: 55px
}

.mtop-xs-25 {
    margin-top: 25px
}

.mtop-xs-15 {
    margin-top: 15px
}

.mtop-xs-10 {
    margin-top: 10px
}

.mtop-xs-0 {
    margin-top: 0
}

.ptop-xs-100 {
    padding-top: 100px
}

.ptop-xs-75 {
    padding-top: 75px
}

.ptop-xs-70 {
    padding-top: 70px
}

.ptop-xs-50 {
    padding-top: 50px
}

.ptop-xs-25 {
    padding-top: 25px
}

.ptop-xs-15 {
    padding-top: 15px
}

.ptop-xs-10 {
    padding-top: 10px
}

.ptop-xs-0 {
    padding-top: 0
}

.pbot-xs-100 {
    padding-bottom: 100px
}

.pbot-xs-75 {
    padding-bottom: 75px
}

.pbot-xs-70 {
    padding-bottom: 70px
}

.pbot-xs-50 {
    padding-bottom: 50px
}

.pbot-xs-25 {
    padding-bottom: 25px
}

.pbot-xs-15 {
    padding-bottom: 15px
}

.pbot-xs-10 {
    padding-bottom: 10px
}

.pbot-xs-0 {
    padding-bottom: 0
}

.h-xs-25vh {
    height: 25vh
}

.h-xs-33vh {
    height: 33vh
}

.h-xs-50vh {
    height: 50vh
}

.h-xs-75vh {
    height: 75vh
}

.h-xs-80vh {
    height: 80vh
}

.h-xs-90vh {
    height: 90vh
}

.h-xs-100vh {
    height: 100vh
}

.font-tanggal-berita {
    font-size: 8px;
    color: #fff
}

.font-berita {
    font-size: 10px
}

.panel-gambar-berita {
    height: 7px;
    margin-bottom: 0;
    margin-left: 0;
    box-shadow: none;
    background: 0 0;
    border-color: #fff
}

.panel-ikm,
.panel-jam-pelayanan {
    text-align: center;
    border: 7px solid #dedede
}

.judul-berita-agenda {
    width: 110px;
    margin-left: 9px;
    margin-bottom: 0
}

.panel-jam-pelayanan {
    height: 367px;
    border-radius: 10px
}

.panel-gambar-ikm,
.panel-header-jam {
    height: 13px;
    background: 0 0;
    border-color: #fff;
    margin-bottom: 0;
    box-shadow: none
}

.text-jam-pelayanan {
    text-align: center;
    padding-top: 20px;
    color: #4a4a4a;
    font-size: 12px
}

.panel-header-jam {
    margin-left: 0
}

.gambar-judul-jam {
    width: 250px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto
}

.panel-gambar-ikm {
    margin-left: 0
}

.gambar-judul-ikm {
    width: 250px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto
}

.panel-ikm {
    height: 367px;
    border-radius: 10px
}

.panel-berita {
    text-align: left;
    border: 7px solid #dedede;
    border-radius: 10px;
    height: auto;
    padding: 5px
}

.panel-banjar,
.panel-kelurahan {
    display: none;
    padding: 10px;
    margin: 0;
    list-style-type: square;
    color: #228b22;
    font-size: 14px
}

.head-footer {
    height: 22px;
    padding-left: 0;
    padding-right: 0;
    background-color: #fff
}

.gambar-logo-footer {
    width: 50px;
    margin-left: auto;
    margin-right: auto
}

.text-area-pesan {
    width: 75%
}

.topi-foto {
    margin-bottom: 0;
    background: 0 0;
    box-shadow: none;
    height: 12px;
    border-color: transparent
}

.btn-primary.btn-sop:hover,
.btn-primary.btn-year:hover {
    box-shadow: 0 1px 8px 4px rgba(21, 21, 21, .35);
    transform: scale(1.2)
}

.panel-foto {
    padding-top: 25px;
    height: 140px
}

.panel-video {
    padding-top: 10px;
    height: 104px
}

.panel-statistik {
    text-align: center;
    margin-left: 0;
    height: 240px;
    margin-top: 10px;
    border-top: 10px solid #dedede
}

.row-kantor {
    text-align: center;
    margin-top: 20px
}

.font-kantor {
    font-family: Calibri;
    color: #fff;
    font-size: 24px;
    margin-top: 0
}

.row-statistik-footer {
    margin-left: 0
}

.btn-primary.btn-sop,
.btn-primary.btn-year {
    height: 50px;
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    border-color: #2e6da4
}

.button-wna,
.button-wni {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 30px;
    background-color: #fff;
    transition: color .2s ease, background-color .2s ease, transform .3s ease
}

.btn-primary.btn-year {
    width: 50px;
    border-radius: 50%;
    padding: 0;
    background-color: #fff;
    color: #228b22
}

.btn-primary.btn-year:hover {
    background: #228b22;
    color: #fff
}

.btn-primary.btn-sop {
    width: auto;
    padding: 10px;
    border-radius: 20px;
    background-color: #fff;
    color: #228b22
}

.btn-primary.btn-sop:hover {
    background: #228b22;
    color: #fff
}

@media (min-width:600px) {
    .material-pic {
        color: #fff;
        position: relative;
        border-radius: 50%;
        padding: 3px;
        box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .55);
        transition: color .2s ease, background-color .2s ease, transform .3s ease;
        width: 130px
    }

    .material-pic:after {
        width: 100%;
        height: 100%;
        border: 2px solid;
        transform: scale(.8);
        position: absolute;
        top: -2px;
        left: -2px;
        border-radius: 50%;
        transition: all .3s ease
    }

    .material-pic:hover:after {
        transform: scale(1);
        box-shadow: 10px 0 20px rgba(0, 0, 0, .19), 6px 0 6px rgba(0, 0, 0, .23)
    }

    .material-pic:nth-of-type(1) {
        background-color: #fff
    }

    .material-pic:nth-of-type(1):hover {
        color: #0f5380
    }

    .material-pic:nth-of-type(1):after {
        border-color: #0f5380
    }

    .material-pic:hover {
        background-color: #228b22;
        transform: scale(1.3) rotate(360deg);
        transition: .7s;
        cursor: pointer;
        box-shadow: none
    }
}

@media (min-width:768px) {
    .mbot-sm-100 {
        margin-bottom: 100px
    }

    .mbot-sm-75 {
        margin-bottom: 75px
    }

    .mbot-sm-70 {
        margin-bottom: 70px
    }

    .mbot-sm-50 {
        margin-bottom: 50px
    }

    .mbot-sm-25 {
        margin-bottom: 25px
    }

    .mbot-sm-15 {
        margin-bottom: 15px
    }

    .mbot-sm-10 {
        margin-bottom: 10px
    }

    .mbot-sm-0 {
        margin-bottom: 0
    }

    .mtop-sm-250 {
        margin-top: 250px
    }

    .mtop-sm-225 {
        margin-top: 225px
    }

    .mtop-sm-220 {
        margin-top: 173px
    }

    .mtop-sm-200 {
        margin-top: 200px
    }

    .mtop-sm-140 {
        margin-top: 140px
    }

    .mtop-sm-125 {
        margin-top: 125px
    }

    .mtop-sm-100 {
        margin-top: 100px
    }

    .mtop-sm-75 {
        margin-top: 75px
    }

    .mtop-sm-70 {
        margin-top: 70px
    }

    .mtop-sm-50 {
        margin-top: 50px
    }

    .mtop-sm-25 {
        margin-top: 25px
    }

    .mtop-sm-15 {
        margin-top: 15px
    }

    .mtop-sm-10 {
        margin-top: 10px
    }

    .mtop-sm-0 {
        margin-top: 0
    }

    .ptop-sm-100 {
        padding-top: 100px
    }

    .ptop-sm-75 {
        padding-top: 75px
    }

    .ptop-sm-70 {
        padding-top: 70px
    }

    .ptop-sm-50 {
        padding-top: 50px
    }

    .ptop-sm-25 {
        padding-top: 25px
    }

    .ptop-sm-15 {
        padding-top: 15px
    }

    .ptop-sm-10 {
        padding-top: 10px
    }

    .ptop-sm-0 {
        padding-top: 0
    }

    .pbot-sm-100 {
        padding-bottom: 100px
    }

    .pbot-sm-75 {
        padding-bottom: 75px
    }

    .pbot-sm-70 {
        padding-bottom: 70px
    }

    .pbot-sm-50 {
        padding-bottom: 50px
    }

    .pbot-sm-25 {
        padding-bottom: 25px
    }

    .pbot-sm-15 {
        padding-bottom: 15px
    }

    .pbot-sm-10 {
        padding-bottom: 10px
    }

    .pbot-sm-0 {
        padding-bottom: 0
    }

    .h-sm-25vh {
        height: 25vh
    }

    .h-sm-33vh {
        height: 33vh
    }

    .h-sm-50vh {
        height: 50vh
    }

    .h-sm-75vh {
        height: 75vh
    }

    .h-sm-80vh {
        height: 80vh
    }

    .h-sm-90vh {
        height: 90vh
    }

    .h-sm-100vh {
        height: 100vh
    }

    .panel-berita {
        text-align: left;
        border: 7px solid #dedede;
        border-radius: 10px;
        height: 370px;
        padding: 15px
    }

    .font-tanggal-berita {
        font-size: 8px;
        color: #fff
    }

    .font-berita {
        font-size: 10px
    }

    .panel-gambar-berita {
        height: 7px;
        margin-bottom: 0;
        margin-left: 0;
        box-shadow: none;
        background: 0 0;
        border-color: #fff
    }

    .judul-berita-agenda {
        width: 110px;
        margin-left: 9px;
        margin-bottom: 0
    }

    .panel-jam-pelayanan {
        text-align: center;
        height: 367px;
        border: 7px solid #dedede;
        border-radius: 10px
    }

    .panel-gambar-ikm,
    .panel-header-jam {
        height: 13px;
        background: 0 0;
        border-color: #fff;
        margin-bottom: 0;
        box-shadow: none
    }

    .text-jam-pelayanan {
        text-align: center;
        padding-top: 20px;
        color: #4a4a4a
    }

    .panel-header-jam {
        margin-left: 0
    }

    .gambar-judul-jam {
        width: 250px;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto
    }

    .panel-gambar-ikm {
        margin-left: 0
    }

    .gambar-judul-ikm {
        width: 250px;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto
    }

    .panel-ikm {
        text-align: center;
        height: 367px;
        border: 7px solid #dedede;
        border-radius: 10px
    }

    .head-footer {
        height: 28px;
        padding-left: 0;
        padding-right: 0;
        background-color: #fff
    }

    .gambar-logo-footer {
        width: 60px;
        margin-left: auto;
        margin-right: auto
    }

    .topi-foto {
        margin-bottom: 0;
        background: 0 0;
        box-shadow: none;
        height: 18px;
        border-color: transparent
    }

    .module {
        float: left;
        background-size: cover;
        position: relative
    }

    .opp h2,
    .opp2 h2 {
        width: 262.5px;
        background: rgba(255, 255, 255, .75);
        color: #000
    }

    .opp h2,
    .opp2 h2,
    .opp3 h2 {
        position: absolute;
        height: 70px;
        padding: 15px;
        margin: 0;
        text-align: center
    }

    .opp h2 {
        top: 105px;
        font: 15px Calibri
    }

    .opp2 h2 {
        top: 77px;
        font: 18px Sans-Serif
    }

    .opp3 h2 {
        width: 401px;
        top: 267px;
        font: 18px Calibri;
        background: #dedede;
        color: #228b22;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px
    }

    .panel-foto {
        padding-top: 25px;
        height: 217px
    }

    .panel-video {
        padding-top: 35px;
        height: 217px
    }

    .panel-statistik {
        text-align: center;
        margin-left: 0;
        height: 290px;
        margin-top: 10px;
        border-top: 10px solid #dedede
    }

    .statistik-chart {
        width: 515px;
        height: 490px
    }

    .material-pic {
        color: #fff;
        position: relative;
        border-radius: 50%;
        padding: 3px;
        box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .55);
        transition: color .2s ease, background-color .2s ease, transform .3s ease;
        width: 170px
    }

    .material-pic:after {
        width: 100%;
        height: 100%;
        border: 2px solid;
        transform: scale(.8);
        position: absolute;
        top: -2px;
        left: -2px;
        border-radius: 50%;
        transition: all .3s ease
    }

    .material-pic:hover:after {
        transform: scale(1);
        box-shadow: 10px 0 20px rgba(0, 0, 0, .19), 6px 0 6px rgba(0, 0, 0, .23)
    }

    .material-pic:nth-of-type(1) {
        background-color: #fff
    }

    .material-pic:nth-of-type(1):hover {
        color: #0f5380
    }

    .material-pic:nth-of-type(1):after {
        border-color: #0f5380
    }

    .material-pic:hover {
        background-color: #228b22;
        transform: scale(1.3) rotate(360deg);
        transition: .7s;
        cursor: pointer;
        box-shadow: none
    }
}

@media (min-width:992px) {
    .mbot-md-100 {
        margin-bottom: 100px
    }

    .mbot-md-75 {
        margin-bottom: 75px
    }

    .mbot-md-70 {
        margin-bottom: 70px
    }

    .mbot-md-50 {
        margin-bottom: 50px
    }

    .mbot-md-25 {
        margin-bottom: 25px
    }

    .mbot-md-15 {
        margin-bottom: 15px
    }

    .mbot-md-10 {
        margin-bottom: 10px
    }

    .mbot-md-0 {
        margin-bottom: 0
    }

    .mtop-md-135 {
        margin-top: 135px
    }

    .mtop-md-132 {
        margin-top: 132px
    }

    .mtop-md-125 {
        margin-top: 125px
    }

    .mtop-md-100 {
        margin-top: 100px
    }

    .mtop-md-75 {
        margin-top: 75px
    }

    .mtop-md-70 {
        margin-top: 70px
    }

    .mtop-md-50 {
        margin-top: 50px
    }

    .mtop-md-25 {
        margin-top: 25px
    }

    .mtop-md-15 {
        margin-top: 15px
    }

    .mtop-md-10 {
        margin-top: 10px
    }

    .mtop-md-0 {
        margin-top: 0
    }

    .ptop-md-100 {
        padding-top: 100px
    }

    .ptop-md-75 {
        padding-top: 75px
    }

    .ptop-md-70 {
        padding-top: 70px
    }

    .ptop-md-50 {
        padding-top: 50px
    }

    .ptop-md-25 {
        padding-top: 25px
    }

    .ptop-md-15 {
        padding-top: 15px
    }

    .ptop-md-10 {
        padding-top: 10px
    }

    .ptop-md-0 {
        padding-top: 0
    }

    .pbot-md-100 {
        padding-bottom: 100px
    }

    .pbot-md-75 {
        padding-bottom: 75px
    }

    .pbot-md-70 {
        padding-bottom: 70px
    }

    .pbot-md-50 {
        padding-bottom: 50px
    }

    .pbot-md-25 {
        padding-bottom: 25px
    }

    .pbot-md-15 {
        padding-bottom: 15px
    }

    .pbot-md-10 {
        padding-bottom: 10px
    }

    .pbot-md-0 {
        padding-bottom: 0
    }

    .h-md-25vh {
        height: 25vh
    }

    .h-md-33vh {
        height: 33vh
    }

    .h-md-50vh {
        height: 50vh
    }

    .h-md-75vh {
        height: 75vh
    }

    .h-md-80vh {
        height: 80vh
    }

    .h-md-90vh {
        height: 90vh
    }

    .h-md-100vh {
        height: 100vh
    }

    .panel-gambar-berita {
        height: 10px;
        margin-bottom: 0;
        margin-left: 0;
        box-shadow: none;
        background: 0 0;
        border-color: #fff
    }

    .judul-berita-agenda {
        width: 170px;
        margin-left: 9px;
        margin-bottom: 0
    }

    .font-tanggal-berita {
        font-size: 10px;
        color: #fff
    }

    .font-berita {
        font-size: 15px
    }

    .panel-jam-pelayanan {
        text-align: center;
        height: 367px;
        border: 7px solid #dedede;
        border-radius: 10px
    }

    .panel-gambar-ikm,
    .panel-header-jam {
        height: 13px;
        background: 0 0;
        border-color: #fff;
        margin-bottom: 0;
        box-shadow: none
    }

    .text-jam-pelayanan {
        text-align: center;
        padding-top: 20px;
        color: #4a4a4a
    }

    .panel-header-jam {
        margin-left: 0
    }

    .gambar-judul-jam {
        width: 250px;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto
    }

    .panel-gambar-ikm {
        margin-left: 0
    }

    .gambar-judul-ikm {
        width: 250px;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto
    }

    .panel-ikm {
        text-align: center;
        height: 367px;
        border: 7px solid #dedede;
        border-radius: 10px
    }

    .head-footer {
        height: 40px;
        padding-left: 0;
        padding-right: 0;
        background-color: #fff
    }

    .topi-foto {
        margin-bottom: 0;
        background: 0 0;
        box-shadow: none;
        height: 18px;
        border-color: transparent
    }

    .module {
        float: left;
        background-size: cover;
        position: relative
    }

    .opp h2,
    .opp2 h2 {
        width: 262.5px;
        background: rgba(255, 255, 255, .75);
        color: #000
    }

    .opp h2,
    .opp2 h2,
    .opp3 h2 {
        position: absolute;
        height: 70px;
        padding: 15px;
        margin: 0;
        text-align: center
    }

    .opp h2 {
        top: 105px;
        font: 15px Calibri
    }

    .opp2 h2 {
        top: 77px;
        font: 18px Sans-Serif
    }

    .opp3 h2 {
        width: 401px;
        top: 267px;
        font: 18px Calibri;
        background: #dedede;
        color: #228b22;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px
    }

    .panel-foto {
        padding-top: 25px;
        height: 217px
    }

    .panel-video {
        padding-top: 35px;
        height: 217px
    }

    .panel-statistik {
        text-align: center;
        margin-left: 40px;
        height: 225px;
        margin-top: 10px;
        border-top: 10px solid #dedede
    }
}

@media (min-width:1200px) {

    .button-wna:hover,
    .material-button:hover {
        transform: scale(1.1) rotate(9deg);
        cursor: pointer
    }

    .mbot-lg-100 {
        margin-bottom: 100px
    }

    .mbot-lg-75 {
        margin-bottom: 75px
    }

    .mbot-lg-70 {
        margin-bottom: 70px
    }

    .mbot-lg-50 {
        margin-bottom: 50px
    }

    .mbot-lg-25 {
        margin-bottom: 25px
    }

    .mbot-lg-15 {
        margin-bottom: 15px
    }

    .mbot-lg-10 {
        margin-bottom: 10px
    }

    .mbot-lg-0 {
        margin-bottom: 0
    }

    .mtop-lg-125 {
        margin-top: 125px
    }

    .mtop-lg-100 {
        margin-top: 100px
    }

    .mtop-lg-94 {
        margin-top: 93px
    }

    .mtop-lg-90 {
        margin-top: 90px
    }

    .mtop-lg-75 {
        margin-top: 75px
    }

    .mtop-lg-70 {
        margin-top: 70px
    }

    .mtop-lg-50 {
        margin-top: 50px
    }

    .mtop-lg-25 {
        margin-top: 25px
    }

    .mtop-lg-15 {
        margin-top: 15px
    }

    .mtop-lg-10 {
        margin-top: 10px
    }

    .mtop-lg-0 {
        margin-top: 0
    }

    .ptop-lg-100 {
        padding-top: 100px
    }

    .ptop-lg-75 {
        padding-top: 75px
    }

    .ptop-lg-70 {
        padding-top: 70px
    }

    .ptop-lg-50 {
        padding-top: 50px
    }

    .ptop-lg-25 {
        padding-top: 25px
    }

    .ptop-lg-15 {
        padding-top: 15px
    }

    .ptop-lg-10 {
        padding-top: 10px
    }

    .ptop-lg-0 {
        padding-top: 0
    }

    .pbot-lg-100 {
        padding-bottom: 100px
    }

    .pbot-lg-75 {
        padding-bottom: 75px
    }

    .pbot-lg-70 {
        padding-bottom: 70px
    }

    .pbot-lg-50 {
        padding-bottom: 50px
    }

    .pbot-lg-25 {
        padding-bottom: 25px
    }

    .pbot-lg-15 {
        padding-bottom: 15px
    }

    .pbot-lg-10 {
        padding-bottom: 10px
    }

    .panel-gambar-berita {
        height: 10px;
        margin-bottom: 0;
        margin-left: 0;
        box-shadow: none;
        background: 0 0;
        border-color: #fff
    }

    .judul-berita-agenda {
        width: 170px;
        margin-left: 9px;
        margin-bottom: 0
    }

    .panel-berita {
        text-align: left;
        border: 7px solid #dedede;
        border-radius: 10px;
        height: 370px;
        padding: 15px
    }

    .font-berita {
        font-size: 15px
    }

    .font-tanggal-berita {
        font-size: 10.5px;
        font-weight: 400;
        color: #fff
    }

    .panel-jam-pelayanan {
        text-align: center;
        height: 367px;
        border: 7px solid #dedede;
        border-radius: 10px
    }

    .panel-gambar-ikm,
    .panel-header-jam {
        height: 13px;
        box-shadow: none;
        background: 0 0;
        border-color: #fff;
        margin-bottom: 0
    }

    .text-jam-pelayanan {
        text-align: center;
        padding-top: 20px;
        color: #4a4a4a
    }

    .panel-header-jam {
        margin-left: 0
    }

    .gambar-judul-jam {
        width: 250px;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto
    }

    .panel-gambar-ikm {
        margin-left: 0
    }

    .gambar-judul-ikm {
        width: 250px;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto
    }

    .panel-ikm {
        text-align: center;
        height: 367px;
        border: 7px solid #dedede;
        border-radius: 10px
    }

    .head-footer {
        height: 50px;
        padding-left: 0;
        padding-right: 0;
        background-color: #fff
    }

    .gambar-logo-footer {
        width: 100px;
        margin-left: auto;
        margin-right: auto
    }

    .material-button {
        height: 157px;
        width: 239px;
        background-color: #fff;
        position: relative;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .55);
        transition: color .2s ease, background-color .2s ease, transform .3s ease;
        margin: 10px
    }

    .button-wna,
    .button-wni {
        width: 100%;
        height: 100px;
        border-radius: 30px;
        transition: color .2s ease, background-color .2s ease, transform .3s ease
    }

    .material-button:hover {
        background-color: #228b22;
        box-shadow: none
    }

    .button-wna {
        margin-bottom: 10px;
        background-color: #fff
    }

    .button-wna:hover {
        background-color: #098dc5;
        box-shadow: none;
        color: #fff
    }

    .button-wni {
        background-color: #fff
    }

    .button-wni:hover {
        background-color: #098dc5;
        transform: scale(1.1);
        cursor: pointer;
        box-shadow: none;
        color: #fff
    }

    .text-area-pesan {
        width: 75%
    }

    .topi-foto {
        margin-bottom: 0;
        background: 0 0;
        box-shadow: none;
        height: 18px;
        border-color: transparent
    }

    .module {
        float: left;
        background-size: cover;
        position: relative
    }

    .opp h2,
    .opp2 h2 {
        width: 262.5px;
        background: rgba(255, 255, 255, .75);
        color: #000
    }

    .opp h2,
    .opp2 h2,
    .opp3 h2 {
        position: absolute;
        height: 70px;
        padding: 15px;
        margin: 0;
        text-align: center
    }

    .opp h2 {
        top: 105px;
        font: 15px Calibri
    }

    .opp2 h2 {
        top: 77px;
        font: 18px Sans-Serif
    }

    .opp3 h2 {
        width: 401px;
        top: 267px;
        font: 18px Calibri;
        background: #dedede;
        color: #228b22;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px
    }

    .panel-foto {
        padding-top: 25px;
        height: 217px
    }

    .panel-video {
        padding-top: 35px;
        height: 217px
    }

    .panel-statistik {
        text-align: center;
        margin-left: 40px;
        height: 225px;
        margin-top: 10px;
        border-top: 10px solid #dedede
    }

    .row-kantor {
        text-align: center;
        margin-top: 65px
    }

    .font-kantor {
        font-family: Calibri;
        font-weight: 700;
        color: #fff;
        font-size: 35px;
        margin-top: 65px
    }

    .material-icons {
        width: 60px;
        margin-right: 30px;
        margin-left: 30px;
        display: inline-block;
        font-size: 1.5rem;
        color: #fff;
        position: relative;
        border-radius: 50%;
        padding: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
        transition: color .2s ease, background-color .2s ease, transform .3s ease
    }

    .material-icons:after {
        width: 100%;
        height: 100%;
        border: 2px solid;
        transform: scale(.8);
        position: absolute;
        top: -2px;
        left: -2px;
        border-radius: 50%;
        transition: all .3s ease
    }

    .material-icons:hover:after {
        transform: scale(1);
        box-shadow: 10px 0 20px rgba(0, 0, 0, .19), 6px 0 6px rgba(0, 0, 0, .23)
    }

    .material-icons:nth-of-type(1) {
        background-color: #fff
    }

    .material-icons:nth-of-type(1):hover {
        color: #0f5380
    }

    .material-icons:nth-of-type(1):after {
        border-color: #0f5380
    }

    .material-icons:hover {
        background-color: #228b22;
        transform: scale(1.6) rotate(360deg);
        cursor: pointer;
        box-shadow: none
    }

    .btn-primary.btn-year,
    .material-pic:nth-of-type(1) {
        background-color: #fff
    }

    .btn-primary.btn-year {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-left: 10px;
        margin-bottom: 10px;
        font-size: 25px;
        font-weight: 700;
        text-align: center;
        padding: 0;
        border-color: #2e6da4;
        color: #228b22
    }

    .material-pic {
        color: #fff;
        position: relative;
        border-radius: 50%;
        padding: 3px;
        box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .55);
        transition: color .2s ease, background-color .2s ease, transform .3s ease;
        width: 250px
    }

    .material-pic:after {
        width: 100%;
        height: 100%;
        border: 2px solid;
        transform: scale(.8);
        position: absolute;
        top: -2px;
        left: -2px;
        border-radius: 50%;
        transition: all .3s ease
    }

    .material-pic:hover:after {
        transform: scale(1);
        box-shadow: 10px 0 20px rgba(0, 0, 0, .19), 6px 0 6px rgba(0, 0, 0, .23)
    }

    .material-pic:nth-of-type(1):hover {
        color: #0f5380
    }

    .material-pic:nth-of-type(1):after {
        border-color: #0f5380
    }

    .material-pic:hover {
        background-color: #228b22;
        transform: scale(1.3) rotate(360deg);
        transition: .7s;
        cursor: pointer;
        box-shadow: none
    }
}

@media only screen and (max-width :480px) {

    #recaptcha_challenge_image,
    #recaptcha_response_field,
    .recaptchatable #recaptcha_image {
        margin: 0 !important;
        width: 100% !important;
        height: auto !important
    }

    #footer {
        padding: 25px;
        background-color: #126812
    }

    #fbb frame{
        width: 20px;
    }

    .recaptchatable .recaptcha_image_cell,
    .recaptchatable .recaptcha_r1_c1,
    .recaptchatable .recaptcha_r2_c1,
    .recaptchatable .recaptcha_r3_c1,
    .recaptchatable .recaptcha_r3_c2,
    .recaptchatable .recaptcha_r3_c3,
    .recaptchatable .recaptcha_r4_c1,
    .recaptchatable .recaptcha_r4_c2,
    .recaptchatable .recaptcha_r4_c4,
    .recaptchatable .recaptcha_r7_c1,
    .recaptchatable .recaptcha_r8_c1 {
        margin: 0 !important;
        width: 100% !important;
        background: 0 0 !important;
        height: auto !important
    }
}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#cssmenu:after,
#cssmenu>ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

#cssmenu {
    width: auto;
    border-bottom: 3px solid #228b22;
    font-family: Raleway, sans-serif;
    line-height: 1
}

#cssmenu ul {
    background: #fff
}

#cssmenu.align-center>ul {
    font-size: 0;
    text-align: center
}

#cssmenu.align-center>ul>li {
    display: inline-block;
    float: none
}

#cssmenu.align-right>ul>li {
    float: right
}

#cssmenu.align-right>ul>li>a {
    margin-right: 0;
    margin-left: -4px
}

#cssmenu>ul>li>a {
    z-index: 2;
    padding: 18px 25px 12px;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    color: #444;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    margin-right: -4px
}

#cssmenu>ul>li.active>a,
#cssmenu>ul>li:hover>a,
#cssmenu>ul>li>a:hover {
    color: #fff
}

#cssmenu>ul>li>a:after {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 120%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    content: "";
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transform: perspective(5px) rotateX(1deg);
    -webkit-transform-origin: bottom;
    -moz-transform: perspective(5px) rotateX(2deg);
    -moz-transform-origin: bottom;
    transform: perspective(5px) rotateX(1deg);
    transform-origin: bottom
}

#cssmenu>ul>li.active>a:after,
#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li>a:hover:after {
    background: #228b22
}