.small { font-size: 0.8em; }
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }

.h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
	margin: 1em auto 0.5em;

	font-weight: 700;
	font-family: 'Archer A', 'Archer B', serif;
	line-height: 1;
	letter-spacing: -0.05em;
}

	.h0 {
		/* visually promoted for main pages */
		margin-top: 5rem;
		margin-bottom: 2rem;

		font-size: 9rem;
	}

	h1, .h1 {
		margin-top: 5rem;
		margin-bottom: 2rem;

		font-size: 5rem;
	}

	h2, .h2 {
		margin-bottom: 2rem;

		font-size: 2.5rem;
	}

	h3, .h3 {
		font-size: 1.5rem;
	}

	h4, .h4 {
		font-size: 1rem;
	}

	h5, .h5,
	h6, .h6 {
		font-size: 1rem;
	}

a {
	margin: 0 -0.05em 0 -0.1em;
	padding: 0 0.15em;
	border-radius: 0.2em;

	color: inherit;
	text-decoration: underline;
}

	a:hover {
		background-color: white;

		color: black;
		text-decoration: none;
	}

code {
	color: inherit;
}

b, strong {
	font-weight: 400;
}

ul, ol {
	margin: 2rem 0;
}

	ul.no-bullets {
		padding: 0;

		list-style-type: none;
	}

p {
	margin: 2rem 0;
}

		p img {
			display: block;
			width: 100%;
			border-radius: 1rem;
		}
		
abbr {
	text-decoration-style: dotted;
}

iframe {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 1600px;
	min-height: 10vh;
}

/* !SECTION SPECIFIC */

.region-jump-list a {
	display: inline-block;
}
.ul-jump-list {
	columns: 3 250px;
	column-gap: 3em;
	margin: 0;
}

.white a {
	color: #2c95e0;
	color: var(--colour-bright-blue);
}

	.white a:hover {
		background-color: #2c95e0;
		background-color: var(--colour-bright-blue);

		color: white;
	}

.green a,
.green button {
		color: inherit;
}

	.green a:hover {
		background-color: black;

		color: white;
	}


.blue a,
.blue button {
	color: inherit;
}

	.blue a:hover {
		background-color: #81c92a;
		background-color: var(--colour-bright-green);

		color: #fff;
	}

.red a {
	color: inherit;
}

	.red a:hover {
		background-color: #fff;

		color: #000;
	}


.black a {
	color: inherit;
}

	.black a:hover {
		background-color: white;

		color: black;
		text-decoration: none;
	}


.grey a {
	color: inherit;
}

	.grey a:hover {
		background-color: black;

		color: white;
		text-decoration: none;
	}

/* COLOURs */

.black-text {
	color: #000;
}

	.black-text a:hover {
		background-color: black;

		color: #fff;
	}

.white-text {
	color: white;
}

	.white-text a:hover {
		background-color: white;

		color: #000;
	}

.green-text {
	color: #a6e559;
	color: var(--colour-brighter-green);
}

	.green-text a:hover {
		background-color: #81c92a;
		background-color: var(--colour-brighter-green);

		color: #000;
	}

.dark-green-text {
	color: #006622;
	color: var(--colour-dark-green);
}

	.dark-green-text a:hover {
		background-color: #006622;
		background-color: var(--colour-dark-green);

		color: #fff;
	}

.white .green-text {
	color: #81c92a;
	color: var(--colour-bright-green);
}

	.white .green-text a:hover {
		background-color: #81c92a;
		background-color: var(--colour-bright-green);

		color: #fff;
	}

.blue-text {
	color: #2c95e0;
	color: var(--colour-bright-blue);
}

	.blue-text a:hover {
		background-color: #2c95e0;
		background-color: var(--colour-bright-blue);

		color: #fff;
	}

.dark-blue-text {
	color: #003366;
	color: var(--colour-dark-blue);
}

	.dark-blue-text a:hover {
		background-color: #003366;
		background-color: var(--colour-dark-blue);

		color: #fff;
	}

