/* 	[ COPYRIGHT CONTEGRO  - Intelligent Website Content Management ]   */
/* 	[ http://www.contegro.com ]   */



/* -----[ TEMPLATE ]-------------------------------------------------------------------------- */

/*  
	Change Class Selectors and ID Selectors to reflect your Design as required.
	The aim of this file is create the 'Template' for your design.
	Such as: backgrounds, colours, borders, margins, padding.
	Alter the Property and Value to reflect your design as required.

	--Layouts
		The structure below is compliant with the current W3C standards. 
		The layout technique that is used is will allow for a liquid centre and fixed sides. 
		1.	Layout 1 - 3 column layout
		2.	Layout 2 - 2 column layout (left column #cLS)
		3.	Layout 3 - 2 column layout (right column #cRS)
		4.	Layout 4 - 1 column layout */

/* -----[ Main structure CSS]--------------------------------------------------------------------- */

* { -moz-outline-style: none;
	outline-syle: none;
	outline-width: 0px;
	outline-color: -moz-use-text-color;
	margin: 0px;
}
	
html {
	overflow-y: scroll; /* force a vertical scrollbar */
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body > form {
	height: auto;
	min-height: 100%;
}
/* -----[ STRUCTURE]------------------------------------------------------------------------------ */

/* === [ wrappers to set width ] === */
#outerWrapper {
	position: relative;
	margin: 0px auto;
	width: 1260px;
	height: 100%;
	min-height: 100%;
	min-height: 100vh;
	
	padding-left: 0;
	padding-right: 0;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
			box-sizing: border-box;         /* Opera/IE 8+ */	
}
	#mainWrapper:after {
		content: ".";
		display: block;
		height: 0;
		font-size: 0;
		clear: both;
		visibility: hidden;
    }
    #mainWrapper {
		display: inline-block;
		width: 100%;
		height: auto;
		
		padding-bottom: 145px; /* make room for the footer */
		padding-bottom: 15vw;  /* make room for the footer */
    }
	body.hasPreviousAndBackButtons #mainWrapper {
		padding-bottom: 225px;
		padding-bottom: calc(15vw + 80px);
	}
    /* Hides from IE Mac \*/
    * html #mainWrapper {
       height: 1%; }
    #mainWrapper {
       display: block; }
    /* End hide from IE-mac */


/* === [ header ] === */
#cH {
	position: relative;
	display: block;
	clear: both;
	width: 100%;
	height: 95px;
	z-index: 200;
	background: white;
	overflow: hidden;
}
	
	#cLogo {
		width: 25%;
		float: left;
	}
		#cLogo a {
			display: block;
			background: url(/templates/_images/babbage-logo.png) 30px center no-repeat;
			width: 100%;
			height: 93px;
			margin: 1px 0;
		}
		#cLogo a:active {
			margin: 2px 0 0 0;
		}
			#cLogo a span {
				display: none;
			}


	/* === [ Main Navigation ] === */
	#cN {
		float: left;
		position: relative;
		display: block;
		width: 50%;
		z-index: 200;
	}

/* === [ Primary Container Wrapper ] === */
#cPCWrapper {
	float: left;
	width: 100%;
}

#NavigationShowingContentShadow {
	position: absolute;
	top: 95px;
	left: 0;
	right: 0;
	bottom: 100%;
	z-index: 100;
	background: black;
	opacity: 0;
	
	-webkit-transition: opacity 0.5s, bottom 0s;
	        transition: opacity 0.5s, bottom 0s;

	-webkit-transition-delay: 0.5s, 1s;
	        transition-delay: 0.5s, 1s;
}	
	body.ShowingMegaMenu #NavigationShowingContentShadow {
		opacity: 0.75;
		bottom: 0%;		

		-webkit-transition-delay: 0s, 0s;
				transition-delay: 0s, 0s;
	}


