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

Filterize - CSS3 Gallery // Theme 3 // 2 columns // Baby Blue

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

1.	Fonts
	1.1. Gallery fonts
	1.2. Icons

2.	Gallery reset
	2.1. Body
	2.2. Gallery

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
	4.6. Tooltips

5.	Transitions, animations and merged opacity (merged styles)
	5.1. Opacity
	5.2. Easings
	5.3. Animations

6.	Responsive queries - Width
	6.1. Max width 1366px
	6.2. Max width 1024px
	6.3. Min width 600px and Max width 800px
	6.4. Max width 600px
	6.5. Max width 599px
	6.6. Max width 380px

7.	Responsive queries - Height
	7.1. Min width 1025px and Max height 640px
	7.2. Min width 1025px and Max height 480px
	7.3. Min width 1025px and Max height 360px
	7.4. Max width 1024px and Max height 800px
	7.5. Max width 1024px and Max height 640px
	7.6. Max width 1024px and Max height 420px
	7.7. Max width 420px and Max height 768px

8.	Scrollbars
	8.1. Webkit
	8.2. Internet Explorer

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


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

/***** 1.1. Gallery fonts *****/

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

/***** 1.2. Icons *****/

@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
---------------------------------------------------*/

/***** 2.1. Body reset *****/

body { /* If you're already have body reset in your template, delete this selector */
	margin: 0;
	padding: 0;
	background-color:#9bbe30;
}

.header{
	margin-bottom:0px;
	text-align:center;
	margin-left: 85px;
	} 
	

.footer{
	margin-bottom:0px;
	text-align:center;
	margin-left: 100px;
	} 

/***** 2.2. Gallery reset *****/

.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 */
}

.notice{
	color:#7D7D7D;
	margin-bottom:30px;
	background-color:#EDEDED;
	padding:20px;
}

.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.3s;
	-moz-animation-delay: 0.3s;
	animation-delay: 0.3s;
}
/* Delay of image 2 */
.fade-in.two {
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
/* Delay of image 3 */
.fade-in.three {
	-webkit-animation-delay: 0.9s;
	-moz-animation-delay: 0.9s;
	animation-delay: 0.9s;
}
/* Delay of image 4 */
.fade-in.four {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
/* Delay of image 5 */
.fade-in.five {
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	animation-delay: 1.5s;
}
/* Delay of image 6 */
.fade-in.six {
	-webkit-animation-delay: 1.8s;
	-moz-animation-delay: 1.8s;
	animation-delay: 1.8s;
}

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

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

#filterize {
	width: 1000px; /* Set the width of the gallery to fit your layout if you're not using a parent wrapper with already set width */
	height: 100%;
	position: relative;
	margin: 0px 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: 4px;
	text-align: center;
	vertical-align: middle;
	width: 30px;
	height: auto;
	text-decoration: none;
	color: #999;
	font-size: 12px;
	padding: 8px;
	float: left;
}
.pagination span.active {
	background: #5B8AB5;
	color: #fff;
}
.pagination a.page:hover {
	color: #333;
}
.page-info {
	float: right;
	font-size: 11px;
	color: #999;
	padding-top: 10px;
}
.clrfx-1 {
	display: block;
	width: 100%;
	clear: both;
}
.icon {
	font-family: 'FontAwesome';
	font-weight: normal;
}

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

.gallery label {
	font-size: 0.8em;
	color: #999;
	width: auto;
	height: 40px;
	cursor: pointer;
	float: left;
	margin: 0 10px 50px 0;
	padding: 10px 24px;
	line-height: 22px;
}
.gallery label:hover {
	color: #222;
}
.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,
.gallery input.selector-category-4:checked ~ label.label-category-4 {
	background: #5B8AB5;
	color: #fff;
}
.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,
.gallery input.selector-category-4:checked ~ .gallery-items li:not(.category-4) div {
	display: none;
}
.gallery input {
	display: none;
}

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

.gallery {
	background-color:#FFFFFF;
	padding:50px;
}

.gallery-items {
	position: relative;
	margin: 0px auto;
	float: left;
}
.gallery-items li {
	float: left;
	margin: 0 6% 6% 0;
	width: 47%;
	height: auto;
	overflow: hidden;
	position: relative;
	cursor: default;
	background: transparent;
}
.gallery-items li:nth-child(2n) {
	margin-right: 0;
}
.gallery-items li img {
	display: block;
	width: 100%;
	position: relative;
}

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

.gallery-items li .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: auto;
	background: #5b8ab5;
	z-index: 2;
}

