body {
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
   color: #000000;}

.off-canvas {
    background-color: #3b5975;}

.mainbody {
 /*   background-color:red;  temporary for aligning boxes */
    margin-top:17rem;/*recently added 22/11*/
    padding:4rem 1rem 5rem; /*recently added 22/11*/
  /*  padding-left:3rem;
    padding-right:3rem;
    padding-bottom:3rem;
     padding-top:1rem; may delete*/
 /*   margin-top:0; 
    margin-bottom:0; may delete */
 /*   max-width:90%; may delete*/}

.logo {
   margin-left:-1rem;
   margin-top:-2rem;} 

.logo img {
    max-width: 100%; 
    height: auto;
    display: block;}

.logo h3 {
    padding-left: 2rem;
    margin-top: .5rem;
    line-height: 1;
    font-size: 100%;
    font-family:'Cinzel', serif;}

.thesearchbox form {
    float:right;
    margin-top: -5rem;}

.searchbar .icon {
    padding:11px 13px 11px 13px;
    border-radius: 0 6px 6px 0;
    background: #dcdcdc;}
    
.searchbar #searchbox {
    width: 15em;
    font-size: 12pt;
     margin-right:0;
    border-color:#e5e5e5;
    border-radius: 6px 0 0 6px;}

.topbarmenu {
    padding-right:3rem;
    margin-top:.5rem;
    background-color: #3b5975;} 

.topbarmenu .menu {
    float:right;
    background-color: #3b5975;} 

.topbarmenu .menu > li a {
    font-weight: bold; 
    color:#95b9c9; 
    font-family: 'Roboto', sans-serif;}

.topbarmenu .menu > li.active > a {
    color: #d2973b;
    background-color:inherit; 
    border-bottom: 1px solid;}

.menu > li {
   padding: 0;}
.menu > li a {
    color: #1779ba;
    text-decoration: none;}
.menu > li.active > a {
    color: #1779ba;
    background-color: inherit; 
    border-bottom: 1px solid; }  

.widgetholder .widget {
  margin: 1.5em 0; }

.headerphoto {
 /* max-width:100vw; may delete */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 500px;
  min-height: 20vh;
  max-height: 36vh;} 
/*
.aboutus {
    padding-bottom:8rem;}*/

.aboutus h2 {
       margin-top:-8rem;}

.aboutus p, .aboutus h2  {
     color:#000000;     /*#7a6a53;*/
     text-align:center;}

.special-notice, .worship, .community, .discipleship, .socialmedia {
     text-align:center;}

.special-notice h2, .worship h2,.community h2, .discipleship h2, .socialmedia h2 {
    color:#ffffff;}
   
.special-notice h3, .aboutus h3,.worship h3,.community h3, .discipleship h3 {
    color:#ffffff;
    font-size:150%;} /*not sure about this */

.aboutus #bibleverse, .worship #bibleverse, .community #bibleverse, .discipleship #bibleverse {
    padding:0 10rem 0;
    font-family: 'Vollkorn', serif;
    font-style: italic;
    font-size:130%;}

.worship #bibleverse, .community #bibleverse, .discipleship #bibleverse {
    color:#ffffff; }

.special-notice p, .worship p,.community p, .discipleship p {
    font-size:100%;
    color:#ffffff;}

.special-notice #notice a, .worship a,.community a, .discipleship a  {
    font-weight: bold;
    border: 2px solid #ffffff;
    padding:1em;
    font-size:100%;
    color:#ffffff;}

.special-notice #notice {
    padding-top: 2em;
    font-size:70%;
     } 

.sidebar {
  /*  border:1px solid #000000; temporary for aligning boxes*/ 
    background-color:#ffffff;
  /*  margin-bottom:0rem; may delete*/
    margin-top:1rem; 
 /*   padding-top: 0;
    padding-bottom:0;  may delete*/
    padding-right:3rem;}

.sidebar h5 {
    font-family: 'Open Sans', sans-serif;
    color: #404040;
    text-align:right;
    margin-top:-2rem;
    margin-bottom:-1rem;
    padding-top:0;
    padding-bottom:0;
    padding-right:1rem;}

.sidebar .menu {
    text-align:right;
    font-family: 'Roboto', sans-serif;
     font-weight: 500;}

.sidebar .menu > li a {
    color: #b2b2b2;}  /*#808080;*/  

.sidebar .menu > li.active > a {
    border-bottom:0;
    color: #000000; /* #404040;*/}

.sidebar .menu a:hover {
    color: #000000;}

.side-bar .icon {
     float:right;
     margin-top:2rem;
     margin-right:0;} 

.worshipword {
    margin-top:-3rem;
    margin-bottom:-1rem;
    font-family: 'Euphoria Script', cursive;
    font-size:400%;}

.boldtext p {
    font-size:150%;
    font-weight: 300;}

.communitybv {
    margin-top:3rem;}
  
.communitybv #communitybvtext {
    font-family: 'Cormorant', serif;
    font-size:120%;}

.discipleshipword #discipleshiptext {
    font-family: 'Euphoria Script', cursive;
    font-size:400%;}

.discipleshipbigtext {
    font-size:200%;
    font-weight: 300;}

.column, .columns {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem; }

.headertitle {
  text-align: center; }

[type='search'] {
  box-shadow: none; }

ul.pagination {
  background: #DDD;
  display: inline-block; }
  ul.pagination a {
    padding: 0.6em 1em;
    text-decoration: none; }
  ul.pagination .active a {
    color: #e6e6e6;
    background: #0a0a0a; }

h1 a, h2 a, h3 a {
  text-decoration: none; }

p.meta {
  font-size: 90%;
  color: #666; }


.maincontent img {
    padding-top:2rem;
   /* margin:auto;*/
    display:block;
    height: 200px;
    width:270px;}
/*
.playimage {
   margin-top:4rem;} 

.playimage img {
    max-width: 20%; 
    height: auto;
    display: block;} this can be deleted*/

table, th, td {
    border: 1px solid black;}

th {text-align: center;}

table {table-layout: auto;} 

/* Bolt forms */
.boltform {
 /*   margin:0 auto;*/
    width:75%;
    background-color:#dfe8f7;
    border-top:3rem solid #dbdce1;
    padding-bottom: 4rem;}

#forminputbox {
    float:left;
    margin-bottom:-2rem;
    width:35rem;}

.boltform #formsubmitbutton {
    margin-top:-2rem;
    padding-right:4.5rem;}

form[name="programme"] {
    padding: 3rem;
}

#programme_submit {
    margin-top:2rem;
}

.boltforms-button-row .button {
    float:right;
    border-radius: 6px 6px 6px 6px;} 






/* Footer */
.footer {
    margin-top:0;
    padding:1rem 3rem;
    background-color:#252530;
    max-width:100%;}

.footer .menu {
    background-color:#252530;
    padding-bottom:1rem;
    text-align:center;}

.footer .menu > li {
    font-weight: bold;
    background-color:#252530;
    text-align:center;
    display:inline-block;
     margin:0 auto;}

.footer .menu > li a {
    color:#97a5ad;}

.footer #designby {
    font-size:90%;
    font-family:'Cinzel', serif;}

.footer #designby a {
    font-family: 'Vollkorn', serif;
    font-size:130%;}

.footer #notice {
    text-align: center;}

/*small screen only - up to 639px screen*/
@media screen and (max-width:  39.9375em) {
  .no-js .top-bar {
      display: none;}
  .top-bar-title {
      margin-bottom:-2rem;
      padding-left:1rem;
      float:right;} /*this is to make harburger icon placed to the right */
  .top-bar .menu-icon {
      margin: 1rem 0 -2rem;} /*t,l&R,b*/
  .logo img { 
      margin-top:1rem;
      width: 70%;
      padding-left:1rem;}
  .thesearchbox form {
      margin-top:2rem;}
  .searchbar #searchbox {
      width: 12em;}
 /* .topbarmenu {
      padding:0;} */
   .offcanvasmenu .menu > li.active > a {
       color: #d2973b;}
  .offcanvasmenu .menu {
      background-color: #3b5975;} 
  .offcanvasmenu .menu > li a { 
      color:#95b9c9; 
      font-weight:bold;
      font-size:100%;}
   .mainbody {
      padding: 0 2rem;} /*t&b,l&r*/
  .boltform {
       width:100%;
       border-top:3rem solid #dbdce1;
       padding:0 1rem 2rem 1rem;}
  .boltforms-label{
      margin-bottom: -2.5rem;
       text-align: left;}
   #forminputbox {
        float:left;
        margin-bottom:-2rem;
        width:18rem;}
    form[name="programme"] {
        padding: 1rem 1rem 1rem 3rem;}
    #programme_submit {
        margin-top:0;}
   .boltforms-button-row .button {
       float:right;
       width:70%;
       margin-top:-1em;}
   .sidebar {
       margin-top:1rem;
       margin-bottom:0;
       padding-bottom:0;} 
   .sidebar h5 {
       text-align:left;
       padding-left:1rem;}
   .sidebar .menu {
       padding-bottom:0;
       text-align:left;}
  .aboutus {
       margin:6rem -3rem 0; /*t&b,l&r*/
       padding: 4rem 3rem 4rem;}
  .discipleship, .socialmedia {
       margin:0 -4rem -4rem; 
       padding:6rem 3rem 10rem;}
  .special-notice, .worship, .community{
      margin: 0 -4rem; /*t&b, r&l*/
      padding:4rem 3rem;}
  .aboutus h2, .special-notice h2, .worship h2,.community h2, .discipleship h2, .socialmedia h2 {
      font-size:200%;} 
  .aboutus h3,.special-notice h3, .worship h3,.community h3, .discipleship h3 {
      font-size:150%;} 
  .aboutus p, .special-notice p, .worship p, .community p, .discipleship p, {
      font-size:150%;}
  .aboutus #bibleverse, .worship #bibleverse, .community #bibleverse, .discipleship #bibleverse{
      font-family: 'Vollkorn', serif;
      padding:0 1rem 0;
      font-size:120%;}
  .title p {
      text-align:center;}
  .contacttitle p {
      text-align:center;}
  .contactname p {
       text-align:center;}
/*  .contact #minister {
        margin:-3rem 0 2.5rem;}
  .title #titlepastoral {
        margin:-3rem 0 2.5rem;}
  .contact #worshipleader2 {
        margin:-3rem 0 0;}*/
}
 
    

