/*<meta conditions="General.Import" />*/

@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);

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

Hello! If this is your first time looking at a stylesheet within the text editor view, what you are reading right now is a "comment". Comments are added throughout this stylesheet with the purpose of making the source code easier to understand, comments will not be interpreted during the compile process. Since comments are not interpreted during the compile process, feel free to add or remove any comments.

If you have any questions regarding how to work with this stylesheet or template project, please contact MadCap Technical Support.
https://www.madcapsoftware.com/support/contact-options.aspx

NOTE: Generally, this stylesheet has elements listed out in the order that they appear in the topic from top to bottom. The exception are General styles which are at the top and the stylesheet mediums which are at the bottom.

EXAMPLE: Since the Topic/Banner image is at the top of the home page, it will be listed closer to the top of this stylesheet. While, the footer will be written towards the bottom.

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

/* IE9 Compat Modes */
/* IE6-IE8 */
/* Super Modern Browsers */
/* Pretty Modern Browsers */
/* Safari, Android, iOS */
/* Legacy iOS */
/*==Home Page General Styles==*/

body
{
	line-height: 1.5em;
	font-family: 'NT Bau', Corbel, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Proxima Nova';
}

.body-container
{
	background-color: #FCFCFC;	/* Anti-flash white F0F1F6 for background behind page. */
}

/* Disable top menu for home page */
nav.tab-bar
{
	display: none !important;
}

/* Disable left menu for home page */
nav.sidenav-wrapper
{
	display: none !important;
}

.content {
    padding-left: 0 !important; /* No left padding on content for home page */
}

p
{
	color: #1a1a1a;
	margin: 0 0 1.333em 0;
	font-family: 'NT Bau', Corbel, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Proxima Nova';
}

.center
{
	position: relative;
	margin-right: auto;
	margin-left: auto;
	float: none !important;
	text-align: center;
}

.off-canvas-content .main-section > .outer-row
{
	max-width: 100%;
	padding: 0;
}

.search-filter-content
{
	line-height: 0.8em;
	border-radius: 0 0 15px 15px;
}

.search-filter:hover
{
	Opacity: 0.7;
}

/*==Responsive Header Styles==*/

#contentBody > .responsive-header
{
	background-color: transparent;
}

/*==Home Page Top Banner Section==*/