/* === [ Hero container ] === */
#cHero {
	display: block;
	padding: 0;
	height: 480px;
	height: 37.5vw;
	background: #707070;
}
	#outerWrapper.ContentTemplate #cHero {
		margin: 0 25% 0 0;
	}

	#cHero > div {
		width: 100%;
		height: 100%;
	}



#cPcAndSecondaryWrapper {
	float: left;
	width: 75%;
}

/* === [ Primary Container ] === */
#cPC {
	display: block;
	padding: 0;
}
	#outerWrapper.search #cPC {
		min-height: 720px !important;
	}


	#outerWrapper.ContentTemplate #cPC {
		float: left;
		width: 66.6666%;
	}
	#outerWrapper.ContentTemplate.projects #cPC {
		height: auto !important;
	}
	#outerWrapper.HomeTemplate #cPC {
		/*
		min-height: 480px;
		min-height: 37.5vw;
		*/
		float: left;
		width: 75%;
	}

		#outerWrapper.ContentTemplate #cPC .HTMLContent {
			padding: 2em;
			
			-webkit-column-count: 2; /* Chrome, Safari, Opera */
			   -moz-column-count: 2; /* Firefox */
			        column-count: 2;	
					
			-webkit-column-gap: 2em; /* Chrome, Safari, Opera */
			   -moz-column-gap: 2em; /* Firefox */
			        column-gap: 2em;		
					
		}
		#outerWrapper.ContentTemplate #cPC .HTMLContent.hasMobileContent {
			padding: 2em;
		}

			#outerWrapper.ContentTemplate #cPC .HTMLContent h1,
			#outerWrapper.ContentTemplate #cPC .HTMLContent h2,
			#outerWrapper.ContentTemplate #cPC .HTMLContent h3,
			#outerWrapper.ContentTemplate #cPC .HTMLContent h4,
			#outerWrapper.ContentTemplate #cPC .HTMLContent h5 {
				break-after: avoid;
			}

			#outerWrapper.ContentTemplate #cPC .HTMLContent .h2AndNextItem {
				display: block;
				
				/* The following two lines don't seem to do what they should, but I'll leave it here because it's the correct way to avoid breaks in columns */					
				               break-inside: avoid-column;
				-webkit-column-break-inside: avoid;
				
				overflow: hidden; /* For some reason, this stops this element from breaking over a column ( found here: http://stackoverflow.com/a/17415553/138378 ) */
			}

			#outerWrapper.ContentTemplate #cPC .HTMLContent p {
				/* see http://demosthenes.info/blog/946/CSS-last-line-Controlling-Widows- for a good explanation of what the next two lines do */
				orphans: 3; 
				widows: 3;
				
				display: inline-block; /* this makes it so that if chrome won't try and put the last p in column 1's bottom margin as the first thing in the 2nd margin (from here http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/comment-page-1/#comment-19016 ) */
			}

		#outerWrapper.ContentTemplate.contact #cPC .HTMLContent {
			-webkit-column-count: 1;
			   -moz-column-count: 1;
			        column-count: 1;	
					
			-webkit-column-gap: 0;
			   -moz-column-gap: 0;
			        column-gap: 0;
			
			width: 50%;
			float: left;
			padding-right: 1em;
			
			-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
			   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
					box-sizing: border-box;         /* Opera/IE 8+ */						
		}


	#outerWrapper.OneColumnTemplate #cPC {
		min-height: 100px;
	}
	#outerWrapper.page-not-found-content #cPC {
		height: auto !important;
		min-height: 56.25vw
	}

#cSecondary {
	float: right;
	width: 33.3333%;
	margin-left: -100%;
	padding: 0;	
	background: #D7D7D7;
}
	#cSecondary .RightContentBox { /* divs under cRS should be 240px high */
		height: 240px;
		height: 18.75vw; /* 1 x grid height */
	}


/* === [ Right Side Column ] === */
#cRS {
	float: right;
	margin-left: -100%;
	width: 25%;
	padding: 0;
}
	#outerWrapper.HomeTemplate #cRS {
		min-height: 480px;
		min-height: 37.5vw;
	}	

	#cRS .RightContentBox { /* divs under cRS should be 240px high */
		height: 240px;
		height: 18.75vw; /* 18.75% of the view width */
	}


