/*---------------------------------------------------

Filterize - CSS3 Gallery // Theme 1 // 2 columns

version:	1.0
date:		18.10.2013
author:		Capelle @ Codecanyon
profile:	http://codecanyon.net/user/Capelle

1.	Fonts
2.	Gallery reset
3.	Fade in effect on page load (keyframes)
	3.1. Keyframes animation
	3.2. Fade in effects
	3.3. Image delays
4.	Gallery styles
	4.1. Basic styles
	4.2. Filter buttons
	4.3. Gallery items
	4.4. Items overlay
	4.5. Lightbox
5.	Transitions, animations and merged opacity (merged styles)
	5.1. Opacity
	5.2. Easings
6.	Responsive queries
	6.1. Min and max 999px
	6.2. Min width 601px and Max width 767px
	6.3. Max width 600px

---------------------------------------------------*/


/*---------------------------------------------------
	1. Fonts
---------------------------------------------------*/

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css);
/* Note: If you already use other fonts which you want to use in the gallery, delete these imports and edit font-family selectors below */

/*---------------------------------------------------
	2. Gallery reset
---------------------------------------------------*/

body { /* If you're already have body reset in your template, delete this selector */
	margin: 0;
	padding: 0;
}
.gallery * {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: 'Droid Sans', Arial, Helvetica, sans-serif; /* Edit this if you want to match the font with your design */
	vertical-align: baseline;
	line-height: normal;
	-webkit-font-smoothing: antialiased; /* Fix for Safari font rendering bug */
}
.gallery > ol,
.gallery > ul,
.gallery > li {
	list-style: none;
}
.gallery > table {
	border-collapse: collapse;
	border-spacing: 0;
}
.gallery > section {
	display: block;
}
/* Note: If you experience issues with reset above, please adjust the selectors and values according to your template/website.
When adjusting the reset is adviced to check all the elements on your page, including the footer, as some elements might not show as expected if reset is changed or not configured properly */


/*---------------------------------------------------
	3. Fade in effect on page load
---------------------------------------------------*/

/***** 3.1. Keyframes animation (Note: IE9 doesn't support keyframes) *****/

@-webkit-keyframes fadeIn {
	from { opacity: 0; } to { opacity: 1; }
}
@-moz-keyframes fadeIn { 
	from { opacity: 0; } to { opacity: 1; }
}
@-o-keyframes fadeIn {
	from { opacity: 0; } to { opacity: 1; }
}
@keyframes fadeIn {
	from { opacity: 0; } to { opacity: 1; }
}
 
/***** 3.2. Fade in effects *****/

.fade-in {
	/* Opacity 0 so we hide the elements before animation starts */
	opacity: 0;
	/* Trigger for our fade-in selector and a value of how many times does it repeats on page load */
	-webkit-animation: fadeIn ease-in 1;
	-moz-animation: fadeIn ease-in 1;
	-o-animation: fadeIn ease-in 1;
	animation: fadeIn ease-in 1;
	/* Attribute to keep the last keyframe value after the animation is completed */
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	/* Duration of the animation */
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	animation-duration: 1s;
}

/***** 3.3. Image delays *****/

