/*<meta />*/

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

/*FONTS*/

@font-face 
{
	font-family: 'robotobold';
	src: url('../fonts/roboto-bold-webfont.woff2') format('woff2'), url('../fonts/roboto-bold-webfont.woff') format('woff');
}

@font-face 
{
	font-family: 'robotoitalic';
	src: url('../fonts/roboto-italic-webfont.woff2') format('woff2'), url('../fonts/roboto-italic-webfont.woff') format('woff');
}

@font-face 
{
	font-family: 'robotolight';
	src: url('../fonts/roboto-light-webfont.woff2') format('woff2'), url('../fonts/roboto-light-webfont.woff') format('woff');
}

@font-face 
{
	font-family: 'robotoregular';
	src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'), url('../fonts/roboto-regular-webfont.woff') format('woff');
}

/*== Home Page General Styles ==*/

:root
{
	--Black: #000000;
	--Brand1: #00AEC7;
	--Brand2: #003865;
	--Primary: #1F8B9D;
	--Light: #ADB3B8;
	--Dark: #171A1C;
	--Medium: #ADB3B8;
	--purple: #685BC7;
	--ercot-secondary-green: #26D07C;
	--ercot-secondary-blue: #003865;
	--error: #9D311F;
	--ercot-accent-magenta: #890C58;
	--accent-yellow: #FFD100;
	--accent-orange: #FF8200;
	--link: #0063B4;
	--TOC1: #032E50;
	--TOC3: #7C858C;
	--TXTOther: #ADB3B8;
	--TOC2: #4A525A;
}

body
{
	font-family: 'robotoregular', sans-serif;
	line-height: 1.5em;
	background-color: #ffffff;
}

p
{
	margin-bottom: 8px;
	margin-top: 8px;
}

/*== Home header bar styles ==*/

.inner-wrap .tab-bar .nav-search	/*Prevents the search in the header from appearing on the home page*/
{
	display: none;
}

.inner-wrap .main-section > .outer-row
{
	max-width: 100%;
	padding: 0;
}

.title-bar-container
{
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	/*creates the shadow effect in the header*/
}

/*== home page masterpage styles ==*/

div.home-container	/*wraps the content on the home page*/
{
	margin-left: 20%;
	width: 80%;
}

.body-container
{
	padding: 0;
	border-top: solid 2px var(--Brand2) !important;
	/*Overrides padding set in the skin*/
}

/*== Home Page Topic Hero section ==*/

div.topic-hero
{
	padding-top: 20px;
	height: auto;
}

h1
{
	font-size: 2.6em;
	margin-bottom: 0.5em;
	line-height: 100%;
	color: var(--Brand1);
}

h2
{
	font-size: 1.8em;
	margin-bottom: 80px;
	line-height: 100%;
}

.search,
.search-bar
{
	margin: 0 auto;
}

div.search-home
{
	width: 70%;
	margin-left: 0%;
	margin-bottom: 5%;
	margin-right: 10%;
	padding: 0;
}

/*== Home-tiles section ==*/

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;
}

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

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

div.home-tiles > div
{
	float: left;
	background-color: var(--Primary);
	margin-bottom: 3%;
	overflow: hidden;
	padding: 2%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 382px;
}

div.home-tiles > div:nth-child(1)
{
	width: 33%;
	margin-left: 0%;
}

div.home-tiles > div:nth-child(2)
{
	width: 33%;
	margin-left: 4%;
}

div.home-tiles > div:nth-child(3)
{
	width: 70%;
	margin-left: 0%;
	padding-top: 5%;
}

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

p.tile-title
{
	color: #fff;
	margin-top: 0px;
	font-size: 1.3em;
	font-weight: bold;
	text-transform: uppercase;
}

p.tile-content
{
	color: #ffffff;
}

p.tile-button
{
	margin-top: 8px;
	float: right;
	margin-right: 8px;
}

div.home-tiles a	/*Complex Selector: Links within the home tiles will have the following properties*/
{
	text-decoration: none;
	color: #fff;
}

div.home-tiles a:hover	/*Complex Selector: When hovering over links within the home tiles the following properties will apply.*/
{
	color: var(--Brand2);
}

div.home-tiles > div:hover
{
	box-shadow: 0 12px 18px rgba(0,0,0,0.16), 0 12px 18px rgba(0,0,0,0.23);
	transform: scale(1.05);
}

/*== Home Page Footer ==*/

div.home-footer
{
	background-color: var(--ercot-secondary-blue);
	padding: 1% 5%;
	margin-top: 5%;
}

p.footer
{
	margin-top: 5px;
	margin-bottom: 5px;
	line-height: 13pt;
	color: #fff;
}

.search-bar._Skins_SearchHome.mc-component .search-field,
.search-bar._Skins_SearchHome.mc-component .search-field:focused
{
	border: solid 1px #00aec7 !important;
	outline: none;
}

div.home-footer p,
div.home-footer p a
{
	color: #fff;
}

MadCap|pageHeader
{
	border-bottom: 2px solid #005763;
}

/*===========================================================================================================================================================
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)
{
	div.home-container
	{
		width: 100%;
		margin-left: 5%;
	}

	div.search-home
	{
		margin-left: 0%;
		width: 90%;
	}

	div.home-tiles > div:nth-child(1)
	{
		margin-left: 0%;
		height: auto;
		width: 42.5%;
	}

	div.home-tiles > div:nth-child(2)
	{
		height: auto;
		width: 42.5%;
		margin-left: 5%;
	}

	div.home-tiles > div:nth-child(3)
	{
		margin-left: 0%;
		width: 90%;
	}

	div.footer
	{
		padding-top: 10px;
	}
}

@media only screen and (max-width: 767px)
{
	MadCap|searchBarProxy.homeSearchBar
	{
		width: 100%;
	}

	h1
	{
		font-size: 2.4em;
	}

	h2
	{
		font-size: 1.2em;
	}

	div.topic-hero
	{
		text-align: center;
	}

	div.home-container
	{
		width: 100%;
		margin-left: 0;
	}

	div.search-home
	{
		width: 80%;
		margin-left: 10%;
	}

	div.home-tiles-container
	{
		padding-bottom: 0;
	}

	div.home-tiles > div
	{
		padding: 5%;
		margin-top: 2%;
	}

	div.home-tiles > div:nth-child(1)
	{
		width: 80%;
		margin-left: 10%;
	}

	div.home-tiles > div:nth-child(2)
	{
		width: 80%;
		margin-left: 10%;
	}

	div.home-tiles > div:nth-child(3)
	{
		width: 80%;
		margin-left: 10%;
	}

	div.home-master-page-footer > div:nth-child(1)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.home-master-page-footer > div:nth-child(2)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.home-master-page-footer > div:nth-child(3)
	{
		width: 100%;
		margin-left: 0%;
	}
}

MadCap|pageHeader .title-bar .tab-bar
{
	
}