#outerWrapper.HomeTemplate #cNews {
	float: left;
	width: 75%;
}
	



@-moz-document url-prefix() {
	#outerWrapper.HomeTemplate #cNews {
		margin-top:-8px
	}
}

/* === [ footer ] === */
#cF {
	position: absolute;
	bottom: 0;
	display: block;
	clear: both;
	width: 100%;
	margin: 0;
}

	#cF .Copyright {
		height: 145px;
		height: 15vw;

		max-height: 145px;

		padding: 20px;
		
		background: url(/templates/_images/footer-bg.png) bottom right no-repeat;
		
		-webkit-background-size: contain;
		        background-size: contain;
		
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
				box-sizing: border-box;         /* Opera/IE 8+ */			
	}


#cMobileNavigation,
.ShowMobileNavButton {
	display: none;	
}

.PreviousNextLinks {
	background: black;
	height: 80px;
	position: relative;
	font-size: 14px;
	display: none;
}
body.hasPreviousAndBackButtons .PreviousNextLinks {
	display: block;
}

	.PreviousNextLinks a {
		color: #e5e5e5;
		display: inline-block;
		line-height: 80px;
		background: url(/templates/_images/footer-arrows.png) 0 0 no-repeat;
		padding: 0 65px;
		text-decoration: none;
	}
		.PreviousNextLinks a:active {
			margin-top: 1px;
		}
	
	.PreviousNextLinks a.Previous {
		background-position: left bottom;
	}
	.PreviousNextLinks a.Next {
		background-position: right top;
		position: absolute;
		right: 25%;
	}
	.PreviousNextLinks a.hidden {
		display: none;
	}

#cSearchAndFilter {
	vertical-align: top;
}
	#outerWrapper.FilterAndSearch #cSearchAndFilter { height: 60px; }

.babbageFilter {
	background: #242424;
	opacity: 1;
	color: white;
	width: 25%;
	height: 60px;
	display: inline-block;
	position: absolute;
	left: 25%;
	top: 0;
}
.babbageFilter.hidden {
	opacity: 0;
}

	.babbageFilter h3 {
		margin: 0;
		padding: 0 0 0 60px;
		line-height: 60px;
		font-size: 14px;
		color: #e5e5e5;
		background: #242424 url(/templates/_images/filter-arrow.png) 20px center no-repeat;
		font-family: 'HelveticaNeueLTStd-Md';	
		position: relative;
		z-index: 160;	
	}
	.babbageFilter ul {
		list-style: none;
		margin: 0;
		padding: 0 20px 20px 20px;
		position: absolute;
		top: -750px;
		left: 0;
		width: 100%;
		background: #242424;
		z-index: 150;
		
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
				box-sizing: border-box;         /* Opera/IE 8+ */			
		
		-webkit-transition: top 0.5s;
		        transition: top 0.5s;

		-webkit-transition-delay: 0.5s;
		        transition-delay: 0.5s;
	}
	.babbageFilter.hover ul {
		top: 60px !important;

		-webkit-transition-delay: 0s;
		        transition-delay: 0s;
	}

	.babbageFilter li {
		display: block;
		padding: .5em 0.5em .5em .5em;
		cursor: pointer;
		
		font-family: 'HelveticaNeueLTStd-Md';
		font-size: 16px;
		
		-webkit-transition: padding 0.15s;
		        transition: padding 0.15s;
	}

		.babbageFilter li.FilterGroupName {
			font-size: 12px;
			padding-left: 0;
		}

	
		.babbageFilter li.levelTwo {
			display: block;
			padding-left: 1em;
			max-height: 2em;
			overflow: hidden;
			opacity: 1;
			
			-webkit-transition: max-height 0.2s, padding 0.2s, opacity 0.2s;
			   -moz-transition: max-height 0.2s, padding 0.2s, opacity 0.2s;
			        transition: max-height 0.2s, padding 0.2s, opacity 0.2s;

			-webkit-transition-delay: 0s, 0s, 0.2s;
			   -moz-transition-delay: 0s, 0s, 0.2s;
			        transition-delay: 0s, 0s, 0.2s;
		}
		.babbageFilter li.levelTwo.hidden {
			max-height: 0;
			padding: 0 0 0 1em;
			opacity: 0;

			-webkit-transition-delay: 0.2s, 0.2s, 0s;
			   -moz-transition-delay: 0.2s, 0.2s, 0s;
			        transition-delay: 0.2s, 0.2s, 0s;
		}
	
	
		.babbageFilter li:hover {
			color: #00aeef;
		}
		.babbageFilter li.active,
		.babbageFilter li.active:hover {
			color: #A6CE39; /* green */
		}
		.babbageFilter li.All.active,
		.babbageFilter li.FilterGroupName.active {
			color: inherit;
		}
		.babbageFilter li.All.active:hover,
		.babbageFilter li.FilterGroupName.active:hover {
			color: #00aeef;
		}


