/* barlow-condensed-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/barlow-condensed-v12-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-condensed-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/barlow-condensed-v12-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--sans: 'Barlow Condensed', sans-serif;
	--font-size: min(calc(60% + 0.2vw), 962.5%); /* 1/3 */
	--letter-spacing: 0.02em;
	--logo-color: #840A2B;
	/*--background-color: hsl(279, 100%, 99%);*/
	--background-color: #352b3b;
	/* To match background graphic
	--background-color: #FAF7F7; */
	--border-color: hsl(277, 10%, 65%);
	--primary-color: hsl(277, 0%, 85%);
	/*--primary-color: hsl(300, 100%, 15%);*/
	--accent-color: hsl(277, 50%, 70%);
	--accent-color-opacity: rgba(116, 40, 163, 0.9);
	--accent-color-light: hsl(277, 21%, 40%);
	--accent-color-light-opacity: hsla(300, 25%, 75%, 0.9);
	--color-light: hsl(279, 100%, 97.5%);
	--color-dark: hsl(279, 50%, 74%);
	--image-scale: min(calc(120px + 3vw), 962.5%);
	--gutter: 5vw;
	--gutter-max: 985px;
	--column-gap: min(var(--gutter), var(--gutter-max));
	--page-width: calc(100% - calc(var(--column-gap)*2));
}

div {
	max-height: 999999px !important;  /*stop android chrome resizing text*/
}

html {
	/* 62.5% of 16px browser font size is 10px */
	font-size: 62.5%; /* 2/3 */
	font-size: var(--font-size);
}

body {
	font-family: var(--sans);
	font-size: 1.6rem; /* 3/3 */
	line-height: 1.6;
	font-weight: 300;
	letter-spacing: var(--letter-spacing);
	background-color: var(--background-color);
	background-size: cover;
	background-attachment: fixed;
	color: var(--primary-color);
	background-image: url("../images/background.jpg");
	background-position: center;
	/* The bigger the screen, the smaller the image */
	/*background-size: calc(50vw + 500px);*/
	/*background-position: 0 -200px;*/
	/* Set height so background image is aligned bottom on work pages. 5vh is the same value as the splide slideshow-container margin-top */
	/*box-sizing: content-box !important;*/
}

/* If changing this value, also change splide container value */
body.work {
	height: calc(100vh - 3vh);
}

html {

}

.home,
.works,
.categories,
.work,
.text,
.four-oh-four {
	width: var(--page-width);
	margin-left: auto;
	margin-right: auto;
}

/*change color of text highlight*/
::-moz-selection {
  color: white;
  background: var(--accent-color);
}
::selection {
  color: white;
  background: var(--accent-color);
}

/*
==========================================================================
ANIMATION - FADE
==========================================================================
*/

body {
	animation-name: fade-in;
	animation-duration: 0.8s;
	animation-fill-mode: both;
	-webkit-animation-name: fade-in
	-webkit-animation-duration: 0.8s;
	-webkit-animation-fill-mode: both;
}

@keyframes fade-in {
	from {
		opacity: .5
	}

	to {
		opacity: 1
	}
}

/*
========================================
Images: global
========================================
*/

/* We include height/width tags in html, so browser can reserve space and avoid Lighthouse content shift issue. But height given in html strectches image, so this overrides the html */
img {
	height: auto;
}

/*
========================================
Resets
========================================
*/

/* Remove text bottom margin (and top margin) */
p, li, h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0;
	margin-top: 0;
}

/* Links */
a, a:hover, a:active, a:visited {
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
}

/*
========================================
Typography
========================================
*/

/* Add top-margin between elements */
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p,
h1+ul, h2+ul, h3+ul, h4+ul, h5+ul, h6+ul,
ul+h1, ul+h2, ul+h3, ul+h4, ul+h5, ul+h6,
p+p, p+ul,
p+h1, p+h2, p+h3, p+h4, p+h5, p+h6,
ul+p,
a+h1, a+h2, a+h3, a+h4, a+h5, a+h6,
figure+p,
p+figure {
	margin-top: 1rem;
}

