* {
	box-sizing: border-box;
	touch-action: manipulation;
}

*:focus { outline:none; }

body {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: 100%;
  font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
  max-width: 960px;
  margin: auto auto;
}

p, .link {
	line-height: 1.4;
	/* font-weight: 400; */
	color: #383838;
}

h1, h2, h3 {
	font-size: 1.5em;
	font-weight: 300;
	text-transform: uppercase;
	color: #424242;
}

h1 {
	font-weight: 500;
}

h3 {
	font-size: 1.25em;
	line-height	: 1;
	text-align: center;
}

.spacing {
	line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

header {
  /* -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; */
  /* text-align: left; */
  margin-top: 1em;
  margin-left: 1.5em;
  margin-bottom: 0;
  margin-right: 1.5em;
	/* z-index: -1; */
	/* text-align:left;
	margin-top: 1.5em;
	margin-left: 2em;
	margin-right: 2em; */
}

/* .logo-container {
	margin-right: -0.3em;
} */

.logo {
	/* text-align: left; */
  max-width: 240px;
	width: calc(100% - 3em);
	height: auto;
	margin: 0.25em;
	margin-left: 0;
}

header .menu {
	display: none;
	max-height: 0;
	transition: max-height .2s ease-out;
}

a:hover,
.bottom_bar button:hover,
.link:hover,
.toggle:hover,
a:hover span,
.mySlides a:hover {
    color: #46C646;
}

/* prev and next buttons hover black instead of green NOT FOR TOUCH SCREENS*/
/* .bottom_bar button.nav_button:hover {
	color: black;
} */


/* stops pre/next buttons from going black when pressed on mobile */
@media (hover: none) {
	.bottom_bar button:hover,
	.bottom_bar button.nav_button:hover {
		color: inherit;
	}
}

/* nav ul ul {
		float: none;
		position:static;
	} */

/* hides the actual checkbox */
/* .toggle, */
[id^=drop] {
	display: none;
}

/* removes clickable photos link */
.toggle + a
/* , .menu */
 {
	display: none;
}

 nav {
 	/* text-align:right; */
 	/* overflow: hidden; */
 	position: relative;
 	/* margin: 0; */
	float:right;
 }

 nav ul {
	 position: fixed;
 	/* text-align: right; */
   /* list-style-type: none; */
   /* display: inline-block; */
   padding: 0;
   margin-top: 0.35em;
 		/* overflow: hidden; */
		width: 100%;
		/* height: 100%; */
 		/* float: right; */
		left: 0em;
		top: 3em;
		/* margin-right:1em; */
 		padding-right:1em;
		padding-bottom: 0.5em;
		/* padding-top: 0.2em; */
		background-color: #ffffff;
 		/* margin:0; */
 		/* list-style: none; */
 		/* position: relative; */
		/* box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.2); */
 }

/* dropdown section */
 nav ul ul {
	margin-top: 0.5em;
 	display: none;
 	/* float: none; */
 	position:static;
	padding-bottom: 0em;
	margin-bottom: -0.6em;
 	/* color: #ffffff; */
 	/* top: 60px; */
	z-index: 10;
 }

nav ul li,
/* nav ul li .toggle, */
nav ul li ul li {
	text-align:right;
	/* padding-left: 0.2em;
	padding-right: 0.2em; */
	margin: 0px;
	/* float: right; */
	padding:0.6em;
	/* display: block; */
	width: 100%;
	/* background-color: #303030; */
	background-color: #ffffff;
	/* float: none; */
	/* display:block; */

  /* vertical-align: bottom; */
	/* padding:14px 20px; */
	/* color:#FFF; */
	/* font-size:17px; */
	/* text-decoration:none; */
}

/* nav ul li a, */

/* formatting of the nav elemets */
nav ul li a,
nav ul li .toggle{
	/* width: 100%; */
	display:inline;
  color: #606060;
  font-size: 0.95em;
  text-decoration: none;
	text-align: right;
	font-weight: 900;
	padding: 0.5em;
	vertical-align:bottom;
}

/* active green had to be over specified after the above to override the .toggle colour
This was so the photo label shows up as green in mobile gallery page.*/
.active_green, nav ul li .active_green {
    color: #6ec071;
}

nav ul ul a {
	/* width:100%; */
	/* color: #000000; */
	font-weight: 500;
}


/* Display Dropdown when clicked on Parent Lable VERY IMPORTANT!!*/
[id^=drop]:checked + ul,
/* keeps drops down for mobile when in section */
/* .active_green + [id^=drop] + ul, */
/* drops down the main mobile menu */
.menu-btn:checked ~ .menu-icon ~ .menu {
	display: block;
	/* keeps the dropdown in front of photos in mobile */
	z-index: 10;
}


/*new stuff*/

/*menu icon*/

header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float:right;
  padding: 18px 10px;
  position: relative;
	top: -0.2em;
	right: -0.5em;
  user-select: none;
	/* z-index: 10; */
}