.red-text {
	color: #ff3a8d;
	color: var(--colour-bright-red);
}

	.red-text a:hover {
		background-color: #ff3a8d;
		background-color: var(--colour-bright-red);

		color: #fff;
	}

.dark-red-text {
	color: #dd0e2b;
	color: var(--colour-dark-red);
}

	.dark-red-text a:hover {
		background-color: #dd0e2b;
		background-color: var(--colour-dark-red);

		color: #fff;
	}

.yellow-text {
	color: #f6d600;
	color: var(--colour-bright-yellow);
}

	.yellow-text a:hover {
		background-color: #f6d600;
		background-color: var(--colour-bright-yellow);

		color: #000;
	}

.dark-yellow-text {
	color: #ff9900;
	color: var(--colour-dark-yellow);
}

	.dark-yellow-text a:hover {
		background-color: #ff9900;
		background-color: var(--colour-dark-yellow);

		color: #000;
	}

.purple-text {
	color: #c64cff;
	color: var(--colour-bright-purple);
}

	.purple-text a:hover {
		background-color: #c64cff;
		background-color: var(--colour-bright-purple);

		color: #fff;
	}

.intro-text {
	font-size: 1.3rem;
	overflow: hidden; /* prevent large titles from causing horizontal scrollbars */
}




/* !PAGE customizations */



/* !HOME */

	body.home {}

		body.home .site-title {
			opacity: 0;
			pointer-events: none;
		}


		body.home .cke > * {
			flex-grow: 1;
		}

		.home .h1 {
			margin-top: 1rem;
		}


		.home-title-block {
			margin-top: -.5rem;

			background-size: cover;
			background-position: center bottom;
			background-image: url(/img/homepage.jpg?v=1);
			background-repeat: no-repeat;
			background-attachment: fixed;
		}


		.vl-logo-lizard {
			width: 15vmin;
			margin: 2rem auto;
			border-radius: 0;
		}
		.vl-logo-wordmark {
			max-width: 50vmin;
			margin: 4rem auto 8rem;
			border-radius: 0;
		}


		.home #footer-content h2.h1 a:hover {
			background: transparent;

			color: #2c95e0;
			color: var(--colour-bright-blue);
			text-decoration: underline;
		}


		#footer-map {
			margin-bottom: 0;
			min-height: 50vh;
			background-color: #81c92a;
			background: url(/img/footer-map.png?v=5) center center no-repeat;
			background-size: cover;
			background-attachment: fixed;
		}



/* !ABOUT */

	.staff {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		margin: 1em 0 0;
	}

		.staff figure {
			width: 23%;
			height: 23%;
			margin: 0 1% 1em;
		}

			.staff figure img {
				max-width: 100%;
				border-radius: 0.5rem;
				border: 1px solid #eee;
			}

			.staff figure figcaption {
				margin: 0.5em 0;

				font-size: 20px;
				line-height: 1em;
				text-align: center;
			}

				.staff-name {
					color: #2c95e0;
					color: var(--colour-bright-blue);
					font-weight: 600;
				}

				.staff-position {
					font-size: 0.8em;
				}


/* !SERVICES */

body.services h2 {
	font-size: 4rem;
	color: #2c95e0;
	color: var(--colour-bright-blue);
	margin-top: 3rem;
	margin-bottom: 1rem;
}


/* !PROJECTs */

body.projects {}

