/*<meta />*/

@media only screen and (max-width: 1100px)
{
	h1
	{
		border-radius: 5px;
		padding-left: 0px;
	}

	h1.homeHeading
	{
		font-size: 2em;
	}

	/* Below will fix the navbar and hamnav to top to be visible while scrolling, 
giving users access to the menu wherever they are on the page. 
This also stops the navbar and nav img from scaling which breaks the hamnav.
*/

	.nav
	{
		width: 100%;
		height: 70px;
		position: fixed;
		z-index: 3;
	}

	.banner-container
	{
		margin-top: 50px;
	}

	.nav-header
	{
		z-index: -1;
		margin-top: 30px;
	}

	.nav img
	{
		width: 190px;
		height: 40px;
	}

	/* Code for CSAM Images */

	.CSAM img
	{
		display: none;
	}

	#hamnav-container label
	{
		display: inline-block;
		color: white;
		transparency: 80%;
		background: transparent;
		font-style: normal;
		font-size: 1.8em;
		padding: 5px;
		position: fixed;
		top: 20px;
		right: 5px;
		cursor: pointer;
	}

	#hamnav-container
	{
		display: block;
	}

	#hamnavitems
	{
		display: block;
		transform: translateY(-200%);
		transition: transform 0.2s ease-in-out;
	}

	#hamnav-container input:checked ~ #hamnavitems
	{
		display: block;
		transform: translateY(0%);
		transition: transform 0.2s ease-in-out;
	}

	/* New code for styling on hamnav menu*/

	ul.menu._Skins_HamNavTOCMenu.mc-component li > a
	{
		font-size: 20px;
		color: black;
		padding-top: 25px;
		padding-left: 25px;
		padding-bottom: 20px;
		font-weight: 500;
		/*border-bottom: 1px solid rgb(255, 243, 224);*/
	}

	/* new styling for sub menus and their children */

	ul.menu._Skins_HamNavTOCMenu.mc-component ul ul li > a .has-children
	{
		font-size: 18px;
		color: black;
		font-weight: 400;
		padding: 25px;
	}

	ul.menu._Skins_HamNavTOCMenu.mc-component ul ul ul > li > a,
	ul.menu._Skins_HamNavTOCMenu.mc-component ul ul ul > li > a:hover
	{
		font-weight: 300;
		padding-left: 50px;
		background: rgb(255, 243, 224);
		font-size: 16px;
	}

	ul.menu._Skins_HamNavTOCMenu.mc-component ul ul ul > li > a.selected,
	ul.menu._Skins_HamNavTOCMenu.mc-component ul ul ul > li > a.selected:hover
	{
		font-size: 16px;
		padding-left: 50px;
		font-weight: 500;
		background: rgb(255, 243, 224);
	}

	/* end new styling for sub menus and their children */

	ul.menu._Skins_HamNavTOCMenu.mc-component li > a.selected
	{
		font-size: 20px;
		font-weight: 500;
		color: black;
		padding-left: 25px;
		margin-top: 0px;
		margin-bottom: 0;
	}

	ul.menu._Skins_HamNavTOCMenu.mc-component ul > li > a
	{
		color: black;
		font-size: 20px;
		font-weight: 400;
		padding-top: 25px;
		padding-left: 25px;
		padding-bottom: 25px;
	}

	ul.menu._Skins_HamNavTOCMenu.mc-component ul ul li > a,
	ul.menu._Skins_HamNavTOCMenu.mc-component ul ul li > a:hover
	{
		font-size: 18px;
		background-colour: white;
		color: black;
		font-weight: 400;
		padding: 25px;
		padding-left: 35px;
		margin-botom: 0;
		padding-bottom: 18px;
		background: #9ea0d07a;
	}

	ul.menu._Skins_HamNavTOCMenu.mc-component ul ul li > a.selected
	{
		font-size: 18px;
		background-colour: #A2D8CD;
		/*Updated on Cristy's request*/
		color: black;
		font-weight: 600;
		padding: 25px;
		padding-left: 35px;
		margin-botom: 0;
		padding-bottom: 15px;
		/*background: rgb(255, 243, 224);*/
	}

	ul.menu._Skins_HamNavTOCMenu.mc-component ul ul li > a.selected:hover
	{
		color: black;
		font-size: 18px;
		font-weight: 600;
		background: rgb(255, 243, 224);
	}

	/* End new code for styling on hamnav menu*/

	ul.menu._Skins_HamNavTOCMenu.mc-component
	{
		width: 330px;
		height: 95vh;
		padding: 10px 0px 30px 30px;
		background: white;
		position: relative;
		top: 25px;
		right: 55px;
		transition: all 0.5s ease;
		padding: 0;
		border-radius: 0 0 15px 15px;
		box-shadow: 1px 1px 6px #ffff;
		z-index: 20;
	}

	/* Overrides the inline styles that were causing the slide in menu to misalign */

	.sticky-container > div:first-child
	{
		width: 100%;
		max-width: 0px;
		margin-top: 0px !important;
		top: 0px;
		bottom: auto;
	}

	/* Overlay div styling that pops up when the Hamnav is open */

	#bg
	{
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		height: 100%;
		visibility: hidden;
		opacity: .6;
		transition: .2s;
		background: #000;
		z-index: 2;
	}

	#bg.active
	{
		visibility: visible;
	}

	/* too little padding was coming through on mobile */

	.line
	{
		width: 35px;
		height: 4px;
		background-color: #616161;
		margin: 6px 0;
	}

	ul.menu._Skins_TOCMenu.mc-component
	{
		width: 350px;
		padding: 10px 0px 30px 30px;
		background-color: white;
		position: relative;
		top: -33px;
		box-shadow: 1px 1px 16px #ccc;
	}

	/*
 {
    content: "\f0a1";
    margin-right: 20px;
    color: rgb(239, 108, 0);
} */

	/* Side menu icon styling */

	.fa-home-alt:before,
	.fa-home-lg-alt:before,
	.fa-home:before,
	.fa-house:before,
	.fa-newspaper:before,
	.fa-gear:before,
	.fa-cog:before,
	.fa-calendar-check:before,
	.fa-bullhorn:before
	{
		margin-right: 20px;
		color: rgb(239, 108, 0);
	}

	.fa-question:before
	{
		margin-right: 23px;
		margin-left: 2px;
		color: rgb(239, 108, 0);
	}

	/* end icon styling */

	#hamnav
	{
		min-width: 0px;
		width: 0px;
	}

	#hamitems
	{
		display: none;
	}

	.breadcrumbs
	{
		margin: auto;
		height: 40px;
		max-width: 330px;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-bottom: 10px;
		overflow: hidden;
		text-align: center;
	}

	.SearchBarSmall
	{
		width: 95%;
		margin-left: 10px;
		margin-top: 20px;
	}

	.buttons._Skins_ToolbarSkin.mc-component
	{
		display: none;
	}

	.SearchBarContainer
	{
		width: 90%;
		margin: 0 auto;
	}

	#content-section
	{
		padding-bottom: 30px;
	}

	table
	{
		overflow-x: auto;
	}
}