/* search auto complete */
	body .ui-widget-content {
		background: #242424;
		color: white;
		border-radius: 0;
		z-index: 150 !important;
		border: none;
	}
		body .ui-menu .ui-menu-item a { color: white; }
		body .ui-menu .ui-menu-item a.ui-state-hover {
			background: #00AEEF;
			border-radius: 0;
			border-color: #00AEEF;
		}
	


/* -----[ Clearings ]-------------------------------------------------------------------------- */

.clearLeft,
.clear
{
	height: 0;
	font-size: 0;
	line-height: 0;
}
.clearLeft {
	clear: left;
}
.clear {
	clear: both;
}


/* -----[ Printing ]-------------------------------------------------------------------------- */

@media print {
	body, input, select, textarea, tbody {
		font-size: 16px;
		color: #333;
	}
	h1, h2, h3, h4, h5, h6 { color: black; }

	p,
	.ProjectKeyDetails {
		font-size: 1.4em;
	}

	#cH ,
	#cRS,
	.RightImage,
	.rmStatic.MainNavMegamenu,
	#cSearchAndFilter {
		display: none;
	}

	#outerWrapper:before {
		display: block;
		content: url(/templates/_images/babbage-logo.png);
		margin: 20px;
	}
	
	#outerWrapper.ContentTemplate #cHero { margin: 0; }
	
	#cPC { height: auto !important; }
	
	.HeroTitle {
		background: white !important;
		color: black;
		border: 1px black solid;
	}	
		.HeroTitle h1 { color: black !important; }
		.HeroTitle p  { color: #333 !important; }
		
		.Breadcrumb {
			background: white;
			border-top: 1px black solid;
			border-left: 1px black solid;
		}
		
	#cPcAndSecondaryWrapper { width: 100%; }
	#cSecondary  { border-left: 1px #ccc solid; }
	
	.ListItem,
	.HeroPushboxItem {
		width: 100% !important;
		height: 240px !important;
		height: 18.75vw !important; /* 18.75% of the view width */
		float: none;
		clear: both;
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		display: block !important;
		
		border-top: 1px black solid;
	}
	.ListItem.Hero {
		height: auto !important;
		border-top: 0;
	}
	.ListItem:after { display: none; }
	
		.TitleAndSummary {
			top: 0 !important;
			background: none !important;
		}
		.TitleAndSummary .ListTitle,
		.TitleAndSummary .ListTitle a,
		.TitleAndSummary p {
			color: black !important;
		}
		.ListSummary a { display: none; }
		
	.ListItem .ListThumbnail,
	.HeroPushboxItem .ListThumbnail	{
		height: 100% !important;
		width: auto !important;
		margin: 0 !important;
		top: 0 !important;
		right: 0 !important;
		left: auto !important;
		z-index: 100;		
	}
}




