/** General page styling **/

header h1 {
	text-align: center;
	font-size: 30px;
	font-weight: 200;
	margin: 30px 0 10px 0;
}

header p {
	text-align: center;
	font-size: 14px;
	color: #666666;
	margin: 0;
	font-weight: 200;
}

a {
	text-decoration: none;
}

/**
 * Progress bar for imagesLoaded
 */
.progress-bar {
	background-color: #0BC20B;
	height: 3px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 0;
	-webkit-box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
	-moz-box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
	box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
	-webkit-transition: width 0.1s ease-out;
	-moz-transition: width 0.1s ease-out;
	-o-transition: width 0.1s ease-out;
	transition: width 0.1s ease-out;
}

/**
 * Placerholder css
 */
.wookmark-placeholder {
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #dedede;
	z-index: -1;
}

/**
 * Grid container
 */
.tiles-wrap {
	position: relative; /** Needed to ensure items are laid out relative to this container **/
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: none;
}

/**
 * Grid items
 */
.tiles-wrap li {
	/*border: 1px solid #EAEAEA;*/
	display: block;
	opacity: 0;
	text-align: center;
	list-style-type: none;
	float: left;
	cursor: pointer;
	
	width: auto;
	/*padding: 4px;
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;*/
}
.tiles-wrap li:hover 
{
	
 	 transition-duration:1s;
	/*box-shadow: rgba(100, 100, 100, 0.1) 0px 2px 2px, rgba(100, 100, 100, 0.1) 0px 4px 4px, rgba(100, 100, 100, 0.1) 0px 8px 8px, rgba(100, 100, 100, 0.1) 0px 16px 16px, rgba(100, 100, 100, 0.1) 0px 32px 32px, rgba(100, 100, 100, 0.1) 0px 64px 64px;
 */
}
.tiles-wrap.wookmark-initialised.animated li {
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.tiles-wrap.wookmark-initialised li {
	opacity: 1;
}

.tiles-wrap li.wookmark-inactive {
	visibility: hidden;
	opacity: 0;
}

/*
 .tiles-wrap.wookmark-initialised.animated li:before {box-sizing:border-box;content:'';position:absolute;top:0;left:0;width:0;height:0;border:1px solid transparent;}
 .tiles-wrap.wookmark-initialised.animated li:after {box-sizing:border-box;content:'';position:absolute;bottom:0;right:0;width:0;height:0;border:1px solid transparent;}
 .tiles-wrap.wookmark-initialised.animated li:not(.empty_list):hover:before {
 border-top-color:#7fdbff;
 border-right-color:#7fdbff;
 -webkit-transition:width 0.25s ease-out,height 0.25s ease-out 0.25s;
 transition:width 0.25s ease-out,height 0.25s ease-out 0.25s;
 width:100%;
 height:100%;}
 .tiles-wrap.wookmark-initialised.animated li:not(.empty_list):hover:after {
 border-bottom-color:#7fdbff;
 border-left-color:#7fdbff;

 -webkit-transition:border-color 0s ease-out 0.5s,width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
 transition:border-color 0s ease-out 0.5s,width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;

 -webkit-transition:width 0.25s ease-out,height 0.25s ease-out 0.25s;
 transition:width 0.25s ease-out,height 0.25s ease-out 0.25s;
 width:100%;
 height:100%;}

 */

.tiles-wrap.wookmark-initialised.animated li.empty_list {
	cursor: default;
}


.tiles-wrap img {
	margin: 0 auto;
	display: block;
	min-width: 270px !important;
	max-width:320px !important}
	/*
	border-radius: 8px; */
	overflow: hidden;
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.tiles-wrap a {
	color: #888;
	text-align: center;
	/* display: table-cell; */
	width: auto;
	height: 200px;
	font-size: 2em;
	font-weight: bold;
	text-decoration: none;
}

.tile-loading:after {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	content: "Loading\2026";
	padding-top: 20px;
	color: #999;
}

/**
 * Filters
 */
#filters {
	list-style-type: none;
	text-align: center;
	margin: 0 5% 0 5%;
}

#filters:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

#filters li {
	font-size: 12px;
	float: left;
	padding: 6px 8px 4px;
	cursor: pointer;
	margin: 0 10px;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	-o-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#filters li:hover {
	background: #4281f5;
	color: #ffffff;
}

#filters li.active {
	background: #4281f5;
	color: #ffffff;
}
