@CHARSET "ISO-8859-1";
	/* Reset CSS
	 * --------------------------------------- */
	 
	/* ================================================================ */
	/* BUTTON STYLE STARTS HERE --------------------------------------- */
	/* ================================================================ */
	#buttonClass{
	  text-align: center;
	  padding-top: 20px;
	}
	.ghost-button {
		color: #000111;
		background: #fff;
		transition: background .5s ease-in-out;
		-moz-transition: background .5s ease-in-out;
		-webkit-transition: background .5s ease-in-out;
		border: 1px solid #fff;
		font-size: 17px;
		padding: 7px 12px;
		font-weight: normal;
		margin: 6px 0;
		margin-right: 12px;
		display: inline-block;
		text-decoration: none;
		font-family: 'Open Sans', sans-serif;
		min-width: 120px;
	}

	.ghost-button:hover, .ghost-button:active {
		color:#fff;
		background:#a7b2ba;
		text-decoration: none;
		transition: background .25s ease-in-out;
		-moz-transition: background .25s ease-in-out;
		-webkit-transition: background .25s ease-in-out;
	}
	/* ================================================================ */
	/* BUTTON STYLE ENDS HERE ----------------------------------------- */
	/* ================================================================ */
	
	/** Portfolio **/
	/** filters list **/
	#filter-list {
	  display: block;
	  width: 100%;
	  text-align: center;
	  font-family: arial,helvetica;
	  font-size: 1em;
	  margin-bottom: 25px;
	}
	 
	#filter-list li {
	  display: inline-block;
	  width: auto;
	  padding: 6px 10px;
	  margin-right: 15px;
	  font-family: arial,helvetica;
	  font-size: 1em;
	  cursor: pointer;
	}
	#filter-list li:hover {
	  background: rgba(0,0,0,0.2);
	}
	#filter-list li.active {
	  text-shadow: 1px 1px 5px #FFFFFF;
	  background: rgba(0,0,0,0.2);
	}

	/** portfolio list **/
	#portfolio {
	  display: block;
	  width: 100%;
	  padding: 0 12px;
	  margin-bottom: 35px;
	  text-align: center;
	}
	 
	#portfolio .item {
	  display: none;
	  opacity: 0;
	  vertical-align: top;
	  margin-bottom: 25px;
	  margin-right: 20px;
	  color: #fff;
	  font-size: 30px;
	  text-align: center;
	}
	#portfolio .item a {
	  display: inline-block;
	  max-width: 100%;
	  text-decoration: none;

	}
	#portfolio .item img {
	  max-width: 100%;
	}

	/** media queries **/
	@media screen and (max-width: 720px) {
	  h1 { font-size: 2.7em; }
	}
	 
	@media screen and (max-width: 500px) {
	  h1 { font-size: 2.0em; }
	  #filter-list { padding: 0 18px; }
	  #filter-list li { display: block; margin-bottom: 3px; }
	  
	  #portfolio { margin-bottom: 20px; }
	  #portfolio .item { width: 100%; margin-bottom: 12px; margin-right: 0; }
	}

	#mainBody{
		overflow:hidden;
		width: 100%;
		height: auto;
		margin: auto;
		position: absolute;
		top: 64px;
		bottom: 85px;
		left: 0;
		right: 0;
	}
	
	.mainInnerContent{
		left: 0;
		right: 0;
		text-align:center;
		height: auto;
		overflow: auto;
		margin: 0 auto;
	}
	
	#w {
	  display: block;
	  max-width: 1100px;
	  min-width: 280px;
	  padding-top: 20px;
	  margin: 0 auto;
	  overflow:hidden
	}
	/* ================================================================ */
	/* MISCELLANEOUS -------------------------------------------------- */
	/* ================================================================ */
	
	.shadows{
		text-shadow: 1px 1px 2px #000000;
	}
	
	#shadows{
		text-shadow: 1px 1px 2px #000000;
	}
	
	.grid {
		margin: 0 auto;
	}
	
	/* clearfix */
	.grid:after {
		content: '';
		display: block;
		clear: both;
	}
	
	.grid-item {
		float: left;
		width: 251px;
		height: 251px;
	}
	
	.grid-item:hover {
		background-color: rgba(200,100,0,.5);
		background-blend-mode: multiply;
	}
	
	.imgBox { /* now a container for the image */
		text-align: center;
		display: inline-block; /* shrink wrap to image */
		overflow: hidden; /* hide the excess */
		position: relative;
		vertical-align: middle;
	}
	.imgBox img {
		display: block; /* no whitespace */
		transition: .3s ease-in-out;
	}
	.imgBox:hover img {
		background-color: black;
		opacity: 0.2;
		transform: scale(1.1);
	}
	
	.imgBox:hover .centered {
		opacity: 1;
		left: 10%;
	}
	
	.centered {
		margin: 0;
		font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-weight: 550;
		font-size: 75%;
		color: black;
		opacity: 0;
		transition: ease-in-out all .2s;
		text-shadow: 1px 1px white;
		position: absolute;
		top: 70%;
		left: -100%;
	}
	
	/*
	.grid-finalfantasy {
		float: left;
		width: 550px;
		height: 345px;	 
	}
	
	.grid-item {
		float: left;
		width: 400px;
		height: 345;
	}
	*/