/*
// ------------------------------------
// App-specific settings
// ------------------------------------
*/

:root
{
	--main-color:transparent;
	--off-white-color:rgb(240,236,228);
	
	--bright-green:rgb(1,215,161);
	--dark-green:rgb(0,100,110);
	
	--bright-blue:rgb(0,191,221);
	--dark-blue:rgb(3,81,127);
	
	--bright-purple:rgb(171,50,191);
	--dark-purple:rgb(80,0,121);
}

/* This style is used by the AcgApp.isEnanced() method to determine if we are using the enhanced stylesheet */
body:after
{
	content:'default';
	display:none;
}

#cssCheck
{
	font-weight:800;
}

.outerArea
{
	jbackground-color:rgb(242,242,242);
	padding:0em 0;
	width:100%;
	/* Had to remove overflow-x because it prevents "sticky" position from working */
	joverflow-x:hidden;	/* This is required to fix "position:fixed" issues on iOS */
	joverflow:hidden;	/* Including overflow hidden will break the ability to use "sticky" content within */

	/* height:100%; */
	jmin-height:100%;	/* Moved to .acg class in global. We want to ensure an app covers browser height, but not necessarily an individual "outerArea" */
	jtext-align:center;
	jcolor:#374850;
	jz-index:1;
}

.innerArea
{
	jbackground-color:rgb(255,255,255);

	jdisplay:inline-block;	/* caused a scrollbar to appear even though content fit */
	position:relative;
	max-width:1240px;
	width:100%;
	jmin-height:100%;	/* Moved to .acg class in global. We want to ensure an app covers browser height, but not necessarily an individual "innerArea" */
	
	margin:auto;
	padding:0 20px;
	joverflow:hidden;
}

.noScript
{
	padding-top:1em;
	width:960px;
	margin:auto;
	color:#000000;	
}

#preloadContent
{
	padding:2em;
	text-align:center;
}

#scriptContent
{
	jbackground-color:#ffffff;
	jcolor:#444444;
}

.acgTitle
{
	font-size:40px;
	font-weight:bold;
	padding-right:1em;
	margin-bottom:40px;
	line-height:45px;
}
.acgRwdNarrow .acgTitle
{
	font-size:32px;
	line-height:40px;
	margin-bottom:24px;
}

.acgSectionLast
{
	display:flex;
	justify-content:center;
}

.acgSection
{
	margin-top:140px;
	margin-bottom:140px;
}

.acgSection:first-child
{
	margin-top:80px;
}

.acgRwdNarrow .acgSection
{
	margin-top:100px;
	margin-bottom:100px;
}

.acgSectionCopyBlock
{
	margin-top:56px;
	margin-bottom:56px;
}
.acgRwdNarrow .acgSectionCopyBlock
{
	margin-top:42px;
	margin-bottom:42px;
}

.acgSection:not(:first-child)
{
	jmargin-top:2rem;
}

.acgSectionTitle
{
	jpadding:1rem 0;	/* do we need this? */
	text-align:center;
	font-size:36px;
	font-weight:bold;
	margin-bottom:40px;
}

.acgRwdNarrow .acgSectionTitle
{
	font-size:28px;
}

.acgSectionCopy
{
	text-align:left;
	max-width:700px;
	padding-right:2rem;
	jmargin-top:40px;
	margin-bottom:40px;
}

.acgSectionCopy:not(:last-child)
{
	margin-bottom:40px;
}

.acgRwdNarrow .acgSectionCopy
{
	padding-right:0;
}

.acgSectionCopyReference
{
	font-style:italic;
	font-size:16px;
	text-align:center;
}

.acgSectionImage
{
	width:100%;
}

.acgRwdWide .acgSectionImage
{
	jmax-width:522px;
}

.acgChartGroup
{
	display:flex;
	justify-content:space-evenly;
	flex-wrap:wrap;
	margin-top:35px;
	row-gap:48px;
}

.acgChartGroupItem
{
	jwidth:33%;
	flex-basis:calc(33% - 10px);
}
.acgChartGroupItem:not(:last-child)
{
	jmargin-bottom:4px;
}

.acgChartBlock
{
	width:250px;
	margin:auto;
}

/* sets size of chart */
.acgChartParent
{
	width:186px;
	height:186px;
	margin:auto;
}

.acgChartLabel
{
	font-size:16px;
	margin-top:14px;
	jmargin-bottom:44px;
	text-align:center;
}

.acgAnimatedText
{
	jdisplay:none;
	position:absolute;
	font-size:2.47em;
	jline-height:1.1;
}

.acgNavMenu
{
	display:flex;
}
.acgNavMenuItem
{
	padding:0 1rem;
}
.acgDigitalThreadPieceLabel
{
	font-weight:bold;
}
.acgPieChartText
{
	line-height:1.1;
	max-width:180px;
}

.acgRwdWide .acgBarChartArea
{
	display:flex;
	justify-content:center;
	margin-top:56px;
}

.acgAccordionContainer
{
	padding:0 40px;
}

.acgRwdNarrow .acgAccordionContainer
{
	padding:0 20px;
}
.acgHeroArea
{
	margin-top:200px;
}
.acgBottomHeroArea
{
	margin-top:160px;
	margin-bottom:160px;
}
.acgRwdNarrow .acgHeroArea
{
	margin-top:108px;
}
.acgRwdWide #designToolQualities
{
	margin-right:100px;
}
.acgOnDemandWebinar
{
	text-transform:uppercase;
	font-size:24px;
}