/* Style Over-Ride file for Trinity template. */


.video-wrap {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
height: 0;}

.video-wrap iframe,
.video-wrap object,
.video-wrap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* Size of LOGO image */


header .logo-icon img
{ 
	width:  auto !important; 
	height: 45px !important; /* <<< mobile logo height */
}
@media(min-width:467px){header .logo-icon img
{ 
	height: 70px !important; /* <<< tablet logo height */
}
}
@media(min-width:992px){header .logo-icon img
{ 
padding-top:10px;	
  height: 75px !important; /* <<< desktop logo height */
}
}
/* Gap between logo and top/bottom of screen  */
header div.logo-container 
{
	margin-top: 5px !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: 0 !important; /* <<< gap from top for desktop */
	margin-bottom: 0 !important; /* <<< gap from bottom for desktop */
}}
@media(min-width:1400px){header div.logo-container 
{
	margin-top: 5px !important; /* <<< gap from top for wide desktop */
	margin-bottom: 0 !important; /* <<< gap from bottom for wide desktop */
}}
/* To make more space in the header adjust this */
header section.slice_Header_L div.nav-menu {margin-top:95px;}
@media(min-width:1500px){
  header section.slice_Header_L div.nav-menu {margin-top:60px;}
}

/* extra fixes for the header */
header ul a {
	line-height: 1 !important;
}
header section.slice_Header_L div.slicknav_menu ul.slicknav_nav a {padding: 10px 20px;}
header .slice_Header_L .nav-menu ul.root_menu > li:last-child > a {padding-right:5px;}
header div.top-link-wrapper div.search-form {position:relative;top:1px;}

/* ############ 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: #e01b23 !important; /* <<< colour of the menu icon */
}
header section.slice_Header_L div.SlickNavCloseIcon
{
	color: #e01b23 !important; /* <<< colour of the menu close icon */
}

/* ############ Search box background colour */
header div.search-overlay
{
	background-color: #e01b23 !important; /* <<< Search box background colour */
}
header a.search-close 
{
	color: white !important;  /* <<< Search box close icon */
}
i.journey-icon-search::before {top:0;} /* top links */
@media (max-width:991px) {i.journey-icon-search::before {top:2px;}}

/* ############ slide show caption button, and active/hover round pager button colour */ 
section[class*="Slides"] a.bx-pager-link:hover, 
section[class*="Slides"] a.bx-pager-link.active
{	
	background-color: transparent !important; /* <<< slide show button background color */
	border-color: 	  white !important; /* <<< slide show button border color */
} 
/* Slide show inactive round pager buttons */
section[class*="Slides"] a.bx-pager-link
{	
	background-color: #f5f5f5 !important; /* <<< slide show inactive round button color */
	border-color: 	  #f5f5f5 !important; /* <<< slide show inactive round button border color */
}

