@media (min-width: 1366px) {
    .footer-section-1::before {
        height: 100%;
        background-size: cover;
        width: 666px;
    }
}
/*===========================================================================*/
/*1366px CSS*/
/*===========================================================================*/
@media (max-width: 1366px) {
    #banner .caption {
        top: 50px;
    }
    .footer-section-1::before {
        height: 100%;
        background-size: cover;
        width: 686px;
    }
    .news-widget .text-area a,
    .news-widget .text-area span {
        color: #fff;
    }
}

/*===========================================================================*/
/*1280px CSS*/
/*===========================================================================*/
@media (max-width: 1280px) {
    #banner .item {
        height: auto;
    }
    #banner .caption {
        top: 50px;
    }
    .news-widget .text-area a,
    .news-widget .text-area span {
        color: #fff;
    }
    .footer-section-1:before {
        height: 100%;
        background-size: cover;
        width: 646px;
    }
}

/*===========================================================================*/
/*767px CSS*/
/*===========================================================================*/
@media (max-width: 767px) {
    .address-style-2 .notes .top {
        width: 35%;
    }
    .login-section .email .title {
        font-size: 1.6rem;
    }

    /*************************** monitoring-berkas ******************************/
    .monkas .container .monkas-form {
        width: 80%;
    }
    .monkas .container .monkas-info {
        width: 80%;
    }
    /*************************** monitoring-berkas ******************************/
    /*************************** eCT-PBB ******************************/
    .tagihan-form .tagihan-card {
        width: 80%;
    }
    .data-pbb .data-card {
        width: 80%;
    }
    .data-tempo .tempo-row {
        flex-direction: column;
    }
    .data-tempo .hr-line {
        width: 100%;
        line-height: 25px;
        margin: 10px 0 15px 0;
        border-top: dashed 2px;
    }
    .data-tempo .tempo-header {
        width: 100%;
    }
    /*************************** eCT-PBB ******************************/
    .explore-section .video-frame-1 .modal-content {
        width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .signin-signup {
        padding: 50px 0;
        width: 100%;
    }

    .login-section .container::before {
        display: none;
    }

    .login-section .image {
        display: none;
    }
    .chart-section .btn-chart {
        margin: 0;
        width: 100%;
        float: left;
    }
    .chart-section .btn-chart ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .chart-section .btn-chart ul li {
        float: left;
        width: auto;
        padding: 0 5px;
    }
    .chart-section .btn-chart ul li a span {
        display: none;
    }

    .chart-section .btn-chart ul li a {
        text-align: center;
    }
    .chart-section .chart {
        display: block;
        width: 100%;
    }
    .top-row .right-box {
        display: none;
    }
    .top-row #scroll-container .item a {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* number of lines to show */
        -webkit-box-orient: vertical;
    }
    .top-row .left-box ul li {
        padding: 0 18px 0 0;
    }
    .news-detail.news-section .box {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .top-row .left-box {
        padding: 0 0 20px 0;
    }
    /* .top-row {
	text-align: center;
} */
    .top-row a.btn-style-1 {
        float: none;
        display: inline-block;
        margin-bottom: 7px;
    }
    strong.logo {
        width: 100%;
        text-align: center;
        margin: 0 0 10px 0;
    }
    .menu-col {
        width: 100%;
    }
    .menu-col-top {
        width: 100%;
    }
    .cp-burger-nav {
        display: none;
    }
    .menu-col .navbar {
        width: 100%;
    }
    .navbar-inverse .navbar-toggle {
        margin-right: 0;
    }
    .header-search .fa {
        font-size: 20px;
    }
    #nav li {
        float: none;
        display: block;
    }
    #nav {
        width: 100%;
    }
    #nav li ul {
        width: 100%;
        position: static;
        border: 1px solid #ccc;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    #nav li ul li > ul {
        position: static;
        width: 98%;
    }
    #banner .caption {
        top: 15px;
    }
    #banner .caption .holder {
        width: 100%;
    }
    #banner .caption .holder h1 {
        font-size: 33px;
        margin: 0 0 7px 0;
    }
    #banner .caption .holder strong.title {
        font-size: 24px;
        padding: 0 0 10px 0;
    }
    .highlight-box {
        margin-bottom: 20px;
    }
    .highlights-row .thumb {
        float: left;
        width: 100%;
    }
    .highlights-row .thumb img {
        display: block;
        width: 100%;
    }
    .highlights-row {
        padding: 50px 0;
    }
    .services-board .owl-nav {
        top: -30px;
    }
    .services-board .box {
        margin: 0;
    }
    /* .news-section a.btn-style-1, */
    /* .upcoming-event a.btn-style-1 {
        margin: 0 0 10px 0;
    } */
    .heading-style-1::before {
        display: none;
    }
    .governor-message .holder .image-frame {
        display: none;
    }
    .governor-message .holder .text-box {
        position: static;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .governor-message .holder {
        background: #000;
        height: auto;
        width: 100%;
        float: left;
    }
    .department-section {
        margin: 0;
    }
    /* .explore-section .btn-style-1 {
	margin: 0 0 15px 0;
} */
    .explore-section .video-frame {
        background-size: cover;
    }
    .explore-section .video-frame .modal-dialog {
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .explore-section .video-frame .modal-body iframe {
        height: 300px;
    }
    .community-citizen .box {
        margin-bottom: 20px;
    }
    .community-citizen .holder {
        width: 100%;
    }
    .footer-section-1::before {
        display: none;
    }
    .footer-box {
        margin-bottom: 20px;
    }
    .footer-social strong.title {
        padding: 0 0 20px 0;
    }
    .breadcrumb-col {
        width: 100%;
        padding: 20px 15px;
        margin-bottom: 30px;
    }
    #inner-banner {
        margin-bottom: 30px;
    }
    .about-section .text-box {
        margin-bottom: 30px;
    }
    .about-section .video-frame {
        background-size: cover;
    }
    .about-section .video-frame .modal-dialog {
        width: 100%;
        padding: 0 30px;
        margin: 0;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .about-section .video-frame .modal-body iframe {
        height: 350px;
    }
    .about-section {
        padding-bottom: 50px;
    }
    .gallery-box {
        margin: 0 20px 40px 0;
    }
    .governor-space {
        margin: 0;
    }
    .call-action-style-1 h2 {
        font-size: 28px;
    }
    .call-action-style-1 .space-box {
        width: 100%;
    }
    #filter li a {
        padding: 10px 23px;
    }
    .portfolio_block .col-md-4,
    .portfolio_block .col-md-4 img {
        width: 100%;
    }
    .mayor-space {
        padding: 40px 0;
    }
    .event-list .frame {
        float: left;
        width: 100%;
    }
    .event-list .event-caption {
        width: 100%;
        height: auto;
    }
    .blog-page .pagination-col {
        margin: 20px 0 30px 0;
    }
    .popular-videos {
        margin-bottom: 20px;
    }
    .video-frame-5 {
        width: 100%;
        margin: 0 0 20px 0;
        background-size: cover;
    }
    .city-law .box img {
        width: 100%;
    }
    .causes-list .frame {
        width: 100%;
    }
    .causes-list .causes-box .text-box {
        width: 100%;
    }
    .coming-soon .inner-content {
        width: 100%;
    }
    .contact-style-1 .address .box {
        margin-bottom: 20px;
    }
    .contact-style-1 .address {
        padding-bottom: 20px;
    }
    .map-box-1 .map_canvas {
        height: 300px;
    }
    .map-box-1 {
        margin-bottom: 20px;
    }
    /* .top-row, */
    .menu-col-top,
    .header-search {
        display: none;
    }
    .navbar-inverse .navbar-toggle {
        width: 100%;
        margin-right: 0;
    }
    .navbar-inverse .navbar-toggle .icon-bar {
        margin: 4px auto 0;
    }
    .logo-row .btm-row {
        margin: 0 0 10px 0;
    }
    .news-section .box {
        width: 46%;
        margin: 0 10px 30px 10px;
    }
    /* .news-section a.btn-style-1{
	margin:-90px 0 0 0;
} */
    .department-section .box {
        width: 30%;
        margin: 0 10px 30px 10px;
    }
}