/* Delay of image 1 */
.fade-in.one {
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
/* Delay of image 2 */
.fade-in.two {
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
	animation-delay: 0.4s;
}
/* Delay of image 3 */
.fade-in.three {
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
/* Delay of image 4 */
.fade-in.four {
	-webkit-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
/* Delay of image 5 */
.fade-in.five {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1s;
}
/* Delay of image 6 */
.fade-in.six {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
/* Delay of image 7 */
.fade-in.seven {
	-webkit-animation-delay: 1.4s;
	-moz-animation-delay: 1.4s;
	animation-delay: 1.4s;
}
/* Delay of image 8 */
.fade-in.eight {
	-webkit-animation-delay: 1.6s;
	-moz-animation-delay: 1.6s;
	animation-delay: 1.6s;
}
/* Delay of image 9 */
.fade-in.nine {
	-webkit-animation-delay: 1.8s;
	-moz-animation-delay: 1.8s;
	animation-delay: 1.8s;
}
/* Delay of image 10 */
.fade-in.ten {
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	animation-delay: 2s;
}
/* Delay of image 11 */
.fade-in.eleven {
	-webkit-animation-delay: 2.2s;
	-moz-animation-delay: 2.2s;
	animation-delay: 2.2s;
}
/* Delay of image 12 */
.fade-in.twelve {
	-webkit-animation-delay: 2.4s;
	-moz-animation-delay: 2.4s;
	animation-delay: 2.4s;
}
/* Delay of image 13 */
.fade-in.thirteen {
	-webkit-animation-delay: 2.6s;
	-moz-animation-delay: 2.6s;
	animation-delay: 2.6s;
}
/* Delay of image 14 */
.fade-in.fourteen {
	-webkit-animation-delay: 2.8s;
	-moz-animation-delay: 2.8s;
	animation-delay: 2.8s;
}
/* Delay of image 15 */
.fade-in.fifteen {
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	animation-delay: 3s;
}






/*---------------------------------------------------
	4. Gallery styles
---------------------------------------------------*/

/***** 4.1. Basic styles *****/

#filterize {

	height: 100%;
	position: relative;
	margin: 50px auto;
}
.gallery {
	display: block;
	float: left;
	width: 100%;
}
.pagination {
	display: block;
	float: left;
	width: 100%;
	margin-bottom: 6%;
}
.pagination span.active,
.pagination a.page {
	display: inline-block;
	margin-right: 20px;
	text-align: center;
	vertical-align: middle;
	font-size: 16px;
	width: auto;
	height: auto;
	text-decoration: none;
}
.pagination span.active,
.pagination a.page:hover {
	color: #333;
}
.pagination a.page {
	color: #bbb;
}
.clrfx-1 {
	display: block;
	width: 100%;
	clear: both;
}
.icon {
	font-family: 'FontAwesome';
	font-weight: normal;
}

/***** 4.2. Filter buttons *****/

.gallery label {
	font-size: 1em;
	color: #999;
	width: auto;
	height: 40px;
	cursor: pointer;
	float: left;
	margin-left: 90px;
	
	
	width: 92%;
	max-width: 120px;
}
.gallery label:hover {
	color: #ffffff;
}
.gallery input.selector-all:checked ~ label.label-all,
.gallery input.selector-category-1:checked ~ label.label-category-1,
.gallery input.selector-category-2:checked ~ label.label-category-2,
.gallery input.selector-category-3:checked ~ label.label-category-3 {
	color: #ffffff;
}
.gallery input.selector-category-1:checked ~ .gallery-items li:not(.category-1) div,
.gallery input.selector-category-2:checked ~ .gallery-items li:not(.category-2) div,
.gallery input.selector-category-3:checked ~ .gallery-items li:not(.category-3) div {
	display: none;
	
	
}
.gallery input {
	display: none;
	
}


/***** 4.3. Gallery items *****/

.gallery-items {
	position: relative;
	margin: 0px auto;
	float: left;
}
.gallery-items li {
	float: left;
	
	width: 48%;
	
	/*float:left;*/
	margin-left:1%;
	margin-bottom:1%;
	margin-right:1%;
	text-align:center;
	border:1px solid;
	border-color:#666;
	
}
	

.gallery-items li:nth-child(2n) {
	margin-right: 0;
}
.gallery-items li img {
	display: block;
	width: 100%;
	position: relative;
	float: left;
	margin: 0px auto;
}

/***** 4.4. Items overlay *****/

.gallery-items li .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	text-align: center;
	top: 0;
	left: 0;
	cursor: auto;
	background-color: rgba(0,0,0,0.7);
}
.gallery-items li .overlay a {
	color: #fff;
	font-size: 2.6em;
	width: 1em;
	position: absolute;
	text-decoration: none;
	margin: 50% auto auto auto;
	opacity: 0.5;
	top: -0.5em;
	left: 0;
	right: 0;
	bottom: auto;
}
.gallery-items li .overlay a:hover {
	opacity: 1;
}

/***** 4.5. Lightbox *****/

.lightbox {
	width: 0px;
	height: 0px;
	position: fixed;
	overflow: hidden;
	left: 0px;
	top: 0px;
	background-color: rgba(0,0,0,0.9);
	z-index: 9999;
}
.lightbox:target {
	width: auto;
	height: auto;
	bottom: 0px;
	right: 0px;
}
.lightbox-caption {
	margin: 0 auto;
	display: block;
	text-align: center;
	cursor: auto;
	position: absolute;
	bottom: 4%;
	left: 0;
	right: 0;
	z-index: 3;
}
.lightbox-caption h3 {
	left: 0;
	right: 0;
	color: #fff;
	font-size: 1.2em;
	text-transform: uppercase;
	display: inline-block;
}
.lightbox-caption p {
	line-height: 0.9em;
	font-size: 0.8em;
	color: #bbb;
	padding-top: 4px;
}
.lightbox-caption a {
	color: #fff;
	text-decoration: none;
}
.lightbox-caption a:hover {
	color: #bbb;
}
.gallery-items li .lightbox img {
	height: auto;
	max-height: 100%;
	width: auto;
	max-width: 100% !important;
	margin: 0 auto;
	display: block;
	position: relative;
	padding: 2% 2% 7% 2%;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
}
x:-o-prefocus, .lightbox img {
	height: 100% !important;
}
.lightbox-navigation {
	height: 100%;
	width: 100%;
	position: absolute;
	background: none;
	background-color: rgba(0,0,0,0); /* IE 9 and 10 fix */
	top: 0;
}
.previous,
.next {
	position: absolute;
	top: 40%;
	color: #fff;
	text-align: center;
	font-size: 4em;
	text-decoration: none;
	width: auto;
	height: auto;
	vertical-align: middle;
	z-index: 999;
}
.previous {
	left: 2%;
}
.next {
	right: 2%;
}
.previous:hover,
.next:hover {
	color: #bbb;
}
.lightbox a.close {
	position: absolute;
	top: 2%;
	left: auto;
	right: 2%;
	bottom: auto;
	top: 5%;
	font-size: 1.2em;
	color: #fff;
	text-decoration: none;
	text-align: center;
	width: auto;
	height: auto;
	z-index: 999;
}
.lightbox a.close:hover {
	color: #bbb;
}
.lightbox a.close-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/*---------------------------------------------------
	5. Transitions and animations
---------------------------------------------------*/

/***** 5.1 Opacity *****/



.gallery-items li .overlay,
.lightbox-caption h3,
.lightbox-caption p,
.gallery-items li .lightbox img {
	opacity: 0;
}
.gallery input.selector-all:checked ~ .gallery-items li,
.gallery input.selector-category-1:checked ~ .gallery-items .category-1,
.gallery input.selector-category-2:checked ~ .gallery-items .category-2,
.gallery input.selector-category-3:checked ~ .gallery-items .category-3,
.gallery input.selector-category-4:checked ~ .gallery-items .category-4,
.gallery-items li:hover .overlay,
.lightbox:target .lightbox-caption h3,
.lightbox:target .lightbox-caption p,
.gallery-items li .lightbox:target img,
.lightbox-navigation {
	opacity: 1;
}
.gallery input:checked ~ .gallery-items li:not(div) {
	opacity: 0.15;
}
.lightbox img:hover ~ .lightbox-navigation {
	opacity: 0.3;
}

/***** 5.2 Easings *****/

.gallery-items li .overlay,
.gallery-items li .overlay a,
.pagination a.page,
.gallery label,
.lightbox-navigation a,
.lightbox-navigation {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.gallery-items li,
.lightbox-caption * {
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.lightbox img {
	-webkit-transition: opacity 0.4s linear;
	-moz-transition: opacity 0.4s linear;
	-o-transition: opacity 0.4s linear;
	-ms-transition: opacity 0.4s linear;
	transition: opacity 0.4s linear;
}
.lightbox:target .lightbox-caption h3 {
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
.lightbox:target .lightbox-caption p {
	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;
}