/* 
   Style Over-Ride file for All Nations Wolverhampton */

/* ############ Size of site logo image */
/* (For reference the entire desktop header is 127px high, unless there is a massive logo present) */
header .logo-icon img
{ 
	width:  auto !important; /* <<< mobile logo width */
	height: 120px !important; 
  	border-radius:94px;
}
@media(min-width:1200px){header .logo-icon img
{ 
	height: 188px !important; 
}}
header .logo-icon img.SystemPage {height: 115px !important;}
/* 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:1200px){
	header div.logo-container {
		margin-top: 5px !important; /* <<< gap from top for desktop */
		margin-bottom: 0 !important; /* <<< gap from bottom for desktop */
		margin-left: 5px !important;
		margin-right: 0 !important;
	}
}
header div.nav-menu {margin-top: 55px !important;} /* make more space for the logo to fit in on desktop view */

@media(max-width:1200px){
	header .slice_Header_T {position:absolute !important;}
	header section.slice_Header_T div.SlickNav_Wrapper {
		position:fixed;
		right:0;
	}
}

header span.slicknav_arrow {transform: rotate(90deg) translateY(-5px) !important;}
@media(min-width:1200px){
  header section.slice_Header_T div.SlickNavSideMenuWrapper span.slicknav_arrow {color: white !important;}
}

/* Code to move content out of the video overlay on a mobile display */
/* section.slice_VideoWrapper div.ArticleBody {display:none;} */
section.slice_MobileWelcomeHome {
	padding-top:30px; 
	padding-bottom:20px;
	background-color: #231f20;
	color: white;
}
@media(min-width:768px){
	section.slice_MobileWelcomeHome {display:none;}
	section.slice_VideoWrapper div.ArticleBody {
		display:block; 
	}
}
section.slice_VideoWrapper {overflow: hidden;}
@media (max-width: 767px) {
	section.slice_VideoWrapper video {
      width: 200%;
      transform: translateX(-25%);
	}
}

section.slice_MobileWelcomeHome {display:none !important;}

/* Below is code for the Side SlickNav menu, which only appears on the desktop. */
div.SlickNavSideMenuWrapper {
	position: absolute;
	top: 52px;
	right: 0;
	width: auto;
	min-width: 290px;
	transition: color 500ms linear, background-color 500ms linear !important;
	z-index: 4;
}
div.SlickNavSideMenuWrapper .slicknav_btn, 
div.SlickNavSideMenuWrapper ul {background-color: transparent !important;}

div.SlickNavSideMenuWrapper a,
div.SlickNavSideMenuWrapper span.slicknav_arrow {color: white !important;}

div.SlickNavSideMenuWrapper span.slicknav_icon,
div.SlickNavSideMenuWrapper span.slicknav_menutxt,
div.SlickNavSideMenuWrapper div.SlickNavCloseIcon {
	float:left !important; /* reverse the display order of items */
}