div.home-header
{
	width: 100%;
	text-align: left;
	position: relative;
	padding: 0;
	top: 0;
	height: 420px;
	padding-bottom: 60px;
	background: url('../Images/NEW-HomePage/HomeHeaderRight.png'), linear-gradient(180deg, #9697FF 0%, #C1C7FF 100%); /* top image, bottom lavendar gradient -- see tablet and media sections, below*/
	/*overflow: hidden; Have to take out hidden to get the search filter dropdown to work on the portal page */
	background-position: right top, center top;
	background-repeat: no-repeat;
	background-size: contain, auto;
	border-radius: 0 0 55px 55px;
}

div.portal-header
{
	width: 100%;
	text-align: left;
	position: relative;
	padding: 0;
	top: 0;
	height: 500px;
	padding-bottom: 60px;
	background: url('../Images/NEW-HomePage/HomeHeaderRight.png'), linear-gradient(180deg, #9697FF 0%, #C1C7FF 100%); /* top image, bottom lavendar gradient -- see tablet and media sections, below*/
	/*overflow: hidden; Have to take out hidden to get the search filter dropdown to work on the portal page */
	background-position: right top, center top;
	background-repeat: no-repeat;
	background-size: contain, auto;
	border-radius: 0 0 55px 55px;
}

div.home-logobar
{
	position: relative;
	top: 95px;
	background-color: transparent;
	z-index: 2;	/* Make logo layer lower than search box and higher than background */
	display: flex;
	flex-direction: row;
	max-width: 1240px;
	gap: 15%;
}

div.home-logobar a
{
	text-decoration: none;
}

div.HomeLogoColumns-left
{
	text-align: left;
	flex: 2 1 auto;
	padding-left: 5px;
}

div.HomeLogoColumns-right
{
	margin-left: auto;	/* For some mysterious reason of the CSS world, this makes the content align right. */
	flex: 2 1 auto;
	padding: 15px 5px 0 0;
}

div.portalLogo,
div.homeLogo
{
	text-align: left;
	padding-top: 12px;
}

div.portalLogo img
{
	max-height: 42px !important;
	max-width: 215px !important;
	width: 215px;
}

div.homeLogo img
{
	max-height: 80px !important;
}

div.portalLogo a:hover,
div.homeLogo a:hover
{
	opacity: 0.6; /* Hover opacity allows logo to turn color on hover */
}

div.home-header-info
{
	position: relative;
	margin-top: 130px;
	height: 200px;
	display: flex;
	flex-direction: column;
	max-width: 820px; 
}

div.home-header-info-inner
{
	width: 750px;
	padding-right: 20px;
	padding-left: 20px;
	text-align: left;
}

div.portal-header-info
{
	margin-top: 195px;
	height: 200px;
	display: flex;
	flex-direction: column;
	max-width: 800px;
	justify-content: center;
}

div.portal-header-info-inner
{
	padding-right: 20px;
	padding-left: 20px;
	text-align: center;
}

div.portal-header-info-inner-search
{
	padding: 20px 20px 0 20px;
	text-align: center;
}

span.home-header-info-level1
{
	text-align: left;
	height: auto;
	font-family: 'Degular Medium', Corbel, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Proxima Nova';
	color: #ffffff;
	font-size: 42px;
	line-height: 60px;
}

span.portal-header-info-level1
{
	text-align: center;
	height: auto;
	font-family: 'Degular Medium', Corbel, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Proxima Nova';
	color: #ffffff;
	font-size: 52px;
	line-height: 75px;
}

span.home-header-info-level2
{
	text-align: left;
	height: auto;
	font-family: 'NT Bau', Corbel, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Proxima Nova';
	color: #ffffff;
	font-size: 24px;
	line-height: 34px;
}

span.home-header-info-level3
{
	text-align: left;
	height: auto;
	font-family: 'NT Bau', Corbel, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Proxima Nova';
	color: #ffffff;
	font-size: 1.5em;
	line-height: 1.8em;
}

div.home-button-bar
{
	/*margin-left: auto;*/
	margin-right: auto;
	margin-top: 30px;
	margin-left: 18px;
	display: flex;
	gap: 1rem;
	/*justify-content: center;*/
}

div.home-button-bar > div:nth-child(1),
div.home-button-bar > div:nth-child(2),
div.home-button-bar > div:nth-child(3)
{
	flex: 0 0 250px;
}

div.home-button-bar-buttons
{
	/*flex: 0 0 250px;*/
}

div.home-button-bar .cta1, .cta1:link, .cta1:hover, .cta1:visited
{
	text-align: center;
	mc-disable-glossary-terms: true;
	cursor:pointer;
	text-decoration: none;
}

div.home-button-bar .cta2, /* This one has JavaScript associated to dropdown version */
div.home-button-bar .cta3 /* This one has JavaScript associated to toggle OTHER */
{
	text-align: center;
	mc-disable-glossary-terms: true;
	cursor:pointer;
	position: relative; /* This relates to the absolute position of the dropdown within the button, which only works if the parent is relative. */
}

a.cta2,
a.cta3
{
	color: #ffffff;
}

a.cta2:link,
a.cta2:visited,
a.cta3:link,
a.cta3:visited
{
	text-decoration: none;
	color: #ffffff;
}

div.home-button-bar .PDF, .PDF:link, .PDF:hover, .PDF:visited
{
	/* This is here to make the content of the home toggles toggle, but no CSS is needed. */
}

div.home-button-bar .OTHER, .OTHER:link, .OTHER:hover, .OTHER:visited
{
	/* This is here to make the content of the home toggles toggle, but no CSS is needed. */
}

div.home-button-bar .HTML, .HTML:link, .HTML:hover, .HTML:visited
{
	/* This is here to make the content of the home toggles toggle, but no CSS is needed. */
}

.PDF-tiles, .HTML-tiles, .OTHER-tiles,
.v100-tiles, .v101-tiles, .v102-tiles, .v103-tiles, .v104-tiles, .v1046-tiles, .v105-tiles, .v106-tiles,
.v110-tiles, .v111-tiles, .v112H-tiles, .v112P-tiles, .v113H-tiles, .v113P-tiles, .v114H-tiles, .v114P-tiles, .v115H-tiles, .v115P-tiles,
.v120H-tiles, .v120P-tiles, .v121H-tiles, .v121P-tiles
{
	/* This is here to make the content of the home toggles toggle, but no CSS is needed. */
}

div.home-button-bar .DT /* Solid button on the left */
{
	text-align: center;
	padding-top: 8px;
	transition: background-color 0.3s, color 0.3s;
	border: 2px solid #5f61ff;
	border-radius: 50px;
	height: 42.37px;
	font-style: normal;
	font-size: 1.2rem;
	line-height: 1.2rem;
	color: #ffffff;
	background-color: #5f61ff;
}

div.home-button-bar .DH,
div.home-button-bar .DA /* Outline button in the middle (DH) and far right (DA) */
{
	text-align: center;
	padding-top: 8px;
	transition: background-color 0.3s, color 0.3s;
	border: 2px solid #1a1a1a;
	border-radius: 50px;
	height: 42.37px;
	font-style: normal;
	font-size: 1.2rem;
	line-height: 1.2rem;
	color: #1a1a1a;
	background-color: transparent;
}

div.home-button-bar .DT:hover
{
	opacity: 0.7;
	color: #ffffff;
	transition: background-color 0.3s, border-color 0.3s;
}

div.home-button-bar .DA:hover
{
	opacity: 0.7;
	transition: background-color 0.3s, border-color 0.3s;
}

div.home-button-bar .DH:hover
{
	opacity: 1.0; /* This opacity difference is so that the dropdown menu below the button won't be transparent. */
	transition: background-color 0.3s, border-color 0.3s;
}

.cta2-dropdn {
	display: inline-block;
	border: none;
	cursor: pointer;
 } /* Dropdown button on middle (DH) button */
 
 .cta2-dropdn:hover {
	color: #4d4c4c; /* Set color here to mimic opacity 70% of other transparent button. */
}
 
#dropdown-button {
	display: none;
  	position: absolute;
	left: 50%;
    transform: translateX(-50%);
	background-color: #F2F2F2;
	min-width: 200px;
	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
	z-index: 1;
	list-style-type: none;
	padding: 0 0 0 25px;
	margin: 14px 0 0 0;
	border-radius: 0 0 12px 12px;
	text-align: left;
} /* Dropdown content */
        
#dropdown-button li {
	padding: 10px;
	text-decoration: none;
	color: #1A1A1A;
	cursor: pointer;
	background-color: #F2F2F2;
} /* Style for the dropdown items */

