/* Base
================================================== */

html { font-size: 50%; }
@media (min-width: 600px) {
	html { font-size: 62.5%;	}
	}

body {
	font-size: 1.6em;
	line-height: 1.3;
	font-weight: 400;
	font-style: normal;
	text-align: left;
	font-family: 'Montserrat', sans-serif;
	color: #333;
	background-color: #fff;
	}


h1,h2,h3,h4 { font-weight: normal; }
h1,h2,h3,h4 p { margin: 0; padding: 0; }

a {
	color: #333;
	text-decoration: none;
	}
a:hover {
	color: #000;
	}

strong { font-weight: 900; }
em { font-style: italic; }
img { display: block; }


/* Accent colours
================================================== */

:root {
	--BEOW: #8e553c;
	--BRET: #b38230;
	--CAFE: #934b25;
	--COST: #2e716f;
	--DICE: #b5345a;
	--DIVI: #b53a24;
	--ELYS: #b73123;
	--FAIR: #014c63;
	--FANT: #d66d9C;
	--FISH: #1575a4;
	--FUSS: #4d6529;
	--KARN: #378d2f;
	--PROF: #6f290e;
	--PYRA: #a04226;
	--SCOT: #34508f;
	}

div.BEOW, body.BEOW .award { background-color: var(--BEOW); }
div.BRET, body.BRET .award { background-color: var(--BRET); }
div.CAFE, body.CAFE .award { background-color: var(--CAFE); }
div.COST, body.COST .award { background-color: var(--COST); }
div.DICE, body.DICE .award { background-color: var(--DICE); }
div.DIVI, body.DIVI .award { background-color: var(--DIVI); }
div.ELYS, body.ELYS .award { background-color: var(--ELYS); }
div.FAIR, body.FAIR .award { background-color: var(--FAIR); }
div.FANT, body.FANT .award { background-color: var(--FANT); }
div.FISH, body.FISH .award { background-color: var(--FISH); }
div.FUSS, body.FUSS .award { background-color: var(--FUSS); }
div.KARN, body.KARN .award { background-color: var(--KARN); }
div.PROF, body.PROF .award { background-color: var(--PROF); }
div.PYRA, body.PYRA .award { background-color: var(--PYRA); }
div.SCOT, body.SCOT .award { background-color: var(--SCOT); }

body.BEOW .info { color: var(--BEOW); }
body.BRET .info { color: var(--BRET); }
body.CAFE .info { color: var(--CAFE); }
body.COST .info { color: var(--COST); }
body.DICE .info { color: var(--DICE); }
body.DIVI .info { color: var(--DIVI); }
body.ELYS .info { color: var(--ELYS); }
body.FAIR .info { color: var(--FAIR); }
body.FANT .info { color: var(--FANT); }
body.FISH .info { color: var(--FISH); }
body.FUSS .info { color: var(--FUSS); }
body.KARN .info { color: var(--KARN); }
body.PROF .info { color: var(--PROF); }
body.PYRA .info { color: var(--PYRA); }
body.SCOT .info { color: var(--SCOT); }


/* Array
================================================== */

.array div {
	width: 33.33%;
	float: left;
	}
.array div.fill-25 { display: none; }

@media (min-width: 600px) {
	.array div { width: 25%; }
	.array div.fill-25 { display: block; }
	}
@media (min-width: 1000px) {
	.array div { width: 20%; }
	.array div.fill-25 { display: none; }
	}

.array div img {
	width: 100%;
	height: auto;
	}
.array div a:hover img {
	filter: brightness(110%);
	}

.array div a {
	position: relative;
	display: block;
	}
.array:after { /* Fix layout */
  content: "";
  display: table;
  clear: both;
  }


/* Mini-array - 55cards
================================================== */

.wrapper {
	margin: 4.0rem 0 5.0rem;
	}
@media (min-height: 660px) {
	.wrapper {
	  position: absolute;
		margin: 0;
	  top: 0;
	  bottom: 0;
	  right: 0;
	  left: 0;
	  height: 100%;
		}
	div.box {
		position: relative;
		top: 50%;
	  -webkit-transform: translateY(-50%);
	  -ms-transform: translateY(-50%);
		transform: translateY(-50%);
		}
	}

.miniarray {
	position: relative;
	width: 75%;
	margin: 0 auto;
	overflow: auto;
	box-shadow: 1px 1px 3px #333;
	transform: scale(1);
	transition: 0.4s all ease;
	border-radius: 10px;
	}
.miniarray:hover {
	transform: scale(1.03) translateY(-4px);
	box-shadow: 3px 3px 9px #666;
	}
.miniarray div {
	width: 33.33%;
	float: left;
	}
.miniarray div:nth-last-child(1),
.miniarray div:nth-last-child(2),
.miniarray div:nth-last-child(3) {
	display: none;
	}
.miniarray div img {
	width: 100%;
	height: auto;
	}
@media (min-width: 660px) {
	.miniarray {
		width: 560px;
		}
	.miniarray div {
		width: 25%;
		}
	.miniarray div:nth-last-child(1),
	.miniarray div:nth-last-child(2),
	.miniarray div:nth-last-child(3) {
		display: block;
		}
	}



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

.home h1 { /* 55cards */
	margin-top: 3.0rem;
	text-align: center;
	}
