/*Style additions for index.html

Parallax adjustments:

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

/*Menu active link adjustment*/

.menu1 a:first-child {
	background-color: #5E7F2D;/*#82b440;*/
}

.hero .h1 {
	margin-bottom: 0;
}

.hero .h2 {
	padding-top: 0;
	border: none;
}

.herobuttoncontainer {
	max-width: 330px;
	margin: auto;
	padding-top: 1em;
	border-top: solid 5px green;
}

.herobuttoncontainer a {
	box-shadow: 0 4px 25px -1px green;
}

.herobuttonleft {
	float: left;
	margin-right: auto;
	background-color: rgba(130, 180, 64, 0.5);
}

.herobuttonright {
	float: right;
	margin-left: auto;
	background-color: rgba(128, 128, 128, 0.5);
	border-color: gray;
}

.herobuttonleft:hover {
	background-color: #445e21;
}

.herobuttonright:hover {
	background-color: #606060;
}

.plx-index1 .plx-layer_base {
	background-color: gray;
}

/*The following carousel settings should arguably go in carousel.css*/
.carousel figcaption {
	position: absolute;
	bottom: 0;
	margin: 0.5em;
}

.carousel-image {/*Responsive dimensions are in responsive.css:381*/
	height: clamp(450px, 60vh, 100vw);/*Similar to dimensions in carousel.css:88*/
	width: 64vw;/*Same as dimensions in carousel.css:88*/
	object-fit: cover;
}

.slidercontainer {
	margin-top: max(95vh, 713px);/*px=7.5*vh*/
	padding: max(3.5vh, 26px) 1em;/*px=7.5*vh*/
	-webkit-transform: translate(0, -100%);
	transform: translate(0, -100%);
	background: #484848;
}

.slidertext {
	float: left;
	width: 30.5vw;
	padding: 0 1.4% 0 0;
}

.slidertext .h1 {
	margin-bottom: 0.5em;
}

.sliderlinks {
	text-align: center;
	margin-top: 0.75em;
}

.sliderlinks img {
  display: inline-block;
}

.carousel {
	position: absolute;
	left: 100%;
	-webkit-transform: translate(-100%);
	transform: translate(-100%);
}

.threecolumn {
	display: flex;
	width: 90vw;
	justify-content: center;
	transition: height 0.5s;
}

.threecolumn section {
	width: 100%;
}

.threecolumn > section {
	margin: 1vw;
}

.threecolumn section img {
	
}

.threecolumn section .h2 {
	color: #d8d8d8;
	font-weight: bold;
}

.threecolumn * .fa {
	font-size: 200%;
	display: flex;
	justify-content: center;
}

.threecolumn * .fa-chevron-down {
	margin-top: 15px;
	border-top: solid;
	border-top-color: #666666;
	border-top-width: 2px;
	transform: translate(0, 0.5em);
}

.threecolumn * .fa-chevron-up {
	border-top: solid;
	border-top-color: #666666;
	border-top-width: 2px;
}

.servicescontainer {
	width: 90vw;
	text-align: center;
	top: max(80vh, 600px);/*px=7.5*vh*/
	-webkit-transform: translate(-50%, -100%);
	transform: translate(-50%, -100%);
}

