/*<meta />*/

@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);

/* Styles used for the headers and footers for each page. */
/* To ensure compatibility with IE, this stylesheet uses actual font family names and hex values rather than font and color variables */
/* Eliminate link styling so that other stylesheets don't override the link attributes in the header/footer. */
/* Importing these fonts to avoid using variables. */

@font-face 
{
	font-family: SourceSansProRegular;
	src: url('../Fonts/SourceSansPro-Regular.ttf') format('truetype');
}

@font-face 
{
	font-family: SourceSansProBold;
	src: url('../Fonts/SourceSansPro-Bold.ttf') format('truetype');
}

@font-face 
{
	font-family: SourceSansProSemiBold;
	src: url('../Fonts/SourceSansPro-SemiBold.ttf') format('truetype');
}

@font-face 
{
	font-family: 'MontserratBold';
	src: url('../Fonts/Montserrat-Bold.ttf') format('truetype');
}

@font-face 
{
	font-family: 'MontserratSemiBold';
	src: url('../Fonts/Montserrat-SemiBold.ttf') format('truetype');
}

/* Top container for links. The structure is defined in the master page. The styles use absolute positioning to 
move the link container to the top of the screen. Needs to be adjusted if the navigation banner 
elements change in height. */

div.TopLinks
{
	max-width: 78rem;
	margin: auto;
	z-index: 6;
	padding: 0;
	background-color: var(--Gray-Medium);
	/*Exectuive Blue*/
	mc-hidden: hidden;
	mc-disable-glossary-terms: true;
}

div.TopLinksContainer
{
	width: 100%;
	min-width: 812px;
	height: 68px;
	background-color: var(--Gray-Medium);
	/*Exectuive Blue*/
	/* box-shadow: inset 0 1px 8px -3px #879596; */
	/* position: absolute;
	top: 0;
	left: 0; */
	z-index: 5;
	padding: 0;
	mc-hidden: hidden;
	mc-disable-glossary-terms: true;
}

/* Logo at the top left of the screen */

div.TopInEightLogo
{
	display: inline-block;
	margin: 1.2rem -10rem 0 1.6rem;
	mc-hidden: hidden;
	mc-disable-glossary-terms: true;
}

div.TopInEightLogo img
{
	max-width: 32%;
	mc-hidden: hidden;
}

span.KLheader
{
	font-family: var(--Font-Display);
	font-size: 1.2rem;
	color: var(--Orange);
	letter-spacing: 0.14rem;
}

a.LinkHeader
{
	padding-left: inherit;
	text-decoration: inherit;
	vertical-align: 0.4rem;
}

span.pipe
{
	padding-left: 8px;
	padding-right: 8px;
	vertical-align: super;
}

/* Buttons for training and InEightU */

div.TopButtonWhite
{
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	float: right;
	height: 18px;
	line-height: 1.5;
	margin: 24px 1% 0 1%;
	color: #ffffff;
	font-weight: 700 !important;
	font-family: SweetSquarePro-Light, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	letter-spacing: 3px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	mc-hidden: hidden;
	mc-disable-glossary-terms: true;
}

div.TopButtonWhite a
{
	color: white;
	text-decoration: none;
	font-size: inherit;
	font-family: SweetSquarePro-Light, sans-serif;
	font-weight: inherit;
	font-style: inherit;
	display: inline-block;
}

div.TopButtonWhite a:hover
{
	border-bottom: 1px solid #f78e1e;
}

div.TopButtonGreen a:hover
{
	cursor: pointer;
	color: #ffffff;
	mc-hidden: hidden;
	border-bottom: 1px solid #ffffff;
}

/* Button for contacting support. */

div.TopButtonGreen
{
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	float: right;
	padding: 0 10px 0 10px;
	height: 60px;
	line-height: 18px;
	margin-top: 8px;
	background-color: #839a38;
	min-width: 160px;
	border-radius: 0;
	color: #ffffff;
	font-family: 'SourceSansProBold', 'MontserratBold', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin-right: 18px;
	margin-left: 6px;
	letter-spacing: 1px;
	mc-hidden: hidden;
	mc-disable-glossary-terms: true;
}