.no-margin-top {
	margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.1;
}

h1 {
	font-size: 300%;
	font-weight: 300;
}

h2 {
	font-size: 160%;
	font-weight: 300;
}

/* Links */
a, a:hover, a:active, a:visited {
	color: var(--primary-color);
}


/*
========================================
Logo
========================================
*/

#logo {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: .7em !important;
	display: block;
	/*padding: 0 30px;*/
	/*padding-left: var(--gutter);*/
	float: left;
	/*line-height: 60px;*/
	line-height: 1.2;
}


#logo img {
	/*width: var(--image-scale);*/
	/*width: calc(calc(100vw - calc(var(--column-gap)*4))/6);*/
	/*margin-left: -15px;*/
	margin-right: calc(0.25vw + 1em);
	vertical-align: middle;
	border: solid 1px hsl(344, 46%, 38%);
}

/* Phones */
@media all and (max-width: 1099px) {
	#logo img {
		/*width: calc(calc(100vw - calc(var(--column-gap)*4))/3);*/
		width: clamp(.1em,calc(calc(100vw - calc(var(--column-gap)*4))/1),12em);
		margin-left: -0.5em;
	}
}

/* Desktop */
@media all and (min-width: 1100px) {
	#logo {
		padding-top: 3.9rem;
	}
	#logo img {
		width: clamp(.1em,calc(calc(100vw - calc(var(--column-gap)*4))/6),10em);
		margin-top: -1em;
	}
	#logo .logo-text {
		font-size: clamp(.1em,calc(calc(100vw - calc(var(--column-gap)*4))/64),1em);
	}
}

/* Phones: logo-text below logo */
@media all and (max-width: 599px) {
	#logo .logo-text {
		display: block;
		margin-top: 1em;
	}
}

/* Desktop: logo-text beside logo */
@media all and (min-width: 600px) {
	#logo .logo-text {
		display: inline-block;
		margin-top: .5em;
	}
}

#logo .logo-text {
	color: white;
	font-weight: 300;
}

#logo a {
	padding-left: 0;
	/* Override JS current page highlighting when on Home page */
	color: var(--primary-color) !important;
	font-weight: 400;
}


/*
========================================
Navbar
========================================
*/

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav {
	margin:0;
	padding: 0;
	/*background-color: #254441;*/
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	/*padding:0;*/
	margin:0;
	list-style: none;
	position: relative;

}

/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	/*background-color: #254441;*/

}

/* Styling the links */
/* Nav item padding has to vary on phones */
nav ul.menu a {
	padding: 7px 12px;
	/*line-height: 1.2;*/ /*Breaks hover*/
}

/* Styling the links */
nav .menu a {
	display:block;
	/*color:#FFF;*/
	/*font-size:17px;*/
	text-decoration:none;
}

/* Drop down sub item hover */
nav ul li ul li:hover {
	/*background: #000000;*/
}

/* Background color change on Hover */
nav .menu a:hover {
	/*background-color: #000000;*/

}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute;
	/* has to be the same number as the "line-height" of "nav .menu a" */
	/* top: 3.0rem;  Default: 60px, 93 for two row layout */
	/* just removing top: 3.0rem entirely fixes issue on macs */
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
	/* Dropdown width */
	width: 7.5em;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */
	left:170px;
}

/* Change ' +' in order to change the Dropdown symbol */
#top-nav li > a:after { content:  ' ˅'; }
#top-nav li > a:only-child:after { content: ''; }


/* My added rules 1
--------------------------------------------- */

nav .menu a {
	font-size: 100%;
	/*color: hsl(300, 100%, 30%);*/
	/*font-weight: 600;*/
}

/* Phone section font, and phone hamburger icon */
#top-nav label {
	/*font-weight: 600;*/
}

/* Prevent dropdowns on desktop being under any HR rules there may be on page */
nav ul ul {
	z-index: 1;
}

/* Drop down background color */
nav ul li ul li {
	background-color: var(--accent-color-light);
}

