/*  (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 Creation 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: 70px !important; /* <<< mobile logo height */
}
@media(min-width:467px){header .logo-icon img
{ 
	height: 76px !important; /* <<< tablet logo height */
}}
@media(min-width:992px){header .logo-icon img
{ 
	height: 76px !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: 15px !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-menu {margin-top:20px;}

header section.slice_Header_L div.nav-menu ul.root_menu > li:last-child > a {padding-right:5px;}
.slice_Header_L .nav-menu ul.root_menu > li > a {font-size:18px;font-weight:700;}
@media (max-width:1300px) and (min-width:992px) {
  header div.logo-container {margin-top:5px !important;}
  .slice_Header_L .nav-menu ul.root_menu > li > a {
    font-size:16px;padding-left:12px;padding-right:12px;}
}

/* 3 Big Button colours */
.slice_content_page .sidebar_buttons a.button1
{
    background-color: #AB9E4F !important; /* <<< Green/left/top big button */
}
.slice_content_page .sidebar_buttons a.button2
{
    background-color: #3B98A9 !important; /* <<< Red/middle big button */
}
.slice_content_page .sidebar_buttons a.button3
{
    background-color: #B22567 !important; /* <<< Blue/right/bottom big button */
}

/* slide show button and round pager button colour */ 
section.slice_SlidesFullWidth div.bx-pager a, 
section.slice_SlidesFullWidth div.bx-pager a
{
    background-color: #f5f5f5 !important; /* <<< slide show button background color */
    border-color: #f5f5f5 !important; /* <<< slide show button border color */
}
section.slice_SlidesFullWidth div.bx-pager a:hover, 
section.slice_SlidesFullWidth div.bx-pager a.active
{
    background-color: #a8a8aa !important; /* <<< slide show button background color */
    border-color: #a8a8aa !important; /* <<< slide show button border color */
}

.slice_SlidesFullWidth a.slideButton
{
    background-color: transparent !important; /* <<< slide show button background color */
    border-color: white !important; /* <<< slide show button border color */
  	color: white !important;
}

.slice_SlidesFullWidth a.slideButton:hover
{
    background-color: #b22567 !important; /* <<< slide show button background color */
    border-color: #b22567 !important; /* <<< slide show button border color */
}

section.slice_WhatsOnSlidesEB_L div.bx-pager a, 
section.slice_WhatsOnSlidesEB_L div.bx-pager a
{
    background-color: white !important; /* <<< slide show button background color */
    border-color: white !important; /* <<< slide show button border color */
}
section.slice_WhatsOnSlidesEB_L div.bx-pager a:hover, 
section.slice_WhatsOnSlidesEB_L div.bx-pager a.active
{
    background-color: #7a0049 !important; /* <<< slide show button background color */
    border-color: #7a0049 !important; /* <<< slide show button border color */
}

/* Time and Location logos */
.slice_ServiceText_L .block2-1::after, .slice_ServiceText_L .block2-2::after,
.slice_ServiceTextEB_L .block2-1::after, .slice_ServiceTextEB_L .block2-2::after
{
    color: #494f55 !important; /* <<< Clock and Location icon colour */
}

/* Search box */
.slice_Header_L .search-overlay
{
    background-color: #b22567 !important; /* <<< Search box back-ground colour */
}

/* 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:5px;
	}
}
section.slice_SlidesFullWidth div.slideTitle {margin:0 20px;}
section.slice_WhatsOn3Buttons_L h1 {font-weight:700;}

/* 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; }

/* 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; }
}

/* CSS to allow a normal web-office image to be used as a css background. */
section.slice_Children::before { 
  content: " "; 
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; 
  background-size: cover; 
  background-repeat: no-repeat; z-index: -1; 
  will-change: transform; 
}
section.slice_Children {
    background-image: none !important;
  	background-position: left center;
  	background-attachment: fixed;
}
section.slice_WhatsOn3Buttons_L {background-color:white;}

.HideElement {display:none !important;}

/* 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_L div.top-link-wrapper a.top-link {
  padding-top:10px; margin-right:2px;
}
header section.slice_Header_L div.top-link-wrapper a.top-link:last-child {
  padding-top:7px; margin-right:0;
}
header section.slice_Header_L li.ExtraLink.SearchOpen a {padding-top:9px;}
header section.slice_Header_L div.top-link-wrapper {font-size:0;}

/* 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_CommunityText_L > div.container > div.ArticleBody {float:none;margin:0;width:100%;}
section.slice_CommunityText_L div.WelcomeWrapper {
	display:flex;flex-flow:row nowrap;justify-content:center;align-items:flex-start;
  text-align:left; max-width:1020px; margin:0 auto;
}
section.slice_CommunityText_L div.WelcomeWrapper h1 {margin:0 0 20px;font-size:40px;line-height:1.1;}
section.slice_CommunityText_L div.WelcomeWrapper img {
 	display:block;margin-right:30px; 
}
section.slice_CommunityText_L div.WelcomeWrapper a.button,
section.slice_CommunityText_L div.WelcomeWrapper a.button2 {
  font-weight:700;line-height:1.3; font-size:16px;
  display:inline-block;margin:0;
}
@media (max-width:1100px) {
  section.slice_CommunityText_L div.WelcomeWrapper h1 {font-size:26px;}
}
@media (max-width:767px) {
  section.slice_CommunityText_L div.WelcomeWrapper {
    flex-flow:column nowrap;justify-content:flex-start;align-items:center;
    text-align:center;
  }
  section.slice_CommunityText_L div.WelcomeWrapper img {margin:0 0 20px 0;}
  section.slice_CommunityText_L div.WelcomeWrapper a.button,
  section.slice_CommunityText_L div.WelcomeWrapper a.button2 {
    font-size:15px;padding-left:15px;padding-right:15px;
  }
}

section.slice_InstagramFeed {padding-left:0;padding-right:0;background-color:#e2e2e2;}
section.slice_InstagramFeed iframe {width:100%;border:none;overflow:hidden;}
section.slice_InstagramFeed a.button { 
  color:#7a0049;border-color: #d7d7d7; background-color: transparent;border-radius:4px; }
section.slice_InstagramFeed a.button:hover { 
  color:#7a0049;background-color:#e2e2e2;border-color: #b22567; opacity: 1; }

section.EventsAndTalks {background-color:#f1f1f1; padding:60px 10px 50px;}
section.EventsAndTalks h1 {
  font-family:Lato, sans-serif;
  color:#539ba7; font-size:30px; line-height:1; margin:0 0 25px; font-weight:700;
}
section.EventsAndTalks a.button { 
  font-weight:700; display:inline-block; margin:20px 0 0;
  color:#7a0049;border-color: #d7d7d7; background-color: transparent;border-radius:4px; }
section.EventsAndTalks a.button:hover { 
  color:#7a0049;border-color: #b22567; opacity: 1; }
section.EventsAndTalks div.container {
  	/* make sure the vertical stretch propagates into here */
	display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:stretch;
}
section.EventsAndTalks div.EventFlex {width:65%;padding:0 30px 0 0;}
section.EventsAndTalks div.TalkFlex {width:35%;}
section.EventsAndTalks div.EventsList > div {
  line-height:1.3;
  float:none !important;background-color:white;margin:0 0 3px; padding:15px;
}
section.EventsAndTalks div.TalksList span.MediaList > div {
  line-height:1.5;
  background-color:white;margin:0 0 3px;padding:18px 10px 18px 60px;
}

section.EventsAndTalks div.mediaListTitle a {
  font-size:20px;font-weight:700;color:#7a0049;position:relative;
}
section.EventsAndTalks div.mediaListTitle a:hover {color:#b22567;}
section.EventsAndTalks div.mediaListTitle a::before {
	content:' ';
  	display:block;position:absolute;top:1px;left:-40px;
  	width:26px; height:25px;
  	background-image:url(/Images/Content/598/Templates/54709/images/IconAudio25h.png);
  	background-repeat:no-repeat;
}
section.EventsAndTalks div.mediaListSpeaker {font-size:18px;font-weight:700;}
section.EventsAndTalks div.MediaListDate {font-size:16px;}

section.EventsAndTalks div.EventsList a,
section.EventsAndTalks div.EventsList img {display:block;}
section.EventsAndTalks div.EventsList img {width:230px;}
section.EventsAndTalks div.EventsList img {padding:0 30px 0 0;}
section.EventsAndTalks div.eventListTitle a {
	font-size:24px;font-weight:700;color:#7a0049;
}
section.EventsAndTalks div.eventListTitle a:hover {color:#b22567;}
section.EventsAndTalks div.eventListDate {
  display:inline-block; border-radius:4px; font-size:17px; line-height:1;
  background-color:#b22567; color:white; padding:6px 12px 7px; font-weight:700;
  text-transform:uppercase; margin:0 0 5px;
}
section.EventsAndTalks div.eventListTime {
  font-size:18px;
}
section.EventsAndTalks div.eventListLocation a {padding:3px 0 0 25px;position:relative;}
section.EventsAndTalks div.eventListLocation a::before {
	content:' ';
  	display:block;position:absolute;top:5px;left:0;
  	width:15px; height:20px;
  	background-image:url(/Images/Content/598/Templates/54709/images/IconMapPin20h.png);
  	background-repeat:no-repeat;
}
@media (max-width:991px) {
  	section.EventsAndTalks {padding:30px 10px 20px;}
  	section.EventsAndTalks h1 {margin:0 0 10px;}
  	section.EventsAndTalks a.button {margin:10px 0 0;}
	section.EventsAndTalks div.container {
		flex-flow:column nowrap;align-items:center;
	}
  	section.EventsAndTalks div.EventFlex {width:100%;padding:0;margin:0 auto;max-width:600px;}
	section.EventsAndTalks div.TalkFlex {width:100%;margin:40px auto;max-width:600px;}
}
/* on mobiles put image at the top */
@media (max-width:600px) {
  section.EventsAndTalks div.EventsList tr {
  	display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:flex-start;
  }
  section.EventsAndTalks div.EventsList img {padding:0 0 15px;}
}
/* on desktop make sure the heights of the 2 columns match up perfectly */
@media (min-width:992px) {
  section.EventsAndTalks div.EventFlex,
  section.EventsAndTalks div.TalkFlex {
    	/* ensure the stretching propagates up */
      display:flex;flex-flow:column nowrap;justify-content:stretch;align-items:stretch;
  }
  section.EventsAndTalks div.EventFlex div.EventsList,
  section.EventsAndTalks div.EventFlex div.TalksList {
      flex:1 1 auto; /* controls the stretching, vertical space goes into the 'space-between' */
      display:flex;flex-flow:column nowrap;justify-content:space-between;align-items:stretch;	
  }
  /* stop the buttons from changing shape */
  section.EventsAndTalks a.button {align-self:flex-start;}
}

/* Sort out article text */
section.slice_content_page div.main-content div.ArticleBody span {
  font-size:inherit !important; 
  font-family:inherit !important;
}

section.slice_content_page.WideContent div.main-content {
  width:100%;
	float:none;
  margin-left:0; margin-right:0;
  padding-left:10px; padding-right:10px;
  background-color:#f1f1f1;
}
section.slice_content_page.WideContent div.CenterButton {text-align:center;}
section.slice_content_page.WideContent div.CenterButton a.button {margin:0;}
section.slice_content_page.WideContent div.CenterButton a.button:hover {text-decoration:none;}

/* 
	UML_ML_1: Universal Mini-Layout Media-List 1 
	Code is for a 3 > 2 > 1 column layout.
	
	The media-list module outputs a "span.MediaList" wrapper, around all the card div's.
*/
section.slice_content_page div.UML_ML_1 span.MediaList {
	display: flex; flex-flow: row wrap; justify-content: center; align-items:stretch;
}
section.slice_content_page div.UML_ML_1 span.MediaList > div { background-color: white; width: 100%; margin:15px 0;} /* 1 column */
@media (min-width: 467px) { /* 2 columns */
	section.slice_content_page div.UML_ML_1 span.MediaList > div { width: 49%; margin:15px 0; }
	section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(2n+1) {margin-right:1%;} /* Extra 1% on each */
	section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(2n) {margin-left:1%;}
}
@media (min-width: 992px) { /* 3 columns */
	section.slice_content_page div.UML_ML_1 span.MediaList > div { width:32%; margin:15px 0;}
	section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(3n+1) {margin-left:0;margin-right:0;}
	section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(3n+2) {margin-left:2%;margin-right:2%;} /* extra 4% on the middle one only */
	section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(3n) {margin-left:0;margin-right:0;}
}
section.slice_content_page div.UML_ML_1 div.MediaListImage img { display: block; width: 100%; }
section.slice_content_page div.UML_ML_1 div.MediaListImage a { display: block; margin: 0; }
section.slice_content_page div.UML_ML_1 div.MediaListImage a:hover,
section.slice_content_page div.UML_ML_1 div.MediaListTitle a:hover { opacity: 0.6;text-decoration:none; }
section.slice_content_page div.UML_ML_1 div.MediaListTitle {  padding: 10px 10px;}
section.slice_content_page div.UML_ML_1 div.MediaListTitle a { font-weight: 700; font-size: larger; text-transform: capitalize;text-align: center;line-height: 1.2; display:block;}
section.slice_content_page div.UML_ML_1 div.MediaListSpeaker,
section.slice_content_page div.UML_ML_1 div.MediaListDate,
section.slice_content_page div.UML_ML_1 div.MediaListBible,
section.slice_content_page div.UML_ML_1 div.MediaListLength
{ padding: 0 10px 10px;  font-weight: 400; text-align: center;line-height: 1.3;}
section.slice_content_page div.UML_ML_1 div.MediaListLink {flex:1 1 auto;font-size:0;line-height:1;color:transparent;} /* takes up the height slack */

/* Banner Image code */
section.slice_BannerImage {
  position:relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	padding: 200px 10px;
}
@media(max-width:992px){
	section.slice_BannerImage {padding:100px 10px;}
}
section.slice_BannerImage h1 {
  position:relative; z-index:0;
	line-height:1.2; 
	margin:0; 
	text-align:center;
	color: white;
	font-size: 60px;
	text-transform:uppercase;
}
@media(max-width:992px){
	section.slice_BannerImage h1 {font-size: 40px;}
}
@media(max-width:467px){
	section.slice_BannerImage h1 {font-size: 30px;}
}
section.slice_BannerImage div.BannerImgCustomFields {display:none;}
section.slice_BannerImage div.container {text-align:center;}
section.slice_BannerImage div.OverlayTint { 
  position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;
  background-color:rgba(0,0,0,0.4);
}
section.slice_content_page.AddTopBorder {border-top:1px solid #dddddd;}

/* Media Landing page search box */
section.slice_MediaSearch div.search-overlay {padding:25px 10px 25px 0; background-color: white; }
section.slice_MediaSearch div.search-overlay input.button, section.slice_MediaSearch div.search-overlay label { display: none; }
section.slice_MediaSearch div.search-overlay div.search-form { position: relative; max-width:600px;}
section.slice_MediaSearch div.search-overlay div.search-form span.top-link { position: absolute; top: 0; right:0 ; background-color: #a97c50; display: inline-block; line-height: 1; padding: 13px;  font-size: 15px; transition: color 500ms linear, background-color 500ms linear; cursor:pointer;}
section.slice_MediaSearch div.search-overlay div.search-form span.top-link:hover { background-color: #038e63; }
section.slice_MediaSearch div.search-overlay div.search-form span.top-link img { display: inline-block; padding: 3px 3px 0; }
section.slice_MediaSearch div.search-overlay .search_div { margin: 0 50px 0 0; }
section.slice_MediaSearch div.search-overlay .search_div input.text { height: 47px; margin-bottom: 0px; border: none; background-color: #f1f1f1;  font-size: 15px; line-height: 1;  width: 100%; color: #414141; outline: none; margin-left: 10px; padding-left: 20px; padding-right: 5px; }
@media (max-width: 400px) { section.slice_MediaSearch div.search-overlay div.search-form div.search_div input.text { font-size: 16px; letter-spacing: -0.5px; } }

@media(max-width:467px){
  section.slice_content_page div.main-content {padding-left:10px;padding-right:10px;}
}

div.AOGfooterLogo {
  display:flex; flex-flow: row wrap; justify-content:center; align-items:center;
  margin:0 auto 30px;
}
div.AOGfooterLogoText {padding-left:30px; text-align:left; font-size:20px;}

section.slice_system_page._forums_threads_aspx div.comment-form > div.input-field:nth-child(4) {
	display:none;
}

section.RedBanner {
  padding:20px 10px; background-color:#b22567;
}
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 {
  display:inline-block; padding:10px 30px;
  text-decoration:none; border:2px solid white; border-radius:10px;
}
@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;}
}