/*Load-on-demand Gallery*/
/*Version 0.1*/
/*Written by James Douglas (june 2014)*/
/*james.douglas@tandf.co.uk*/

/*Pre Loading Styles*/
.gal-preloader, .gal-loaded{width: 23%;height: 300px;margin:1%;}
.gal-preloader {background: #333333;display: inline-block;position: relative;top: 0;opacity:0.1;left: 0;}

/*Main Styles*/
.gal-lightbox > #close_modal{
	color: #fff;
	opacity: 1;
	font-size: 2em;
	text-shadow: 0px 0px 5px #555;
	position: fixed;
	margin-left: -35px;
	top: 0;
	z-index: 20000;
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
	cursor: pointer;
	right: 13px;
}
.gal-holder-icon {
	color: #fff;
	content: "\f03e";
	font-family: FontAwesome;
	font-size: 10vw;
	width: 100%;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
}
.gallery-container {padding: 0;width: 100%;position: relative;top: 0;left: 0;display: inline-block;}

/*Target ONLY the last item in the list ONLY if it's a single item on a new line*/
.gallery-container li:nth-child(4n + 1):last-child {width: 98%;background-position: center 50% !important;}
.gallery-container li:nth-child(4n + 1):last-child:hover::after {width: 99.5%;left: 0;opacity: 0.8;margin-left: 0.25%;padding-right: 1%;}

/*Target Last item in line if there are 3 out of 4 on the last line */
.gallery-container li:nth-child(4n - 1):last-child {width: 48%;background-position: center 50% !important;}
.gallery-container li:nth-child(4n - 1):last-child:hover::after {width: 99%;left: 0;opacity: 0.8;margin-left: 0.5%;padding-right: 1%;}

/*Target Last item in line if there are 2 out of 4 on the last line */
.gallery-container li:nth-child(4n - 2):last-child {width: 23%;background-position: center 50% !important;}
.gallery-container li:nth-child(4n - 2):last-child:hover::after {width: 99%;left: 0;opacity: 0.8;margin-left: 0.5%;padding-right: 1%;}

.gal-loaded {color: #fff;float: left;position: relative;top: 0;left: 0;overflow: hidden;opacity:0;
	-webkit-animation: fadeIn 2s forwards;
    animation:         fadeIn 2s forwards;
}

/*text stuff*/
.gal-title {
	position: absolute;
	left: 0;
	width: 100%;
	color: #fff;
	bottom: 0;
	padding-left: 0;
	line-height: 21px;
	background: rgba(51,51,51,0.3);
	z-index: 10;
	opacity: 0;
	-webkit-transition: all 200ms ease;
	transition: all 200ms ease;
	text-overflow:"...";
	white-space:nowrap;
	overflow:hidden;
}
.gal-loaded>.gal-title {height: 36px;}
.gal-flickr {text-align: center;}
.gal-lightbox > .gal-title{background:none;opacity:1;}
.gal-loaded:hover >.gal-title{
	-webkit-animation: FadeInLeft 100ms forwards;
	animation: FadeInLeft 100ms forwards;
}

.gal-notext {text-align: center;height: 60px;bottom: 0;opacity: 1;background: none;}
.gal-lightbox > .gal-title::after{display:none;}
.gal-loaded:hover .gal-title {opacity: 1;}
.gal-title::after {position: absolute;left: 10px;content: "Click to view fullscreen";bottom: 1%;color: #fff;font-size: 0.6em;}
.gal-loaded::before {
top: 0;
position: absolute;
left: 0;
content: "";
background: rgba(255,255,255,0.2);
width: 100%;
opacity: 0;
height: 100%;
color: #222;
z-index: 1;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.gal-loaded:hover::before{opacity:1;}

.gal-loaded::after {
	position: absolute;
	left: 100%;
	text-align: right;
	font-size: 2em;
	content: "\f065";
	font-family: FontAwesome;
	width: 50%;
	height: 98%;
	margin-left: 1%;
	color: #fff;
	top: 1%;
	padding-right: 3%;
	opacity: 0;
	z-index: 100;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	border-bottom: 1px solid #fff;
	transition: all 300ms ease;
}

.gal-loaded:hover::after{width: 98%;left:0;opacity:0.8;}

.gal-lightbox {width: 100%;height: 100%;z-index: 100000;position: fixed;background: rgba(0,0,0,0.9);top: 0;display: -webkit-box;display: flex;display: -webkit-flex;display: -ms-flexbox;-webkit-box-pack: start;-ms-flex-pack: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-webkit-flex-direction: row;-ms-flex: row;flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;-ms-flex-line-pack: center;align-content: center;-webkit-align-content: center;-ms-flex-align: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-justify-content: center;-ms-justify: center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-items:center;}

.gal-lightbox_bg {background-repeat: no-repeat !important;}
.gal-img {max-height: 99%;min-width: 200px;display: block;max-width: 99%;opacity:1;width:99%;}
.gal-img:hover::before{background:none;}

/*Simple opacity Fade*/
@-webkit-keyframes fadeIn {0%{opacity:0;}100%{opacity:1;}}
@keyframes fadeIn {0%{opacity:0;}100%{opacity:1;}}

/*Fade In whilst traveling up slightly*/
@-webkit-keyframes FadeInUp {0%{opacity:0;padding-top: 2%;}100%{opacity:1;padding-top: 0;}}
@keyframes FadeInUp {0%{opacity:0;padding-top: 2%;}100%{opacity:1;padding-top: 0;}}

@-webkit-keyframes FadeInLeft {0%{opacity:0;padding-left: 13.5%;}100%{opacity:1;padding-left: 10px;}}
@keyframes FadeInLeft {0%{opacity:0;padding-left: 13.5%;}100%{opacity:1;padding-left: 10px;}}


/*Media Queries*/
/*iPhone Vertical*/
@media only screen and (max-width: 480px){
    .gal-preloader, .gal-loaded{width: 48%;height: 140px;margin: 1%;min-width: 10px;}
    .gal-img{max-height: 30%;min-width: 100px;}
    .gal-lightbox > .gal-title{text-shadow: 0px 0px 5px #000;position: absolute;top: 70%;width: 100%;height: 200px;bottom: 2.5%;font-size: 1em;display: block;overflow: auto;}
    .gal-lightbox > #close_modal{top: 0;right:10px;}
    .gal-loaded::before, .gal-loaded::after, .gal-title::after, .gal-title::before, .gal-title{display:none;content:"";}
}

/*iPhone Horizontal*/
@media only screen and (min-width: 481px) and (max-width : 600px){
    .gal-preloader, .gal-loaded{width: 23%;height: 120px;margin: 1%;min-width: 10px;}
    .gal-img{max-height: 90%;min-width: 100px;}
    .gal-lightbox > .gal-title{left: 15%;top: 85%;width: 70%;height: 50px;bottom: 2.5%;display:block;font-size: 1em;}
    .gal-lightbox > #close_modal{top: 0;right:10px;}
    .gal-loaded::before, .gal-loaded::after, .gal-title::after, .gal-title::before, .gal-title{display:none;content:"";}
}