/*<meta />*/

/* Define DocTeam Base Fonts: POPPINS */

@font-face 
{
	font-family: 'Poppins Regular';
	src: url(../Fonts/Poppins/Poppins-Regular.ttf);
	font-weight: normal;
	font-style: normal;
}

@font-face 
{
	font-family: 'Poppins Bold';
	src: url(../Fonts/Poppins/Poppins-Bold.ttf);
}

@font-face 
{
	font-family: 'Poppins Semi Bold';
	src: url(../Fonts/Poppins/Poppins-SemiBold.ttf);
}

@font-face 
{
	font-family: 'Poppins Light';
	src: url(../Fonts/Poppins/Poppins-Light.ttf);
	font-weight: normal;
	font-style: normal;
}

@font-face 
{
	font-family: 'Poppins Medium';
	src: url(../Fonts/Poppins/Poppins-Medium.ttf);
}

@font-face 
{
	font-family: 'Poppins Thin';
	src: url(../Fonts/Poppins/Poppins-Thin.ttf);
	font-weight: normal;
	font-style: normal;
}

@font-face 
{
	font-family: 'Poppins Thin Italic';
	src: url(../Fonts/Poppins/Poppins-ThinItalic.ttf);
	font-weight: normal;
	font-style: normal;
}

/* Define DocTeam Fallback Fonts: ROBOTO */

@font-face 
{
	font-family: 'Roboto Regular';
	src: url(../Fonts/Roboto/Roboto-Regular.ttf);
	font-weight: normal;
	font-style: normal;
}

@font-face 
{
	font-family: 'Roboto Bold';
	src: url(../Fonts/Roboto/Roboto-Bold.ttf);
}

@font-face 
{
	font-family: 'Roboto Italic';
	src: url(../Fonts/Roboto/Roboto-Italic.ttf);
}

@font-face 
{
	font-family: 'Roboto Bold Italic';
	src: url(../Fonts/Roboto/Roboto-BoldItalic.ttf);
}

@font-face 
{
	font-family: 'Roboto Condensed Regular';
	src: url(../Fonts/Roboto/RobotoCondensed-Regular.ttf);
}

@font-face 
{
	font-family: 'Roboto Condensed Bold';
	src: url(../Fonts/Roboto/RobotoCondensed-Bold.ttf);
}

@font-face 
{
	font-family: 'Roboto Condensed Bold Italic';
	src: url(../Fonts/Roboto/RobotoCondensed-BoldItalic.ttf);
}

@font-face 
{
	font-family: 'Roboto Condensed Italic';
	src: url(../Fonts/Roboto/RobotoCondensed-Italic.ttf);
}

/*ABC Corporate Colors*/
/*NOTE: The DocTeam's best practice is to use RGB/RGBA where possible. The hex color codes are referenced below for reference.*/

:root
{
	--Primary: #29a9e1;
	--Secondary: #0073ba;
	--Accent: #cc451b;
	--Light: #ceced9;
	--Lightest: #FFFFFF;
	--Medium: #75707d;
	--Dark: #231f20;
	--Darkest: #140f10;
	--FontFamily: Poppins;
	--HeroImage: url('../images/assets/hero/crs-bg-2024.png');
	--LogoImage: url('../images/assets/logos/abc-corporate-white-99.png');
	--LogoImagePrint: url('../images/assets/logos/abclogo_stacked_black.png');
}

/*Home Page General Styles*/

body
{
	font-family: 'Poppins Regular', 'Roboto Regular';
	line-height: 1.5em;
	background-color: var(--Lightest);
}

h1.home
{
	font-family: 'Poppins Regular', 'Roboto Regular';
	font-size: 3.0em;
	font-weight: 500;
	text-align: center;
	text-shadow: 1px 1px var(--Light);
	color: var(--Lightest);
	line-height: 1em;
	border-bottom: none;
	margin-top: 20px;
}

h1.homeDark
{
	font-size: 1.0em;
	font-weight: normal;
	color: var(--Dark);
	padding-bottom: 10px;
	margin-top: 0px;
	margin-bottom: 30px;
	border-bottom: none;
}

