.branding a img,
.branding img {
    width: 100px;
    padding: 30px 0;
}


.menu-toggle {
    border-radius: 50px;
    padding: 24px 20px;
}


#direccio,
#direccio h4 {
    color: white;
}

#direccio a {
    color: white;
    text-decoration: none;
}


#mapa {
    background: url(https://www.baixebreavant.cat/wp-content/uploads/2021/11/img_mapa_home.jpg) no-repeat center center;
    background-size: contain;
}


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

    #mapa {
        padding-bottom: 80%;
    }

    #logos>div {
        display: grid;
        grid-template-columns: repeat(2, auto) !important;
    }

    #direccio #logos {
        height: 330px !important;
        opacity: 1 !important;
    }

    footer #logos {
        opacity: 1 !important;
    }

}




#main ul {
    list-style: none;
}


#main ul li {
    position: relative;
    padding-bottom: 8px;
}


#main ul li:before {
    content: '';
    position: absolute;
    border-right: 2px solid #393939;
    border-bottom: 2px solid #393939;
    width: 10px;
    height: 10px;
    top: 12px;
    left: -20px;
    transform: translateY(-50%) rotate(-45deg);
}



#prefooter h3,
#contingut h3 {
    font-size: 26px;
    line-height: 31px;
    color: #0c687a;
}


#contingut img {
    width: 100%;
    display: block;
}

#contingut .greenlinks a {
    color: white;
    background: #0c687a;
    text-decoration: none;
    padding: 10px 5px;
}



.post-thumbnail {
    display: none !important;
}


.greenlinks a {
    color: white;
    background: #0c687a;
    text-decoration: none;
    padding: 10px 5px;
}


.greenlinks a:hover {
    color: #0c687a;
    background: white;
    padding: 8px 3px;
    border: 2px solid #0c687a;
}


@media screen and (max-width: 900px) {
    #hub {
        grid-template-columns: 100% !important;
    }

    #hub a {
        display: grid !important;
        font-size: 18px !important;
        padding: 25px 20px;
        line-height: 25px !important;
        grid-template-columns: 60px auto !important;
    }

}

@media screen and (max-width: 350px) {
    #hub a {
        grid-template-columns: 50px auto !important;
    }

    #hub img {
        width: 50px !important;
    }

}


#contingut b,
#contingut strong {
    color: #0c687a;
}

.mobile-header-bar .mobile-branding img {
    max-width: 100%;
    height: auto;
    width: 85px;
    margin: 30px 15px 30px 0;
}



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


    #headerMain #botons {
        display: grid;
        text-align: center;
        row-gap: 10px;
    }


    #headerMain {
        align-items: center;
        display: grid;
        grid-template-columns: auto !important;
        row-gap: 30px;
        text-align: center;
    }


}

#direccio a {
    word-break: break-all;
}

#xarxessocials p {
    display: flex;
    column-gap: 5px;
}

#xarxessocials img {
    width: 30px;
    height: 30px;
}

#xarxessocials a:hover img.on,
#xarxessocials img.off {
    display: block;
}

#xarxessocials img.on,
#xarxessocials a:hover img.off {
    display: none;
}