@font-face {
    font-family: 'ambleregular';
    src: url('../webfonts/amble-regular-webfont.eot');
    src: url('../webfonts/amble-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/amble-regular-webfont.woff2') format('woff2'),
         url('../webfonts/amble-regular-webfont.woff') format('woff'),
         url('../webfonts/amble-regular-webfont.ttf') format('truetype'),
         url('../webfonts/amble-regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'kaushan_scriptregular';
    src: url('../webfonts/kaushanscript-regular-webfont.eot');
    src: url('../webfonts/kaushanscript-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/kaushanscript-regular-webfont.woff2') format('woff2'),
         url('../webfonts/kaushanscript-regular-webfont.woff') format('woff'),
         url('../webfonts/kaushanscript-regular-webfont.ttf') format('truetype'),
         url('../webfonts/kaushanscript-regular-webfont.svg#kaushan_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.testBorder {
 border:thin solid red;
}

/* Screen reader only */
.sr-only {
 /* Common */
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0,0,0,0);
 border: 0px;
}

html {
 font-family: ambleregular, Verdana, Geneva, Arial, sans-serif;
 font-weight: 500;
 font-size:clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
}

* {
 box-sizing:border-box
}

body {
 /* Common */
 margin: 0px;
 background-color: #ffffff; /*#f3f1dc*/
}

#allContent {
  width:98%;
  margin-left:auto;
  margin-right:auto;
}

#banner {
  color:#ffffff;
  text-align:center;
  background-color:#2b5797;
  border-bottom:thick solid #5076b9; 
}

.bannerHeader {
 display:none;
}

#menuBar {
/*  Common */
 background-color: #2b5797;
 border-top: thick solid #5076b9;
/*  Mobile Only */
 display: -webkit-flex; /* Safari 6.1+ */
 display: -ms-flexbox; /* IE 10 */ 
 display: flex;
 justify-content: space-between ;
}

main {
 background-image: url('../images/clean-wall-paper-background.jpg');
 /*background-color:#ffffff;*/

 display: block;
 margin-left: auto;
 margin-right: auto;
 padding: 0px 2px;
 color: #2b5797;
 border: thin solid #ffffff;
}

section {
 display:block;
}

li {
  list-style-image: url('../images/funkyNote1.png')
}

#mobileTitle, h1, h2, h3, .specialFont, .bannerHeader span {
  font-family: kaushan_scriptregular;
}

h1, h2, h3 {
  font-weight:bold; 
}
 
h1 {
 padding-left:10px;
 font-size:clamp(1.728rem, 1.4362rem + 1.2971vw, 2.4414rem);
}
 
h2 {
 font-size:clamp(1.44rem, 1.2301rem + 0.933vw, 1.9531rem);
 text-align:center;
}
 
h3{
 font-size:clamp(1.2rem, 1.0517rem + 0.6591vw, 1.5625rem);
}
 
hr  {
 color:#5076b9;
 margin: 0px;
}

p {
 padding: 0px 5px;
}

h1, h2, .shadowed {
 text-shadow: 2px 2px 4px #d06908;
}
 
.photoAck {
 color:#c0c0c0;
 font-size:80%;
 font-style:italic;
 }

.header-items {
 /* Common */
 padding-left:15px;
 padding-right:15px;  
 line-height: 1em;
 font-size: 1em;
 vertical-align: middle;
 color: inherit;
}


a.header-items:hover,
a.header-items:focus,
.fa-facebook-f:hover,
.fa-facebook-f:focus {
  /* Common */
  color: #d06908;
}

.fa-times {
 padding: 10px 10px 0px 0px;
}


/* Default styles + Mobile first
 Offscreen menu style*/

.main-menu {
 /* Common */	
 color: inherit;
  
/* Mobile Only */
 text-align: left;	
 position: absolute;
  left: -200px;
  top: 0;
  height: 100%;
 display: none;
 overflow-y: scroll;
 overflow-x: visible;
 transition: left 0.3s ease,
             box-shadow 0.3s ease;
 z-index: 999;
}

.menubar {
 /* Common */
 list-style: none;
 margin: 0px;
 color: inherit;
  
 /* Mobile Only */
 padding: 2.5em 0 0;
 /* Hide shadow w/ -8px while 'closed' */
 -webkit-box-shadow: -8px 0 8px rgba(0,0,0,.5);
    -moz-box-shadow: -8px 0 8px rgba(0,0,0,.5);
         box-shadow: -8px 0 8px rgba(0,0,0,.5);
 min-height: 100%;
}

