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

body { background: white; }


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


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

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

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

@font-face {
	font-family: TitanOne-Regular;
	src: url(fonts/Titan_One/TitanOne-Regular.ttf);
	font-weight: normal;
	font-style: italic;
	}
	
@font-face {
	font-family: Poller_One;
	src: url(fonts/Poller_One/PollerOne-Regular.ttf);
	font-weight: normal;
	font-style: italic;
	}

body		{ font-family: Montserrat, Arial, sans-serif; }
h1, 	{ font-family: Outfit, Arial, sans-serif; }

h2, h3	{ font-family: Outfit, Arial, sans-serif;}
p			{ font-family: Montserrat, Arial, sans-serif; }
figcaption	{ font-family: Montserrat-Italic, Arial, sans-serif; }


/*  top navigation section
--------------------------------------------------------------------------------------- */
nav 	{ padding: .5rem .5rem 2rem .5rem; min-height: 2rem; border-bottom: 2px #eee solid;}
nav h1	{ font-size: 1.75rem; margin-bottom: .5rem; }
nav a	{ white-space: nowrap; }

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


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

nav {
  display: grid;
  grid-template-columns: 1fr, 1fr, 2fr, 2fr, 2fr;
  align-items: center;
  grid-template-areas:
  "lg h1 li li li"
}

.logo img {
  height: 3rem;
  width: auto;
}

    section li		{ grid-area: li; }
        section h1		{ grid-area: h1; }

	section .logo	{ grid-area: lg; }
	
	.logo {
  margin-right: 2rem;
}


nav {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: white;

	padding: .5rem;
	min-height: 2rem;
	border-bottom: 2px #eee solid;

	display: grid;
	grid-template-columns: 1fr 1fr 2fr 2fr 2fr;
	align-items: center;
}


/*  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.25rem; color: #0C1719; }

section a { font-size: 1.5rem; line-height: 2.25rem; color: #0C1719; }


section figure { margin-bottom: 1rem; }

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

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


/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p { margin: 0 0 1rem 0; max-width: auto; max-width: 42em; } /* max-width sets line length */
p { font-size: 1.25rem; line-height: 1.375em; color: #0C1719; }
/* 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: #0C1719; text-decoration: none; }
a:visited	{ color: #0C1719; }
a:hover		{ color: #FC1D52 !important; text-decoration: none !important; }
a:active	{ color: #0C1719; }

nav a			{ color: #FC1D52; text-decoration: none; }
nav a:visited	{ color: #FC1D52; }
nav a:hover		{ color: #008B8B !important; text-decoration: none ; }
nav a:active	{ color: #FC1D52; }

.contact p { font-size: 2rem; text-align: center; }
.contact h3 { 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;
		border-bottom: 0 #eee none;
		background: white;
	}

	nav h1	{ font-size: 1.75rem; margin-bottom: .5rem; margin-top: 0; }

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


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


/*  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: .5rem;
		grid-row-gap: 0.1rem;    /*  .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: 3rem;
		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; }



/*  simple 3 column grid 2
--------------------------------------------------------------------------------------- */
	section.three-2 {
		display: grid;
		grid-template-columns: repeat(4,1fr);
		grid-template-rows: 2rem auto;
		grid-column-gap: 3rem;
		grid-row-gap: .5rem;
		grid-template-areas:
		"fg fg hd hd"
		"fg fg dv dv"
		"fg 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; }





/*  simple collapse
--------------------------------------------------------------------------------------- */
.collapse {
    display: grid;
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: #0C1719;
}

.collapse details {
    width: 100%;
    display: grid;
    align-items: center; 
}

.collapse summary {
    list-style: none;
    cursor: pointer;
    font-weight: bold;
    display: grid;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
}

.collapse summary::after {
    content: "";
    display: block;
    width: 15rem; 
    height: 8rem; 
    background-image: url('image/web_2/white-bibliography-1.jpg'); 
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 1rem; 
    transition: transform 0.3s ease;
}

.collapse details[open] summary::after {
    background-image: url('image/web_2/bibliography-2.jpg'); 
    
}



.collapse summary:hover::after {
    transform: scale(1.1); 
}

.collapse details p {
    font-size: 1rem; 
}



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



/*  3 column grid with right hand image
--------------------------------------------------------------------------------------- */	
	section.right-2 {
		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 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; }
	section.right div		{ margin-top: 0; }




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

	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
--------------------------------------------------------------------------------------- */
	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;
		margin-top: 5rem;
		margin-bottom: 5rem;
		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: 1.5rem;  
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd"
		"dv dv dv";
	}

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

	section.intro div h3,

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


/*  images-two
--------------------------------------------------------------------------------------- */
	section.images-two {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 1rem; 
		margin-top: 1rem;
		grid-row-gap: 1rem;
		padding: 0;
		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; }

/*  images-two-2
--------------------------------------------------------------------------------------- */
	section.images-two-2 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr ;
		grid-template-rows: auto;
		grid-column-gap: 1rem; 
		margin-top: 1rem;
		grid-row-gap: 1rem;
		padding: 0;
		grid-template-areas:
		"f1 f2 f2"
		;
	}

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

	section.images-two-2 div h3,
	section.images-two-2 div p { font-size: 1.5rem; }
	
	
	
	
		/*  div images-four
--------------------------------------------------------------------------------------- */
	section.div-images-four {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr ;
		grid-template-rows: auto;
		grid-column-gap: 1rem; 
		margin-top: 1rem;
		grid-row-gap: 1rem;
		grid-template-areas:
		"dv f1 f2"
		"dv f3 f4"
		
		;
	}

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

	section.div-images-four div 						{ grid-area: dv; }




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

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






	

/*  images-three-div
--------------------------------------------------------------------------------------- */
	section.images-two-div {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr ;
		grid-template-rows: auto;
		grid-column-gap: 1rem; 
		margin-top: 1rem;
		grid-row-gap: 1rem;
		padding: 0;
		grid-template-areas:
		"f1 f2 f2"
		"f1 dv dv"
		;
	}

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

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


/*  images-three-1-2
--------------------------------------------------------------------------------------- */
	section.images-three-1-2 {
		display: grid;
		grid-template-columns: auto ;
		grid-template-rows: auto;
		grid-column-gap: 1rem; 
		margin-top: 1rem;
		grid-row-gap: 1rem;
		object-fit: cover;
		grid-template-areas:
		"hd hd hd"
		"f1 f2 f2"
		"f1 f3 f3"
		;
	}

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



/*  hover image
--------------------------------------------------------------------------------------- */
.img-hover {
position: relative;
display: inline-block;
}

.img-hover img {
display: block;
width: 100%;
transition: opacity 0.3s;
}

.img-hover:hover img {
opacity: 0.2;
}

.hover-text {
position: absolute;
background: #FC1D52;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 2rem;
font-weight: bold;
text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
opacity: 0;
transition: opacity 0.1s;
}

.img-hover:hover .hover-text {
opacity: 1;
}




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

.projects-zoom figure.one   { grid-area: f1; }
.projects-zoom figure.a   { grid-area: a1; }

.projects-zoom figure.two   { grid-area: f2; }
.projects-zoom figure.a:nth-of-type(2)   { grid-area: a2; }

.projects-zoom figure.three { grid-area: f3; }
.projects-zoom figure.a:nth-of-type(3)   { grid-area: a3; }

.projects-zoom figure.four  { grid-area: f4; }
.projects-zoom figure.a:nth-of-type(4)   { grid-area: a4; }

}


