/**
 * 1.0 Recommended Isotope styles
 * ----------------------------------------------------------------------------
 */

.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }
.ns-isotope,
.ns-isotope .isotope-item { transition-duration: 0.8s; }
.ns-isotope { transition-property: height, width; }
.ns-isotope .isotope-item { transition-property: transform, opacity; }
.ns-isotope.no-transition,
.ns-isotope.no-transition .item,
.ns-isotope .item.no-transition { transition-duration: 0s !important; }

/**
 * 2.0 Infinite Scroll
 * ----------------------------------------------------------------------------
 */

/* Disable CSS transitions for containers with infinite scrolling */
.isotope.infinite-scrolling {
	transition: none;
}

#infscr-loading {
	position: absolute;
	text-align: center;
	z-index: 100;
	background: #fff;
	background: rgba(255, 255, 255, 0.9);
	padding: 20px;
	color: #222;
	font-size: 100%;
	font-weight: 700;
	border-radius: 4px;
	width: 75px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

/**
 * 3.0 Portfolio Template
 * ----------------------------------------------------------------------------
 */

.ns-isotope { clear: both; margin: 0 auto; padding-top: 18px; margin-bottom: 2em; }
.ns-container { overflow: hidden; -webkit-tap-highlight-color: transparent; transition: height 0.8s; }

.ns-filters { width: 100%; padding-bottom: 18px; margin: 0 auto; }
.ns-filters ul { margin: 0; padding: 0; list-style: none; }
.ns-filters li { float: left; margin: 0 0 0 5px; }
.ns-filters li:first-child { margin-left: 0px; }

.ns-filter-category { float: right; }
	.ns-filter-category li a { display: block; padding: 5px 13px; color: #202020; font-size: 87.5%; font-family: Dosis, sans-serif; line-height: 1; text-transform: uppercase; }
	.ns-filter-category li a:hover { text-decoration: none; background-color: #00a4a7; color: #fff; border-radius: 12px; }
	.ns-filter-category li a.selected { background-color: #00a4a7; color: #fff; border-radius: 12px; font-weight: 700; }
.ns-filter-size { margin-top: 4px; }
	.ns-filter-size a { width: 28px; height: 18px; padding: 0 !important; float: left; margin-right: 20px; margin-top: 3px; }
	.ns-filter-size a:hover { border-radius: 0px; }
	.ns-filter-size a:first-child { width: 28px; height: 18px; padding: 0 !important; }
	.ns-filter-size a:first-child:hover { border-radius: 0px; }
	.ns-filter-size a.toggle-selected { background-position: top right; }
	.ns-filter-size a:first-child.toggle-selected { background-position: bottom right; }
	/* SVG Version */
	.toggle-sizes-small-svg { cursor: pointer; }
	.toggle-sizes-large-svg { cursor: pointer; }
		.ns-filter-size a svg path { fill: #d9dcdd; }
		.ns-filter-size a:hover svg path { fill: #a0a0a0; }
		.ns-filter-size a.toggle-selected svg path { fill: #a0a0a0; }
		
@media (max-width: 1240px) {
	.ns-container { margin: 0 auto; }
}
@media (max-width: 800px) {
	.ns-filters { display: none; }
}

/**
 * 3.1 Thumbnails
 * ----------------------------------------------------------------------------
 */

.ns-isotope .item { cursor: pointer; float: left; overflow: hidden; position: relative; background-color: #888; color: #222; width: 220px; height: 150px; margin: 0 5px 5px 0; margin: 0 0 5px 0; word-wrap: break-word; }
.ns-isotope .variable-sizes .item.width2 { width: 445px; }
.ns-isotope .variable-sizes .item.height2 { height: 305px; }
.ns-isotope .variable-sizes .item.width3 { width: 670px; }

.ns-isotope .item .thumbnail-link { opacity: 0; position: absolute; z-index: 50; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.01); }
.ns-isotope .item .thumbnail-project-link { position: absolute; z-index: 50; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.01); color: transparent; }

.ns-isotope .item .thumbnail-meta-data-wrapper { overflow: hidden; left: 0; top: 0; padding: 9px 15px 0 13px; width: 100%; position: absolute; word-wrap: break-word; }
.ns-isotope .item .symbol { color: #fff; overflow: hidden; height: 3em; font: 300 175%/1 Lato, sans-serif; width: 100%; position: relative; text-transform: uppercase; z-index: 40; }
.ns-isotope .variable-sizes .item .symbol { font-size: 175%; }
.ns-isotope .variable-sizes .item.width2.height2 .symbol { font-size: 350%; }
.ns-isotope .variable-sizes .item.width3.height2 .symbol { font-size: 500%; }

.ns-isotope .item .categories,
.ns-isotope .item .name { position: absolute; left: 0; z-index: 40; width: 100%; max-width: 100%; padding: 0 15px; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.ns-isotope .item .categories { font-weight: 400; font-size: 75%; font-family: Dosis, sans-serif; bottom: 10px; text-transform: uppercase; }
.ns-isotope .item .name { font-weight: 400; font-size: 81.25%; bottom: 25px; }

.ns-isotope .item .thumbnail-hover { position: absolute; z-index: 30; width: 100%; height: 100%; }
.ns-isotope .item .project-img { opacity: 0; position: absolute; z-index: 20; width: 100%; max-width: none; transition: opacity 0.5s; }
.ns-isotope .item .project-img-visible { opacity: 1; transition: opacity 0.5s; }
.ns-isotope .item .project-thumbnail-background { position: absolute; z-index: 10; width: 100%; height: 100%; }

.ns-isotope .item .thumbnail-hover,
.ns-isotope .item .symbol,
.ns-isotope .item .name,
.ns-isotope .item .categories {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
}
.ns-isotope .item:hover .thumbnail-hover,
.ns-isotope .item:hover .symbol,
.ns-isotope .item:hover .name,
.ns-isotope .item:hover .categories  {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease-in-out, visibility 0s;
}

.ns-isotope .item.tn-display-meta .symbol,
.ns-isotope .item.tn-display-meta .name,
.ns-isotope .item.tn-display-meta .categories { opacity: 1; visibility: visible; }

.ns-isotope .item.item-meta-data-medium .symbol { font-size: 125%; }
.ns-isotope .item.item-meta-data-small .name,
.ns-isotope .item.item-meta-data-small .symbol { font-size: 100%; }
.ns-isotope .variable-sizes .item.item-meta-data-medium.width3.height2 .symbol { font-size: 350%; }
.ns-isotope .variable-sizes .item.item-meta-data-medium.width2.height2 .symbol { font-size: 300%; }
.ns-isotope .variable-sizes .item.item-meta-data-small.width3.height2 .symbol { font-size: 175%; }
.ns-isotope .variable-sizes .item.item-meta-data-small.width2.height2 .symbol { font-size: 175%; }
.ns-isotope .item.item-meta-data-small .name { display: none; }