/*640px-694px */
@media print, screen and (min-width: 40em) and (max-width:43.375em) {   /*40.063em*/
   .topbarmenu {
       padding:0;
       margin-top:-3rem;  }
   .topbarmenu .menu {
       padding:.5rem;}
   .topbarmenu .menu > li a { 
       font-size:80%;
       padding-right:0;
       margin-right:0;}
   .topbarmenu .menu > li.active > a {
       padding-right:0;}
    .calendar .calendar-footer .day {
      font-size:x-small;
}
}

/*695px-1024px */
@media print, screen and (min-width: 43.4375em) and (max-width: 64em) {
   .topbarmenu {
       padding:0;
       margin-top:-3rem;}
   .topbarmenu .menu {
       padding:.5rem 1rem;}
   .topbarmenu .menu > li a { 
       font-size:90%;
       padding-right:.2px;}
   .topbarmenu .menu > li.active > a {
       padding-right:.2px;}
}

/* Medium  - 640px up to 1024px screen */
@media print, screen and (min-width: 40em) and (max-width: 64em) {  /*40.063em*/
 .no-js .title-bar {
    display: none; } 
  .logo {
      margin-top:1rem;
      margin-left:0;} 
  .logo img {
      width: 40%;}
  .logo h3 {
      margin-left:-1rem;
      margin-top: .5rem;}
  .thesearchbox form {
      padding-right:0;
      margin-top:-6rem;}
  .searchbar #searchbox {
      margin-right:-1rem;
      width: 10em;}
  .mainbody{
       margin-top:16rem;
       padding-top:0;
  /*    padding-left:2rem;
      padding-right:2rem;*/}
  .boltform {
       width:90%;
       margin: 0 auto;
       border-top:2rem solid #dbdce1;
     /*  padding-bottom: 4rem;*/
       padding:0 2rem 2rem 2rem;}
  .boltforms-label{
      margin-bottom: -2rem;
       text-align: left;}
   #forminputbox {
        float:left;
        margin-bottom:-2rem;
        width:30rem;}
   .boltform #formsubmitbutton {
        padding-right:8rem;}
     #programme_submit {
        margin-top:0;}
  .boltforms-button-row .button {
       width:50%;
       margin-top:-1em;}
  .sidebar {
       margin-top:0;
       padding:0;}
   .sidebar h5 {
       text-align:left;
       margin-top:1rem;
       padding-left:1rem;}
   .sidebar .menu {
       padding-bottom:0;
       padding-left:2rem;
       text-align:left;}  
   .aboutus {
      margin: 3rem -6rem 0; /*top, right&left, bottom*/
      padding: 10rem 7rem 6rem;} /* top,right&left,bottom*/
   .discipleship {
      margin: 0 -6rem 0; /* top,right&left,bottom*/
      padding:6rem 7rem;} /*top&bottom, right&left*/
   .socialmedia {
      margin: 0 -6rem -6rem; /* top,right&left,bottom*/
      padding:6rem 7rem;} /*top&bottom, right&left*/
   .special-notice .worship, .community{
      margin: 0 -6rem; /*top&bottom, right&left */
       padding:6rem 3rem;}
  .contacttitle p {
      text-align:right;}
  .contactname p {
       text-align:left;}
}

    
 /* Large -min-width 1025px and max-width 1440px */
