/* 
Theme Name: SP Tabaco
Theme URI::
Version: 1.0
Author: IT - LGU TABACO
Author URI: tabacocity.com.ph
Description: A WordPress Theme for the Sangguniang Panlungsod ng Tabaco Website
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    background-size: 500px 500px;
    background-repeat: repeat repeat;
    background-attachment: fixed;
}

.hrcommittee hr:after {
    content: "SP Standing Committees";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

.center {
    margin: auto;
    width: 75%;
    padding: 10px;
}

.textbold {
    font-weight: bold;
}

.img-responsive {
    margin: auto;
    /* padding: auto; */
    width: 50%;
    height: auto;
    object-fit: cover;
}

.spcouncilmain h1 {
    color: #666;
    font-weight: bold;
}

.spcouncilmain h2 {
    color: #666;
    font-weight: bold;
}

.spcouncilmain h3 {
    color: #666;
    font-weight: bold;
}

.spcouncilmain h4 {
    color: #666;
    font-weight: bold;
}

.spcouncilmain h5 {
    color: #666;
    font-weight: bold;
}

.spcouncilmain h6 {
    color: #666;
    font-weight: bold;
}

.m-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: cover;
}

.m-image img:hover {
    transform: scale(1.02);
    transition: 0.4s;
}

.bg-tabaco {
    background-color: #9d207d;
}

.bg-cityhall {
    background-size: cover;
}

.bg-committee {
    background-repeat: no-repeat;
    background-position: center;
}

li.active {
    border-bottom: 2px solid #fff;
    background-color: #b62992;
}

.navbar-nav li:hover {
    background-color: #b63a97;
    transition: 0.4s;
}

.headlogo {
    width: auto;
    height: 48px;
}

.portraitpic {
    width: auto;
    height: 300px;
}

.bg-white {
    background-color: #fff;
}

.fontbarlow {
    font-family: 'Barlow Condensed';
}

.fontubuntu {
    font-family: 'Ubuntu';
}

.fw-bold p {
    font-size: 100px;
}

.stroke-1w {
    -webkit-text-stroke: 1px #fff;
}

.lined {
    text-decoration: underline;
    text-underline-offset: 10px;
}

.cardindex {
    padding: 20px;
}

.cardindex div {
    text-align: center;
    margin: 25px 0;
}

.cardindex a {
    color: #b61f90;
}

.cardindex a:hover {
    transition: 0.15s;
    color: #fff;
    -webkit-animation: glow 0.75s ease-in-out infinite alternate;
    -moz-animation: glow 0.75s ease-in-out infinite alternate;
    animation: glow 0.75s ease-in-out infinite alternate;
}

.highlights a {
    color: #b61f90;
}

.highlights a:hover {
    transition: 0.15s;
    color: #ff42b7;
    text-shadow: #000;
}

@-webkit-keyframes glow {
    from {
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #e60073, 0 0 4px #e60073, 0 0 5px #e60073, 0 0 6px #e60073, 0 0 7px #e60073;
    }
    to {
      text-shadow: 0 0 2px #fff, 0 0 3px #ff4da6, 0 0 4px #ff4da6, 0 0 5px #ff4da6, 0 0 6px #ff4da6, 0 0 7px #ff4da6, 0 0 8px #ff4da6;
    }
}

.m-text h1 {
    color: #b61f90;
}

.m-text h4 {
    color: #7e7e7e;
}

.cmtee th {
    font-weight: bold;
    padding: 0 2.5rem 0 0;
    vertical-align: top;
}

.cmtee tr {
    vertical-align: top;
}

.cmtee h4 {
    color: #ad0583;
}

.fontcmtee {
    color: #ad0583;
}

.members p {
    margin: 0;
}

.ordireso-headbg {
    width: 100%;
    background-color: #9d207d;
}

.ordireso-th h4 {
    text-align: center;
    color: white;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(81, 81, 81, 0.5), 0 0 1px #000;
}

.more-categories {
    text-align: right;
    padding: 10px;
}

.textlimit li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.textlimit a {
    padding: 20px;
    color: #000;
    text-decoration: none;
    text-shadow: black;
}

.textlimit a:hover {
    color: #9d207d;
    text-decoration: underline;
}

.cardfooter article {
    padding-top: 1.5rem;
}

@media (max-width: 576px) {
    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (max-width: 720px) {
    .lined {
        text-decoration: underline;
        text-underline-offset: 8px;
    }
}