/*
 *	module.gallery.css
 * 	CSS for the Client Gallery on mariettac.com
 *	Tony Collings
 * 
 * ---------------------------------------------------------- */ 
 
 
 
	div#content {
		background-color: #e9e9e9; 
		box-sizing: border-box; 
		width: 100%; 
		max-width: 1024px; 	
		-webkit-border-radius: 8px;
		border-radius: 8px;
		-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
		box-shadow: 0 0 15px 0 rgba(0,0,0,0.15); 
		padding: 10px;
		top: auto;  
	}
	
		#content.pin {
			overflow: hidden !important; 
			position: absolute; 
			left: 50%; 
			transform: translateX(-50%); 	
			-webkit-transform: translateX(-50%); 	
		}
 
	ul#gallery-images {
		display: block; clear: both; 
		width: 100%; 
		box-sizing: border-box; 
		list-style-type: none; 
		margin: 0px; padding: 0px; 
		/*
		-webkit-column-count: 4; 
		-moz-column-count: 4; 
		column-count: 4;
		position: relative; 
		-webkit-column-gap: 10px; 
		-moz-column-gap: 10px; 
		column-gap: 10px;
		*/
	}
	
	
	div#gallery-images div.image {
		/*
		width: calc((100% / 4) - 10px); 
		margin-left: 10px; 	
		*/
		float: left; 
		width: calc((100% - 30px) / 4); 
		background-color: #fff; 
		-webkit-border-radius: 8px;
		border-radius: 8px;
		vertical-align: top; 
		box-sizing: border-box; 
		-webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
		box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
		/*
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
		*/
		margin: 10px 10px 0 0; 
	}
	
		div.image-col {
			float: left; 
			width: calc((100% / 4) - 10px); 
			margin: 10px 10px 0 0;		
		}
		
		div#gallery-images div.image-col div.image {
			width: 100%; display: inline-block; 
			float: none; 
			margin: 0px; margin-bottom: 10px; 	
		}
	
		div#gallery-images div.image:nth-child(4n+0){
			margin-right: 0px; 
		}


		div#gallery-images div.image a {
			display: block; 
			width: 100%; height: 100%; 
			box-sizing: border-box; 
			position: relative; 
		}
		
		div#gallery-images div.image span.image-container {
			display: block; 
			width: 100%; height: 100%; 
			box-sizing: border-box; 
			padding: 10px; 
			
		}	
		div#gallery-images div.image:hover span.image-container::after {
			display: block; 
			width: 100%; height: 100%; 
			background-color: #000; 
			z-index: 3000; 
			opacity: 0.25; 
			content: ""; 
			position: absolute; top: 0px; left: 0px; 
			-webkit-border-radius: 8px;
			border-radius: 8px;
			cursor: -webkit-zoom-in; 
			cursor: zoom-in; 
		}
		
		div#gallery-images div.image img {
			width: 100%; 
		}
		
		
		div.pagination {
			display: block; width: 100%; clear: both; 
			text-align: center; 
			margin: 50px 0px; 
		}
		div.pagination a#load-more {
			display: block; width: 100px; height: 100px; 
			border: 2px solid #acacac;
			/*
			border-bottom: 2px solid #e2e2e2;  
			*/
			text-transform: uppercase; 
			-webkit-border-radius: 100px;
			border-radius: 100px;	
			text-align: center; 
			margin: 0px auto; 
			vertical-align: middle; 
			line-height: 100px; 
			color: #909090; 
			font-weight: bolder; 
			text-shadow: 0 1px 0 #FFFFFF;
			transition: all 500ms ease-in-out;	
		}
			a#load-more:hover {
				text-decoration: none; 
				-webkit-box-shadow: 0 0 20px 0 rgba(243,104,83,0.5);
				box-shadow: 0 0 20px 0 rgba(243,104,83,0.5);				
			}	


	span#overlay-mask {
		display: block; 
		width: 100%; height: 100%; 
		content: ""; 
		background-color: #e9e9e9; 
		opacity: 0.75; 
		z-index: 100000; 
		position: fixed; top: 0px; left: 0px; 	
	}
	
		#image-zoom-outer {
			position: fixed; 
			top: 0px; left: 0px; 
			padding: 30px; 
			width: 100%; 
			height: 100%; 
			box-sizing: border-box; 
			margin: 0px; 
			border: 0px; 
			background-color: transparent; 
			overflow: auto; 
		}
		
		#image-zoom-inner {
			border: 0px;
			background-color: #fff; 
			-webkit-border-radius: 8px;
			border-radius: 8px;
			-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
			box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
			position: relative;
			left: 50%; 
			transform: translateX(-50%); 
			-webkit-transform: translateX(-50%); 
			/*
			width: 100%; 
			*/
			max-width: 550px; 
			min-height: 450px;
			margin: 0px; margin-bottom: 30px; 
			padding: 10px; 
			box-sizing: border-box; 
		}
		

		
		#image-zoom-inner .overlay-content img {
			max-width: 100%; 
			height: auto; 
		}	
		
			#image-credit {
				display: block; clear: both; 
				font-size: 0.75rem; 
				text-align: right; 
				padding: 4px; 
			}


		#image-zoom-outer a.overlay-close {
			display: block; 
			width: 15px; height: 15px; 
			content: ""; 
			background-color: transparent; 
			background-image: url('img/ui/overlay-close.png'); 
			background-size: contain; 
			background-position: center center; 
			background-repeat: no-repeat; 	
			z-index: 100000; 
			position: fixed; 
			top: 40px; right: 75px; 
			opacity: 0.5; 
			background-color: none; 
			border: 0px; 
			-webkit-box-shadow: none;
			box-shadow: none;
			transition: all 500ms ease-in-out;		
		}	
		#image-zoom-outer a.overlay-close:hover {
			opacity: 1; 	
		}
		
		
		.image-navigation {
			display: block; 
			width: 30px; height: 30px; 
			content: ""; 
			background-size: contain; 
			background-position: center center; 
			background-repeat: no-repeat; 	
			z-index: 100000; 
			position: fixed; 
			top: 50%; 
			transform: translateY(-50%); 
			-webkit-transform: translateY(-50%); 
			opacity: 0.5; 
			transition: all 500ms ease-in-out;	
		}
		.image-navigation:hover {
			opacity: 1 !important; 
		}	
		
		#arrow-left {
			background-image: url('img/ui/arrow-left.png'); 
			left: 75px; 
		}
		
		#arrow-right {
			background-image: url('img/ui/arrow-right.png'); 
			right: 75px; 
		}