style.css

@charset 'UTF-8';

/* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */

	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
	{
		margin:0;
		padding:0;
		border:0;
		font-size:100%;
		font:inherit;
		vertical-align:baseline;
	}

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

	body
	{
		margin: 0;
		padding: 0;
		background: #161616;
	}

	.image.fit img {
		width: 100%;
		height: auto;
	}

	body,input,textarea,select
	{
		font-family: sans-serif;
		font-size: 11pt;
		font-weight: 300;
		line-height: 1.75em;
		color: #777;
	}

	h1,h2,h3,h4,h5,h6
	{
		font-weight: 300;
		color: #777;
	}
	
		h2
		{
			letter-spacing: -0.025em;
		}
	
		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
		{
			color: inherit;
			text-decoration: none;
		}
		
	strong, b
	{
		font-weight: 500;
		color: #000000;
	}
	
	em, i
	{
		font-style: italic;
	}

	a
	{
		text-decoration: none;
		color: #80BA8E;
	}
	
	a:hover
	{
		text-decoration: underline;
	}
	
	blockquote
	{
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}
	
	p, ul, ol, dl, table
	{
		margin-bottom: 1em;
	}

	header
	{
		margin-bottom: 1.6em;
	}

		header .byline
		{
			display: block;
			margin: 1.5em 0 0 0;
			padding: 0 0 0.5em 0;
			font-size: 1.7em;
		}

		header h2
		{
			font-size: 3.4em;
		}

	/* Container */

	.container 
	{
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Grid */

	.grid 
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		gap: 50px 50px;
	}

		.grid section 
		{
			flex-basis: 575px;
			margin-bottom: 0;
		}

	/* Sections/Articles */
	
	section,
	article
	{
		margin-bottom: 3em;
	}
	
	section > :last-child,
	article > :last-child
	{
		margin-bottom: 0;
	}

	section:last-child,
	article:last-child
	{
		margin-bottom: 0;
	}

	/* Images */

	.image
	{
		display: inline-block;
	}
	
		.image img
		{
			display: block;
			width: 100%;
			object-fit: cover;
		}
		
		.image.full
		{
			display: block;
			width: 100%;
			margin-bottom: 2em;
		}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

	#header
	{
		position: relative;
		background: url(./images/LumbridgeNear.png) no-repeat bottom center;
		background-attachment: fixed;
		background-size: cover;
		text-align: center;
	}

		#header:before
		{
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(64,64,64,0.125);
		}

		#header *
		{
			position: relative;
			z-index: 1;
		}

/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/

	nav
	{
		background: rgba(0,0,0,.1);
		top: 0;
		left: 0;
		width: 100%;
	}

	nav > ul
	{
		margin: 0;
		padding: 0;
		text-align: center;
	}

	nav > ul > li
	{
		display: inline-block;
		border-right: 1px solid;
		border-color: rgba(255,255,255,.1);
	}

		nav > ul > li:last-child
		{
			padding-right: 0;
			border-right: none;
		}

		nav > ul > li > a
		{
			display: inline-block;
			padding: 1.5em 1.5em;
			letter-spacing: 0.06em;
			text-decoration: none;
			text-transform: uppercase;
			font-size: 1.1em;
			outline: 0;
			color: #FFF;
		}

/*********************************************************************************/
/* Logo                                                                          */
/*********************************************************************************/

	#logo
	{
		padding: 11em 0 11em 0;
	}
	
		#logo h1
		{
			color: #FFF;
			display: block;
			text-decoration: none;
			font-weight: 300;
			line-height: 1em;
			font-size: 7em;
			color: #FFF;
			letter-spacing: -0.05em;
			margin: 0 0 0.125em 0;
		}
		
		#logo span
		{
			font-size: 1.4em;
			color: #FFF;
		}

/*********************************************************************************/
/* Featured                                                                      */
/*********************************************************************************/
	
	#featured
	{
		position: relative;
		background: #f2f2f2;
		text-align: center;
		padding: 6em 0em;
	}

	#featured header
	{
		margin-bottom: 3em;
	}

	#featured p
	{
		line-height: 2em;
		font-size: 1.2em;
	}

/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/

	main
	{
		position: relative;
		background: #fff;
		padding: 6em 0em;
		text-align: center;
	}

	main header h2
	{
		padding: 0.70em 0em;
		font-size: 2.2em;
	}

/*********************************************************************************/
/* Quote                                                                         */
/*********************************************************************************/

	#quote
	{
		position: relative;
		text-align: center;
		background: url(./images/LumbridgeFar.png) no-repeat center center;
		background-attachment: fixed;
		background-size: cover;
		padding: 6em 0em;
	}

		#quote:before
		{
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(64,64,64,0.5);
		}

		#quote section
		{
			border-top: 1px solid;
			border-bottom: 1px solid;
			border-color: rgba(255,255,255,.1);
		}

		#quote blockquote
		{
			position: relative;
			border: none;
			margin: 0;
			font-weight: 300;
			color: rgba(255,255,255,.6);
			margin: 0;
			padding: 1em 4em;
			line-height: 1.5em;
			font-size: 1.8em;
		}

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
	
	footer
	{
		position: relative;
		text-align: center;
		padding: 6em 0em;
	}
	
	footer header h2
	{
		color: #FFF !important;
	}
	
	footer header .byline
	{
		color: rgba(255,255,255,.2);
	}

/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

	#copyright{
		width: 100%;
		text-align: center;
		margin-top:15px;
		margin-bottom:15px;
	}