.project-index {
	margin: 3rem 0;
	padding-bottom: 0;
	padding-top: 8vw;
}

	.project-index .container {
		position: relative;
	}

		.project-index .container > a {
			display: block;
			margin: 0;
			padding: 0;

			text-decoration: none;
		}

			.project-index .container > a:hover {
				color: inherit;
				background: none;
			}

		.project-index p {
			margin: 0;
			font-size: 1.5rem;
			line-height: 1.2;
			color: #000;
		}
		.project-index.black p,
		.project-index.dark-blue p {
			color: #888;
			color: var(--colour-bright-grey);
		}

		.project-index.dark-red p,
		.project-index.dark-green p {
			color: #eee;
		}

		.project-index h2 {
			margin: 0.15em 0 0.55em;
			font-size: 4rem;
		}

			.project-index a:hover h2 {
				text-decoration: underline;
			}

		.project-index ul {
			margin: 1em 0 2em;
		}

.projects.viewProject .container {
	position: relative;
	z-index: 1;
}

.project-block-meta {
	padding-top: 0;
	padding-bottom: 0;
}
.project-block-description {
/* 	margin-top: 10rem; */
}

	.projects.viewProject .project-url {
		margin-top: 6rem;
		margin-bottom: 0;
	}

		.projects.viewProject .project-url a {
			color: inherit;
			text-transform: lowercase;
		}

			.projects.viewProject .project-url a:hover {
				color: white;
			}


	.viewProject .project-name {
		margin: 1.5rem auto 2.5rem;

		line-height: 1;
	}

	.project-features {
		display: flex;
		flex-wrap: wrap;
		justify-content: left;

		width: 100%;
		padding: 0;
		margin: 1rem auto;

		color: #000;
		font-size: 1rem;

		list-style-type: none;
	}

		.project-features li {
		}

			.project-features li:after {
				content: "•";
				padding: 0 0.5em;

				color: rgba(0,0,0,0.2);
			}

			.project-features li:last-child:after {
				content: none;
				padding: 0;
			}

			.project-features a {
				display: inline-block;
				color: inherit;
			}

		.project-index .project-features {
			margin-top: -1em;

			color: rgba(255,255,255,0.9);
			font-weight: 300;
		}
			.project-index .project-features li::marker {
				text-align: left;
			}

			.project-index .project-features span {
				display: inline-block;
				margin: 0 -0.05em 0 -0.1em;
				padding: 0 0.15em;
				border-radius: 0.2em;

				text-decoration: underline;
			}

				.project-index .project-features span:hover {
					background-color: white;

					color: #2c95e0;
					color: var(--colour-bright-blue);
					text-decoration: none;
				}

				.project-index .project-monitor {
					overflow: hidden;
					padding: 0px;
                    min-height: 150px;
					max-height: 250px;
				}

				.project-index .project-monitor img {
					width: calc(100% - 8%);
					position: relative;
					margin: 4% auto 0;

				}

	.project-archived {
		padding: 1em;
		margin: 0 auto 2rem;
		background: #333;

		color: white;
	}

		.project-archived a {
			color: inherit;
		}

	.project-monitor {
/* 		position: absolute; */
/* 		left: 0; */

		display: block;
		width: 100%;
		padding: 4% 4% 27% 4%;

		background: url(/img/monitor.png?v=2) 0 0 no-repeat transparent;
		background-size: 100% auto;
	}

		.viewProject .project-monitor {
			margin: 2rem 0 0;

			z-index: 20;
		}

		.project-monitor a {
			display: block;
		}

		.project-screen {

			position: relative;
		}
