/*  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: #333333; }


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


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

@font-face {
	font-family: Plex-Bold;
	src: url(fonts/IBM-Plex-Sans/IBMPlexSans-Bold.woff2);
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: Plex-Italic;
	src: url(fonts/IBM-Plex-Sans/IBMPlexSans-Italic.woff2);
	font-weight: normal;
	font-style: italic;
}



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

@font-face {
	font-family: poppins-black;
	src: url(fonts\Poppins\Poppins-Black.ttf);
	font-weight: normal;
	font-style: normal;
}

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



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

@font-face {
	font-family: nova-square;
	src: url(fonts/Nova_Square/NovaSquare-Regular.ttf);
	font-weight: normal;
	font-style: normal;
}


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


body		{ font-family: poppins-black, plex, Arial, sans-serif; color: #a2cbdd;}
h1, h2, h3	{ font-family: Bungee, nova-square, poppins-black, plex-bold, Arial, sans-serif; color: #a2cbdd;}
p			{ font-family: poppins-black, plex, Arial, sans-serif; color: #a2cbdd;}
figcaption	{ font-family: poppins-black, plex, Arial, sans-serif; color: #a2cbdd;}





/*  top navigation section
--------------------------------------------------------------------------------------- */
nav 	{ padding: 2rem 1rem 0.5rem 1rem; min-height: 2rem; border-bottom: 5px none; }
nav h1	{ font-size: 1.75rem; margin-bottom: 0rem; }
nav a	{ white-space: nowrap;}

nav ul		{ list-style-type: none;}
nav ul li	{ font-size: 1.75rem; display: inline-block; margin-right: 2em;}

.navalign {margin-top: 1.5em; margin-right: 3em;}


/*  main page title after top navigation
nav + h2 selects first <h2> after <nav>
--------------------------------------------------------------------------------------- */
nav + h2 {
	font-size: 2rem;
	line-height: 2.15rem;
	margin: 1rem .5rem 3rem;
	color: #f7aec2;
}

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


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

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

section figure { margin-bottom: 1rem; }

section figcaption { font-size: 1rem; }

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