h2.home
{
	font-size: 2.75em;
	font-weight: 500;
	text-align: center;
	text-shadow: 1px 1px var(--Light);
	color: var(--Lightest);
	line-height: 1em;
	border-bottom: none;
}

p
{
	color: var(--Dark);
	margin-bottom: 8px;
	margin-top: 8px;
}

.center
{
	position: relative;
	margin-right: auto;
	margin-left: auto;
	float: none !important;
	text-align: center;
}

.headerBlack
{
	font-family: 'Poppins Thin', 'Roboto Condensed Regular';
	color: var(--Darkest);
	font-size: 3.5em;
	font-weight: 500;
}

.headerBlue
{
	font-family: 'Poppins Thin', 'Roboto Condensed Regular';
	color: var(--Secondary);
	font-size: 2em;
	font-weight: 500;
	text-shadow: 1px 1px #4d6992;
}

.headerWhite
{
	font-family: 'Poppins Regular', 'Roboto Regular';
	color: var(--Lightest);
	font-size: 3.5em;
	font-weight: 500;
	text-shadow: 1px 1px var(--Light);
}

/* Remove the main search bar from the home page only */

.row.nav-search
{
	display: none;
}

/* Responsive Header Styles*/

#contentBody > .responsive-header
{
	background-color: transparent;
}

.off-canvas-content .main-section > .outer-row
{
	max-width: 100%;
	padding: 0;
}

strong.burntOrange
{
	color: var(--Accent);
}

/*Top Navigation Bar Section*/

nav.title-bar
{
	position: absolute;
	width: 100%;
}

/*Home Page Hero Section*/

div.topic-hero
{
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--Dark);
	background-image: url('../images/assets/hero/myhero.png');
	height: auto;
	padding-top: 50px;
	padding-bottom: 150px;
	margin-top: 50px;
	background-position: center;
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center 0;
	border-top: 10px solid var(--Dark);
	border-bottom: 2px solid var(--Dark);
}

div.topic-hero > div	/*controls the heading on the home page*/
{
	margin-left: 20%;
}

/*==Home Tiles section==*/

div.search	/*search bar on the home page*/
{
	padding-top: -50px;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 30%;
}

div.home-tiles-container
{
	padding-top: 5px;
	padding-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--Lightest);
	min-height: 40vh;
}

div.home-tiles	/*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1%;
	margin-bottom: 1%;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

div.home-tiles::before
{
	content: ' ';
	display: table;
}

div.home-tiles::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.home-tiles > div
{
	float: left;
	padding: 15px 30px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	box-sizing: border-box;
	-mox-box-sizing: border-box;
}

div.home-tiles > div:nth-child(1)
{
	width: 16%;
	margin-left: 24%;
	background: linear-gradient(to bottom, #1c98d5 0%, #0073ba 100%);
}

div.home-tiles > div:nth-child(2)
{
	width: 16%;
	margin-left: 2%;
	background: linear-gradient(to bottom, #cc451b 0%, #e55d34 100%);
}

div.home-tiles > div:nth-child(3)
{
	width: 16%;
	margin-left: 2%;
	background: linear-gradient(to bottom, #263870 0%, #00598e 100%);
}

div.home-tiles > div:hover
{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	transform: scale(1.05);
}

/*=Elements for text contained within each home-tile=*/

p.tile-title
{
	color: #ffffff;
	margin-top: 0px;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
}

p.tile-subtitle
{
	text-align: center;
	color: #ffffff;
}

p.tile-content
{
	color: #ffffff;
	font-size: 0.9em;
	text-align: center;
}

p.tile-button
{
	margin-top: 8px;
	float: right;
}

