/*
   Style Over-Ride file. Put/edit CSS styles in here that are specific to a customer.
   Version 1-Feb-2017.

   WARNING - try not to add styles that will be applied to article contents,
   or else customers will get confused if they try to change colours/styles
   in an article but see no change on their screen.

   All the styles already in here are OK to change. */



/* ############ Size of header logo icon/image */
header .logo-icon img
{
    width:  auto !important; /* <<< mobile logo width */
    height: 90px !important;
}
@media(min-width:467px){header .logo-icon img
{
    height: 90px !important;
}}
@media(min-width:992px){header .logo-icon img
{
    height: 90px !important;
}}
/* Gap between logo and top/bottom of screen  */
header div.logo-container 
{
	margin-top: 0 !important; /* <<< gap from top for mobile/tablet */
	margin-bottom: 0 !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 */
}}

/* Force Logo to stay in the middle */ 
header section.slice_Header_L div.logo-container {
  justify-content:center; /* on tablet/mobiles */
  margin-left:0; left:50%; right:50%; /* on desktop */
}

/* ############ Mobile menu colours */
header section.slice_Header_L a.slicknav_btn
{
	background-color: #f5f5f5 !important; /* <<< colour of the menu bar */
}
header section.slice_Header_L .slicknav_icon-bar
{
	background-color: black !important; /* <<< colour of the menu icon */
}
header section.slice_Header_L div.SlickNavCloseIcon
{
	color: black !important; /* <<< colour of the menu close icon */
}

section.slice_Header_L div.top-link-wrapper {background-color:#f5f5f5;}

/* ############ Menu hover-over text-link color, header top-link icons colour,
   footer email link text color */
header section.slice_Header_L i::before
{
    color: #2c2a2b !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: black !important; /* <<< Search box background colour */
}



/* ############ 3 Big Button colours */
section[class^="slice_WhatsOn3Buttons"] a.button1,
section.slice_content_page aside a.button1
{
    background-color: #4acfc7 !important; /* <<< Green/left/top big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button2,
section.slice_content_page aside a.button2
{
    background-color: #e84c3d !important; /* <<< Red/middle big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button3,
section.slice_content_page aside a.button3
{
    background-color: #129dc0 !important; /* <<< Blue/right/bottom big button */
}



/* ############ slide show caption button, and active/hover round pager button colour */
section[class*="Slides"] a.slideButton,
section[class*="Slides"] a.bx-pager-link:hover,
section[class*="Slides"] a.bx-pager-link.active
{
    background-color: black !important; /* <<< slide show button background color */
    border-color: 	  black !important; /* <<< slide show button border color */
}
/* Slide show inactive round pager buttons */
section[class*="Slides"] a.bx-pager-link
{
    background-color: #d7d7d7 !important; /* <<< slide show inactive round button color */
    border-color: 	  #d7d7d7 !important; /* <<< slide show inactive round button border color */
}
section.slice_SlidesFullWidth div.slideTitle,
section.slice_SlidesFullWidth div.slideText {text-shadow: 0px 0px 5px #000000;}

/* ############ Service Times and Location logos */
section[class^="slice_ServiceText"] div.block2-1::after,
section[class^="slice_ServiceText"] div.block2-2::after
{
    color: black !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: black !important; /* <<< a *dark* text colour, suitable for a *white* background */
}

section[class$="_L"] > h1,
section[class$="_L"] > div.container > h1
{
    color: #323232 !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: #2c4049 !important; /* <<< Group-Nav top bar background colour */
}

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