.gallery-items li .overlay1 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: auto;
	z-index: 2;
}

.gallery-items li .overlay2 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: auto;
	z-index: 2;
}

.gallery-items li .overlay3 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: auto;
	z-index: 2;
}

.gallery-items li .overlay4 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: auto;
	z-index: 2;
}

.gallery-items li .category,
.gallery-items li .category-2 {
	display: block;
	width: auto;
	color: #3B6489;
	font-size: 4em;
}
.gallery-items li .category {
	padding: 20% 10% 5% 10%;
}
.gallery-items li .category-2 {
	padding: 0 0 5% 0;
}
.gallery-items li h3,
.gallery-items li .overlay p {
	color: #fff;
	display: block;
	width: 90%;
	position: relative;
}

.gallery-items li .overlay1 p {
	color: #fff;
	display: block;
	width: 90%;
	position: relative;
}

.gallery-items li .overlay2 p {
	color: #fff;
	display: block;
	width: 90%;
	position: relative;
}

.gallery-items li .overlay3 p {
	color: #fff;
	display: block;
	width: 90%;
	position: relative;
}

.gallery-items li .overlay4 p {
	color: #fff;
	display: block;
	width: 90%;
	position: relative;
}



.gallery-items li h3 {
	font-size: 1.1em;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0 10%;
}
.gallery-items li .overlay p {
	font-size: 0.7em;
	padding: 5% 10%;
	line-height: 1.6em;
}

.gallery-items li .overlay1 p {
	font-size: 0.7em;
	padding: 5% 10%;
	line-height: 1.6em;
}

.gallery-items li .overlay2 p {
	font-size: 0.7em;
	padding: 5% 10%;
	line-height: 1.6em;
}

.gallery-items li .overlay3 p {
	font-size: 0.7em;
	padding: 5% 10%;
	line-height: 1.6em;
}

.gallery-items li .overlay4 p {
	font-size: 0.7em;
	padding: 5% 10%;
	line-height: 1.6em;
}

.gallery-items li .divider {
	width: 70%;
	border-top: solid 1px #4A78A2;
	margin-left: 10%;
}
.image-links {
	height: auto;
	margin: 5% 0 0 10%;
}
.gallery-items li .image-links a {
	display: inline-block;
	position: relative;
	text-decoration: none;
	margin: 0 5% 0 0;
	color: #fff;
	font-size: 1em;
}
.gallery-items li .image-links a:hover {
	color: #3B6489;
	text-decoration: none;
}

