*{
  margin: 0;
  padding: 0;
}
body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#bgso, #bg, #bgw, #bm, #bgc, #bgp{
background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
height: 600px;
width:100%;
}

#bgso{
background-image: url('http://www.clbchayes.org.uk/images/webp/online-sermons.webp');
background-color:#2e5283!important;
}

#bgw{
background-image: url('http://www.clbchayes.org.uk/images/webp/worship.webp');
}

.responsive {width: 100%;height: auto;}

#bg{
background-image: url('http://www.clbchayes.org.uk/images/webp/20190707_123450.webp');}


#bm{
background-image: url('http://www.clbchayes.org.uk/images/webp/youth.webp');}

#bgp{
background-image: url('http://www.clbchayes.org.uk/images/webp/mbm.png');}

#bgc{
background-image: url('http://www.clbchayes.org.uk/images/webp/contactus.webp');}


/*
#bg{
background-image: url('images/20190707_123450.webp');
background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
height: 600px;
}
#bgso{
background-image: url('images/sermons-online.webp');
background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
height: 600px;
}
*/
#bg-footer{
color:#fff; 
background-color: #d8dcf1;
border-top:2px solid #20295b;
}


nav{
position: fixed;
top:0;
width: 100%;
background-color: #20295b;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  z-index: 99;
  padding-right:20px;
}

nav ul{
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
nav li{
  height: 50px;
}
nav a{
  height: 100%;
  padding: 0 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
}
nav a:hover{
  background-color: #f3f4fb;
  color: black;
  border-radius:4px;
}
nav a.active-link{
 background-color: #f3f4fb;
 color: black;
  border-radius:4px;

}
nav li:first-child{
  margin-right: auto;
}
.sidebar{
  position: fixed;
  top: 0; 
  right: 0;
  height: 100vh;
  width: 250px;
  background-color: #3f51b5;/*rgba(255, 255, 255, 0.15);*/
  backdrop-filter: blur(12px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  list-style: none;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.sidebar li{
  width: 100%;
}
.sidebar a{
  width: 100%;
}
.menu-button{
  display: none;

  }
@media(max-width: 1000px){
  .hideOnMobile{
    display: none;
  }
  .menu-button{
    display: block;
  }
  footer{
	padding: 0;
}
}
@media(max-width: 400px){
  .sidebar{
    width: 100%;
  }
}

ul.breadcrumb {
  padding: 16px 20px;
  list-style: none;
  background-color: #fff;
  font-size: 12px;
  color: #2e5283;
}
ul.breadcrumb li {
  display: inline;
  font-size: 12px;
}
ul.breadcrumb li+li:before {
  padding: 4px;
  color: #2e5283;
  content: "/\00a0";
}
ul.breadcrumb li a {
  color: #000000;
  text-decoration: underline;
}
ul.breadcrumb li a:hover {
  color: #000000;
  text-decoration: underline;
  font-style:italic;
}

footer{
	padding: min(3em, 8%);
}

/*1.5 rem;
16px x 1.5 = 24px*//*7vw + 1rem =1.8rem*/

/*h1{
	font-size: clamp(1.8rem, calc(7vw + 1rem), 5em);
    background: linear-gradient(to right, #20295b, red);
    background-clip: text;
    color: transparent;
}*/

img{
max-width: 100%;
height: auto;
/*aspect-ration:1 / 1;*/
object-fit: cover;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
 /* justify-content: center;
  align-items: center;*/
}

.flex-container > div {
  /*background-color: #fff;*/
  width: 150px;
  margin: 10px;
  text-align: left;
  font-size: 12px;
  flex-grow: 1;
}

p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
/* font-size: 1.25rem;*/
}

  
   .w3-clbc
{color:#fff!important;background-color:#2c4362!important;

/*
border-top:5px solid #446899;
border-bottom:5px solid #446899;

#446899 (25% lighter)
#2e5283 
#2c4362 (25% darker)
*/
}
.buttonclbc {
border-radius: 8px;
background-color: #334191;/*#2e5283*/

border: 3px solid #ffffff4d;
color: #fff;display:inline-block;padding:4px 12px;vertical-align:middle;overflow:hidden;text-decoration:none;text-align:center;cursor:pointer;white-space:nowrap;
}
.buttonclbc:hover, .clbcbutton:hover {
background-color: #446899;
}

span.c {
  display: inline-block;   padding: 15px; vertical-align:middle;
}

.clbcbutton {
    border-radius: 0px 8px;
background-color: #334191;/*#2e5283*/
border: 3px solid #ffffff4d; padding: 6px; color: #fff;vertical-align:middle;text-align:center;
 cursor:pointer;
}

/* 6px 12px 6px 12px*/

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 200px;
 /*bottom: 160px;
  right: 20px;*/
  z-index: 99;
  font-size: 14px;
border-radius: 8px;
background-color: #334191;/*#2e5283*/
border: 3px solid #ffffff4d;
color: #fff;padding:4px 12px;vertical-align:middle;overflow:hidden;text-decoration:none;text-align:center;cursor:pointer;white-space:nowrap;
}

#myBtn:hover {
  background-color: #446899;
}



.borderA {
    border-radius: 0px 16px;
}

.clbc-theme-l5 {color:#000 !important; background-color:#f1f5fa !important}
.clbc-theme-l4 {color:#000 !important; background-color:#3d6daf !important}
.clbc-theme-l3 {color:#000 !important; background-color:#3d6daf !important}
.clbc-theme-l2 {color:#fff !important; background-color:#3864a0 !important}
.clbc-theme-l1 {color:#fff !important; background-color:#446899 !important}
.clbc-theme-d1 {color:#fff !important; background-color:#2c4362 !important}
.clbc-theme-d2 {color:#fff !important; background-color:#1f3757 !important}
.clbc-theme-d3 {color:#fff !important; background-color:#2d397f !important}
.clbc-theme-d4 {color:#fff !important; background-color:#1a2e49 !important}
.clbc-theme-d5 {color:#fff !important; background-color:#15253a !important}

.clbc-theme-light {color:#000 !important; background-color:#f1f5fa !important}
.clbc-theme-dark {color:#fff !important; background-color:#20295b !important}
.clbc-theme-action {color:#fff !important; background-color:#15253a !important}

.clbc-theme {color:#fff !important; background-color:#2e5283 !important}
.clbc-text-theme {color:#2e5283 !important}
.clbc-border-theme {border-color:#2e5283 !important}

.clbc-hover-theme:hover {color:#fff !important; background-color:#2e5283 !important}
.clbc-hover-text-theme:hover {color:#2e5283 !important}

* {
  box-sizing: border-box;
}

.col-container {
  display: table;
  width: 100%;
}
.col {
  display: table-cell;
  padding: 16px;
}

@media only screen and (max-width: 600px) {
  .col { 
    display: block;
    width: 100%;
  }
}