/* REALLY big screens */
@media screen and (min-width: 2000px) {
	#cLogo {
		width: 300px !important;
	}
	#cN {
		width: calc(40% - 300px) !important;
	}
	.PreviousNextLinks a.Next {
		right: 40% !important;
	}	
}
@media screen and (min-width: 2000px) and (max-height: 1500px) {
	.tos-prev {
	  left: calc(50% - 85vh) !important;
	}	
	.tos-close,
	.tos-next {
	  right: calc(50% - 85vh) !important;
	}	
}




/* big screens = 5 columns */
@media screen and (min-width: 1441px) {
	#cLogo {
		width: 20%;
		margin-left: 20%;
	}
		#cLogo a { background-position: 20px center; }
	#cN {
		width: 40%;
	}	
	#outerWrapper.ContentTemplate #cHero {
		margin: 0 40% 0 0;
	}
	
	#outerWrapper.HomeTemplate #cPC { width: 60%; }
	#outerWrapper.HomeTemplate #cRS { width: 40%; }		
	
	
	#outerWrapper.search #cPC { min-height: 480px !important; min-height: 37.5vw !important; }	
	
	#outerWrapper.page-not-found-content #cPC {
		min-height: 37.5vw
	}	
	
	#cHero { height: 30vw; } /* 2 x grid height */

	#cPcAndSecondaryWrapper {
		width: 60%;
	}
	#cRS {
		width: 40%;	
	}
		#cRS .RightContentBox {
			width: 50%;
			float: left;
		}
		
	#outerWrapper.HomeTemplate #cNews {
		width: 60%;
	}		

	#cSecondary .RightContentBox { height: 15vw; } /* 1 x grid height */
	#cRS        .RightContentBox { height: 15vw; } /* 1 x grid height */

	.babbageFilter {
		width: 20%;
		left: 20%;
	}
	
	.PreviousNextLinks a.Previous { margin-left: 20%; }	
	.PreviousNextLinks a.Next { right: 20%; }		
	
	#cF .Copyright {
	
		background-size: 1000px auto;

		padding: 20px calc(20% + 20px);	
		padding: 20px -moz-calc(20% + 20px);	
		padding: 20px -webkit-calc(20% + 20px);	
		
		background-position: calc(80% - 126px) 100% !important;
		background-position: -moz-calc(80% - 126px) 100% !important;
		background-position: -webkit-calc(80% - 126px) 100% !important; /* line up the rightmost circle with the end of the 4th column */
	}
		
}

/* biggish screens = 4 columns */
@media screen and (min-width: 1260px) {

	#outerWrapper {
		width: 100%;
			
	}
	
	#cF .Copyright {
		background-position: -moz-calc(100% - 20px) 100% ;
		background-position: -webkit-calc(100% - 20px) 100%;
		background-position: calc(100% - 20px 100%);
	}

}

@media screen and (max-width: 1441px) {

    #mainWrapper {
		padding-bottom: 125px;  /* make room for the footer */
    }
	body.hasPreviousAndBackButtons #mainWrapper {
		padding-bottom: 205px;
	}	

	#cF .Copyright {
		height: 125px;
		max-height: 125px;
		background-size: 950px auto;				
	}
	
}