@media (min-width: 768px) and (max-width: 1050px)
{
	.large-9
	{
		flex: 0 0 80%;
	}

	.onboarding-links
	{
		margin-left: 10px;
	}
}

@media (max-width: 767px)
{
	#footer,
	div.onboarding-nav,
	div.onboarding-footer
	{
		bottom: 0;
	}

	.article-content
	{
		display: grid !important;
		padding-left: 15px;
		padding-right: 15px;
	}

	#content-section
	{
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.quad-display > div.normal
	{
		width: 260px;
	}
}

@media only screen and (max-width: 1100px)
{
	.article-content
	{
		display: grid !important;
	}

	.onboarding-column-row
	{
		display: block !important;
	}

	.faq-3
	{
		display: none !important;
	}
}

@media (max-width: 640px)
{
	#onboarding,
	div.onboarding-links,
	div.onboardingtitle
	{
		padding-left: 20px;
		padding-right: 20px;
	}

	p img.resize,
	p img.medium
	{
		max-width: 98%;
	}

	div.onboardingtitle
	{
		/* nothing */
	}

	.onboarding-nav img
	{
		margin-left: auto !important;
	}

	.nav-links
	{
		margin-right: auto !important;
	}

	.nav-links > p,
	.nav-links > p > a,
	.nav-links > p > a:link,
	.nav-links > p > a:visited
	{
		font-size: small !important;
	}
}