.home.portfolio h1 { /* BJG */
	margin-top: 5.2rem;
	}
.home h1 {
	font-size: 2.6rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
	margin-left: 6%;
	margin-right: calc(6% - 0.5rem);
	}
.home h1 span {
	font-size: 0.5rem; /* Kerning! */
	}
@media (min-width: 450px) {
	.home h1 {
		font-size: 3.4rem;
		letter-spacing: 0.75rem;
		margin-right: calc(6% - 0.75rem);
		}
	.home h1 span {
		font-size: 0.9rem;
		}
	}
.home h2 {
	font-size: 2.0rem;
	font-weight: 500;
	color: #c00;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
	text-align: center;
	margin: 0 calc(6% - 0.5rem) 0 6%;
	}



/* Game
================================================== */


/* Cover image */
.cover {
	}
.cover img {
	width: 75%;
	margin: 0 auto;
	}
@media (min-width: 600px) {
	.cover img {
		width: 45rem;
		}
	}


/* Layout */
.main {
	position: absolute;
	width: 100%;
	}
.title,
.text,
.links,
.footer {
	position: relative;
	max-width: 76.8rem;
	margin: 0 auto;
	}

.main br {
	display: inline;
	}
@media (min-width: 450px) {
	.main br {
		display: none;
		}
	.main .text br,
	.main h1 br,
	.main .footer br,
	.footer br {
		display: inline;
		}
	}
@media (min-width: 768px) {
	.main .footer br,
	.footer br {
		display: none;
		}
	.main h1 br,
	.main .text br {
		display: inline;
		}
	}


/* Menu icon */
.back {
	position: absolute;
	z-index: +1;
	top: -28px;
	left: 16px;
  height: 48px;
  width: 48px;
  border-radius: 100%;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, .5);
  background-color: #fff;
	}
.back a {
  display: block;
	height: 48px;
	text-align: center;
	}
.back i {
	line-height: 48px;
	font-size: 30px;
	}

@media (min-width: 700px) {
	.back {
	  float: left;
		top: 33px;
		left: 33px;
		height: auto;
		width: auto;
		border-radius: 0;
		box-shadow: none;
		}
	.back a {
		height: auto;
		}
	.back i {
		line-height: 34px;
		font-size: 34px;
		}
	}


/* Game title, info */
.title {
	text-align: center;
	margin-top: 3.2rem;
	margin-bottom: 4.0rem;
	}
.title h1,
.title p {
	margin: 2.2rem 6% 0 6%;
	}

.title h1 {
	font-size: 3.6rem;
	line-height: 3.6rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.75rem;
	margin-bottom: 3.2rem;
	margin-right: calc(6% - 0.75rem);
	}

.title .info {
	font-size: 1.5rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	margin-right: calc(6% - 0.2rem);
	}
.title .info + .info {
	margin-top: 0.6rem;
	}
@media (min-width: 450px) {
	.title .info + .info {
		margin-top: 0;
		}
	}

.title .credit {
	color: #888;
	}

.title .award {
	display: inline-block;
	font-size: 1.5rem;
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	padding: 0.6rem 2.0rem 0.6rem 2.2rem;
	border-radius: 0.6rem;
	margin-top: 2.6rem;
	margin-right: calc(6% - 0.2rem);
	}
.title .award + .award {
	margin-top: 0.9rem;
	}
@media (min-width: 450px) {
	.title .info + .info {
		margin-top: 0;
		}
	}


/* Body text */
.text {
	margin: 0 auto;
	border-top: 2px solid #e5e5e5;
	border-bottom: 2px solid #e5e5e5;
	padding: 1.7rem 0;
	position: relative;
	}
.text p {
	margin: 2.6rem 3.0rem;
	}
@media (min-width: 600px) {
	.text {
		padding: 3.4rem 0;
		}
	.text p {
		margin: 2.6rem 6.0rem;
		}
	}

.text div.hero img {
	width: 90%;
	margin: 3.0rem auto;
	}


/* Links */
.links {
	margin: 3.0rem auto;
	text-align: center;
	}
.links a {
	display: inline-block;
	font-size: 1.5rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	padding: 0.5rem 2.0rem;
	border: 1px solid #ccc;
	border-radius: 0.6rem;
	margin: 0.6rem 1.0rem;
	}
.links a:hover {
	border-color: #ddd;
	background-color: #ddd;
	text-decoration: none;
	}


/* Footer menu */
.footer {
	margin: 10.0rem auto 4.0rem;
	text-align: center;
	}
.home .footer {
	margin-top: 5.0rem;
	}

.footer h3 {
	font-size: 1.5rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.3rem;
	margin-left: 6%;
	margin-right: calc(6% - 0.3rem);
	color: #666;
	}
.footer h3 span {
	font-size: 0.3rem;
	}
.footer h4 {
	font-size: 1.2rem;
	font-weight: 500;
	color: #c00;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	text-align: center;
	color: #666;
	margin: 0 calc(6% - 0.2rem) 2.0rem 6%;
	}


.footer p {
	font-size: 1.2rem;
	line-height: 2.0rem;
	font-weight: 500;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.15rem;
	}
.footer p a {
	display: inline-block;
	color: #888;
	margin: 0 1.0rem;
	}
.footer p a:hover {
	color: #333;
	}