header {
	grid-area: header;
	position:relative;
}
	header a.header_bar_logo {
		background-size:contain;
		background-position:center center;
		background-repeat:no-repeat;
		text-indent:-500em;
	}
	
	header div#inner {
		z-index:1;
		display:grid;
	}
	header div.header_logo {
		background-size:contain;
		background-position:center center;
		background-repeat:no-repeat;
		height:140px;
	}
	.header_heading {
		grid-area: hr;
		z-index:2;
		align-self:center;
		justify-self:center;
		padding:0;
	}
	.header_subheading {
		grid-area: sh;
		z-index:2;
		align-self:center;
		justify-self:center;
		padding:0;
	}
	header div.header_logo {
		grid-area:lo;
		align-self:stretch;
		height:auto;
		z-index:2;
	}

#header_bar {
	position:relative;
	z-index:1;
	display:grid;
	grid-gap:1rem;
	grid-template-columns:1fr;
}
	#header_bar>span {
		min-height:3rem;
		justify-self:center;
	}
	#header_bar.header_bar_mobile_hidden {
		display:none;
	}
	
	@media(min-width: 1000px) {
		#header_bar {
			padding:1rem;
			grid-template-columns:1fr 1fr 1fr;
		}
		#header_bar>* {
			align-content:center;
			width:100%;
		}
			#header_bar.header_bar_align_start>* {
				align-content:start;
			}
			#header_bar.header_bar_align_end>* {
				align-content:end;
			}
		#header_bar>*:nth-child(1) {
			display:grid;
			justify-content:start;
			background-position:left center;
		}
		#header_bar>*:nth-child(2) {
			display:grid;		
		}
		#header_bar>*:nth-child(3) {
			display:grid;
			justify-content:end;
			background-position:right center;
		}
		#header_bar.header_bar_mobile_hidden {
			display:grid;
		}
		
		
		/* single item */
		#header_bar>*:first-child:last-child {
			justify-content:center;
			grid-column: 1/4;
		}
		
		/* two items */
		#header_bar>*:first-child:nth-last-child(2) {
			justify-content:start;
			background-position:left center;
			grid-column: 1;
		}
		#header_bar>*:nth-child(2):last-child {
			justify-content:end;
			background-position:right center;
			grid-column: 3;
		}
		
		
	}
	
.header_bar_social_networks span {
	display:flex;
	margin:.5rem 0;
}
	.header_bar_social_networks a {
		height:32px;
		width:32px;
		margin:auto 4px;
		text-indent:-500rem;
		background-size:70%;
		background-position:center center;
		background-repeat:no-repeat;
		display:inline-block;
	}
	
	
#header_bar_search {
	display:inline;
}
	#header_bar_search input[type=search] {
	
	}
	#header_bar_search input[type=submit] {
	
	}
	
#header_slideshow {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:0;
}
	#header_slideshow>div {
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background-size:cover;
		background-position:center center;
	}
	
	/* MOBILE LAYOUTS */

	/* 0 = h1 and optional h3 */
	.header_layout0 div#inner {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;
		grid-template-areas: 
		"hr hr hr"
		;		
	}
	.header_layout0.with_strapline div#inner {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr 1fr;
		grid-template-areas: 
		"hr hr hr"
		"sh sh sh"
		;
	}
	/* 1,2,3,4 logo and h1 */
	.header_layout1 div#inner,
	.header_layout2 div#inner,
	.header_layout3 div#inner,
	.header_layout4 div#inner {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
		"lo lo lo"
		"hr hr hr"
		;	
	}
	.header_layout1.with_strapline div#inner,
	.header_layout2.with_strapline div#inner,
	.header_layout3.with_strapline div#inner,
	.header_layout4.with_strapline div#inner {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
		"lo lo lo"
		"hr hr hr"
		"sh sh sh"
		;	
	}
	
	/* 5 = logo only */
	.header_layout5 div#inner {
		grid-template-columns: repeat(3 1fr);
		grid-template-rows: 1fr;
		grid-template-areas: 
		"lo lo lo"
		;
	}
		
	/* 7 = no name or logo - background image/slideshow only */
	.header_layout7 div#inner {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas: 
		"xx"
		;
	}
	
	/* 9 = logo centred above name */
	.header_layout9 div#inner {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 2fr 1fr 1fr 1fr;
		grid-template-areas: 
		". . . . ."
		". lo lo lo ."
		"hr hr hr hr hr"
		"sh sh sh sh sh"
		;
	}	


@media(min-width: 1000px) {	
	
	div#inner {
		padding:0;
		margin:0 auto;
		max-width:1280px;
	}
		main.wide div#inner {
			/*
			width of article + aside - 2 gutters - 2 x article padding
			*/
			max-width:calc(90vw - var(--grid-gap) - var(--grid-gap) - 8rem);
		}
	
		/* DESKTOP LAYOUTS */
		
		/* 0 = h1 and optional h3 */
		.header_layout0 div#inner {
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: 1fr 1fr 3fr;
			grid-template-areas: 
			". . . "
			". . . "
			"hr hr hr"
			;		
		}
		.header_layout0.with_strapline div#inner {
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: 1fr 2fr 1fr;
			grid-template-areas: 
			". . . "
			"hr hr hr"
			"sh sh sh"
			;
		}

		/* 1,2,3,4 logo and h1 */
		.header_layout1 div#inner {
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: 1fr;
			grid-template-areas:
			"lo hr hr"
			;	
		}
		.header_layout1.with_strapline div#inner {
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: 1fr 1fr;
			grid-template-areas:
			"lo hr hr"
			"lo sh sh"
			;	
		}
		.header_layout2 div#inner {
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: 1fr;
			grid-template-areas:
			"hr hr lo"
			;	
		}
		.header_layout2.with_strapline div#inner {
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: 1fr 1fr;
			grid-template-areas:
			"hr hr lo"
			"sh sh lo"
			;	
		}
		.header_layout3 div#inner {
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: 1fr;
			grid-template-areas:
			"lo hr hr hr"
			;	
		}
		.header_layout3.with_strapline  div#inner {
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: 1fr 1fr;
			grid-template-areas:
			"lo hr hr hr"
			"lo sh sh sh"
			;	
		}
		.header_layout4 div#inner {
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: 1fr;
			grid-template-areas:
			"hr hr hr lo"
			;	
		}
		.header_layout4.with_strapline div#inner {
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: 1fr 1fr;
			grid-template-areas:
			"hr hr hr lo"
			"sh sh sh lo"
			;	
		}
		
		/* 5 = logo only */
				
}