/*
		.project-screen:after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			right: 10px;
			bottom: 0;
			background-color: rgba(255, 0, 0, .05);

		}
*/
		.scrollarea {
			overflow: hidden;
/* 			overflow-y: scroll; */
			height: 0;
			padding-top: 57%;
			pointer-events: none;
			position: relative;
		}
		.scrollbar {
			display: none;
			position: absolute;
			top: 0; right: 0; bottom: 0;
			width: 15px;
			background-color: rgba(255, 0, 0, .05);
		}
		.scrollbar:hover {
/* 			pointer-events: none; */
			background-color: rgba(255, 0, 0, .1);
		}

		.project-monitor img {
			display: block;
			position: absolute;
			top: 0;
			width: 100%;
			height: auto;
			margin: 0;
			border-radius: 0.25rem;
		}

		.monitor-clip {
			min-height: 12rem;
			margin-top: -15rem;
		}


	.project-block-description h2 {
/* 		margin-top: 21rem; */
		font-size: 4rem;
	}

	.project-associated-screenshots {
		padding: 2rem 0;
	}

		.project-associated-screenshots h3 {
			margin-top: 0.5rem;

			font-size: 3em;
			font-weight: 500;
		}
		
		.project-associated-catalyst {
			margin: 2em 0;
			padding: 2em 0;
			border-top: 1px solid rgba(255, 255, 255, 0.2);
			
			color: inherit;
			font-size: 1.2em;
			line-height: 1.2em;
			font-weight: 500;
			font-family: 'Archer A', 'Archer B', serif;
			letter-spacing: -0.04em;
			
		}
				
			.project-associated-catalyst span {
				opacity: 0.5;
			}
			
			.project-associated-catalyst a {}
				
				.project-associated-catalyst a.catalyst-logo {
					margin-right: -0.2em;
					
					font-size: 0.8em;
					font-weight: 900;
					font-family: 'Verlag A', 'Verlag B', serif;
					text-transform: uppercase;
					text-decoration: none;
					letter-spacing: 1px;
					
					opacity: 0.5;
				}
				
					.project-associated-catalyst a.catalyst-logo:hover {
						opacity: 1;
					}
			
			.project-associated-catalyst i {
				display: inline-block;
				margin-right: 0.5em;
				margin-left: 0.15em;
			}

		.project-associated-screenshots noscript,
		.project-associated-screenshots img {
			display: block;
			width: 45%;
			height: auto;
			border: 15px solid white;
			border-bottom: 60px solid white;
			align-self: flex-start;
		}

			.project-associated-screenshots noscript img {
				width: 100%;
				border: 0;
			}

		.project-associated-description {
			width: 45%;
		}

			.project-associated-description *:first-child {
				margin-top: 0;
			}

		.project-associated-wrapper {
			display: flex;
			justify-content: space-between;
		}

	.project-related-news,
	.project-related-projects {}

		.project-related-news h3,
		.project-related-projects h3 {
			margin-top: 0.5em;
			margin-bottom: 0.25em;
		}

			.project-related-news p {
				margin-top: 0;
				margin-bottom: 0;
			}

			.news-links {
				margin-top: 1rem;
			}

			.project-related-projects p {
				margin-top: 0;
				margin-bottom: 1.5em;
			}

			.project-related-news a {
				color: inherit;
			}

				.project-related-news a:hover {
					color: white;
				}

		.project-related-projects ul {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;

			margin: 1em 0;
			padding: 0;

			list-style-type: none;
		}
		
			.project-related-projects.right ul {
				flex-direction: row-reverse;
			}

			.project-related-projects ul li {
				width: 31%;
				margin: 0 1% 2%;
			}

				.project-related-projects ul li a {
					position: relative;

					display: block;
					margin: 0;
					padding: 2px;
					border-radius: 0.55rem;

					overflow: hidden;
				}

					.project-related-projects ul li.archive a img {
						 filter: grayscale(100%);
					}

						.project-related-projects figure {
							display: block;
							overflow: hidden;
							position: relative;
						}
						.project-related-projects figcaption {
							display: block;
							margin: 0.25em 0.5em;

							line-height: 1.3;
							font-weight: 400;
						}
						.project-related-projects .archive figure:after {
							content: "Archived";

							position: absolute;
							top:30px;
							right: -70px;
							left: auto;

							width: 250px;

							background: #333;

							color: white;
							font-size: 0.8rem;
							text-transform: uppercase;
							text-align: center;

							transform: rotate(45deg);
							-webkit-transform: rotate(46deg);
							overflow: hidden;

						}

					.project-related-projects ul li a:hover {
						background-color: #2c95e0;
						background-color: var(--colour-bright-blue);
					}

					.project-related-projects ul li img {
						display: block;
						width: 100%;
						margin: 0;
						border-radius: 0.5rem;
						border: 1px solid #eee;
					}

						.project-related-projects ul li a:hover img {
							border: 1px solid transparent;
						}
					
			.project-related-projects ul.count-1:after,
			.project-related-projects ul.count-2:after,
			.project-related-projects ul.count-3:after,
			.project-related-projects ul.count-4:after,
			.project-related-projects ul.count-5:after,
			.project-related-projects ul.count-6:after,
			.project-related-projects ul.count-7:after,
			.project-related-projects ul.count-8:after,
			.project-related-projects ul.count-9:after,
			.project-related-projects ul.count-10:after,
			.project-related-projects ul.count-11:after,
			.project-related-projects ul.count-12:after {
				order: 999;

				display: block;
				width: 31%;
				height: 0;
				margin: 0 1% 2%;
				padding-top: 18.5%;
				border-radius: 0.5rem;
				background-color: #f6f6f6;
			}

				.project-related-projects ul.count-1:after,
				.project-related-projects ul.count-2:after,
				.project-related-projects ul.count-4:after,
				.project-related-projects ul.count-5:after,
				.project-related-projects ul.count-7:after,
				.project-related-projects ul.count-8:after,
				.project-related-projects ul.count-10:after,
				.project-related-projects ul.count-11:after {
					content: "";
				}
				
			.project-related-projects ul.count-1:before,
			.project-related-projects ul.count-2:before,
			.project-related-projects ul.count-3:before,
			.project-related-projects ul.count-4:before,
			.project-related-projects ul.count-5:before,
			.project-related-projects ul.count-6:before,
			.project-related-projects ul.count-7:before,
			.project-related-projects ul.count-8:before,
			.project-related-projects ul.count-9:before,
			.project-related-projects ul.count-10:before,
			.project-related-projects ul.count-11:before,
			.project-related-projects ul.count-12:before {
				order: 998;

				display: block;
				width: 31%;
				height: 0;
				margin: 0 1% 2%;
				padding-top: 18.5%;
				border-radius: 0.5rem;
				background-color: #f6f6f6;	 
			}									 

				.project-related-projects ul.count-1:before,
				.project-related-projects ul.count-4:before,
				.project-related-projects ul.count-7:before,
				.project-related-projects ul.count-10:before {
					content: "";
				}


