.matrix-media-4-3 {
    background-size: contain;
}

ul.photoDetailPage-moreEntries.cf {
display: none;
}

 .subnav li a{ 
background-color: #eeeeee;
padding: 4px 10px;
border-radius: 4px;
color: black;
text-decoration:none;
font-size:1em;
}
 .subnav li.subnav-current > a, .subnav li a:hover{
background-color:royalblue;
text-decoration:none;
color:white;
}
.subnav-more > ul > li {
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

/****** NOTICE BOARD *****/

@media only screen and (  max-width:481px){
.page-notice-boards .site-body{ padding: 1px 1px 20px 1px; }
}

.page-notice-boards .site-body{ 
padding: 10px 10px 20px 10px;
 }
.page-notice-boards .sheet{
background-color:transparent;
border:none;
}
.page-notice-boards.isAdmin .button.button-primary {
background-color:grey;
color:white;
}
.page-notice-boards.isAdmin .button.button-primary:hover {
background-color:royalblue;
color:white;
}
.page-notice-boards .content-body{
    border: 10px solid silver;
    border-radius: 10px;
    padding: 0px!important;
    box-shadow: 0px 4px 7px rgba(0,0,0,0.7);
    background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/8701158?profile=original");
    background-attachment: scroll;
    background-position: top left;
    background-size: initial;
    background-repeat: repeat;
}
.page-notice-boards .content-body >.row{
 border: solid 2px gray;
 padding: 20px 0px;
margin:0!important;
}
.page-notice-boards .commentWallSection .row{
display:none;
}

/*.page-notice-boards .comments-commentBody.media-frame .comments-actions, */
.page-notice-board .addCommentContainer{ display:none }
.page-notice-boards.isAdmin .comments-commentBody.media-frame .comments-actions{ display:inline-block }
.page-notice-boards.isAdmin .addCommentContainer{ display:block }
.page-notice-boards .comments-commentBody.media-frame > .media-img {display:none }/* Hide Avatar */
.page-notice-boards .comments-main .comments-title{ display:none } /* Hide Word Comments title */
.page-notice-board .comments-commentBody.media-frame .comments-metadata{ display:none }/* Hide who posted and when */

/* Style Module Name */
.page-notice-boards .section-commentWall .module-name{
 color:#3d448a;
font-size:1.5em;
text-align:center;
border: solid #bfbaba 1px;
padding: 5px;
}
.page-notice-boards .section-commentWall .module-header{ background-color: white;
padding: 0px;
margin:0;
border: solid 4px #dadada;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.53);
border-radius: 4px;
margin-bottom:10px;
}
.page-notice-boards .content-name{
 text-align:center;
 font-size:3em;
 color:white; 
margin-bottom:5px ;
}
/** Style the notices **/
/*Side Column Ones As Post its*/
.page-notice-boards .column-narrow .comments-commentBody.media-frame{
 background-color:#f8f05e;
border-top: 30px solid #ffe558;
background-image:none;
padding: 5px 10px 15px 10px;
 text-align:left;
}
/* Add pins */
.page-notice-boards .comments-commentBody.media-frame {
background-color:snow;background-image:url(https://storage.ning.com/topology/rest/1.0/file/get/8527127472?profile=original),
 url(https://storage.ning.com/topology/rest/1.0/file/get/8527127089?profile=original);
background-repeat:no-repeat;background-position:top left,top right;
text-align:left;
padding:40px 10px 20px 10px;
 background-size:40px;
}
/* Add some space for entry comment with pins **/
.page-notice-boards .column-wide .comments-text.entry-content{
padding:20px 10px 10px 10px;
}

/* Box shadow behind the entry */
.page-notice-boards .comments-commentBody.media-frame{ box-shadow:0px 6px 8px rgba(0, 0, 0, 0.56);}
/* Remove the comment message when signed out */
.page-notice-boards .commentingMessage{ display:none }
/* Remove the comment deleted message */
.page-notice-boards .comments-deleted{ display:none!important }

/* Notice board: Main Notices Comment Wall */
.activityFeed-headline a[href$="CommentWall:18083"], .activityFeed-headline a[href$="CommentWall:17305"]::before, .activityFeed-headline a[href$="CommentWall:17307"]::before, .activityFeed-headline a[href$="CommentWall:22173"]::before{content:"Notice Board:";margin-right:10px; display:inline-block; color:royalblue }

.activityFeed-headline a[href$="CommentWall:18083"],.activityFeed-headline a[href$="CommentWall:17305"], .activityFeed-headline a[href$="CommentWall:17307"], .activityFeed-headline a[href$="CommentWall:22173"]{
   /* float: left;*/
    display: inline-block;
    width: 100%;
    padding: 10px 0px 10px 20px;
    background-color:f7f7f7;
    color: #6e8054;
    font-weight: bold;
    border-radius: 6px;
    border: solid 1px darkgray;
    margin-bottom: 10px;
    margin-top: 10px;

}
.activityFeed-headline a[href$="CommentWall:18083"]::before, .activityFeed-headline a[href$="CommentWall:17305"]::before, .activityFeed-headline a[href$="CommentWall:17307"]::before, .activityFeed-headline a[href$="CommentWall:22173"]::before{content:"Notice Board:";margin-right:10px; display:inline-block; color:royalblue }

.activityFeed-headline a[href$="CommentWall:18083"]:hover, .activityFeed-headline a[href$="CommentWall:17305"]:hover, .activityFeed-headline a[href$="CommentWall:17307"]:hover, .activityFeed-headline a[href$="CommentWall:22173"]:hover,.activityFeed-headline a[href$="CommentWall:17305"]:hover::before, .activityFeed-headline a[href$="CommentWall:17307"]:hover::before, .activityFeed-headline a[href$="CommentWall:22173"]:hover::before{
background-color:royalblue;color:white;
}
.activityFeed-footer .event-info-timestamp{
width:100%;display:block;float:left;
}
/** UPDATES FOR THE REPLY SECTIONS **/
.page-notice-boards .comments-level2 .comments-commentBody.media-frame{
background-color: #e6e6e6;
background-image:none;
padding:10px;
border-top:none;
}
.page-notice-boards .comments-level2 .comments-text.entry-content {
    padding: 5px 0px; font-size:14px;
}
.page-notice-boards .addCommentContainer .formFooter{
padding-top:0;
padding-bottom:10px;
}
.page-notice-boards .addCommentContainer .formFooter::before{ content:"Click to post this"; display:block; margin-right:10px; color:white;font-weight:bold}

/* Hide the reply,edit,delete from user */
.page-notice-boards .comments-commentBody.media-frame .comments-actions{ display:none }
.page-notice-boards.isAdmin .comments-commentBody.media-frame .comments-actions{ display:inline-block }


/**** END NOTICE BOARD ***/


/*******************************
EVENTS CALENDAR
*******************************/
.calendarGrid .span13{
background-color:white;/*color of event content background */
border:solid 1px lightgrey;
transition:0.2s ease-out;
}

@media screen and (min-width: 969px){
.calendarGrid .span13:hover .eventDetail-wrap{
background-color:white; /* event details background colour on hover */
color:grey; /* text colour */
 }
.calendarGrid .span13:hover a{
color: royalblue;
  }
.calendarGrid .span13:hover a:hover{
color:green;
}
}

.monthContainer{
 margin-top:20px;
 padding: 0px 5px 0px 5px;
 } /*the outer wrap of each month */
.monthContainer:not(:last-of-type){
border-bottom: solid 1px lightgrey;
}
.monthTitle {
    font-size: 2em;
    border-left: solid 15px #f1e1e1;
    padding-left: 8px;
    border-radius: 6px 0px 0px 6px;
    margin-left: -21px;
transition:0.4s ease-in-out;
}
.eventListPage-startDate {
text-align:left;
padding: 10px 0px 10px 2px;
}
.eventListPage-startDayOfWeek {
padding: 10px 0px 10px 5px;
background-color:#6779af;
color:white;
width: 100%;
text-align: left;
}
.calendarGrid{
display: grid;
grid-gap:5px;
padding:0px 10px;
margin-top:10px;
}
.calendarGrid .span10, .calendarGrid .span3, .calendarGrid .span13{
 width:100%;
 }
.calendarGrid .entry {
margin-bottom:16px!important;
}
.calendarGrid article.entry .span6{
 display:none;
 }/*hides the going and google calendar */

.calendarGrid article.entry{
position:relative;
min-height:185px }
.calendarGrid .eventDetail-wrap{
padding:10px;
height:auto;
}

.calendarWrap-container{
border:solid 1px lightgrey;
border-radius:0px 0px 4px 4px;
}
.eventListPage-SameDate{
background-color: #6779af;
    bottom: 0;
    width: 100%;
    height: 36px;
    margin-top: 20px;
}
.calendarHeader{
display:flex;
align-items:center;
font-size:2.5em;
background-color:royalblue;
color:white;
 padding:20px;
 }
.calendarHeader span{
 margin-right:auto;
 }
.calendarDisplay{
display:flex;
}
.calendarDisplay button{
margin:10px;
border:none;
border-radius:6px;
font-size:0.4em;
border:solid lightgrey 2px;
background-color:transparent;
transition: all .2s ease-in-out;
color:lightgrey;
padding:5px 10px;
display:flex;
align-items:center;
}
.calendarDisplay button:hover, .calendarGrid-btn.cdBtn-active, .calendarList-btn.cdBtn-active, .calendarDetail-btn.cdBtnDetails-active{
background-color:#398c3e;
color:white;
transition: all .2s ease-in-out;
}
.calendarDisplay span{
font-size: 1.5em;
    margin-right: 5px;
    background-color: rgb(22 35 111 / 25%);
    padding: 2px 4px 4px 4px;
border-radius:2px;
}
.calendarDetail-btn span{ background:transparent }
.monthContainer:hover{ background-color:#fbfbfb; }
.monthContainer:hover .monthTitle{ border-color:royalblue; transition:0.4s ease-in-out;}

.monthFilter{ display:flex;flex-wrap:wrap; align-items:center; padding-left:10px}
.monthFilter button{ border:none;padding:10px; font-size:12px; border-radius:4px }
.monthFilter button:hover{background-color:#0acc0a; color:white }
.monthFilter button.filter-active{background-color:#0acc0a; color:white }
.monthFilter ul{ display:flex;margin-left:10px; flex-wrap:wrap }
.monthFilter ul li{ margin:5px }

/**** MEDIA QUERIES START ***/

@media screen and (max-width: 969px){
.calendarDisplay{ display:none!important }
}

@media screen and (min-width: 969px){
.calendarGrid .media-frame > .eventPage-image {
   max-width: 60px;
}
.calendarGrid .eventPage-details{
min-height:90px;
}
.calendarGrid .eventPage-detail:not(:first-of-type){
 display:none;
}
.calendarGrid .span13:hover{ position:absolute;width:100%;z-index:1000;left:0;height:100%;top:75px; border:none}
.calendarGrid .span13:hover .eventDetail-wrap{
background-color:white;
border:none;
box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.27);
border-radius:0px 0px 6px 6px;
transition: all .2s ease-in-out;
}
.calendarGrid .eventDetail-wrap:hover .eventPage-detail{ display:block; }
.calendarGrid .entry .row{ height:100%; }
.calendarGrid .span13{ position:absolute; bottom:0; }
.calendarGrid .span13.showingEvent-details{ position:relative }
.calendarGrid .span13.showingEvent-details .eventPage-detail{ display:block; position:relative }
.calendarGrid .span13.showingEvent-details:hover{position:relative!important; top:0; height:auto}
}
@media screen and (min-width: 969px) {
.calendarGrid{
grid-template-columns: repeat(auto-fill, minmax(290px,1fr));
}
.calendarGrid.cgList{
grid-template-columns: repeat(auto-fill, minmax(100%,1fr));
   }
}
/*******************************
END EVENTS CALENDAR
*******************************/
.birthdayMembersShow{
display:none!important;
}
/*** PHOTO ALBUM PAGE BIZZ 2023****/
.page-gallery-list-categoriesAsAlbums .photoListPage .matrix-itemFluid {
margin-top:20px;
}
.page-gallery-list-categoriesAsAlbums  .photoListPage-entry .matrix-item [class*="matrix-media-"]{
box-shadow:none;
}
.page-gallery-list-categoriesAsAlbums  .photoListPage-entry .matrix-item:hover .photoInfo-container{
display:none!important;
}
 .photoListPage-entry-linkItem{
background-color:rgb(239, 239, 37);
padding: 14px;
border-radius: 0px 8px 8px 8px;
background-image: linear-gradient(#fff15f,rgba(280,182,0,0.30));
}
 .photoListPage-entry-linkItem:before {
    content: '';
    width: 50%;
    height: 16px;
    border-radius: 0 8px 0 0;
    background-color: rgb(254, 225, 10);
    position: absolute;
    top: -16px;
    left: 0px;
}
.photoListPage-entry-linkItem .photoListPage-entry-title {
  right:3px;
    left:3px;
    bottom: 0!important;
    padding: 14px 4px!important;
   font-size: 1.3em!important;
   font-weight: bold;
   background-color:transparent!important;
   text-align: center;
   color: #9a9a9a;
position:relative!important;
transition:0.3s;
}
.photoListPage-entry-linkItem{
border-top:solid 6px rgb(255, 193, 10);
}
 .photoListPage-entry-linkItem:hover  .photoListPage-entry-title{
background-color:royalblue!important;
color:white;
transition:0.3s;
}



<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-instagram {
  background: #FF0000;
  color: white;
}

</style>
</head>
<body>

<h2>Style Social Media Buttons</h2>

<!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-instagram"></a>
      
</body>
</html>