/*
   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:  200px !important; /* <<< mobile logo width */
    height: auto !important;
}
@media(min-width:467px){header .logo-icon img
{
    width:  220px !important; /* <<< tablet logo width */
    height: auto !important;
}}
@media(min-width:992px){header .logo-icon img
{
    width:  280px !important; /* <<< desktop logo width */
    height: auto !important;
}}



/* ############ Menu hover-over text-link color, header top-link icons colour,
   footer email link text color */
header section.slice_Header_D i::before,
header section.slice_Header_L i::before,
header li:hover > a,
header li:hover > a > a,
footer .footer-column-3 a
{
    color: #8e0554 !important; /* <<< header/footer icon/text-link color */
}

footer .footer-column-3 a:hover
{
    color: #3a4972 !important; 
}



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



/* ############ 3 Big Button colours */
section[class^="slice_WhatsOn3Buttons"] a.button1,
section.slice_content_page aside a.button1
{
    background-color: #af1e2d !important; /* <<< left/top big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button2,
section.slice_content_page aside a.button2
{
    background-color: #d15b05 !important; /* <<< middle big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button3,
section.slice_content_page aside a.button3
{
    background-color: #939905 !important; /* <<< right/bottom big button */
}


/* Slide show inactive round pager buttons */
section[class*="Slides"] a.bx-pager-link
{
    background-color: #d5dfcf !important; /* <<< slide show inactive round button color */
    border-color: 	  #d5dfcf !important; /* <<< slide show inactive round button border color */
}

/* ############ Quick branding of slice header-text.
   (All styles are outside of article content.) */
section.slice_Header_L .logo-name a,
section[class$="_L"] > h1,
section[class$="_L"] > div.container > h1
{
    color: #2c4049 !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: #3a4972 !important; /* <<< Group-Nav top bar background colour */
}

section.slice_Gallery8_L {
  background-color: #ebebeb !important;
  background-image: none !important;
}

a.PassiveLink {
	pointer-events: none;
  	cursor: default;
}

.HideElement {display:none !important;}

@media (min-width:992px) {
  section.slice_Gallery3 {padding-bottom:20px;}
}
section.slice_Video {background-color:#3a4972;padding:10px 0 0;}
@media (min-width:1300px) {
  section.slice_Video {padding:30px 0 50px;}
}
section.slice_Video h1 {text-align:center;color:white;margin:0 0 20px;}
section.slice_Video div.embed-container { 
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; 
  width: 100%;max-width: 1170px; 
  margin:0 auto;} 
section.slice_Video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.slice_Video div.BannerImgCustomFields {display:none;}

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

header section.slice_Header_L div.nav-menubar div.container {max-width:1190px;}
body.logged_in_user header section.slice_Header_L div.nav-menubar div.container {max-width:1312px;}

/* Make sure the Hubb icons are loaded*/
@font-face {
  font-family: 'HubbIcons';
  src:  url('/Images/Content/2414/Templates/56328/fonts/HubbIcons.ttf') format('truetype');
}
aside div.InstagramWrapper {
  background-color:white; padding:0 5px; font-size:19px;
  width:100%; max-width:300px; margin:7px auto 0;
}
aside div.InstagramWrapper > a {display:block; text-align:center; padding:10px 5px;}
aside div.InstagramWrapper > a::before {
	content:'\e959';
  	font-family:HubbIcons;
  	color:#f05356;
  	display:inline-block; font-size:24px; line-height:1;
  	position:relative; top:3px; right:10px;
}
@media (max-width:767px) {
  aside div.InstagramWrapper {border:1px solid #dddddd;}
}