/* Style Over-Ride file for St Alfege. */

/* 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: 46px !important; 
}
@media(min-width:467px){header .logo-icon img
{ 
	height: 54px !important; 
}
}
@media(min-width:1400px){header .logo-icon img
{ 
	height: 74px !important; 
}
}
/* Gap between logo and top/bottom of screen  */
header div.logo-container 
{
	position: absolute; top:0; left:0; z-index:2;
	margin-top: 7px !important; /* <<< gap from top for mobile/tablet */
	margin-bottom: 0 !important; /* <<< gap from bottom for mobile/tablet */
	margin-left:5px !important;
}
@media(min-width:467px){
	header div.logo-container {margin-top: 3px !important;margin-left:10px !important;}
}
@media(min-width:1100px){
	header div.logo-container {margin-top: 5px !important;}
}
@media(min-width:1400px){
	header div.logo-container {
		position: static;
		margin-top: 20px !important; /* <<< gap from top for desktop */
		margin-bottom: 0 !important; /* <<< gap from bottom for desktop */
	}
}
@media(min-width:1500px){
header div.logo-container 
{
	margin-left:50px !important;
}}

@media(min-width:1100px) and (max-width:1800px){
  header section.Xslice_Header_L div.nav-menu {margin-top:70px;}
}

header ul.root_menu > li:first-child a:hover {opacity:0.7;}
header ul.root_menu a {text-align:left;}

