/*<meta conditions="kate-conditions.WIP" />*/

/* Contains styles for Home page and product Landing pages */

/*
 includes HOME PAGE STYLES 
 
***/

:root
{
	--blue: #043776;
	--dkgray: #333333;
	--green: #036800;
	--chrome: #c9c9cc;
	/* cool gray 4 */
	--platinum: #a1a1a4;
	/* cool gray 8 */
	--carbon: #707073;
	--red: #ed1c24;
	--color: #043776;
}

div.product-container,
div.announce-container
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: .5em;
	justify-content: center;
}

div.product-landing-container
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: .5em;
	justify-content: center;
}

/*original Fabric landing page style (1 of 2)*/

/*div.product-landing-container
{
	display: flex;
	flex-wrap: wrap;
	margin: 0 2em;
	max-width: 100%;
}*/

div.product-container .card
{
	display: block;
	/* width  25%; */
	height: auto;
	margin: 0;
	padding: 1.5em .5em;
	/*padding: 1em .5em;*/
	background-color: #fff;
	border: 1px solid #eee;
	text-align: center;
}

.card
{
	border: 1px solid transparent;
}

div.service-provider-container
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 2em;
	max-width: 100%;
	justify-content: space-evenly;
	align-items: center;
}

div.service-provider-container .card
{
	display: block;
	margin: 1em;
	padding: 1em .5em;
}

div.announce-container .card
{
	font-size: 1.2em;
	display: block;
	width: 20%;
	height: auto;
	margin: 1em;
	padding: 1em .5em;
	border: 1px solid #eee;
}

div.product-landing-container .card
{
	display: block;
	width: 25%;
	height: auto;
	margin: 0;
	padding: 1.5em .5em;
	/*padding: 1em .5em;*/
	background-color: #fff;
	border: 1px solid #eee;
	text-align: center;
}

/*original Fabric landing page style* (2 of 2)/
/*div.product-landing-container .card
{
	display: block;
	width: 10em;
	height: auto;
	margin: 1em;
	padding: 1em .5em;
	text-align: left;
}*/

div.product-container .card a,
div.product-container a:active,
div.product-container a:link,
div.product-container a:visited,
div.product-landing-container .card a,
div.product-landing-container a:link,
div.product-landing-container a:visited,
div.product-landing-container a:active,
.card
{
	text-decoration: none;
	text-align: center;
	border-top: 3px solid transparent;
}

div.announce-container .card a,
div.announce-container a:link,
div.announce-container a:visited,
div.announce-container a:active
{
	text-decoration: underline;
	text-align: center;
	color: var(--red);
}

div.announce-container > div:hover,
div.announce-container > div:focus
{
	color: #ed1c24 !important;
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	text-decoration: none;
	z-index: 2;
	-webkit-box-shadow: 0 2px 20px 8px rgba(0,0,0,.08);
	box-shadow: 0 2px 20px 8px rgba(0,0,0,.08);
}

/* div.product-container div:hover,
div.product-container > div:focus,
div.product-landing-container > div:hover,
div.product-landing-container > div:focus
{

	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	text-decoration: none;
	z-index: 2;
	-webkit-box-shadow: 0 2px 20px 8px rgba(0,0,0,.08);
	box-shadow: 0 2px 20px 8px rgba(0,0,0,.08);
	border-top: 3px solid #ed1c24;
}

div.product-container div:hover,
div.product-container > div:focus,
div.announce-container > div:hover,
div.announce-container > div:focus,
div.product-landing-container > div:hover,
div.product-landing-container > div:focus
{
	color: #ed1c24!important;
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	text-decoration: none;
	z-index: 2;
	-webkit-box-shadow: 0 2px 20px 8px rgba(0,0,0,.08);
	box-shadow: 0 2px 20px 8px rgba(0,0,0,.08);
	border-top:3px solid #ed1c24;
}*/

.card a:hover p
{
	/*color: #ed1c24!important;*/
}

.card > a:hover
{
	transform: scale(1.05);
	transition: transform .5s cubic-bezier(.25,.8,.25,1), -webkit-transform .5s cubic-bezier(.25,.8,.25,1);
	/*Below setting causes small show on icons within tiles (and only icons)*/
	/*box-shadow: 0 2px 20px 8px rgba(0,0,0,.08);*/
	z-index: 2;
	text-decoration: none;
}

/* red line over the top of the card */

/*
.card_animate_border {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
	display: block;	
}

.card_animate_border-line:hover + .card_animate_border {
	display: block;
	height: 3px;
	background: #ed1c24;
	transition: width .5s cubic-bezier(.25,.8,.25,1);
	-moz-transition: width .5s cubic-bezier(.25,.8,.25,1);
	-o-transition: width .5s cubic-bezier(.25,.8,.25,1);
	-webkit-transition: width .5s cubic-bezier(.25,.8,.25,1);
}

*/

div.service-provider-container .card a,
div.service-provider-container a:link,
div.service-provider-container a:visited,
div.service-provider-container a:active
{
	text-decoration: none;
	text-align: center;
}

div.service-provider-container > div:hover,
div.service-provider-container > div:focus
{
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	text-decoration: none;
	-webkit-box-shadow: 0 2px 20px 8px rgba(0,0,0,.08);
	box-shadow: 0 2px 20px 8px rgba(0,0,0,.08);
}

h2.landing
{
	text-align: center;
}

#announce
{
	margin: 0;
	padding: 1em 5%;
	display: block;
	background: none;
}

div.announce-container .card
{
	background-image: url('../Images/bgs/bg-image-3.png');
	background-repeat: no-repeat;
	background-size: cover;
}

