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





body { background: #f4f1f0;}
  
}



.image-container {
  width: 200px; /* Set a width */
  margin: 0 auto; /* Centers horizontally */
  display: block; /* Ensures margin auto works */
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  height: 100vh; /* Full screen height */
  background: #f0f0f0;
 
}


.image-container img {
    display: flex;
    width: 400px;
    margin-right: 10px; /* Adjust spacing */
     width:100%;
     
}


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


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


body { font-family: Plex, Arial, serif; }
h1 {font-family: Helvetica, serif;}
h2, h3, h4, h5, h6, h7{ font-family: Helvetica,Arial,Helvetica,sans-serif; }
p			{ font-family: Plex, Arial, sans-serif; }
figcaption	{ font-family: Plex, Arial, italic; }

body {color:#1a1a1a;} 
h1, h2, h3, h4, h5, h6, h7 {color:#1a1a1a;}

p {color:#1a1a1a;}
/*text of the 
/*  top navigation section
--------------------------------------------------------------------------------------- */
nav 	{ padding: 0rem .5rem 1rem .5rem; min-height: 2rem; border-bottom: 2px #eee solid; }
nav h1	{ font-size: 2rem; margin-bottom: .5rem; }
nav a	{ white-space: nowrap; }

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

nav {margin-top: -3rem;height: 90px;}
/*  main page title after top navigation
nav + h2 selects first <h2> after <nav>
--------------------------------------------------------------------------------------- */
nav + h2 + h4 {
	font-size: 2rem;
	line-height: 1.15rem;
	margin: 2rem .5rem 3rem;
}


section { margin:0; padding: 0 .5rem 1.5rem; }
section h1 {margin: 0; padding: 1rem;}
section h2, section div h2 {text-align: center;}

section h5, section div h5 { font-size: 80rem; line-height: 17.3rem; }
section h6, section div h6 { font-size: 80rem; line-height: 17.3rem; }

section figure { margin-bottom: 10rem; }

section figcaption { font-size: 1rem; }

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

.videosize {
    position: absolute;
    z-index:0;
    top:9rem;
    left:0;
    right: 0;
    bottom: 2rem;
    width:100%;
    height:60vh;
}


.videosize2 {
    position: absolute;
    z-index:0;
    top:41.4rem;
    left:0;
    right: 0;
    bottom: 2rem;
    width:100%;
    height:60vh;
}
.video2 {
position: absolute;
    z-index:0;
    top:42rem;
    left:0;
    right: 0;
    bottom: 2rem;
    width:100%;
    height:100vh;
    }
    
/*  main content: note padding on section
--------------------------------------------------------------------------------------- */
section {margin:0; padding:1rem;}

section h3, section div h3 { font-size: 5rem; line-height: 5rem; margin: 0;}

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

section h4, section div h4 {font-size: 5rem; line-height: 4rem;}

section h7, section div h7 {font-size: 15rem; line-height: 4rem;}

section figure { margin-bottom: .5rem; margin-left: 0;margin-right: 0; margin-block: auto;}

section figcaption { font-size: 2rem; line-height: 1rem; }

section div { margin-top: 2rem; width:660.3px; margin: 1rem 0;}  /* to adjust type against images */


/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p { margin:0;}
p2 { margin:2rem 2rem;} /* max-width sets line length */
 /* max-width sets line length */
p { font-size: 1.5rem; line-height: 2.5rem; margin-left:0; }
/* p { line-height: 2.0625rem; } */ 


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

video	{ width: 100%;

  margin: 2rem 0;

    }

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


/*  link styling
--------------------------------------------------------------------------------------- */
a			{ color: #e81034; text-decoration: none; }
a:visited	{ color: #1a1a1a; text-decoration: none; }

a:active	{ color: #ffff; text-decoration: none; }

nav a			{ color: #1a1a1a; text-decoration: none; }
nav a:visited	{ color: #e81034; }
nav a:hover		{ color: #1a1a1a;}
nav a:active	{ color: #1a1a1a;text-decoration: none;  }
h4:hover      {color: #e81034;}








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

/* 
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:0; min-width: 0; }

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


/*  top navigation grid
--------------------------------------------------------------------------------------- */	
	nav {
		display: grid;
		grid-template-columns: 1fr auto;
		background: #eee; background: transparent; background: rgba(255, 99, 71, 0);
		border-bottom: 0px;
	}

	nav h1	{ font-size: 3rem; margin-bottom: 1rem; margin-top:1rem; }

	nav ul { margin: 0; }
	nav ul li { font-size:1.5rem; margin: 0 0 0 5rem; }


/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
	.container > h2 { 
		font-size: 23rem;
		line-height: 36rem;
		margin: 3rem 65px 2rem;
		text-align: center;
		height:440px;
}
		.container > h4 { 
		font-size: 22rem;
		line-height: 54rem;
		margin: 10rem 65px 1rem;
		text-align: left;
				height:703px
}
	
	
	.container > h5 {
    font-size: 21.5rem;
    line-height: 28rem;
    margin: 0; 36px 1rem 65px;
    text-align: center;
    		height:404px
}
  
 .container > h6 {
    font-size: 12rem;
    line-height: 12rem;
    margin: 8rem auto 10rem auto;
    text-align: center;
 } 

   .container > figure { 
		line-height: 4rem;
		margin: 10rem 65px 1rem;
		text-align: center;
}

.container{min-width:60rem; min-width:0;}


.iframe {justify-content: center;}








/*  hero image
--------------------------------------------------------------------------------------- */
	h2 + figure {width: 1400px; height: 500px;}
	h2 + figure img { display: block; }


/*  default desktop section styles
--------------------------------------------------------------------------------------- */
	section { padding:1rem; padding:0;}

/*  section default 12 column grid
--------------------------------------------------------------------------------------- */
	section { 
		display: grid; 
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 2rem;
		grid-row-gap: 2rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		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; }


/*  simple 3 column grid
--------------------------------------------------------------------------------------- */
	section.three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: minmax(1rem, auto) auto;
		grid-column-gap: 1rem;
		grid-row-gap: .5rem;
		grid-template-areas:
		"hd fg fg"
		"dv fg fg"
		"dv fg fg";
	}

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


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

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


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



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


/* works 
--------------------------------------------------------------------------------------- */
	section.works {
		display:flex;
		margin-block: 4rem;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 2;
		grid-column-gap: 1rem; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"hd1 hd2"
		"hd3 hd4";
	}

	section.works					            { grid-area: hd; }
	section.works               				{ grid-area: hd1; }
	section.works:nth-of-type(2)	             { grid-area: hd2; }
	section.works:nth-of-type(3)	             { grid-area: hd3; }
	section.works:nth-of-type(3)	             { grid-area: hd4; }
	
	
	section.works div hd { font-size: 5rem;line-height:auto; }























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


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

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

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

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


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


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



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

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

	.pull p { font-size: 5rem; width: 1300px; line-height: 5rem;}
	
	
	
/* pull quote 2
--------------------------------------------------------------------------------------- */
		
		
		section.pull2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0;
		grid-row-gap: 0;
		grid-template-areas:
		".. dv";
	}

	section.pull2 { margin-bottom:.5rem; }

	.pull2 p { font-size: 5rem; width:900px; line-height: 5rem;}

	
	
	

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

	section.pull3 { margin-bottom:.5rem; }

	.pull3 p { font-size: 5rem; width:1000px; line-height: 5rem;}

	
	
	
	
	
	
	
	


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

	.orange {
		background:#fafafb ;
	}


/*  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: 1fr auto;
		grid-template-rows: auto;
		grid-column-gap:0;
		background: transparent;
		grid-template-areas:
		"v1 v1 v1 v1";
	}
	section.video2  {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 1rem;
		grid-row-gap: 0;
		background: transparent;
		grid-template-areas:
		"v1 v1 v2 v2 v3 v3";
	}


.wrapper {
  display: block;
 
  
}

/* 
img {
}
 */

	section.video figure	{ grid-area: v1; }
	
	section.video2 figure	{ grid-area: v2; }
	
	section.video3 figure	{ grid-area: v3; }
	
	section.video div		{ grid-area: t2; }

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


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

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

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





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

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




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

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

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






  .column {
 
    width: 100%;
  }


body { margin: 0; }


/* container line images-two--------------------------- */
.container2 {
  display: block;
  gap: 50px;/* Space between images */
   margin: 0;
  padding: 1rem; 
}

img {
  width: auto; /* Adjust as needed */
  height: auto;

}
/* end container line images-two--------------------------- */

.center-box {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  height: 100vh; /* Full screen height */
  background: #f0f0f0;
}
.box {
  padding: 20px;
  background: white;
  border-radius: 8px;
}
/* 

h1, h2, h3, h4, h5, h6, h7, p, div, body {
  font-size: 6vw;
}
 */

figure {
  content:auto; /* Centers the figure */
  margin: 20px 0;
}

/* Use CSS Flexbox to create the layout */




.item {
  flex: 1;
}


.videocontrols {
  writing-mode: horizontal-tb;
  width: 100%;
  height: 100%;
  display: inline-block;
  overflow: hidden;
  }
  
/*  2 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-row-gap: 0rem;
		grid-template-areas:
		"hd hd fg"
		"dv dv fg";
	}
	
	section.right h3		{ grid-area: hd; }
	section.right figure	{ grid-area: fg; }
	section.right div		{ grid-area: dv; }

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


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

.slideshow {
  width:1400px;
  max-width: 1440px;
  height: 800px;
  overflow: hidden;
 position: absolute;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slideShow 5s infinite;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 2s; }
.slide:nth-child(3) { animation-delay: 4s; }
.slide:nth-child(4) { animation-delay: 6s; }
.slide:nth-child(5) { animation-delay: 8s; }
.slide:nth-child(6) { animation-delay: 10s; }

@keyframes slideShow {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}

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









#scroll-down {
  position: fixed;
  bottom: 50px;
  left: 10%;
  transform: translateX(50%);
  background-color: #1a1a1a;
  color:#f4f1f0;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  border-radius:85px;
  transition: 0.3s;
  opacity: 70%;
}

#scroll-down:hover {
  background-color: #e81034;
  
}

#next-section {
  height: 100vh;
  display: flex;
  justify-content:center;
  align-items: center;
  background-color: #f4f4f4;
}






#scroll-up {
  position: fixed;
  bottom: 50px;
  left: 2%;
  transform: translateX(50%);
  background-color: #1a1a1a;
  color:#f4f1f0;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  border-radius:85px;
  transition: 0.3s;
  opacity: 70%
}

#scroll-up:hover {
  background-color: #e81034;
}

#top {
  height: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f1f0;
}




.download-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: transparent;
  color:#e81034;
  text-decoration: none;
  border-radius: 5px;
  font-size: 32px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  visited color:#e81034;

.download-link:hover {
  background-color: #ffff;
}



.links {
  display: inline-block;
  padding: 10px 20px;
  background-color: transparent;
  color:#1a1a1a;
  text-decoration: underline;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  transition: 0.3s ease;
  visited color:#e81034;
}


a links {
  color: #1a1a1a;
  text-decoration: none;
}

links a:hover {
color: #e81034;
  text-decoration: none;
}










































  
  }   /* end 768 */