<ul class="filter">
	<li><a class="hover-effect active" data-group="all" href="">All</a></li>
	<li><a class="hover-effect" data-group="light" href="">Light</a></li>
	<li><a class="hover-effect" data-group="dark" href="">Dark</a></li>
	<li><a class="hover-effect" data-group="video" href="">Video</a></li>
	<li><a class="hover-effect" data-group="layout-1" href="">Border A</a></li>
	<li><a class="hover-effect" data-group="layout-2" href="">Border B</a></li>
</ul>
<div class="pure-g masonry-grd gallery-grd">
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="alice/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/alice.png">
			<div class="caption">
				Preset Alice
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="nina/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/nina.png">
			<div class="caption">
				Preset Nina
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="nora/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/nora.png">
			<div class="caption">
				Preset Nora
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="dark layout-2">
		<a href="lynda/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/lynda.png">
			<div class="caption">
				Preset Lynda
			</div>
			<div class="subcaption">Dark Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="clara/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/clara.png">
			<div class="caption">
				Preset Clara
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1 video">
		<a href="mary/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/mary.png">
			<div class="caption">
				Preset Mary
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="zoe/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/zoe.png">
			<div class="caption">
				Preset Zoe
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="julia/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/julia.png">
			<div class="caption">
				Preset Julia
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="dark layout-2">
		<a href="anna/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/anna.png">
			<div class="caption">
				Preset Anna
			</div>
			<div class="subcaption">Dark Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="dark layout-2">
		<a href="nadya/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/nadya.png">
			<div class="caption">
				Preset Nadya
			</div>
			<div class="subcaption">Dark Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="bella/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/bella.png">
			<div class="caption">
				Preset Bella
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-2">
		<a href="sophia/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/sophia.png">
			<div class="caption">
				Preset Sophia
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="lena/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/lena.png">
			<div class="caption">
				Preset Lena
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="tanya/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/tanya.png">
			<div class="caption">
				Preset Tanya
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="mila/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/mila.png">
			<div class="caption">
				Preset Mila
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="eva/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/eva.png">
			<div class="caption">
				Preset Eva
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-2">
		<a href="rosa/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/rosa.png">
			<div class="caption">
				Preset Rosa
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-2">
		<a href="viki/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/viki.png">
			<div class="caption">
				Preset Viki
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="dark layout-2">
		<a href="luiza/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/luiza.png">
			<div class="caption">
				Preset Luiza
			</div>
			<div class="subcaption">Dark Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-2">
		<a href="aria/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/aria.png">
			<div class="caption">
				Preset Aria
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="dark layout-1">
		<a href="olga/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/olga.png">
			<div class="caption">
				Preset Olga
			</div>
			<div class="subcaption">Dark Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1 video">
		<a href="suzi/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/suzi.png">
			<div class="caption">
				Preset Suzi
			</div>
			<div class="subcaption">Dark Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="polly/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/polly.png">
			<div class="caption">
				Preset Polly
			</div>
			<div class="subcaption">Dark Style</div>
		</a>
	</div>
	<div class="col-padding pure-u-12-24 pure-u-md-6-24 masonry-item item"  data-groups="light layout-1">
		<a href="maya/" target="_blank">
			<img alt="Demo" src="wp-content/themes/skrollex/assets/preset-images/screenshots/maya.png">
			<div class="caption">
				Preset Maya
			</div>
			<div class="subcaption">Light Style</div>
		</a>
	</div>
</div>