/* FM */
/* Gallery Navigator style */


/* The HTML */
/*
<div class="container">
	<div class="gallery-navigator">
		<span class="selected" gallery-selector="all">ALL</span>
		<span gallery-selector="websites">Websites</span>
		<span gallery-selector="apps">Apps</span>
		<span gallery-selector="cms">CMS</span>
	</div>
	<div class="gallery-container">
		<div class="col-xs-6 col-sm-4 col-md-3 gallery-item" gallery-item="websites"><a href="#"><img src="" class="img-responsive" /></a></div>
		<div class="col-xs-6 col-sm-4 col-md-3 gallery-item" gallery-item="cms"><a href="#"><img src="" class="img-responsive" /></a></div>
		<div class="col-xs-6 col-sm-4 col-md-3 gallery-item" gallery-item="website"><a href="#"><img src="" class="img-responsive" /></a></div>
		<div class="col-xs-6 col-sm-4 col-md-3 gallery-item" gallery-item="apps"><a href="#"><img src="" class="img-responsive" /></a></div>
		<div class="col-xs-6 col-sm-4 col-md-3 gallery-item" gallery-item="apps"><a href="#"><img src="" class="img-responsive" /></a></div>
		<div class="col-xs-6 col-sm-4 col-md-3 gallery-item" gallery-item="websites"><a href="#"><img src="" class="img-responsive" /></a></div>
		<div class="col-xs-6 col-sm-4 col-md-3 gallery-item" gallery-item="apps"><a href="#"><img src="" class="img-responsive" /></a></div>
		<div class="col-xs-6 col-sm-4 col-md-3 gallery-item" gallery-item="cms"><a href="#"><img src="" class="img-responsive" /></a></div>
	</div>
</div>
*/
/* if attr **gallery-item** and **gallery-selector** is changes, it must be changed in js file also */

.gallery-select .gallery-navigator { padding: 20px 0 30px 0; }
.gallery-select .gallery-navigator span { position: relative; padding-bottom: 10px; display: inline-block; font-size: 14px; margin: 0 20px; font-family: 'Montserrat'; color: #666; cursor: pointer; }
.gallery-select .gallery-navigator span:before { content: ''; width: 20px; height: 1px; background: #eaeaea; position: absolute; left: 0; bottom: 0; transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; }
.gallery-select .gallery-navigator span.selected { color: #000; }
.gallery-select .gallery-navigator span.selected:before { width: 100%; background: #4CC0BA; }
.gallery-select .gallery-navigator span:hover:before { background: #4CC0BA; }
.gallery-select .gallery-container .gallery-item { min-height: 0; height: 280px; padding: 0; opacity: 1; 
	-webkit-transform: scale(1);transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1); transition: 0.6s; -moz-transition: 0.6s; -webkit-transition: 0.6s; 
}
.gallery-select .gallery-container .gallery-item a { display: block; padding: 15px; }
.gallery-select .gallery-container .gallery-item.item-invisible {  opacity: 0;
	-webkit-transform: scale(0);transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0); width: 0; 
}
.gallery-select .gallery-container .gallery-item img { border: 1px solid #eaeaea; margin: auto; }