.projects-zoom figure {
  position: relative;
  overflow: hidden;
  display: inline-block; 
}

.projects-zoom figure img {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; 
  display: block; 
  object-fit: cover;
  width: 100%; 
}

.projects-zoom figure:hover img {
  transform: scale(1.1); 
  overflow: hidden;
  
}




/*  other projects title
--------------------------------------------------------------------------------------- */
section.other-projects-title {
    text-align: center;
}

section.other-projects-title h3 {
    font-size: 2.5rem;
}





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

	section.images-three h1						{ 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: 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,
	section.images-three-plus div p { font-size: 1.5rem; }


/*  images-three-grid
--------------------------------------------------------------------------------------- */
section.images-three-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-gap: 2rem; 
    grid-template-areas: 
    "f1 f2 f3";
}

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


section.images-three-grid figure {
    margin: 0; 
    display: block; 
}

section.images-three-grid img {
    width: 100%; 
    height: auto; 
    object-fit: cover; 
}


/*  images-three-grid-2
--------------------------------------------------------------------------------------- */
section.images-three-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-gap: 2rem; 
    grid-template-areas: 
    "f1 f2 f3";
}

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


section.images-three-grid figure {
    margin: 0; 
    display: block; 
}

section.images-three-grid img {
    width: 100%; 
    height: auto; 
    object-fit: cover; 
}


