/* St Thomas à Becket Church, Framfield CSS File   */

/* STB revised 28.7.2020 */
/* Updated 30.08.2020 
/*
  IMPORTANT: current colours are:
  Deep blue on heading and menu bar: #3300CC
  Light blue on scripture section: #D9ECFF --- from weddings page originally
  Purple in notices for date posted --- #CCCCFF
  also pure white: #FFFFFF --- default white 
  and pure black #000000 --- default black
*/
   
/* Overall body section */

body {

/*  max-width: 1200px; */
  background-image:url(/images/tbbackground.gif);
  background-size: cover;
  background-repeat: repeat-y;
  /* repeat-x  */
  color: #000;
  background-color: #fff;
  text-align: left;
/*  text-align: center;
  overflow-x: hidden;
*/
}

/* Breadcrumbs change separator  */

.breadcrumb-item + .breadcrumb-item::before {
    font-size: small;
    content: ">";
  }


/* Scripture section */

#scripture {
    background-color: #D9ECFF; /* light blue from weddings page */
/*  background-color: #FFFFFF; /* default white */
  text-align: center; 
  height: 25px;
/*  max-width: 1200px; */
  }

/* date section */

#date {
/*    background-color: #D9ECFF; /* light blue from weddings page */
  background-color: #000000;
   /* default white */
  color: #fff;
  text-align: center; 
  height: 50px;
/*  max-width: 1200px; */
  }

#quick {
/*    background-color: #D9ECFF; /* light blue from weddings page */
  background-color: #FFFFFF;
   /* default white */
  text-align: center; 

  height: 60px;
/*  max-width: 1200px; */

  }


.navbar {
  background-color: #e3f2fd;
  border-bottom: #008ed6 3px solid;
  opacity: 0.9;  /* was 0.9 trying 0.7 */
  z-index: 99999;
/* 30.08.2020 do not change the 99999

/*  overflow-x: visible; */
  }

 #nav {
    z-index: 99999; 
/* 30.08.2020 do not change the 99999

/*    overflow-x: visible; */

}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}


section {
    padding-top: 25px;

  } 

.jumbotron {
  background-position: center;
  padding: 0.5rem;
  border-radius: 0;
} 

/*img {
    width: 100%;
    height: auto;
    max-width: 100%;
} */

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

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

.hcustom  {
  text-align: left;
  color: #826d4e;
  background-color: #9aaf8e;
  font-weight: bold;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 5px;
  padding: 1px 1px;
  }

/* social icons */
.fab {
  color: #D9ECFF;
  background: #000;
  padding: 5px;
  border-radius: 5px;
}

.header {
  background-color: #BBBBBB;
  color: #FFFFFF;
  font-weight: bold;
  font-size: .9rem;
  margin-bottom: 0.4rem; /* added 02.09.2020
/*  margin-top: 0;
  margin-bottom: 5px;
  padding: 1px 1px; */
}



/* quick links */
/* Links stuff */

a.quick {
  font: .2rem Verdana, Arial, Helvetica, sans-serif;
  color: #006699;
  text-decoration: none;
  }

a.quick:link {
  font: .2rem Verdana, Arial, Helvetica, sans-serif;
  color: #006699;
  text-decoration: none;
  }

a.quick:visited {
  color: #3366FF;
  text-decoration: none;
  }

a.quick:hover{
  color: #3366FF;
  text-decoration: underline;
  }

footer {
  color: #826d4e;
  background-color: #9aaf8e;
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: .5rem;
  border-top: 2px solid #826d4e;
  border-bottom: 2px solid #826d4e;
  font-size: .8em;
}

hr {
  border-top: 3px solid #826d4e;
  font-size: .8rem;
  width: 100%;
  margin-top: .8rem;
  margin-bottom: 1rem;
}

/* 404 error */

.error404 {
  content: '';
  background-color: rgba(220, 0, 36, 0.7);
  text-align: center;
  color: #fff;
}

.error404 h1 {
  font-size: 8rem; 
  font-weight: 900;
  letter-spacing: .2rem;
}

.posted {
  font: 16px "Comic Sans MS",Chicago, Sans-serif, cursive;
  font-weight:normal;
  color: #CC33CC;
  text-decoration: none;
  text-align:right;
}

.purple {
  font-weight:normal;
  color: #CC33CC;
  text-decoration: none;
}

/*---Media Queries --*/
@media (max-width: 992px) {
.social a {
  font-size: 4em;
  padding: 2rem;
  }
}
@media (max-width: 768px) {
.carousel-caption {
  top: 45%;
}
.carousel-caption h1 {
  font-size: 350%;
  text-transform: uppercase;
  text-shadow: 1px 1px 15px #000;
}
.carousel-caption h3 {
  font-size: 140%;
  font-weight: 400;
  padding-bottom: .2rem;
}
.carousel-caption btn {
  font-size: 95%;
  padding: 8px 14px;
}
.display-4 {
  font-size: 200%;
}
.social a {
  font-size: 2.5em;
  padding: 1.2rem;
  }
}

/* XS  */
@media (max-width: 576px) {

/* 3line quick menu XS only */
#quick {
/*    background-color: #D9ECFF; /* light blue from weddings page */
  background-color: #FFFFFF;
   /* default white */
  text-align: center; 
  height: 60px;
  max-width: 1200px;

 }


.carousel-caption {
  top: 40%;
}
.carousel-caption h1 {
  font-size: 250%;
  text-transform: uppercase;
  text-shadow: 1px 1px 15px #000;
}
.carousel-caption h3 {
  font-size: 110%;
  font-weight: 400;
  padding-bottom: .2rem;
}
.carousel-caption btn {
  font-size: 90%;
  padding: 4px 8px;
}
.carousel-indicators {
  display: none;
}
.social a {
  font-size: 2em;
  padding: .7rem;
  }
  
}