.servicescontainer .h1 {
	filter: drop-shadow(0 0 0.75rem #003B00);
}

.services section {
	padding: 15px;
	background-color: rgb(60,60,60);
	border-left: solid;
	border-left-color: rgb(100,100,100);
	border-left-width:5px;
}

.services section a {
	margin-top: 0.75em;
}

.sc-odd-even{
	display: flex;
	flex-direction: column;
	font-size: 100%;
}

.sc-odd-even > div{
	margin: 10px 0;
}

.sc-odd-even > div > img{
	width: 30vw;
	padding: 10px;
	margin: 0;
}

.sc-odd div:nth-child(odd){
	text-align: left;
}

.sc-odd div:nth-child(odd) img{
	float: left;
}

.sc-even div:nth-child(even){
	text-align: right;
	border-left: none;
	border-right: solid;
   border-right-color: rgb(100,100,100);
   border-right-width:5px
}

.sc-even div:nth-child(even) img{
	float: right;
}

.aboutcontainer {
	width: 80vw;
	padding: 15px;
	background-color: #444444;
	border-color: #666666;
	border-width: 8px;
	border-style: solid;
}

.aboutcontainer .h1 {
	text-align: center;
	margin-bottom: 0.5em
}

.aboutcontainer p {
	margin: 0 0 15px 0;
	text-align: left;
}

.aboutcontainer a {
	float: right;
	padding-left: 12px;
	padding-right: 12px;
}

.aboutcontainer img {
	float: left;
	width: 30%;
	margin: 0 15px 0 0;
}

.whyuscontainer {
	text-align: center;
	left: 50%;
	top: min(-9vh, -68px);/*px=7.5*vh*/
	-webkit-transform: translate(-50%, -100%);
	transform: translate(-50%, -100%);
}

.whyuscontainer .h1 {
	filter: drop-shadow(0 0 0.75rem #003B00);
}

.whyuscolumn {
	height: 150px;
	background-color: rgb(60,60,60);
	border-left: solid;
	border-left-color: rgb(100,100,100);
	border-left-width:5px;
}

.whyuscolumn * {
	margin: 0.9vw;
}

.whyuscolumn a {
	margin: 0;
}

.whyuscolumn .fa-check {
	display: flex;
	justify-content: center;
	color: lime;
}

.expandablewhyus {
	margin-left: -5px;
	margin-right: 0;
	margin-top: -2em;
	background-color: rgb(60,60,60);
	border-left: solid;
	border-left-color: rgb(100,100,100);
	border-left-width:5px;
}

.whyuscolumn .expandablewhyus {
	transition: transform 0.5s 0.25s;
	transform: scaleY(0);
	transform-origin: top;
}

.whyuscolumn:hover .expandablewhyus {
	transition: transform 1s;
	transform: scaleY(1);
	transform-origin: top;
}

.whyuscolumn:focus .expandablewhyus {
	transition: transform 1s;
	transform: scaleY(1);
	transform-origin: top;
}

.reviewscontainer {
	white-space: nowrap;
}

.reviewscontainer .h1:first-child {
	margin-bottom: 1em;
}

.reviewscontainer .h3 {
	margin-bottom: 10px;
}

.reviewscontainer i {
	margin-bottom: 0.75em;
}

.goldstar {
	color: #fbbc04;/*Alternative colour to try: #E4B248*/
}

.plx-index1 .plx-layer_fore {
	height: 0;
	top: min(-50vh, -375px);/*px=7.5*vh*/
}

.plx-index1 .plx-layer_superfore {
	top: max(135vh, 1013px);/*px=7.5*vh*/
	height: 0;
}

.plx-index3 {
	height: max(40vh, 300px) !important;/*px=7.5*vh*/
}

.plx-index3 .i3b2 {
	background-color: gray;
}

.plx-index3 .i3b1 {
	background-color: #484848;
	position: absolute;
	height: max(30vh, 225px);/*px=7.5*vh*/
	width: 100%;
	left: 50%;
	-webkit-transform: translate(-50%, -100%);
	transform: translate(-50%, -100%);
}

.plx-index3 .plx-layer_fore {
	height: 0;
	top: min(-15vh, -113px);/*px=7.5*vh*/
}

.plx-index4 .i4b1 {
	background-color: #484848;
	position: absolute;
	height: max(16vh, 120px);/*px=7.5*vh*/
	width: 100%;
	top: min(-42vh, -315px);/*px=7.5*vh*/
}

.localpagelinks {
	margin-top: 0.5em;
}

.localpagelinks * {
	color: white;
	text-decoration: none;
	white-space: nowrap;
}

.localpagelinks *:not(:last-child):after {
	content: " • ";
}

.mapcontainer .h1 {
		margin-bottom: 0.15em;
}

.mapcontainer {
	width: 80vw;
	padding: 15px;
	margin-top: -32px;
	background-color: #82b440;
}

.mapcontainer .h1 {
	margin-bottom: 0.5em;
}

.map {
	height: max(58.5vh, 439px);/*px=7.5*vh*/
	width: 100%;
	border-style: solid;
	border-color: #c0c0c0;
	border-width: 10px;
}

@media screen and (max-width: 600px) {
	
	.map {
		height: max(48vh, 360px);
	}
	
}

.plx-footer .i5b1 {
	background-color: gray;
}

.plx-footer .i5b2 {
	top: min(-50vh, -375px);/*px=7.5*vh*/
	height: 0;
}

.plx-footer .plx-layer_fore {
	top: min(-50vh, -375px);/*px=7.5*vh*/
	height: 0;
}

@media screen and (max-width: 768px) {
	
	.services{
		/*display: flex;*/
		font-size: 100%;
		flex-direction: column;
	}
	
	.services section {
		text-align: left;
	}
	
	.threecolumn section {
		margin-left: 0;
		margin-right: 0;
	}
	
	.services section a {
		float: right;
	}
	
	.servicescontainer {
		top: max(125vh, 938px);/*px=7.5*vh*/
	}
	
	.whyus {
		font-size: 100%;
		flex-direction: column;
	}
	
	.whyuscolumn, .expandablewhyus {
		width: 100% !important;
	}
	
	.plx-index3 .plx-layer_fore {
		top: min(-60vh, -450px);
	}
	
	.plx-index2 {
		height: max(144vh, 1080px) !important;
	}
	
	.plx-index2 .plx-layer_background {
		height: max(80vh, 600px);
	}
	
	.plx-index3 .i3b1 {
		height: max(76vh, 570px);
	}
}

@media screen and (max-width: 900px) and (min-width: 769px) {
	
	.whyuscolumn {
		height: 175px;
	}
	
	.whyuscolumn h2 {
		height: 2em;
	}
	
}