/*Style additions for gallery.html

Parallax adjustments:

########NOTE:########
z-index adjustments are in galleryparallaxon.css*/

@import "style.css";

/*Menu active link adjustment*/

.menu4 a:nth-child(4) {
	background-color: #5E7F2D;/*#82b440;*/
}


body {
	background-image: url("../images/2560/paddock-wood-lawn-striping.jpg");
	background-size: cover;
	background-position: center bottom;
}

.plx-gallery1 {
	width: 100%;
	height: fit-content !important;
}

.plx-gallery1 .plx-layer_base {
	text-align: center;
	position: relative;
	background-color: gray;
	box-shadow: inset 0 0 1em 0.01em rgba(0, 0, 0, 1);
}

.plx-gallery1  .plx-layer_base  .h1 {
	padding-top: 0.5em;
}

.plx-gallery1 .plx-layer_base .h3, span {
	color: #cdffbb;
}

.plx-gallery1 .plx-layer_base .h3 span:last-child {
	display: none;
}

#beforeaftercontainer {
	margin-left: 2vw;
	margin-right: 2vw;
	padding-top: 1em;
	/* Prevent vertical gaps */
	line-height: 0.5em;
	
	-webkit-column-count: 3;
	-webkit-column-gap:   0.5em;
	-moz-column-count:    3;
	-moz-column-gap:      0.5em;
	column-count:         3;
	column-gap:           0.5em; 
}

.beforeafterphoto {
	height: max(40vh, 300px);
	margin: 0;
	padding: 0;
	margin-bottom: 0.5em;
	overflow: hidden;
	border: solid 0.75em #333;
	box-sizing: border-box;
}

.beforeafterphoto img {
	height: 100%;
	width: 100%;
	margin: auto;
	transition: ease-in 3s;
	z-index: -1;
	object-fit: cover;
}

.beforeafterphoto:hover .beforephoto {
	opacity: 0;
	transition: ease-out 1.5s;
}

.beforeafterphoto:focus .beforephoto {
	opacity: 0;
	transition: ease-out 1.5s;
}

.beforeafterphoto:hover .afterphoto {
	transform: scale(1.025);
	transition: ease-out 3s;
}

.beforeafterphoto:focus .afterphoto {
	transform: scale(1.025);
	transition: ease-out 3s;
}

.afterphoto {
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#after1 {
	background-image: url("../images/640/tunbridge-wells-tall-lawn-cutting-after.jpg");
}

#after2 {
	background-image: url("../images/640/pembury-beech-hedge-reduction-after.jpg");
}

#after3 {
	background-image: url("../images/640/pembury-border-clearance-after.jpg");
}

#after4 {
	background-image: url("../images/640/lamberhurst-border-weeding-after.jpg");
}

#after5 {
	background-image: url("../images/640/pembury-fence-repair-after.jpg");
}

#after6 {
	background-image: url("../images/640/tunbridge-wells-cloud-form-hedge-trimming-after.jpg");
}

.plx-gallery2 {
	height: fit-content !important;
	background-image: linear-gradient(to bottom, rgba(30,30,30,1.0), rgba(30,30,30,0));
}

.plx-gallery2 .plx-layer_base {
	position: relative;
	padding: 1em;
	text-align: center;
	background-color: rgba(60,60,60,0.2);
}

#photos {
	padding-top: 1em;
	/* Prevent vertical gaps */
	line-height: 0.5em;
	
	-webkit-column-count: 5;
	-webkit-column-gap:   0.5em;
	-moz-column-count:    5;
	-moz-column-gap:      0.5em;
	column-count:         5;
	column-gap:           0.5em; 
}

#photos img {
	/* Just in case there are inline attributes */
	width: 100% !important;
	height: auto !important;
	margin-bottom: 0.5em;
}

#photos img:hover {
	transform: scale(1.2);
	background-color: #111;
	opacity: 0.8;
	box-shadow: 0 0 1em 0.01em rgba(0, 0, 0, 1);
}

.plx-footer .plx-layer_base:first-child {
	background-color: gray;
}

/*Media query for making gallery narrower on desktop*/

@media screen and (min-width: 769px) {
	
	.plx-gallery2 > .plx-layer {
		width: 80%;
		left: 10%;
		background-color: rgba(60,60,60,0.8);
		margin-bottom: 4em;
	}
}

/*Media query for 'hover over' or 'tap' directions*/

@media screen and (max-width: 768px) {
	
	.plx-gallery1 .plx-layer_base .h3 span:first-child {
		display: none;
	}
	
	.plx-gallery1 .plx-layer_base .h3 span:last-child {
		display: inline;
	}

}

/*Media queries for controlling number of photos columns*/

@media (max-width: 1000px) {
	#photos {
		-moz-column-count:    4;
		-webkit-column-count: 4;
		column-count:         4;
	}
}
@media (max-width: 850px) {
	#photos {
		-moz-column-count:    3;
		-webkit-column-count: 3;
		column-count:         3;
	}
}
@media (max-width: 650px) {
	#photos {
		-moz-column-count:    2;
		-webkit-column-count: 2;
		column-count:         2;
	}
	
	#beforeaftercontainer {
		-moz-column-count:    2;
		-webkit-column-count: 2;
		column-count:         2;
	}
}
@media (max-width: 400px) {
	#photos {
		-moz-column-count:    1;
		-webkit-column-count: 1;
		column-count:         1;
	}
	
	#beforeaftercontainer {
		-moz-column-count:    1;
		-webkit-column-count: 1;
		column-count:         1;
	}
}