/* ############ Top bar of Group-Nav on the content page */
section.slice_content_page aside nav td.boxout_header_middle,
section.slice_content_page aside nav div > div {border-bottom:1px solid #d5d5d5;}
section.slice_content_page aside nav td.boxout_header_middle a
{
	background-color: white !important; /* <<< Group-Nav top bar background colour */
	text-transform:uppercase;
}

/* Rows of 3 buttons */
section.Slice_Buttons3 {background-color: #f5f5f5; padding:40px 10px 50px;}
section.Slice_Buttons3 div.WrapperButtons3 {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; margin:0 auto;}
section.Slice_Buttons3 div.WrapperButtons3 a,
section.Slice_Buttons3 div.WrapperButtons3 div {
	display:block; 
	font-size:22px;
	line-height:1.5;
	white-space:nowrap;
}
section.Slice_Buttons3 div.WrapperButtons3 a {color:#525050;}
section.Slice_Buttons3 div.WrapperButtons3 a:hover {color:#e01b23;opacity:1;}
section.Slice_Buttons3 div.WrapperButtons3 div {padding:0 20px;}
@media (max-width:467px) {
	section.Slice_Buttons3 div.WrapperButtons3 {flex-flow:column nowrap;}
	section.Slice_Buttons3 div.WrapperButtons3 a {line-height:2;}
	section.Slice_Buttons3 div.WrapperButtons3 div {display:none;}	
}

/* slice Testimony */
section.slice_Testimony {
	background-color:#e01b23;
	color:#f5f5f5;
	text-align:center;
	font-style:italic; 
	font-weight:400;
	line-height:1.71;
	padding: 0 20px 60px;
}
  @media (min-width:768px) {
	  section.slice_Testimony {
		padding-top: 0;
		padding-bottom: 70px;
  }}
  @media (min-width:1300px) {
	  section.slice_Testimony {
		padding-top: 0;
		padding-bottom: 80px;
  }}
section.slice_Testimony div.title2 {max-width:900px; margin:0 auto; font-size:28px;}
section.slice_Testimony div.title3 {color:#f5f5f5;font-size:22px;margin-top:5px;}
section.slice_Testimony img {
  display:block;margin:0 auto;border:3px solid #f5f5f5;border-radius:20px;position:relative;
  top:-25px; width:auto;height:160px;
}
@media (max-width:767px) {
	section.slice_Testimony div.title2 {font-size:22px;}
	section.slice_Testimony div.title3 {font-size:20px;}	
}

/* slice Welcome */
section.slice_Welcome {
	background-color:white;
	color:#525050;
	text-align:center;
	font-weight:400;
	line-height:1.36;
	padding: 30px 10px 0;
}
  @media (min-width:768px) {
	  section.slice_Welcome {
		padding-top: 35px;
  }}
  @media (min-width:1300px) {
	  section.slice_Welcome {
		padding-top: 40px;
  }}
section.slice_Welcome div.title3 {margin:20px 1.28866% 0;background-color:#f5f5f5;padding:20px 40px;font-size:22px;}
@media (max-width:767px) {
	section.slice_Welcome div.title3 {font-size:20px;padding:10px;}	
}

/*
################## 
# Start of Slice #
################## 
*/
.slice_WelcomeArticles { background-color: white; text-align: center; padding: 25px 10px; }
.slice_WelcomeArticles .article_cards { clear: both; }
.slice_WelcomeArticles .article_cards > div { width: 97.42268%; float: left; margin-left: 1.28866%; margin-right: 1.28866%; }
@media (min-width: 467px) { .slice_WelcomeArticles .article_cards > div { width: 47.42268%; float: left; margin-left: 1.28866%; margin-right: 1.28866%; } }
@media (min-width: 768px) { .slice_WelcomeArticles .article_cards > div { width: 30.75601%; float: left; margin-left: 1.28866%; margin-right: 1.28866%; } }
@media (min-width: 768px) { .slice_WelcomeArticles { padding: 25px 0; } }
@media (min-width: 992px) { .slice_WelcomeArticles { padding: 25px 0; } }
.slice_WelcomeArticles .article_cards { text-align: center; display: flex; flex-flow: row wrap; justify-content: center; }
.slice_WelcomeArticles .article_cards > div { background-color: #fff; margin-bottom: 30px; display: flex; flex-direction: column; }
.slice_WelcomeArticles .article_cards > div .articleListImage a { display: block; margin: 0 auto; }
.slice_WelcomeArticles .article_cards > div .articleListImage a:hover { opacity: 0.7; }
.slice_WelcomeArticles .article_cards > div .articleListImage a img { display: block; width: 100%; }
.slice_WelcomeArticles .article_cards > div .articleListTitle { background-color: #fff; padding: 15px 10px 5px; font-size: 20px; line-height: 24px;}
.slice_WelcomeArticles .article_cards > div .articleListTitle a { color: #e01b23; font-weight: 600; }
.slice_WelcomeArticles .article_cards > div .articleListTitle a:hover { opacity: 0.7; }
.slice_WelcomeArticles .article_cards > div .articleListSummary { background-color: #fff; color: #525050; padding: 10px 20px; font-size: 17px; line-height: 1.333; font-weight: 400;}
@media (min-width: 992px) { .slice_WelcomeArticles .article_cards > div .articleListSummary { font-size: 18px; } }
.slice_WelcomeArticles .article_cards > div .articleListLink a { 
	display: inline-block; font-size: 18px; line-height: 1.333; font-weight: 400; color: #1b76bd; background-color: #fff;
	text-decoration:underline;
}
.slice_WelcomeArticles .article_cards > div .articleListLink a:hover { color:#e01b23;}

/* Banner Image code */
section.slice_BannerImage {
  position:relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	padding: 200px 10px;
}
@media(max-width:992px){
	section.slice_BannerImage {padding:100px 10px;}
}
section.slice_BannerImage h1 {
  position:relative; z-index:0;
	line-height:1.2; 
	margin:0; 
	text-align:center;
	color: white;
	font-size: 50px;
	text-transform:uppercase;
  background-color: #e01b23;
display: inline;
font-weight: 200;
padding-left: 10px;
padding-right: 10px;
}
@media(max-width:992px){
	section.slice_BannerImage h1 {font-size: 40px;}
}
@media(max-width:467px){
	section.slice_BannerImage h1 {font-size: 30px;}
}
section.slice_BannerImage div.BannerImgCustomFields {display:none;}
section.slice_BannerImage div.container {text-align:center;}
section.slice_BannerImage div.OverlayTint { 
  position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;
  background-color:rgba(0,0,0,0.4);
}
section.slice_content_page.AddTopBorder {border-top:1px solid #dddddd;}

/* Content page spacing */
section.slice_content_page div.main-content {padding-top:0;}
@media(max-width:992px){
	section.slice_content_page div.main-content {padding-top:20px;}
}

section.slice_content_page aside div.ContentPageImage {text-align:center;line-height:1;font-size:1px;}
section.slice_content_page aside div.ContentPageImage a {
  display:block; margin:10px auto 0;line-height:1;font-size:1px;}
section.slice_content_page aside div.ContentPageImage img {
  width:100%; max-width:263px; display:block;
}
@media (max-width:768px) {
  section.slice_content_page aside div.ContentPageImage a {display:inline-block;}
}
section.slice_content_page aside div.ContentPageImage:last-child {margin-bottom:10px;}
/* above 1200px make the image exactly 263px so it appears crisp */
@media (min-width:1200px) {
  section.slice_content_page aside div.ContentPageImage img {width:263px;}
}

/* Code to make slide-shows look better on mobile screens */
section.slice_SlidesFullWidth {overflow:hidden;} /* hide anything that pokes outside */
@media (max-width:767px) {
	section.Xslice_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:hidden; /* hide anything that pokes outside */
	}
	/* Adjust the captions back again, so they look normal */
	section.Xslice_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:hidden; /* hide anything that pokes outside */
	}
}
@media (max-width:467px) {
	section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager {
	  display:block;bottom:5px;
	}
}

/* Fix various issues */
div.endis-jquery-ui div#divOverlay {font-size:17px;line-height:1.3;}
body.OnSmallAppleDevice input {-webkit-appearance: none;}
body.ArticleEditor img.module_icon {width:auto !important;}
section.slice_Footer_L div.footerbar span:last-child:not([id]),
section.slice_Footer_D div.footerbar span:last-child:not([id]) { display: block; padding-top: 25px; }

/* prevent text-overwriting when desktop menus wrap around */
section.slice_Header_D ul.root_menu ul,
section.slice_Header_L ul.root_menu ul,
section.slice_Header_T ul.root_menu ul {z-index:4;}

section.slice_Header_L div.nav-menu ul.root_menu > li ul li.has_sub_menu::after,
section.slice_Header_L div.nav-menu ul.root_menu > li:last-child > ul li.has_sub_menu::before, 
section.slice_Header_L div.nav-menu ul.root_menu > li:nth-last-child(2) > ul li.has_sub_menu::before
{color:#dd1c21;}

/* Slide-show bottom buttons */ 
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager {bottom:30px;}
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager a.bx-pager-link {
	width:18px;height:18px;border-radius:9px;border-width:2px;margin:0 6px;
}
@media (max-width:1200px) {
	section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager {bottom:10px;}
	section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager a.bx-pager-link {width:14px;height:14px;border-radius:7px;}
}

/* Fix system page ul lists */		
section.slice_system_page div.system_content ul {
  list-style-type: disc;
  padding-left:40px;
}

/* Fix the new calendar page pop-up */
div.dialog-content.calendar-event-content > h4,
div.dialog-content.calendar-event-content > h4 a.event-location-link {
	display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;
}
/* make sure these are not set */
html,body {height:initial;}

/* Extra icon using a square background image */
footer i.icomoon-icon-XXXXXX.ImageSocialMediaIcon::after
{ /* Replace url below with actual url of square icon image */
  background-image: url(/Images/Content/1495/Templates/46170/images/CommissionLogo.png);
}

section.slice_Welcome {font-size:20px;}
section.slice_Welcome img {width:100%;max-width:756px;display:block;margin:0 auto;}

/* Bits of a shop are not covered by a shop template. These inculde:

1) T&C's page.
2) Credit Card "why is this safe" and "security number on back of card" pop-ups.

They are set by the template in use for system pages. and not by the shop template.
So the code below should be added to the system page template.
This code assumes the system page template JS is correctly adding the "_shop_termsandconditions_aspx" etc. class to the body tag.
*/
body.system_popup { 
	padding-left: 10px !important; 
  	background-color:white !important;
}
body.system_popup input[type=submit],
body.system_popup input[type=button] {
  	margin-top:5px !important;
  	padding:5px 20px;
	background-color:#000000 !important;
  	color: white;
  	border:none;
  	border-radius:5px;
  	width:auto !important;
}
body.system_popup._shop_termsandconditions_aspx table.pagebox_homepage.pagebox blockquote { 
	margin: 0 10px 0 0 !important; 
}
body.system_popup._shop_termsandconditions_aspx table.pagebox_homepage.pagebox h1 {font-size:32px;}
body.system_popup._shop_termsandconditions_aspx table.pagebox_homepage.pagebox h3 { 
	padding-top: 30px !important; 
}
body.system_popup._shop_termsandconditions_aspx table.pagebox_homepage.pagebox p { 
	margin: 0 !important; 
	padding: 0 !important; 
}
body.system_popup._shop_termsandconditions_aspx table.pagebox_homepage.pagebox table td:last-child { 
	text-align: left !important; 
	padding-left: 10px !important;
}

body._myarea_walletitem_aspx input[type=submit] {width:auto !important}
body._myarea_walletitem_aspx div[id$=_pnlEdit] > table {width:96% !important;}
body._myarea_walletitem_aspx div[id$=_pnlEdit] table td,
body._myarea_walletitem_aspx div[id$=_pnlView] table td {padding:2px !important;}

body._shop_checkout_whyisthissafe_aspx table.pagebox_homepage.pagebox {width:100% !important;}
body._shop_checkout_whyisthissafe_aspx table.pagebox_homepage.pagebox td {padding:5px 2px !important;}

body._shop_checkout_explaincardcsv_aspx table.pagebox_homepage.pagebox td {padding:5px 2px !important;}
/* end of shop code */

footer section.slice_FooterTop_L {background-color:#202020;color:white;text-align:left;}
footer section.slice_FooterTop_L ul {list-style-type:none;margin:0;padding:0;}

footer section.slice_Footer_L {background-color:#292929;}
footer section.slice_Footer_L div.footerbar {border-top:none;}
footer section.slice_Footer_L div.footerbar a,
footer section.slice_Footer_L div.footerbar span {color:#c7c7c7 !important;}

footer section.slice_FooterTop_L a.footer_icon_block i::after { 
  display:inline-block;margin-bottom:30px;
  font-size: 20px; color: white; border-radius: 4px; 
  background-color: #5F5F5F; border: 8px solid #5F5F5F; }
footer section.slice_FooterTop_L a.footer_icon_block:hover i::after 
{ background-color: black; border-color: black; }

body.guest_user header section.slice_Header_L a.Bookings {display:none;}

section.slice_content_page div.main-content.Wide {
  width:100%;margin-left:0;margin-right:0;float:none;
}


.slice_Header_L .nav-menu a {font-family: barlow, sans-serif;
}

/* Fix the side-bar with images and extra article */
section.slice_content_page aside div.LatestArticle {margin-bottom:20px;}
section.slice_content_page aside div#ArticleBody {width:100%; max-width:300px; margin:0 auto;}
section.slice_content_page aside div#ArticleBody h3 {margin:0;padding:0;}

/* Side bar article list */
section.slice_content_page aside div.SideBarArticleList div.articleListTitle {
  margin-top:10px;line-height:1.25;
}
section.slice_content_page aside div.SideBarArticleList div.articleListTitle a:hover {
  color:#2678b8;
}
section.slice_content_page aside div.SideBarArticleList div.articleListDate {
  font-size:smaller;line-height:1.3;font-weight:600;
}

div._user_registration_aspx div#GroupNotesEnclosingDiv > div, 
div._user_registration_aspx div[id$='_divCaptchaWrapper'] {background-color:white !important;}

div.enewsSignUp div#GroupNotesEnclosingDiv div[id$="$outerdiv_ctls_consentfields"] {
  float:none;
  clear:both;
  padding:10px 0 0;
}
div.enewsSignUp div#GroupNotesEnclosingDiv ul.consent-questions {margin:0;padding:0;}
div.enewsSignUp div#GroupNotesEnclosingDiv input[type="checkbox"] {
  width:18px;
  height:18px;
  margin:0;
  position:relative;
  top:3px;
}

div.enewsSignUp div#GroupNotesEnclosingDiv input[type="checkbox"]:focus {
	box-shadow:none;
  	outline:none;
}

/* Fix system page titles */
section.slice_system_page div.systemPageContent h1 {
	display:block; text-align:center; margin-bottom:20px;
}

/* Code for the Seeker Boxes */
section.SeekerBox {
  position:fixed;right:20px;bottom:20px;width:275px;
  border-radius:10px;
	background-color:white;
  padding:15px;
  box-shadow: 0px 0px 20px -5px rgba(0,0,0,.12);
  line-height:1.2;
}
section.SeekerBox div.FullSeekerArticle {display:none;}
section.SeekerBox div.SmallSeekerArticle a.HeadLink {
  display:block; background-color:transparent; font-size:0; padding:0;
}
section.SeekerBox img.Photo {
  position:absolute; right:10px; top:-60px;
  width:70px;height:70px;border-radius:50px;border:2px solid #a3b4ba;
  background-color:#a3b4ba;
  display:block;
}
section.SeekerBox img.Close {
	width:22px;position:absolute; left:21px; bottom:21px; cursor:pointer;
}
section.SeekerBox.Shrink img.Close {
	left:10px; bottom:10px;
}
section.SeekerBox.BigBox img.Close {
	width:auto; left:initial; bottom:initial; right:5px; top:5px;
}
section.SeekerBox.BigBox img.Close.Outer {display:none;}
section.SeekerBox b,
section.SeekerBox strong {font-weight:700;}

section.SeekerBox div.SmallSeekerArticle a {
  display:inline-block;padding:8px 10px 5px 40px;background-color:#e01b23;color:white;
  border-radius:7px;
}
section.SeekerBox div.SmallSeekerArticle a:hover {background-color:black;color:white;}
body.OnSmallAppleDevice section.SeekerBox div.SmallSeekerArticle a {
	background-color:#e01b23 !important;
}

section.SeekerBox div.VerboseText a {margin-top:10px;}
section.SeekerBox.Shrink {width:195px;padding:3px;width:auto;right:10px;bottom:10px;}
section.SeekerBox.Shrink div.VerboseText,
section.SeekerBox div.NonVerboseText {display:none;}
section.SeekerBox.Shrink div.NonVerboseText {display:block;}

section.SeekerBox.BigBox {
	left:0;right:0;bottom:0;top:0;width:100%;height:100vh;border-radius:0;padding:0;
  background-color:rgba(0,0,0,0.6); box-shadow:none;
  z-index:110;
  display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;
}
@media (max-width:900px) {
  section.SeekerBox.BigBox {
    align-items:flex-end;
  }
}
section.SeekerBox.BigBox div.SmallSeekerArticle {display:none;}
section.SeekerBox.BigBox div.FullSeekerArticle {
  display:block;position:relative;max-width:840px;
  background-color:white;
  box-shadow: 0px 0px 20px 5px rgba(0,0,0,.12);
}
section.SeekerBox.BigBox div.FullSeekerArticle > h1 {
  	padding:0 0 5px 10px;margin:0;display:block;width:100%;
    font-size: 40px;
    background-color: #e01b23;
    text-transform: Uppercase;
    font-weight: 400;
    color: #fff;
}
section.SeekerBox.BigBox div.FullSeekerArticle div.ArticleBody {
  max-height:70vh;
  padding:10px 10px 20px 10px;
} 
@media (max-width:767px) { 
  section.SeekerBox.BigBox div.FullSeekerArticle > h1 {
	font-size: 30px;  
  }
  section.SeekerBox.BigBox div.FullSeekerArticle div.ArticleBody {max-height:80vh;}
}

section.FadingCards div.image_blocks li, section.FadingCards div.image_blocks li a {
	background:transparent;
}

div.invisible-recaptcha.UnFix div.grecaptcha-badge {
  bottom:250px !important;
}

section.slice_image_blocks_3 div.image_block_title_wrapper div.image_block_title,
section.slice_image_blocks_4 div.image_block_title_wrapper div.image_block_title {text-shadow:none;}

/* Hide My Orders link for non-logged in people */
body.guest_user header li a[href^="/Groups/356279/"],
body.guest_user .slice_Header_L div.top-link-wrapper a.top-link.MyOrders
{display:none !important;}

/* CSS to make the 3 column template work */
section.slice_content_page div.ThreeColumnWrapper {
	display: flex; flex-flow: row wrap; justify-content: center; align-items:stretch;
}
section.slice_content_page div.ThreeColumnWrapper > div {width: 100%; margin:15px 0;} /* 1 column */
@media (min-width: 467px) { /* 2 columns */
	section.slice_content_page div.ThreeColumnWrapper > div { width: 49%; margin:15px 0; }
	section.slice_content_page div.ThreeColumnWrapper > div:nth-child(2n+1) {margin-right:1%;} /* Extra 1% on each */
	section.slice_content_page div.ThreeColumnWrapper > div:nth-child(2n) {margin-left:1%;}
}
@media (min-width: 992px) { /* 3 columns */
	section.slice_content_page div.ThreeColumnWrapper > div { width:32%; margin:15px 0;}
	section.slice_content_page div.ThreeColumnWrapper > div:nth-child(3n+1) {margin-left:0;margin-right:0;}
	section.slice_content_page div.ThreeColumnWrapper > div:nth-child(3n+2) {margin-left:2%;margin-right:2%;} /* extra 4% on the middle one only */
	section.slice_content_page div.ThreeColumnWrapper > div:nth-child(3n) {margin-left:0;margin-right:0;}
}