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


/*  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, h4, p, a { margin: 0; padding: 0; border: 0; }

body { background: #1A1918; }


/*  this sets page width: 60em = 960px,  80 = 1280px, 90 = 1440px
--------------------------------------------------------------------------------------- */
.container { width: 100%; height: auto; }
.container { margin: 0 auto; background: #1A1918; }


/* example web font styles using IBM Plex Sans
--------------------------------------------------------------------------------------- */
@font-face {
	font-family: Basis-Grotesque-Bold;
	src: url(fonts/Basis_Grotesque/BasisGrotesquePro-Bold.ttf);
}

@font-face {
	font-family: Basis-Grotesque-Medium;
	src: url(fonts/Basis_Grotesque/BasisGrotesquePro-Medium.ttf);
}

@font-face {
	font-family: Basis-Grotesque-Regular;
	src: url(fonts/Basis_Grotesque/BasisGrotesquePro-Regular.ttf);
}

@font-face {
	font-family: Basis-Grotesque-Light;
	src: url(fonts/Basis_Grotesque/BasisGrotesquePro-Light.ttf);
}

@font-face {
	font-family: Metric-Regular;
	src: url(fonts/Metric/Metric-Regular.otf);
}


body		{ font-family: Basis-Grotesque-Regular, Arial, sans-serif; }
p			{ font-family: Basis-Grotesque-Light, Arial, sans-serif; }
figcaption	{ font-family: Basis-Grotesque-Light, Arial, sans-serif; }

h1			{ font-family: Basis-Grotesque-Light, Arial, sans-serif;} 
h2			{ font-family: Basis-Grotesque-Bold, Arial, sans-serif;} 
h3 			{font-family: Basis-Grotesque-Regular, Arial, sans-serif;}
h4 			{font-family: Basis-Grotesque-Light, Arial, sans-serif; }



/*  top navigation section
--------------------------------------------------------------------------------------- */
nav 	{ display: grid;
		  grid-template-columns: 1fr auto;
		  background: #353535;
		  padding: 1rem .5rem .8rem .5rem;
		  min-height: 2rem; 
		  position: fixed; 
		  width: 100%; 
		  align-items: center; 
		  z-index:100;
		  transform: translate(-50%, -50%);
		  left:50%;
		  top: 4%;}
		  
h1		{  margin-bottom: .5rem; 
			margin-top: .5rem; font-size:.8rem; color: #eee;}
nav a	{  margin-left:.5rem;}

nav h1	{   }
nav ul	{ list-style-type: none;}
ul li	{  display: inline-block; font-size:.8rem; margin-right:.5rem;
			font-family: Basis-Grotesque-Light, Arial, sans-serif;}

/*  HOME PAGE for MOBILE !
--------------------------------------------------------------------------------------- */
	section.six-home-page{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 1rem; 
		grid-row-gap: 5rem;
		grid-template-areas:
		"d1 d1 d1"
		".. fg .."
		
		"d2 d2 d2";
	}

	section.six-home-page							{ padding: 8rem 2rem; margin:auto;}
	section.six-home-page div:nth-of-type(1)		{ grid-area: d1; 
													  font-size: 2rem;
													  line-height:1.7em;
													  text-align: center;
													  display:block;
													  color:#eee;}
	section.six-home-page div:nth-of-type(2)		{ grid-area: d2;
													  font-size: 2rem;
													  line-height: 1.7em;
													  text-align: center; 
													  margin-top:-5rem; }
	section.six-home-page figure					{ grid-area: fg; display:none;}
	
	
/*  CONTACT for MOBILE !
--------------------------------------------------------------------------------------- */
	section.six-contact		    { padding: 6rem 1rem; }
	section.six-contact div h4  { text-align:center; margin-top: 3rem;}
	section.six-contact div p 	{ font-size: 1.5rem; text-align:center;}
	
	/*  ABOUT for MOBILE !
--------------------------------------------------------------------------------------- */
section.about		{ padding: 5.5rem 1rem; padding-bottom: 2rem;}

/*  PROJECT INFO for MOBILE !
--------------------------------------------------------------------------------------- */
section.project-info						{ padding: 0rem 1rem; padding-top: 10rem; 
												  padding-bottom: 2rem;}
	section.project-info h2						{ grid-area: hd; 
												  font-size: 4rem; 
			 									  line-height: 1.15em;
			 									  color: #eee;
			 									  margin-bottom: .3em;
			 									  }

	section.project-info p {font-size:1.3rem;
							color: #a0a0a0;}
							
/*  AWARD BANNER for MOBILE !
--------------------------------------------------------------------------------------- */		
	section.award-banner 						{ margin-top:5.5rem; margin-bottom:-10rem;}
	section.award-banner figure					{ grid-area: f1; margin: 0rem 1rem;}
	
	
	/*  BUTTONS for MOBILE !
--------------------------------------------------------------------------------------- */	
	section.buttons	{ padding: 0rem 0rem; }
	section.buttons figure.one				{ grid-area: f1; width:6rem; height:auto; }
	section.buttons figure.two				{ grid-area: f2; width:6rem; height:auto; 
											  margin-right:.4rem;}
	section.buttons figure.three			{ grid-area: f3; width:6rem; height:auto; }
	section.buttons 						{ margin-top: 2em; margin-bottom: 3em;}
	
/* BIBLIO for MOBILE !
--------------------------------------------------------------------------------------- */
section.reflection	{ padding: 2.3rem 12rem; }

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


/* PROJECT INFO for MOBILE !
--------------------------------------------------------------------------------------- */
section.project-info h2						{ font-size: 2.8rem; }


.arrow { width: 10em; height: 12em; margin: auto; padding-top:1em;}

/* footer style */
.footstyle h4 {font-size: 1.2rem; text-align: center; max-width: 100%; 
			  padding-top: 1.3rem;
			  padding-bottom: 1.5em;}
			  
			  
/*  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: 2rem; line-height: 2.6rem; 
							 color:#eee;}
							 
section h4, section div h4 { font-size: 1.6rem; line-height: 2.2rem;
							 color:#eee;}

section figure { margin-bottom: 1rem; }

section figcaption { font-size: 1rem; color: #a0a0a0;}

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


/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p { margin: 0 0 1rem 0; max-width: 200em; } /* max-width sets line length */
p { font-size: 1.3rem; line-height: 1.375em; color:#eee;}
/* 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 */

/* Highlight Colour */

::selection {
  background: #F45050;
}

/*  link styling
--------------------------------------------------------------------------------------- */
a			{ color: #eee; text-decoration: none; transition:  0.4s ease;}
a:visited	{ color: #eee; }
a:hover		{ color: #F45050; text-decoration: none; }
a:active	{ color: #F45050; }

nav a			{ color: #eee; text-decoration: none; transition:  0.4s ease; }
nav a:visited	{ color: #eee; }
nav a:hover		{ color: #F45050; text-decoration: none; }
nav a:active	{ color: #F45050; }

nav h1 a  			{ color: #eee; }
nav h1 a:visited    { color: #eee; }
nav h1 a:hover  	{ color: #F45050; }*/

a h4			{ color: #50e6f4; text-decoration: none; transition:  0.4s ease;}
a h4:visited	{ color: #50e6f4; }
a h4:hover		{ color: #F45050; text-decoration: none; transition:  0.4s ease; }
a h4:active		{ color: #F45050; }


.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; }

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


/*  top navigation grid
--------------------------------------------------------------------------------------- */	
	nav {
		display: grid;
		grid-template-columns: 1fr auto;
		padding: .1rem .5rem 1rem .7rem; 
		
		
		background: none;
		
		position: fixed; 
		align-items: center; 
		width: 100%;
		height: auto;
		transform: translate(-50%, -50%)
		left:50%;
		top: 4%;
	}
	h1		{ font-size: 1.6rem; margin-left:1rem; 
			   }
	nav a	{ white-space: nowrap;}


	nav h1	{ }
	nav ul	{ list-style-type: none;}

	ul li 	{ font-size: 1.55rem; padding-right: 1.4rem; display: inline-block; 
			  font-family: Basis-Grotesque-Light, Arial, sans-serif;}




/*  hero image
--------------------------------------------------------------------------------------- */
	h2 + figure { margin: 0; padding-bottom: 5rem; }
	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: 1.5rem;
		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 fg fg dv dv dv dv dv dv";
	}

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



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

	section.fun-grid			{ padding: 0rem 2rem; padding-bottom:0rem; padding-top:3.5rem;}
	section.fun-grid figure					{ grid-area: f1; }
	section.fun-grid figure:nth-of-type(2)	{ grid-area: f2; margin-top:0rem;}
	section.fun-grid figure:nth-of-type(3)	{ grid-area: f3; margin-top:0rem;}
	section.fun-grid figure:nth-of-type(4)	{ grid-area: f4; margin-top:0rem;}
	section.fun-grid figure:nth-of-type(5)	{ grid-area: f5; margin-top:0rem;}
	section.fun-grid figure:nth-of-type(6)	{ grid-area: f6; margin-top:0rem;}
	section.fun-grid div					{ grid-area: dv; }


/*------NEW-----

/*  award-banner!
--------------------------------------------------------------------------------------- */
	section.award-banner{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0rem; 
		grid-row-gap: 0rem;
		grid-template-areas:
		"f1";
	}

	section.award-banner 						{ margin-top:6rem; margin-bottom:-10rem;}
	section.award-banner figure					{ grid-area: f1; margin: 0rem 2rem;}
	
/*  six column one image one text!
--------------------------------------------------------------------------------------- */
	section.six-image-one-full{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0rem; 
		grid-row-gap: 0rem;
		grid-template-areas:
		"f1";
	}

	section.six-image-one-full 							{ padding: 2.3rem 0rem; }
	section.six-image-one-full h3						{ grid-area: hd; }
	section.six-image-one-full figure					{ grid-area: f1; margin: 0rem -1rem;}
	
	/*  six column one image one text!
--------------------------------------------------------------------------------------- */
	section.six-image-one{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0rem; 
		grid-row-gap: 0rem;
		grid-template-areas:
		"f1 f1 f1 f1 f1 f1";
	}

	section.six-image-one 							{ padding: 2.3rem 2rem; }
	section.six-image-one figure					{ grid-area: f1; width: 100%; height: auto; }
	
		/*  six column one image one text!
--------------------------------------------------------------------------------------- */
	section.six-image-one-top{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0rem; 
		grid-row-gap: 0rem;
		grid-template-areas:
		"f1 f1 f1 f1 f1 f1";
	}

	section.six-image-one-top 							{ padding: 2.3rem 2rem; padding-top: 6rem;}
	section.six-image-one-top figure					{ grid-area: f1; }
	
	/* one text 
--------------------------------------------------------------------------------------- */
	section.six-text-one{
		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:
		"dv dv dv dv .. .."
		"dv dv dv dv .. ..";
	}

	section.six-text-one						{ padding: 2.3rem 2rem; }
	section.six-text-one div					{ grid-area: dv; }
	
/* image one text 
--------------------------------------------------------------------------------------- */
	section.six-image-text-one{
		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:
		"dv dv f1 f1 f1 f1"
		".. .. f1 f1 f1 f1";
	}

	section.six-image-text-one						{ padding: 2.3rem 12rem; }
	section.six-image-text-one figure				{ grid-area: f1; }
	section.six-image-text-one figure:nth-of-type(2)	{ grid-area: f2; }
	section.six-image-text-one figure:nth-of-type(3)	{ grid-area: f3; }
	section.six-image-text-one figure:nth-of-type(4)	{ grid-area: f4; }
	section.six-image-text-one figure:nth-of-type(5)	{ grid-area: f5; height:100%; width:auto}
	section.six-image-text-one div					{ grid-area: dv; }
	
	/* image one text alt
--------------------------------------------------------------------------------------- */
	section.six-image-text-one-alt{
		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 f1 f1 f1 dv dv"
		"f1 f1 f1 f1 .. ..";
	}

	section.six-image-text-one-alt							{ padding: 2.3rem 12rem; }
	section.six-image-text-one-alt figure					{ grid-area: f1; }
	section.six-image-text-one-alt figure:nth-of-type(2)	{ grid-area: f2; }
	section.six-image-text-one-alt figure:nth-of-type(3)	{ grid-area: f3; }
	section.six-image-text-one-alt figure:nth-of-type(4)	{ grid-area: f4; }
	section.six-image-text-one-alt figure:nth-of-type(5)	{ grid-area: f5; height:100%; width:auto}
	section.six-image-text-one-alt div						{ grid-area: dv; }
	
/* image two - no text - NEW!
--------------------------------------------------------------------------------------- */
	section.six-image-two{
		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 f1 f1 f2 f2 f2"
		"f1 f1 f1 f2 f2 f2";
	}

	section.six-image-two						{ padding: 2.3rem 2rem; }
	section.six-image-two figure				{ grid-area: f1; }
	section.six-image-two figure:nth-of-type(2)	{ grid-area: f2; }
	section.six-image-two figure:nth-of-type(3)	{ grid-area: f3; }
	section.six-image-two figure:nth-of-type(4)	{ grid-area: f4; }
	section.six-image-two figure:nth-of-type(5)	{ grid-area: f5; height:100%; width:auto}
	section.six-image-two div					{ grid-area: dv; }
	


	/*  six column four images one text!
--------------------------------------------------------------------------------------- */		
section.six-image-four {
	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 f1 f1 f3 f3 f3"
	"f2 f2 f2 f4 f4 f4";
}

section.six-image-four						   { padding: 2.3rem 12rem; }
section.six-image-four figure				   { grid-area: f1; }
section.six-image-four figure:nth-of-type(2)  { grid-area: f2; }
section.six-image-four figure:nth-of-type(3)  { grid-area: f3; }
section.six-image-four figure:nth-of-type(4)  { grid-area: f4; }

/*  six column home page !
--------------------------------------------------------------------------------------- */
	section.six-home-page{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 1rem; 
		grid-row-gap: 5rem;
		grid-template-areas:
		"d1 d1 d1"
		".. fg .."
		"d2 d2 d2";
	}

	section.six-home-page							{ padding: 11rem 0rem; margin:auto; display:none;}
	section.six-home-page div:nth-of-type(1)		{ grid-area: d1; 
													  font-size: 2rem;
													  line-height:1.7em;
													  text-align: center;
													  display:none;}
	section.six-home-page div:nth-of-type(2)		{ grid-area: d2;
													  font-size: 1.3rem;
													  line-height: 1.7em;
													  text-align: center; 
													  margin-top:0rem;}
	
	section.six-home-page figure					{ grid-area: fg; width:65rem;display:block;}

/*  six column contact !
--------------------------------------------------------------------------------------- */
	section.six-contact{
		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:
		"d1 d1 d1 d1 .. .."
		"d2 d2 d2 d2 .. .."
		"d3 d3 d3 d3 .. .."
		"d4 d4 d4 d4 .. ..";
	}

	section.six-contact			{ padding: 26rem 0rem; padding-bottom: 2rem;}
	section.six-contact h2						{ grid-area: hd; font-size: 5rem; 
			 									  line-height: 1.15em;
												  text-align: right;
			 									  
			 									  margin-top:.3em;
			 									  margin-bottom: .3em;}
	section.six-contact div:nth-of-type(1)		{ grid-area: d1; padding: 0rem 2rem;}
	section.six-contact div:nth-of-type(2)		{ grid-area: d2; padding: 0rem 2rem;}
	section.six-contact div:nth-of-type(3)		{ grid-area: d3; padding: 0rem 2rem;}	
	section.six-contact div:nth-of-type(4)		{ grid-area: d4; padding: 0rem 2rem;}
	section.six-contact div h4 {text-align: left;
								margin-top: 1rem;}
	section.six-contact div h2,
	section.six-contact div p 	{ font-size: 1.5rem; /*text-align:center;*/}
	
	
/*  project-info - FINLAY
--------------------------------------------------------------------------------------- */
	section.project-info {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2rem; 
		grid-row-gap: 3rem;
		grid-template-areas:
		"hd hd hd hd .. .."
		"d1 d1 d1 d1 .. .."
		"d2 d2 d2 d2 .. ..";
	}

	section.project-info						{ padding: 0rem 2rem; padding-top: 6rem; 
												  padding-bottom: 0rem;}
	section.project-info h2						{ grid-area: hd; 
												  font-size: 2.589rem; 
			 									  
			 									  color: #eee;
			 									  margin-bottom: 0em;
			 									  }
	section.project-info div					{ grid-area: d1;}
	section.project-info div:nth-of-type(2)		{ grid-area: d2;}
	section.project-info div:nth-of-type(3)		{ grid-area: d3;}
	section.project-info div:nth-of-type(4)		{ grid-area: d4;}

	section.project-info p {font-size:0.988rem;
							color: #eee;
							line-height: 1.4em;
							}

/*  custom section about page
--------------------------------------------------------------------------------------- */
	section.about {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg fg .. .."
	"d1 d1 d1 d1 .. .."
	"d2 d2 d2 d2 .. ..";
	}
	
	section.about		{ padding: 4.5rem 2rem; padding-bottom: 2rem;}
	
	section.about div					{ grid-area: d1; padding-top: 3rem;}
	section.about div:nth-of-type(2)	{ grid-area: d2;}
	section.about figure				{ grid-area: fg; }
	

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

section.projects	{ padding: 0rem 2rem; padding-top:0rem;}
section.projects h2 {grid-area: hd;
			  font-size: 6rem;
			  line-height: 1.15em;
			  text-align: center;
			  color: lightblue;
			  margin-top: .3em;
			  margin-bottom: .3em;
			  display: block;} 
#projects 	  {padding-top: 4em;}
.projects figure.one   { grid-area: f1; }
.projects figure.two   { grid-area: f2; }
.projects figure.three { grid-area: f3; }
.projects figure.four  { grid-area: f4; }
.projects figure.five  { grid-area: f5; }
.projects figure.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 3em; padding-top: 19%; color: black; z-index:99;}

figure.roll {
	display: grid;
	grid-template-rows: auto;
	grid-template-areas:
	"im";
	padding-bottom: 0;
}

figure.roll a, figure.roll figcaption { grid-area: im; }
figure.roll figcaption { place-self: center;}
figure.roll h3 { margin-bottom: .5em; line-height: 1.2em; color:#eee;}
figure.roll p { font-size: 1.6rem; color: #eee;}

figure.roll h2 {line-height: 1.3em;}

figure.roll { overflow: hidden;}

figure.roll img { opacity: 1; transition:  0.3s ease;}
figure.roll:hover img { opacity: 0.4; }

figure.roll figcaption { font-size:2em; text-align: center; opacity: 0; transition:  0.3s ease;}
figure.roll:hover figcaption { opacity: 1; color: #eee;}


/*  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"
	".. d1";
}

section.reflection	{ padding: 2.3rem 12rem; }


section.reflection div		{ grid-area: d1; display:block;}
section.reflection div.two	{ grid-area: d2; display:block;}

.biblio {font-size:1em;}

/*  back to top and prevnext buttons !
--------------------------------------------------------------------------------------- */
	section.buttons {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-column-gap: 1rem; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"f1"
		"f2"
		"f3"
		"f4";
	}
	
	section.buttons	{ padding: 0rem 2rem; }
	section.buttons figure.one				{ grid-area: f1; }
	section.buttons figure.two				{ grid-area: f2; }
	section.buttons figure.three			{ grid-area: f3; }
	section.buttons figure.four				{ grid-area: f4; }
	section.buttons 						{ margin-top: 3em; margin-bottom: 4em;}


} /* end 768px media query */




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