/* 3 column layout - grid height is 255px */
@media screen and (max-width: 1259px) {
	


	#cLogo a {
		background-image: url(/templates/_images/babbage-logo-tablet.png);
		background-size: 210px 52px;
	}

	#outerWrapper {
		position: relative;
		margin: 0px auto;
		width: 100%;
	}
	
	#cH {
		width: 100%;
	}
	
	#cLogo {
		width: 33.3333%;
	}
	#cN {
		width: 66.666%;
	}
	
	#cHero {
		height: 510px;
		height: 50vw; /* 2 x grid height */
	}
	
	#outerWrapper.ContentTemplate #cHero {
		margin: 0;
	}	
	
	#outerWrapper.HomeTemplate #cPCWrapper { margin-bottom: -1px; }
	#outerWrapper.HomeTemplate #cRS        { margin-bottom: -1px; }	
	
	#outerWrapper.search #cPC { min-height: 255px !important; min-height: 18.75vw !important; }	
	
	#cPcAndSecondaryWrapper {
		float: left;
		width: 100%;
	}
	#outerWrapper.ContentTemplate #cPC { width: 66.666%; }	

	#outerWrapper.HomeTemplate #cPCWrapper { float: none; }
	#outerWrapper.HomeTemplate #cPC { width: 100%; float: none; }
	
	#outerWrapper.page-not-found-content #cPC {
		height: auto !important;
		min-height: 0;
	}	
	
	#cSecondary {
		width: 33.333%;
		margin-top: 510px;
		margin-top: 25vw;
	}
		#cSecondary .RightContentBox {
			height: 255px;
			height: 18.75vw;
		}
	.contact #cSecondary,
	.contactdev #cSecondary{
		margin-top: 0;
	}
	.contact #cRS,
	.contactdev #cRS{
		display:none
	}
	#cRS {
		float: none;
		margin: 0;
		width: 33.333%;
		position: absolute;
		right: 0;
		top: 605px;
		top: calc(50vw + 95px);
		height: auto;
		overflow: hidden;
	}	
	#outerWrapper.HomeTemplate #cRS {
		width: 100%;
		float: none;
		position: static;
		top: auto;
		right: auto;
		height: auto;
		overflow: visible;
		min-height: 0;
	}	

		#cRS .RightContentBox {
			height: 255px;
		}
		#cRS .RightContentBox.RightContent3,
		#cRS .RightContentBox.RightContent4 {
			display: none;
		}	
		
	#cSecondary .RightContentBox.RightImage { display: none; }
	#cSecondary .RightContentBox.RightImage.RightYoutubeVideo { display: block; }
	#cRS        .RightContentBox { height: 25vw; } /* 1 x grid height */		
	#cSecondary .RightContentBox { height: 25vw; } /* 1 x grid height */		
	#cRS        .RightContentBox.RightImage.RightYoutubeVideo { display: none; }
		
	#outerWrapper.HomeTemplate #cNews {
		width: 100%;
	}			
		
	.PreviousNextLinks a.Next {
		right: 0;
	}	
	
	#outerWrapper.FilterAndSearch #cSearchAndFilter { height: 60px; }	
	
	.babbageFilter {
		height: 60px;
		width: 33.3333%;
		left: 33.3333%;
	}	
		.babbageFilter h3 {
			line-height: 60px;
			background-image: url(/templates/_images/filter-arrow-mobile.png);
			background-size: 21px 12px;
		}
		.babbageFilter:hover ul { top: 60px; }	
		
	#cF .Copyright {
		background-position: calc(100% - 20px) 100%;
		background-position: -moz-calc(100% - 20px) 100%;
		background-position: -webkit-calc(100% - 20px) 100%;
		background-size: 700px auto;
	}
	
				
}



@media screen and (max-width: 820px) {
	
/*#cLogo a {
		background-size: 210px 52px;
		background-image: url(/templates/_images/babbage-logo-tablet.png);
		padding:30px 30px 12px 30px;}*/
	
	
	
	
}

	