/***** 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 {
	display: block;
	text-align: left;
	color: #fff;
	cursor: auto;
	position: relative;
	background: #5B8AB5;
	padding: 5%;
	float: right;
	width: 35%;
	height: 100%;
	z-index: 3;
}
.lightbox-caption .divider-2 {
	border-top: solid 1px #4A78A2;
	margin: 2% 0;
	display: block;
}
.lightbox-caption span.title {
	font-size: 1.6em;
	text-transform: uppercase;
	display: inline-block;
}
.lightbox-caption p {
	line-height: 1.5em;
	font-size: 0.75em;
	padding-top: 4px;
	display: inline-block;
}
#list {
	font-size: 0.75em;
	display: block;
	margin: 5% 0;
	float: left;
}
#list > div {
	display: inline-block;
	width: 100%;
	clear: both;
	margin: 1% 0;
}
#list > div:before {
	font-family: 'FontAwesome';
	content:"\f00c";
	padding-right: 2%;
	vertical-align: middle;
}
.lightbox-caption .read-more a.more {
	color: #81B7E8;
	font-size: 0.8em;
	text-decoration: none;
	display: inline-block;
	margin: 3% 0;
	padding: 4%;
	background: #3b6489;
	float: left;
	font-weight: 700;
}
.lightbox-caption .read-more a.more:hover {
	background: #fff;
}
.lightbox-caption .read-more a.more span {
	padding-left: 6px;
	font-size: 1.2em;
	vertical-align: top;
}
.gallery-items li .image-wrap {
	position: relative;
	display: block;
	float: left;
	width: 65%;
	height: 100%;
	padding: 5%;
}
.gallery-items li .lightbox img {
	height: auto;
	max-height: 100%;
	width: auto;
	max-width: 100% !important;
	display: block;
	vertical-align: middle;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
}
x:-o-prefocus, .lightbox img {
	height: 100% !important; /* Hack for Opera below ver. 12 */
}
.lightbox a.close-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 1;
	top: 0;
	left: 0;
}

.lightbox a.close-overlay1 {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 1;
	top: 0;
	left: 0;
}


.lightbox a.close-overlay2 {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 1;
	top: 0;
	left: 0;
}

.lightbox a.close-overlay3 {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 1;
	top: 0;
	left: 0;
}

.lightbox a.close-overlay4 {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 1;
	top: 0;
	left: 0;
}

iframe {
	z-index: 9999; /* If you plan to embed videos. Height and width below serve for responsivnes of the iframe embeded videos */
	width: 100% !important;
	height: 100% !important;
}
.lightbox-navigation {
	display: block;
	clear: both;
}
.lightbox-navigation .previous,
.lightbox-navigation .next {
	color: #3b6489;
	font-size: 4em;
	text-decoration: none;
	z-index: 999;
	margin: 10% 10% 0 0;
	display: inline-block;
}
.lightbox-navigation .previous:hover,
.lightbox-navigation .next:hover {
	color: #fff;
}
.lightbox a.close {
	position: absolute;
	top: 10%;
	right: 10%;
	font-size: 1em;
	color: #3B6489;
	text-decoration: none;
	z-index: 999;
}
.lightbox a.close:hover {
	color: #fff;
}
.share-icons {
	display: block;
	float: left;
	position: relative;
	z-index: 9;
	margin: 6% 0 6% 10%;
	width: 40%;
}
.share-icons a {
	font-size: 0.8em;
	color: #fff;
	position: relative;
	text-decoration: none;
	display: inline-block;
	margin: 2% 8% 0 0;
	text-align: center;
}
.share-icons a:hover {
	color: #3B6489;
	text-decoration: none;
}

/***** 4.6 Tooltips *****/