@media only screen and (min-width: 64.0625em) and (max-width: 90em) {   /*64.063em*/
  .logo img { 
      margin-top:2rem;
      width: 30%;
      padding-left:1rem; }
  .topbarmenu {
       padding:0;
       margin-top:-3rem;}
   .topbarmenu .menu {
       padding:1rem 1rem;}
   .topbarmenu .menu > li a { 
       font-size:100%;
       padding-right:.2px;}
   .topbarmenu .menu > li.active > a {
       padding-right:.2px;}
   .aboutus {
      margin: 0rem -8rem; /*top&bottom, right&left*/
      padding: 10rem 10rem 6rem;} /* top,right&left,bottom*/
   .discipleship  {
      margin: 0 -8rem 0; /* top,right&left,bottom*/
      padding:6rem 10rem;} /*top&bottom, right&left*/
   .socialmedia {
       margin: 0 -8rem -6rem; 
       padding:6rem 10rem;
    }
   .special-notice, .worship, .community{
      margin: 0 -8rem; /*top&bottom, right&left */
      padding:6rem 10rem;}
  .boltform {
       width:90%;
       margin: 0 auto;
       border-top:3rem solid #dbdce1;
       padding-bottom: 4rem;}
  .boltforms-label{
       text-align: right;}
   #forminputbox {
        float:left;
        margin-bottom:-2rem;
        width:35rem;}
   .boltform #formsubmitbutton {
        padding-right:8rem;}
  .boltforms-button-row .button {
      margin-top:-1em;
       width:30%;}
  .contacttitle p {
      text-align:right;}
  .contactname p {
       text-align:left;}
}