#dropdown-button li:hover {
	text-decoration: underline;
}

/*==Home Tiles section==*/

div.home-tiles	
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 2%;
	margin-bottom: 1%;
	display: flex;
	gap: 1rem;
	justify-content: center;
}

div.home-tiles > div:nth-child(1),
div.home-tiles > div:nth-child(2),
div.home-tiles > div:nth-child(3)
{
	flex: 0 0 250px;
}

/*div.home-tiles::before
{
	content: ' ';
	display: table;
}

div.home-tiles::after
{
	content: ' ';
	display: table;
	clear: both;
}*/

div.home-tiles > div.html
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #c5eaff;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1); /*Adds transition animation when switching between screen sizes*/
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	border: 1px solid #c5eaff;
	overflow: hidden;
	box-shadow: 0 2px 1px 0 rgba(225,225,225,0.5);
}

div.home-tiles > div.html:hover	/*When hovering over a home-tile, these properties apply*/
{
	box-shadow: 0 14px 28px rgb(0,0,0,0.1), 0 10px 10px rgb(0,0,0,0.08);
	background-color: #5f61ff;
	border: 1px solid #5f61ff;	
}

div.home-tiles > div.pdf
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #ffedba;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1); /*Adds transition animation when switching between screen sizes*/
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	border: 1px solid #ffedba;
	overflow: hidden;
	box-shadow: 0 2px 1px 0 rgba(225,225,225,0.5);
}

div.home-tiles > div.pdf:hover	/*When hovering over a home-tile, these properties apply*/
{
	box-shadow: 0 14px 28px rgb(0,0,0,0.1), 0 10px 10px rgb(0,0,0,0.08);
	background-color: #ffc06c;
	border: 1px solid #ffc06c;	
}

div.home-tiles > div.other
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #95ffec;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1); /*Adds transition animation when switching between screen sizes*/
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	border: 1px solid #95ffec;
	overflow: hidden;
	box-shadow: 0 2px 1px 0 rgba(225,225,225,0.5);
}

div.home-tiles > div.other:hover	/*When hovering over a home-tile, these properties apply*/
{
	box-shadow: 0 14px 28px rgb(0,0,0,0.1), 0 10px 10px rgb(0,0,0,0.08);
	background-color: #5f61ff;
	border: 1px solid #5f61ff;	
}

