/* ----- Columns  ----- */
/* Mobile Width */
@media only screen and (max-width: 767px) {
	.catalog h2 {
	  margin: 0.2em 0 1.2em 0 !important;
	}
	.img-wrapper {
	  padding: 0 0 0.4em 0 !important;
	}
	.title {
	  padding: 0.4em 0 0.3em 0 !important;
	  font-size: 1.2em !important;
	}
	.item-container {
    width: 100% !important;
    margin: 0.5em 0.5em 1em 0.5em !important;
	}
  .column-3 .item-container {
    margin: 0 0 3em 0;
  }
  .column-4 .item-container {
    margin: 0.5em 0;
  }
}

/* Desktop Width */
@media screen and (min-width: 768px) {
  .column-3 .item-container {
   margin: 2em;
  }
  .column-4 .item-container {
  margin: 0.5em 0.8em;
  }
}

/* ----- Catalog ----- */
.catalog {
  padding: 2em 0;
	text-align: center;
}

/* ---------- Headings ---------- */
.catalog h2 {
  font-size: 2.8em;
  font-weight: 600;
  margin: 0.5em 0 1.5em 0;
  line-height: 1em;
  text-align: center;
  color: #27282d;
}

.catalog h3 {
  font-size: 1.8em;
  font-weight: 600;
  margin: 0 0 0.3em 0;
  color: #9f3ed2;
  text-align: center;
}

.header-line {
	list-style-type: none;
	height:1px;
	width:90%;
	margin: 0 auto 2em auto;

  background: -moz-linear-gradient(left, rgba(93,95,99,0) 0%, rgba(93,95,99,0.75) 50%, rgba(93,95,99,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(93,95,99,0) 0%,rgba(93,95,99,0.75) 50%,rgba(93,95,99,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(93,95,99,0) 0%,rgba(93,95,99,0.75) 50%,rgba(93,95,99,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005d5f63', endColorstr='#005d5f63',GradientType=1 ); /* IE6-9 */
}

/* ---------- 2 Columns ---------- */

/* ---------- 3 Columns ---------- */
.column-3 .item-container {
  display: inline-block;
  width: 300px;
  padding: 0;
  vertical-align: text-top;
  text-align: center;
}

.column-3 .img-wrapper {
  margin: 0 0 1em 0;
}

.column-3 .img-wrapper img {
   max-height: 160px;
   max-width: 260px;
}

.column-3 .title {
  font-size: 1.3em;
  font-weight: 700;
  text-align: center;
  padding: 0.5em 0;
  color: #fff;
}

.column-3 .description {
  display: inline-block;
  font-size: 0.85em;
  color: #c5c8cf;
  line-height: 1.5em;
  text-align: justify;
}

/* ---------- 4 Columns ---------- */

.column-4 .item-container {
  display: inline-block;
  width: 240px;
  margin: 1em;
  padding: 0 0 0.5em 0;
  vertical-align: text-top;
  text-align: center;
  color: #fff;
}

.column-4 .img-wrapper {
  min-height: 150px;
  line-height: 150px;
  margin: 0 0 0.5em 0;
}

.column-4 .img-wrapper img {
  max-height: 150px;
}


/* ---------- 5 Columns ---------- */
.column-5 .item-container {
  display: inline-block;
  width: 180px;
  min-height: 200px;
  margin: 1em;
  padding: 0;
  vertical-align: text-top;
  text-align: center;
}

.column-5 .img-wrapper {
  min-height: 100px;
  line-height: 100px;
  margin: 0;
}

.column-5 .img-wrapper img {
  max-height: 190px;
  max-width: 170px;
}

.column-5 .img-box {
}

.column-5 .title {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.2em;
  padding: 1em 0 1em 0;
}

.column-5 .header-line {
	height:1px;
	width:90%;
	margin: 0 auto 1.5em auto;
}

.column-5 .description {
  display: inline-block;
  font-size: 0.8em;
  text-align: center;
  color: #c5c8cf;
  line-height: 1.5em;
}


/* ---------- 6 Columns ---------- */
.column-6 .item-container {
  display: inline-block;
  width: 140px;
  margin: 0.5em;
  padding: 0.5em;
  vertical-align: text-top;
  text-align: center;
}

.column-6 .img-wrapper {
  height: 110px;
  line-height: 110px;
  margin: 0 0 0 0;
}

.column-6 .img-wrapper img {
  max-height: 80px;
  max-width: 100px;
}

.column-6 .header-line {
	height:1px;
	width:90%;
	margin: 0 auto 1.5em auto;
}

.column-6 .title {
  font-size: 1em;
  font-weight: 700;
  padding: 0.2em 0 0.2em 0;
}

.column-6 .description {
  display: inline-block;
  font-size: 0.8em;
  text-align: center;
  color: #c5c8cf;
  line-height: 1.5em;
}

/* ---------- 6 Column Alternative ---------- */
.column-6 {
  width: 115px !important;
}

.column-6 img {
  max-height: 100px !important;
  max-width: 100px !important;
}


/* ---------- Base Columns ---------- */

div.item-container2 {
  margin: -0.5em 0 0.8em 0;
}

div.item-container:hover .title, div.item-container:hover .title a {
  color: #9f3ed2 !important;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

div.item-container a {
  display: block;
}

.title {
  font-size: 1.1em;
  font-weight: 700;
  padding: 0.5em 0;
}
.title a {
  color: #fff;
}
.description {
  display: inline-block;
  font-size: 0.85em;
  text-align: center;
  color: #c5c8cf;
  line-height: 1.5em;
}

.description a {
  display: inline !important
}

.description2 {
  margin: 1em 0px 2em;
}

.description2 a {
  display: inline !important
}

.new-row {
	clear:both;
	width:0;
	height:0;
}

div.divider {
  clear: both;
  margin: 5em 0 0 0;
}



/* ---------- Pages ---------- */

/* --- SNES Top 100 --- */
.snes-100 .column-5 .img-wrapper img {
    min-height: 125px;
}

/* --- PS1 Top 100 --- */
.ps1-100 .column-5 .img-wrapper img {
    min-height: 170px;
}

/* --- Software Apps --- */
.apps .item-container {
  display: inline-block;
  width: 360px;
  min-height: 90px;
  margin: 0.2em 0.2em 0.1em 0.2em;
  padding: 0.5em;
  vertical-align: top;
  text-align: left;
}
.apps .img-wrapper {
  display: inline-block;
  max-width: 50px;
  max-height: 50px;
  height: 50px;
  text-align: center;
  margin: 0.6em 1em 0 0;
}
.apps .img-wrapper img {
  width: auto;
  max-width: 50px;
  max-height: 50px;
  text-align: center;
}
.apps .info {
  width: calc(100% - (50px + 1em));
  display: inline-block;
  vertical-align: top;
}
.apps .title {
  display: block;
  max-width: 275px;
  font-size: 1.05em;
  font-weight: 700;
  padding: 0.3em 0;
  text-align: left;
  vertical-align: top;
}
.apps .description {
  display: block;
  max-width: 275px;
  font-size: 0.80em;
  line-height: 1.4em;
  text-align: left;
  vertical-align: top;
}

.apps .header-line {
  height:1px;
  width:90%;
  margin: 0 auto 1.5em auto;
}