div.TopButtonGreen a
{
	padding-top: 16px;
	padding-bottom: 5px;
	display: inline-block;
	color: #ffffff;
	text-decoration: none;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
}

/* Footer at the bottom of the page. */

div.FooterContainer
{
	width: 100%;
	height: auto;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #4e595a;
	border-top: 13px solid #849b40;
	z-index: 1002;
	/* position: absolute;
	bottom: 0;
	left: 0; */
	transition: all 0.5s;
	mc-hidden: hidden;
	mc-disable-glossary-terms: true;
}

div.Footer
{
	font-family: SourceSansProSemiBold, Calibri, serif;
	max-width: 82.5em;
	margin: 0 auto;
	padding: 10px;
	margin-top: 10px;
	text-align: center;
	color: #f8f8f8;
	/* display: none;
	transition: all 0.5s; */
	mc-hidden: hidden;
	mc-disable-glossary-terms: true;
}

/*
div.FooterContainer:hover div.Footer
{
	display: block;
}
*/

div.Footer p
{
	color: #f8f8f8;
	font-family: SourceSansProSemiBold, Calibri, serif;
	font-size: 10pt;
	mc-hidden: hidden;
}

/* Simple footer that appears only if the topic page is printed. */

div.FooterPrint
{
	font-family: SourceSansProSemiBold, Calibri, serif;
	font-size: 16pt;
	color: #000000;
	text-align: center;
	border-top: 2px solid #000000;
	display: none;
	mc-hidden: hidden;
}

/* Main footer responsive div that creates two cells, one flush-left and one flush-right in desktop.
In tablet and mobile modes, they stack on top of each other. */

div.FooterTwoCell
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	mc-hidden: hidden;
}

div.FooterTwoCell::before
{
	content: ' ';
	display: table;
	mc-hidden: hidden;
}

div.FooterTwoCell::after
{
	content: ' ';
	display: table;
	clear: both;
	mc-hidden: hidden;
}

div.FooterTwoCell > div
{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	mc-hidden: hidden;
}

div.FooterTwoCell > div:nth-child(1)
{
	float: left;
	width: 58%;
	margin-left: 0%;
	text-align: left;
	mc-hidden: hidden;
}

div.FooterTwoCell > div:nth-child(2)
{
	float: right;
	width: 38%;
	margin-right: 0%;
	text-align: right;
	mc-hidden: hidden;
}

div.FooterTwoCell > div:nth-child(2) p
{
	font-family: SourceSansProSemiBold, Calibri, serif;
	font-size: 11pt;
	line-height: 13pt;
	margin-top: 6px;
	margin-bottom: 10px;
	text-align: right;
	mc-hidden: hidden;
}

/* Eight-cell responsive div to hold the text links in the left main cell of the footer. */

div.FooterEightCell
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	mc-hidden: hidden;
}

div.FooterEightCell::before
{
	content: ' ';
	display: table;
	mc-hidden: hidden;
}

div.FooterEightCell::after
{
	content: ' ';
	display: table;
	clear: both;
	mc-hidden: hidden;
}

div.FooterEightCell > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	width: 11%;
	font-family: SourceSansProSemiBold, Calibri, serif;
	font-size: 11pt;
	line-height: 13pt;
	text-transform: uppercase;
	letter-spacing: 1px;
	mc-hidden: hidden;
}

div.FooterEightCell > div:nth-child(2)
{
	width: 22.5%;
	mc-hidden: hidden;
}

/* Four-cell responsive div to hold text links and social media buttons in the footer. */

div.FooterFourCell
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	mc-hidden: hidden;
	margin-top: 20px;
}

div.FooterFourCell::before
{
	content: ' ';
	display: table;
	mc-hidden: hidden;
}

div.FooterFourCell::after
{
	content: ' ';
	display: table;
	clear: both;
	mc-hidden: hidden;
}