div.home-tiles > div.portal
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #F2F2F2;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1); /*Adds transition animation when switching between screen sizes*/
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	border: 1px solid #F2F2F2;
	overflow: hidden;
	box-shadow: 0 2px 1px 0 rgba(225,225,225,0.5);
	min-width: 400px;
}

div.home-tiles > div.portal:hover	/*When hovering over a home-tile, these properties apply*/
{
	box-shadow: 0 14px 28px rgb(0,0,0,0.1), 0 10px 10px rgb(0,0,0,0.08);
	background-color: #E6E6E6;
	border: 1px solid #E6E6E6;	
}

div.home-tiles > div.other > a,
div.home-tiles > div.pdf > a,
div.home-tiles > div.html > a,
div.home-tiles > div.portal > a	
{
	display: block;
	padding: 1rem;
} /* Make whole tile clickable */

div.home-tiles > div.pdf:hover p.tile-title-html,
div.home-tiles > div.pdf:hover p.tile-title-pdf,
div.home-tiles > div.pdf:hover p.tile-title-other,
div.home-tiles > div.other:hover p.tile-title-html,
div.home-tiles > div.other:hover p.tile-title-pdf,
div.home-tiles > div.other:hover p.tile-title-other,
div.home-tiles > div.html:hover p.tile-title-html,
div.home-tiles > div.html:hover p.tile-title-pdf,
div.home-tiles > div.html:hover p.tile-title-other	/* Link text inside home-tiles div to white on hover of div. */
{
	color: #ffffff;
}

/*=Elements for text contained within each home-tile=*/

p.tile-title-html,
p.tile-title-pdf,
p.tile-title-other
{
	text-align: center;
	color: #1a1a1a;
	padding: 2rem 0 0 0;
	font-size: clamp(1.2rem, 1.4rem, 1.6rem);
}

p.tile-title-portal1
{
	text-align: center;
	color: #5F61FF;
	padding: 2rem 0 0 0;
	font-family: 'Degular Medium', Corbel, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Proxima Nova';
	font-size: clamp(1.7rem, 1.9rem, 2.1rem);
}

p.tile-title-portal2
{
	text-align: center;
	color: #666666;
	padding: .5rem 0 0 0;
	font-size: clamp(0.9rem, 1.1rem, 1.3rem);
}

div.home-tiles a
{
	text-decoration: none;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}


/*===========================================================================================================================================================
Styles after this point are styles that are for specific mediums. If any additional styles are added to this template they will be listed after mediums.
[@media tablet] declares styles that will apply when the screen is in tablet view
[@media mobile] declares styles that will apply when the screen is in mobile view
===========================================================================================================================================================*/

@media only screen and (max-width: 1279px)
{
	#content-section .right-section,
	#content-section .left-section
	/*{
		padding: 0;
	}*/

	div.home-tiles
	{
		flex-wrap: wrap;
		flex: 0 0 200px;
		min-width: 200px;
	}

	div.home-tiles > div
	{
		float: left;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background-color: transparent;
		transition: all 0.5s cubic-bezier(.25,.8,.25,1); /*Adds transition animation when switching between screen sizes*/
		-moz-border-radius: 25px;
		-webkit-border-radius: 25px;
		border-radius: 25px;
		border: 1px solid #c5eaff;
		background-color: #c5eaff;
	}
}

@media only screen and (max-width: 1175px)
{
	div.home-button-bar .DA 
	{
		border: 2px solid #ffffff;
		color: #ffffff;
	} /* Outline button on the far right goes to white when it's over the graphic on smaller screens */
}

