/* Shared layout for the What Is Duelling Pianos and What Is Piano Entertainment guides. */
	#mainContainer .contentContainer {max-width:800px;padding:40px 20px 60px 20px;}
	
	#mainContainer h2 {margin-top:20px;margin-bottom:1rem;max-width:28ch;}
	#faq.faqContainer h2 {margin-bottom:2rem;}
	#faq.faqContainer p {margin-left:10px}
	#mainContainer h3 {margin-top:1.5rem;margin-bottom:0.75rem;}
	#mainContainer p,#mainContainer li {max-width:70ch;line-height:1.6;}
	#mainContainer ul {margin:1rem 0 2rem 1.25rem;}
	#mainContainer li {margin-bottom:0.5rem;}
	#mainContainer .lightContainer hr {margin:4rem 0;border:none;border-top:1px solid rgba(0,0,0,0.25);}
	#mainContainer .darkContainer hr {margin:4rem 0;border:none;border-top:1px solid rgba(255,255,255,0.25);}
   .darkContainer .contentContainer {padding-top:80px;padding-bottom:80px;}
   .lightContainer .contentContainer {padding-top:80px;padding-bottom:80px;}

   .faq-section-title {margin-bottom:4rem;}
	#mainContainer ul {list-style: disc; padding-left: 1.25rem; margin: 1rem 0 2rem 0;}
	#mainContainer li {list-style: disc; list-style-position: outside; margin: 0 0 0.5rem 0;}
	#mainContainer h1,
	#mainContainer h2,
	#mainContainer h3,
	#mainContainer p {margin-left:0;margin-right:auto;}
	header h1,header h2,header p {margin:auto;min-width:100%}
	.heroClip {display:none;}
	.contentContainer h2 {text-align:left;}
	.content-image img{max-width:100%;height:auto;display:block;border-radius:10px;box-shadow:-20px 20px 40px rgba(0, 0, 0, 0.633);transition:transform .35s ease;}
	.content-image {width:100%;margin:0;padding:0;position:relative}

	
	.dark-light {background:linear-gradient(180deg,var(--white) 50%,var(--black)50%);margin-top:-20px;margin-bottom:-20px}
	figcaption {font-family:'bold';font-size:1rem;text-align:center;color:var(--white);width:80%;border-radius:5px;position:relative;padding: 1.6rem;margin:auto}
	.heroClip, .hero-includes {display:none;}
	.intro-text-div {width:100%;max-width:760px;text-align:left;margin:auto}
	.noHero .intro-text-div p {min-width:0;max-width:70ch;margin-left:0;margin-right:0;padding-inline:0!important}
	#inlineVideoSection .intro-text-div {max-width:100%;text-align:left;margin:0;width:100%;padding:0}
	#inlineVideoSection .intro-text-div p {margin-left:0!important;padding-left:0!important;}
	#inlineVideoSection {padding:0!important}
	
	 .inline-video-card {max-width:100%}
	p.intro-lead {display:block;margin-bottom:18px;}
	.darkPad {padding:40px}

	.darkPad {display:none}
	.content-image a{display:block;position:relative;}
	.content-image a::after{content:"";position:absolute;top:50%;left:50%;width:70px;height:70px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,0.6);box-shadow:0 10px 25px rgba(0,0,0,0.4);}
	.content-image a::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent white;z-index:2;}
	.content-image a:hover img{transform:scale(1.03);transition:transform .35s ease;}
	.content-image a:hover::after{background:rgba(0,0,0,0.8);}
	.heroImage-new{height:calc((100svh + 100vw) / 3);}
	.darkContainer .ctaPreline{color:var(--white)!important;}
	
	.ctaPadTop {padding-top:20px;display:block}
a.white {
	  text-decoration: underline;
	  text-decoration-color: rgba(255,255,255,0.6);
	  text-underline-offset: 3px;
	  text-decoration-thickness: 1px;
	  transition: text-decoration-color 0.2s ease;
	}
	a.white:hover {
	  text-decoration-color: var(--white);
	}

	h2.ch2 {text-align:center;justify-self: center}
	.heroSub {line-height:1.25em!important;margin-top:0.5em}
	h3, h2, .goldSub {max-width:100%!important;width:100%;font-weight:100!important}
	
	

/* Shared guide-page presentation formerly repeated inline on both pages. */
h1 {color:var(--h2);font-size:clamp(2.5rem,6vw,4.2rem)}
h1 span:last-child {color:var(--white);display:block}
h1 span:first-child::before {content:"🎹";margin-right:1rem;display:inline-block;transform:rotate(-5deg) translateY(-.05em);font-size:.75em}
h1 span:first-child::after {content:"🎹";display:inline-block;font-size:.75em;margin-left:1rem;transform:rotate(5deg) translateY(-.05em)}
.ctaBlock {display:block;width:100%;padding:30px 10px;text-align:left;margin-top:40px}
.ctaBlock.center {text-align:center}
.ctaBlock p,.ctaBlock {font-family:'heading';font-size:1.2em;padding:0;font-weight:400!important}
.ctaBlock p {margin:0}
.ctaBlock .ctaGreen2 {min-width:340px;margin-top:10px}
.lightContainer h2 {color:var(--black);padding-left:0;margin-left:0;text-align:left}
.lightContainer h3 {color:var(--h2);padding-left:0;margin-left:0;text-align:left;filter:brightness(.5)}
.darkContainer h2 {color:var(--white);padding-left:0;margin-left:0;text-align:left}
.darkContainer h3,.darkContainer h3 a {color:var(--h2);padding-left:0;margin-left:0;text-align:left}
.heroSub {line-height:1.25em!important;margin-top:.5em}
.contentContainer h3 {font-family:'text'}
#inlineVideoSection h2,#inlineVideoSection h3.goldSub {text-align:left;padding-left:0}
.ctaGreenVariant {color:rgb(38,123,54);outline-color:rgb(38,123,54)}
.lightContainer p,.lightContainer a {color:var(--black)}
.darkContainer p,.darkContainer a {color:var(--white)}
.lightContainer a.ctaGreen2 {color:white}
.lightContainer a.ctaGreenVariant,.darkContainer a.ctaGreenVariant {color:rgb(38,123,54)}
.duoCtaContainer h3.goldSub {text-align:center!important}
section.preFaqCta {margin-bottom:0;padding-bottom:0}
#inlineVideoSection p.center,#inlineVideoSection a.white {max-width:100%;width:100%;text-align:center;margin:auto}
#inlineVideoSection p {margin-bottom:14px}