header .menu-icon .navicon {
  background: #000000;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
  background: #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

header .menu-icon .navicon:before {
  top: 5px;
}

header .menu-icon .navicon:after {
  top: -5px;
}

header .menu-btn {
  display: none;
}


header .menu-btn:checked ~ .menu {
  max-height: 240px;
}


header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* page header not displayd for mobile */
.page_header {
	display: none;
}


p.credit {
	/* display: inline; */
	position: relative;
	text-align: left;
	/* bottom: 0;
	right: 0; */
	margin-left: 0.4em;
	margin-top: -0.2em;
	/* color: #A3A3A3; */
	font-size: 0.75em;
	font-weight: 300;
}

/*==============*/

.container {
	/* position: relative; */
  width: calc(100vw - 2em);
  /* height: calc(100vh - 11em); */
	max-height: 900px;
  display: table;
	margin-right: 1em;
	margin-left: 1em;
}

.container .image-container {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
  text-align: center;
  vertical-align: middle;
  /* display: table-cell; */
  /* height: calc(100vh - 8.5em); */
	/* chatgpt */
	position: relative;
	display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Ensure it takes full height */
}

/* setting for div (not img) slides in lightbox */

.mySlides {
	height: 900px;
	margin: auto;
	object-fit: scale-down;
}

div.mySlides > img {
	object-fit: scale-down;
	display: block;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
 }

 /* behavior of image-container when heght is reduced*/
 @media only screen and (max-height: 1036px) {
 	.mySlides {
 	max-height: calc(100vh - 11em);
 	}
	.gallery .mySlides {
	max-height: calc(100vh - 13em);
	}
 }

 #prev, #next {
	width: 50%;
	height: calc(100vh - 11em);
	max-height: 900px;
	position: absolute;
	z-index: 9;
 }

 .gallery #prev,  .gallery #next {
	 height: calc(100vh - 13em);
 }

 #prev {
	cursor: w-resize;
 }

 #next {
	right: 0;
	cursor: e-resize;
 }

/* new stuff*/

.container .long-image-container {
	text-align: center;
	/* display: table-cell; */
	/* margin-right: 0.8em; */
	/* max-width: 100%; */
	/* margin: auto; */
	/* margin-left: -2em; */
	margin-bottom: -1.25em;
}