div.SlickNavSideMenuWrapper a.slicknav_btn:hover span,
div.SlickNavSideMenuWrapper div.SlickNavCloseIcon:hover,
div.SlickNavSideMenuWrapper a:hover {color: #f2663a !important;}
div.SlickNavSideMenuWrapper a.slicknav_btn:hover span.slicknav_icon-bar {background-color: #f2663a !important;}

div.SlickNavSideMenuWrapper a.slicknav_btn.slicknav_open span.slicknav_menutxt {color: #f2663a !important;}

div.SlickNavSideMenuWrapper span,
div.SlickNavSideMenuWrapper div.SlickNavCloseIcon
{transition: color 500ms linear, background-color 500ms linear;}

div.slicknav_menu span,
div.slicknav_menu a {
	font-family: AvenirHeavy;
	text-transform: uppercase;
	font-size: 17px;
}

div.SlickNavSideMenuWrapper .slicknav_menu {display:none !important;}
@media(min-width:1200px) {
	div.SlickNavSideMenuWrapper .slicknav_menu {display:block !important;}
}
header section.slice_Header_T div.SlickNav_Wrapper.SlickNavFullWidth {width:100%; position:absolute;}

/* Code for the change in header on scroll */
/*
@media(min-width:1200px) {
	section.slice_Header_T li.menu_item_level_1 a {text-shadow: 0 0 2px black;} 
}
*/
section.slice_Header_White {
	background-color: white;
	border-bottom: 1px solid #b7b7b7;
}
section.slice_Header_White ul.root_menu > li > a,
section.slice_Header_White div.SlickNavSideMenuWrapper span {color: #67686b !important;}
section.slice_Header_White ul.root_menu > li > a:hover,
section.slice_Header_White div.SlickNavSideMenuWrapper div.SlickNavCloseIcon {color: #f2663a !important;}
section.slice_Header_White div.SlickNavSideMenuWrapper span.slicknav_icon-bar {background-color: #67686b !important;}
/*section.slice_Header_White li.menu_item_level_1 a {text-shadow: none !important;}*/
section.slice_Header_T.slice_Header_White .logo-container .logo-icon a img.LogoWhite,
section.slice_Header_T .logo-container .logo-icon a img.LogoOrange {display:none;}
section.slice_Header_T.slice_Header_White .logo-container .logo-icon a img.LogoOrange {display:block;}

/* Menu overlay */
div.DarkOverlay { 
	position: fixed; 
	left: 0; 
	top: 0; 
	width: 100%; 
	height:0; 
	z-index: 1; 
	background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
	transition: height 300ms linear;
}
div.DarkOverlay.DarkOverlayOn {height: 100vh;}
div.DarkOverlay.DarkOverlayMobileOn {
	height: 100vh;
	background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5));
}

section.slice_Header_T div.SlickNav_Wrapper {position:relative; z-index:2;}
section.slice_Header_T div.SlickNav_Wrapper ul.slicknav_nav {padding-right:50px;}
section.slice_Header_T div.SideMenu,
section.slice_Header_T ul.root_menu > li:nth-child(7) {display: none;}
section.slice_Header_T .nav-menu ul.root_menu > li > a {padding: 5px 20px 5px !important;}

/* Prayer Form responses */
div.endis-jquery-ui div#divOverlay {
	font-size: 17px !important; 
	line-height: 1.3 !important;
}

/* Tint on background images */
section.TintedSlice {position:relative;}
section.TintedSlice div.TintLayer {background-color:rgba(0,0,0,0.3);position:absolute;top:0;left:0;width:100%;height:100%;}
section.TintedSlice div.container {position:relative; z-index:1;}
section.TintedSlice div.LightTintLayer {background-color:rgba(255,255,255,0.7)}
section.slice_Header_T {z-index:2;} /* needs to be above any tints */ 

/* grey text */
div.HeavyGrey {font-family:AvenirHeavy !important; color:#67686b !important;}
div.HeavyWhite {font-family:AvenirHeavy !important; color:white !important;}

/* Background image on slice_WhatsOn */
section.slice_WhatsOn {
	background-image: url(../images/BackgroundE.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

section.slice_ChurchLife div.articleListImage a {position:relative;}
section.slice_ChurchLife img.HoverImage {display:none !important; position:absolute; top:0; left:0;}
section.slice_ChurchLife div.articleListImage a:hover img.HoverImage {display:block !important;}

/*
@media (min-width:992px) {
	footer span#footer_charity {
		line-height:1.4 !important;
		position:relative;
		top:-8px;
	}
}
*/

header section.slice_Header_T.PositionStatic {position:static !important;}

/* Banner Image code */
section.slice_BannerImage {
	/*background-image: url(../images/BackgroundLanding.jpg);*/
	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 div.BannerImgCustomFields,
section.slice_BannerImage div.ArticleCustomFields {display:none;}
section.slice_BannerImage h1,
section.slice_BannerImage h4 {
	line-height:1; 
	margin:0; 
	text-align:center;
	color: white;
  	text-shadow:0 0 2px black;
}
section.slice_BannerImage h1 {font-size: 60px; text-transform: uppercase;}
section.slice_BannerImage h4 {font-size: 40px; line-height:1.2;}
@media(max-width:992px){
	section.slice_BannerImage h1 {font-size: 40px;}
  	section.slice_BannerImage h4 {font-size: 30px;}
}
@media(max-width:467px){
	section.slice_BannerImage h1 {font-size: 30px;}
	section.slice_BannerImage h4 {font-size: 20px;}
}

/* CSS background images */
section.slice_HowToGetHere {background-image: url(/Images/Content/2448/861940.jpg) !important;}
section.slice_LifeGroups {background-image: none !important;}
section.slice_LifeGroups.SwitchFastParallexOn::before {background-image: url(/Images/Content/2448/861938.jpg) !important;}
section.slice_PrayerRequests {
  background-image: url(/Images/Content/2448/861939.jpg) !important;
	background-position:center center;
}

/* upper case all menus */
header ul li > a,
section.slice_content_page nav a {text-transform: uppercase !important;}

/* set all buttons in articles to house style buttons */
section.slice_content_page div.ArticleBody a.button, 
section.slice_content_page div.ArticleBody input[type="button"] {
	font-family: AvenirHeavy; text-transform:uppercase; display: inline-block; border: 2px solid transparent; border-radius: 22px; 
	padding: 12px 25px; font-size: 16px; line-height: 1; margin: 20px 30px 0 0; width:auto !important;
}
section.slice_content_page div.ArticleBody a.button:hover, 
section.slice_content_page div.ArticleBody input[type="button"]:hover { text-decoration: none; }
@media (min-width: 768px) { 
	section.slice_content_page div.ArticleBody a.button, 
	section.slice_content_page div.ArticleBody input[type="button"]{ font-size: 16px; margin-top: 20px; }
}
section.slice_content_page div.ArticleBody a.button,
section.slice_content_page div.ArticleBody input[type="button"] { color: #67686b; border-color: #b7b7b7; background-color: transparent; }
section.slice_content_page div.ArticleBody a.button:hover,
section.slice_content_page div.ArticleBody input[type="button"]:hover { color: white; border-color: #f2663a; background-color: #f2663a; opacity: 1; }

section.slice_content_page div.map-nearest input[type="text"] {
  padding:5px !important; width:120px !important;
}
section.slice_content_page div.map-nearest table {background-color:#f2f2f5;border:1px solid #c6c6c6; }
section.slice_content_page div.map-nearest td {padding:3px;}
section.slice_content_page div.map-nearest img {width:auto !important;}

section.slice_content_page.WideContent div.main-content {width:100%; margin:0;}
section.slice_content_page a.article_cards_button:hover {text-decoration:none;}

section.slice_PrayerRequests a.button {margin-bottom:5px; border-color:white; text-shadow:0 0 2px black;}
section.slice_PrayerRequests a.button:hover {text-shadow:none;}

/* make the video slice slide-show work */
header {position:relative;}

section.slice_WelcomeSlidesWrapper {
  position:absolute; bottom:0; left:0; right:0;
  background-color:rgba(0,0,0,0.6);
  padding:10px 0;
}
@media (max-width:720px) {	
	section.slice_WelcomeSlidesWrapper {	
  		padding:0;
	}
}  

section.slice_WelcomeSlides_L {position:static; bottom:0; left:0; right:0; width:700px; height:120px; margin:0 auto; padding:0 !important;}
section.slice_WelcomeSlides_L .bx-wrapper {background-color: transparent !important;}
section.slice_WelcomeSlides_L table {background-color:transparent;padding:0; margin:0; border-collapse:collapse; width:700px; height:120px;}
section.slice_WelcomeSlides_L td {padding:0;}
section.slice_WelcomeSlides_L img {width:auto !important; height:120px !important; display:block;}
section.slice_WelcomeSlides_L td.Image {width:214px;}
section.slice_WelcomeSlides_L td.Spacer {width:15px;}
section.slice_WelcomeSlides_L td.Text {width:456px; vertical-align:middle; padding-top:5px;line-height:1.2 !important; }
section.slice_WelcomeSlides_L ul a {display:block; color:white !important;}
section.slice_WelcomeSlides_L ul a:hover {color: #f05356 !important;}
section.slice_WelcomeSlides_L a.bx-pager-link {width:16px !important; height:16px !important; border-radius:8px !important;}
section.slice_WelcomeSlides_L div.bx-pager {padding:0 !important; bottom:5px !important; display:block !important; text-align:center;}
section.slice_WelcomeSlides_L div.TableWrapper {border-radius: 0; overflow: hidden;}
@media (max-width:992px) {
  section.slice_WelcomeSlides_L {bottom:5px;}
}
@media (max-width:720px) {
	section.slice_WelcomeSlides_L {
		position:static !important; 
		width:100% !important;
		height:auto !important;
		background-color: transparent !important;
		padding-top:0 !important;
	}
  section.slice_WelcomeSlides_L div.bannerSlides {margin:0; width:100%; float:none;}
	section.slice_WelcomeSlides_L table {background-color:transparent;margin: 0 auto !important; width:100% !important;height:auto !important;}
  section.slice_WelcomeSlides_L table img { height:auto !important;}
  section.slice_WelcomeSlides_L td.Image {width:45% !important;}
	section.slice_WelcomeSlides_L td.Text {width:50% !important;}
	section.slice_WelcomeSlides_L div.TableWrapper {border-radius:0;}
  	section.slice_WelcomeSlides_L div.bx-pager {text-align:right;}
/* Slide show inactive round pager buttons */
  section.slice_WelcomeSlides_L a.bx-pager-link {	
      background-color: #b7b7b7 !important; /* <<< slide show inactive round button color */
      border-color: 	  #b7b7b7 !important; /* <<< slide show inactive round button border color */
  }
  section.slice_WelcomeSlides_L a.bx-pager-link:hover, 
section.slice_WelcomeSlides_L a.bx-pager-link.active {	
      background-color: #f2663a !important; /* <<< slide show inactive round button color */
      border-color: 	  #f2663a !important; /* <<< slide show inactive round button border color */
  }
}
@media (max-width:720px) {
	section.slice_WelcomeSlides_L td.Spacer {width:5px;}
	section.slice_WelcomeSlides_L td.Text {font-size:13px !important;}
}

header section.slice_Header_T div.slicknav_menu a.slicknav_btn.SlickNavTransparentOn 
{background-color:transparent;}

header video {
  max-height:100vh; 
  background-image:url(/Images/Content/2622/Templates/51249/images/Background1.jpg);
  background-position:center center;
  background-size:cover;
}
@media (max-width:500px) {
  header section.slice_VideoWrapper div.video-overlay {justify-content:flex-end;}
}