a.tooltip-1 span,
a.tooltip-2 span {
	background: #fff;
	color: #555;
	font-size: 10px;
	text-align: center;
	text-transform: uppercase;
	padding: 10px;
	height: auto;
	width: auto;
	margin: 0 auto;
	position: absolute;
	pointer-events: none;
	visibility: hidden;
}
a.tooltip-1 span {
	min-width: 80px;
	left: -33px;
	bottom: 30px;
	right: 0;
	top: auto;
	white-space: normal;
}
a.tooltip-2 span {
	left: auto;
	bottom: auto;
	right: 60px;
	top: -12px;
	white-space: nowrap;
}
a.tooltip-1:hover span,
a.tooltip-2:hover span {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	visibility: visible;
}
a.tooltip-1 span:after,
a.tooltip-2 span:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-width: 10px;
	border-style: solid;
	border-color: #FFFFFF transparent transparent transparent;
}
a.tooltip-1 span:after {
	top: auto;
	left: 30px;
	bottom: -18px;
}
a.tooltip-2 span:after {
	top: 9px;
	right: -16px;
	bottom: auto;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
a.tooltip-1 b {
	display: block;
	color: #5B8AB5;
}

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

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

.gallery-items li .image-links a,
.lightbox-caption span.title,
.lightbox-caption p,
.lightbox-caption #list > div,
.lightbox-caption .read-more,
.lightbox-caption .category-2,
.gallery-items li .lightbox .image-wrap,
a.tooltip-1 span,
a.tooltip-2 span,
.share-icons a {
	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 .image-links a,
.lightbox:target .lightbox-caption span.title,
.lightbox:target .lightbox-caption p,
.lightbox:target .lightbox-caption #list > div,
.lightbox:target .lightbox-caption .read-more,
.lightbox:target .lightbox-caption .category-2,
.gallery-items li .lightbox:target .image-wrap,
.lightbox-navigation,
a.tooltip-1:hover span,
a.tooltip-2:hover span,
.lightbox:target .lightbox-caption > .share-icons a {
	opacity: 1;
}
.gallery input:checked ~ .gallery-items li:not(div) {
	opacity: 0.15;
}

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

.pagination a.page,
.gallery-items li p,
.gallery-items li h3,
.gallery label,
.lightbox-caption * {
	-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,
.gallery-items li .overlay {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.gallery-items li .overlay1 {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.gallery-items li .overlay2 {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.gallery-items li .overlay3 {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.gallery-items li .overlay4 {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

a.tooltip-1 span,
a.tooltip-2 span,
.share-icons a {
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}
.gallery-items li .image-links a,
.lightbox-caption .read-more,
.lightbox-caption .category-2 {
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

/***** 5.3 Animations *****/

.gallery-items li:hover .overlay,
.gallery-items li:hover .overlay p,
.gallery-items li:hover h3,
.lightbox:target .lightbox-caption span.title,
.lightbox:target .lightbox-caption p,
.lightbox:target .lightbox-caption #list div {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
}
.gallery-items li:hover .overlay1,
.gallery-items li:hover .overlay1 p,
.gallery-items li:hover h3,
.lightbox:target .lightbox-caption span.title,
.lightbox:target .lightbox-caption p,
.lightbox:target .lightbox-caption #list div {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
}

.gallery-items li:hover .overlay2,
.gallery-items li:hover .overlay2 p,
.gallery-items li:hover h3,
.lightbox:target .lightbox-caption span.title,
.lightbox:target .lightbox-caption p,
.lightbox:target .lightbox-caption #list div {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
}

.gallery-items li:hover .overlay3,
.gallery-items li:hover .overlay3 p,
.gallery-items li:hover h3,
.lightbox:target .lightbox-caption span.title,
.lightbox:target .lightbox-caption p,
.lightbox:target .lightbox-caption #list div {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
}

.gallery-items li:hover .overlay4,
.gallery-items li:hover .overlay4 p,
.gallery-items li:hover h3,
.lightbox:target .lightbox-caption span.title,
.lightbox:target .lightbox-caption p,
.lightbox:target .lightbox-caption #list div {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
}

.gallery-items li .overlay1,
.gallery-items li h3,
.gallery-items li .overlay1 p {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
}

.gallery-items li .overlay2,
.gallery-items li h3,
.gallery-items li .overlay2 p {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
}

.gallery-items li .overlay3,
.gallery-items li h3,
.gallery-items li .overlay3 p {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
}

.gallery-items li .overlay4,
.gallery-items li h3,
.gallery-items li .overlay4 p {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
}

.lightbox-caption span.title,
.lightbox-caption p,
.lightbox-caption #list div {
	-webkit-transform: translateX(200%);
	-moz-transform: translateX(200%);
	-o-transform: translateX(200%);
	-ms-transform: translateX(200%);
	transform: translateX(200%);
}
.gallery-items li:hover h3 {
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
.gallery-items li:hover .overlay 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;
}
.gallery-items li:hover .overlay1 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;
}
.gallery-items li:hover .overlay2 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;
}
.gallery-items li:hover .overlay3 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;
}
.gallery-items li:hover .overlay4 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;
}
.gallery-items li:hover a.link-1 {
	-webkit-transition-delay: 0.8s;
	-moz-transition-delay: 0.8s;
	-o-transition-delay: 0.8s;
	-ms-transition-delay: 0.8s;
	transition-delay: 0.8s;
}
.gallery-items li:hover a.link-2 {
	-webkit-transition-delay: 0.9s;
	-moz-transition-delay: 0.9s;
	-o-transition-delay: 0.9s;
	-ms-transition-delay: 0.9s;
	transition-delay: 0.9s;
}
.gallery-items li:hover a.link-3 {
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	-o-transition-delay: 1s;
	-ms-transition-delay: 1s;
	transition-delay: 1s;
}
.gallery-items li:hover a.link-4 {
	-webkit-transition-delay: 1.1s;
	-moz-transition-delay: 1.1s;
	-o-transition-delay: 1.1s;
	-ms-transition-delay: 1.1s;
	transition-delay: 1.1s;
}
.gallery-items li:hover a.link-5 {
	-webkit-transition-delay: 1.2s;
	-moz-transition-delay: 1.2s;
	-o-transition-delay: 1.2s;
	-ms-transition-delay: 1.2s;
	transition-delay: 1.2s;
}
.lightbox:target .lightbox-caption .category-2 {
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
.lightbox:target .lightbox-caption span.title {
	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
.lightbox:target .lightbox-caption p {
	-webkit-transition-delay: 0.7s;
	-moz-transition-delay: 0.7s;
	-o-transition-delay: 0.7s;
	-ms-transition-delay: 0.7s;
	transition-delay: 0.7s;
}
.lightbox:target #list > .list-1 {
	-webkit-transition-delay: 0.9s;
	-moz-transition-delay: 0.9s;
	-o-transition-delay: 0.9s;
	-ms-transition-delay: 0.9s;
	transition-delay: 0.9s;
}
.lightbox:target #list > .list-2 {
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	-o-transition-delay: 1s;
	-ms-transition-delay: 1s;
	transition-delay: 1s;
}
.lightbox:target #list > .list-3 {
	-webkit-transition-delay: 1.1s;
	-moz-transition-delay: 1.1s;
	-o-transition-delay: 1.1s;
	-ms-transition-delay: 1.1s;
	transition-delay: 1.1s;
}
.lightbox:target #list > .list-4 {
	-webkit-transition-delay: 1.2s;
	-moz-transition-delay: 1.2s;
	-o-transition-delay: 1.2s;
	-ms-transition-delay: 1.2s;
	transition-delay: 1.2s;
}
.lightbox:target #list > .list-5 {
	-webkit-transition-delay: 1.3s;
	-moz-transition-delay: 1.3s;
	-o-transition-delay: 1.3s;
	-ms-transition-delay: 1.3s;
	transition-delay: 1.3s;
}
.lightbox:target .lightbox-caption .read-more {
	-webkit-transition-delay: 1.7s;
	-moz-transition-delay: 1.7s;
	-o-transition-delay: 1.7s;
	-ms-transition-delay: 1.7s;
	transition-delay: 1.7s;
}
.lightbox .image-wrap {
	-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 .share-icons a.fb-share {
	-webkit-transition-delay: 1.9s;
	-moz-transition-delay: 1.9s;
	-o-transition-delay: 1.9s;
	-ms-transition-delay: 1.9s;
	transition-delay: 1.9s;
}
.lightbox:target .share-icons a.tw-share {
	-webkit-transition-delay: 2s;
	-moz-transition-delay: 2s;
	-o-transition-delay: 2s;
	-ms-transition-delay: 2s;
	transition-delay: 2s;
}
.lightbox:target .share-icons a.gp-share {
	-webkit-transition-delay: 2.1s;
	-moz-transition-delay: 2.1s;
	-o-transition-delay: 2.1s;
	-ms-transition-delay: 2.1s;
	transition-delay: 2.1s;
}
.lightbox:target .share-icons a.li-share {
	-webkit-transition-delay: 2.2s;
	-moz-transition-delay: 2.2s;
	-o-transition-delay: 2.2s;
	-ms-transition-delay: 2.2s;
	transition-delay: 2.2s;
}

/*---------------------------------------------------
	6. Responsive queries - Width
---------------------------------------------------*/

/***** Max width 1366px *****/

@media screen and (max-width:1366px){
	.share-icons {
		margin-left: 0;
		width: 100%;
	}
}

/***** Max width 1024px *****/

@media screen and (max-width:1024px){
	#filterize {
		width: 94%;
	}
	.gallery-items li .image-wrap,
	.lightbox-caption {
		width: 100%;
		left: 0;
		position: absolute;
	}
	.gallery-items li .image-wrap {
		top: 0;
		height: 55%;
	}
	.lightbox-caption {
		height: 45%;
		bottom: 0;
	}
	.gallery-items li .category-2 {
		display: inline-block;
		padding: 0 5% 0 0;
	}
	.lightbox-caption span.title {
		font-size: 1.4em;
	}
	.lightbox-caption p {
		padding-bottom: 2%;
	}
	#list {
		display: none;
	}
	.lightbox-caption .read-more a.more {
		padding: 2%;
	}
	.lightbox:target .read-more {
		-webkit-transition-delay: 1s !important;
		-moz-transition-delay: 1s !important;
		-o-transition-delay: 1s !important;
		-ms-transition-delay: 1s !important;
		transition-delay: 1s !important;
	}
	.share-icons {
		width: 30%;
		margin: 5% 0 0 10%;
	}
	.lightbox:target .share-icons a.fb-share {
		-webkit-transition-delay: 1.2s;
		-moz-transition-delay: 1.2s;
		-o-transition-delay: 1.2s;
		-ms-transition-delay: 1.2s;
		transition-delay: 1.2s;
	}
	.lightbox:target .share-icons a.tw-share {
		-webkit-transition-delay: 1.3s;
		-moz-transition-delay: 1.3s;
		-o-transition-delay: 1.3s;
		-ms-transition-delay: 1.3s;
		transition-delay: 1.3s;
	}
	.lightbox:target .share-icons a.gp-share {
		-webkit-transition-delay: 1.4s;
		-moz-transition-delay: 1.4s;
		-o-transition-delay: 1.4s;
		-ms-transition-delay: 1.4s;
		transition-delay: 1.4s;
	}
	.lightbox:target .share-icons a.li-share {
		-webkit-transition-delay: 1.5s;
		-moz-transition-delay: 1.5s;
		-o-transition-delay: 1.5s;
		-ms-transition-delay: 1.5s;
		transition-delay: 1.5s;
	}
	.lightbox-navigation {
		float: right;
		clear: none;
		display: inline-block;
		width: 30%;
		text-align: right;
	}
	.lightbox-navigation .previous,
	.lightbox-navigation .next {
		margin-top: 3%;
	}
	.lightbox-navigation .previous {
		margin-right: 15%;
	}
	.lightbox-navigation .next {
		margin-right: 0;
	}
	.lightbox a.close {
		right: 5%;
	}
}

