/* Style Over-Ride file for CI template. */
/* (C)2017 Endis Ltd. No permission is given to use this code, except on an Endis website. */
 
header ul.root_menu > li > a.menu_link {
  padding: 10px 20px 9px !important;
}
header ul.root_menu > li:first-child:hover {background-color:#f0f0f0 !important;}

header ul.root_menu {padding-right:30px;margin-bottom:14px;}
.slice_Header_L a.slicknav_btn {padding-bottom: 25px !important;}

/* ############ Size of site logo image */
.slice_Header_L {
	padding-top: 30px !important;
	padding-bottom: 0 !important; /* need this to be zero, so no white appears at the bottom of an open SlickNav menu. */
	transition: padding-top 500ms linear;
}
.slice_Header_L .logo-icon img.BigLogo { 
	width:  254px !important; /* <<< mobile logo width */
	height: 49px !important; 
	opacity: 1 !important;
	transition: opacity 500ms linear !important;
}
@media(max-width:467px){
  .slice_Header_L .logo-icon img.BigLogo { 
      width:  200px !important; /* <<< mobile logo width */
      height: auto !important; 
  }
}
.slice_Header_L .logo-icon img.SmallLogo { 
	position: absolute;
	top: 0;
	width:  50px !important; /* <<< mobile logo width */
	height: 50px !important; 
	opacity: 0 !important;
	transition: opacity 500ms linear !important;
}
.slice_MegaMenu {top: 82px !important;} /* No transition time needed */
.slice_Header_L a.top-link {
	margin-top: 0 !important;
	transition: margin-top 500ms linear, opacity 500ms linear !important;
}
/* Gap between logo and top/bottom of screen  */
header div.logo-container 
{
	margin-top: 20px !important; /* <<< gap from top for mobile/tablet */
	margin-bottom: 0 !important; /* <<< gap from bottom for mobile/tablet */
	transition: margin-top 500ms linear !important;
	z-index: 3 !important;
	background-color: transparent !important;
}
@media(max-width:467px){
  header div.logo-container { 
      margin-top: 30px !important; 
  }
}

/* Changes when user scrolls down */
header .slice_Header_L { /* preload a white border, so that no height changes when the border is turned on and off */
	border-bottom: 2px solid white;
}
header.ShowBorder .slice_Header_L {
	border-bottom-color: #ececec; /* only change the colour */
}
header.SmallerHeader .slice_Header_L {
	padding-top: 10px !important;
	padding-bottom: 0 !important;	
}
header.SmallerHeader .slice_Header_L .logo-icon img.BigLogo {
	opacity: 0 !important;
}
header.SmallerHeader .slice_Header_L .logo-icon img.SmallLogo {
	opacity: 1 !important;
}
header.SmallerHeader .slice_MegaMenu {top: 60px !important;}
header.XSmallerHeader .slice_Header_L a.top-link {margin-top: 5px !important;}
header.SmallerHeader div.logo-container 
{
	margin-top: 8px !important; /* <<< gap from top for mobile/tablet */
}

/* There is no margin-top on small desktop-not-possible devices */
header.FixedPosition {
	margin-top: 91px;
}
header.FixedPosition.SmallerHeader {margin-top: 71px;}

@media(min-width:1120px){
	header.FixedPosition {margin-top: 98px;}
	header.FixedPosition.SmallerHeader {margin-top: 68px;}
	header section.slice_Header_L { /* fixes for the header slice on desktop */
		padding-left: 234px !important;
		padding-bottom: 10px !important; /* because this is here, we have no slow transition for this property. */
		padding-right: 0 !important;
	}
	header div.logo-container {
		margin-left: 20px !important;
	}
}

/* Google maps seems to be the max height allowed for google maps */
div#CI_Map > div {height: 470px !important;}

/* Fix for system search page */
section.slice_system_page._publisher_search_aspx select[id$="_ddlSearchScopeTemplate"],
section.slice_system_page._publisher_search_aspx div#search_header,
section.slice_system_page._publisher_search_aspx div#media_controls,
section.slice_system_page._publisher_search_aspx a.system_toggle_advanced
	{display: none !important;} /* keep this hidden, so users can't change it */
section.slice_system_page._publisher_search_aspx h1,
section.slice_system_page._publisher_search_aspx h2 { /* change title sizes, as h1 is too big. */
	font-size: 32px !important; 
	line-height: 48px !important; 
	color: #1583c2 !important;
}
section.slice_system_page._publisher_search_aspx div#media_controls {font-size: 17px;}
section.slice_system_page._publisher_search_aspx div#media_controls select,
section.slice_system_page._publisher_search_aspx div#media_controls input[type="text"]
{width: auto; padding: 2px 5px; margin: 0 5px 15px 0 !important;}
section.slice_system_page._publisher_search_aspx div#media_controls input[type="submit"],
section.slice_system_page._publisher_search_aspx div#media_controls div
{margin: 0 !important;}

/* Main Menu 'Templates' and 'Blog' entry fixes */
header ul.root_menu > li {margin-left:5px;}
header ul.root_menu > li:first-child:hover {
  	background-color:#5F8BCA;
  	color:white;
	border-radius:5px;
}
header ul.Xroot_menu > li:first-child:hover a {background-color:#5F8BCA;color:white;}
header ul.root_menu > li:nth-child(2):hover {
  	background-color:#f0f0f0;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
header ul.root_menu > li:nth-child(2):hover > a {background-color:#f0f0f0; border-radius:0;}
header ul.root_menu li a {
	border-radius: 5px !important; 
	padding-top: 11px !important;
	padding-bottom: 7px !important;
  	transition-property: background-color, color !important; 
    transition-duration: 500ms !important; 
  	transition-timing-function: linear !important; 
    cursor: pointer;  
}
header ul.root_menu ul li a:hover 
{background-color: #f0f0f0 !important;color: #f68e6e !important;}
header ul.root_menu ul {
  min-width:711px; 
  background-color:#f0f0f0 !important;
  padding:10px !important;
  border-radius:5px;
  border-top-right-radius:0;
}
header ul.root_menu ul li {min-width:230px; float:left;}
header ul.root_menu ul li a {
  padding-left:15px !important;
  padding-right:0 !important; 
  color:#5F8BCA !important;
  text-align:left;
  text-transform:none !important;
}

/* Fixes for Apple devices */

/* Fixes for input box issues */
body.OnSmallAppleDevice input[type="text"],
body.OnSmallAppleDevice textarea
{-webkit-appearance: none !important;}

/* Need this to get an iframe scrolling on iOS devices. */
body.OnSmallAppleDevice section.slice_LightBox.TemplateLightBox .ScrollBox 
{-webkit-overflow-scrolling: touch !important;}

@media (min-width: 768px) {
	body.OnSmallAppleDevice .blocks {align-items: center !important;}
  
	/* Fix Internet Explorer display */
	body.OnInternetExplorer .ArticleBody,
	body.OnInternetExplorer .blocks,
	body.OnInternetExplorer .FlexOverlayContent
	{align-items: stretch !important;} /* only stretch will render text correctly */
	
  	body.OnInternetExplorer section.slice_FeatureOneColumnBlog .FlexOverlayContent,
	body.OnInternetExplorer section.subslice_BlogFaceRow .FlexOverlayContent,
	body.OnInternetExplorer section.slice_FooterFlexBoxImage .FlexOverlayContent,
	body.OnInternetExplorer section.TripleWidth .FlexOverlayContent
	{align-items: center !important;} 
	
  	body.OnInternetExplorer img.IconLarge,
  	body.OnInternetExplorer img.FaceTestimonial,
  	body.OnInternetExplorer .FlexOverlayContent img
  	{align-self: center !important;}
  
	body.OnInternetExplorer section.slice_FeatureOneColumnBlog .blocks,
  	body.OnInternetExplorer section.slice_Feature .ArticleBody
  	{display: block !important;} /* abandon flex display */
}

div.BlogArticleDate {
	text-align: center; 
	font-size: 14px; 
	line-height: 1; 
	padding: 10px 0 20px;
}

/* ############# Code for Wufoo forms */
iframe#WufooFreeTrialForm, iframe#WufooContactUsForm {
	display: block;
	border: none;
	padding: 0;
	margin: 0;
	width: 100%;
	overflow: auto !important;
}
/* The iframes have to be high enough to handle the WuFoo form, when errors are showing, on a 320px wide screen */
iframe#WufooFreeTrialForm {height: 1690px;}
@media (min-width:768px) {iframe#WufooFreeTrialForm {height: 1580px;} }
iframe#WufooContactUsForm {height: 420px;}
/* Cartoon side image for WuFoo Contact Us form */
@media (min-width: 1120px) { div#CartoonSideImage { position: relative; }
  div#CartoonSideImage::after { content: ' '; position: absolute; top: 0; left: 98%; width: 115px; height: 100%; background-image: url(../images/CartoonManOnPhone.png); background-repeat: no-repeat; background-size: contain; background-position: left top; } }
/* Needed if we have a Wufoo form in the Contact mega-menu */
section.slice_MegaMenu.MM_Contact div.article_cards,
section.slice_MegaMenu.MM_Contact section.slice_FeatureOneColumn
{padding-bottom: 0 !important;}

/* Style getting started videos */
@media (min-width: 1120px) {section.GettingStartedVideos .FlexOverlayContent {
	margin: 0 auto !important;
	width: 900px !important;
}}
section.GettingStartedVideos div.VideoTop {
	border: 2px solid #d7d7d7;
	color: #d7d7d7;
	border-bottom: none;
	text-align: left;
	line-height: 1;
}
section.GettingStartedVideos video {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 900px;
	height: auto;
	border: 2px solid #d7d7d7;
  	background-color:#e5e5e5;
}
/* code to make getting started videos look ok in a blog post. */
section.slice_blog_content section.GettingStartedVideos,
section.slice_blog_content section.GettingStartedVideos div.FlexOverlayContent,
section.slice_blog_content section.GettingStartedVideos video,
section.slice_blog_content section.GettingStartedVideos div.VideoTop {
  	max-width:620px !important;
	margin:0;
}

/* Customer Gallery Fixes */
section.slice_White3Columns.CustomerGallery section.slice_FeatureOneColumn a.LightBoxImageLink {
  display:block; height:250px; overflow:hidden; border:1px solid #dddddd;}

/* Code for regionalisation flags in footer */
footer a.footer {
	color:white !important;
	background-image: none !important;
}
@media (min-width:992px) {
	footer a.footer {
		width:auto !important;
		top:0px !important;
	}
}
footer div.FlagsWrapper {
	color: white;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
footer div.FlagsWrapper a {
	display: block;
	flex: none;
}
footer div.FlagsWrapper a:first-of-type{margin: 0 10px;}
footer div.FlagsWrapper img {
	display: block;
  width: 30px;
  margin:0 5px;
}

footer a.footer {position:relative;}
footer div.FlagChooser {
  display:none;
  padding:0 0 20px 0;
  background-color: transparent;
  position: absolute;
  top:-80px;
  left: 49%;
}
footer div.FlagChooserI {
  padding:5px 15px;
  border:1px solid #bbbbbb;
  border-radius:10px;
  text-align:left;
  line-height:2;
  background-color: white;
  color: #323232;
  white-space:nowrap;
}
footer div.FlagChooserI span:hover {color:#1583c2;} 
footer div.FlagChooser img {  
  position: absolute;
  top: calc(100% - 22px);
  left: 40%;
}

section.HeaderArticle {
  padding:40px 0 90px; 
  border-top:40px solid #6763b2;
  border-left:80px solid #6763b2;
  border-right:5px solid #6763b2;
  background-color:#6763b2;
  background-image:url(/Images/Content/82/1120174.png);
  background-size:contain;
  background-position:left bottom;
  background-repeat:no-repeat;
}
section.HeaderArticle div.ArticleBody {width:100%; max-width: 750px; margin:0 auto;}
section.HeaderArticle div.ArticleBody h1,
section.HeaderArticle div.ArticleBody h3 {color:white;}
section.HeaderArticle div.ArticleBody h3 {font-weight:400;}
section.HeaderArticle div.ArticleBody h1 {margin:20px 0 40px; font-size:54px; line-height:1.1;}
section.HeaderArticle div.BlueSearch {
  display:flex; flex-flow:row nowrap; justify-content:center;align-items:center;
}
section.HeaderArticle div.BlueSearch div.search_div {width:100%;}
section.HeaderArticle div.BlueSearch input.text {
  margin:0 !important; 
  padding:15px 5px 15px 20px !important; 
   font-size:20px; font-family:Raleway !important;
  border-top-left-radius:5px !important; 
  border-bottom-left-radius:5px !important; 
}
section.HeaderArticle div.BlueSearch input.text:hover {box-shadow:none;}
section.HeaderArticle div.BlueSearch input.button {
  margin-top:0 !important; background-color:#8ab94b; color:white;
  padding:17px 25px 18px !important; 
  font-weight:700; font-size:20px;
  border-radius:0;
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
}
@media (max-width:1550px) {
  section.HeaderArticle {border-left:none;}
}
@media (max-width:1120px) {
  section.HeaderArticle {padding:30px 20px 60px;}
  section.HeaderArticle div.ArticleBody h1 {font-size:36px;}
  section.HeaderArticle div.BlueSearch input.text,
  section.HeaderArticle div.BlueSearch input.button {
  	font-size:18px;
  }
  section.HeaderArticle div.BlueSearch input.button {padding-bottom:17px !important;}
}
@media (max-width:600px) {
  section.HeaderArticle div.BlueSearch {
    flex-flow:column nowrap; align-items:flex-start;
  }
  section.HeaderArticle div.BlueSearch input.button {margin-top:10px !important;}
  section.HeaderArticle div.BlueSearch input.text,
  section.HeaderArticle div.BlueSearch input.button {
  	border-radius:5px !important;
  }
  section.HeaderArticle div.BlueSearch input.text {
    padding-left:10px !important;
  	font-size:17px;
  }
}
@media (max-width:380px) {
  section.HeaderArticle div.BlueSearch input.text {
  	font-size:16px;
  }  
}
section.HeaderArticle div.Tint {display:none;}
@media (max-width:1120px) {
  	section.HeaderArticle {position:relative; padding-top:0;}
	section.HeaderArticle div.Tint {
      position:absolute; top:0; bottom:0; left:0; right:0;
      display:block;
      background-color:#628dc7;
      opacity:0.7;
    }
  section.HeaderArticle div.ArticleBody {position:relative; z-index:1;}
}

section.HeaderArticle.Small {
  border-top-width:10px; 
  padding:20px 20px 50px;
}
section.HeaderArticle.Small h3 {display:none;}
section.HeaderArticle.Small div.ArticleBody h1 {font-size:32px; margin:0 0 20px;}
@media (min-width:1550px) {
  section.HeaderArticle.Small {
    background-position: 13% bottom;
  }  
}

section.MainArticle {padding:40px 10px;}
section.MainArticle h1 {font-size:36px;}
section.MainArticle h2 {font-size:30px;}
section.MainArticle h3 {font-size:24px;}
section.MainArticle h1,
section.MainArticle h2,
section.MainArticle h3 {
  margin-top:0 !important; padding-top:5px !important; line-height:1.2 !important;
  padding-bottom:5px !important;
}
section.MainArticle img {max-width:100%; height:auto !important;}

header.FixedPosition {
  	margin-top:0 !important; 
}
header section.slice_Header_L.FixedPosition {
  position:static !important;
}

section.slice_TopWobble {
  	height:18px;
	background-image:url(/Images/Content/82/Templates/50707/images/WobbleBlue.png);
  	background-repeat:no-repeat;
  	background-position:center bottom;
  	background-size:cover;
}

section.FrontPageArticles {background-color:#f6f6f6; padding:40px 0 50px;}
section.FrontPageArticles div.article_cards > div {
	float:none !important;
  	padding:15px 0;
  	border-top:1px solid #e1e1e1;
}
section.FrontPageArticles h1 {font-size:36px; line-height:1.2; padding-bottom:20px;color:#5F8BCA;}
section.FrontPageArticles div.articleListTitle a {color:#f68e6e; font-size:24px; font-weight:600;}
section.FrontPageArticles div.articleListTitle a:hover {color:#5F8BCA;}

section.slice_Categories { padding:40px 0 50px;}
section.slice_Categories h1 {font-size:36px; line-height:1.2; padding-bottom:40px;color:#5F8BCA;}
section.slice_Categories div.articleListTitle a {
  color:#5F8BCA; font-size:19px; line-height:1.1; font-weight:500;
}
section.slice_Categories div.articleListTitle a:hover {color:#f68e6e;}
section.slice_Categories div.articleListTitle {
  float:left; width:25%; padding:0 10px 20px 0;
}
section.slice_Categories div.GroupNav > div:last-child div.articleListTitle {
	padding-bottom:40px;
}
@media (max-width:1050px) {
	section.slice_Categories div.articleListTitle {width:33.333%;}
    section.FrontPageArticles,
    section.slice_Categories {padding:30px 15px;}
    section.FrontPageArticles h1,
    section.slice_Categories h1 {font-size:28px;}
}
@media (max-width:800px) {
	section.slice_Categories div.articleListTitle {width:50%;}
}
@media (max-width:500px) {
	section.slice_Categories div.articleListTitle {float:none; width:auto;}
    section.FrontPageArticles h1,
    section.slice_Categories h1 {font-size:24px;}
  	section.FrontPageArticles div.articleListTitle a {font-size:20px;}
}

section.slice_Categories div.CategoriesText {
	float:none; clear:both; padding-top:20px; border-top:1px solid #e1e1e1; margin-top:0;
}
section.slice_Categories div.CategoriesText a {font-weight:700; color:#f68e6e;}
section.slice_Categories div.CategoriesText a.Email {color:#5F8BCA;}

section.slice_system_page {padding-bottom:30px;}
section.slice_system_page div.container.system_content {max-width:800px;}
section.slice_system_page h1 {font-size:36px;}
section.slice_system_page input[id$=_txtSearchStringTemplate] {margin-right:10px;}
section.slice_system_page select {
  width:auto !important; 
  padding:1px 5px !important;
  margin-left:5px;
}
section.slice_system_page div#media_controls {padding:20px;}
section.slice_system_page div.system_column {
  padding-left:20px; padding-right:20px;
  border-bottom-width:4px;
}
@media (max-width:1050px) {
  section.slice_system_page,
  section.slice_system_page div.system_column {padding-left:15px; padding-right:15px;}
}

video {width:100% !important;max-width:1000px !important;}

section.slice_BreadCrumbs {padding:10px 10px 0; font-size:20px !important;}

/*Google font icon customisation*/
.material-icons.md-48 {
  font-size:48px;
}
.material-icons.grey {
    color:grey;
}

/* New styling for set-up guides */
section.MainArticle img.GreyBorder,
body.ArticleEditor img.GreyBorder {display:block; border:2px solid #d7d7d7 !important;}
section.MainArticle hr,
body.ArticleEditor hr {
  height:1px; border:none; border-top:1px solid #d7d7d7;
  margin:40px 0;
}
section.MainArticle table.BlueNumbered {
	border-collapse:collapse;
  	border:none;
}
section.MainArticle table.BlueNumbered td {
	vertical-align:top; padding:10px; border:none;
}
section.MainArticle table.BlueNumbered td:first-child span {
  	font-family:Ariel,sans-serif;
  	display:block;width:40px;height:40px;
	background-color:#60A1CB;color:white;font-weight:700;font-size:26px;line-height:1;
  	border-radius:20px;padding:7px 0 0 13px;
}
section.MainArticle table.BlueNumbered td:last-child {
	padding-top:18px;
}

section.MainArticle img[alt^="Blue-"],
body.ArticleEditor img[alt^="Blue-"]
{position:relative; top:-8px; margin-top:0 !important;}
/* margin-top set to 0 to stop interfearance from <p> elements */

/* Make all non-blue-number images have a grey border */
section.MainArticle img,
body.ArticleEditor img {
	border-color:#d7d7d7 !important;
}
section.MainArticle img[alt^="Blue-"],
body.ArticleEditor img[alt^="Blue-"] {
	border:none !important;
  	float:left;
  	margin:0 10px;
}

section.MainArticle video {
  	display:block; background-color:white; color:white;
	border:2px solid #d7d7d7 !important;
}

header li.SlickNavNotNeeded {display:none !important;}

/* Hubb article lists */
div.HubbArticleList img {min-width:300px;}
@media(max-width:767px){
  div.HubbArticleList img {min-width:200px;}
}
@media(max-width:467px){
  div.HubbArticleList img {min-width:100px;}
}