/* Style Over-Ride file. Put styles in here that are specific to a customer. */

/* Size of logo */
.slice_Header_D .logo-icon img,
.slice_Header_L .logo-icon img,
.slice_Header_T .logo-icon img
{
    width: 29px !important; height: auto !important; /* <<< mobile phone logo size*/
}
@media (min-width: 467px){
    .slice_Header_D .logo-icon img,
    .slice_Header_L .logo-icon img,
    .slice_Header_T .logo-icon img
    {
        width: 43.5px !important; height: auto !important; /* <<< tablet logo size*/
    }}
@media (min-width: 992px){
    .slice_Header_D .logo-icon img,
    .slice_Header_L .logo-icon img,
    .slice_Header_T .logo-icon img
    {
        width: 58px !important; height: auto !important; /* <<< desktop logo size*/
    }}

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

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

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

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

/* 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: #666666 !important; /* <<< Clock and Location icon colour */
}

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

/* CSS to allow a normal web-office image to be used as a css background. */
section.slice_Children {
  background-image: url(../../../1040436.jpg) !important;
}

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

section.slice_SlidesFullWidth.ChildrensSS div.slideTitle,
section.slice_SlidesFullWidth.ChildrensSS div.slideText,
section.slice_SlidesFullWidth.ChildrensSS a.slideButton {color:#333333 !important;}
section.slice_SlidesFullWidth.ChildrensSS a.slideButton {border-color:#333333 !important;}

/* Code to make slide-shows look better on mobile screens */
section.slice_SlidesFullWidth,
section.slice_WhatsOnSlidesEB_L {overflow-x: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-x:hidden; /* hide anything that pokes outside */
	}
  	section.slice_WhatsOnSlidesEB_L div.bannerSlides {
		width: 150%; /* double the width, which doubles the height, and then translate so we see the middle 50% */
		transform: translateX(-16.6667%);
		overflow-x: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-x:hidden; /* hide anything that pokes outside */
	}
	section.slice_WhatsOnSlidesEB_L 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: 16.6667%;
		right: 16.6667%;
		width: 66.6666%;
		overflow-x:hidden; /* hide anything that pokes outside */
	}
  section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper {margin-bottom:50px;}
  section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper div.bx-pager a {width:15px;height:15px;}
  
  section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper a.bx-prev {left:25%;}
  section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper a.bx-next {right:25%;}
  
  section.slice_WhatsOn3Buttons_L {padding:30px 10px 0;}
  section.slice_WhatsOn3Buttons_L div.bannerSlides {margin-left:0; margin-right:0;}
  section.slice_WhatsOnSlidesEB_L {padding-bottom:0;}
  section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper a.bx-prev {left:16.6667%;}
  section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper a.bx-next {right:16.6667%;}
  
}

section.slice_SlidesFullWidth.ChildrensSS div.slideText {margin-top:0 !important;}
section.slice_SlidesFullWidth.ChildrensSS div.slideTitle {
  	text-shadow:0 0 10px #ffffff !important;
}
section.slice_SlidesFullWidth.ChildrensSS a.slideButton {background-color:white !important;}
section.slice_SlidesFullWidth.ChildrensSS div.slideText {
  padding:5px 20px 10px !important;
  border-radius:10px;
  background-color:rgba(255,255,255,0.7) !important;
  font-weight:700 !important;
  text-shadow:none !important;
} 

@media(max-width:991px){
  section.slice_content_page div.main-content table.MobileFormatted {
    border-collapse:collapse !important;
    width:100% !important;
  }
  section.slice_content_page div.main-content table.MobileFormatted td {
  	text-align:center !important;
    border:1px solid #dddddd !important;
    padding:5px 1px !important;
    font-size:13px !important;
    width:auto !important;
  }
  section.slice_content_page div.main-content table.MobileFormatted td span {
    font-size:13px !important;
  }
  section.slice_content_page div.main-content img {margin-bottom:10px;}
}

header div.ScrollDown {display:none;}
@media(min-width:992px){
  header div.ScrollDown {
    display:inline-block;
    background-color:red; color:white; font-weight:700; font-size:20px;
    padding:10px; border-radius:10px;
    position:fixed; z-index:4;
    top:10px;
    left:43%;
  }
}