/* Logo */
#logo a {
  width: 100%;
  display: block;
  margin-bottom: 4px;
  border:none;
  border-radius: var(--borderRadius);
}

#logo a:hover { background-color: var(--col_Accent); }
#logo a svg { fill: var(--col_Text); }
#logo a:hover svg { fill: var(--col_Background); }

/* Main Menu */
nav ul {
  	list-style: none;
  	padding: 0;
  	margin: 0;
  	padding-bottom:4px;
  	margin-bottom: 16px;
  	text-align: left;
  	border-top:4px solid var(--col_Accent);
	border-bottom: 2px solid var(--col_Text3);
}

nav li {
   	display: block;
	margin: 0px;
	margin-top:4px;
	font-size: 20vw;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 0.95;
	color: var(--col_Text2);
}

nav ul li a {
   	display: block;
  	padding: 8px;
  	color: var(--col_Text);
  	text-decoration: none;
  	border-bottom: none;
	border-radius: var(--borderRadius);
}

nav li a:hover {
	color: var(--col_Background);
  	background-color: var(--col_Accent);
  	outline: none;
}

time {
	color: var(--col_Text);
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
}

time a { color: var(--col_Text2); }
time a:hover { color: var(--col_Accent); }

article {margin-bottom:20px;}
article h2 { margin-top: 0; font-weight: 700; }
article p { margin-bottom: 20px; }

header img { width: 100%; }

.cards {
	display: flex;
	flex-wrap: wrap;
}

.card {
	display:flex;
	flex-wrap: wrap;
	flex-basis: 100%;
	background-color: white;
	margin: 0px 0px 10px 0px;
	padding: 0 !important;
	border-radius: 5px;
}

.card header {
	flex-basis: 100%;
	padding: 0px;
	margin:0px;
	border-radius: 5px 5px 0px 0px;
	background-size: cover;
	background-position: 50% 50%;
}

.card header img {
	border-radius: 5px 5px 0px 0px;
}

.card header a {
	display: block;
	width: 100%;
	height: 100%;
}

.card section {
	flex-basis: 100%;
	padding: 12px;
}

.card section.more {
	display: none;
}

.card h2 {
	font-size: 1.2em;
	margin-top:0px;
}

.card p {
	margin-bottom: 10px;
}

.card header.nocover {
	background-color: var(--col_Text3);
	background-image:url('../nocover.png');
	background-repeat: repeat;
	background-size: 40% 40%;
}
.narrow header {
	min-height: 80vw;
}

.game header {
  height: 40vw;
  max-height: 200px;
}

.about p {
	margin-top: 0px;
	padding-top: 0px;
}

ul.platforms {
	list-style: none;
	padding: 0;
  	margin: 0;
  	margin-top: 5px;
  	text-align: left;
}

ul.platforms li {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	width:26px;
	height:26px;
}

ul.platforms li a {
	display: block;
	margin: 0px;
	padding: 0px;
	width:100%;
	height:100%;
	background-color: var(--col_Text3);
	background-size:60%;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 2px;
}

ul.platforms li a:hover {
	background-color: var(--col_Accent);
	background-size:70%;
}

.video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

form.search {
	width:100%;
	margin-bottom: 16px;
}

form.search input, form.search button {
	height: 70px;
	padding: 4px;
	margin: 0;
	font-size: 1.5em;
}

form.search button {
	line-height: 1;
	min-width: unset;
}

form.search input[type=search] {
	float:left;
	width: 80%;
	border-radius: 0px 4px 4px 0px;
	border-left:none;
	padding-left:10px;
	padding-right:10px;
	font-weight: 600;
}

form.search:hover input {
	border-color:var(--col_Accent);
}

form.search:hover button  {
	background-color:var(--col_Accent);
}

form.search input:focus, form.search input:active  {
	color:white;
	background-color:var(--col_Accent);
}

form.search button {
	float:left;
	width: 20%;
	max-width: 100px;
	border-radius: 4px 0px 0px 4px;
}

form.search:after, #pagination:after, #investors .actions:after {
  content: "";
  clear: both;
  display: table;
}

.results h4 { margin-bottom:10px; }
.results h2 { color:var(--col_Text3); margin-top:0; }

/* Stats */
#stats { margin-bottom: 16px; }
#stats figure { margin: 0; }
#stats .number 	{ 
	font-size: 15vw;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2em;
	color: var(--col_Accent);
	margin-right: 6px; 
}
#stats .stat 	{ 
	font-size: 7vw;
	font-weight: 700;
	text-transform: uppercase;
	color:var(--col_Text3);
}