div.FooterFourCell > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: left;
	font-family: SourceSansProSemiBold, Calibri, serif;
	font-size: 11pt;
	letter-spacing: 1px;
	mc-hidden: hidden;
}

div.FooterFourCell > div:nth-child(1)
{
	width: 45%;
	padding-top: 4px;
	mc-hidden: hidden;
}

div.FooterFourCell > div:nth-child(2),
div.FooterFourCell > div:nth-child(3)
{
	width: 10%;
	padding-top: 4px;
	mc-hidden: hidden;
}

div.FooterFourCell > div:nth-child(4)
{
	width: 35%;
	mc-hidden: hidden;
}

/* Social media button container */

div.MediaButton
{
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background-color: #999999;
	border-radius: 2px;
	height: 30px;
	width: 30px;
	text-align: center;
	display: inline-block;
	padding: 0;
	margin: 0 0 0 10px;
	mc-hidden: hidden;
}

div.MediaButton:hover
{
	background-color: #616364;
}

div.MediaButton img
{
	padding: 4px 0 0 0;
}

div.FooterEightCell > div a,
div.FooterFourCell > div a
{
	text-decoration: none;
	color: #f8f8f8;
	mc-hidden: hidden;
}

/* Containers for the elements on the right-hand side of the footer in desktop mode. */

div.TextContainer
{
	margin-top: 16px;
	float: right;
	clear: both;
	mc-hidden: hidden;
}

div.ContactButton
{
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 156px;
	height: 44px;
	background-color: #f8f8f8;
	border-radius: 2px;
	mc-hidden: hidden;
	color: #4e595a;
	line-height: 44px;
	float: right;
	clear: both;
	font-family: SourceSansProSemiBold, Calibri, serif;
	font-size: 16px;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 2px;
	white-space: nowrap;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	mc-hidden: hidden;
}

div.ContactButton:hover
{
	cursor: pointer;
	background-color: #d9d9d9;
	transition-property: background-color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
	mc-hidden: hidden;
}

/* Intermediate width between desktop and tablet. Coordinate screen width with InEightLayout.css.
The styles here replicate the tablet layout. */

/* 
@media only screen and (max-width: 1275px)
{
	
	div.FooterEightCell > div
	{
		font-size: 12pt;
		line-height: 14pt;
		height: 32pt;
		text-align: center;
		padding: 0 5px 0 5px;
		letter-spacing: 0px;
		mc-hidden: hidden;
	}

	div.FooterEightCell > div:nth-child(1),
	div.FooterEightCell > div:nth-child(5)
	{
		width: 30%;
		mc-hidden: hidden;
	}

	div.FooterEightCell > div:nth-child(3),
	div.FooterEightCell > div:nth-child(4),
	div.FooterEightCell > div:nth-child(7),
	div.FooterEightCell > div:nth-child(8)
	{
		width: 20%;
		mc-hidden: hidden;
	}

	div.FooterEightCell > div:nth-child(2),
	div.FooterEightCell > div:nth-child(6)
	{
		width: 30%;
		mc-hidden: hidden;
	}

	div.FooterFourCell
	{
		margin-top: 0px;
		mc-hidden: hidden;
	}

	div.FooterFourCell > div
	{
		float: left;
		font-size: 12pt;
		color: #f8f8f8;
		mc-hidden: hidden;
		letter-spacing: 0px;
		mc-hidden: hidden;
	}

	div.FooterFourCell > div:nth-child(1)
	{
		width: 70%;
		mc-hidden: hidden;
	}

	div.FooterFourCell > div:nth-child(2),
	div.FooterFourCell > div:nth-child(3)
	{
		width: 15%;
		float: right;
		mc-hidden: hidden;
	}

	div.FooterFourCell > div:nth-child(4)
	{
		width: 100%;
		mc-hidden: hidden;
	}

	div.TopButtonWhite
	{
		margin: 18px .75% 0 .25%;
		padding: 4px 6px 6px 6px;
	}

	div.MediaButton
	{
		margin-top: 16px;
		margin-left: 14%;
		mc-hidden: hidden;
	}
}
*/