.container .long-image-container img {
	/* max-height: 100%; */
	max-width: 100%;
	/* max-width: calc(900px - 10em); */
	margin-bottom: 1.25em;
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.third_column {
  float: left;
  width: 33.33%;
  padding: 0.5em;
}

.third_column img, .half_column_left img, .half_column_right img {
	margin-top: 0.5em;
}

.half_column_left, .half_column_right {
  float: left;
  width: 50%;
  padding: 0.5em;
}

.half_column_left {
	padding-left: 0em;
}

.half_column_right {
	padding-right: 0em;
}
/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* ===============*/

div.full_image {
	/* display: table-cell; */
	vertical-align: top;
	margin-top: 0;
}

div.full_image img{
	max-width: 100%;
	max-height: calc(100vh - 8.25em);
}

div.info {
	display: table;
	text-align: center;
	overflow: visible;
	margin-left: 0.75em;
	margin-right: 0.75em;
	margin-top: 0em;
}
/*make the image shrink on mobile heights*/
div.info img {
	max-height: calc(100vh - 16em)
}

.bottom_bar button {
	border: none;
	margin: 0;
	background: none;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.95em;
	cursor: pointer;
}

div.numbers {
	display: inline-block;
	margin-left: 2em;
	letter-spacing: -0.2em;
	overflow: hidden;
}

.bottom_bar button.number {
	display: none;
}

/* new: not doing anything yet*/
div.bottom_bar {
	margin-top: 1em;
}

div.nav_buttons {
	float: right;
	margin-right: 1.5em;
	margin-left: 2em;
	padding: 0;
	font-weight: 600;
	font-size: 0.9em;
}


.bottom_bar button,
div.bottom_bar,
.mySlides p,
.mySlides a,
.page_header {
	color: #737373;
	/* font-weight: 400; */
}

	/* different colour for gallery buttons */
	/* div.gallery_footer, button.gallery_footer, .mySlides p {
		color: #606060;
	} */

.bottom_bar button.number_active {
	display: inline-block;
}

.bottom_bar button.number_active:hover {
	cursor: auto;
	color: inherit;
}

div.hover-image-link {
	width: 100%;
	position: relative;
	margin: 1em 0 1em;
}

div.image-overlay {
	display:flex;
	justify-content:left;
	align-items:center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 1;
	transition: .5s ease;
}

div.image-overlay p{
	 /* align-self: flex-end; */
	color: white;
	font-size: 1.6em;
	margin-left: 1.5em;
		/* position: absolute; */
	/* text-align:center;
	vertical-align:middle; */
	/* -webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%); */
}

.albums {
	/* padding: 0 -0.5em 0 -0.5em; */
	display: flex;
	flex-direction: column;
	/* flex-wrap: wrap; */
	justify-content: center;
}

.album {
	/* text-transform: uppercase; */
	text-align: center;
	line-height:1;
	font-size: 0.6em;
	margin: auto;
	margin-bottom: 1.75em;
	/* flex-grow: 1; */
	/* margin:0.5em 0 0.5em 0; */
	/* max-width: 100%;
	height: auto; */
}

.album video {
	max-width: 100%;
	height: auto;
}


.album p, .album h1, .album h2{
	margin: -0.25em;
}

.album h1 {
	margin-top: .5em;
}

.album p {
	margin-top: -0.5em;
	line-height:1;
	font-size: 0.75em;
}


/* new home page */


.projects {
	max-width: 100%;
	height: auto;
}

.project {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	/* align-items: flex-start; */ /*stops it from stretching the height*/
	margin-top: 1em;
	margin-bottom: 4em;
}

.project img {
	max-width: 100%;
	height: auto;
	margin: 8px 0 8px 0;
	/* object-fit: contain; */
}

.project p {
	/* width: 100%; */
	font-size: 0.8em;
	color: #4e4e4e;
	margin-top: 0.1em;
}

.mySlides div {
	/* width: 5px; */
	/* float: left; */
	/* position: relative; */
	position: absolute;
	/* align-self: flex-start; */
	white-space: nowrap;
	top: 100%;
	/* bottom: 0; */
	right: 100%;
	left: 0;
	font-size: 0.9em;
	margin-top: 1.3em;
}

.mySlides a {
	text-decoration: none;
	/* display: inline-block; */
}

/* to work with iframe, whcih does not work with flex*/
.projects .video {
	display: inline-block;
	width: 100%;
}


/* scroll bar compensation - optimised for cine page */
@media only screen and (min-width: 960px) {
	html {
		margin-left: calc(100vw - 100%);
		margin-right: 0;
	}
	.albums, .project {
		flex-direction: row;
		justify-content: space-between;
	}

	.project {
		align-items: flex-start;
		margin-top: 2em;
		margin-bottom: 9em;
	}

	.album {
		margin: 0;
	}
}


/* info imag are floated when height is too small */
@media only screen and (max-height: 670px) {
	div.info img {
		float: left;
		max-height: calc(100vh - 6em);
		margin-right: 2em;
		min-height: 13em;
	}
}
/* for computer screens */
@media only screen and (min-width: 750px) {
	.logo {
	  /* max-width: 240px; */
		margin: 0;
		/* margin-left: 0.2em; */
		/* position: relative; */
	}
	.logo {
		float: left;
		margin-right: 1.35em;
		/* margin-bottom: 0.35em; */
	}
	h3 {
		text-align: left;
	}
	header {
	  -webkit-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	  /* text-align: center; */
	  /* margin-top: 1em;
	  margin-left: 1.5em;
	  margin-right: 1.5em; */
		/* margin-bottom: 0; */
		text-align:left;
		margin-top: 1.5em;
		margin-left: 2em;
		margin-right: 2em;
	}

	header .menu-icon {
		display: none;
	}

	/* the margins fine-tunes the position */
	nav {
		position: static;
		float:left;
		margin-top: -0.35em;
		margin-left: -0.1em;
		margin-bottom: 0.2em;
	}

	/* positions the menu bar in the correct overall place */
	nav ul.menu {
		clear: none;
		/* float: left; */
		display: inline-block;
		max-height: none;
		/* position:relative;
		left: -1em; */
		margin-top: 0em;
		position:static;
		/* top: -0.2em; */
		float:none;
		padding: 0;
		/* vertical-align:middle; */
		/* overflow: hidden; */
	}

	nav ul li
	/* , .toggle + a */
	{
		width:auto;
		display:inline-block;
			/* text-align:inherit; */
			/* padding-left: 0.2em;
			padding-right: 0.2em; */
			/* margin: 0px; */
			/* float: right; */
			vertical-align:sub;
			padding:0.2em;
		}

		.page_header {
			display: block;
			position: relative;
			text-align: right;
			top: 0.4em;
			text-transform: lowercase;
			font-size: 0.95em;
			font-weight: 300;
			z-index: -1;  /*needed for correct functioning of nav*/
		}

		/* makes the clickable photos link visible */
		.toggle + a
		 {
			 padding-right: 0.5em;
			 /* padding:0.5em; */
			 /* vertical-align:sub; */
			display: inherit;
			position:relative;
			top: -0.5px;
			/* float:inherit; */
			vertical-align:middle;
			/* vertical-align:inherit; */
		}

		/* removes breaks in mySlides anotation for computer */
		.mySlides br {
			display: none;
		}

		/* .mySlides div {
			margin-top: 1.3em;
		} */

/* DROP DOWN SETTINGS positions and stops the drop down from going crazy...? */
	nav ul ul {
		display: none;
		float:right;
		position:fixed;
		top:2.5em;
		padding: 0.5em;
		box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.2);
		/* background-color: #ddd; */
	}

	#drop-1 ~ ul{
		width:10em;
		left: calc(50vw - 269px);
	}
	#drop-2 ~ ul{
		width:11em;
		left: calc(50vw - 229px);
	}


