.bg-overlay-barobo {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/to_go/barobo/img1.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    padding-top: 130px;
}

.bg-overlay-bayabas {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/bayabas/BAYABAS ICON.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    padding-top: 130px;
}

.bg-overlay-bislig {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/BISLIG CITY/SUR (5).jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-cagwait {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/CAGWAIT/CAGWAIT.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-cantilan {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/CANTILAN/LIBTONG.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-carmen {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/CARMEN/hubason.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-carrascal {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/CARRASCAL/CARRASCAL EXTREME.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-cortes {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/CORTES/LASWITAN.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-hinatuan {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/HINATUAN/enchanted.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-lanuza {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/LANUZA/DSCF2449.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-lanuza {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/LANUZA/DSCF2449.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-lianga {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/LIANGA/lianga.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-lingig {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/LINGIG/lingig.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-madrid-new {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/MADRID/madrid-new-head.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-marihatag {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/MARIHATAG/MARIHATAG ICON.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-sanagustin {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/SAN AGUSTIN/BRITANIA ISLANDS.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-sanmiguel {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/SAN MIGUEL/IMG-7538-01.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-tagbina {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/TAGBINA/TAGBINA COFFEE.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-tago {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/TAGO/tago.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

.bg-overlay-tandag {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../../img/spotlights-page/TANDAG CITY/linungao.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
    color: #fff;
    height: 400px;
    padding-top: 130px;
}

/* end bg overlay */

.color-mun {
    color: #19519F;
}

.municipal-icon {
    border-radius: 50%;
    vertical-align: middle;
}

.greetings-mun {
    background-color: #00C9B6;
}

.wave1-mun {
    height: 10px;
    position: relative;
    background: #fff;
}

.wave1-mun {
    color: #00C9B6;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    padding-top: 5px;
    padding-bottom: 25px;

}

.wave1-mun::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: repeat;
    height: 10px;
    background-size: 20px 20px;
    background-image:
        radial-gradient(circle at 10px -5px, transparent 12px, #00C9B6 13px);
}

.wave1-mun::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: repeat;
    height: 15px;
    background-size: 40px 20px;
    background-image:
        radial-gradient(circle at 10px 15px, #00C9B6 12px, transparent 13px);
}

.wave2-mun {
    height: 10px;
    position: relative;
    background: #00C9B6;
}

.wave2-mun {
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    padding-top: 0px;
    padding-bottom: 25px;

}

.wave2-mun::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: repeat;
    height: 10px;
    background-size: 20px 20px;
    background-image:
        radial-gradient(circle at 10px -5px, transparent 12px, #fff 13px);
}

.wave2-mun::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: repeat;
    height: 15px;
    background-size: 40px 20px;
    background-image:
        radial-gradient(circle at 10px 15px, #fff 12px, transparent 13px);
}


/* HOVER */


#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {
    opacity: 0.7;
}



@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.close {
    position: absolute;
    top: 80px;
    right: 35px;
    color: #f1f1f1;
    font-size: 80px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}



/* END HOVER */