/* XLarge -min-width 1441px and max-width 1920px */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { 
  .logo img { 
      margin-top:1.5rem;
      width: 30%;
      padding-left:1rem;}
  .topbarmenu {
       padding:0 2rem;;
       margin-top:-3rem;}
   .topbarmenu .menu {
       padding:1rem 2rem;}
   .topbarmenu .menu > li a { 
       font-size:100%;
       padding-right:1px;}
   .topbarmenu .menu > li.active > a {
       padding-right:.2px;}
   .aboutus {
      margin: 0 -10rem;
      padding: 10rem 20rem 6rem;} /* top,right&left,bottom*/
   .discipleship {
      margin: 0 -13rem 0; /* top,right&left,bottom = used to be -25rem now -13rem*/
      padding:6rem 25rem;} /*top&bottom, right&left*/
    .socialmedia {
      margin: 0 -13rem -5rem; /* top,right&left,bottom = used to be -25rem now -13rem*/
      padding:6rem 25rem;} /*top&bottom, right&left*/
  .special-notice, .worship, .community{
      margin: 0 -13rem; /*top&bottom, right&left  = used to be -25rem*/
      padding:6rem 20rem;}
   .boltform {
       width:90%;
       margin: 0 auto;
       border-top:3rem solid #dbdce1;
       padding-bottom: 4rem;}
   .boltforms-label{
        text-align: right;}
   .boltforms-button-row .button {
        margin-top: -1em;
        width:30%;}
  .contacttitle p {
      text-align:right;}
  .contactname p {
       text-align:left;}
}

/* XXLarge -min-width 1921px */
@media only screen and (min-width: 120.063em) { 
   .boltform #forminputbox {
        padding-right: 3rem;
        width: 70%;}
   .boltform #formlabel {
        padding-left: 3rem;
        font-size: 100%;}
   .boltforms-label{
        text-align: right;}
   .boltforms-button-row .button {
        width:20%;}
  .contacttitle p {
      text-align:right;}
  .contactname p {
       text-align:left;}
}