.menubar a,
.menu-item-heading {
 /* Common */
 color: inherit; 
 /* Mobile Only */
 padding: .75em 10px;
 font-size: 1em;
 line-height: 1em;  
}

.menubar a {
 /* Common */
 text-decoration: none;
 display: block;
}

.menubar a:hover,
.menubar a:focus {
 color: #d06908 !important;
}


.menubar a:visited {
  color: inherit;
}

.menu-item-heading span,
.menu-item-heading .fa-angle-down {
  /* Mobile Only */
  display: inline-block;
}

.menubar li a i:first-child, .menu-item-heading span i:first-child {
  display:inline-block;
  text-align:center;
  width:22px;
  padding-right:1.25em;
}

.fa-angle-down {
 padding-left: .2em;
 /* Mobile Only */
 float: right;
}

.menubar li:first-child {
 /* Mobile Only */
 border-top: 1px solid #383838;
}

.menubar li {
 /* Mobile Only */
 border-bottom: 1px solid #383838;
}

.main-menu a:hover,
.main-menu a:focus {
  background: #031d6e;
}

.menu-close {
 /* Common = Mobile Only */
 position: absolute;
 right: 0;
 top: 0;
 color: inherit;
}

/* On small devices, allow it to toggle...*/


/*:target for non-JavaScript
 [aria-expanded] will be used if/when JavaScript is added to improve interaction, though it's completely optional.
*/
.main-menu:target,
.main-menu[aria-expanded="true"] {
  /* Common = Mobile Only */
 display: block;
 left: 0;
 outline: none;
 -moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
 -webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
 box-shadow: 3px 0 12px rgba(0,0,0,.25);
}

.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] .menu-close {
 /* Common = Mobile Only */  
 z-index: 1001;
}

.main-menu:target .menubar,
.main-menu[aria-expanded="true"] .menubar {
 /* Common = Mobile Only */
 position: relative;
 z-index: 1000;
}


/* We could us `.main-menu:target:after`, but
 it wouldn't be clickable.
 */

.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop{
  /* Common = Mobile Only */
 position: absolute;
 display: block;  
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: 998;
 background: #2b5797;
 background: rgba(43,87,151,0.98);
 cursor: default;
}

@supports (position: fixed) {
  /* Common = Mobile Only */
 .main-menu,
 .main-menu:target + .backdrop,
 .main-menu[aria-expanded="true"] + .backdrop{
   position: fixed;
 }
}

.dropdown {
 /* Common */
 display: none;
 background-color: #2b5797;
 /* Mobile Only */
 padding: 0px;
 margin: 0px;
}

.menubar li:hover .dropdown {
 /* Mobile Only */ 
 display: block;
}

.dropdown a {
 /* Common */
 color: inherit; 
 /* Mobile Only */
 padding-left: 15px; 
}

.dropdown a:visited {
 /* Common */
 color: inherit;
}
 
img, embed, object, video { 
 max-width:100%;
}
 
img {
 border:none;
}
 
.transparentToBackground {
 	background-color: #ffffff;
}

#mobileHeader {
  display: -webkit-flex; /* Safari 6.1+ */
  display: -ms-flexbox; /* IE 10 */ 
  display: flex;
  height: 3.33em;
  align-items: center;
}
 
#mobileLogo {
 margin:none;
 padding:none;
 margin-right:10px;
 height:3.33em;
}
 
#mobileTitle {
 font-size: 1.5em;
}
.header-items .fa-facebook-f, .fa-bars {
 position:relative;
 top:1.25em;
}
 
.bodyText {
 max-width:900px;
}
 
.divider {
 margin-bottom: 8px;
 margin-top: 23px;
 border: 1px dotted #2b5797;
}
  
.centredBlock {
 margin-left: auto;
 margin-right: auto;
}
 
.centred {
 text-align: center;	
}
 
.right {
 text-align:right;	
}
 
.left {
 text-align:left;	
}
 
.doubleBorder {
 border: 5px double rgba(43,87,151,0.25);
}
 
.thinBorder {
 border:thin solid #d06908;
}
 
.mySlides {
 position: relative;
 margin: auto;
   
 display: -webkit-flex; /* Safari 6.1+ */
 display: -ms-flex; /* IE 10 */
 display: flex;
 -ms-flex-direction: row;
 -webkit-flex-direction: row;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
}
 
.slide {
 display: none;
 border: #5076b9 groove 5px;
 padding: 5px;
}
 