.home .project-index {
	height: 650px;
	overflow: hidden;
}

.home .project-index .project-monitor {
	max-height: none;
}

/* !BLOG */

	body.blog {}

		.blog-index {
			margin: 3rem 0;
			padding: 3rem 0;
		}
		.blog-index.grey {
			background-color: #f3f3f3;
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
		}

			.blog-index a {
				color: inherit;
			}

			.blog-index .container {
				padding-bottom: 2rem;
			}
			.blog-index > .full {
				margin-top: -4rem;
			}

			.blog-headline {
				position: relative;
				margin-top: 0;

				font-size: 4rem;
				line-height: 1;
			}

				.blog.view .blog-headline {
					font-size: 5rem;
				}

				.blog-headline i {
					position: absolute;
					top: 0.6em;
					left: -1em;

					color: #ccc;
					font-size: 0.5em;

					transform: rotate(30deg);
				}

			.blog-full-article {
				padding-top: 2rem;
			}
			.blog-full-article .full {
				margin-top: -6rem;
			}

			.blog-meta-data {
				margin: 4rem 0 1.5rem;
			}

		.daily-link {}

			.daily-link h3 {
				font-size: 1.4rem;
				font-weight: 500;
			}

				.daily-link p {
				margin: 1rem 0;
				}

				.daily-link h3 + p {
				margin-top: -0.5rem;
				}

		.archive-date {
			display: block;
			margin-top: 1rem;

			font-size: 2rem;
			letter-spacing: 0;
		}