/*  all the em measurements start from this setting
--------------------------------------------------------------------------------------- */
html { font-size: 16px; }


/*  global styles to reset default values
--------------------------------------------------------------------------------------- */
*,
*:before,
*:after { box-sizing: border-box; }

body, div, ul, li, img, video, section, figure, figcaption, main, footer, 
h1, h2, h3, p, a { margin: 0; padding: 0; border: 0; }

body { background: #ffffff; }


/*  this sets page width: 60em = 960px,  80 = 1280px, 90 = 1440px
--------------------------------------------------------------------------------------- */
.container { max-width: 90rem; padding: 0 .5rem; }
.container { margin: auto; background: #ffffff; }
.container { max-width: 95%; }


/* example web font styles using IBM Plex Sans
--------------------------------------------------------------------------------------- */
@font-face {
	font-family: Poppins-Regular;
	src: url(fonts/Poppins/Poppins-Regular.ttf);
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Poppins-Bold;
	src: url(fonts/Poppins/Poppins-Bold.ttf);
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: Poppins-Italic;
	src: url(fonts/Poppins/Poppins-Italic.ttf);
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: Poppins-Medium;
	src: url(fonts/Poppins/Poppins-Medium.ttf);
	font-weight: normal;
	font-style: normal;
}


body		{ font-family: Poppins-Regular, Arial, sans-serif; }
h1, h2		{ font-family: Poppins-Bold, Arial, sans-serif; }
p			{ font-family: Poppins-Regluar, Arial, sans-serif; }
figcaption	{ font-family: Poppins-Italic, Arial, sans-serif; }
h3			{ font-family: Poppins-Medium, Arial, sans-serif; }

/*  top navigation section
--------------------------------------------------------------------------------------- */

nav {
	padding: 1rem;
	margin-bottom: 6rem;
	border-bottom: 0px;
	min-height: 2rem;
	position:fixed;
	width:100%;
	top:0;
	z-index: 9999;
}

nav h1	{ font-size: 1.5rem; margin-bottom: 5rem; }
nav a	{ white-space: non; font-size: 1rem; padding: 0.2rem; }

nav ul		{ list-style-type: none; }
nav ul li	{  display: inline-block; margin-right: 6rem;  }




/*  main page title after top navigation
nav + h2 selects first <h2> after <nav>
--------------------------------------------------------------------------------------- */
nav + h2 {
	font-size: 4rem;
	line-height: 4rem;
	margin: 1rem .3rem 3rem;
	font-family: Poppins-Bold;
}

/*  main page box header
nav + h2 selects first <h2> after <nav>
--------------------------------------------------------------------------------------- */
.div.box{
	background:#fff06d;
	height: 33em;
	width: 100%;
	margin:0em;
	padding:5rem;
	padding-top:5rem;
	padding-right: 25%;
	font-size:1.5vmax;
	line-height:5vmax;

}

.div.yellow.box{
	background:#fff06d;
	height: 15em;
	width: 1fr;
	margin:0em;
	padding:5rem;
	padding-top:5rem;
	padding-right: 25%;
	font-size:1.5vmax;
	line-height:5vmax;

}

.div.red.box{
	background:#ff5b25;
	height: 20em;
	width: 135%;
	margin:0em;
	padding:5rem;
	padding-top:5rem;
	padding-right: 25%;
	font-size:1.5vmax;
	line-height:3.5vmax;

}


	
/*  Subtitle after top navigation
nav + h3 selects first <h3> after <nav>
--------------------------------------------------------------------------------------- */
.div.h3{
	font-size:3rem;
}

/*  hero image
.container > figure selects all <figure> where parent is .container
--------------------------------------------------------------------------------------- */
.container > figure { margin: 0 .5rem 2rem .5rem; }

.image-container {
	position: relative;
	display: inline-block;
}

.link-text {
	position: absolute;
	bottom: 10px;
	left: 10px;
	color: white;
	background-color: #ff5b25;
	display: none;
}

/*  main content: note padding on section
--------------------------------------------------------------------------------------- */
section { margin:0; padding: 0 .5rem 1.5rem; }

section h3, section div h3 { font-size: 2rem; line-height: 2.25rem; }

section figure { margin-bottom: 1.5rem; }

section figcaption { font-size: 1rem; }

section div { margin-top: -2rem; margin-right: 2rem; margin-left: 2rem}  /* to adjust type against images */

section div p {font-size: 1.5rem; line-height: 1.35em;}
/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; } /* max-width sets line length */
p { font-size: 1.5rem; line-height: 1.35em; }
/* p { line-height: 2.0625rem; } */ 


/*  media defaults to force image & video width to parent element width
--------------------------------------------------------------------------------------- */
img		{ width: 100%; height: auto; }

video	{ width: 100%; }

.max 	{ max-width: 100%; }  /* max-width can stop img element going bigger than its actual size */


/*  link styling
--------------------------------------------------------------------------------------- */
a			{ color: #00e; text-decoration: none; }
a:visited	{ color: rgb(0, 0, 0); }
a:hover		{ color: #ff5b25; }
a:active	{ color: #0e0; }

nav a			{ color: rgb(255, 255, 255); text-decoration: none; background-color: #000000;}
nav a:visited	{ color: rgb(255, 255, 255); }
nav a:hover		{ color: #ff5b25;  }
nav a:active	{ color: #0e0; }

.contact p { font-size: 2rem; text-align: center; }

/* 
IMPORTANT: media query - switches on grid layout if page width is wider than 768px
--------------------------------------------------------------------------------------- */
@media (min-width: 768px) {


/*  IMPORTANT: min-width:60em rule will stop the container from resizing  
60rem = 960px
90rem = 1440px
--------------------------------------------------------------------------------------- */
	.container { min-width: 60rem; min-width: 0; }

	.force-height { min-height: 100vh; }


/*  top navigation grid
--------------------------------------------------------------------------------------- */	
	nav {
		display: grid;
		grid-template-columns: 1fr auto;
		background: none;
		border-bottom: none;
		
	}


	nav ul { margin: 0; }



/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
	.container > h2 { 
		font-size: 3rem;
		line-height: 1.15em;
		margin: 3rem auto 4rem;
		text-align: center;
	}


/*  hero image
--------------------------------------------------------------------------------------- */
	h2 + figure { margin: 0; padding-bottom: 3rem; }
	h2 + figure img { display: block; }


/*  default desktop section styles
--------------------------------------------------------------------------------------- */
	section { padding: 0 .5rem 4rem; }

	section figure { margin: 0; }

	section h3 { margin-bottom: .5em; }


/*  section default 12 column grid
--------------------------------------------------------------------------------------- */
	section { 
		display: grid; 
		grid-template-rows: minmax(2.5rem, auto);
		grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd hd hd hd hd hd hd hd hd hd"
		"fg fg fg fg dv dv dv dv dv dv dv dv";
	}

	section h3		{ grid-area: hd; }
	section figure	{ grid-area: fg; }
	section div		{ grid-area: dv; }


	/*  bibliography
--------------------------------------------------------------------------------------- */
section.bib {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 3rem;
	grid-row-gap: .5rem;
	grid-template-areas:
	"hd hd hd"
	"dv dv dv";
}

section.bib h3		{ grid-area: hd; }
section.bib figure	{ grid-area: fg; }
section.bib div		{ grid-area: dv; }

section.bib h3		{ margin-top: -0.6rem; }
section.bib div		{ margin-top: 0; }
section.bib div	p	{ font-size: 1rem; }
/*  simple 3 column grid
--------------------------------------------------------------------------------------- */
	section.three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 2rem auto;
		grid-column-gap: 3rem;
		grid-row-gap: .5rem;
		grid-template-areas:
		"hd hd fg"
		"dv dv fg";
	}

	section.three h3		{ grid-area: hd; }
	section.three figure	{ grid-area: fg; }
	section.three div		{ grid-area: dv; }
	
	section.three h3		{ margin-top: -0.6rem; }
	section.three div		{ margin-top: 0; }

	/*  simple 4 column grid
--------------------------------------------------------------------------------------- */
section.four {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 2rem auto;
	grid-column-gap: 3rem;
	grid-row-gap: .5rem;
	grid-template-areas:
	"hd hd hd fg"
	"dv dv dv fg";
}

section.three h3		{ grid-area: hd; }
section.three figure	{ grid-area: fg; }
section.three div		{ grid-area: dv; }

section.three h3		{ margin-top: -0.6rem; }
section.three div		{ margin-top: 0; }


/*  3 column grid with right hand image
--------------------------------------------------------------------------------------- */	
	section.right {
		display: grid;
		grid-template-columns: 1fr 1fr minmax(20rem, 1fr);
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 1.5rem; grid-column-gap: 4rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd fg"
		"dv dv fg";
	}
	
	section.right h3		{ grid-area: hd; }
	section.right figure	{ grid-area: fg; }
	section.right div		{ grid-area: dv; }

	section.right h3		{ margin-top: 0; }
	section.right div		{ margin-top: 0; }


/*  wide right hand image spanning two columns
--------------------------------------------------------------------------------------- */

/*  3 column grid with left hand image
--------------------------------------------------------------------------------------- */	
section.left {
	display: grid;
	grid-template-columns: 1fr 1fr minmax(20rem, 1fr);
	grid-template-rows: minmax(2rem, auto) auto;
	grid-column-gap: 1.5rem; grid-column-gap: 4rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg hd hd"
	"fg dv dv"
	"fg dv dv";
}

section.left h3		{ grid-area: hd; }
section.left figure	{ grid-area: fg; }
section.left div		{ grid-area: dv; }

section.left h3		{ margin-top: 0; }
section.left div		{ margin-top: 0; }


/*  wide right hand image spanning two columns
--------------------------------------------------------------------------------------- */

	section.wide {
		display: grid;
		grid-template-columns: minmax(10rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd fg fg"
		"dv fg fg";
	}
	
	section.wide h3		{ grid-area: hd; }
	section.wide figure	{ grid-area: fg; }
	section.wide div	{ grid-area: dv; }



/*  intro
--------------------------------------------------------------------------------------- */
	section.intro {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 1.5rem;  
		grid-row-gap: 0rem;
		padding: 2rem;
		grid-template-areas:
		"hd dv dv dv";
	}

	section.intro h3	{ grid-area: hd; font-size: 2.5rem; }
	section.intro div	{ grid-area: dv; }

	section.intro div h3 
	section.intro div p	 { font-size: 1.5rem; line-height: 1.35em; }

	section.intro		{ margin-bottom: 4rem; }

	/*  
image text block rollover
--------------------------------------------------------------------------------------- */	

section.projects figure.roll img { 
	display:block; margin: 0; padding: 0; border: 0;
	}
	
	.projects a.one   { grid-area: f1; }
	.projects a.two   { grid-area: f2; }
	.projects a.three { grid-area: f3; }
	.projects a.four  { grid-area: f4; }
	.projects a.five  { grid-area: f5; }
	.projects a.six   { grid-area: f6; }
	
	.projects a,
	.projects a:hover {  text-decoration: none;  }
	
	
	figure.roll, figure.roll a { background: transparent; }
	figure.roll { max-width: 100%; transition:  0.3s ease; }
	figure.roll a { width: 100%; height: auto; }
	figure.roll figcaption { padding: .5em .75em; z-index:100; }
	
	figure.roll {
		display: grid;
		grid-template-rows: auto;
		grid-template-areas:
		"im";
	}
	
	figure.roll a, figure.roll figcaption { grid-area: im; }
	figure.roll figcaption { place-self: center; }
	figure.roll h3 { margin-bottom: .5em; margin-bottom: 0; }
	
	figure.roll figcaption { font-size:2em; text-align: center; opacity: 0; }
	
	figure.roll { border-radius: 3em 0; overflow: hidden; } 
	figure.roll:hover { border-radius: 0 3em; }
	figure.roll:hover img { opacity: 0.10; }
	
	figure.roll:active a { background: rgba(255, 255, 255, 0.9); border-radius: 3em; } 
	figure.roll:active img { opacity: 0; }
	
	figure.roll:hover figcaption { opacity: 1; color: rgb(0, 0, 0); }
	figure.roll:active figcaption { color: #eed; }
	
	

	/*  images-one-big
--------------------------------------------------------------------------------------- */
section.images-one-big {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"hd f1 f1"
	"d1 f1 f1";
}

section.images-one-big h3						{ grid-area: hd; }
section.images-one-big figure					{ grid-area: f1; }

section.images-one-big div 						{ grid-area: d1; }

section.images-one-big div h3 {font-size: 2rem; line-height:2.25;}
section.images-one-big div p { font-size: 1.5rem; line-height: 1.35em; }
/*  images-two
--------------------------------------------------------------------------------------- */
	section.images-two {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"f1 f2"
		"hd hd"
		"dv dv";
	}

	section.images-two h3						{ grid-area: hd; }
	section.images-two figure					{ grid-area: f1; }
	section.images-two figure:nth-of-type(2)	{ grid-area: f2; }
	section.images-two div 						{ grid-area: dv; }

	section.images-two div h3 {font-size: 2rem; line-height:2.25;}
	section.images-two div p { font-size: 1.5rem; line-height: 1.35em; }


/*  images-three
--------------------------------------------------------------------------------------- */
	section.images-three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2rem; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"f1 f2 f3"
		"h3 h3 h3"
		"dv dv dv";
	}

	section.images-three h3						{ grid-area: hd; }
	section.images-three figure					{ grid-area: f1; }
	section.images-three figure:nth-of-type(2)	{ grid-area: f2; }
	section.images-three figure:nth-of-type(3)	{ grid-area: f3; }
	section.images-three div					{ grid-area: dv; }

	section.images-three div h3 {font-size: 2rem; line-height:2.25;}
	section.images-three div p { font-size: 1.5rem; line-height: 1.35em; }

	/*  images-four-row
--------------------------------------------------------------------------------------- */
section.images-four-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f2 f3 f4"
	"f5 f6 f7 f8"
	"hd hd hd hd"
	"dv dv dv dv";
}

section.images-four-row h3						{ grid-area: hd; }
section.images-four-row figure					{ grid-area: f1; }
section.images-four-row figure:nth-of-type(2)	{ grid-area: f2; }
section.images-four-row figure:nth-of-type(3)	{ grid-area: f3; }
section.images-four-row figure:nth-of-type(4)	{ grid-area: f4; }
section.images-four-row figure:nth-of-type(5)	{ grid-area: f5; }
section.images-four-row figure:nth-of-type(6)	{ grid-area: f6; }
section.images-four-row figure:nth-of-type(7)	{ grid-area: f7; }
section.images-four-row figure:nth-of-type(8)	{ grid-area: f8; }
section.images-four-row div					{ grid-area: dv; }

section.images-four-row div h3 {font-size: 2rem; line-height:2.25;}
section.images-four-row div p { font-size: 1.5rem; line-height: 1.35em; }

	/*  images-four-row
--------------------------------------------------------------------------------------- */
section.image-four-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f2 f3 f4 f5"
	"f6 f6 dv dv dv"
	;
}

section.image-four-row h3						{ grid-area: hd; }
section.image-four-row figure					{ grid-area: f1; }
section.image-four-row figure:nth-of-type(2)	{ grid-area: f2; }
section.image-four-row figure:nth-of-type(3)	{ grid-area: f3; }
section.image-four-row figure:nth-of-type(4)	{ grid-area: f4; }
section.image-four-row figure:nth-of-type(5)	{ grid-area: f5; }
section.image-four-row figure:nth-of-type(6)	{ grid-area: f6; }
section.image-four-row figure:nth-of-type(7)	{ grid-area: f7; }
section.image-four-row div					{ grid-area: dv; }

section.image-four-row div h3 {font-size: 2rem; line-height:2.25;}
section.image-four-row div p { font-size: 1.5rem; line-height: 1.35em; }




	/*  images-five
--------------------------------------------------------------------------------------- */
section.images-five {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f2 f3 f4 f5"
	"dv dv dv dv dv";
}

section.images-five h3						{ grid-area: dv; }
section.images-five figure					{ grid-area: f1; }
section.images-five figure:nth-of-type(2)	{ grid-area: f2; }
section.images-five figure:nth-of-type(3)	{ grid-area: f3; }
section.images-five figure:nth-of-type(4)	{ grid-area: f4; }
section.images-five figure:nth-of-type(5)	{ grid-area: f5; }
section.images-five div					{ grid-area: dv; }

section.images-five div h3 {font-size: 2rem; line-height:2.25;}
section.images-five div p { font-size: 1.5rem; line-height: 1.35em; }

	/*  images-three-two
--------------------------------------------------------------------------------------- */
section.images-three-two {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f1 f2 f2 f3 f3"
	"f4 f4 dv dv dv dv"
	"f5 f5 dv dv dv dv";
}

section.images-three-two h3						{ grid-area: hd; }
section.images-three-two figure					{ grid-area: f1; }
section.images-three-two figure:nth-of-type(2)	{ grid-area: f2; }
section.images-three-two figure:nth-of-type(3)	{ grid-area: f3; }
section.images-three-two figure:nth-of-type(4)	{ grid-area: f4; }
section.images-three-two figure:nth-of-type(5)	{ grid-area: f5; }
section.images-three-two div					{ grid-area: dv; }

section.images-three-two div h3 {font-size: 2rem; line-height:2.25;}
section.images-three-two div p { font-size: 1.5rem; line-height: 1.35em; }

	/*  images-four-three
--------------------------------------------------------------------------------------- */
section.images-seven {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f2 f3 f4 f5 f6 f7"
	"dv dv dv dv dv dv dv";
}

section.images-seven h3						{ grid-area: hd; }
section.images-seven figure					{ grid-area: f1; }
section.images-seven figure:nth-of-type(2)	{ grid-area: f2; }
section.images-seven figure:nth-of-type(3)	{ grid-area: f3; }
section.images-seven figure:nth-of-type(4)	{ grid-area: f4; }
section.images-seven figure:nth-of-type(5)	{ grid-area: f5; }
section.images-seven figure:nth-of-type(6)	{ grid-area: f6; }
section.images-seven figure:nth-of-type(7)	{ grid-area: f7; }
section.images-seven div					{ grid-area: dv; }

section.images-seven div h3 {font-size: 2rem; line-height:2.25;}
section.images-seven div p { font-size: 1.5rem; line-height: 1.35em; }

	/*  imagesandtext-left image
--------------------------------------------------------------------------------------- */
section.imageandtext{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"hd hd hd"
	"f1 d1 d1"
	"f2 d1 d1"
	"f3 d1 d1"
}

section.imageandtext figure					{ grid-area: f1; }
section.imageandtext figure:nth-of-type(2)	{ grid-area: f2; }
section.imageandtext figure:nth-of-type(3)	{ grid-area: f3; }
section.imageandtext div					{ grid-area: d1; }
section.imageandtext div:nth-of-type(2)		{ grid-area: d1 }
section.imageandtext div:nth-of-type(3)		{ grid-area: d1}

section.imageandtext div h3 {font-size: 2rem; line-height:2.25;}
section.imageandtext div p { font-size: 1.5rem; line-height: 1.35em; }

	/*  imagesandtext-right image
--------------------------------------------------------------------------------------- */
section.imageandtext_r{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"d1 d1 f1"
	"d1 d1 f2"
	"d1 d1 f3"
}

section.imageandtext_r	figure					{ grid-area: f1; }
section.imageandtext_r	figure:nth-of-type(2)	{ grid-area: f2; }
section.imageandtext_r	figure:nth-of-type(3)	{ grid-area: f3; }
section.imageandtext_r	div						{ grid-area: d1; }
section.imageandtext_r	div:nth-of-type(2)		{ grid-area: d1 }
section.imageandtext_r	div:nth-of-type(3)		{ grid-area: d1}

section.imageandtext_r	div h3 {font-size: 2rem; line-height:2.25;}
section.imageandtext_r	div p { font-size: 1.5rem; line-height: 1.35em; }

/*  images-three-plus
--------------------------------------------------------------------------------------- */
	section.images-three-plus {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2rem; 
		grid-row-gap: 2rem;
		grid-template-areas:
		"f1 f2 f3"
		"d1 d2 d3";
	}

	section.images-three-plus figure				{ grid-area: f1; }
	section.images-three-plus figure:nth-of-type(2)	{ grid-area: f2; }
	section.images-three-plus figure:nth-of-type(3)	{ grid-area: f3; }
	section.images-three-plus div					{ grid-area: d1; }
	section.images-three-plus div:nth-of-type(2)	{ grid-area: d2; }
	section.images-three-plus div:nth-of-type(3)	{ grid-area: d3; }

	section.images-three-plus		{ padding: 0 0 2rem; }

	section.images-three-plus div h3 {font-size: 2rem; line-height:2.25;}
	section.images-three-plus div p { font-size: 1.5rem; line-height: 1.35em; }

	/*  images-six-plus
--------------------------------------------------------------------------------------- */
section.images-six-plus {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1rem; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f2 f3 f4 f5 f6"
	"d1 d2 d3 d4 d5 d6";
}

section.images-six-plus figure:nth-of-type(1)				{ grid-area: f1; }
section.images-six-plus figure:nth-of-type(2)	{ grid-area: f2; }
section.images-six-plus figure:nth-of-type(3)	{ grid-area: f3; }
section.images-six-plus figure:nth-of-type(4)	{ grid-area: f4; }
section.images-six-plus figure:nth-of-type(5)	{ grid-area: f5; }
section.images-six-plus figure:nth-of-type(6)	{ grid-area: f6; }
section.images-six-plus div:nth-of-type(1)				{ grid-area: d1; }
section.images-six-plus div:nth-of-type(2)	{ grid-area: d2; }
section.images-six-plus div:nth-of-type(3)	{ grid-area: d3; }
section.images-six-plus div:nth-of-type(4)	{ grid-area: d4; }
section.images-six-plus div:nth-of-type(5)	{ grid-area: d5; }
section.images-six-plus div:nth-of-type(6)	{ grid-area: d6; }

section.images-six-plus		{ padding: 0 0 2rem; }

section.images-six-plus div h3 {font-size: 2rem; line-height:2.25;}
section.images-six-plus div p { font-size: 1.5rem; line-height: 1.35em; }

	/*  images-six-plus-writing on left three images right
--------------------------------------------------------------------------------------- */
section.images-six-plus-writing {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1rem; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f2 f3 d1 d1 d1"
	"f4 f5 f6 d1 d1 d1"
	"f7 f8 f9 d1 d1 d1";
}

section.images-six-plus-writing figure:nth-of-type(1)	{ grid-area: f1; }
section.images-six-plus-writing figure:nth-of-type(2)	{ grid-area: f2; }
section.images-six-plus-writing figure:nth-of-type(3)	{ grid-area: f3; }
section.images-six-plus-writing figure:nth-of-type(4)	{ grid-area: f4; }
section.images-six-plus-writing figure:nth-of-type(5)	{ grid-area: f5; }
section.images-six-plus-writing figure:nth-of-type(6)	{ grid-area: f6; }
section.images-six-plus-writing figure:nth-of-type(7)	{ grid-area: f7; }
section.images-six-plus-writing figure:nth-of-type(8)	{ grid-area: f8; }
section.images-six-plus-writing figure:nth-of-type(9)	{ grid-area: f9; }
section.images-six-plus-writing div:nth-of-type(1)	{ grid-area: d1; }


section.images-six-plus-writing		{ padding: 0 0 2rem; }

section.images-six-plus-writing div h3 {font-size: 2rem; line-height:2.25;}
section.images-six-plus-writing div p { font-size: 1.5rem; line-height: 1.35em; }

/* full width - note grid on figure not section
--------------------------------------------------------------------------------------- */
	section.full { display: block; padding: 1rem 0 0; }

	section.full figure {
		grid-area: auto;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 0;
		grid-template-areas:
		"f1"
		"im";
	}

	section.full figure img			{ grid-area: im; }
	section.full figure figcaption	{ grid-area: f1; justify-self: center; }

	section.full					{ margin-bottom: 4rem; }
	section.full figure img			{ display: block; }
	section.full figcaption h3		{ font-size: 3rem; }


/* two columns
--------------------------------------------------------------------------------------- */
	section.two {
		display: grid;
		grid-template-columns: 2fr 3fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0;
		grid-template-areas:
		"fg hd"
		"fg dv";
	}


/* two columns right image
--------------------------------------------------------------------------------------- */
	section.two-right {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd fg"
		"dv fg";
	}


/* pull quote
--------------------------------------------------------------------------------------- */
	section.pull {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0;
		grid-row-gap: 0;
		grid-template-areas:
		"dv";
	}

	section.pull { margin-bottom: 4rem; }

	.pull p { font-size: 2rem; }


/* out of background
--------------------------------------------------------------------------------------- */
	section.colourbox {
		padding: 3rem;
		margin-bottom: 4rem;
	}

	.orange {
		background:#aaa;
	}


/*  custom section for about page
--------------------------------------------------------------------------------------- */
	section.about {
	display: grid;
	grid-template-columns: minmax(24rem, 5fr) 4fr 3fr;
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg dv dv";
	}


/*  section.video grid
--------------------------------------------------------------------------------------- */	
	section.video  {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 0;
		background: transparent;
		grid-template-areas:
		"v1 v1 v1 v1"
		"t2 t2 t2 t2";
	}

	section.video figure	{ grid-area: v1; }
	section.video figure	{ grid-area: v2; }
	section.video div		{ grid-area: d1; }

	section.video figure	{ padding:0; }
	section.video div		{ background: transparent; }
	section.video p			{ max-width: 32rem; color: #000000; font-size: 1.5rem; line-height: 1.35em; } 
	section.video h3		{ padding-top: 1rem;  }


	.small_video {
		width: 640px;
		height: auto;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 0;
		background: transparent;
		grid-template-areas:
		"v1 v1 d1 d1";
		
	}
	section.small_video div {grid-area: d1;}
	section.small_video div {margin-right: 10rem;}

	.extra_small_video {
		width: 320px;
		height: auto;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 0;
		background: transparent;
		grid-template-areas:
		"v1 v1 d1 d1"
		"v2 v2 d1 d1";
	}

	.little_small_video {
		
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 0;
		background: transparent;
		grid-template-areas:
		"v1 v2 d1 d1";
	}


	section.little_small_video figure.one	{ grid-area: v1; }
	section.little_small_video figure.two	{ grid-area: v2; }
	section.little_small_video div		{ grid-area: d1; }

	section.little_small_video figure	{ padding:0; }
	section.little_small_video div		{ background: transparent; }
	section.little_small_video p			{ max-width: 32rem; color: #000000; font-size: 1.5rem; line-height: 1.35em; } 
	section.little_small_video h3		{ padding-top: 1rem; }

	.text_video {
		
		display: grid;
		grid-template-columns: repeat(1fr 1fr 1fr 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 0;
		background: transparent;
		grid-template-areas:
		"v1 v1 d1 d1";
	}


	section.text_video figure.one	{ grid-area: v1; }
	section.text_video div		{ grid-area: d1; }

	section.text_video figure	{ padding:0; }
	section.text_video div		{ background: transparent; }
	section.text_video p		{ font-size: 1.5rem; line-height: 1.35em; } 
	section.text_video h3		{ padding-top: 1rem; }
	section.text_video div		{ margin-right: 10rem;}

	section.three_video {
		
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 0;
		background: transparent;
		grid-template-areas:
		"d1 d1 d1 v1"
		"d1 d1 d1 v2"
		"d1 d1 d1 v3";
	}


	section.three_video figure.one	{ grid-area: v1; }
	section.three_video figure.two	{ grid-area: v2; }
	section.three_video figure.three	{ grid-area: v3; }
	section.three_video div		{ grid-area: d1; }

	section.three_video figure	{ padding:0; }
	section.three_video div		{ background: transparent; }
	section.three_video p			{ font-size: 1.5rem; line-height: 1.35em; }
	section.three_video h3		{ padding-top: 1rem; }

	section.three_across_video {
		
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 0;
		background: transparent;
		grid-template-areas:
		"v1 v2 v3"
		"d1 d1 d1"
		"d1 d1 d1";
	}


	section.three_across_video figure.one	{ grid-area: v1; }
	section.three_across_video figure.two	{ grid-area: v2; }
	section.three_across_video figure.three	{ grid-area: v3; }
	section.three_across_video div		{ grid-area: d1; }

	section.three_across_video figure	{ padding:0; }
	section.three_across_video div		{ background: transparent; }
	section.three_across_video p		{ font-size: 1.5rem; line-height: 1.35em; } 
	section.three_across_video h3		{ padding-top: 3rem; }


	
	section.three_big_across_video {
		
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 0;
		background: transparent;
		grid-template-areas:
		"d1 d1 v1"
		"d1 d1 v2"
		"d1 d1 v3";
	}


	section.three_big_across_video figure.one	{ grid-area: v1; }
	section.three_big_across_video figure.two	{ grid-area: v2; }
	section.three_big_across_video figure.three	{ grid-area: v3; }
	section.three_big_across_video div		{ grid-area: d1; }

	section.three_big_across_video figure	{ padding:0; }
	section.three_big_across_video div		{ background: transparent; }
	section.three_big_across_video p			{ font-size: 1.5rem; line-height: 1.35em; }
	section.three_big_across_video h3		{ padding-top: 1rem; }



	section.audio h4 {grid-area:hv;}
	section.audio figure.col1 {grid-area:af;}
	section.audio figure.col2 {grid-area:ag;}
	section.audio figure.col3 {grid-area:ah}
	section.audio figure.col4 {grid-area:ai;}
	section.audio figure.col5 {grid-area:aj}
	section.audio figure.co16 {grid-area:ak}
	section.audio div.lcol1 {grid-area: al; }
	section.audio div.rcol1 {grid-area:am;}
	section.audio div.lcol2 {grid-area:an}
	section.audio div.rcol2 {grid-area:ao;}


/*  home page auto grid
--------------------------------------------------------------------------------------- */		
section.home {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"h1 h1 h1"
	"h2 h3 h4";
}

section.home { padding: 0 .5rem 2rem; }

section.home figure.one   { grid-area: h1; }
section.home figure.two   { grid-area: h2; }
section.home figure.three { grid-area: h3; }
section.home figure.four  { grid-area: h4; }


/*  projects page auto grid
--------------------------------------------------------------------------------------- */		
section.projects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f2"
	"f3 f4";
}

.projects figure.one   { grid-area: f1; }
.projects figure.two   { grid-area: f2; }
.projects figure.three { grid-area: f3; }
.projects figure.four  { grid-area: f4; }


/*  project page reflection section
--------------------------------------------------------------------------------------- */		
section.reflection {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"rh rh"
	"d1 d2";
}

section.reflection h3		{ grid-area: rh; }
section.reflection div		{ grid-area: d1; }
section.reflection div.two	{ grid-area: d2; }

section.reflection div p a { display: block; }


} /* end 768px media query */


/*  for big screens - currently just for testing
--------------------------------------------------------------------------------------- */
@media (min-width: 18000px) {
	html { font-size: 24px; }
}