._Skins_LightMode .announce-container .card .announce-link,
._Skins_LightMode .announce-container .card a,
._Skins_LightMode .announce-container .card a:link,
._Skins_LightMode .announce-container .card a:visited,
._Skins_DarkMode .announce-container .card .announce-link,
._Skins_DarkMode .announce-container .card a,
._Skins_DarkMode .announce-container .card a:link,
._Skins_DarkMode .announce-container .card a:visited
{
	color: var(--red);
	font-weight: bold;
	text-decoration: none;
}

._Skins_LightMode .announce-container .card
{
	background-color: #fff;
}

._Skins_DarkMode .announce-container .card
{
	background-color: #333;
}

.landing-page-heading
{
	font-size: 26px;
	line-height: 33.8px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}

.product-landing-heading
{
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	margin: 0.5em 0;
	padding: .25em .25em;
}

p.api-note
{
	font-size: .7em;
	margin: 0;
	padding: 0;
	color: #ed1c24;
	/*red*/
}

p.landing-page-describe
{
	line-height: 1.1em;
	mc-disable-glossary-terms: true;
	color: var(--dkgray);
	text-decoration: none;
	font-size: .9em;
	margin: 0;
	padding: .25em .25em;
	text-align: center;
}

._Skins_DarkMode p.landing-page-heading,
._Skins_DarkMode p.landing-page-describe,
._Skins_DarkMode p.api-note
{
	color: var(--platinum);
}

._Skins_DarkMode .landing-page-heading a
{
	font-size: 1em;
}

._Skins_DarkMode .landing-page-describe a
{
	font-size: .8em;
}

._Skins_DarkMode .api-note a
{
	font-size: .7em;
}

#products,
#products_2
{
	margin: 0 5%;
}

#videos
{
	margin: 0px;
	padding: 3rem 5%;
}

/************** HOME PAGE STYLES ***************/
/* ---------------------------------------------------------------------------------------------------------------------------------- */

div.home-page-layout
{
	margin: 3em;
}

.hero
{
	background-image: url('../Images/bgs/bg-hero-overlay.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #000;
	padding: 40px 0;
	margin: 0;
}

.home h1
{
	font-size: 3.5em;
	font-weight: 800;
}

.home h1
{
	padding-bottom: 10px;
	font-size: 60px;
	line-height: 60px;
	font-weight: 800;
}

.home h2
{
	margin-bottom: 4px;
	margin-top: 20px;
	font-size: 48px;
	line-height: 62px;
}

.home h3
{
	/* margin-bottom: 4px;
	font-size: 26px;
	line-height: 33.8px; */
}

div.hero p
{
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

div.hero p,
div.hero h1
{
	text-align: center;
	color: #fff;
}

div.get-started
{
	text-align: center;
	margin: 0;
	padding: 1px 0;
	font-size: 1.3em;
}

._Skins_LightMode div.get-started
{
	background-color: #FFC418;
}

._Skins_DarkMode div.get-started
{
	background-color: #ed1c24;
}

#resources,
#service-providers
{
	margin: 0;
}

._Skins_LightMode .home-resources,
._Skins_LightMode .home-service-providers
{
	padding: 3em 5%;
	background-color: #eeeeee;
}

._Skins_DarkMode .home-resources,
._Skins_DarkMode .home-service-providers
{
	background-color: #3c3c3c;
	padding: 2em 3em 0 3em;
}

/* hide search filter on home page */

.search-bar._Skins_SearchBar_Home.mc-component .search-filter
{
	display: none;
}

.topic-resources
{
	padding: 2em 3em 0 3em;
	margin: 2em 0 0 0;
}

.topic-resources .card
{
	padding: 1em;
	margin: 0 1em;
	border: 1px #000 solid;
}

div.resource-container
{
	display: flex;
	justify-content: space-evenly;
}

div.resource-container .card
{
	width: 33%;
	padding: 1em;
	text-align: left;
	margin: 1em;
}

._Skins_LightMode .resource-container .card
{
	color: #000;
}

._Skins_DarkMode .resource-container .card
{
	color: #fff;
}

.resource-heading
{
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
}

.resource-container .card .resource-link,
.resource-container .card a,
.resource-container .card a:link,
.resource-container .card a:visited,
.resource-icon
{
	color: var(--red);
	/*	font-weight: bold; */
	font-size: 1em;
	text-decoration: none;
}

.resource-container .card a:hover,
.resource-icon
{
	color: var(--blue);
}

btn.sp-btn
{
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin-top: 15px;
}

._Skins_LightMode .sp-btn a,
._Skins_LightMode .sp-btn a:link,
._Skins_LightMode .sp-btn a:visited,
._Skins_LightMode .sp-btn a:hover,
._Skins_DarkMode .sp-btn a,
._Skins_DarkMode .sp-btn a:link,
._Skins_DarkMode .sp-btn a:visited,
._Skins_DarkMode .sp-btn a:hover
{
	color: var(--primary-colors-eq-red, #E91C24);
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 20.8px;
	text-transform: uppercase;
	border: 2px solid #E91C24;
	padding: 13px 20px;
	display: inline-block;
	transition: 0.5s cubic-bezier(.25,.8,.25,1);
	position: relative;
}

.sp-btn:hover
{
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

img.resource-icon
{
	height: 10px;
}

div.center
{
	text-align: center;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}

@media only screen and (max-width: 600px)
{
	._Skins_LightMode
	{
		background: none;
		background-color: transparent;
	}

	#resources
	{
		background-color: #696969;
		color: #ffffff;
	}
}