/*===========================================================================*/
/*480px CSS*/
/*===========================================================================*/
@media (min-width: 320px) and (max-width: 480px) {
    .address-style-2 .notes .top span {
        font-weight: 500;
        font-size: 24px;
    }
    .login-section .email .title {
        font-size: 1.7rem;
    }

    /*************************** monitoring-berkas ******************************/
    .monkas .container .row {
        padding: 0 15px;
    }
    .monkas .container .monkas-flow .row {
        padding: 0;
    }

    .monkas .container .monkas-flow .row .monkas-row {
        padding: 0;
    }
    .monkas .container .monkas-form {
        width: 100%;
    }
    .monkas .container .monkas-info {
        width: 100%;
    }
    /*************************** monitoring-berkas ******************************/
    /*************************** eCT-PBB ******************************/
    .tagihan-form .tagihan-card {
        width: 100%;
    }
    .data-pbb .data-card {
        width: 100%;
    }
    /*************************** eCT-PBB ******************************/
    .modal-dialog {
        max-width: 500px;
    }
    .top-row .right-box {
        display: none;
    }
    .top-row #scroll-container .item a {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* number of lines to show */
        -webkit-box-orient: vertical;
    }
    .top-row .left-box {
        padding: 0;
        margin-bottom: 15px;
    }
    .news-section .box {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .news-list .box .text-box {
        width: auto;
    }
    .menu-col-top a.btn-style-1,
    .header-search,
    .menu-col-top ul {
        display: none;
    }
    .navbar-inverse .navbar-toggle {
        width: 100%;
        margin-right: 0;
    }
    .navbar-inverse .navbar-toggle .icon-bar {
        margin: 4px auto 0;
    }
    .logo-row .btm-row {
        margin: 0 0 10px 0;
    }
    /* .top-row{
	display:none;
} */
    .department-section .box {
        width: 43%;
        margin: 0 10px 30px 10px;
    }
    .department-section .text-box h4 {
        font-size: 14px;
    }
    .coming-soon {
        padding: 80px 0 0 0;
    }
    .error-section .holder {
        width: 100%;
    }
    .error-section h1 {
        font-size: 145px;
        margin: 0;
    }
    .error-section {
        padding: 0 0 70px 0;
    }
    .contact-style-1 .address .box {
        margin-bottom: 20px;
    }
    .contact-style-1 .address {
        padding-bottom: 20px;
    }
    .map-box-1 .map_canvas {
        height: 300px;
    }
    .map-box-1 {
        margin-bottom: 20px;
    }
    strong.logo-2 img {
        width: 100%;
    }
    .coming-soon .inner-content {
        width: 100%;
    }
    .coming-soon .inner-content h1 {
        font-size: 58px;
    }
    .coming-soon .inner-content p {
        margin-bottom: 30px;
    }
    .coming-soon .inner-content h2 {
        margin-bottom: 20px;
    }
    .donation-section form ul li {
        margin: 10px;
    }
    .donation-section form ul {
        margin-bottom: 20px;
    }
    .call-action-style-2 .text-col {
        width: 100%;
    }
    .causes-list .causes-box .text-box {
        width: 100%;
    }
    .post-box .link-box a.link-text {
        font-size: 20px;
    }
    .event-timer {
        display: none;
    }
    .media-news iframe {
        height: 230px;
    }
    .media-news {
        margin-bottom: 30px;
    }
    .popular-videos {
        margin-bottom: 20px;
    }
    .video-frame-4 {
        margin: 0 0 20px 0;
        width: 100%;
        background-size: cover;
    }
    .img-frame {
        margin: 0 0 15px 0;
        width: 100%;
    }
    .video-frame-5 {
        margin: 0 0 20px 0;
        width: 100%;
        background-size: cover;
    }
    .explore-city .popular-videos .text-box {
        width: 100%;
    }
    .explore-style-2 .popular-videos {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .city-law {
        margin: 30px 0;
    }
    .city-law .box img {
        width: 100%;
    }
    .img-frame img {
        display: block;
        width: 100%;
    }
    /* .media-left, */
    .media-right,
    .media-body {
        float: left;
        width: 100%;
    }
    .comments-section {
        margin-bottom: 40px;
    }
    .event-list .event-caption {
        width: 100%;
        padding: 15px 10px;
    }
    .event-box {
        margin-bottom: 30px;
    }
    .blog-page .pagination-col {
        margin: 20px 0;
    }
    .event-list .frame {
        float: left;
    }
    #inner-banner h1 {
        font-size: 39px;
    }
    .news-list .frame {
        width: 100%;
    }
    #inner-banner {
        padding: 75px 0 120px 0;
        margin-bottom: 30px;
    }
    .about-section .text-box {
        margin-bottom: 40px;
    }
    .about-section .video-frame .modal-dialog {
        width: 100%;
        margin: 0;
        padding: 0 40px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .about-section .video-frame .modal-body iframe {
        height: 260px;
    }
    .gallery-box {
        margin: 20px 0 40px 0;
    }
    .accordion-style-1 {
        margin-bottom: 40px;
    }
    .governor-space {
        margin: 0;
    }
    .breadcrumb-col {
        width: 100%;
        padding: 20px 15px;
        margin-bottom: 30px;
    }
    .call-action-style-1 h2 {
        font-size: 19px;
        line-height: 24px;
    }
    .call-action-style-1 .space-box {
        width: 100%;
    }
    #filter {
        text-align: center;
    }
    #filter li {
        float: none;
        display: inline-block;
        margin: 4px 2px;
    }
    .mayor-office h2 {
        font-size: 26px;
    }
    .mayor-space {
        padding: 40px 0;
    }
    .portfolio_block .col-md-4,
    .portfolio_block .col-md-4 img {
        width: 100%;
    }
    .gallery-box .thumb {
        width: 100%;
    }
    .gallery-box .thumb img {
        display: block;
        width: 100%;
    }
    .accordion_cp {
        font-size: 16px;
    }
    .top-row .left-box ul {
        display: block;
        text-align: center;
        float: none;
    }
    .top-row .left-box ul li {
        display: inline-block;
        float: none;
        padding: 4px;
    }
    /* .top-row {
	text-align: center;
} */
    .top-row a.btn-style-1 {
        display: inline-block;
        float: none;
    }
    strong.logo {
        width: 100%;
        text-align: center;
        margin: 0 0 10px 0;
    }
    .menu-col {
        width: 100%;
    }
    .menu-col-top {
        float: left;
        width: 100%;
    }
    .menu-col-top ul li {
        padding: 0 7px;
    }
    .menu-col-top ul {
        margin: 12px 0 0 0;
    }
    .cp-burger-nav {
        display: none;
    }
    .menu-col .navbar {
        float: left;
    }
    .header-search {
        margin: 12px 0 0 0;
    }
    .header-search .fa {
        font-size: 20px;
    }
    #banner .caption .holder {
        width: 100%;
    }
    #banner .caption {
        top: 20px;
    }
    #banner .caption .holder h1 {
        font-size: 15px;
        margin: 0 0 7px 0;
    }
    #banner .caption .holder strong.title {
        font-size: 13px;
    }
    #banner .caption .holder a.btn-style-2 {
        display: none;
    }
    .highlight-box {
        padding: 28px 20px;
    }
    .highlights-row .thumb {
        float: left;
        width: 100%;
    }
    .highlights-row .thumb img {
        display: block;
        width: 100%;
    }
    .highlights-row {
        padding: 50px 0;
    }
    .services-board .owl-nav {
        top: 0;
    }
    .menu-col .navbar-inverse {
        width: 100%;
    }
    #nav li {
        float: none;
        display: block;
    }
    .navbar-inverse .navbar-toggle {
        margin-right: 0;
    }
    #nav {
        width: 100%;
    }
    #nav li ul {
        position: static;
        border: 1px solid #ccc;
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    #nav li ul li > ul {
        width: 96%;
        position: static;
    }
    .facts-figures .holder .box strong.number {
        font-size: 53px;
    }
    .facts-figures {
        margin-bottom: 50px;
    }
    /* .news-section a.btn-style-1 {
	margin: 0 0 10px 0;
} */
    .news-section {
        padding: 0;
    }
    .upcoming-event {
        padding: 40px 0;
        height: auto;
    }
    /* .upcoming-event a.btn-style-1 {
        margin: 0;
    } */
    .event-caption {
        width: 100%;
        left: 0;
        height: auto;
    }
    .governor-message .holder {
        width: 100%;
        height: auto;
        background: #000;
        float: left;
    }
    .governor-message .holder .image-frame {
        display: none;
    }
    .governor-message .holder .text-box {
        position: static;
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    /* .explore-section .btn-style-1 {
        margin: 0 0 10px 0;
    } */
    .explore-section .video-frame .modal-dialog {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .explore-section .video-frame .modal-body iframe {
        height: 250px;
    }
    .explore-section .video-frame .close {
        right: 0;
        z-index: 999;
    }
    .popular-videos .popular-head h3 {
        font-size: 20px;
    }
    .popular-videos .text-col {
        float: left;
        width: 100%;
    }
    .video-frame-1,
    .video-frame-2 {
        margin: 0;
        width: 100%;
        background-size: cover;
    }
    .community-citizen .holder {
        width: 100%;
    }
    .community-citizen .box {
        margin-bottom: 20px;
    }
    .mayor-row {
        top: 0;
    }
    .mayor-office,
    .mayor-colo-2 {
        padding: 25px 20px;
    }
    .mayor-colo-2 a.link,
    .mayor-office a.link {
        margin: 0;
    }
    .community-citizen {
        padding-bottom: 40px;
    }
    .footer-box {
        margin-bottom: 30px;
    }
    .footer-section-1 .footer-box img {
        width: 100%;
    }
    .footer-section-1 .fo-news-widget .footer-h2 {
        font-size: 20px;
    }
    .footer-section-1 .footer-box .footer-h3 {
        font-size: 20px;
    }
    .footer-section-1 .footer-ul {
        padding: 0;
    }
    .footer-section-1 .footer-ul li {
        font-size: 13px;
    }
    .footer-section-1 .footer-ul a {
        font-size: 13px;
    }
    .footer-section-1::before {
        display: none;
    }
    .footer-social ul {
        display: block;
        text-align: center;
    }
    .footer-social ul li {
        float: none;
        display: inline-block;
        padding: 5px;
    }
    .footer-section-3 strong.copyrights {
        line-height: 20px;
    }
    .heading-style-1::before {
        display: none;
    }
    .flex-prev,
    .flex-next {
        display: none;
    }
    .department-section {
        margin: 0;
    }
}

@media (min-width: 993px) {
    .menu-1 .sidebar {
        display: none;
    }
}

@media (max-width: 993px) {
    .panel-section .row {
        margin-bottom: 1rem;
    }
    .panel-section .row .services-box {
        height: auto;
    }
    .panel-section .row .services-box:hover .icon {
        top: 10px;
    }
    .panel-section .row .services-box .icon i {
        font-size: 2em;
    }
    .panel-section .row .services-box .icon svg {
        width: 2em;
    }
    .panel-section .services-box .icon .on-title {
        font-size: 15px;
        bottom: 0;
    }
    .panel-section .row .services-box .content {
        padding: 0;
    }
    .panel-section .services-box .content h2 {
        display: none;
    }

    .panel-section .services-box .content p {
        display: none;
    }
}

/*===========================================================================*/
/*768px And 992px CSS*/
/*===========================================================================*/
@media (min-width: 768px) and (max-width: 992px) {
    .login-section .email .title {
        font-size: 1.6rem;
    }

    /*************************** monitoring-berkas ******************************/
    .monkas .container .monkas-form {
        width: 80%;
    }
    .monkas .container .monkas-info {
        width: 80%;
    }
    /*************************** monitoring-berkas ******************************/
    /*************************** eCT-PBB ******************************/
    .tagihan-form .tagihan-card {
        width: 75%;
    }
    .data-pbb .data-card {
        width: 75%;
    }
    /*************************** eCT-PBB ******************************/
    .explore-section .video-frame-1 .modal-content {
        margin-left: auto;
        margin-right: auto;
        width: 750px;
    }
    .signin-signup {
        padding: 50px 0;
    }
    .login-section form {
        padding: 0 1rem;
    }

    .chart-section .btn-chart {
        margin: 0;
        width: 100%;
        float: left;
    }
    .chart-section .btn-chart ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .chart-section .btn-chart ul li {
        float: left;
        width: auto;
    }
    .chart-section .btn-chart ul li a span {
        display: none;
    }

    .chart-section .btn-chart ul li a {
        text-align: center;
    }
    .chart-section .chart {
        display: block;
        width: 100%;
    }
    .top-row .right-box {
        display: none;
    }
    .top-row .left-box ul li {
        padding: 0 9px 0 0;
    }
    .post-box .text-box h3 {
        font-size: 23px;
    }
    .team-section {
        padding-top: 50px;
    }
    .menu-col-top,
    .cp-burger-nav {
        display: none;
    }
    #nav {
        float: none;
        display: block;
        text-align: center;
    }
    #nav li {
        display: inline-block;
        float: none;
    }
    .menu-col .navbar {
        width: 100%;
    }
    #nav li a {
        padding: 15px 13px;
    }
    .logo-row .btm-row {
        margin: 0;
    }
    .logo-row {
        padding: 0;
    }
    #nav li ul li {
        float: left;
        width: 100%;
    }
    .header-search {
        display: none;
    }
    .department-section {
        margin: 0;
    }
    .footer-box {
        min-height: 345px;
    }
    .contact-style-1 .address .box {
        min-height: 265px;
    }
    .contact-style-1 .address {
        padding: 0;
    }
    .map-box-1 {
        margin-bottom: 20px;
    }
    .map-box-1 .map_canvas {
        height: 500px;
    }
    .causes-list .causes-box .text-box,
    .causes-list .frame {
        width: 100%;
    }
    .coming-soon .inner-content {
        width: 100%;
    }
    #inner-banner {
        margin-bottom: 40px;
    }
    .video-frame-5 {
        width: 100%;
        background-size: cover;
        margin: 0 0 20px 0;
    }
    .donation-section .input-box {
        min-height: 98px;
    }
    .explore-city .popular-videos .text-col {
        margin: 0 0 20px 0;
    }
    .city-law {
        margin: 40px 0;
    }
    .city-law .box img {
        width: 100%;
    }
    .call-action-style-1 .space-box {
        width: 100%;
    }
    .event-list .frame {
        float: left;
        width: 100%;
    }
    .event-list .event-caption {
        width: 100%;
        height: auto;
    }
    .breadcrumb-col {
        width: 100%;
    }
    .about-section .video-frame .modal-dialog {
        width: 100%;
        padding: 0 40px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .heading-style-1::before {
        display: none;
    }
    .accordion_cp {
        font-size: 14px;
    }
    .gallery-box .thumb,
    .gallery-box .thumb img {
        width: 100%;
    }
    .gallery-box {
        margin: 10px 0 40px 0;
    }
    .team-section {
        padding-bottom: 50px;
    }
    .governor-space {
        margin: 0;
    }
    strong.logo {
        width: 100%;
        text-align: center;
    }
    .menu-col {
        width: 100%;
    }
    .menu-col-top {
        width: 100%;
    }
    .header-search {
        float: left;
        margin: 0;
    }
    .menu-col .navbar {
        margin: 20px 0 0 0;
    }
    #nav li ul {
        left: inherit;
        right: 0;
    }
    #nav li ul li > ul {
        left: inherit;
        right: 100%;
    }
    #banner .caption {
        top: 30px;
    }
    #banner .caption .holder h1 {
        font-size: 33px;
        margin: 0 0 5px 0;
    }
    #banner .caption .holder strong.title {
        font-size: 24px;
        padding: 0 0 15px 0;
    }
    .highlights-row .thumb {
        float: left;
        width: 100%;
    }
    .highlights-row .thumb img {
        display: block;
        width: 100%;
    }
    .highlight-box {
        padding: 28px 15px;
    }
    .facts-figures .holder .box strong.number {
        font-size: 43px;
    }
    .facts-figures .holder .box span {
        font-size: 21px;
        line-height: 21px;
    }
    .governor-message .holder .image-frame {
        display: none;
    }
    .governor-message .holder {
        width: 100%;
    }
    .governor-message .holder .text-box {
        position: static;
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .explore-section .video-frame .modal-dialog {
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .video-frame-1,
    .video-frame-2 {
        width: 100%;
        margin: 0;
        background-size: cover;
    }
    .popular-videos .text-col {
        float: left;
        width: 100%;
    }
    .community-citizen .holder {
        width: 100%;
        float: left;
    }
    .community-citizen .box {
        margin-bottom: 20px;
    }
    .mayor-office {
        padding: 27px 20px;
    }
    .mayor-office a.link,
    .mayor-colo-2 a.link {
        margin: -28px 0 0 0;
    }
    .footer-section-1::before {
        display: none;
    }
    .footer-box {
        margin-bottom: 30px;
    }
    .footer-section-1 {
        padding: 40px 0 0 0;
    }
}

/*===========================================================================*/
/*1199px CSS*/
/*===========================================================================*/
@media (min-width: 993px) and (max-width: 1199px) {
    .login-section .email .title {
        font-size: 1.5rem;
    }

    #scroll-container {
        max-width: 350px;
    }
    .top-row #scroll-container .item a {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* number of lines to show */
        -webkit-box-orient: vertical;
    }
    .chart-section .chart {
        max-width: 780px;
    }
    #nav li > a {
        padding: 10px 0 10px 15px;
    }

    .highlights-row .thumb {
        float: left;
        width: 100%;
    }
    .highlights-row .thumb img {
        display: block;
        width: 100%;
    }
    .donation-section form ul li {
        margin: 0 26px;
    }
    .services-board .box h3 a span {
        display: inline-block;
    }
    .post-box .text-box h3 {
        font-size: 19px;
    }
    .event-list .event-caption {
        width: 360px;
        height: 247.5px;
        padding: 10px;
    }
    .event-caption .text-col .content-item {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* number of lines to show */
        -webkit-box-orient: vertical;
    }
    .highlight-box {
        padding: 26px 20px;
    }
    .news-section .box .text-box {
        min-height: 377px;
    }
    .department-section .text-box h4 {
        font-size: 14px;
    }
    .governor-message .holder .text-box {
        right: 223px;
    }
    .popular-videos .text-col {
        float: left;
        width: 100%;
    }
    .community-citizen .holder {
        width: 100%;
    }
    .community-citizen .box ul li a {
        font-size: 12px;
    }
    .footer-section-1::before {
        display: none;
    }
    .governor-message .holder {
        width: 100%;
    }
    .menu-col {
        width: 100%;
    }
    .menu-col-top {
        width: 100%;
    }
    .menu-col .navbar {
        float: left;
    }
    /* #nav li a {
	padding: 5px 25px 28px 0;
} */
    #banner .caption {
        top: 50px;
    }
    #banner .caption .holder h1 {
        font-size: 37px;
    }
    .governor-message .holder .image-frame {
        display: none;
    }
    .mayor-office,
    .mayor-colo-2 {
        padding: 27px 30px;
    }
    .mayor-office a.link,
    .mayor-colo-2 a.link {
        margin: -28px 0 0 0;
    }
    .breadcrumb-col {
        width: 100%;
    }
    .heading-style-1::before {
        display: none;
    }
    .gallery-box .thumb,
    .gallery-box .thumb img {
        width: 100%;
    }
    .accordion_cp {
        font-size: 16px;
    }
    .gallery-box {
        margin: 10px 0 40px 0;
    }
    .governor-space {
        margin: 0;
    }
    .footer-box h3 {
        font-size: 21px;
    }
    .services-board .box h3 {
        font-size: 20px;
    }
    .services-board .box {
        padding: 38px 17px;
    }
    .news-list .frame {
        width: 100%;
    }
    .news-section.news-list .box .text-box {
        min-height: inherit;
        width: 100%;
    }
    .city-law .box img {
        width: 100%;
    }
    .causes-btm-row ul li {
        margin-bottom: 5px;
    }
    .causes-list .frame {
        width: 308px;
    }
    .faq .accordion_cp {
        font-size: 21px;
    }
}
@media (max-width: 576px) {
    .footer-box .footer-logo {
        display: flex;
        justify-content: center;
    }
    .fo-news-widget ul {
        padding: 0 0 0 40px;
    }
    .landing .heading-style-1 h2 {
        font-size: 25px;
    }
}
@media (min-width: 576px) {
    .footer-box ul {
        padding-inline-start: 20px;
    }
    .modal-dialog {
        max-width: 850px;
    }
}