/* 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 {
	--ARCH: #004B73; /* Architects of Magic */
	--BAND: #29B0C6; /* Rolling Bandits */
	--BARB: #A23944; /* Barbecubes */
	--BEOW: #8E553C; /* Beowulf Legends: Terror at Heorot */
	--BRET: #B38230; /* Brethren of the Coast */
	--CAFE: #934B25; /* Cafe Fatal */
	--CHOC: #703A14; /* Chocolate Factory */
	--COST: #2E716F; /* Costa Rica */
	--DHER: #C51F40; /* Dice Hospital ER: Emergency Roll */
	--DICE: #B5345A; /* Dice Heist */
	--DIVI: #B53A24; /* Divinare */
	--DOTT: #164A79; /* Dot to Dot */
	--ELYS: #B73123; /* Elysium */
	--FAIR: #014C63; /* Fiary Tile */
	--FANT: #D66D9C; /* Fantastic Park */
	--FLOW: #07485E; /* Flowers */
	--FISH: #1575A4; /* Fish Frenzy */
	--FUSS: #4D6529; /* Fussball Duell */
	--GARD: #5FCAC1; /* The Gardens */
	--GREA: #0689C8; /* Great Plains */
	--GRUF: #32AED1; /* Gruffalo: Games from the Deep, Dark Wood */
	--HAPP: #1F86C6; /* Happy Home */
	--HIGH: #07A5A7; /* High Risk */
	--KARN: #378D2F; /* Karnickel */
	--LABG: #C34990; /* Labyrinth Go! */
	--LABY: #0262AC; /* Labyrinth Team Edition */
	--LAB2: #33556E; /* Labyrinth Team Edition: Die Drei */
	--MAND: #5E3153; /* Mandala */
	--MAYA: #CF8A00; /* Maya */
	--NILE: #634458; /* Nile Artifacts */
	--NOMS: #F7C600; /* NOM: Simon's Cat Card Game */
	--PATT: #765525; /* Patterns */
	--PHAR: #4D4866; /* Pocket Pharma */
	--PIEC: #B67C39; /* Piece of Pie */
	--PREY: #EE6C05; /* Prey Another Day */
	--PROF: #6F290E; /* Professor Evil and the Citadel of Time */
	--PYRA: #A04226; /* Pyramids */
	--RAID: #D16A23; /* Raids */
	--ROLL: #2F6B7C; /* Roll for Adventure */
	--ROME: #CC4D66; /* City of Rome */
	--RUBI: #575077; /* Rubik's Match */
	--SERP: #B04B1B; /* Serpentiles */
	--SCOT: #34508F; /* Scotland: The Board Game */
	--SNAC: #5FB7B0; /* Snack Rabbits */
	--SPYC: #1D407F; /* Spy Connection */
	--TGOM: #2A4145; /* The Guild of Merchant Adventurers */
	--TICT: #6BB188; /* Tic Tac Trek */
	--TREE: #1B874A; /* Tree Society */
	--UNDE: #A35B2B; /* Under the Leaves */
	--VILL: #C3392E; /* Village Rails */
	--VIVI: #ED9D21; /* Vivid Memories */
	}

