/* aspex_sustainability.css */

/*.view-header-sustainability { display: none; }*/

.view-header-sustainability {
	display: block;
	position: relative;
}

.view-header-sustainability.view-header-image .heading {
	position: absolute;
	bottom: 1.2ch;
	left: 1.2ch;
	background: transparent;
	color: #fff;
	font-size: clamp(1.11rem, 1.11rem + 2.1vw, 2.4rem);
	font-weight: 600;
}
.view-header-sustainability .heading {
	padding: 0;
	font-size: clamp(1.11rem, 1.11rem + 3vw, 2.7rem);
	font-weight: 600;
	color: var(--theme-color-3);
	background: transparent;
}




.view-header-image img { width: 100%; }


.section-view-header .view-header-sustainability .heading {
	display: block;
	padding: 0;
	font-size: 2.7rem;
	color: #858789;
	background: transparent;
	text-align: center;
	text-transform: uppercase;
}


.section-preface {
	display: flex;
	flex-flow: row wrap;
	margin-bottom: 3rem;
	padding: 3rem;
	gap: 1.5rem;
	background: url("https://jiecosystem.s3.us-east-1.amazonaws.com/aspex/images/deco/esses_1800x552.jpg");
/*	justify-content: space-between;*/
/*	align-items: flex-start;*/
}
.section-preface p {
	flex: max(30ch, 100%/2 - 3rem);
	font-size: 1.2rem;
	margin-bottom: .9rem;
}


/* ======================== */
/*
*/

.section-sustainability {
	display: flex;
	width: 100%;
	flex-flow: row wrap;
	gap: 1.5rem;
	justify-content: space-between;
	align-items: start;
	margin-bottom: 4.5rem;
	/*	border: 1px solid red;*/
}
.section-sustainability-1 {
	flex-flow: row-reverse wrap;
}

.section-sustainability img {
	width: 100%;
	max-width: 600px;
	margin: auto;
	margin-bottom: .9rem;
}

.section-sustainability .copy-wrapper {
	/*	flex: 1 0 66ch;*/
	/*flex: 1 0 auto;*/ /* ok 'cause the img has a max-width */
	flex: 1 0 calc(450px + 3rem);
	display: flex;
	max-width: 100%;
	flex-flow: row wrap;
}

.copy-wrapper p {
	width: 100%;
	max-width: 69ch;
	max-width: 75ch;
	/*margin: auto;*/
	font-size: 1.2rem;
	line-height: 1.8;
	text-align: justify;
	/*	border: 1px solid lime;*/
}



/*
.
.
.
.
.
.
*/

/*.sustainability-summary-comment { flex: max(60ch, 100%/2 - 3rem); }*/
.sustainability-summary-comment p {
	font-size: 1.2rem;
	margin-bottom: .9rem;
}

/*
redbar-h01-552x141.gif
redbar-h02-552x141.gif
redbar-h03-552x141.gif
redbar-h04-552x141.gif
redbar-v01-141x552.gif
redbar-v02-141x552.gif
redbar-v03-141x552.gif
redbar-v04-141x552.gif

*/

/*
	e.g., span.some-class:nth-of-type() is problematic because the :nth-of-type() selectors select according to the *element*
	regardless of whether it has the class ...

	e.g., given:
		<span>span 0 no-class</span>
		<span class="ping">span 1 ping</span>
		<span class="ping">span 2 ping</span>
		<span class="ping">span 3 ping</span>

	and:

	span {
		display: block;
		width: 100%;
		border: 1px dotted #ccc;
	}

	.ping:nth-of-type(odd) { color: red; }
	.ping:nth-of-type(even) { color: blue; }

	... despite the selectors seemingly targeting only span.ping,
	the 1st & 3rd span.ping els are deemed 'even' and are therefore displayed blue,
	while the 2nd span.ping is considered 'odd' and therefore displayed red;

*/

.section-sustainability-1 img {
	padding: 2.2rem 1.2rem 0 0;
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/aspex/images/deco/redbar-h02-552x141.gif") right 0 / 60% no-repeat;
}
.section-sustainability-2 img {
	padding: 0 0 1.2rem 1.2rem;
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/aspex/images/deco/redbar-h04-552x141.gif") 0% 100% / 60% no-repeat;
}


/* ============ SECTION 3 ============ */
.section-sustainability-3 {

}
.section-sustainability-3 .heading {
	display: block;
	width: 100%;
	padding: 0;
	font-size: 1.8rem;
	color: #657858;
	background: transparent;
	text-align: center;
	text-transform: uppercase;
}

.section-sustainability-3 ul {
	display: flex;
	width: 100%;
	flex-flow: column nowrap;
	gap: 1.5rem 0;
}
.section-sustainability-3 li {
	flex: 1 0 auto;
/*	padding: .9rem;*/
	text-align: center;
	font-size: 1.35rem;
	font-weight: 600;
	text-transform: uppercase;
}

@media screen and (min-width: 135ch) {
	.section-sustainability-3 ul { flex-flow: row nowrap; }
	.section-sustainability-3 li:not(:last-of-type) { border-right: 2px solid red; }
}




/* ============ SECTION 3 ============ */
.section-sustainability-4 {
	min-height: 24ch;
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/aspex/images/deco/sustainability-chalkboard-1800x939.jpg") 0 75% no-repeat;
	/*	border: 2px solid red;*/
}

.section-sustainability-4 .heading {
	width: 100%;
	max-width: 93%;
	margin: 1.5ch auto;
	padding: 1.8ch 9vw 4.5ch 9vw;
	text-transform: uppercase;
	text-align: center;
	background: transparent;
	color: #fff;
	font-size: clamp(.9rem, .9rem + 1.2vw, 1.8rem);
	border: 3px solid #fff;
}




section + hr {
	display: block;
	width: 66%;
	height: 1px;
	color: transparent;
	border-top: 1px solid #f0f0f0;
	margin: 6rem auto;
}

.section-sustainability.section-deco img {
	max-width: 100%;
}
.sustainability-3-details {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	text-align: center;
	/* padding: 10px; */
	justify-content: space-evenly;
	align-items: center;
}

.sustainability-item-details {
	margin-left: 20px;
}

	.sustainability-item-details img {
		height: 90px;
		width: 111px;
	}

	.sustainability-item-details h2 {
		text-transform: uppercase;
	}

.section-sustainability-1 img {
	margin-top: -40px;
}

.sustainability-item-details {
	padding: 25px;
}
.shipping-label {
	width: 100%;
	border-right: 2px solid red;
	padding-right: 20px;
}
@media only screen and (max-width: 1250px) {
	.section-sustainability-1 img {
		margin-top: 0px;
		padding: 1.2rem 1.2rem 0 0;
	}
}