/* BS5 Defaults ---------------------


-- grid-breakpoints
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px

---------------------------------- */

/* GLOBAL VARIABLES
---------------------------------- */
/* Colors */
:root {
	--bs-primary: #DF3508;
	--color: #000000;
	--reverse-color: #ffffff;
	/* --dark-tint: #0E2240; */
	--scc-navy: #0E2240;
	--scc-red: #CF0A2C;
	--pad-unit: 1vw;
	--scc-navy-dark: #001430; /* used for hover states */
	
	--brand-height: 74px;
	--top-bar: 24px;  /* provides the space for the red line above the nav */
}



body {
	/* font-family: "proxima-nova", Helvetica, Arial, sans-serif; */
  color: var(--color);
  font-weight: 400;
  padding-top: calc(var(--brand-height) + var(--top-bar));
}


/* Typography
-------------------------------------------------- */
	
	
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
/*   font-family: "proxima-nova", Helvetica, Arial, sans-serif;
  font-weight: 700; */
  color: inherit;
}



/* Add this to SVG img to fix IE10 bug */
.svg-fluid {
	width: 100% \9;
}

/* GLOBAL OVERIDES
-------------------------------------------------- */

@media (min-width: 576px) and (max-width: 1399px) {
  .container { max-width: 100%; }
}

.sticky-top {
	top: calc(102px + 3rem);
}
.sub-nav .btn {
	text-align: start;
}


.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #CF0A2C;
  --bs-btn-border-color: #CF0A2C;
 }



.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--scc-navy);
  --bs-btn-border-color: var(--scc-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}


.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0E2240;
  --bs-btn-border-color: #0E2240;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #001430;
  --bs-btn-hover-border-color: #001430;
  --bs-btn-focus-shadow-rgb: 130,138,145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #001430;
  --bs-btn-active-border-color: #001430;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}




/* GLOBAL STYLES
-------------------------------------------------- */

.img-wrap > img {
	width: 100%;
	height: auto;
}

.img-wrap.ratio-16x9 {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.img-wrap > img {
    position: absolute;
    inset; 0;
    object-fit: cover;
}

.col.ban3 {
	padding: 0;
}
a.a-wrap {
	text-decoration: none;
}

@media (max-width: 767px) {
	.ban3:last-child { display: none; }
}


/* Navbar
-------------------------------------------------- */

.navbar { 
	padding-top: 0;
	padding-bottom: 0;
	color: var(--reverse-color);
	background-color: var(--scc-navy);
	background-image:
      linear-gradient(
         to top, 
         #fff 0%, 
         #fff 20%, 
         #CF0A2C 20%,  
         #CF0A2C 100%);
     background-size: 10px var(--top-bar);
     background-repeat: repeat-x;
     background-position: left top;
}

.navbar-nav {
  list-style: none;
  margin-top: var(--top-bar); /* Compensate for stripes */
}

.navbar-brand {
	text-indent: -9999px;
	display: block;
	background: transparent url(../img/scc-logo-wht_512x176.svg) no-repeat center center;
	background-size: 192px 66px;
	width: 192px;
	height: var(--brand-height);
	margin: var(--top-bar) 3vw 4px 0;
}

.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--reverse-color);
  text-decoration: none;
  transition: color .15s ease-in-out;
}

.nav-link:hover, .nav-link:visited, .nav-link:active {
	color: var(--reverse-color);
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.navbar-toggler:hover, .navbar-toggler:focus {
  text-decoration: none;
}


/* HAMBURGER courtesy of https://jonsuh.com/hamburgers/ */


.hamburger {

  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: var(--top-bar) -10px 0 0; /* Top tp compensate for stripes, right to align with right content whilst retaining hit area */
  overflow: visible;  
}
.hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #ffffff; }

.hamburger-box {
  width: 30px;
  height: 24px;
  display: inline-block;
  position: relative; 
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 0;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }
    
/* Squeeeze variant */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

button.hamburger:focus { outline: none; }	

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: none;
}

/* MENUKIT We set dropdown nav to hover for pointer screens only above 992 ============ */
@media screen and (min-width: 992px) and (pointer: fine) {
	.navbar .dropdown-menu-end{ right:0; left: auto;  }
	.navbar .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.3s; margin-top:0;  }
	.navbar .nav-item:hover .nav-link{ color: #fff;  }
	.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
	.navbar .dropdown-menu.fade-up{ top:180%;  }
	.navbar .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }
}	
@media screen and (max-width: 991px) {

.navbar-nav { width: 100%; }

/* Styles for off canvas menu layout */
.navbar-offcanvas {	
	position: fixed;
	top: 102px;
	left: 0;
	width: 100vw;
	height: calc(100vh - 102px);
	background-color: var(--scc-navy);
	text-align: center;
	font-size: 4vw;
	z-index: 1200;
	visibility: hidden;
	 transform: translateX(100%);
	overflow-y: scroll;
	overflow-x: hidden;
   transition: visibility .3s ease-in-out, transform .3s ease-in-out;
}
.navbar-offcanvas.show {
		visibility: visible;
    	transform: translateX(0);
	}
} /* /@media */



