/*	=============================================================
	Landing Page: eLearning Voice Over
	sgvo_lp_elearning.css
	============================================================= */


/*	__________________________________________________________
	Demo section background                                   */

.sec_demos--lp {
	background
		: url(../assets/parallax/mushishi-mountains-00-set.svg) no-repeat fixed;
	background-color										: #a5c9a4;
	background-size											: cover;
	background-position										: center 0px;
}

.sec_demos--lp h2,
.sec_demos--lp h3 {
	position												: relative;
	z-index													: 5;
}

.sec_demos--lp::after {
	background												: rgba(165,201,164,0.8);
	content													: "";
	display													: block;
	height													: 100%;
	position												: absolute;
		top													: 0;
		left												: 0;
	width													: 100%;
	z-index													: 0;
}


/*	__________________________________________________________
	Card — transparent, vertical stack                        */

.demo-container--lp {
	background												: transparent;
	border													: 6px solid rgba(180,218,212,0.6);
	border-radius											: 12px;
	box-shadow
		: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	display													: flex;
	flex-direction											: column;
	margin													: 0 1em;
	overflow												: hidden;
	position												: relative;
	transition												: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
	z-index													: 5;
}

.demo-container--lp:hover {
	box-shadow
		: 0 14px 28px rgba(0,0,0,0.30), 0 10px 10px rgba(0,0,0,0.28);
}


/*	__________________________________________________________
	Player — top of card                                      */

.demo-container--lp .player-container {
	grid-area												: unset;
	order													: 1;
	padding													: 1em 1em 0.5em;
}


/*	__________________________________________________________
	Pitch — incipit + paragraphs below player                 */

.demo-container--lp .lp-pitch {
	grid-area												: unset;
	order													: 2;
	padding													: 0.5em 1.25em 1.25em;
}

.demo-container--lp .demo-cta {
	display													: none;
}


/*	__________________________________________________________
	Incipit                                                   */

.lp-incipit {
	font-size												: 1.5em;
	margin													: 0.67em 0;
	text-align												: center;
	text-shadow												: 2px 2px 2px #fff;
}


/*	__________________________________________________________
	Pitch paragraphs                                          */

.lp-pitch p {
	font-size												: 115%;
	padding-left											: 0;
	padding-right											: 0;
	text-align												: justify;
	text-shadow												: none;
}


/*	__________________________________________________________
	CTA — outside card, beneath it, clamped & centered       */

.lp-cta-below {
	padding													: 1em 1em 1em;
	position												: relative;
	text-align												: center;
	z-index													: 5;
}

.lp-cta-below a {
	background												: #4b7257;
	border-radius											: 5px;
	box-shadow
		: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	color													: #fff;
	display													: inline-block;
	font-size												: 1.2em;
	max-width												: 320px;
	padding													: 1rem 2rem;
	text-align												: center;
	text-decoration											: none;
	transition												: background 0.3s cubic-bezier(.25,.8,.25,1),
															  box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
	width													: 100%;
}

.lp-cta-below a:hover {
	background												: #36523f;
	border													: 3px outset #ccc;
	box-shadow
		: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	padding													: calc(1rem - 3px) calc(2rem - 3px);
	text-decoration											: none;
}


/*	__________________________________________________________
	Desktop — card constrained to comfortable reading width   */

@media (min-width: 600px) {

	.demo-container--lp {
		margin												: 0 auto;
		max-width											: 680px;
	}

}