@media only screen and (max-width: 1179px)
{
	div.TopLinksContainer
	{
		/* box-shadow: none; */
		min-width: 0;
		mc-hidden: hidden;
	}

	div.TopInEightLogo
	{
		display: none;
	}

	div.FooterContainer
	{
		margin-top: 30px;
	}

	div.FooterEightCell > div
	{
		font-size: 12pt;
		line-height: 14pt;
		height: 32pt;
		text-align: center;
		padding: 0 5px 0 5px;
		letter-spacing: 0px;
		mc-hidden: hidden;
	}

	div.FooterEightCell > div:nth-child(1),
	div.FooterEightCell > div:nth-child(5)
	{
		width: 30%;
		mc-hidden: hidden;
	}

	div.FooterEightCell > div:nth-child(3),
	div.FooterEightCell > div:nth-child(4),
	div.FooterEightCell > div:nth-child(7),
	div.FooterEightCell > div:nth-child(8)
	{
		width: 20%;
		mc-hidden: hidden;
	}

	div.FooterEightCell > div:nth-child(2),
	div.FooterEightCell > div:nth-child(6)
	{
		width: 30%;
		mc-hidden: hidden;
	}

	div.FooterFourCell
	{
		margin-top: 0px;
		mc-hidden: hidden;
	}

	div.FooterFourCell > div
	{
		float: left;
		font-size: 12pt;
		color: #f8f8f8;
		mc-hidden: hidden;
		letter-spacing: 0px;
		mc-hidden: hidden;
	}

	div.FooterFourCell > div:nth-child(1)
	{
		width: 70%;
		mc-hidden: hidden;
	}

	div.FooterFourCell > div:nth-child(2),
	div.FooterFourCell > div:nth-child(3)
	{
		width: 15%;
		float: right;
		mc-hidden: hidden;
	}

	div.FooterFourCell > div:nth-child(4)
	{
		width: 100%;
		mc-hidden: hidden;
	}

	div.TopButtonWhite
	{
		margin: 18px .75% 0 .25%;
		padding: 4px 6px 6px 6px;
	}

	div.MediaButton
	{
		margin-top: 16px;
		margin-left: 14%;
		mc-hidden: hidden;
	}
}

@media only screen and (max-width: 700px)
{
	/* Adjust main footer div so that the two cells stack. */

	div.TopLinksContainer
	{
		display: block;
		mc-hidden: hidden;
	}

	div.FooterTwoCell > div:nth-child(1)
	{
		float: left;
		width: 100%;
		margin-left: auto;
		mc-hidden: hidden;
		mc-hidden: hidden;
	}

	div.FooterTwoCell > div:nth-child(2)
	{
		float: left;
		width: 100%;
		margin-top: 20px;
		margin-right: auto;
		mc-hidden: hidden;
		text-align: left;
		mc-hidden: hidden;
	}

	div.FooterTwoCell > div:nth-child(2) p
	{
		text-align: center;
		mc-hidden: hidden;
	}

	div.TextContainer
	{
		float: none;
		text-align: center;
		mc-hidden: hidden;
	}

	div.ContactButton
	{
		mc-hidden: hidden;
		float: none;
		margin: auto;
		mc-hidden: hidden;
	}
}

@media print
{
	div.TopLinksContainer,
	div.FooterContainer
	{
		display: none;
		mc-hidden: hidden;
	}

	div.FooterPrint
	{
		display: block;
		mc-hidden: hidden;
	}
}

@media only screen and (max-width: 1179px)
{
	nav.title-bar
	{
		background: var(--Gray-Medium);
		/*Exectuive Blue*/
	}
}

@media only screen and (max-width: 700px)
{
	nav.title-bar
	{
		background: var(--Gray-Medium);
		/*Exectuive Blue*/
	}
}