/***** Min width 600px and Max width 800px *****/

@media screen and (min-width:600px) and (max-width:800px){
	.gallery-items li .category {
		padding: 10% 0 5% 10%;
		font-size: 3em;
	}
	.gallery-items li h3 {
		font-size: 1em;
		white-space: nowrap; 
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		-ms-text-overflow: ellipsis; 
		overflow: hidden;
	}
}

/***** Max width 600px *****/

@media screen and (max-width:600px){
	.lightbox-caption .read-more a.more {
		padding: 3%;
	}
	.share-icons {
		display: none; /* We need to hide share icons because of lack of horizontal space */
	}
}

/***** Max width 599px *****/

@media screen and (max-width:599px){
	.gallery-items li {
		width: 100%;
		margin-right: 0;
	}
	.gallery label {
		width: 100%;
		text-align: center;
		margin: 0 0 10px 0;
	}
	.gallery label:last-of-type {
		margin-bottom: 40px;
	}
	.lightbox-caption .read-more a.more {
		padding: 4%;
	}
}

/***** Max width 380px *****/

@media screen and (max-width:380px){
	.gallery-items li .category,
	.gallery-items li .category-2 {
		font-size: 3em;
	}
	.gallery-items li h3 {
		font-size: 1em;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
	}
}

/*---------------------------------------------------
	7. Responsive queries - Height
---------------------------------------------------*/