nav ul li ul li a {
	font-weight: 300;
}

nav .menu a {
	/*padding-top: 7px;
	padding-bottom: 7px;*/
}

.phone-break {
	display: none;
}

/* Nav panel */
#top-nav {
	padding-bottom: 1.25rem !important;
	/*border-bottom: solid 1px #ccc;*/
}

/* Add space above below dropdowns, and colour background */
@media all and (min-width: 1100px) {
	nav ul li ul {
		padding-top: .5rem;
		padding-bottom: 1rem;
		background: var(--accent-color-light);
	}
}


/* My added rules 2
--------------------------------------------- */


/* Remove indention from drop downs */
nav ul {
	margin: 0;
	padding: 0;
}

.menu {
	padding-top: 50px;
}

nav ul.menu a {
	padding: 7px 12px;
	/*line-height: 1.2;*/ /*Breaks hover*/
}


/* Media Queries
--------------------------------------------- */

@media all and (max-width: 1099px) {

	#logo {
		display: block;
		/*width: 100%;*/
		/*text-align: center;*/
		float: none;
		margin-top: .65rem;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	nav#top-nav .toggle + a,
	.menu {
		display: none;
	}

	/* Styling the [toggle label] drop down parent item */
	.toggle {
		display: block;
		/*background-color: none;*/
		/*color:#FFF;*/
		/*font-size:17px;*/
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		/*background-color: #000000;*/
	}

	/* Display Dropdown when clicked on Parent Label */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav .menu a:hover,
	nav ul ul ul a {
		/*background-color: #000000;*/
	}

	nav ul li ul li .toggle,
	nav ul ul a,
	  nav ul ul ul a{
		padding: 7px var(--column-gap);
		/*color:#FFF;*/
		/*font-size:17px;*/
	}

	nav ul li ul li .toggle,
	nav ul ul a {
		/*background-color: #212121;*/
	}

	/* Hide dropdowns by default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav .menu a" */
	}

	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}

	/* First tier dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */

	}

	/* My added rules
	--------------------------------------------- */

	.hamburger {
		position: absolute;
		top: 0;
		right: calc(var(--column-gap));
		margin-top: var(--column-gap);
		/* Margin right to be added if icon not in a box */
		/*margin-right: -1em;*/
		padding: 0.75em;
		background: var(--accent-color-light);
		color: white;
	}

	.desktop-break {
		display: none;
	}

	.phone-break {
		/*display: inline;*/
	}

	/* Fix drop down heading font size too big on phones */
	.toggle {
		/*font-size: 80%;*/
	}

	/* Full width nav on phones */
	nav ul {
		padding-left: 0vw;
		padding-right: 0vw;
	}

	/* Remove float on phones */
	nav ul {
		float: none;
	}

	.toggle {
		cursor: pointer;
		/* Space before */
		padding-top: 1.5rem;
	}

	/* Drop down background color */
	nav ul li ul li, nav ul li ul li .toggle,
	nav ul ul a {
		background-color: transparent;
	}

	/* Nav item padding has to be fixed on desktop */
	nav .menu a {
		padding: 7px var(--column-gap);
	}

	#top-nav {
		/* Space before */
		/*padding-top: 1rem;*/
		margin-top: var(--column-gap);
	}

	/* Padding left override for parents */
	nav ul.menu a {
		padding: 7px 0px;
	}

	/* Padding left for children only */
	nav ul.menu ul li a {
		padding: 7px 7px;
	}

	.toggle {
		/* Hamburger padding around icon */
		padding-top: 0.75em;
		padding-bottom: 0.75em;
		/* Hamburger icon: remove gap below  */
		line-height: 100%;
	}

	.toggle img {
		filter: invert(100%) !important;
	}
}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}

/* DROP DOWN ARROWS */

/* Phone */
@media all and (max-width: 1099px) {
	#top-nav ul li label::after {
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 1.25rem;
		height: 1.25rem;
		background: url('images/icons/dropdown.png') 0 0 no-repeat;
		background-size: contain;
		filter: invert(90%);
	}
}