.prev, .next {
 cursor: pointer;
 font-weight: bold;
 font-size: x-large;
 transition: 0.6s ease;
 user-select: none;
  
 display:inline-block;
 align-self: center;
}
  
.prev {
 padding-right: 16px;
 border-radius: 0 3px 3px 0;
}
    
.next {
 padding-left: 16px;
 border-radius: 3px 0 0 3px;
}
 
.prev:hover, .next:hover {
 color: #d06908;
}

.dot {
 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 10px 2px;
 background-color: #5076b9;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;
}
 
.active, .dot:hover {
 background-color: #2b5797;
} 
 
.fade {
 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;
}

@-webkit-keyframes fade {
 from {opacity: .4}
 to {opacity: 1}
}

@keyframes fade {
 from {opacity: .4}
 to {opacity: 1}
}

footer {
 color: #ffffff;
 background-color: #2b5797;
 
}

footer div.small-only {
 text-align:center;
 padding-bottom: 5px;
}

#copyright {
 background-color:#2b5797;
 color:#c3c3c3;
 font-size: clamp(0.6944rem, 0.6513rem + 0.1919vw, 0.8rem);
 border-top: 1px solid #808080;
 border-bottom: 1px solid #808080;
 padding: 5px;
}
 
#copyright div {
 text-align:center;
}

#copyright div:first-child {
 margin-bottom:10px;
}

#copyright div:nth-child(2) {
 font-size:clamp(0.8333rem, 0.7652rem + 0.303vw, 1rem);
}
 
footer div.small-only i, footer div.small-only a {
 display: block;
}
 
footer div.small-only a {
 color:inherit;
 text-decoration: none;
}

.boldSpan, dfn {
 font-weight: bold;
}

.largeBoldSpan {
 font-weight: bold;
 font-size: large;	
}

.italicBoldSpan {
 font-weight: bold;
 font-style: italic;		
} 

 
.large-only {
  display: none !important; 
 }
 
 
@media ( min-width: 768px ) {
 .medium-only {
   display: none !important;
 }
}
 
 /* Larger screen styling
 Horizontal menu*/

@media ( min-width: 970px ) {

 body {
  background-image: url('../images/bodyBackground.jpg'); 
  background-repeat: repeat;
 }
	
 #allContent {
  max-width: 1280px;
 }
 
 .bannerHeader {
  display: flex;
  align-items: center;
  justify-content:center;
  height: 105px;
 }

 .bannerHeader img {
  display: inline !important;
 }
 	
 #menuBar {
  display: block;
  text-align: left;
 } 
 
 .menu-close {
  display: none;
 }
  
 /* Undo positioning of off-canvas menu */
 .main-menu {
  position: relative;
  left: auto;
  top: auto;
  height: auto; 
  display: block;
  overflow: visible; /*Needed for drop-down to work*/
  padding: 0px;
  margin: 0px;
  text-align: center;
 }
  
 .menubar {
  display: -webkit-flex; /* Safari 6.1+ */
  display: -ms-flexbox; /* IE 10 */ 
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: distribute;
  justify-content: space-evenly;
  padding: 0px;
  height: 100%;

  /* Undo off-canvas styling */
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
  height: auto;
  width: auto;
  overflow-x: auto;
  background: none;
 }
  
 .menubar a,
 .menu-item-heading {
  padding: 10px;
  font-size: 1em;
  line-height: 1em;
 }
 
 .menubar a.large-only {
  display: block !important;
 }

 .fa-angle-down {
  float: none;
 } 
 
 .menubar li {
  display: inline-block !important;
  border: 0px !important; /* Remove borders from off-canvas styling  */
  white-space: nowrap;
 }
  
 .dropdown {
  position: absolute;
  /*width: 200px; */
  opacity: .8; 
  padding: 0px;
  text-align: left; 
 }

 .dropdown a {
  font-size: 1em;
  padding: 8px 8px 8px 18px;
  margin: 0px 0px 0px 0px;
 }
 
 #bannerImg1 {
  margin-right: 20px;
  width: 100px;
  height: 91px;
 }
 
 #copyright {
  display: -webkit-flex; /* Safari 6.1+ */
  display: -ms-flex; /* IE 10 */
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
 }
 
 #copyright div:first-child {
  text-align:left;
  margin-bottom:0px;
 }
 
 #copyright div:nth-child(2) {
  padding:5px;
 }
 
 .small-only {
  display: none !important; 
 }
}