.ARCH .cover, .array .ARCH, .miniarray .ARCH { background-color: var(--ARCH); }
.BAND .cover, .array .BAND, .miniarray .BAND { background-color: var(--BAND); }
.BARB .cover, .array .BARB, .miniarray .BARB { background-color: var(--BARB); }
.BEOW .cover, .array .BEOW, .miniarray .BEOW { background-color: var(--BEOW); }
.BRET .cover, .array .BRET, .miniarray .BRET { background-color: var(--BRET); }
.CAFE .cover, .array .CAFE, .miniarray .CAFE { background-color: var(--CAFE); }
.CHOC .cover, .array .CHOC, .miniarray .CHOC { background-color: var(--CHOC); }
.COST .cover, .array .COST, .miniarray .COST { background-color: var(--COST); }
.DHER .cover, .array .DHER, .miniarray .DHER { background-color: var(--DHER); }
.DICE .cover, .array .DICE, .miniarray .DICE { background-color: var(--DICE); }
.DIVI .cover, .array .DIVI, .miniarray .DIVI { background-color: var(--DIVI); }
.DOTT .cover, .array .DOTT, .miniarray .DOTT { background-color: var(--DOTT); }
.ELYS .cover, .array .ELYS, .miniarray .ELYS { background-color: var(--ELYS); }
.FAIR .cover, .array .FAIR, .miniarray .FAIR { background-color: var(--FAIR); }
.FANT .cover, .array .FANT, .miniarray .FANT { background-color: var(--FANT); }
.FISH .cover, .array .FISH, .miniarray .FISH { background-color: var(--FISH); }
.FLOW .cover, .array .FLOW, .miniarray .FLOW { background-color: var(--FLOW); }
.FUSS .cover, .array .FUSS, .miniarray .FUSS { background-color: var(--FUSS); }
.GARD .cover, .array .GARD, .miniarray .GARD { background-color: var(--GARD); }
.GREA .cover, .array .GREA, .miniarray .GREA { background-color: var(--GREA); }
.GRUF .cover, .array .GRUF, .miniarray .GRUF { background-color: var(--GRUF); }
.HAPP .cover, .array .HAPP, .miniarray .HAPP { background-color: var(--HAPP); }
.HIGH .cover, .array .HIGH, .miniarray .HIGH { background-color: var(--HIGH); }
.KARN .cover, .array .KARN, .miniarray .KARN { background-color: var(--KARN); }
.LABG .cover, .array .LABG, .miniarray .LABG { background-color: var(--LABG); }
.LABY .cover, .array .LABY, .miniarray .LABY { background-color: var(--LABY); }
.LAB2 .cover, .array .LAB2, .miniarray .LAB2 { background-color: var(--LAB2); }
.MAND .cover, .array .MAND, .miniarray .MAND { background-color: var(--MAND); }
.MAYA .cover, .array .MAYA, .miniarray .MAYA { background-color: var(--MAYA); }
.NILE .cover, .array .NILE, .miniarray .NILE { background-color: var(--NILE); }
.NOMS .cover, .array .NOMS, .miniarray .NOMS { background-color: var(--NOMS); }
.PATT .cover, .array .PATT, .miniarray .PATT { background-color: var(--PATT); }
.PHAR .cover, .array .PHAR, .miniarray .PHAR { background-color: var(--PHAR); }
.PIEC .cover, .array .PIEC, .miniarray .PIEC { background-color: var(--PIEC); }
.PREY .cover, .array .PREY, .miniarray .PREY { background-color: var(--PREY); }
.PROF .cover, .array .PROF, .miniarray .PROF { background-color: var(--PROF); }
.PYRA .cover, .array .PYRA, .miniarray .PYRA { background-color: var(--PYRA); }
.RAID .cover, .array .RAID, .miniarray .RAID { background-color: var(--RAID); }
.ROLL .cover, .array .ROLL, .miniarray .ROLL { background-color: var(--ROLL); }
.ROME .cover, .array .ROME, .miniarray .ROME { background-color: var(--ROME); }
.RUBI .cover, .array .RUBI, .miniarray .RUBI { background-color: var(--RUBI); }
.SERP .cover, .array .SERP, .miniarray .SERP { background-color: var(--SERP); }
.SCOT .cover, .array .SCOT, .miniarray .SCOT { background-color: var(--SCOT); }
.SNAC .cover, .array .SNAC, .miniarray .SNAC { background-color: var(--SNAC); }
.SPYC .cover, .array .SPYC, .miniarray .SPYC { background-color: var(--SPYC); }
.TGOM .cover, .array .TGOM, .miniarray .TGOM { background-color: var(--TGOM); }
.TICT .cover, .array .TICT, .miniarray .TICT { background-color: var(--TICT); }
.TREE .cover, .array .TREE, .miniarray .TREE { background-color: var(--TREE); }
.UNDE .cover, .array .UNDE, .miniarray .UNDE { background-color: var(--UNDE); }
.VILL .cover, .array .VILL, .miniarray .VILL { background-color: var(--VILL); }
.VIVI .cover, .array .VIVI, .miniarray .VIVI { background-color: var(--VIVI); }

.DIVI .award { background-color: var(--DIVI); }
.ELYS .award { background-color: var(--ELYS); }
.LABY .award { background-color: var(--LABY); }
.MAND .award { background-color: var(--MAND); }
.PROF .award { background-color: var(--PROF); }
.TGOM .award { background-color: var(--TGOM); }