/***** Min width 1025px and Max height 640px *****/

@media screen  and (min-width:1025px) and (max-height:768px){
	.gallery-items li .category-2 {
		font-size: 3em;
	}
	.lightbox-caption span.title {
		font-size: 1.2em;
	}
	.lightbox-caption p {
		padding-bottom: 3%;
	}
	#list {
		display: none;
	}
	.lightbox-navigation .previous,
	.lightbox-navigation .next {
		margin-top: 2%;
	}
}

/***** Min width 1025px and Max height 480px *****/

@media screen  and (min-width:1025px) and (max-height:480px){
	.share-icons {
		display: none;
	}
	.lightbox-caption p {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		width: 100%;
	}
	.lightbox:target .read-more {
	-webkit-transition-delay: 1s !important;
	-moz-transition-delay: 1s !important;
	-o-transition-delay: 1s !important;
	-ms-transition-delay: 1s !important;
	transition-delay: 1s !important;
	}
}

/***** Min width 1025px and Max height 360px *****/

@media screen  and (min-width:1025px) and (max-height:360px){
	.gallery-items li .category-2 {
		display: none;
	}
}

/***** Max width 1024px and Max height 800px *****/

@media screen and (max-width:1024px) and (max-height:800px){
	.lightbox-caption {
		padding: 3%;
	}
}

