/*<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, 
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-version {
	display: none;
  	position: absolute;
	left: 50%;
    transform: translateX(-50%);
	background-color: #F2F2F2;
	min-width: 220px;
	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
	z-index: 1;
	list-style-type: none;
	padding: 10px 0 10px 17px;
	margin: 14px 0 0 0;
	border-radius: 0 0 12px 12px;
	text-align: left;
} /* Dropdown content */
        
#dropdown-button-version li {
	padding: 10px 8px 10px 8px;
	margin: 0 15px 3px 0;
	line-height: 1.5; /* Adjust line-height as needed */
	text-decoration: none;
	color: #1A1A1A;
	cursor: pointer;
	background-color: #F2F2F2;
	position: relative; /* Added for two level menus */
	display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space between text and arrow */
    align-items: center; /* Center items vertically */
} /* Style for the dropdown items */

#dropdown-button-version li:hover {
	text-decoration: none;
	background-color: #E6E6E6;
	border-radius: 8px;
}

/* Style for non-clickable (static) items */
#dropdown-button-version .static-item {
    cursor: default; /* Default cursor instead of pointer */
}

/* Remove hover effects for non-clickable items */
#dropdown-button-version .static-item:hover {
    background-color: transparent; /* No background change on hover */
    color: #1A1A1A; /* Ensure the color doesn't change on hover */
}

.hidden {
    display: none;
}

.toast-message {
  position: fixed;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 20px;
  background-color: #C5EAFF;
  color: #1a1a1a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  transition: opacity 0.3s ease-in-out;
}

/* Second and Third-level menu */
/* New HomeButtonsandVersionMenu.js uses just sub-level, not second-level and third-level. */

.second-level,
.third-level,
.sub-level
{
    display: none; /* Hide submenus initially */
    position: absolute;
    left: 100%; /* Position the submenus to the right */
    top: 0;
    background-color: #F2F2F2;
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    list-style-type: none;
    padding: 17px 1px 13px 17px;
    margin: -12px 0 0 -2px;
    border-radius: 12px 12px 12px 12px;
    z-index: 1;
    text-align: left;
}

.second-level li,
.third-level li,
.sub-level li
{
	padding: 10px 8px 10px 8px;
	margin: 0 15px 3px 0;
	line-height: 1.5; /* Adjust line-height as needed */
    text-decoration: none;
    color: #1A1A1A;
    cursor: pointer;
    background-color: #F2F2F2;
	display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space between text and arrow */
    align-items: center; /* Center items vertically */
}

.second-level li:hover,
.third-level li:hover,
.sub-level li:hover
{
    text-decoration: none;
    background-color: #E0E0E0;
	border-radius: 8px;
}

.arrow::after {
    content: "\25B6"; /* Unicode character for right arrow */
    display: inline-block;
    /*padding-right: 5px;*/
}

.down-arrow::after {
    content: "\25BC"; /* Unicode character for down arrow */
    display: inline-block;
    /*margin-left: 5px;*/
}

/* Styles for items with submenus */
.has-submenu::after {
    content: " \25B6"; /* Unicode character for arrow */
    display: inline-block;
    padding-right: 5px;
    color: #1A1A1A;
    font-size: 0.8em;
}

/* Rotate the arrow when hovering over the submenu item */
.has-submenu:hover::after {
    content: "\25BC"; /* Unicode character for down arrow */
	/*position: absolute;
    right: 10px;*/ /* Align to the right */
    transform: rotate(0deg); /* Ensure the arrow is not rotated */
}

/*==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;
	}
}