/* Global Styling
------------------------------------------------------ */

.intro p { font-size: 1.25rem; }

.content-block {margin-top: 3rem;}


.reverse {
	color: var(--reverse-color);
	background-color: var(--scc-navy);
	
}
.folder-title {
	background-color: var(--scc-red);
}

.folder-title .h4 { color: #fff; }

/* HOME
-------------------------------------------------- */

.btn-join {
	font-size: 1.5rem;
	font-weight: 700;
}

/* NEWS PAGES  
------------------------------------------------------- */

.date-stamp:before {
	content: "\2771";
	color: var(--scc-red);
	padding-right: 0.25rem;
}
.news-fig > img {
	width: 100%;
}
.news-caption {
	font-style: italic;
	}
.news-caption:before {
	content: "\275A";
	color: var(--scc-red);
	padding-right: 0.25rem;
}
.news-list li {
	border-bottom: solid 2px var(--scc-red);
	margin-bottom: .5rem;
}
.news-list li a { text-decoration: none; cursor: pointer; }



/* EVENTS CALENDAR  (including home page panel)
------------------------------------------------------- */

 
table.events {
	font-size: 16px;
	width: 100%;
	border-collapse: collapse; /* force IE ? */
}
table.events td {padding-right: 10px;}
table.events td:first-child  { width: 40px; font-weight: 400; } /* Day */
table.events td:nth-child(2) { width: 50px; font-weight: 500; } /* Date */
table.events td:nth-child(3) { width: 40px; font-weight: 500; } /* Month */
table.events td:nth-child(4) { width: 60px; font-weight: 400; } /* Time */
table.events td:nth-child(5) { width: auto; font-weight: 700; padding-right: 16px; } 


.accordion {
--bs-accordion-body-padding-x: 0;
--bs-accordion-btn-padding-x: 0;
}

.event-btn {
	
}
.e-day, .e-date, .e-month, e.-time, e-title {
	display: inline-block;
	padding-right: 10px;
}
.e-day { width: 40px; font-weight: 400; } /* Day */
.e-date { width: 50px; font-weight: 500; } /* Date */
.e-month{ width: 40px; font-weight: 500; } /* Month */
.e-time { width: 60px; font-weight: 400; padding-right: 30px; } /* Time */

.e-title { width: auto; font-weight: 700; }


@media (max-width:960px) {
.e-title { display: block;} 
}



/* Contact
-------------------------------------------------- */


.hgc-map {
	display: block;
	height: 50vh;
}
ul.address {margin-left: 3rem; }
.con-wrap {
	margin-top: 2rem;
	padding-bottom: 0.5rem;
	border-bottom: solid 2px var(--scc-red);
}
@media (min-width:768px) {
	.con-wrap:first-child {
	margin-top: 0;
}
}

/* Café Stops
-------------------------------------------------- */



.cafe-map {
	display: block;
	height: 80vh;
}

.cafe-table {
	padding-top: var(--pad-unit);
	padding-bottom: var(--pad-unit);
}


/* Sunday Routes
-------------------------------------------------- */

.modal-dialog {
  position: relative;
  width: 90vw;
  height: 90vh;
  margin-right: auto;
  margin-left: auto;
  pointer-events: none;
}


@media (min-width: 576px) {
.modal-dialog {
  max-width: 90vw;
  margin-right: auto;
  margin-left: auto;
  margin-top: 5vh;
}
}
@media (min-aspect-ratio: 100/66) {
	.modal-dialog {
		width: 135vh;
}
}

/* Footer
-------------------------------------------------- */
footer {
	color: #ffffff;
	background-color: var(--scc-navy);
	padding: 3rem 0;
}



.bc-logo-link {
	text-indent: -9999px;
	display: inline-block;
	width: 208px;
	height: 109px;
	background: #fff url(../img/bc-logo_512x228.png) no-repeat center center;
	background-size: 192px 86px;
}
.ctt-logo-link {
	text-indent: -9999px;
	display: inline-block;
	width: 128px;
	height: 109px;
	background: #fff url(../img/ctt-logo_512x435.png) no-repeat center center;
	background-size: 128px 109px;
}


/* Extras for Example only
------------------------------------------------------ */

.lazy.img-fluid {
	margin-bottom: 30px;
}