/***** Max width 1024px and Max height 640px *****/

@media screen and (max-width:1024px) and (max-height:640px){
	.share-icons {
		margin-top: 3%;
	}
	.lightbox-caption .read-more a.more {
		margin-top: 1%;
	}
	.lightbox-navigation .previous,
	.lightbox-navigation .next {
		margin-top: 0;
	}
	.lightbox-caption p {
		display: none;
	}
	.lightbox-caption .read-more a.more {
		margin-top: 1%;
	}
}

/***** Max width 1024px and Max height 420px *****/

@media screen and (max-width:1024px) and (max-height:420px){
	.gallery-items li .category-2 {
		display: none;
	}
	.lightbox-caption .read-more a.more {
		margin-top: 2%;
	}
}

/***** Max width 420px and Max height 768px *****/

@media screen and (max-width:420px) and (max-height:768px){
	.lightbox-caption .read-more a.more {
		margin-top: 3%;
	}
}

/*---------------------------------------------------
	8. Scrollbars
---------------------------------------------------*/
/* Note: You can disable custom scrollbars simply by deleting the selectors below in this section. Firefox currently doesn't support custom scrollbars */

/***** 8.1. Webkit (Chrome, Safari 5+ and Opera 15+) *****/

::-webkit-scrollbar {
	width: 6px; /* Vertical scrollbar width */
	height: 6px; /* Horizontal scrollbar height */
}
::-webkit-scrollbar-button {
	display: none;
}
::-webkit-scrollbar-track {
	background: #f0f0f0;
}
::-webkit-scrollbar-track-piece {
	background: #f0f0f0;
}
::-webkit-scrollbar-thumb {
	background: #5B8AB5;
}
::-webkit-scrollbar-corner {
	background: #5B8AB5;
}
::-webkit-resizer {
	background: #5B8AB5;
}

/***** 8.2. Internet Explorer (9+) *****/

html, body {
	scrollbar-base-color: #5B8AB5;
	scrollbar-arrow-color: #fff;
	scrollbar-track-color: #f0f0f0;
	scrollbar-shadow-color: #5B8AB5;
	scrollbar-lightshadow-color: #fff; 
	scrollbar-darkshadow-color: #fff;
	scrollbar-highlight-color: #fff;
	scrollbar-3dlight-color: #fff;
}