div.home-tiles a	/*Complex Selector: Links within the home tiles will have the following properties*/
{
	text-decoration: none;
	color: inherit;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

div.home-tiles a:hover	/*Complex Selector: When hovering over links within the home tiles the following properties will apply.*/
{
	color: #ceced9;
}

/*==Info section==*/

div.info-container
{
	margin-left: auto;
	margin-right: auto;
	width: 75%;
	padding-bottom: 75px;
	background-color: var(--Lightest);
}

div.info-section	/*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.info-section::before
{
	content: ' ';
	display: table;
}

div.info-section::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.info-section > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.info-section > div:nth-child(1)
{
	width: 35%;
	margin-left: 15%;
}

div.info-section > div:nth-child(2)
{
	width: 35%;
	margin-left: 5%;
}

/*=Elements for content contained within each info section=*/

p.info-title
{
	line-height: 1em;
	padding-bottom: 10px;
	border-bottom: 1px solid #9c9c9c;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
}

p.info-content
{
	font-size: 0.9em;
}

/*==Home Page Footer==*/

div.footer
{
	padding-top: 20px;
	padding-bottom: 20px;
	background: var(--Dark);
	text-align: center;
}

div.footer a
{
	text-decoration: none;
	color: #ADACB5;
}

div.footer p	/* Complex Selector: Any <p> that is contained within div.footer will have the following properties */
{
	font-size: 0.9em;
	color: #b1b1b1;
}

div.home-master-page-footer	/*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	width: 55%;
}

div.home-master-page-footer::before
{
	content: ' ';
	display: table;
}

div.home-master-page-footer::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.home-master-page-footer > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.home-master-page-footer > div:nth-child(1)
{
	width: 25%;
	margin-left: 0%;
}

div.home-master-page-footer > div:nth-child(2)
{
	width: 50%;
	margin-left: 0%;
}

div.home-master-page-footer > div:nth-child(3)
{
	width: 25%;
	margin-left: 0%;
}

htm.Home-Internal
{
	mc-master-page: url('../templatepages/homepage.flmsp');
	mc-community-features: disabled;
}

htm.Home
{
	mc-master-page: url('../templatepages/homepage.flmsp');
	mc-community-features: disabled;
}

/* Medium Layout */

@media only screen and (max-width: 64.063em)
{
	#content-section .right-section,
	#content-section .left-section
	{
		padding: 0;
	}

	.left-section div.button-group > div
	{
		margin-bottom: 20px;
	}

	.footer
	{
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

/* Small Layout */

@media screen and (max-width: 40em)
{
	div.topichero h1
	{
		font-size: 2em;
	}

	div.topichero h3
	{
		font-size: 1.2em;
	}

	#content-section
	{
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.footer-links,
	p.Copyright,
	.footer-icons
	{
		text-align: center;
	}
}

div.abcroundiconsdiv
{
	margin-top: -50px;
	text-align: center;
}

@media only screen and (max-width: 1279px)
{
	div.search	/*search bar on the home page*/
	{
		padding-top: -50px;
		padding-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
		width: 70%;
	}

	div.info-section > div:nth-child(1)
	{
		width: 40%;
		margin-left: 5%;
	}

	div.info-section > div:nth-child(2)
	{
		width: 40%;
		margin-left: 5%;
	}
}

@media only screen and (max-width: 767px)
{
	h1.home
	{
		font-family: 'Poppins Regular', 'Roboto Regular';
		font-size: 1.75em;
		font-weight: 500;
		text-align: center;
		text-shadow: 1px 1px var(--Lightest);
		color: var(--Light);
		line-height: 1em;
		border-bottom: none;
		margin-top: 50px;
	}

	h2.home
	{
		font-size: 1.50em;
		font-weight: 500;
		text-align: center;
		text-shadow: 1px 1px var(--Lightest);
		color: var(--Light);
		line-height: 1em;
		border-bottom: none;
	}

	div.topic-hero
	{
		background-size: cover;
		background-repeat: no-repeat;
		background-color: var(--Dark);
		background-image: url('../images/assets/hero/crs-bg-mobile.png');
		height: auto;
		padding-top: 0px;
		padding-bottom: 150px;
		margin-top: 0px;
		background-position: center;
		/* Create the parallax scrolling effect */
		background-attachment: fixed;
		background-position: center 0;
		border-top: 10px solid var(--Dark);
		border-bottom: 2px solid var(--Dark);
	}

	div.search	/*search bar on the home page*/
	{
		padding-top: -20px;
		padding-bottom: 5px;
		margin-left: auto;
		margin-right: auto;
		width: 70%;
	}

	div.info-section > div
	{
		float: left;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	div.info-section > div:nth-child(1)
	{
		width: 90%;
		margin-left: 0%;
	}

	div.info-section > div:nth-child(2)
	{
		width: 90%;
		margin-left: 0%;
	}
}