/* Desktop */
@media all and (min-width: 1100px) {
	#top-nav .menu > li > label + a::after {
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 1.25rem;
		height: 1.25rem;
		background: url('images/icons/dropdown.png') 0 0 no-repeat;
		background-size: contain;
		filter: invert(90%);
	}
}

/* Move desktop items to left a little to approximately align with grid */
@media all and (min-width: 1369px) {
	nav ul {
		margin-right: -.6rem;
	}
}


/*
========================================
Nav current page highlighting
========================================
*/

/* Class for js highlight current page */

.current,
.current:visited {
	color: var(--accent-color);
	font-weight: 500;
}


/*
========================================
Breadcrumbs
========================================
*/

.breadcrumbs {
	margin-top: 2em;
	margin-bottom: .5em;
	font-size: 80%;
}

/* Links: underline */
.breadcrumbs a {
	border-bottom: solid 1px var(--primary-color);
}

/* Links: underline */
.breadcrumbs .breadcrumb-divider {
	margin-left: 0.125em;
	margin-right: 0.125em;
}


/*
========================================
Grid
========================================
*/

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/*align-items: center; vertical only*/
	place-items: center; /* both horiz and vert */
	column-gap: var(--column-gap);
	row-gap: calc(var(--column-gap)/1.05); /* Make row gaps slightly less tall than width of column gaps */
	margin-top: 3em;
}

@media all and (max-width: 699px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.grid div {
	/* Vertical spacing: remove excess */
	font-size: 1rem;
	line-height: 100%;
	/* Force small images to fill width of column */
	min-width: 100%;
}

.grid div a img {
	/*max-height: 139vh;*/
	/* Image width: prevent overflowing column */
	max-width: 100%;
	display: block; /* Avoid unwanted vertical space below image due to image being inline and allow space for descender below */
	border: solid 1px var(--border-color);
	box-sizing: border-box;
	min-width: 100%;
}

/*
========================================
Close
========================================
*/

.close-container {
	text-align: right;
}

.close-container button.close {
	/*padding-bottom: 0.5rem;*/
	border: none !important;
	background-color: transparent;
	margin-top: 1em;
	margin-bottom: 1em;
	/* text-align: right;  Chrome needs this to right align */
	/* Close background box color */
	/*background-color: var(--accent-color);*/
	/* For colored box background */
	/*width: 1.5em;
	height: 1.5em;*/
	width: 2.5em;
	height: 2.5em;
	margin-right: -1.175em;
}

.close-container button.close img {
	/* For colored box */
	/*height: calc(var(--image-scale) /12);
	width: calc(var(--image-scale) /12);*/
	height: calc(var(--image-scale) /8);
	width: calc(var(--image-scale) /8);

	/*padding: 1em;*/
	/*margin-right: -.3em;*/
	/* Close X color */
	filter: invert(80%);
	display: block;
}

/* Hand cursor on rollover */
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
	cursor: pointer;
}

/*
========================================
Splide
========================================
*/

/* Center everything vertically */
body.work {
	position: relative;
}

.slideshow-container {
	/* If changing this value, also change calc value in body height */
	/*margin-top: 3vh;*/
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: calc(100vw - calc(var(--column-gap)*2));
}

/* Page margin on left only (last image buts up against right edge of screen [currently set in media query]*/
.splide {
	/*width: 95%;
	margin-left: auto;*/
}

/* Few images: hide arrows */
.splide:not(.is-overflow) .splide__arrows {
  display: none;
}

/* Few images: center slides */
.splide:not( .is-overflow ) .splide__list {
	justify-content: center;
}
/* Few images: then remove gap from last */
.splide:not( .is-overflow ) .splide__slide:last-child {
	margin: 0 !important;
}