#pagination .button {
	display: block; 
	float:left; 
	width: calc(100% / 7 - 3.5px); 
	padding: 0px; 
	margin-left: 4px;
}

#pagination .button:first-child { margin: 0px; }

footer { margin-top: 10px; }

.mobile { display: block; }
.desktop { display: none; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */
@media (min-width: 400px) {
	#stats .number 	{ font-size: 10vw; }
	#stats .stat 	{ font-size: 5vw; }
	.narrow header {
		flex-basis: 25%;
		border-radius: 5px 0px 0px 5px;
		min-height: 120px;
	}
	.narrow section {
		padding-top:12px;
		flex-basis: calc(65% - 24px);
	}
	
	.card section.more {
		flex-basis: calc(10%);
		padding: 0;
		display: block;
	}
	.card section.more a {
		display: flex;
		align-self: stretch;
		align-items: center;
		justify-content: center;
		width:100%;
		height: 100%;
		background-color: var(--col_Text3);
		border-radius: 0px 5px 5px 0px;
	}
	.card section.more a:hover {
		background-color: var(--col_Accent);
	}
	.card section.more a img {
		fill: white;
		width: 30%;
	}
  .game header {
    height: 40vw;
    max-height: 180px;
  }
  .game section.more {
    display: none;
  }

}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	main, footer { margin-left:5vw; }
	nav ul li { font-size: 6vw; }
 	.stats h1 { font-size: 10vw; }
	.float { margin: 0px; }
	.left { float: left; padding-right: 20px; }
	.right { float: right; padding-left: 20px; }
	.half { max-width: 75%; }
	.quarter { max-width: 50%; }
	
	/* Search */
	form.search input, form.search button { height:50px; font-size: 1em; }
	form.search input[type=search] { width: 80%; }
	form.search button { width: 20%; }
	.button, button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] { display: inline-block; width: unset; height: auto; font-size: 1em; }

}

/* Larger than tablet */
@media (min-width: 750px) {
	.mobile { display: none; }
	.desktop { display: block; }
	nav ul li { font-size: 3em; }
	.container { max-width: 1080px; margin-top:100px; }
	label.checkbox { display: inline-block; width: calc(50% - 2.1px); }
  	.hideOnMobile { display: block; }
	.half { max-width: 50%; }
	.quarter { max-width: 25%; }
	#stats .number { font-size: 8vw; display: block; margin:0px; line-height: 1; }
	#stats .stat { font-size: 2.5vw; display: block; margin-bottom: 10px; }
	#pagination { max-width: 500px; }

	.game header {
		flex-basis: 40%;
		border-radius: 5px 0px 0px 5px;
		max-height: 120px;
	}
	.game section {
		padding-top:12px;
		flex-basis: calc(50% - 24px);
	}
	
	.game section.more {
		flex-basis: calc(10%);
		padding: 0;
		display: block;
	}
	.game section.more a {
		display: flex;
		align-self: stretch;
		align-items: center;
		justify-content: center;
		width:100%;
		height: 100%;
		background-color: var(--col_Text3);
		border-radius: 0px 5px 5px 0px;
	}
	.game section.more a:hover {
		background-color: var(--col_Accent);
	}
	.game section.more a img {
		fill: white;
		width: 30%;
	}
	/* Investors menu */
	#investors {
		display: block;
		position: absolute;
		z-index: 10;
		top:0;
		width: 100%;
		background-color: var(--col_Text);
		padding: 10px;
		border: none;
		outline: none;
		font-weight: 700;
		line-height: 1.6;
		text-align: right;
		color: white;
		box-sizing: border-box;
	}
	#investors a 		{ color: var(--col_Accent); }
	#investors a:hover 	{ color: var(--col_Text2); }	
	#investors .avatar {
		display: block;
		float:right;
		width: 50px;
		height: 50px;
		margin-left:10px;
		background-color: var(--col_Text3);
		border-radius: 4px;
		background-size: cover;
		background-position: 50% 50%;
		border: 2px solid var(--col_Text2);
	}
	#investors .noAvatar {
		background-image:url('../nocover.png');
		background-repeat: repeat;
		background-size: 40% 40%;
	}
	#investors .actions {
		display: block;
		font-size: 0.8em;
	}
}

/* Larger than desktop */
@media (min-width: 1000px) {

}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	#stats .number { font-size: 6em; }
	#stats .stat { font-size: 1.9em; }	
}