/*--------------------------------------------------------*/
/* Gallery
/*--------------------------------------------------------*/

#gallery {
}
#gallery-grid {
	/*margin: -16px 0 0 -16px;*/
}



/* Tympanus grid (effect 3) */
#gallery-grid li.shown,
.no-js #gallery-grid li,
.no-cssanimations #gallery-grid li {
	opacity: 1;
}
#gallery-grid li a,
#gallery-grid li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;
}
#gallery-grid li.animate {
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: scaleUp 0.65s ease-in-out forwards;
	animation: scaleUp 0.65s ease-in-out forwards;
}

@-webkit-keyframes scaleUp {
	0% { }
	100% { -webkit-transform: scale(1); opacity: 1; }
}

@keyframes scaleUp {
	0% { }
	100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

/***/





#gallery-grid li {
	display: block;
	width: 100%;
	margin-bottom: 4px;
	opacity: 0;
}
#gallery-grid li a {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 56.25%;
	background-repeat: no-repeat;
	background-position: 50% 0;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;
}
#gallery-grid li a:not(.no-large):after {
	content: '';
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(88,88,90,0.65) url(../img/plus.png) 50% 50% no-repeat;
	-webkit-background-size: 10% auto;
	   -moz-background-size: 10% auto;
		 -o-background-size: 10% auto;
			background-size: 10% auto;
	opacity: 0;
	-webkit-transition: all 0.2s ease; 
	   -moz-transition: all 0.2s ease; 
	    -ms-transition: all 0.2s ease; 
		 -o-transition: all 0.2s ease; 
			transition: all 0.2s ease;
}
#gallery-grid li a:not(.no-large):hover:after {
	opacity: 1;
	-webkit-background-size: 20% auto;
	   -moz-background-size: 20% auto;
		 -o-background-size: 20% auto;
			background-size: 20% auto;
}






#swipebox-overlay {
	background: rgba(59,72,41,.95);
}
#swipebox-prev,
#swipebox-next,
#swipebox-close {
	width: 64px;
	height: 64px;
	background: url('../img/gallery-btns.png') no-repeat;
	background-size: 128px 128px;
}
#swipebox-prev {
	background-position: 0 -64px;
}
#swipebox-next {
	background-position: -64px -64px;
}
#swipebox-close {
	top: 20px;
	right: 20px;
	background-position: -64px 0;
}
#swipebox-bottom-bar {
	bottom: 50%;
	height: 0px;
	margin-top: -32px;
}
#swipebox-bottom-bar.visible-bars {
	-webkit-transform: none;
			transform: none;
}
#swipebox-arrows {
	width: 100%;
	max-width: none;
	padding: 0 20px;
}


@media (min-width: 768px) {
	#gallery-grid:before {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 9;
		width: 100%;
		height: 6px;
		background: #fff;
	}
	#gallery-grid:after {
		content: '';
		display: block;
		clear: both;
	}
	
	
	
	#gallery-grid li {
		width: 33.3333%;
		float: left;
		margin-bottom: 0;
	}
	#gallery-grid li a {
		/*margin-left: 4px;*/
		border-right: 4px solid #fff;
		border-top: 4px solid #fff;
	}
	
	#gallery-grid li.size-a > a {
		
	}
	#gallery-grid li.size-b > a {
		max-width: 200%;
		width: 200%;
		float: left;
	}
	#gallery-grid li.size-b > a:not(.no-large):after {	
		-webkit-background-size: 5% auto;
		   -moz-background-size: 5% auto;
			 -o-background-size: 5% auto;
				background-size: 5% auto;		
	}
	#gallery-grid li.size-b > a:not(.no-large):hover:after {
		-webkit-background-size: 10% auto;
		   -moz-background-size: 10% auto;
			 -o-background-size: 10% auto;
				background-size: 10% auto;
	}

	#gallery-grid li.size-c {
		border-bottom: 0;
	}
	#gallery-grid li.size-c > a {
		padding-top: 113.50%;
	}
	
}