/* --- product-explainer --- */
.prod-explain {
	overflow:hidden;
}
.product-explainer {
	background-color:var(--bglightgrey);
	width:100%;
}
.product-explainer header {
	padding:1rem;
}
.tabs {
	width:100%;
	display:flex;
	margin:0.5rem 0;
	align-items:stretch;
	justify-content:flex-start;
	flex-wrap:nowrap;
	overflow:hidden;
	position:relative;
}
.tab-pages {
	background-color:var(--bg-dark);
	color:white;
	flex:0 0 50%;
	width:50%;
	height: 100%;
	position:relative;
	display: flex;
	flex-wrap:nowrap;
	align-items: stretch;
	justify-content: flex-start;
	overflow-x: hidden;
	scroll-snap-type: x mandatory;
	scroll-snap-stop: always;
	scrollbar-width: thin;
}
.tab-page {
	flex:0 0 100%;
	scroll-snap-align:center;
	font-size:var(--szSmaller);
	display:flex;
	flex-direction:column;
}
.tab-image {
	flex:0 1 50%;
	padding:1.5rem 1rem 1.5rem 1rem;
	border-bottom:1px solid #888;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	position:relative;
}
.tab-image img {
	display:block;
	max-height:150px;
	width:auto;
}
.tab-text {
	flex:0 0 auto;
	padding:1.5rem 1rem 1.5rem 1rem;
	line-height:1.4;
	min-height:193px;
}
.tab-page.active {
}
.tab-labels {
	flex:0 0 50%;
	display:flex;
	flex-direction:column;
	align-items:stretch;
}
.tab-label {
	flex:1 1 auto;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	padding:0.5rem;
	border:1px solid #ddd;
	padding:1rem;
	font-size:var(--szMediumLarge);
	font-weight:normal;
	color:var(--mediumgrey);
	background-color:var(--lightgrey);
	position:relative;
	user-select:none;
}
.tab-label:hover {
}
.tab-label.active {
	font-weight:bold;
	background-color:white;
}
.tab-label.active:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-right-color: white;
	border-width: 12px;
	margin-top: -12px;
}
.product-explainer-standalone {
	font-size:var(--szNormal);
}
.product-explainer-standalone .col-md-8 {
	flex:1 1 100%;
}
.layer-content .product-explainer-standalone p,
.product-explainer-standalone p {
	font-size:inherit;
}

/* --- end: product-explainer --- */