/* Phones */
@media /*(max-aspect-ratio: 1.1/1) and*/ /*OR NOT WORKING ON SAFARI 13.1.2*/ (max-width: 599px) {
	/* Phones: if portrait AND phone-sized device */
	.splide__slide img {
		width: 100vw;
		/* Border: prevent right border being cut off */
		box-sizing: border-box;
	}
	/* Phones: vertically center landscape images */
	.splide__slide {
		display: flex;
		align-items: center;
	}
	/* Phones: extend slide image area to left and right so images stretch to edges of screen */
	.splide {
		margin-left: calc(calc(var(--column-gap))*-1);
		width: 100vw;
	}
}

/* Desktop */
@media /*(min-aspect-ratio: 1.1/1) or*/ /*OR NOT WORKING ON SAFARI 13.1.2*/ (min-width: 600px) {
	/* Desktop: if landscape AND/OR large device */
	.splide__slide img {
		/* Since line 134 has height:auto, we can actually remove the 70vh value */
		/*height: 70vh;*/
		/* Specify width*/
		width: auto;
	}
	/* Desktop: add page padding */
	.splide {
		/*width: var(--page-width);*/
		/*margin-left: auto;
		margin-right: auto;*/
	}
}

/* Image border */
.splide__slide img {
	/* Box sizing in media queries */
	border: solid 1px var(--border-color);
}

.splide__arrow {
	/* Arrow background box color */
	background: white !important;
	/*background: var(--accent-color) !important;*/
	border-radius:0% !important;
	height: 2em !important;
	opacity:0.7 !important;
	opacity:1 !important;
	width: 2em !important;
}

.splide__arrow svg {
	/* Arrow color */
	/*filter: invert(100%)!important;*/
}

.splide__arrow--prev {
	left: 0em !important;
}
.splide__arrow--next {
	right: 0em !important;
}
.splide__arrow:hover:not(:disabled) {
	opacity: .9 !important;
	background: var(--accent-color) !important;
}
.splide__arrow:disabled {
	opacity: .3 !important;
	display: none;
}

/* Pagination: move under slider */
.splide__pagination{
	bottom: -2em !important;
}

/* Pagination other dots: recolor */
.splide__pagination__page {
	background: hsl(277, 20%, 40%) !important;
	opacity: 1 !important;
	border-radius: 0 !important;
}

/* Pagination current dot: recolor */
.splide__pagination__page.is-active {
	background: var(--accent-color) !important;
	/* Current dot size enlargement override */
	/*transform: none !important;*/
}

/* Pagination: hide links to google doesn't give 'clickable area too small' issue */
.splide__pagination__page {
	pointer-events: none;
}

/* Cursor */
.splide__slide img {
	cursor: move; /* fallback if grab cursor is unsupported */
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
}
 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.splide__slide img:active {
	cursor: grabbing;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
}

/*
========================================
Caption
========================================
*/

.caption {
	margin-top: 4em;
	padding-bottom: 1em;
	text-align: left;
}

@media all and (max-width: 699px) {
	.caption {
		margin-top: 3em;
	}
}

.caption h1 {
	display: inline-block;
	font-size: 100%;
	font-weight: 500;
	margin-right: 1em;
}

.caption p {
	display: inline-block;
	margin-top: 0;
}

/*
========================================
Work loading spinner
========================================
*/

.splide__slide {
	position: relative !important;
}
.work-spinner {
	display: block;
	border: 5px solid var(--accent-color);
	border-radius: 0px; /*40 = circle */
	/*background: var(--accent-color);*/
	height: 40px;
	left: 50%;
	margin: -20px 0 0 -20px;
	opacity: .5;
	position: absolute;
	top: 50%;
	width: 40px;
	z-index: -1;
	-webkit-animation: pulsate 1s ease-out infinite;
	-moz-animation: pulsate 1s ease-out infinite;
	-ms-animation: pulsate 1s ease-out infinite;
	-o-animation: pulsate 1s ease-out infinite;
	animation: pulsate 1s ease-out infinite;
	/* add delay to not showing through fading in image */
	/*animation-delay: 0.8s;*/
}

@keyframes pulsate {
	0% {
		transform: scale(0.1);
		opacity: 0.0;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: scale(1.2);
		opacity: 0;
	}
}

