/*  (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 New Hope 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: 111px !important; /* <<< mobile logo height */
}
@media(min-width:467px){header .logo-icon img
{ 
	height: 111px !important; /* <<< tablet logo height */
}}
@media(min-width:992px){header .logo-icon img
{ 
	height: 111px !important; /* <<< desktop logo height */
}}
/* Gap between logo and top/bottom of screen  */
header div.logo-container 
{
	margin-top: 5px !important; /* <<< gap from top for mobile/tablet */
	margin-bottom: 5px !important; /* <<< gap from bottom for mobile/tablet */
}
@media(min-width:992px){header div.logo-container 
{
	margin-top: 3px !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_L div.nav-menubar {margin-top:70px;}
}

/* ############ Menu hover-over text-link color, header top-link icons colour,
   footer email link text color */
header section.slice_Header_L i::before
{
    color: #00b0b9 !important; /* <<< header icon color */
}

header section.slice_Header_L .top-link:hover i::before
{
    color: #fff !important; /* <<< header icon color */
}



/* ############ Search box background colour */
header div.search-overlay
{
    background-color: #00b0b9 !important; /* <<< Search box background colour */
}

section.slice_CommunityText_L span.HighLight {color:#00b0b9;}


/* ############ 3 Big Button colours */
section.slice_content_page aside a.button1
{
    background-color: #ef8c34 !important; /* <<< Green/left/top big button */
}
section.slice_content_page aside a.button2
{
    background-color: #e24c44 !important; /* <<< Red/middle big button */
}
section.slice_content_page aside a.button3
{
    background-color: #00b0b9 !important; /* <<< Blue/right/bottom big button */
}



/* ############ slide show caption button, and active/hover round pager button colour */
section.slice_SlidesFullWidth a.slideButton {
    background-color: #00b0b9 !important; /* <<< slide show button background color */
    border-color: 	  #00b0b9 !important; /* <<< slide show button border color */
}
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 div.slideTitle {margin:0 20px;}



/* ############ Service Times and Location logos */
section.slice_ServiceText_L div.block2-1::after,
section.slice_ServiceText_L div.block2-2::after
{
    color: #00b0b9 !important; /* <<< Clock and Location icon colour */
}



/* ############ Quick branding of slice header-text.
   (All styles are outside of article content.) */
section.slice_Header_L .logo-name a
{
    color: #414141 !important; /* <<< a *dark* text colour, suitable for a *white* background */
}

section[class$="_L"] > h1,
section[class$="_L"] > div.container > h1
{
    color: #414141 !important; /* <<< a *dark* text colour, suitable for a *white* background */
}



/* ############ Top bar of Group-Nav on the content page */
section.slice_content_page aside nav td.boxout_header_middle a
{
    background-color: #5a6265 !important; /* <<< Group-Nav top bar background colour */
}

/* Code to make slide-shows look better on mobile screens */
section.slice_SlidesFullWidth {overflow:hidden;} /* hide anything that pokes outside */
@media (max-width:600px) {
	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 */
	}
  section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager {
    display:block;bottom:10px;
  }
}

section.slice_Header_L div.nav-menu ul.root_menu > li ul li.has_sub_menu::after,
section.slice_Header_L div.nav-menu ul.root_menu > li:last-child > ul li.has_sub_menu::before, 
section.slice_Header_L div.nav-menu ul.root_menu > li:nth-last-child(2) > ul li.has_sub_menu::before
{top:4px;}

/* Fix various issues */
div.endis-jquery-ui div#divOverlay {font-size:17px;line-height:1.3;}
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; }
.HideElement {display:none !important;}

/* prevent text-overwriting when desktop menus wrap around */
section.slice_Header_D ul.root_menu ul,
section.slice_Header_L ul.root_menu ul,
section.slice_Header_T ul.root_menu ul {z-index:4;}

section.slice_Footer_D div.footerbar a#footer_cookies::after,
section.slice_Footer_L div.footerbar a#footer_cookies::after { content: "|"; padding: 0 5px; }
@media (min-width: 768px) {
	section.slice_Footer_D div.footerbar a#footer_cookies::after,
	section.slice_Footer_L div.footerbar a#footer_cookies::after { padding: 0 10px; }
}

/* 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:first-child,
header section.slice_Header_L div.top-link-wrapper a:first-child,
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:14px;}

footer i.ImageSocialMediaIcon::after {padding:10px !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
{text-shadow:0 0 2px black;}

footer div.FooterSafeGuarding {
	text-align:center; width:100%; margin:0 auto 20px; max-width:700px; line-height:1.3;
  border-bottom:1px solid #5A6265;padding:0 10px;
}
footer div.FooterSafeGuarding h1 {font-size:24px; line-height:1; margin:0 0 10px;}

section.RedBanner {
  padding:10px; background-color:red;
}
section.RedBanner div.ArticleBody,
section.RedBanner a {
  	text-align:center;font-size:24px;line-height:1.3;color:white;
}
section.RedBanner a,
section.RedBanner a:hover {text-decoration:underline;}
@media (max-width:991px) {
  	section.RedBanner div.ArticleBody,
	section.RedBanner a {font-size:18px;}
}
@media (max-width:359px) {
  	section.RedBanner div.ArticleBody,
	section.RedBanner a {font-size:16px;}
}