/*  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.375em; }
/* 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 for navigation
--------------------------------------------------------------------------------------- */
a			{ color: #eeede7; text-decoration: none; }
a:visited	{ color: #eeede7; }
a:hover		{ color: #a2cbdd; text-decoration: none; }
a:active	{ color: #a2cbdd; }

nav a			{ color: #eeede7; text-decoration: none; }
nav a:visited	{ color: #eeede7; }
nav a:hover		{ color: #a2cbdd; text-decoration: none; }
nav a:active	{ color: #a2cbdd; }

.contact p { font-size: 3rem; 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; color: #333333;}

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


/*  top navigation grid
--------------------------------------------------------------------------------------- */	
	nav {
		display: flex;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0em;
		grid-template-columns: 1fr auto;
		background: none;
		border-bottom: .1em solid #eeede7;
		position: fixed;
		justify-content: space-between;
		align-items: center;
		background-color: #333333;
		z-index: 1000;
	}

	nav h1	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0; }

	nav ul { margin: 0; }
	nav ul li { font-size: 2rem; margin: 0 0 0 1.25rem; }


/*  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-columns: repeat(12, 1fr);
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 2em;
		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; }


/*  simple 3 column grid
--------------------------------------------------------------------------------------- */

section.three {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 2rem auto;
	grid-column-gap: 2rem;
	grid-row-gap: .5rem;
	grid-template-areas:
	"fg hd hd"
	"fg dv dv";
}

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 coloumn grib mine
--------------------------------------------------------------------------------------- */	

section.my-two-image-test {
	display: grid;
	grid-template-columns: 1fr 1fr .31fr;
	grid-template-rows: 2rem auto;
	grid-column-gap: 2rem;
	grid-row-gap: .5rem;
	grid-template-areas:
	"f1 hd f2"
	"f1 dv f2" ;
}

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

section.my-two-image-test h3		{ margin-top: -0.6rem; }
section.my-two-image-test div		{ margin-top: 0; }


/*  my test grid
--------------------------------------------------------------------------------------- */	


	section.my-test {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 2rem auto;
		grid-column-gap: 2rem;
		grid-row-gap: .5rem;
		grid-template-areas:
		"hd fg fg"
		"dv fg fg";
	}

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


/*  3 column grid with right hand image
--------------------------------------------------------------------------------------- */	

	section.right {
		display: grid;
		grid-template-columns: minmax(20rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 2em;
		grid-row-gap: 0;
		grid-template-areas:
		"hd fg fg"
		"dv fg 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; margin-bottom: .6rem; }
	section.right div		{ margin-top: 0; }

/*----two image right in one column and header next to */
	section.righty {
		display: grid;
		grid-template-columns: minmax(20rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 2em;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd fg"
		"dv dv fg"
		"dv dv f2"
		"dv dv f2";
	}
	
	section.righty h3		{ grid-area: hd; }
	section.righty figure	{ grid-area: fg; }
	section.righty figure:nth-of-type(2)	{ grid-area: f2; }
	section.righty div		{ grid-area: dv; }

	section.righty h3		{ margin-top: 0; margin-bottom: .6rem; }
	section.righty div		{ margin-top: 0; }


/*----two images left in one column header next to*/
	section.lefty {
		display: grid;
		grid-template-columns: minmax(20rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 2em;
		grid-row-gap: 0;
		grid-template-areas:
		"fg hd hd"
		"fg dv dv"
		"f2 dv dv"
		"f2 dv dv";
	}

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

	section.lefty h3		{ margin-top: 0; margin-bottom: .6rem; }
	section.lefty div		{ margin-top: 0; }



/*----right image header next to*/
	section.ri {
		display: grid;
		grid-template-columns: minmax(20rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 2em;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd fg"
		"dv dv fg";
	}
	
	section.ri h3		{ grid-area: hd; }
	section.ri figure	{ grid-area: fg; }
	section.ri div		{ grid-area: dv; }

	section.ri h3		{ margin-top: 0;  margin-bottom: .6rem; }
	section.ri div		{ margin-top: 0; }





/*----right image header on top*/
	section.rih {
		display: grid;
		grid-template-columns: minmax(20rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 2em;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd"
		"dv dv fg"
		"dv dv fg";
	}
	
	section.rih h3		{ grid-area: hd; }
	section.rih figure	{ grid-area: fg; }
	section.rih div		{ grid-area: dv; }

	section.rih h3		{ margin-top: 0;  margin-bottom: .6rem; }
	section.rih div		{ margin-top: 0; }



/*----big image left header next to*/
	section.left {
		display: grid;
		grid-template-columns: minmax(20rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 2em;
		grid-row-gap: 0;
		grid-template-areas:
		"fg fg hd"
		"fg fg 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; margin-bottom: .6rem; }
	section.left div		{ margin-top: 0; }

/*----smaller image left header next to*/
	section.le {
		display: grid;
		grid-template-columns: minmax(20rem, 1fr) 1fr 1fr;
		grid-template-rows: 0fr 1fr;
		grid-column-gap: 2em;
		grid-row-gap: 0;
		grid-template-areas:
		"fg hd hd"
		"fg dv dv";
	}
	
	section.le h3		{ grid-area: hd; }
	section.le figure	{ grid-area: fg; }
	section.le div		{ grid-area: dv; }

	section.le h3		{ margin-top: 0;  margin-bottom: .6rem; }
	section.le div		{ margin-top: 0; }


/*----header on top image left underneath*/
	section.leh {
		display: grid;
		grid-template-columns: minmax(20rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 2em;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd"
		"fg dv dv"
		"fg dv dv";
	}
	
	section.leh h3		{ grid-area: hd; }
	section.leh figure	{ grid-area: fg; }
	section.leh div		{ grid-area: dv; }

	section.leh h3		{ margin-top: 0;  margin-bottom: .6rem; }
	section.leh div		{ margin-top: 0; }


	/*----six images six columns*/
	section.six {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 2em;
		grid-row-gap: 0;
		grid-template-areas:
		"f1 f2 f3 f4 f5 f6"
		"hd hd hd hd hd hd"
		"dv dv dv dv dv dv";
	}

	section.six figure 	{ grid-area: f1; }
	section.six figure:nth-of-type(2)  	{ grid-area: f2; }
	section.six figure:nth-of-type(3)	{ grid-area: f3; }
	section.six figure:nth-of-type(4)	{ grid-area: f4; }
	section.six figure:nth-of-type(5)	{ grid-area: f5; }
	section.six figure:nth-of-type(6)	{ grid-area: f6; }

	section.six h3		{ grid-area: hd; }
	section.six div		{ grid-area: dv; }

	section.six h3		{ margin-top: 1em; margin-bottom: .6rem; }
	section.six div		{ margin-top: 0; }


/*----siximages in three columns*/
	section.siximg {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 2em;
		grid-row-gap: 0;
		grid-template-areas:
		"f1 f2 f3"
		"f4 f5 f6"
		"hd hd hd"
		"dv dv dv";
	}

	section.siximg figure 	{ grid-area: f1; }
	section.siximg figure:nth-of-type(2)  	{ grid-area: f2; }
	section.siximg figure:nth-of-type(3)	{ grid-area: f3; }
	section.siximg figure:nth-of-type(4)	{ grid-area: f4; }
	section.siximg figure:nth-of-type(5)	{ grid-area: f5; }
	section.siximg figure:nth-of-type(6)	{ grid-area: f6; }

	section.siximg h3		{ grid-area: hd; }
	section.siximg div		{ grid-area: dv; }

	section.siximg h3		{ margin-top: 1em; margin-bottom: .6rem; }
	section.siximg 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: 2em;
		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;
		grid-template-rows: auto;
		grid-column-gap: 2em;  
		grid-row-gap: 0;
		grid-template-areas:
		"dv dv dv";
	}

	section.intro h3	{ grid-area: hd; }
	section.intro div	{ grid-area: dv; }

	section.intro div h3,
	section.intro div p	{ font-size: 2rem; }

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


/*  images-two
--------------------------------------------------------------------------------------- *


/*----big figure 2/3
	section.boards {
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-template-rows: .1fr 1fr;
		grid-column-gap: 2em; 
		grid-row-gap: 0em;
		grid-template-areas:
		"f1 hd"
		"f1 dv";
	}

	section.boards h3						{ grid-area: hd; }
	section.boards figure					{ grid-area: f1; }
	section.boards div 						{ grid-area: dv; }

	section.boards div h3,
	section.boards div p { font-size: 1.5rem; }


/*----board code reversed
	section.boardsrev {
		display: grid;
		grid-template-columns: 1fr 1.5fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"hd hd"
		"dv f1"
		"dv f1";
	}

	section.boardsrev h3						{ grid-area: hd; }
	section.boardsrev figure					{ grid-area: f1; }
	section.boardsrev div 						{ grid-area: dv; }

	section.boardsrev div h3,
	section.boardsrev div p { font-size: 1.5rem; }

	---*/




/*----big text*/
	section.prointro {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"hd hd"
		"dv dv";
	}

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

	section.prointro div h3,
	section.prointro div p { font-size: 1.5rem; }







	/*----age uk logo*/
	section.age {
		display: grid;
		grid-template-columns: 3fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"hd hd"
		"dv dv"
		"f1 ..";
	}

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

	section.age div h3,
	section.age div p { font-size: 1.5rem; }



/*----Colour palette website*/
	section.colpal {
		display: grid;
		grid-template-columns: 2.25fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: .5rem;
		grid-template-areas:
		"f1 f2";
	}

	section.colpal figure					{ grid-area: f1; }
	section.colpal figure:nth-of-type(2)	{ grid-area: f2; }




/*----Make long image shorter on right hand side*/
	section.long {
		display: grid;
		grid-template-columns: 1fr .2fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"hd f1"
		"dv f1"
		".. f1";
	}

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

	section.long div h3,
	section.long div p { font-size: 1.5rem; }






/*  images-three
--------------------------------------------------------------------------------------- */
	section.images-three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"f1 f2 f3"
		"hd hd hd"
		"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,
	section.images-three div p { font-size: 1.5rem; }


/*  images-three-plus
--------------------------------------------------------------------------------------- */
	section.images-three-plus {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		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,
	section.images-three-plus div p { font-size: 1.5rem; }



/*----Three big images on the right*/
	section.threer {
		display: grid;
		grid-template-columns: 2fr 2fr 2fr 2fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: 2rem;
		grid-template-areas:
		"hd f1 f2 f3"
		"d1 f1 f2 f3"
		"d1 f1 f2 f3";
	}

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

	section.threer div h3,
	section.threer div p { font-size: 1.5rem; }




	/*----For my character design main on motion*/
	section.threeman {
		display: grid;
		grid-template-columns: 2fr 2.5fr 2fr 1.33fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: 2rem;
		grid-template-areas:
		"hd f1 f2 f3"
		"d1 f1 f2 f3"
		"d1 f1 f2 f3";
	}

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

	section.threeman div h3,
	section.threeman div p { font-size: 1.5rem; }





/*----Three on left side with header not on top*/
	section.threel {
		display: grid;
		grid-template-columns: 2fr 2fr 2fr 4fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: 2rem;
		grid-template-areas:
		"f1 f2 f3 hd"
		"f1 f2 f3 d1"
		"f1 f2 f3 d1";
	}

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

	section.threel div h3,
	section.threel div p { font-size: 1.5rem; }


/*----Two images on the left headder not on top*/
	section.twotop {
		display: grid;
		grid-template-columns: 2fr 2fr 4fr;
		grid-template-rows: 0fr 0fr 1fr;
		grid-column-gap: 2em; 
		grid-row-gap: 2rem;
		grid-template-areas:
		"f1 f2 hd"
		"f1 f2 d1"
		"f1 f2 d1";
	}

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

	section.twotop div h3,
	section.twotop div p { font-size: 1.5rem; }


/*----two images right*/
	section.twor {
		display: grid;
		grid-template-columns: 3fr 1.65fr 1.098fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: 1em;
		grid-template-areas:
		"hd f1 f2"
		"d1 f1 f2"
		"d1 f1 f2";
	}

	section.twor figure				{ grid-area: f1; }
	section.twor figure:nth-of-type(2)	{ grid-area: f2; }
	section.twor div					{ grid-area: d1; }
	
	section.twor		{ padding: 0 0 2rem; }

	section.twor div h3,
	section.twor div p { font-size: 1.5rem; }


/*----two images left under header smaller than type*/
	section.twol {
		display: grid;
		grid-template-columns: .9fr 2fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: 1em;
		grid-template-areas:
		"hd hd hd"
		"f1 dv dv"
		"f2 d2 d2";
	}

	section.twol figure				{ grid-area: f1; }
	section.twol figure:nth-of-type(2)	{ grid-area: f2; }
	section.twol div					{ grid-area: dv; }
	section.twol div:nth-of-type(2)		{ grid-area: d2; }
	
	section.twol		{ padding: 0 0 2rem; }

	section.twol div h3,
	section.twol div p { font-size: 1.5rem; }


/*----four under header on the right hand side*/
	section.sidefour {
		display: grid;
		grid-template-columns: 2fr 1.1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: 2rem;
		grid-template-areas:
		"hd hd hd hd"
		"dv f1 f2 f2"
		"dv f4 f3 f3";
	}

	section.sidefour figure				{ grid-area: f1; }
	section.sidefour figure:nth-of-type(2)	{ grid-area: f2; }
	section.sidefour figure:nth-of-type(3)	{ grid-area: f3; }
	section.sidefour figure:nth-of-type(4)	{ grid-area: f4; }
	section.sidefour figure:nth-of-type(5)	{ grid-area: f5; }
	section.sidefour div					{ grid-area: dv; }
	
	section.sidefour		{ padding: 0 0 2rem; }

	section.sidefour div h3,
	section.sidefour div p { font-size: 1.5rem; }



	/*----four images on top*/
	section.fourgrid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2em; 
		grid-row-gap: 2rem;
		grid-template-areas:
		"f1 f2"
		"f3 f4";
	}

	section.fourgrid figure				{ grid-area: f1; }
	section.fourgrid figure:nth-of-type(2)	{ grid-area: f2; }
	section.fourgrid figure:nth-of-type(3)	{ grid-area: f3; }
	section.fourgrid figure:nth-of-type(4)	{ grid-area: f4; }
	section.fourgrid div					{ grid-area: dv; }
	
	section.fourgrid		{ padding: 0 0 ; }

	section.fourgrid div h3,
	section.fourgrid div p { font-size: 1.5rem; }




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

	section.eight figure				{ grid-area: f1; }
	section.eight figure:nth-of-type(2)	{ grid-area: f2; }
	section.eight figure:nth-of-type(3)	{ grid-area: f3; }
	section.eight figure:nth-of-type(4)	{ grid-area: f4; }
	section.eight figure:nth-of-type(5)	{ grid-area: f5; }
	section.eight figure:nth-of-type(6)	{ grid-area: f6; }
	section.eight figure:nth-of-type(7)	{ grid-area: f7; }
	section.eight figure:nth-of-type(8)	{ grid-area: f8; }
	section.eight div					{ grid-area: dv; }
	
	section.eight		{ padding: 0 0 2rem; }

	section.eight div h3,
	section.eight div p { font-size: 1.5rem; }

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

	section.nine figure				{ grid-area: f1; }
	section.nine figure:nth-of-type(2)	{ grid-area: f2; }
	section.nine figure:nth-of-type(3)	{ grid-area: f3; }
	section.nine figure:nth-of-type(4)	{ grid-area: f4; }
	section.nine figure:nth-of-type(5)	{ grid-area: f5; }
	section.nine figure:nth-of-type(6)	{ grid-area: f6; }
	section.nine figure:nth-of-type(7)	{ grid-area: f7; }
	section.nine figure:nth-of-type(8)	{ grid-area: f8; }
	section.nine figure:nth-of-type(9)	{ grid-area: f9; }
	section.nine div					{ grid-area: dv; }
	
	section.nine		{ padding: 0 0 2rem; }

	section.nine div h3,
	section.nine div p { font-size: 1.5rem; }

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

	section.four figure				{ grid-area: f1; }
	section.four figure:nth-of-type(2)	{ grid-area: f2; }
	section.four figure:nth-of-type(3)	{ grid-area: f3; }
	section.four figure:nth-of-type(4)	{ grid-area: f4; }

	section.four div					{ grid-area: dv; }
	
	section.four		{ padding: 0 0 2rem; }

	section.four div h3,
	section.four div p { font-size: 1.5rem; }


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

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

	section.five div					{ grid-area: dv; }
	
	section.five		{ padding: 0 0 2rem; }

	section.five div h3,
	section.five div p { font-size: 1.5rem; }



/* 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: 2rem;
		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: 2rem;
		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: 2em;
		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;
	}


	/*----blue for pages*/
	section.blue {
		background:#a2cbdd;
	}

	section.blue h1	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0;color: #333333; }
	section.blue h2	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0; color: #333333; }
	section.blue h3	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0; color: #333333; }

	section.blue p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; color: #333333; }
	section.blue p { font-size: 1.5rem; line-height: 1.375em; color: #333333;}

	section.blue h4 { margin: 0 0 1rem 0; max-width: 30em; max-width: 42em; text-align: center; color: #333333; }
	section.blue h4 { font-size: 2rem; line-height: 1.375em; text-align: center; color: #333333; }



/*----pale pink*/
	.palep {
		background:#f7aec2;
	}

	/*----black*/
	.black {
		background: #333333
	}

/*----pink box*/
	.pink {
		background: #ad5267;
		width: 1fr;
		height: 10em;
		margin: 0;
		padding: 3em;
		padding-top: 5em;
	}

/*----big pink box*/
	.bigpink {
		background: #a2cbdd;
		width: 1fr;
		height: auto;
		margin: 0;
		padding: 3em;
		padding-top: 5em;
	}


/*----contact pink box*/
	.pinkcont {
		background: #ad5267;
		width: 1fr;
		height: auto;
		margin: 0;
		padding: 3em;
		padding-top: 2em;
	}



/*  other pages */
	.whiteboxa {
		background: #333333;
		width: 1fr;
		height: 100;
		margin: 0;
		padding-left: 3em;
		padding-right: 3em;
		padding-top: em;
	}
	.whiteboxa h1	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0;color: #a2cbdd; }
	.whiteboxa h2	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0; color: #a2cbdd; }
	.whiteboxa h3	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0; color: #a2cbdd; }

	.whiteboxa p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em;  color: #eeede7; }
	.whiteboxa p { font-size: 1.5rem; line-height: 1.375em; color: #eeede7;}

	.whiteboxa h4 { margin: 0 0 1rem 0; max-width: 30em; max-width: 42em; text-align: center; color: #a2cbdd; }
	.whiteboxa h4 { font-size: 2rem; line-height: 1.375em; color: #457682; }


/*----white box for spacing*/
	.whiteboxbreak {
		background: #333333;
		width: 1fr;
		height: 2em;
		margin: 0;
		padding: 0em;
		padding-top: 5em;
	}



	/*----contact*/
	.boxcont {
		background: #333333;
		width: 1fr;
		height: auto;
		margin: 0;
		padding: 0em;
		padding-top:em;
		padding-bottom: 1.2em;
	}

	.boxcont h3 { font-size: 3em; text-align: center;}
	.boxcont h4 {font-size: 2em; color: #eeede7; text-align: center;}
	.boxcont div p {font-size: 1em; color: #eeede7; text-align: center;}







	/*----black box for spacing*/
	.blackboxbreak {
		background: #333;
		width: 1fr;
		height: 1em;
		margin: 0;
		padding: 0em;
		padding-top: 0em;
	}
/*----black box on home page*/
	.blackboxhome {
		background: #333333;
		width: 1fr;
		height: 0.1em;
		margin: 0;
		padding: 0em;
		padding-top: 0em;
	}


/*  custom section for about page
--------------------------------------------------------------------------------------- */
	section.about {
	display: grid;
	grid-template-columns:1fr 4fr 4fr;
	grid-template-rows: auto;
	grid-column-gap: 2em;
	grid-row-gap: 0;
	padding-top: 2em;
	grid-template-areas:
	"fg hd hd"
	"fg h2 h2"
	"fg dv dv"
	"f2 dv dv"
	"f2 dv dv"
	"f2 dv dv";
	}

	.about p {font-size: 1.2em;}
	.about h3 {grid-area: h2; font-size: 1.5em; padding-bottom: 1em;}
	.about h2 {grid-area: hd; font-size: 3em;}

	
	section.about figure				{ grid-area: fg; }
	section.about figure:nth-of-type(2)	{ grid-area: f2; }


	.abcont {font-size: 1.2em; color: #a2cbdd; font-family: Bungee; }

	.outcont {font-size: 1.2em;}





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

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

	section.video figure	{ padding:0; }
	section.video div		{ background: transparent; }
	section.video p			{ max-width: 32rem; color: #a2cbdd; }
	section.video h3		{ padding-top: 1rem; }


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


/*  projects page auto grid
--------------------------------------------------------------------------------------- */		
section.projects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2em;
	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: 2em;
	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; }


section.reflection h3 {color: #a2cbdd;}
section.reflection div {color: #eeede7;}
section.reflection div.two {color: #eeede7;}
section.reflection div p a {color: #a2cbdd;}
section.reflection div p {color: #eeede7;}


} /* end 768px media query */


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







/*  OWN CODE FROM HERE!!!
--------------------------------------------------------------------------------------- */


/*  link styling for everything else
--------------------------------------------------------------------------------------- */

section.linksother{
a			{ color: #eeede7; text-decoration: none; }
a:visited	{ color: #eeede7; }
a:hover		{ color: #457682; text-decoration: none; }
a:active	{ color: #457682; }

nav a			{ color: #eeede7; text-decoration: none; }
nav a:visited	{ color: #eeede7; }
nav a:hover		{ color: #457682; text-decoration: none; }
nav a:active	{ color: #457682; }

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

/*  link styling for contact
--------------------------------------------------------------------------------------- */

.linkcont{
a			{ color: #457682; text-decoration: none; }
a:visited	{ color: #457682; }
a:hover		{ color: #a2cbdd; text-decoration: none; }
a:active	{ color: #a2cbdd; }
    
nav a			{ color: #457682; text-decoration: none; }
nav a:visited	{ color: #457682; }
nav a:hover		{ color: #a2cbdd; text-decoration: none; }
nav a:active	{ color: #a2cbdd; }
    
.contact p { font-size: 20rem; text-align: center; }
}


.contsize
p {font-size: 5rem; color: #457682;}

.contali
p {text-align: center}


/*  home page Mai link
--------------------------------------------------------------------------------------- */
.linkmai{
	a			{ color: #a2cbdd; text-decoration: none; }
	a:visited	{ color: #a2cbdd; }
	a:hover		{ color: #457682; text-decoration: none; }
	a:active	{ color: #457682; }
	
	nav a			{ color: #a2cbdd; text-decoration: none; }
	nav a:visited	{ color: #a2cbdd; }
	nav a:hover		{ color: #457682; text-decoration: none; }
	nav a:active	{ color: #457682; }
	
	.contact p { font-size: 3rem; text-align: center; }
	}




	.linktouch{
		a			{ color: #a2cbdd; text-decoration: none; }
		a:visited	{ color: #a2cbdd; }
		a:hover		{ color: #eeede7; text-decoration: none; }
		a:active	{ color: #eeede7; }
		
		nav a			{ color: #a2cbdd; text-decoration: none; }
		nav a:visited	{ color: #a2cbdd; }
		nav a:hover		{ color: #eeede7; text-decoration: none; }
		nav a:active	{ color: #eeede7; }
		
		.contact p { font-size: 3rem; text-align: center; }
		}

		/*  contact page insta & LinkedIn
--------------------------------------------------------------------------------------- */
.linkil{
	a			{ color: #a2cbdd; text-decoration: none; }
	a:visited	{ color: #a2cbdd; }
	a:hover		{ color: #457682; text-decoration: none; }
	a:active	{ color: #457682; }
	
	nav a			{ color: #a2cbdd; text-decoration: none; }
	nav a:visited	{ color: #a2cbdd; }
	nav a:hover		{ color: #457682; text-decoration: none; }
	nav a:active	{ color: #457682; }
	
	.contact p { font-size: 3rem; text-align: center; }
	}

/*  Boxtop
--------------------------------------------------------------------------------------- */

  .boxtop { 
	font-size: 3rem;
	line-height: 1.15em;
	margin: 3rem auto 4rem;
	text-align: center;
	background: #333333;
	width: 1fr;
	height: 100%;
	margin: 0;
	padding: 1em;
	padding-top: 2em;
	padding-bottom: .3em;
}

.boxtop h1	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0;color: #a2cbdd; }
.boxtop h2	{ font-size: 3rem; margin-bottom: .25rem; margin-top: 0; color: #a2cbdd; }
.boxtop h3	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0; color: #eeede7; }
.boxtop h4	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0; color: #eeede7; }

.boxtop p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; color: #eeede7; }
.boxtop p { font-size: 1.5rem; line-height: 1.375em; color: #eeede7;}

/*  boxpro for top of projects pages
--------------------------------------------------------------------------------------- */

.boxpro { 
	font-size: 3rem;
	line-height: 1.15em;
	margin: 3rem auto 4rem;
	text-align: center;
	background: #333333;
	width: 1fr;
	height: 100%.5em;
	margin: 0;
	padding: 2em;
	padding-top: 2em;
	padding-bottom: 1em;
}


.boxpro h1	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0;color: #eeede7; }
.boxpro h2	{ font-size: 3rem; margin-bottom: .25rem; margin-top: 1em; text-align: left;  color: #eeede7; }
.boxpro h3	{ font-size: 1.5rem; margin-bottom: .25rem; margin-top: 1em; text-align: left;  color: #eeede7; }
.boxpro h4	{ font-size: 1.5rem; margin-bottom: .25rem; margin-top: .75rem; text-align: left;  color: #eeede7; }

.boxpro p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; text-align: left; margin-top: 1em; color: #eeede7; }
.boxpro p { font-size: 1.5rem; line-height: 1.375em; text-align: left; color: #eeede7;}

/*----edited for a page slightly*/
.boxproone { 
	font-size: 3rem;
	line-height: 1.15em;
	margin: 3rem auto 4rem;
	text-align: center;
	background: #333333;
	width: 1fr;
	height: 100%;
	margin: 0;
	padding: 2em;
	padding-top: 2em;
	padding-bottom: 1em;
}


.boxproone h1	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0; margin-left: 3em; color: #eeede7; }
.boxproone h2	{ font-size: 3rem; margin-bottom: .25rem; margin-top: -1em; text-align: left;  color: #eeede7; }
.boxproone h3	{ font-size: 1.5rem; margin-bottom: .25rem; margin-top: 1em; text-align: left; color: #eeede7; }
.boxproone h4	{ font-size: 1.5rem; margin-bottom: .25rem; margin-top: .75rem; text-align: left; color: #eeede7; }

.boxproone p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; text-align: left; color: #eeede7; }
.boxproone p { font-size: 1.5rem; line-height: 1.375em; text-align: left; color: #eeede7;}

/*----edited for a web and lush pages slightly*/
.boxprothr { 
	font-size: 3rem;
	line-height: 1.15em;
	margin: 3rem auto 4rem;
	text-align: center;
	background: #333333;
	width: 1fr;
	height: 100%;
	margin: 0;
	padding: 2em;
	padding-top: 2em;
	padding-bottom: 1em;
}


.boxprothr h1	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0;color: #eeede7; }
.boxprothr h2	{ font-size: 3rem; margin-bottom: .25rem; margin-top: 1em; text-align: left; color: #eeede7; }
.boxprothr h3	{ font-size: 1.5rem; margin-bottom: .25rem; margin-top: 1em; text-align: left; color: #eeede7; }
.boxprothr h4	{ font-size: 1.5rem; margin-bottom: .25rem; margin-top: .75rem; text-align: left; color: #eeede7; }

.boxprothr p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; text-align: left; color: #eeede7; }
.boxprothr p { font-size: 1.5rem; line-height: 1.375em; text-align: left; color: #eeede7;}




/*----Box for the intro part under picture*/
.boxintro { 
	font-size: 3rem;
	line-height: 1.15em;
	margin: rem auto 4rem;
	text-align: center;
	background: #333333;
	width: 1fr;
	height: auto;
	padding-left: 1.2em;
	padding-bottom: 1em;
	text-align: left;
}


.boxintro h1	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0;color: #a2cbdd; }
.boxintro h2	{ font-size: 3rem; margin-bottom: .25rem; margin-top: 1em; text-align: left; color: #a2cbdd; }
.boxintro h3	{ font-size: 1.5rem; margin-bottom: .25rem; margin-top: 1em; text-align: left; color: #eeede7; }
.boxintro h4	{ font-size: 1.5rem; margin-bottom: .25rem; margin-top: .75rem; text-align: left; color: #eeede7; }

.boxintro p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; text-align: left; color: #eeede7; }
.boxintro p { font-size: 1.5rem; line-height: 1.375em; text-align: left; color: #eeede7;}



/*----edited for a seegull page*/



.boxsee { 
	font-size: 3rem;
	line-height: 1.15em;
	margin: 3rem auto 4rem;
	text-align: center;
	align-items: center;
	background: #333333;
	width: auto;
	height: 100%;
	margin: 0;
	padding: 1em;
	padding-top: 2em;
	padding-bottom: 1em;
}


.boxsee h3		{ grid-area: hd; }
.boxsee h2		{ grid-area: dv; }
.boxsee figure	{ grid-area: fg; }

.boxsee figure {	
	width: 40%;
	height: 40%;
}

.boxsee h1	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0;color: #eeede7; }
.boxsee h2	{ font-size: 3rem; margin-bottom: .25rem; margin-top: 1em; text-align: left; color: #eeede7; }
.boxsee h3	{ font-size: 1.5rem; margin-bottom: .25rem; margin-top: 1em; text-align: left; color: #eeede7; }
.boxsee h4	{ font-size: 1.5rem; margin-bottom: .25rem; margin-top: .75rem; text-align: left; color: #eeede7; }

.boxsee p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; text-align: left; color: #eeede7; }
.boxsee p { font-size: 1.5rem; line-height: 1.375em; text-align: left; color: #eeede7;}



/*  Boxhome
--------------------------------------------------------------------------------------- */

.boxhome { 
	font-size: 3rem;
	line-height: 1.15em;
	margin: 4rem auto 4rem;
	text-align: center;
	background: #333333;
	width: 1fr;
	height: 100%;
	margin: 0;
	padding: 5em;
	padding-bottom: .3em;
	padding-top: 2em;
}


.boxhome h1	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0;color: #eeede7; }
.boxhome h2	{ font-size: 3rem; margin-bottom: .25rem; margin-top: 0; color: #a2cbdd; }
.boxhome h3	{ font-size: 2rem; margin-bottom: .25rem; margin-top: 0; color: #eeede7; }

.intromai {font-size: 3rem; margin-bottom: .25rem; margin-top: 0; color: #eeede7;}

.touch {font-size: 1.5rem; line-height: 1.375em; color: #eeede7;}
.touch {margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; color: #eeede7;}

.boxhome p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; color: #eeede7; }
.boxhome p { font-size: 1.5rem; line-height: 1.375em; color: #eeede7;}


/*  about page layout
--------------------------------------------------------------------------------------- */
section.aboutmai {
	display: grid;
	grid-template-columns: 1fr 5fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2em;
	grid-row-gap: 5em;
	text-align: left;
	grid-template-areas:
	".. fg .."
	".. dv .."
	}

/*  Image container
--------------------------------------------------------------------------------------- */

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(1fr 1fr));
gap: 15px;
}

.image-container {
position: relative;
width: 100%;
overflow: hidden;
margin: 0;
}

.image-container a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-decoration: none;
	position: relative;
}

.image-container img {
display: block;
width: 100%;
height: auto;
transition: opacity(0.3 ease); transform: (0.3 ease);
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 110%;
background: #a2cbdd;
mix-blend-mode: multiply;
opacity: 0;
transition: opacity(0.3s ease);	
}

.text{
position: absolute;
top: 50%;
left:50%;
text-align: center;
transform: translate(-50%, -50%);
color: #eeede7;
font-size: 3em;
font-weight: bold;
opacity: 0;
transition: opacity(0.3s ease);	
}

.image-container:hover .overlay,
.image-container:hover .text {
	opacity: 1;
}

.image-container:hover img {
	transform: scale(1.05);
}

/*  nav logo image
--------------------------------------------------------------------------------------- */

.logo{
	height: 100px;
	width: 225px;
	margin-left: 2.5em;
}

/*  round-image
--------------------------------------------------------------------------------------- */

.aboutimg {
	width: auto;
	height: auto;
	border-radius: 20%;
	object-fit: cover;
}

.circle{
	width: auto;
	height: auto;
	border-radius: 20%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center; 
	
}

.circle .aboutimg {
	width: auto;
	height: auto;
	object-fit: cover;
}

/*  image cycle
--------------------------------------------------------------------------------------- */

.image-cycle{
	width: 24em;
	height: 24em;
	border-radius: 20%;
	background-size: cover;
	background-position: center;
	animation: cycleImages 8s infinite;
	background-image: url('image/OWN/About/Winter.jpg')
}


@keyframes cycleImages {
	0%, 100% {background-image: url('image/OWN/About/Cat-Cafe.jpg'); opacity: 1;}
	25% {background-image: url('image/OWN/About/Hello-Im-Mai.jpg'); opacity: 1;}
	50% {background-image: url('image/OWN/About/LinkedPic.jpg'); opacity: 1;}
	75% {background-image: url('image/OWN/About/Winter.jpg'); opacity: 1;}
}

.circle.image-cycle {
	justify-self: center;
	align-self: center;
}





.ab-bg img {
	width: 24em;
	height: 24em;
	border-radius: 20%;
	object-fit: cover;
}





/*  dropdown list
--------------------------------------------------------------------------------------- */

.dropdown {
	position: relative;
	display: inline-block;
	font-size: 2em;
}


.dropbtn {
	background-color: #333333;
	border: none;
	cursor: pointer;
	font-size: .49em;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #eeede7;
	color: #333333;
	z-index: 1;
}


.dropdown-content {
	font: poppins-black;
	font-weight:bold;
}

.dropdown-content a {
	color: #333333 !important;
	padding: .6em .6em;
	text-decoration: none;
	display: block;
	font-size: 29px;
}

.dropdown-content a:hover {
	background-color: #a2cbdd;
	color: #333333 !important;
}

.dropdown:hover .dropdown-content {
	display: block;
}


/*  bibliography
--------------------------------------------------------------------------------------- */

section.bibliography {
	display: grid;
	grid-template-columns: 1fr 5fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2em;
	grid-row-gap: em;
	text-align: center;
	grid-template-areas:
	".. fg .."
	".. dv .."
}


.bib {
	position:relative;
	display: inline-block;
	font-size: 2.5em;
}

.bibli {
	background-color: #333333;
	padding: 1em;
	color: #333333;
	border: 2px solid #eeede7;
	border-radius: 25%;
	cursor: pointer;
	font-size: .48em;
}

.bibli h3 {
	color: #eeede7;
}

.bibli:hover {
	background-color: #a2cbdd;
	padding: 1em;
	border: 2px solid #eeede7;
	border-radius: 25%;
	cursor: pointer;
	font-size: .48em;
}

.bibli:hover h3{
	color: #333333;
}

.bib-content {
	display: none;
	position: absolute;
	background-color: #a2cbdd;
	z-index: 1;
	font: poppins-black;
}

.bib-content a {
	color: #eeede7;
	padding: .5em .5em;
	text-decoration: none;
	text-align: left;
	display: block;
	font-size: 20px;
}

.bib-content a:hover {
	background-color: #333333;
}

.bib:hover .bib-content {
	display: block;
}



/*  Bottom navigation
--------------------------------------------------------------------------------------- */

section.bnav {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2em; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"h1 h1 h1"
	"f1 f2 f3";
}

section.bnav h3						{ grid-area: h1; }
section.bnav h3	:nth-of-type(2)		{ grid-area: h2; }
section.bnav h3	:nth-of-type(3)		{ grid-area: h3; }
section.bnav figure					{ grid-area: f1; }
section.bnav figure:nth-of-type(2)	{ grid-area: f2; }
section.bnav figure:nth-of-type(3)	{ grid-area: f3; }
section.bnav div					{ grid-area: dv; }


section.bnav div h3,
section.bnav div p { font-size: 1.5rem; }
section.bnav h3 {color: #333333; font-size: 3em; text-align: center;}

section.bnav .nav 	{ padding: 2rem 1rem 0.5rem 1rem; min-height: 2rem; border-bottom: 5px #eeede7 solid; }
section.bnav .nav h1	{ font-size: 1.75rem; margin-bottom: 0rem; }
section.bnav .nav a	{ white-space: nowrap;}

section.bnav .nav ul		{ list-style-type: none;}
section.bnav .nav ul li	{ font-size: 1.75rem; display: inline-block; margin-right: 2em;}

section.bnav .navalign {margin-top: 1.5em; margin-right: 3em;}


/*  To the Top
--------------------------------------------------------------------------------------- */

section.totop {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-column-gap: rem;  
	grid-row-gap: 0;
	grid-template-areas:
	"dv";
}

section.totop div   { grid-area: dv; }

section.totop div h3,
section.totop div p { font-size: 2rem; text-align: center; color: #a2cbdd;}



section.top {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2em;  
	grid-row-gap: 0;
	grid-template-areas:
	"dv";
}

section.top div   { grid-area: dv; }

section.top div h3,
section.top div p { font-size: 2rem; text-align: right; color: #a2cbdd;}

section.top       { margin-bottom: 0; padding-right: 2em;}






/*----type*/
section.prointro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2em; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"hd dv";
}

section.prointro h3						{ grid-area: hd; }

section.prointro div		{ grid-area: dv; }
section.prointro div:nth-of-type(2)		{ grid-area: d2; }

section.prointro div h3,
section.prointro div p { font-size: 1.5rem; }




/*----type*/
section.int {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 2;
	grid-column-gap: 2em; 
	grid-row-gap: 0;
	grid-template-areas:
	"hd fg"
	"dv fg";
}

section.int h3						{ grid-area: hd; }

section.int div		{ grid-area: dv; }
section.int div:nth-of-type(2)		{ grid-area: d2; }

section.int div h3,
section.int div p { font-size: 1.5rem; }




/*----Top text / header*/
section.header {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2em; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"hd"
	"dv";
}

section.header h3					{ grid-area: hd; }
section.header div 					{ grid-area: dv; }

.header div h3 {font-size: 6em; text-align: center;}
.header div p { font-size: 3em; text-align: center; }



/*----big image*/
section.bigimage {
	display: grid;
	grid-template-columns: 1fr 5fr 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: 1.5rem; grid-column-gap: 4rem;
	grid-row-gap: 1em;
	margin-top: 5em;
	background-color: #333333;
	grid-template-areas:
	".. hd .."
	".. dv .."
	"fg fg fg";
}

section.bigimage figure	{ grid-area: fg; }
.bigimage div {padding-bottom: 2em;}
.bigimage div h3 {font-size: 4em; text-align: center; color: #a2cbdd; line-height: 1em;}
.bigimage div h4 {font-size: 2em; text-align: center; color: #eeede7;}




/*----big figure 2/3*/
section.boards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: .1fr 1fr;
	grid-column-gap: 2em; 
	grid-row-gap: 1em;
	grid-template-areas:
	"f1 hd"
	"f1 dv";
}

section.boards h3						{ grid-area: hd; }
section.boards figure					{ grid-area: f1; }
section.boards div 						{ grid-area: dv; }

section.boards div h3 {padding-bottom: 1em;}
section.boards div p { font-size: 1.5rem; }


/*----board code reversed*/
section.boardsrev {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2em; 
	grid-row-gap: 1em;
	grid-template-areas:
	"hd hd"
	"dv f1"
	"dv f1";
}

section.boardsrev h3						{ grid-area: hd; }
section.boardsrev figure					{ grid-area: f1; }
section.boardsrev div 						{ grid-area: dv; }

section.boardsrev div h3 {padding-bottom: 1em;}
section.boardsrev div p { font-size: 1.5rem; }



section.images-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2em; 
	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,
section.images-two div p { font-size: 1.5rem; }



/*----two images top*/
section.images-twocol {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2em; 
	grid-row-gap: 1em;
	grid-template-areas:
	"f1 f1 f2 f2"
	"hd hd hd hd"
	"dv dv dv dv";
}

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

section.images-twocol div h3,
section.images-twocol div p { font-size: 1.5rem; }



/*----half with image and text*/
section.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(2rem, auto) auto;
	grid-column-gap: 1.5rem; grid-column-gap: 4rem;
	grid-row-gap: 1em;
	grid-template-areas:
	"fg hd"
	"fg dv";
}

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

section.split h3		{ margin-top: 0; margin-bottom: .6rem; }
section.split div		{ margin-top: 0; }


/*----half spilt images*/
section.splitimg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(2rem, auto) auto;
	grid-column-gap: 1em;
	grid-row-gap: 0;
	grid-template-areas:
	"fg f2";

}

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

section.splitimg h3		{ margin-top: 0; margin-bottom: .6rem; }
section.splitimg div		{ margin-top: 0; }


/*----half split images with text underneath*/
section.splitimg-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(2rem, auto) auto;
	grid-column-gap: 1em;
	grid-row-gap: 0;
	grid-template-areas:
	"fg f2"
	"hd dv";

}

section.splitimg-text h3		{ grid-area: hd; }
section.splitimg-text figure	{ grid-area: fg; }
section.splitimg-text figure:nth-of-type(2)	{ grid-area: f2; }
section.splitimg-text div		{ grid-area: dv; }

section.splitimg-text h3		{ margin-top: 0; margin-bottom: .6rem; padding-top: 1em; }
section.splitimg-text div		{ margin-top: 0; padding-top: 1em;}


/*----seegull*/
section.seegull {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: .1fr 1fr;
	grid-column-gap: 2em; 
	grid-row-gap: 1em;
	grid-template-areas:
	"hd hd"
	"f1 dv";
}

section.seegull h3						{ grid-area: hd; }
section.seegull figure					{ grid-area: f1; }
section.boards div 						{ grid-area: dv; }

section.seegull div h3 {padding-bottom: 1em;}
section.seegull div p { font-size: 1.5rem; }



/*---------------------------------------------------------------seegull*/



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

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



/* area of focus list
--------------------------------------------------------------------------------------- */

.info-container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 3em;
	padding: 2em;
	margin-bottom: 2em;
}





.catagory {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 200px;
	background: #333333;
	border: #eeede7;
}

.catagory h3 {
	font-size: 1.5em;
	margin-bottom: 0.5em;
	text-transform: uppercase;
	gap: 3em;
}

.catagory p {
	color: #eeede7;
}





.catagory ol {
	list-style-type: none;
	font-size: 1.4em;
	margin: 0;
	padding-left: 0;
	margin: 0;
	color: #eeede7;
}

.catagory ol li {
	margin-bottom: .3em;
}

.divider {
	width: 2px;
	background-color: #eeede7;
	height: 130px;
	align-self: stretch;
}

section.bdy {
	background-color: #333333;
	color: #eeede7;
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	margin: 2em 0;
}













div.round {
	width: 12rem;
	height: 3rem;
	display: inline-block;
	background-color: #eeede7;
	border:
  1px solid #eeede7;
	border-radius:
  10rem;
	text-align: center;
	line-height: 0.8rem;
	padding: 0.5rem, 1rem;
	margin:
  0.4rem;
	list-style:
  none;
	padding-top: 0.5rem;
}

/* area of focust list 2
--------------------------------------------------------------------------------------- */

@media (min-width: 768px) {
	section.start {
	  display: grid;
	  grid-template-columns: repeat(12, 1fr);
	  grid-template-rows: auto;
	  grid-column-gap:
  1.5rem;
	  grid-template-areas:
  "hd hd hd hd hd hd hd hd hd hd" 
  "d1 d1 d1 d1 d1 .. d2 d2 d2 d2";
	}
  }
  
  div.round {
	width: 12rem;
	height: 3rem;
	display: inline-block;
	background-color: #333333;
	border:
  1px solid #eeede7;
	border-radius:
  10rem;
	text-align: center;
	line-height: 0.8rem;
	padding: 0.5rem, 1rem;
	margin:
  0.4rem;
	list-style:
  none;
	padding-top: 0.5rem;
}






@media (min-width: 768px) {
	section.start {
	  display: grid;
	  grid-template-columns: repeat(12, 1fr);
	  grid-template-rows: auto;
	  grid-column-gap:
  1.5rem;
	  grid-template-areas:
  "hd hd hd hd hd hd hd hd hd hd" 
  "d1 d1 d1 d1 d1 .. d2 d2 d2 d2";
	}
  }


  section.start div {grid-area: d1; }
  section.start div:nth-of-type(2) {grid-area: d2; }

  section.start h3 {padding-bottom: .5em;}


  

  @media (min-width: 768px) {
	section.starting {
	  display: grid;
	  grid-template-columns: repeat(12, 1fr);
	  grid-template-rows: auto;
	  grid-column-gap:
  1.5rem;
	  grid-template-areas:
  "hd hd hd hd hd hd hd hd hd" 
  "d1 d1 d1 d1 d1 .. d2 d2 d2";
	}
  }

  section.starting  div:nth-of-type(2)  {
	width: auto;
	height: 15em;
	padding: 1em;
	display: inline-block;
	background-color: #333333;
	border:
  1px solid #eeede7;
	border-radius:
  1rem;
	text-align: center;
	line-height: 0.8rem;
	padding: 0.5rem, 1rem;
  }

  section.starting div {grid-area: d1; }
  section.starting div:nth-of-type(2) {grid-area: d2; }

  section.starting h3 {padding-bottom: .5em; text-align: start;}
  section.starting div:nth-of-type(2) h3 {padding-bottom: .5em; text-align: center;}

  section.starting div:nth-of-type(2) {margin-top: 2.5em;}




  /* area of focust list 2
  --------------------------------------------------------------------------------------- */