/* ############ Mobile menu colours */
header section.slice_Header_L div.SlickNavCloseIcon
{
	color: #6661BB !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 li:hover > a
{
	color: #F73A2E !important; /* <<< header/footer icon/text-link color */
}
header .slice_Header_L .nav-menu ul.root_menu > li:last-child > a {padding-right:0;}

header .slice_Header_L .nav-menu ul.root_menu > li:last-child > a {
  padding-right:0;padding-top:15px; padding-left:15px; font-weight:400;
}

header a.search-close 
{
	color: white !important;  /* <<< Search box close icon */
}
/* extra fixes for the header */
header ul a {
	font-weight:500;
	line-height: 1 !important;
}
header section.slice_Header_L div.slicknav_menu ul.slicknav_nav a {padding: 10px 20px;}
header section.slice_Header_L {border-bottom:1px solid #bbbbbb;}

section.slice_ShopCatNav div.slicknav_menu ul.slicknav_nav a,
section.slice_ShopCatNav div.slicknav_menu ul.slicknav_nav a.slicknav_item  {padding: 0 20px;}

/* Fixes for input box issues */
body.OnSmallAppleDevice input[type="text"],
body.OnSmallAppleDevice textarea
{-webkit-appearance: none !important;}

/* Code for Shop HotPicks */
section.slice_ShopHotPicks h3 {width:100%;text-align:center; margin-top:20px;}
section.slice_ShopHotPicks img {width:auto !important; max-width:100%;}
section.slice_ShopHotPicks div.ShopModuleHotPicks {
	margin:10px 10px 40px;
}
section.slice_ShopHotPicks div.ShopModuleHotPicks > div:first-child,
section.slice_ShopHotPicks div.ShopModuleHotPicks > div:last-child {
	background-color: #ccffcc;
	border:1px solid #00ff00;
	border-radius:20px;
	padding:10px;		
}
section.slice_ShopHotPicks div.ShopModuleHotPicks > div:first-child table td:first-child,
section.slice_ShopHotPicks div.ShopModuleHotPicks > div:last-child table td:first-child {width:50%;padding-right:10px;}

@media (max-width:767px) {
	section.slice_ShopHotPicks div.ShopModuleHotPicks > div {width:100% !important; float:none !important;}
	section.slice_ShopHotPicks div.ShopModuleHotPicks > div:first-child {margin-bottom:20px;}
	section.slice_ShopHotPicks div.ShopModuleHotPicks > div:nth-child(2) {display:none;}
}

/* For big shops: Code to show the item type filter menu */
section.slice_ShopItemList div.ShopModuleItemsList span[id$="_ctlAZNavigator"] table { width: 100% !important;}
section.slice_ShopItemList div.ShopModuleItemsList span[id$="_ctlAZNavigator"] table tr:first-child td:first-child { display: initial; }
@media (max-width:767px) {
	section.slice_ShopItemList div.ShopModuleItemsList span[id$="_ctlAZNavigator"] table tr:last-child td {padding-top:10px;}
}
/* keep sorting ddls visible on the page. */
section.slice_ShopItemList div.ShopModuleItemsList > span[id$="_ctlAZNavigator"] > div.BelowTabs > div:last-child { display: block; }
section.slice_ShopItemList div.ShopModuleItemsList > span[id$="_ctlAZNavigator"] > div.BelowTabs > div:nth-child(2) { display: none; }

/* Fix reviews */
/* Star images in reviews */
section.slice_ShopItemList div.ShopModuleItemsList div.ItemsWrapper > div[id] div.ShopItemsRating img,
section.slice_ShopItemList div.ShopModuleItemsList div.ItemsWrapper > div[id] span img,
section.slice_ShopItemDetails div.ShopModuleItemReview img,
section.slice_ShopHotPicks table td:last-child img {display:inline;margin-bottom:4px;}

section.slice_ShopItemList div.ShopItemsRating {margin-top:5px;}
section.slice_ShopItemReviews div.ShopModuleItemReview {background-color:#eeeeee; padding:20px 10px;margin-bottom:20px;}
section.slice_ShopItemReviews h3 {word-break:break-all;}
section.slice_ShopItemReviews table td {width:auto !important;}
section.slice_ShopItemReviews div[id$=_pnlCommentForm] table td:first-child:not([colspan]) {text-align:right;padding-right:5px;}
section.slice_ShopItemReviews div.ShopModuleItemReview table.gridstyle table.gridstyle {border-collapse:collapse;border:1px solid #bbbbbb;margin-bottom:10px;}
section.slice_ShopItemReviews div.ShopModuleItemReview table.gridstyle table.gridstyle > tbody > tr > td {border:1px solid #bbbbbb;}
section.slice_ShopItemReviews div.ShopModuleItemReview img[src="/images/abusive.gif"] {display:block;margin-left:auto;}

/* Voucher codes */
section.slice_ShopCheckOut div#divVoucherCode {
	background-color:#eeeeee;
	padding:10px 10px 20px !important; 
	margin: 20px 0 0;
}
section.slice_ShopCheckOut div#divVoucherCode h2 {line-height:1; padding:0 !important;}
section.slice_ShopCheckOut div#divVoucherCode table[id$=_dgVouchers] {display:none;}
section.slice_ShopCheckOut div#divVoucherCode input.button {margin:5px 0 0 10px;}

/* Shop Items on Checkout page */
section.slice_ShopCheckOut table[id$=_dgCartPageItems] {margin:0 auto;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] table {background-color:#eeeeee;padding:3px;border:1px #bbbbbb solid !important;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] > tbody > tr:first-child {background-color:white;} /* empty row at top of the table */
section.slice_ShopCheckOut table[id$=_dgCartPageItems] hr {display:none;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] nobr {white-space:normal !important;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] ul {padding-left:20px;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] table td {width:auto !important;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] table td:last-child {vertical-align:bottom;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] img {max-width:150px;margin-right:5px;}
@media (max-width:467px) {
	section.slice_ShopCheckOut table[id$=_dgCartPageItems] img {max-width:80px;}	
	section.slice_ShopCheckOut table[id$=_dgCartPageItems] table {padding:0;}
	section.slice_ShopCheckOut table[id$=_dgCartPageItems] input.button	{padding:0 2px 2px;}
	section.slice_ShopCheckOut table[id$=_dgCartPageItems] table td {padding:1px;}
}

/* Fix My Orders page */
section.slice_ShopMyOrders input.SiteButton {margin-top:5px;}

/* Gift Aid stuff */
section.slice_ShopCheckOut div.gift-aid {padding:0 5px;}
section.slice_ShopCheckOut div.gift-aid input[type="checkbox"] { width: 20px; height: 20px; display: inline-block;}
section.slice_ShopCheckOut div.gift-aid input.date_text_box {width:auto;max-width:140px;}
section.slice_ShopCheckOut div.gift-aid label {display:inline;}
section.slice_ShopCheckOut div.gift-aid div#divConsentThisDonation,
section.slice_ShopCheckOut div.gift-aid div#divDeclineThisDonation {display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:flex-start;margin-top:10px;}
section.slice_ShopCheckOut div.gift-aid input {flex:none;}
section.slice_ShopCheckOut div.gift-aid div[id$=_pnlEnduringDeclaration] input[type="checkbox"] {position:relative; top:4px;margin-top:5px;}

/* My wallet stuff */
section.slice_ShopCheckOut div#divCardPaymentDetails table.gridstyle[id$=_tblWallet] {margin-top:5px;}
section.slice_ShopCheckOut div#divCardPaymentDetails table.gridstyle[id$=_tblWallet] td {text-align:center !important;}

/* Off line payments */
section.slice_ShopCheckOut input[type=checkbox][id$=_cbCardholderAddressSameAsDelivery] { width: 20px; height: 20px; display: inline-block;position:relative; top:4px;}

/* Fix donation editable price box */
section.slice_ShopItemList div.ShopModuleItemsList input[type=text][id$=_price] {width:55px !important;}


/* Donation items fix in shop items list */
section.slice_ShopItemList div.ShopModuleItemsList div.ItemsWrapper input[type=text] 
{width:75px !important; margin-left:2px;}

/* Fixes for transfered header and footers */
footer .sitebutton, footer .button { display: inline-block; margin-top: 10px; margin-right: 5px; padding: 10px 20px; border-radius: 25px; font-size: 20px; font-weight: 400; line-height: 1; text-align: center; text-decoration: none; color: white; background-color: #73A5AE; border: none; }
footer .sitebutton:hover, footer .button:hover { opacity: 0.7; color: white; }

/* Stripe shop fixes */
section.slice_ShopCheckOut table#tblPaymentDetails div.new-card-details .whats-this {
  font-size:12px;
  line-height:1.5;
}
body .ui-tooltip { line-height:1.2 !important;}

section.slice_ShopCheckOut table[id$="_dgOrders"] + p + table#tbMain,
section.slice_ShopMyOrders table#tbMain {
  background-color:#ffcccc;
}


/*
################## 
# Start of Slice #
################## 
*/
.slice_FooterTop_L { 
  color: white; font-size: 12.75px; line-height: 1.76471; font-weight: 400; 
  background-color: #301445; text-align: center; padding-top: 40px; padding-bottom: 30px; 
}
.slice_FooterTop_L .footer-column-1, .slice_FooterTop_L .footer-column-2, .slice_FooterTop_L .footer-column-3 { width: 97.42268%; float: left; margin-left: 1.28866%; margin-right: 1.28866%; }
@media (min-width: 1100px) { .slice_FooterTop_L .footer-column-2 { width: 72.42268%; float: left; margin-left: 1.28866%; margin-right: 1.28866%; }
  .slice_FooterTop_L .footer-column-1 { width: 22.42268%; float: right; margin-left: 1.28866%; margin-right: 1.28866%; } }
.slice_FooterTop_L .footer-column.footer-column-1 { margin-bottom: 20px; }
.slice_FooterTop_L .footer-column.footer-column-1 a.button, .slice_FooterTop_L .footer-column.footer-column-1 div.ArticleBody { display: inline-block; }
.slice_FooterTop_L .footer-column.footer-column-1 a.button { margin: 0 10px 0 0; }
.slice_FooterTop_L .footer-column.footer-column-1 a.footer_icon_block { display: inline-block; margin-left: 0; margin-right: 0; }
.slice_FooterTop_L .footer-column.footer-column-1 a.footer_icon_block i::after { font-size: 20px; border-radius: 20px; transition: opacity 500ms linear; background-color: white; border: 10px solid white; position: relative; top: 2px; }
.slice_FooterTop_L .footer-column.footer-column-1 a.footer_icon_block:hover i::after { opacity: 0.7; }
.slice_FooterTop_L .footer-column.footer-column-1 a.footer_icon_block i.icomoon-icon-facebook::after { color: #3b5998; }
.slice_FooterTop_L .footer-column.footer-column-1 a.footer_icon_block i.icomoon-icon-twitter::after { color: #1da1f2; }
@media (min-width: 1100px) { .slice_FooterTop_L .footer-column.footer-column-1 { text-align: right; margin-bottom: 0; } }
@media (min-width: 1100px) { .slice_FooterTop_L .footer-column.footer-column-1 { margin-left: 0; } }
.slice_FooterTop_L .footer-column.footer-column-2 img, .slice_FooterTop_L .footer-column.footer-column-2 div.FooterAddressWrapper { float: none; }
.slice_FooterTop_L .footer-column.footer-column-2 img { margin: 10px 0 5px; }
.slice_FooterTop_L .footer-column.footer-column-2 a { color: white; }
.slice_FooterTop_L .footer-column.footer-column-2 a:hover { text-decoration: none; }
@media (min-width: 1100px) { .slice_FooterTop_L .footer-column.footer-column-2 { text-align: left; margin-right: 0; }
  .slice_FooterTop_L .footer-column.footer-column-2 img { display: block; margin: 0 50px 0 0; }
  .slice_FooterTop_L .footer-column.footer-column-2 img, .slice_FooterTop_L .footer-column.footer-column-2 div.FooterAddressWrapper { float: left; } }
@media (min-width: 467px) { .slice_FooterTop_L { font-size: 14.16667px; } }
@media (min-width: 768px) { .slice_FooterTop_L { font-size: 15.58333px; } }
@media (min-width: 992px) { .slice_FooterTop_L { font-size: 16px; } }

/*
################## 
# Start of Slice #
################## 
*/
.slice_Footer_L { background-color: #301445; font-size: 10.83333px; line-height: 19.5px; }
.slice_Footer_L .footerbar { width: 97.42268%; float: left; margin-left: 1.28866%; margin-right: 1.28866%; }
.slice_Footer_L .footerbar { border-top: 1px solid #6F5B7E; color: white; font-weight: 400; text-align: center; padding: 40px 0 25px; }
.slice_Footer_L .footerbar a { display: inline-block; color: white; text-decoration: none; }
.slice_Footer_L .footerbar a:hover { color: #f73a2e; }
.slice_Footer_L .footerbar a.footer { float: left; width: 100%; border: none; color: transparent; background-image: url(../images/LogoCI.png); background-repeat: no-repeat; background-position: center center; background-color: transparent; height: 31px; margin-bottom: 15px; }
.slice_Footer_L .footerbar a.footer:hover { opacity: 0.7; }
.slice_Footer_L .footerbar a#footer_mobile::after, .slice_Footer_L .footerbar a#footer_copyright::after, .slice_Footer_L .footerbar a#footer_tc::after, .slice_Footer_L .footerbar a#footer_privacy::after, .slice_Footer_L .footerbar a#footer_cookies::after { content: "|"; padding: 0 5px; }
.slice_Footer_L .footerbar span#footer_charity {width: 100%; margin-top: 15px; }
.slice_Footer_L .footerbar span:last-child:not([id]) { display: block; padding-top: 25px; }
@media (min-width: 992px) { .slice_Footer_L .footerbar { padding: 40px 0 30px; }
  .slice_Footer_L .footerbar a.footer { position: relative; top: -12px; width: 148px; margin: 0; }
  .slice_Footer_L .footerbar a#footer_mobile::after, .slice_Footer_L .footerbar a#footer_copyright::after, .slice_Footer_L .footerbar a#footer_tc::after, .slice_Footer_L .footerbar a#footer_privacy::after, .slice_Footer_L .footerbar a#footer_cookies::after { padding: 0 10px; }
  .slice_Footer_L .footerbar span#footer_charity {float: right; width: auto; text-align: right; margin: 0; } }
@media (min-width: 768px) { .slice_Footer_L { line-height: 14.3px; font-size: 11.91667px; } }
@media (min-width: 992px) { .slice_Footer_L { font-size: 13px; line-height: 15.6px; } }


footer section,
footer section a {font-weight:300 !important;}
footer div.FooterCharity {font-size:12px;}

footer div.footer-column.footer-column-2 {
  	width:100% !important;
  	padding:0 15px !important;
    margin:0 !important;
	display:flex !important;
  	flex-flow:row nowrap;
  	justify-content:space-between;
  	align-items:flex-start;
}

footer div.FooterAddressWrapper {flex-basis: 1000px;}
footer div.FooterAddressWrapper span.SA {color:#F8DA60;}

@media(max-width:1100px){
footer div.footer-column.footer-column-2 {
  flex-flow:column nowrap;
  align-items:center;
  justify-content:flex-start;
 }
  footer div.FooterAddressWrapper {flex-basis:auto; padding:20px 0;}
}

footer section a.footer_icon_block.facebook {
  font-size:20px;
  font-weight:700 !important;
  display:block;
  margin:0 !important;
  background-color:white;
  color:#301445 !important;
  padding:10px 10px 9px !important;
  line-height:1;
  border:none !important;
  border-radius:50px;
}
footer section a.footer_icon_block.facebook:hover {text-decoration:none;}

/* Set shop css variable */
:root {
  --ShopCheckoutUpdateAug2022color: #6661BB;
}