/*  (C) 2019 Endis Ltd. 
	No permission is given to use this code, except on an Endis/ChurchInsight website.

	ChurchInsight over-ride CSS file for the Discovery template.
	WARNING - do not edit this file unless you know exactly what you are doing. 
	You might consider making a BACKUP COPY before you change anything.
	If you need advice, contact ChurchInsight Support. */

/* Size of LOGO image */
header .logo-icon img
{ 
	width:  auto !important; 
	height: 60px !important; /* <<< mobile logo height */
}
@media(min-width:468px){header .logo-icon img
{ 
	height: 60px !important; /* <<< tablet logo height */
}
}
@media(min-width:992px){header .logo-icon img
{ 
	height: 68px !important; /* <<< desktop logo height */
}
}
@media(min-width:1200px){header .logo-icon img
{ 
	height: 98px !important; /* <<< desktop logo height */
}
}
/* Gap between logo and top/bottom of screen  */
header div.logo-container 
{
	margin-top: 10px !important; /* <<< gap from top for mobile/tablet */
	margin-bottom: 10px !important; /* <<< gap from bottom for mobile/tablet */
}
@media(min-width:992px){
	header div.logo-container {
		margin-top: 5px !important; /* <<< gap from top for desktop */
		margin-bottom: 0 !important; /* <<< gap from bottom for desktop */
	}
}
@media(min-width:1200px){
	header div.logo-container {
		margin-top: 10px !important; /* <<< gap from top for desktop */
		margin-bottom: 0 !important; /* <<< gap from bottom for desktop */
	}
}
/* To make more space in the header adjust this */
header section.slice_Header_D div.nav-menu {margin-top:80x;}


/* ############ Mobile menu colours */
header section.slice_Header_D div.SlickNavCloseIcon
{
	color: #57C6ED !important; /* <<< colour of the menu close icon */
}

/* ############ Desktop/Mobile menu hover-over text-link color, top-link icons colour, footer email-link text color */
header .slice_Header_D .nav-menu ul.root_menu > li:last-child > a {padding-right:5px;}
header .slice_Header_D .nav-menu.AddBoxShadow ul.root_menu ul {
  	box-shadow:0px 10px 10px 2px rgba(0,0,0,.12);
}

/* ############ Search box background colour */
header div.search-overlay
{
	background-color: #57C6ED !important; /* <<< Search box background colour */
}
header a.search-close 
{
	color: white !important;  /* <<< Search box close icon */
}

header section.slice_Header_D div.slicknav_menu  ul.slicknav_nav {
  padding-bottom:10px;border-bottom:none;
}
@media (max-width:991px) {
	header section.slice_Header_D .search-overlay .search-close {top:25px;}
}

/* Form responses */
div.endis-jquery-ui div#divOverlay,
div.endis-jquery-ui div#divOverlay input.button {
	font-size: 17px !important; 
	line-height: 1.3 !important;
	letter-spacing: 1px !important;
}

/* extra fixes for the header */
header ul a {
	line-height: 1 !important;
}
header section.slice_Header_D div.slicknav_menu ul.slicknav_nav a {padding: 10px 20px;}