@media only screen and (max-width: 842px)
{
	/*#content-section
	{
		padding-top: 30px;
		padding-bottom: 30px;
	}*/

	div.home-header
	{
		background: linear-gradient(180deg, #9697FF 0%, #C1C7FF 100%); /* lavendar gradient */
		background-position: center top;
		height: 470px;
	}
	
	div.home-header-info
	{
    	margin-top: 125px;
	}	

	div.home-header-info-inner
	{
		width: auto;
	}
	
	div.home-button-bar
	{
		flex-wrap: wrap;
		min-width: 310px;
		margin-left: 0;
		margin-right: 0;
		justify-content: center;
	}
		
	div.home-tiles
	{
		flex-wrap: wrap;
		min-width: 200px;
		margin-left: 0;
		margin-right: 0;
	}
	
	div.home-button-bar > div:nth-child(1),
	div.home-button-bar > div:nth-child(2),
	div.home-button-bar > div:nth-child(3),
	div.home-tiles > div:nth-child(1),
	div.home-tiles > div:nth-child(2),
	div.home-tiles > div:nth-child(3)
	{
		width: 40%;
		max-width: 40%;
		flex: 0 0 40%;
	}

	div.home-tiles > div
	{
		margin-top: 2%;
	}
	
	div.home-button-bar .DA 
	{
		border: 2px solid #1a1a1a;
		color: #1a1a1a;
		margin: 4px 0 0 0;
	} /* Outline button on the far right goes back to blackish when it wraps on smaller screens */
	
}

@media screen and (max-width: 842px) and (orientation: portrait)
{
	div.home-header
	{
		background: linear-gradient(180deg, #9697FF 0%, #C1C7FF 100%); /* lavendar gradient */
		background-position: center top;
		height: 470px;
	}
	
	div.home-header-info
	{
    	margin-top: 125px;
	}
	
	div.home-button-bar
	{
		flex-wrap: wrap;
		min-width: 310px;
		margin-left: 0;
		margin-right: 0;
		justify-content: center;
	}
	
	div.home-header-info-inner
	{
		width: auto;
	}
		
	div.home-tiles
	{
		flex-wrap: wrap;
		min-width: 200px;
		margin-left: 0;
		margin-right: 0;
	}
	
	div.home-button-bar > div:nth-child(1),
	div.home-button-bar > div:nth-child(2),
	div.home-button-bar > div:nth-child(3),
	div.home-tiles > div:nth-child(1),
	div.home-tiles > div:nth-child(2),
	div.home-tiles > div:nth-child(3)
	{
		width: 40%;
		max-width: 40%;
		flex: 0 0 40%;
	}
	
	div.home-button-bar .DA 
	{
		border: 2px solid #1a1a1a;
		color: #1a1a1a;
		margin: 4px 0 0 0;
	} /* Outline button on the far right goes back to blackish when it wraps on smaller screens */
}

@media screen and (max-width: 736px)
{
	div.portal-header-info {
    	margin-top: 185px;
	}

	span.portal-header-info-level1
	{
		font-size: 36px;
		line-height: 55px;
	}
	
	span.home-header-info-level1
	{
		font-size: 34px;
		line-height: 40px;
	}	
}

@media screen and (max-width: 582px)
{
	div.portal-header,
	div.home-header
	{
		height: 505px;
		background: linear-gradient(180deg, #9697FF 0%, #C1C7FF 100%); /* lavendar gradient */
		background-position: center top;
	}
	
	div.home-header-info
	{
		align-items: center;
		margin-top: 100px;
	}

	span.home-header-info-level1
	{
		font-size: 24px;
		line-height: 40px;
	}
	
	span.home-header-info-level2
	{
		font-size: 20px;
		line-height: 20px;
	}	
	
	div.home-header-info-inner {
    	width: 400px;
		text-align: center;
	}
	
	div.home-button-bar
	{
		flex-flow: row wrap;
		margin-top: 25px;
    	text-align: center;
    	padding: 5px 0 0 0;		
	}

	div.home-tiles
	{
		flex-flow: row wrap;
	}
	
	div.home-button-bar > div:nth-child(1),
	div.home-button-bar > div:nth-child(2),
	div.home-button-bar > div:nth-child(3),
	div.home-tiles > div:nth-child(1),
	div.home-tiles > div:nth-child(2),
	div.home-tiles > div:nth-child(3)
	{
		width: 70%;
		max-width: 70%;
		flex: 0 0 70%;
		/*min-width: 200px;*/
	}
	
	div.HomeLogoColumns-right,
	div.portal-header-info-inner-search
	{
		display: none;
	} /* Hide search bar on smaller screens */
}	

@media screen and (max-width: 414px)
{
	div.portal-header,
	div.home-header
	{
		height: 525px;
		background: linear-gradient(180deg, #9697FF 0%, #C1C7FF 100%); /* lavendar gradient */
		background-position: center top;
	}
	
	span.home-header-info-level1
	{
		font-size: 26px;
		line-height: 30px;
	}
	
	span.home-header-info-level2
	{
		font-size: 18px;
		line-height: 18px;
	}	
	
	div.home-header-info-inner
	{
		width: 320px;
		text-align: center;
	}
}