/* 2 column layout */
@media screen and (max-width: 770px) {

	#cH {
		height: 85px;
		position: fixed;
		top: 0;
		left: 0;
	}
	
	#cLogo {
		width: 50%;
	}	
	
			#cLogo a {
		background-size: 210px 52px;
		background-image: url(/templates/_images/babbage-logo-tablet.png);
		padding:0;
			
				
			}		
		#cN {
			width: 50%;
		}
	#mainWrapper {
		margin-top: 85px;
	}

	#cHero { height: 75vw; } /* 2 x grid height */
	
	#outerWrapper.ContentTemplate #cPC {
		width: 50%
	}	
		#outerWrapper.ContentTemplate #cPC .HTMLContent,
		#outerWrapper.ContentTemplate.contact #cPC .HTMLContent {
			-webkit-column-count: 1; /* Chrome, Safari, Opera */
			   -moz-column-count: 1; /* Firefox */
			        column-count: 1;						
		}	
		#outerWrapper.ContentTemplate.contact #cPC .HTMLContent {
			width: auto;
			padding-right: 2em;
			float: none;
		}
	
	#cSecondary {
		width: 50%;
		margin-top: 75vw;
		margin-top: 37.5vw;
	}	
	
	#cRS {
		width: 50%;
		top: 510px;
		top: 75vw;
		height: auto;
	}	
	
	#cSecondary .RightContentBox { height: 37.5vw; } /* 1 x grid height */
	#cRS        .RightContentBox { height: 37.5vw; } /* 1 x grid height */		
	
	
	.MainNavigation,
	.rmStatic.MainNavMegamenu  { display: none; }
	
	.ShowMobileNavButton {
		display: block;
		width: 65px;
		height: 65px;
		position: absolute;
		top: 8px;
		right: 0;
		cursor: pointer;
	}
	

		.ShowMobileNavButton:active {
			background: #EBEBEB;
		}
		.ShowMobileNavButton:active .Hamburgerline {
			background: #00AEEF;		
		}


		
		.ShowMobileNavButton .Hamburgerline {
			display: block;
			width: 25px;
			height: 2px;
			position: absolute;
			top: 36px;
			left: 20px;
			background: #666;

			-webkit-transition: -webkit-transform 0.1s, width 0.1s, margin 0.1s, left 0.1s;
			        transition:         transform 0.1s, width 0.1s, margin 0.1s, left 0.1s;


			-webkit-transition-delay: 0.25s, 0.25s, 0.5s, 0.25s;
					transition-delay: 0.25s, 0.25s, 0.5s, 0.25s;
		}
		.ShowMobileNavButton .Hamburgerline.Line1 {
			margin-top: -6px;
		}
		.ShowMobileNavButton .Hamburgerline.Line3 {
			margin-top: 6px;
		}

			body.ShowMobileNav .ShowMobileNavButton .Hamburgerline {
				-webkit-transition-delay: 0.5s, 0.25s, 0.25s, 0.25s;
						transition-delay: 0.5s, 0.25s, 0.25s, 0.25s;
			}

		
			body.ShowMobileNav .ShowMobileNavButton .Hamburgerline.Line1 {
				-webkit-transform: rotate(-45deg);
				        transform: rotate(-45deg);
						
				margin-top: 0;
			}
			body.ShowMobileNav .ShowMobileNavButton .Hamburgerline.Line2 {
				width: 0;
				left: 30px;
			}
			body.ShowMobileNav .ShowMobileNavButton .Hamburgerline.Line3 {
				-webkit-transform: rotate(45deg);
				        transform: rotate(45deg);
				margin-top: 0;
			}
		
		

	.babbageFilter.hover ul {
		top: 54px !important;
	}

	
	#cMobileNavigation {
		display: block;	
		width: 80%;
		width: calc(100% - 85px);
		background: white;
		position: fixed;
		top: 0;
		left: 100%;
	}
	body.ShowMobileNav #cMobileNavigation {
		margin-left: -80%;
		margin-left: calc(-100% + 85px);
	}
	#cH,
	#mainWrapper,
	#cF,
	#cMobileNavigation {
		-webkit-transition: margin-left 0.25s;
		        transition: margin-left 0.25s;
	}
	#cRS {
		-webkit-transition: right 0.25s;
		        transition: right 0.25s;
	}

	body.ShowMobileNav #cH,
	body.ShowMobileNav #mainWrapper,
	body.ShowMobileNav #cF {
		margin-left: -80%;
		margin-left: calc(-100% + 85px);
	}
	body.ShowMobileNav #cRS {
		right: 80%;
		right: calc(100% - 85px);
	}
	
	.PreviousNextLinks a.Next {
		right: 0;
	}		
		
	
	#outerWrapper.FilterAndSearch #cSearchAndFilter { height: 54px; }
	
	.babbageFilter {
		height: 54px;
		width: 50%;
		left: 0;
	}	
		.babbageFilter h3 { line-height: 54px; }
		.babbageFilter:hover ul { top: 54px; }
		

	#outerWrapper.HomeTemplate #cPCWrapper { margin-bottom: -1px; }
	#outerWrapper.HomeTemplate #cRS        { margin-bottom: -1px; }

	
	#mainWrapper {
		padding-bottom: 125px;  /* make room for the footer */
    }
	body.hasPreviousAndBackButtons #mainWrapper {
		padding-bottom: 205px;
	}	

	
	#cF .Copyright {
		height: 125px;
	/*	height: 15vw;*/
		max-height: 125px;
		padding: 20px;
		
		background: url(/templates/_images/footer-bg.png) bottom right no-repeat;
		background-size: auto 70px;
		
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
				box-sizing: border-box;         /* Opera/IE 8+ */			
	}
	
		
	#cF .Copyright {
		background-position: -moz-calc(100% + 10px) 100%;
		background-position: -webkit-calc(100% + 10px) 100%;
		background-position: calc(100% + 10px) 100% ;
	}			
		
}

