/*Style additions for about.html

Parallax adjustments:

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

@import "style.css";

/*Menu active link adjustment*/

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


.plx-viewport {
	overflow: hidden;
	background-color: #111;
}

.hero > h2 > a {
	color: #5E7F2D
}

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

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

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

.aboutsummary ul {
	list-style: none;
	padding: 0.5em;
	padding-top: 1em;
	margin-bottom: 1em;
}

.aboutsummary ul > li {
	display: inline-block;
	margin: 0.7em;
}

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

.plx-aboutframe {
	background-color: #000000;
}

.plx-aboutframe > .plx-layer_base:first-child .bg {
	overflow: hidden;
	height: max(90vh, 675px);
}

.plx-layer_subfore {
	padding: 5vh;
}

.plx-aboutframe > .plx-layer_base:first-child {
	position: sticky;
	height: 0;
	top: 0;
}

.plx-aboutframe > .plx-layer_base:first-child {
	height: max(100vh, 750px);
}

.plx-aboutframe > .plx-layer_base:nth-child(2) {
	background-image: linear-gradient(to top, rgba(30,30,30,1.0), rgba(30,30,30,0));
}

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

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

.plx-aboutframe > .plx-layer_subfore {
	position: absolute;
	top: 0;
}

.plx-aboutframe > .plx-layer_subfore > .h1 {
	position: sticky;
	top: 1em;
	margin-left: 50%;
	width: fit-content;
	padding: 0.2em;
	text-align: center;
	transform: translate(-50%);
	background-color: rgba(60,60,60,0.7);
	box-shadow: 0 0 25px 5px rgba(60,60,60);
}

.plx-aboutframe .plx-layer_fore .fa-chevron-down {
	top: max(60vh, 450px);
	font-size: 200%;
	color: #cdffbb;
}

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

.abouttext p {
	padding: 0.5em;
}

.abouttext b {
	color: #cdffbb;
}

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

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

.plx-about4 > .plx-layer_fore > .abouttext {
	top: 30%;
	text-align: left !important;
	background-color: rgba(90,90,90,0.9);
}

.abouttext summary {
	padding: 0.3em;
	background-color: rgb(100,100,100);
}

.abouttext details:first-child summary {
	margin-top: 0.5em;
}

.abouttext details {
	margin-bottom: 0.5em;
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.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 aboutframe narrower on desktop*/

@media screen and (min-width: 769px) {
	
	.plx-aboutframe > .plx-layer_base {
		width: 80%;
		left: 10%
	}
	
	.plx-aboutframe:nth-child(odd) .plx-layer_base:nth-child(2) {
		width: calc(80% - 5vw);
		margin-right: 5vw;
	}
	
	.plx-aboutframe:nth-child(even) .plx-layer_base:nth-child(2) {
		width: calc(80% - 5vw);
		margin-left: 5vw;
	}

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

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

.plx-aboutframe:nth-child(even) > .plx-layer_fore > .abouttext {
	right: 17.5%;
}
	
	.abouttext {
		width: 50vw;
	}
	
}