body {
    margin:0;
    color:#333333;
    font-family: "Raleway", Arial, Helvetica, sans-serif;
    background:#FFFFFF;
}
h1 {font-size:20px;font-weight: bold;}
a img  
{  
border: none;  
}
header {
    width:100%;
    background:#F1F1F1;
    border-bottom:2px solid #FAA719;
}
.header-responsive-line {
  display: none;
}
.logo {
    float:left;
}
.logo img{
    padding:10px;
    width:200px;
}
.topnav {
  margin-top:20px;
  overflow: hidden;
  float:right;
}

.topnav a {
  float: left;
  display: block;
  color: #333333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #F1F1F1;
  color: black;
}

.topnav .icon {
  display: none;
}

.main-slide a{color:#FFFFFF;text-decoration:none;}
.slide-details {
    width:100%;
    padding:20px;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Black background with transparency */
}
.home-intro {padding:60px;background:#FFFFFF;}
.home-intro a{color:#333333;text-decoration:none;}

.content {
    margin:auto;
    width:90%;
}
#neighbours {
    padding-top:40px;
	padding-bottom:40px;
}
#friends {
    padding-top:40px;
	padding-bottom:40px;
}

#about-us {
    padding-top:40px;
	padding-bottom:40px;
}
#contact-us {
    padding-top:40px;
	padding-bottom:40px;
}
footer {
    padding:20px;
	background:#333333;
}
footer a{
    color:#FFFFFF;text-decoration:none;
}

.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-responsive-line {
  display: block;
  clear:both;
}
.topnav {
  width:100%;
  float:left;
}
}


.timeline {
    margin:auto;
    width:90%;
}
.timeline .container {
    background:#F1F1F1;
    border: 2px solid #FAA719;
}
.timeline .head-date {
    padding:10px;
    background:#F1F1F1;
    border: 2px solid #FAA719;
    position:relative;
}
.timeline .head-date:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 5%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 15px #FAA719;
    border-left: solid 15px transparent;
    border-right: solid 15px transparent;
}




/* Create two equal columns that floats next to each other */
.timeline .columns {
    float: left;
    width: 50%;
}
.timeline .left{
    padding:20px 0 20px 20px;
}
.timeline .right{
    padding:20px 0 20px 20px;
}


/* Clear floats after the columns */
.timeline .container:after {
    content: "";
    display: table;
    clear: both;
}



.event-read-more {
    color:#333333;
    text-decoration:none;
}


.home-our-events {padding:60px 0;background:#F1F1F1;}
.home-photo-gallery {padding:60px 0;background:#FFFFFF;}
.home-video-gallery {padding:60px 0;background:#F1F1F1;}
.home-members {padding:60px 0;background:#FFFFFF;}

.home-events {text-decoration:none;color:#333333;}
.home-events .event-name {font-size:16px;font-weight: bold;}

.home-events .event-date {}

.photo-gallery-carousel-box {
    padding:20px;
    background:#F1F1F1;
}
.photo-gallery-carousel-box a{
color:#555555;
}
.photo-gallery-carousel-box:hover{
opacity: 0.8;
  filter: alpha(opacity=80);
}
.photo-gallery-carousel-box .name{
    font-size:16px;
font-weight: bold;
}




.video-gallery-carousel-box {
    padding:20px;
    background:#F1F1F1;
}
.video-gallery-carousel-box a{
color:#555555;
}
.video-gallery-carousel-box:hover{
opacity: 0.8;
  filter: alpha(opacity=80);
}
.video-gallery-carousel-box .name{
    font-size:16px;
font-weight: bold;
}


.members-carousel-box {
    padding:10px;
    background:#F1F1F1;
}
.members-carousel-box a{
color:#555555;
}
.members-carousel-box:hover{
opacity: 0.8;
  filter: alpha(opacity=80);
}
.members-carousel-box .name{
    font-size:16px;
font-weight: bold;
}


.home-volunteers {
    padding:20px 0;
    color:#FFFFFF;
    background:#f15757;
}


.suggestions-container {
  border: 2px solid #FAA719;
  background-color: #F1F1F1;
  padding: 16px;
  margin: 16px 0
}
.suggestions-container a{
  color:#333333;text-decoration:none;
}

.suggestions-container::after {
  content: "";
  clear: both;
  display: table;
}

.suggestions-container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

.suggestions-container span {
  font-size: 20px;
  margin-right: 15px;
}




.facebook-bar {
   position: fixed;
   width:100%;
   right: 0;
   bottom: 0;
   padding:10px 0;
   background-color: #3b5998;
   color: white;
   z-index:8;
}
.facebook-bar a{

   text-decoration:none;
   color:#FFFFFF;
}
.facebook-bar i{

   vertical-align:middle;
}
.facebook-bar i:hover{
   filter: Alpha(Opacity=70);/*IE7 fix*/
   opacity: 0.7;
}




@media (max-width: 500px) {
  .suggestions-container {
      text-align: center;
  }
  .suggestions-container img {
      margin: auto;
      float: none;
      display: block;
  }
.timeline .columns {
    float: none;
    width: 100%;
}
}






/* Create four equal columns that floats next to each other */
.members-column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.members-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .members-column {
    width: 100%;
  }
}