@font-face {
    font-family: Open Sans;
    src: url(OpenSans-Regular.ttf);
}
* {
    box-sizing: border-box;
}
head{
	background-color:#171717;
}
body {
	font-family: "Open Sans";
    font-size: 14px;
    line-height: 1.8;
    color: #BBB;
	background-color:#171717;
}
h1 {
	padding-top: 20px;
}
h4 {
	padding-top: 40px;
}
/* -------------------------- Columns -------------------------- */
.column {
  line-height: 0;
  column-count:3;
  column-gap:0px;
}

.column div {
	padding:15px;
	text-align: center;
}
.column img {
  width: 100% !important;
  height: auto !important;
}
@media (max-width: 1000px) {
  .column {
  column-count:2;
  }
}
@media (max-width: 600px) {
  .column {
  column-count:1;
  }
}
/* -------------------------- NAVBAR -------------------------- */
.active{
    background-color: #171717;
    color: #c00;
}

.nav {
	width: 100%;
	float: left;
	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
	background-color: #222;
	position: fixed;
    top: 0px;
}
.nav li {
	float: left;
}
.nav li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #BBB;
	border-left: 1px solid #ccc;
}
.nav li a[href*=GameScreenshots.html] {
	width: 153px;
}
.nav li a:hover {
	color: #c00;
	background-color: #fff;
}


/* -------------------------- Submenu -------------------------- */
.nav ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	list-style-type:none;
}
.nav li:hover { position:relative; }
.nav li:hover ul {
	left:0px;
	top:41px;
	padding:0px;
}

.nav li:hover ul li a {
	padding:8px 15px;
	display:block;
	width:154px;
	background-color:#222;
}
.nav li:hover ul li a:hover {
	background:#fff;
	color:#c00;
}

/* -------------------------- GALLERY -------------------------- */



.gallery img {
    width: 20%;
    float: left;
}

/* GETS EVERY PICTURE AND TREATS AS INDEPENDENT - CANNOT SELECT NTH ONES
img[title=sample]:nth-of-type(1N)
	
GETS EACH NTH ANCHOR BUT CANNOT APPLY WIDTH TO CHILD IMAGE
.gallery a:nth-of-type(2n)	

ALSO GETS EACH NTH OF ANCHOR
.gallery a[target=_blank]:nth-of-type(1n) {
	opacity: 0.5;
    filter: graycale(100%);
}
*/

@media (max-width: 1600px) {
  .gallery img{
  width: 25%;
  }
}
@media (max-width: 1200px) {
  .gallery img{
  width: 33.3%;
  }
}
@media (max-width: 800px) {
  .gallery img{
  width: 50%;
  }
}
@media (max-width: 400px) {
  .gallery img{
  width: 100%;
  }
}