.ARCH .info { color: var(--ARCH); }
.BAND .info { color: var(--BAND); }
.BARB .info { color: var(--BARB); }
.BEOW .info { color: var(--BEOW); }
.BRET .info { color: var(--BRET); }
.CAFE .info { color: var(--CAFE); }
.CHOC .info { color: var(--CHOC); }
.COST .info { color: var(--COST); }
.DHER .info { color: var(--DHER); }
.DICE .info { color: var(--DICE); }
.DIVI .info { color: var(--DIVI); }
.DOTT .info { color: var(--DOTT); }
.ELYS .info { color: var(--ELYS); }
.FAIR .info { color: var(--FAIR); }
.FANT .info { color: var(--FANT); }
.FISH .info { color: var(--FISH); }
.FLOW .info { color: var(--FLOW); }
.FUSS .info { color: var(--FUSS); }
.GARD .info { color: var(--GARD); }
.GREA .info { color: var(--GREA); }
.GRUF .info { color: var(--GRUF); }
.HAPP .info { color: var(--HAPP); }
.HIGH .info { color: var(--HIGH); }
.KARN .info { color: var(--KARN); }
.LABG .info { color: var(--LABG); }
.LABY .info { color: var(--LABY); }
.LAB2 .info { color: var(--LAB2); }
.MAND .info { color: var(--MAND); }
.MAYA .info { color: var(--MAYA); }
.NILE .info { color: var(--NILE); }
.NOMS .info { color: var(--NOMS); }
.PATT .info { color: var(--PATT); }
.PHAR .info { color: var(--PHAR); }
.PIEC .info { color: var(--PIEC); }
.PREY .info { color: var(--PREY); }
.PROF .info { color: var(--PROF); }
.PYRA .info { color: var(--PYRA); }
.RAID .info { color: var(--RAID); }
.ROLL .info { color: var(--ROLL); }
.ROME .info { color: var(--ROME); }
.RUBI .info { color: var(--RUBI); }
.SERP .info { color: var(--SERP); }
.SCOT .info { color: var(--SCOT); }
.SNAC .info { color: var(--SNAC); }
.SPYC .info { color: var(--SPYC); }
.TREE .info { color: var(--TREE); }
.TGOM .info { color: var(--TGOM); }
.TICT .info { color: var(--TICT); }
.UNDE .info { color: var(--UNDE); }
.VILL .info { color: var(--VILL); }
.VIVI .info { color: var(--VIVI); }


/* Array - Size: 51
================================================== */

.array div { /* Three */
	width: 33.33%;
	aspect-ratio: 1 / 1;
	float: left;
	}
.array div.spare  { display: block; }
.array div.fill-1 { display: none; }
.array div.fill-2 { display: none; }
.array div.fill-4 { display: none; }

@media (min-width: 500px) { /* Four */
	.array div { width: 25%; }
	.array div.spare  { display: block; }
	.array div.fill-1 { display: block; }
	.array div.fill-2 { display: none; }
 	.array div.fill-4 { display: none; }
	}
@media (min-width: 700px) { /* Five */
	.array div { width: 20%; }
	.array div.spare  { display: none; }
	.array div.fill-1 { display: none; }
	.array div.fill-2 { display: none; }
 	.array div.fill-4 { display: none; }
	}
@media (min-width: 900px) { /* Six */
	.array div { width: 16.666%; }
	.array div.spare  { display: block; }
	.array div.fill-1 { display: block; }
	.array div.fill-2 { display: block; }
 	.array div.fill-4 { display: none; }
	}
 @media (min-width: 1100px) { /* Seven */
 	.array div { width: 14.285%; }
	.array div.spare  { display: block; }
	.array div.fill-1 { display: block; }
 	.array div.fill-2 { display: none; }
 	.array div.fill-4 { display: block; }
 	}
 @media (min-width: 1300px) { /* Eight */
 	.array div { width: 12.5%; }
	.array div.spare  { display: block; }
	.array div.fill-1 { display: block; }
 	.array div.fill-2 { display: none; }
 	.array div.fill-4 { display: block; }
 	}
 @media (min-width: 1500px) { /* Nine */
 	.array div { width: 11.111%; }
	.array div.spare  { display: block; }
	.array div.fill-1 { display: block; }
 	.array div.fill-2 { display: block; }
 	.array div.fill-4 { 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%;
	aspect-ratio: 1 / 1;
	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;
	}