/*
   Style Over-Ride file for Revelation OPTIONS 1,2 & 5 TRIAL SITE template. Version 28.Feb.2017
   Put/edit CSS styles in here that are specific to a customer.

   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. We do have styles in here to
   change the colour of buttons in slices, as these are not so easy for customers
   to change. */

/* ############ 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:  225px !important; /* <<< mobile logo width */
    height: auto !important;
}
header.ActivateFixedPosition {margin-top: 92px !important;} /* <<< header height - 1px. Needed if header is sticky */
@media(min-width:467px){header .logo-icon img
{
    width:  250px !important; /* <<< tablet logo width */
    height: auto !important;
}
    header.ActivateFixedPosition {margin-top: 108px !important;} /* <<< header height - 1px. Needed if header is sticky */
}
@media(min-width:1150px){header .logo-icon img
{
    width:  303px !important; /* <<< desktop logo width */
    height: auto !important;
}
    header.ActivateFixedPosition {margin-top: 127px !important;} /* <<< header height - 1px. Needed if header is sticky */
}
/* 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: 2px !important; /* <<< gap from top for desktop */
    margin-bottom: 0 !important; /* <<< gap from bottom for desktop */
}}
@media(min-width:1150px){header div.logo-container
{
    margin-top: 20px !important; /* <<< gap from top for desktop */
}}

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

/* ############ Desktop/Mobile menu hover-over text-link color, top-link icons colour, footer email-link text color */
header i::before,
header li:hover > a,
header li:hover > a > a
{
    color: #8800b5 !important; /* <<< header/footer icon/text-link color */
}

footer .footer-column-3 a
{
    color: #ffc800 !important; /* <<< header/footer icon/text-link color */
}

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

/* ############ 3 Big Button colours */
section[class^="slice_WhatsOn3Buttons"] a.button1,
section.slice_content_page aside a.button1
{
    background-color: #8800B5 !important; /* <<< Green/left/top big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button2,
section.slice_content_page aside a.button2
{
    background-color: #eb3838 !important; /* <<< Red/middle big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button3,
section.slice_content_page aside a.button3
{
    background-color: #008E03 !important; /* <<< Blue/right/bottom big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button4,
section.slice_content_page aside a.button4
{
    background-color: #db8c22 !important; /* <<< Orange big button (if there is a 4th 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: #8800b5 !important; /* <<< slide show button background color */
    border-color: 	  #8800b5 !important; /* <<< slide show button border color */
}
/* Slide show inactive round pager buttons */
section[class*="Slides"] a.bx-pager-link
{
    background-color: #61747b !important; /* <<< slide show inactive round button color */
    border-color: 	  #61747b !important; /* <<< slide show inactive round button border color */
}

/* ############ Service Times and Location logos */
section[class^="slice_ServiceText"] div.block2-1::after,
section[class^="slice_ServiceText"] div.block2-2::after
{
    color: #008e03 !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,
section[class$="_L"] > h1,
section[class$="_L"] > div.container > h1
{
    color: #2c4049 !important; /* <<< a *dark* text colour, suitable for a *white* background */
}
section.slice_Header_D .logo-name a,
section[class$="_D"] > h1,
section[class$="_D"] > div.container > h1
{
    color: white !important; /* <<< a *light* text colour, suitable for a *dark* 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 */
}

/* ############ Button colors of:
   "Welcome Slice" in the free Option 1 & 2 templates,
   "Church for the community" button on the trial site,
   "piano" button on the trial site */
section.slice_WelcomeText_L a.button,
section.slice_JoinUsPiano a:hover
{
    background-color: #129dc0 !important; /* <<< background colour here */
    border-color: #129dc0 !important; /* <<< border colour here */
}
section.slice_WelcomeText_L a.button2,
section.slice_CommunityText_L a.button
{
    color: #008e03 !important; /* <<< text color */
    border-color: #008e03 !important; /* <<< border colour here */
}
section.slice_WelcomeText_L a.button2:hover,
section.slice_CommunityText_L a.button:hover
{
    color: white !important; /* <<< text color */
    background-color: #008e03 !important; /* <<< background colour here */
}
/* ############ Various background colours */
header section
{
    background-color: white !important; /* <<< header background colour here */
}
footer section
{
    background-color: #364049 !important; /* <<< footer background colour here */
}
section.slice_WelcomeText_L,
section.slice_CommunityText_L
{
    background-color: white !important; /* <<< Welcome text background colour here */
}
section.slice_ServiceTextEB_L .blocks
{
    background-color: #f5f5f5 !important; /* <<< Service and Location text background colour here */
}

/* ############ Extra icon using a background image */
footer i.MeetUp::after
{
  /* set colors to transparent to hide facebook icon, and put the image in as a background image and set the size to "contain" */
  background: transparent url(../images/MeetUp.png) no-repeat !important;
  background-size: contain !important;
  color: transparent !important;
  /* replace border with padding to keep size exactly the same, but padding allows a background image to be seen. */
  padding: 8px !important;
  border: none !important;
}

footer div.FooterSafeGuarding {
	text-align:center; width:100%; padding:0 10px 40px;
}
footer div.FooterSafeGuarding h1 {font-size:24px; line-height:1; margin:0 0 10px;}
footer div.FooterSafeGuarding a {color:#ffc800;}

footer div.FooterSafeGuarding.BottomLinks {
	clear:both;
  padding:30px 10px 10px;
  font-size:15px;
}
footer div.FooterSafeGuarding.BottomLinks a {color:white;white-space:nowrap;}
footer div.FooterSafeGuarding.BottomLinks a::after {
  display:inline-block;
  content:'|';
  padding:0 10px;
}
footer div.FooterSafeGuarding.BottomLinks a:last-child::after {
  content:'';
}
footer div.FooterSafeGuarding.BottomLinks a:hover {color:#ffc800;}
footer section.slice_FooterTop_D {padding-bottom:0;}
footer section.slice_Footer_D div.footerbar a[id] {display:none;}

@media (min-width:768px) {
  section.slice_content_page {background-color:white;}
  section.slice_content_page nav table.group-nav {border:1px solid #dddddd;}
}
@media (min-width:992px) {
  section.slice_content_page {border-top:1px solid #dddddd;}
}

.HideElement {display:none !important;}
section.slice_CommunityText_L.NewsLetter {
	background-color:#f5f5f5 !important;
}
section.slice_CommunityText_L.NewsLetter a.button {margin:0;}

body.ArticleEditor table.TwoColumns50PC td,
section.slice_content_page div.main-content table.TwoColumns50PC td {width:50% !important;}