/*Style additions for services.html

Parallax adjustments:

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

@import "style.css";

/*Menu active link adjustment*/

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


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

.plx-viewport {
	overflow: hidden;
}

.plx-services1 {
	height: max(80vh, 600px) !important;
}

.plx-services1 .plx-layer_base {
	background-color: gray;
	box-shadow: inset 0 0 1em 0.01em rgba(0, 0, 0, 1);
}

.servicessummary .h4 {
	margin-top: 0.75em;
}

.servicessummary .h4, ul {
	width: 56vw;
	padding-top: 0.5em;
	background-color: #666;
}

.servicessummary ul {
	list-style: none;
	column-count: 2;
	padding: 0.5em;
	padding-top: 1em;
	margin-bottom: 1em;
}

.servicessummary .fa-arrow-right {
	color: #3c963b;
	text-decoration: none;
	margin-right: 0.35em;
}

.plx-layer_subfore {
	padding: 5vh;
}

.plx-sframehalfheight {
	height: max(50vh, 375px) !important;
}

.plx-sframehalfheight .background-image {
	height: max(45vh, 338px) !important;
}

.plx-serviceframe > .plx-layer_base {
	overflow: hidden;
	background-repeat: no-repeat;
	scroll-margin-top: max(22vh, 165px);
}

.plx-serviceframe:nth-child(odd) > .plx-layer_base {
	border-top: solid 5vh #444;
	border-left: solid 5vw #333;
}

.plx-serviceframe:nth-child(even) > .plx-layer_base {
	border-top: solid 5vh #333;
	border-right: solid 5vw #444;
}

.plx-serviceframe > .plx-layer_subfore > .h1 {
	padding: 0.2em;
	background-color: rgba(60,60,60,0.7);
	box-shadow: 0 0 25px 5px rgba(60,60,60);
}

.servicetext {
	position: absolute;
	top: 50%;
	width: 60vw;
	font-size: 110%;
	background-color: rgba(60,60,60,0.7);
	box-shadow: 0 0 25px 5px rgba(60,60,60);
}

.servicetext p {
	padding: 0.5em;
}

.servicetext strong {
	color: #cdffbb;
}

.plx-serviceframe:nth-child(odd) .plx-layer_fore > .servicetext {
	left: 10%;
	text-align: left;
}

.plx-serviceframe:nth-child(even) > .plx-layer_fore > .servicetext {
	right: 10%;
	text-align: right;
}

.plx-footer .plx-layer_base {
	height: max(110vh, 825px);
	border-top: solid 5vh #333;
	padding-top: 5vh;
}

.plx-footer .plx-layer_fore {
	padding-top: 5vh;
}

.s5b1 {
	background-color: gray;
}

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

@media screen and (min-width: 769px) {
	
	.plx-serviceframe > .plx-layer_base {
		width: 80%;
		left: 10%
	}

	.plx-serviceframe:nth-child(odd) > .plx-layer_base {
		border-right: solid 5vw rgba(0,0,0,0);
	}
	
	.plx-serviceframe:nth-child(even) > .plx-layer_base {
		border-left: solid 5vw rgba(0,0,0,0);
	}

.plx-serviceframe:nth-child(odd) .plx-layer_fore > .servicetext {
	left: 17.5%;
}

.plx-serviceframe:nth-child(even) > .plx-layer_fore > .servicetext {
	right: 17.5%;
}
	
	.servicetext {
		width: 50vw;
	}
	
	.plx-services2 {
		background-image: linear-gradient(to bottom, rgba(30,30,30,1.0), rgba(30,30,30,0.9));
	}
	
	.plx-services3 {
		background-image: linear-gradient(to bottom, rgba(30,30,30,0.9), rgba(30,30,30,0.8));
	}
	
	.plx-services4 {
		background-image: linear-gradient(to bottom, rgba(30,30,30,0.8), rgba(30,30,30,0.7));
	}
	
	.plx-services5 {
		background-image: linear-gradient(to bottom, rgba(30,30,30,0.7), rgba(30,30,30,0.6));
	}
	
	.plx-services6 {
		background-image: linear-gradient(to bottom, rgba(30,30,30,0.6), rgba(30,30,30,0.5));
	}
	
	.plx-services7 {
		background-image: linear-gradient(to bottom, rgba(30,30,30,0.5), rgba(30,30,30,0.4));
	}
	
	.plx-services8 {
		background-image: linear-gradient(to bottom, rgba(30,30,30,0.4), rgba(30,30,30,0.3));
	}
	
	.plx-services9 {
		background-image: linear-gradient(to bottom, rgba(30,30,30,0.3), rgba(30,30,30,0.2));
	}
	
	.plx-services10 {
		background-image: linear-gradient(to bottom, rgba(30,30,30,0.2), rgba(30,30,30,0.1));
	}
	
	.plx-services11 {
		background-image: linear-gradient(to bottom, rgba(30,30,30,0.1), rgba(30,30,30,0));
	}
	
}