/*
========================================
Text Pages
========================================
*/

.text main {
	/*margin-top: 2em;*/
}

.text main .text-container {
	display: grid;
	/* Force equal column widths, even if content is wider */
	column-gap: var(--column-gap);

	margin-top: var(--column-gap);
}

.text main .text-container + .text-container{
	/*border-top: solid 1px var(--primary-color);
	padding-top: var(--column-gap);*/
}

.text main .text-container .text-text {
	padding: var(--column-gap);
	background: var(--accent-color-light);
	font-size: 1.2em;
}

.text main .text-container .text-text p {
	max-width: 30em;
}

@media all and (max-width: 699px) {
	.text main .text-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.text main .text-container .text-text {
		grid-column: span 2;
		order: 2;
	}
	.text main .text-container .text-image {
		grid-column: span 2;
	}
	.text main .text-container .text-image img {
		/*min-width: 100%;*/
	}
}

@media all and (min-width: 700px) {
	.text main .text-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: calc(var(--column-gap)/1.05); /* Make row gaps slightly less tall than width of column gaps */
	}
	.text main .text-container .text-text {
		grid-column: span 2;
	}
}

.text main .text-container .text-image img {
	/* Set max width to stop img overflowing column which has forced width */
	max-width: 100%;
	display: block;
}

.text main .text-container .text-image img + img {
	margin-top: calc(var(--column-gap)/1.05);
}

/*
========================================
Footer
========================================
*/

footer {
	margin-top: var(--column-gap);
	margin-bottom: var(--column-gap);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--column-gap);
	margin-top: 3em;
}

@media all and (max-width: 699px) {
	footer .copyright {
		grid-column: span 3;
		order: 2;
	}
	footer .contact {
		grid-column: span 3;
	}
}

@media all and (min-width: 700px) {
	footer .copyright {
		grid-column: span 2;
	}
	footer .contact {
		grid-column: span 1;
	}
}

footer .copyright {
	margin-top: 1em;
}

footer .contact {
	background: var(--accent-color-light);
	color: var(--primary-color);
	padding: 1em;
}

/* Links: underline */
footer .contact a {
	border-bottom: solid 1px var(--primary-color);
}

/*
========================================
Home
========================================
*/

.boxes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/*align-items: center; vertical only*/
	column-gap: var(--column-gap);
	row-gap: max(2em, calc(var(--column-gap)/1.05)); /* Make row gaps slightly less tall than width of column gaps */
	margin-top: 3em;
}

@media all and (max-width: 699px) {
	.boxes {
		grid-template-columns: repeat(2, 1fr);
	}
}

.boxes a div {
	/* Vertical spacing: remove excess */
	/*line-height: 100%;*/
	/* Overlaid text: set parent to relative */
	/*position: relative;*/
	line-height: 100%;
}

.boxes a div h2 {
	/* Line height: fix */
	line-height: 100%;
	margin-top: .25em;
}

.boxes a div img {
	/*max-height: 139vh;*/
	/* Image width: prevent overflowing column */
	max-width: 100%;
	/* Image width: ensure small images fill box */
	min-width: 100%;
	/* Avoid unwanted vertical space below image due to image being inline and allow space for descender below */
	display: block;
	border: solid 1px var(--border-color);
	box-sizing: border-box;
}

.boxes a div div {
	/*position: absolute;
	bottom: 0px;
	left: 0px;
	padding-left: 1em;
	padding-top: .75em;
	padding-bottom: 1.5em;
	background: var(--accent-color-light-opacity);
	width: 100%;*/
	/* Background width: prevent horizontal overflow */
	box-sizing: border-box !important;
	margin-top: 1em;
}

/*
==========================================================================
EDIT PAGE LINK
==========================================================================
*/

.edit-page-button button {
	position: fixed;
	bottom: 0;
	right: 0;
	margin: 1em;
	padding: .5em 1em;
	font-weight: 300;
	border: none;
	background: white;
}