/* 1 column layout */
@media screen and (max-width: 550px) {

	#outerWrapper {
		min-width: 320px;
	}
	
		#cH {
		height: 60px;
		position: fixed;
		top: 0;
		left: 0;
	}
	
		#mainWrapper {
			margin-top: 60px;
		}
		.HomeTemplate .ListHolder         { background: black; }
		.HomeTemplate .ListHolder.loading { background: none; }


	
				#cLogo a {
	
		background: url(/templates/_images/babbage-logo-mobile.png) 2em 17px no-repeat;
		background-size:133px 33px;
		padding:0;		
			}
			
	.ShowMobileNavButton {
		top: -100px;	
		right: 0;
	}
	
	#cN {
		width: 100%;
	}
	#outerWrapper.ContentTemplate #cPC {
		float: none;
		width: 100%
	}	
		#outerWrapper.ContentTemplate.contact #cPC .HTMLContent {
			padding: 2em 2em 0 2em;
		}	

	#cHero { height: 120vw; }
	#cHero { height: auto; }
	
	#cSecondary {
		float: none;
		width: 100%;
		margin: 0;
	}
	#cRS {
		width: 100%;
		position: relative;
		top: auto;
		right: auto;
		height: auto;
	}	
	#cSecondary .RightContentBox { height: 75vw; } /* 1 x grid height */
	#cRS        .RightContentBox { height: 75vw; } /* 1 x grid height */

	#cRS .RightContentBox.RightImage.RightYoutubeVideo,
	#cRS .RightContentBox.Testimonial {
		display: block;
	}	
	#cRS .RightContentBox.Testimonial {
		height: auto;
		min-height: 37.5vw;
	}


	.PreviousNextLinks {
		overflow: hidden;
	}
		.PreviousNextLinks a.Previous {
			margin-left: -13px;
			padding-right: 30px;
		}
		.PreviousNextLinks a.Next {
			margin-right: -13px;
			padding-left: 30px;
		}	
		
	.babbageFilter ul {	
		width: 200%;			
	}
	
	
	#outerWrapper.ContentTemplate #cPC .HTMLContent.hasMobileContent{ padding: 0 2em; }
	#outerWrapper.ContentTemplate #cPC .HTMLContent.hasMobileContent > p:first-child{ margin-top: 2em; } /* if the content doesn't have any headings, add some padding to the first paragraph */
}

@media screen and (max-width: 420px) {
	.babbageFilter h3 span {
		display: none;
	}
}


@media screen and (min-width: 1920px) {
	/*
	#cLogo {
		margin-left:0;
	}
	*/
}