/* Content page spacing */
@media(max-width:991px){
	section.slice_content_page div.main-content {
    margin-top:0;
    border-top:2px solid #f2f1f6;}
}

/* ############ slide show caption button, and active/hover round pager button colour */
section.slice_SlidesFullWidth a.bx-pager-link:hover, 
section.slice_SlidesFullWidth a.bx-pager-link.active
{	
	background-color: transparent !important; /* <<< slide show button background color */
	border-color: 	  white !important; /* <<< slide show button border color */
} 
/* Slide show inactive round pager buttons */
section.slice_SlidesFullWidth a.bx-pager-link
{	
	background-color: white !important; /* <<< slide show inactive round button color */
	border-color: 	  white !important; /* <<< slide show inactive round button border color */
}
section.slice_SlidesFullWidth a.slideButton {
  	border-radius:5px !important;
	border-color:rgba(255,255,255,0.5) !important;
	transition:300ms border-color linear !important;}
section.slice_SlidesFullWidth a.slideButton:hover {
	border-color: white !important; 
	opacity:1 !important;
}
section.slice_SlidesFullWidth .bannerSlides .bx-wrapper .bx-prev::after, 
section.slice_SlidesFullWidth .bannerSlides .bx-wrapper .bx-next::after {opacity:0.7;}
section.slice_SlidesFullWidth div.slideTitle {margin:0 20px;}

/* Code to make slide-shows look better on mobile screens */
section.slice_SlidesFullWidth {overflow:hidden;} /* hide anything that pokes outside */
@media (max-width:767px) {
	section.slice_SlidesFullWidth div.bannerSlides {
		width: 200%; /* double the width, which doubles the height, and then translate so we see the middle 50% */
		transform: translateX(-25%);
		overflow:hidden; /* hide anything that pokes outside */
	}
	/* Adjust the captions back again, so they look normal */
	section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper ul.gallery_ul li.gallery_li div.caption {
		/* div.bx-wrapper has position:relative set, so this is ok */
		left: 25%;
		right: 25%;
		width: 50%;
		overflow:hidden; /* hide anything that pokes outside */
	}
}
@media (max-width:467px) {
  section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager {
    display:block;bottom:10px;
  }
}

section.slice_content_page {background-color:white; border-top:5px solid #57C6ED;}
section.slice_content_page div.main-content {background-color:white;}
section.slice_content_page div.main-content div.ArticleBody {background-color:white;}
/* ############ Top bar of Group-Nav on the content page */
section.slice_content_page aside nav td.boxout_header_middle a
{
  	color:white !important;
	background-color: #000001 !important; /* <<< Group-Nav top bar background colour */
  	font-weight:700;
  	text-transform:none !important;
}

section.slice_content_page .sidebar .sidebar_buttons a.SBbutton1 img {top:4px;padding-right:16px;}
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton2 img {top:4px;margin-left:4px;}
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton3 img {top:7px;margin-left:2px;}
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton1,
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton2,
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton3 {background-color:white !important; border:1px solid white; color:#000001; border-radius:0; margin-bottom:10px; font-weight:700;}
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton1:hover,
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton2:hover,
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton3:hover {background-color:white !important;color:#57C6ED;}
@media (max-width:991px) {
	section.slice_content_page .sidebar .sidebar_buttons a.SBbutton1,
	section.slice_content_page .sidebar .sidebar_buttons a.SBbutton2,
	section.slice_content_page .sidebar .sidebar_buttons a.SBbutton3 {margin:0 20px 10px;}
}

section.slice_content_page .sidebar .sidebar_buttons a img.IconDark,
section.slice_content_page .sidebar .sidebar_buttons a:hover img.IconLight {display:inline-block;}
section.slice_content_page .sidebar .sidebar_buttons a img.IconLight,
section.slice_content_page .sidebar .sidebar_buttons a:hover img.IconDark {display:none;}

/* Fix various issues */
body.OnSmallAppleDevice input {-webkit-appearance: none;}
body.ArticleEditor img.module_icon {width:auto !important;}
section.slice_Footer_L div.footerbar span:last-child:not([id]),
section.slice_Footer_D div.footerbar span:last-child:not([id]) { display: block; padding-top: 25px; }

@media(max-width:467px){
	section.slice_content_page nav {padding:0 10px;}
}

section.slice_Gallery8_L {padding-top:0;}

/* code for > and < on desktop menus */
section.slice_Header_D div.nav-menu ul.root_menu > li ul li.has_sub_menu::after,
section.slice_Header_D div.nav-menu ul.root_menu > li:last-child > ul li.has_sub_menu::before, 
section.slice_Header_D div.nav-menu ul.root_menu > li:nth-last-child(2) > ul li.has_sub_menu::before
{top:9px;}

section.slice_Header_D div.top-link-wrapper {
  margin-top:0;}
section.slice_Header_D div.top-link-wrapper a.top-link {
  margin:0;
}
section.slice_Header_D div.top-link-wrapper a.top-link:not(:last-child) {border-right:none;}

/* prevent text-overwriting when desktop menus wrap around */
section.slice_Header_D ul.root_menu ul {z-index:4;}

.slice_FooterTop_D .footer-column.footer-column-1 a i.icomoon-icon-youtube::after { background-color: #ff0000; border: 8px solid #ff0000; }
.slice_FooterTop_D .footer-column.footer-column-1 a:hover i.icomoon-icon-youtube::after { color: #ff0000; }
.slice_FooterTop_D .footer-column.footer-column-1 a i.icomoon-icon-vimeo::after { background-color: #1ab7ea; border: 8px solid #1ab7ea; }
.slice_FooterTop_D .footer-column.footer-column-1 a:hover i.icomoon-icon-vimeo::after { color: #1ab7ea; }

/* Slide-show bottom buttons */ 
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager {bottom:30px;}
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager a.bx-pager-link {
	width:18px;height:18px;border-radius:9px;border-width:2px;margin:0 6px;
}
@media (max-width:1200px) {
	section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager {bottom:10px;}
	section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager a.bx-pager-link {width:14px;height:14px;border-radius:7px;}
}

/* Fix system page ul lists */		
section.slice_system_page div.system_content ul {
  list-style-type: disc;
  padding-left:40px;
}

/* Fix the new calendar page pop-up */
div.dialog-content.calendar-event-content > h4,
div.dialog-content.calendar-event-content > h4 a.event-location-link {
	display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;
}
/* make sure these are not set */
html,body {height:initial;}

header section.slice_Header_D div.top-link-wrapper a:last-child,
header section.slice_Header_L div.top-link-wrapper a:last-child
 {padding-top:13px;}

/* Change the colors of a footer-icon */
footer i.icomoon-icon-XXXXX::after {
  background-color: blue !important; 
  border-color: blue !important;
}
footer a:hover i.icomoon-icon-XXXXX::after {
  color:blue !important;
}

/* Extra icon using a square background image */
footer i.icomoon-icon-XXXXXX.ImageSocialMediaIcon::after
{ /* Replace url below with actual url of square icon image */
  background-image: url(/Images/Content/1495/Templates/46170/images/CommissionLogo.png);
}

section.slice_SlidesFullWidth div.caption div.slideTitle,
section.slice_SlidesFullWidth div.caption div.slideText,
section.slice_SlidesFullWidth div.caption a.slideButton
{text-shadow:0 0 2px black;}

footer span#footer_charity div.FooterSAemail {
	display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center;
  position:relative; top:-4px;
}
footer span#footer_charity div.FooterSAemail img {
	display:block; height:25px; margin:0 10px 0 0;
}
footer span#footer_charity div.FooterSAemail a {
	display:block;
}
@media(max-width:991px){
  footer span#footer_charity div.FooterSAemail {
      justify-content:center;
    position:static; 
  }
}

section.slice_content_page div.main-content div.VideoWrapperSA {
	display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start;
  padding:20px 0 40px;
}
section.slice_content_page div.main-content div.VideoWrapperSA div.VideoCol {
	text-align:center;
  width:32%; margin:0;
}
section.slice_content_page div.main-content div.VideoWrapperSA div.VideoCol:nth-child(2) {
 margin:0 2%;
}
section.slice_content_page div.main-content div.VideoWrapperSA div.VideoCol a {
	color:black;
  font-size:24px; line-height:1.6;
  text-decoration:underline;
}

section.slice_content_page div.main-content div.MapWrapperSA {
	display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start;
}
section.slice_content_page div.main-content div.MapWrapperSA div.MapCol:first-child {
  width:55%; margin-right:5%;
}
section.slice_content_page div.main-content div.MapWrapperSA div.MapCol:last-child {
  width:40%;
}
section.slice_content_page div.main-content div.MapWrapperSA div.MapCol ul {
	margin-top:0;
  margin-bottom:15px;
}
section.slice_content_page div.main-content div.MapWrapperSA div.MapCol iframe.mapmodule-map-container {
	min-height:440px;
}
section.slice_content_page div.main-content div.MapWrapperSA div.MapCol > a {
 font-size:24px;
}

@media(max-width:991px){
  section.slice_content_page div.main-content div.VideoWrapperSA {
      flex-flow:column nowrap;  align-items:center;
  }
  section.slice_content_page div.main-content div.VideoWrapperSA div.VideoCol {
      text-align:center;
    width:100%; max-width:400px; margin:0 0 50px !important;
  }
  
  section.slice_content_page div.main-content div.MapWrapperSA {
      flex-flow:column nowrap;  align-items:center;
  }
  section.slice_content_page div.main-content div.MapWrapperSA div.MapCol:first-child {
    width:100%; margin:0 0 40px;
  }
  section.slice_content_page div.main-content div.MapWrapperSA div.MapCol:last-child {
    width:100%;
  }
}

/* UML_AL_1: Universal Mini-Layout Article-List 1 */
div.ArticleBody > div.UML_AL_1 {
	display: flex; flex-flow: row wrap; justify-content: center; align-items:stretch;
}
div.ArticleBody > div.UML_AL_1 > div { background-color: #f3f3f3; width: 100%; margin:15px 0;} /* 1 column */
@media (min-width: 467px) { /* 2 columns */
	div.ArticleBody > div.UML_AL_1 > div { width: 49%; margin:15px 0; }
	div.ArticleBody > div.UML_AL_1 > div:nth-child(2n+1) {margin-right:1%;} /* Extra 1% on each */
	div.ArticleBody > div.UML_AL_1 > div:nth-child(2n) {margin-left:1%;}
}
@media (min-width: 992px) { /* 3 columns */
	div.ArticleBody > div.UML_AL_1 > div { width:32%; margin:15px 0;}
	div.ArticleBody > div.UML_AL_1 > div:nth-child(3n+1) {margin-left:0;margin-right:0;}
	div.ArticleBody > div.UML_AL_1 > div:nth-child(3n+2) {margin-left:2%;margin-right:2%;} /* extra 4% on the middle one only */
	div.ArticleBody > div.UML_AL_1 > div:nth-child(3n) {margin-left:0;margin-right:0;}
}
div.ArticleBody > div.UML_AL_1 div.articleListImage img { display: block; width: 100%;  margin:0;}
div.ArticleBody > div.UML_AL_1 div.articleListImage a { display: block; margin: 0; }
div.ArticleBody > div.UML_AL_1 div.articleListImage a:hover,
div.ArticleBody > div.UML_AL_1 div.articleListTitle a:hover { opacity: 0.6;text-decoration:none; }
div.ArticleBody > div.UML_AL_1 div.articleListTitle {  padding: 10px 10px; }
div.ArticleBody > div.UML_AL_1 div.articleListTitle a {  text-decoration:none; font-weight: 700; font-size: larger; text-transform: capitalize;text-align: center;line-height: 1.2; display:block;}
div.ArticleBody > div.UML_AL_1 div.articleListSummary { padding: 0 10px 10px;  font-weight: 400; text-align: center;line-height: 1.3;}
div.ArticleBody > div.UML_AL_1 div.articleListLink {flex:1 1 auto;font-size:0;line-height:1;color:transparent;} /* takes up the height slack */

@media (min-width: 992px) { /* 4 columns */
	div.ArticleBody > div.UML_AL_1 > div { width:23.5%; margin:15px 0;}
	div.ArticleBody > div.UML_AL_1 > div:nth-child(4n+1) {margin-left:0;margin-right:0;}
	div.ArticleBody > div.UML_AL_1 > div:nth-child(4n+2) {margin-left:2%;margin-right:2%;} /* extra 4% on the 2nd one only */
	div.ArticleBody > div.UML_AL_1 > div:nth-child(4n+3) {margin-left:0;margin-right:2%;} /* extra 2% on the 3rd one only */
	div.ArticleBody > div.UML_AL_1 > div:nth-child(4n) {margin-left:0;margin-right:0;}
}

/* Cookie bar (22 Oct 2026): pinned to the bottom of the screen, site blue with white centred text.
   Targets the CustomClass CookieBarSA set on the three Cookies Notification modules (1437763, 1438056, 1438057),
   because the module's own inner markup isn't documented. Descendants are forced white and transparent
   so any default module styling can't put white text back on a white box. */
.CookieBarSA {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 14px 50px !important;
	z-index: 9999;
	background-color: #57C6ED !important;
	color: white !important;
	text-align: center !important;
	font-size: 16px;
	line-height: 1.4;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}
.CookieBarSA * {
	color: white !important;
	background-color: transparent !important;
	border-color: transparent !important;
	text-align: center !important;
}
.CookieBarSA a {
	text-decoration: underline !important;
}
.CookieBarSA a:hover {
	opacity: 0.8;
}
@media (min-width: 768px) {
	.CookieBarSA {
		padding: 16px 60px !important;
		font-size: 18px;
	}
}

/* Cookie bar close cross (22 Oct 2026): white and bigger. The cross ignores the white text rule above,
   so it is drawn as an image or icon. The filter turns everything inside the bar pure white however it is
   drawn (text stays white). The cross is the bar's only element with nothing inside it, so :empty finds
   it without knowing Hubb's class name. */
.CookieBarSA > * {
	filter: brightness(0) invert(1);
}
.CookieBarSA svg, .CookieBarSA svg * {
	fill: white !important;
	stroke: white !important;
}
.CookieBarSA :empty:not(br) {
	transform: scale(2);
	transform-origin: center center;
	cursor: pointer;
}