/*  Slider
--------------------------------------------------------------------------------------- */
.custom-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.custom-slides {
    display: flex;
    width: 100%; 
    transition: transform 0.5s ease-in-out; 
}

.custom-slide {
    width: 100%;
    flex: 0 0 100%;
}

.custom-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

input[type="radio"] {
    display: none;
}

#slide1:checked ~ .custom-slides {
    transform: translateX(0%);
}

#slide2:checked ~ .custom-slides {
    transform: translateX(-100%);
}

#slide3:checked ~ .custom-slides {
    transform: translateX(-200%);
}

#slide4:checked ~ .custom-slides {
    transform: translateX(0%);
}

#slide5:checked ~ .custom-slides {
    transform: translateX(-100%);
}

#slide6:checked ~ .custom-slides {
    transform: translateX(-200%);
}
.custom-navigation {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.custom-navigation label {
    width: 20px;
    height: 20px;
    background: #FC1D52;
    color: #FFFFFF;
    font-weight: bold;
    margin: 5px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}



.custom-navigation label:hover {
    background: #02A8A3; 
}






/*  images-four-grid
--------------------------------------------------------------------------------------- */
section.images-four-grid {
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    grid-gap: 0rem; 
    grid-template-areas: 
    "f1 f2 f3 f4";
}

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



section.images-three-grid figure {
    margin: 0; 
    display: block; 
}

section.images-three-grid img {
    width: 100%; 
    height: auto; 
    object-fit: cover; 
}






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



/* centre text 
--------------------------------------------------------------------------------------- */
section.center-text {
    display: grid;       
    grid-template-columns: auto; 
    justify-content: center; 
    align-content: center;
    align-items: center;         
    text-align: center;
    padding: 5rem;
    grid-template-areas: 
    "hd"
    "dv"
    "fg";
    place-items: center; 
}

section.center-text-2 h3 { color: #0C1719; grid-area: hd; }
section.center-text-2 p { color: #0C1719; }
section.center-text-2 div { grid-area: dv; }
section.center-text-2 img { grid-area: fg; }







/* Left aligned text 
--------------------------------------------------------------------------------------- */


  section.left-text {
    display: grid;  
    grid-template-columns: 1fr 1fr 1fr;             
    justify-content: left;   
    align-items: left;         
    text-align: left;
    margin-block: 2rem;
    grid-template-areas:
    "hd hd hd"
    "dv dv dv" 
    ;
}

section.left-text h3 {color: #0C1719;}
section.left-text p {color: #0C1719;}

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




/* 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 right
--------------------------------------------------------------------------------------- */
	section.two-right {
		display: grid;
		grid-template-columns: 2fr 3fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0;
		margin-top: 3rem;
		grid-template-areas:
		"hd fg"
		"dv fg";
	}
	
	
	
	/* two right2
--------------------------------------------------------------------------------------- */
	section.two-right-2 {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0;
		margin-top: 3rem;
		grid-template-areas:
		"hd fg f2"
		"dv fg f2";
	}
	
	section.two-right-2 figure {grid-area: fg;}
	section.two-right-2 figure:nth-of-type(2) {grid-area: f2;}
	section.two-right-2 h3 {grid-area: hd;}
	section.two-right-2 div {grid-area: dv;}



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


/* two right video
--------------------------------------------------------------------------------------- */
	section.two-right-video {
		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:
		"hd vd"
		"dv vd";
	}

section.two-right-video h3 {grid-area: hd;}
section.two-right-video div {grid-area: dv;}
section.two-right-video video {grid-area: vd;}



/* two-right-stack
--------------------------------------------------------------------------------------- */
	section.two-right-stack {
		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:
		"hd f1"
		"dv f1"
		"dv f2"
		"dv f2";
		align-items: start;
	}
	
	

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


/* Three-right-stack
--------------------------------------------------------------------------------------- */
	section.three-right-stack {
		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:
		"hd f1"
		"dv f1"
		"dv f2"
		"dv f2"
		"dv f3";
		align-items: start;
	}
	
	

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



/* two-left-stack
--------------------------------------------------------------------------------------- */
	section.two-left-stack {
		display: grid;
		grid-template-columns: 2fr 2fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0;
		grid-template-areas:
		"f1 hd"
		"f1 dv"
		"f2 dv"
		"f2 dv";
		align-items: start;
	}
	
	

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




/* Header
--------------------------------------------------------------------------------------- */
section.header {
    display: grid;
    grid-template-columns: 2fr; 
    grid-template-rows: auto;
    grid-column-gap: 1.5rem;
    margin-top: 5rem;
    margin-bottom: .5rem;
    grid-template-areas:
        "hd"
        "dv";
}

section.header h3 {
    grid-area: hd;
    font-size: 4rem;
    text-align: left;
    line-height: 5rem; 
}

section.header div {
    grid-area: dv;
    text-align: left;
    margin-top: 1rem;
    max-width: 100%; 
    overflow-wrap: break-word; 
}

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




/*  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 div		{ grid-area: t2; }

	section.video figure	{ padding:0; }
	section.video div		{ background: transparent; }
	section.video p			{ max-width: 32rem;  }
	section.video h3		{ padding-top: 1rem; }
	
	
	/*  section.video grid
--------------------------------------------------------------------------------------- */	
	section.video-two  {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 0;
		background: transparent;
		grid-template-areas:
		"hd hd hd hd"
		"dv dv dv dv"
		"v1 v1 v2 v2"
		;
	}

	section.video-two figure	{ grid-area: v1; }
	section.video-two figure:nth-of-type(2)	{ grid-area: v2; }

	section.video-two div		{ grid-area: dv; }

	section.video-two h3		{ grid-area: hd; }



	section.video-two figure	{ padding:0; }
	section.video-two div		{ background: transparent; }
	section.video-two p			{ max-width: 32rem; font-size: 1.5rem; }
	section.video-two h3		{ padding-top: 1rem; }



/*  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 h2 h2"
	"h3 h3 h3" 
	"h4 h4 h4"
	"h5 h5 h5";
}

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; }
section.home figure.five  { grid-area: h5; }


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


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

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



/*  socials
--------------------------------------------------------------------------------------- */	

.social {
    display: grid; 
    gap: 10px; 
    justify-content: center; 
    align-items: center; 
    grid-template-areas: 
    "im ig";
}

.social img {grid-area: im;}
.social img:nth-of-type(2) {grid-area: ig;}


.social-container {
    display: grid;
    justify-content: center; 
    align-items: center;
    height: 100vh; 
}
.social a {
    display: inline-block;
    text-decoration: none;
}

.social a img {
    width: 80px;
    height: 80px;
    transition: transform 0.3s ease-in-out;
}

.social a:hover img {
    transform: scale(1.1);
}



/*  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; color: #FCF3E6; }
section.reflection div		{ grid-area: d1; }
section.reflection div.two	{ grid-area: d2; }

section.reflection div a { display: inline; color: #FCF3E6; font-size: 1.5rem; font-style: bold;}
section.reflection div a:hover	{ color: #00FFFF !important; text-decoration: none !important; }

section.reflection div p { display: block; color: #FCF3E6;  }






} /* end 768px media query */


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