/* hides the original label */
	nav ul li .toggle {
			display:none;
		}

		/* for some reaason I need to sepecify to this level
		 to stop dislpay of active (checked) dropdowns all the time */
		[id^=drop]:checked + ul {
			display: none;
		}


			[id^=drop]:checked + ul:hover,
			nav ul li ul:hover ,
			.toggle ~ a:hover ~ ul {
					display: inline-block;
				}


	/* nav ul li ul { */

		/* position:relative; */
	/* } */

	.container {
		/* width: calc(100vw - 4rem + 1px); */
		width: 900px;
		height: calc(100vh - 8.25rem);
		margin-right: 2em;
		margin-left: 2em;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}

/* over specd to overide mobile definition */
	.gallery .mySlides {
		max-height: calc(100vh - 8.25rem);
	}
	/* .container .image-container img { */
	  /* max-height: 900px; */
	/* } */

	/* .mySlides {
		max-height: 900px;
	} */


	/* div.full_image {
		vertical-align: inherit;
	} */

	#prev, #next {
	 height: calc(100vh - 8.5em);
	 max-height: 900px;
	}


	div.full_image img{
		margin-top: -0.46em;
		max-height: calc(100vh - 6.25em);
	}
	div.info {
		text-align: inherit;
		/* width: 60%; */
		margin: 0em;
		margin-top: 0em;
	}
	/* div.info img {
		max-width: 20em;
		max-height: calc(100vh - 10em);
	} */
	/* @media only screen and (max-height: 690px) {
		div.info img {
			max-height: calc(100vh - 6em);
		}
	} */
	.bottom_bar button.number {
		display: inline-block;
	}
	.bottom_bar button.number_active {
		font-weight: 900;
	}

	.bottom_bar button.number_active, .bottom_bar button.number_active:hover {
		color: black;
	}

	div.image-overlay p {
		font-size: 2em;
	}

	div.image-overlay {
		opacity: 0;
	}

	.hover-image-link:hover .image-overlay {
	  opacity: 1;
	}
	/* corrrects drop down position for samller vw and corrects the container position for safari 14*/
	@media only screen and (max-width: 960px) {
			#drop-1 ~ ul{
				left: 211px;
			}
			#drop-2 ~ ul{
				left: 252px;
			}
			.container {
				width: calc(100vw - 4rem + 1px);
			}
		}
}




/* END OF 750px ===============*/



/* Fading animation for photo page*/
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.4s;
  animation-name: fade;
  animation-duration: 0.4s;
}

@-webkit-keyframes fade {
  from {opacity: .75}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .75}
  to {opacity: 1}
}


/* Links */

.link {
	display: inline-block;
	/* color: black; */
}

.box_link {
	color: white;
	background-color: #505050;
	padding: 0.25em;
}

.box_link:hover {
    text-decoration: underline;
		color: white;
		background-color: #46C646
}

footer {
	display: inline-block;
	overflow: hidden;
	position: absolute;
	text-align: right;
	bottom: 0;
	right: 0;
	margin: 0.75em;
	color: #A0A0A0;
	font-size: 0.75em;
	font-weight: 300;
}