/*<meta />*/

@import url('https://fonts.googleapis.com/css?family=Lato:regular_italic_bold_bolditalic');

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

/* Color definitions*/

:root
{
	--shenouda-red: rgb(180,32,43);
	--shenouda-gray: rgb(102,102,102);
	--blue: rgb(51,87,167);
	--light-blue: rgb(239,242,248);
	--blue-gray: rgb(139, 162,214);
	--yellow: rgb(192,189,49);
	--light-gray: rgb(242,242,242);
}

body
{
	background-color: white;
	color: black;
	font-size: 1em;
	font-family: 'Lato';
	/*, sans-serif*/
	font-weight: normal;
	font-style: normal;
	line-height: 1.4;
	mc-hyphenate: never;
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
img
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6
{
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 0.5em;
	line-height: 1.2;
}

h1
{
	font-size: 1.64em;
	color: var(--shenouda-red);
}

h1.fullpage
{
	margin-top: 0em;
}

h2
{
	font-size: 1.45em;
	color: var(--blue-gray);
}

h3
{
	font-size: 1.28em;
	color: var(--blue);
}

h4
{
	font-size: 1.13em;
	color: var(--blue-gray);
}

h5
{
	font-size: 1em;
	/* Font size ratio = 0.8835*/
	color: var(--blue);
}

h6
{
	font-size: 1em;
	color: var(--blue-gray);
}

p,
li
{
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

li
{
	margin-left: 1.5em;
}

a,
a:visited
{
	color: var(--shenouda-red);
	text-decoration: none;
}

a:hover
{
	color: var(--blue-gray);
	text-decoration: none;
}

div.contact-info,
div.social
{
	margin-top: 3em;
	margin-bottom: 1em;
	font-size: 0.8em;
	color: var(--blue-gray);
	font-weight: bold;
}

div.social
{
	text-align: right;
}

div.contact-info p
{
	margin-top: 0.33em;
	margin-bottom: 0.33em;
}

div.contact-info > *:first-child
{
	margin-bottom: 0.67em;
}

div.contact-info > *:last-child
{
	margin-top: 1em;
}

div.social p
{
	margin-top: 0.67em;
}

img.social
{
	height: 21px;
	padding-left: 1em;
}

@media only screen and (max-width: 767px)
{
	div.contact-info
	{
		margin-top: 2em;
	}

	div.social
	{
		margin-top: 0em;
		text-align: left;
	}
}

/* Styles for togglers. */

MadCap|toggler
{
	color: var(--blue-gray);
	mc-closed-image: none;
	mc-open-image: none;
	mc-image-spacing: 0px;
}

MadCap|toggler:hover
{
	color: var(--blue);
}

/* Use CSS to toggle the toggler text. Based on an idea from Dave Lee on the slack Flare user group.
This works with the current snippets for open and closed states; hence, it works for any snippet so designed.
In general, whichever part of the snippet is displayed depends upon the data-mc-state of the enclosing element, which could be a toggler or a drop-down text. However, a toggler could be inside a drop-down text. Thus, one has to delineate the two cases to allow a toggler inside a drop-down text to toggle independently of an enclosing drop-down text.
NOTE that the advantage of this approach is that it is independent of what the Flare scripts do when the toggle or drop-down hotspot is clicked. The Flare scripts change the value of data-mc-state, to which the CSS reacts.
Changes may have to be made if MadCap changes the structure of built togglers and drop-down texts. */

.toggler[data-mc-state='closed'] .toggler-closed
{
	display: inline;
}

.toggler[data-mc-state='closed'] .toggler-open
{
	display: none;
}

.toggler[data-mc-state='open'] .toggler-closed
{
	display: none;
}

.toggler[data-mc-state='open'] .toggler-open
{
	display: inline;
}

/*[data-mc-target-name]
{
	overflow: hidden;
	height: 6em;
	display: block !important;
	background-image: linear-gradient(to bottom, transparent 0%, var(--light-blue) 100%);
}*/

ul#deliverables
{
	height: 12em;
	overflow-y: scroll;
	/*border-bottom: 1px solid var(--blue-gray);
	border-top: 1px solid var(--blue-gray);*/
}

MadCap|dropDown
{
	margin: 0px;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	mc-closed-image: url('../Images/angle_blue_down.png');
	mc-open-image: url('../Images/angle_blue_up.png');
	mc-image-spacing: 16px;
	mc-image-position: left;
}

@media only screen and (max-width: 767px)
{
	MadCap|dropDown
	{
		mc-image-position: right;
	}
}

MadCap|dropDownHotspot
{
	font-size: 1.45em;
	font-style: normal;
	font-weight: bold;
	color: var(--blue-gray);
}

MadCap|dropDownHotspot.sidebar
{
	font-size: 1.13em;
}

MadCap|dropDownHotspot:hover
{
	color: var(--blue);
}

MadCap|dropDownBody
{
	margin-left: 2em;
}

/* END togglers and drop-down lists */

div.toolbarContainer
{
	padding: 0px;
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	margin: 0px;
	height: 3em;
}

/* Post build fixes to the top menu. Remove extra padding and add borders. */

ul.navigation ul
{
	border: 1px solid var(--blue-gray);
	border-bottom-width: 0.33em;
	border-top-color: var(--shenouda-red);
	padding: 0em;
}

/* Default uses border to create the pointer; setting the bottom color of the border to transparent removes the pointer. Reference: https://css-tricks.com/snippets/css/css-triangle/ */

ul.navigation > li.has-children::after
{
	border-bottom-color: transparent;
}

/* Shadow added to bottom of top-nav */

.tab-bar	/*, title-bar-container */
{
	border-top: solid 1px var(--shenouda-gray);
	box-shadow: 0px 0px 6px 2px var(--shenouda-gray);
}

/* END post-build fixes ----------------------*/

p.owner
{
	float: right;
	clear: both;
}

p.owner img
{
	border: 1px solid black;
	width: 12em;
	height: auto;
	margin-left: 1em;
}

@media only screen and (max-width: 767px)
{
	p.owner
	{
		float: none;
		text-align: center;
	}

	p.owner img
	{
		margin-right: 1em;
	}
}

div.home-panel,
div.home2-panel
{
	padding: 0.5em;
	margin: 0em;
}

div.home-panel
{
	border: solid 1px var(--blue);
	border-top-width: 0.33em;
	height: 100%;
	/* This causes the panel to stretch to fill its parent. To make this work, the padding was moved from panel to parent. */
}

div.home2-panel
{
	color: white;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
	/* This causes the panel to stretch to fill its parent. To make this work, the padding was moved from panel to parent. */
}

div.home2-panel *:last-child
{
	margin-bottom: 2em;
}

a:hover > div.home2-panel
{
	transform: scale(1.05, 1.05);
}

/*div#popout a:hover > div.home2-panel
{
	transform: scale(1.05, 1.05);
}

div#bold a:hover > div.home2-panel
{
	font-weight: bold;
	color: black;
}

div#border a:hover > div.home2-panel
{
	border: var(--shenouda-gray) solid 4px;
}


div#dim a:hover > div.home2-panel
{
	opacity: 0.8;
}

div#withtext div.home2-panel
{
	height: 100%;
	padding: 0em;
}

div#withtext img
{
	width: 100%;
}

div#withtext a:hover > div.home2-panel
{
	transform: scale(1.05, 1.05);
}*/

@media only screen and (max-width: 767px)
{
	div.home-panel,
	div.home2-panel
	{
		/*height: auto;*/
	}
}

div.home-panel h1
{
	font-size: 1.33em;
}

div.home2-panel h1
{
	color: inherit;
	font-size: 2em;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
}

div.home2-panel p
{
	font-size: 1.2em;
	text-align: center;
	margin: 1em;
}

@media only screen and (max-width: 1279px)
{
	div.home2-panel p
	{
		margin-left: 0.25em;
		margin-right: 0.25em;
	}
}

div.main-content
{
	margin-right: 2em;
	margin-top: 0em;
	margin-bottom: 1em;
	margin-left: 0em;
}

div.news-box
{
	background-color: var(--light-gray);
	border: none 1px var(--blue);
	padding: 0.5em;
	margin-top: 0em;
}

div.home-panel *:first-child,
div.main-content *:first-child,
div.news-box *:first-child
{
	margin-top: 0em;
}

div.home-panel *:last-child,
div.main-content *:last-child,
div.news-box *:last-child
{
	margin-bottom: 0em;
}

/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/

div.home-page-3across,
div.home-page-3-full-across,
div.home-page-2across,
div.infographic-grid
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	display: -webkit-flex;
	/* Safari */
	-webkit-flex-direction: row;
	-webkit-flex-wrap: wrap;
	-webkit-justify-content: center;
	/* END Safari */
}

div.home-page-3-full-across
{
	margin-top: 0em;
}

div.infographic-grid
{
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

div.home-page-3across::before,
div.home-page-3across::after,
div.home-page-3-full-across::before,
div.home-page-3-full-across::after,
div.home-page-2across::before,
div.home-page-2across::after,
div.infographic-grid::before,
div.infographic-grid::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.home-page-3across > div:nth-child(3n+1),
div.home-page-3across > div:nth-child(3n+2),
div.home-page-3across > div:nth-child(3n+3),
div.home-page-3-full-across > div:nth-child(3n+1),
div.home-page-3-full-across > div:nth-child(3n+2),
div.home-page-3-full-across > div:nth-child(3n+3),
div.home-page-2across > div:nth-child(2n+1),
div.home-page-2across > div:nth-child(2n+2),
div.infographic-grid > div:nth-child(3n+1),
div.infographic-grid > div:nth-child(3n+2),
div.infographic-grid > div:nth-child(3n+3)
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-left: 0%;
	padding: 1em;
	/* Padding moved from child to here to allow child to fill parent with 100% height, I believe. */
	padding-top: 0em;
	padding-bottom: 2em;
}

div.home-page-3-full-across > div:nth-child(3n+1),
div.home-page-3-full-across > div:nth-child(3n+2),
div.home-page-3-full-across > div:nth-child(3n+3)
{
	padding: 0em;
}

div.infographic-grid > div:nth-child(3n+1),
div.infographic-grid > div:nth-child(3n+2),
div.infographic-grid > div:nth-child(3n+3)
{
	padding: 0em;
	padding-top: 0em;
	padding-right: 1em;
}

div.home-page-3across > div:nth-child(3n+1),
div.home-page-3across > div:nth-child(3n+2),
div.home-page-3across > div:nth-child(3n+3),
div.home-page-3-full-across > div:nth-child(3n+1),
div.home-page-3-full-across > div:nth-child(3n+2),
div.home-page-3-full-across > div:nth-child(3n+3),
div.infographic-grid > div:nth-child(3n+1),
div.infographic-grid > div:nth-child(3n+2),
div.infographic-grid > div:nth-child(3n+3)
{
	width: 33.33333%;
}

div.home-page-2across > div:nth-child(2n+1),
div.home-page-2across > div:nth-child(2n+2)
{
	width: 50%;
}

div.topic-page	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.topic-page::before
{
	content: ' ';
	display: table;
	clear: both;
}

div.topic-page::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.topic-page > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.topic-page > div:nth-child(1)
{
	width: 66.66667%;
	margin-left: 0%;
}

div.topic-page > div:nth-child(2)
{
	width: 33.33333%;
	margin-left: 0%;
}

@media only screen and (max-width: 1279px)
{
	div.topic-page > div:nth-child(1)
	{
		width: 66.66667%;
		margin-left: 0%;
	}

	div.topic-page > div:nth-child(2)
	{
		width: 33.33333%;
		margin-left: 0%;
	}
}

@media screen and (max-width: 800px)
{
	div.home-page-3across > div:nth-child(3n+1),
	div.home-page-3across > div:nth-child(3n+2),
	div.home-page-3across > div:nth-child(3n+3),
	div.home-page-3-full-across > div:nth-child(3n+1),
	div.home-page-3-full-across > div:nth-child(3n+2),
	div.home-page-3-full-across > div:nth-child(3n+3),
	div.home-page-2across > div:nth-child(2n+1),
	div.home-page-2across > div:nth-child(2n+2),
	div.infographic-grid > div:nth-child(3n+1),
	div.infographic-grid > div:nth-child(3n+2),
	div.infographic-grid > div:nth-child(3n+3)
	{
		width: 50%;
		margin-left: 0%;
	}

	div.topic-page > div:nth-child(1),
	div.topic-page > div:nth-child(2)
	{
		width: 100%;
		margin-left: 0%;
	}
}

@media screen and (max-width: 400px)
{
	div.home-page-3across > div:nth-child(3n+1),
	div.home-page-3across > div:nth-child(3n+2),
	div.home-page-3across > div:nth-child(3n+3),
	div.home-page-3-full-across > div:nth-child(3n+1),
	div.home-page-3-full-across > div:nth-child(3n+2),
	div.home-page-3-full-across > div:nth-child(3n+3),
	div.home-page-2across > div:nth-child(2n+1),
	div.home-page-2across > div:nth-child(2n+2),
	div.infographic-grid > div:nth-child(3n+1),
	div.infographic-grid > div:nth-child(3n+2),
	div.infographic-grid > div:nth-child(3n+3)
	{
		width: 100%;
		margin-left: 0%;
	}
}

/* Styles for infographics content. */

p.infographic,
li.infographic
{
	clear: both;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

p.infographic-panel
{
	padding: 0em;
}

div.infographic-grid *:first-child
{
	margin-top: 0em;
}

div.infographic-grid *:last-child
{
	margin-bottom: 0em;
}

img.infographic-left,
img.infographic-right,
img.infographic-left-larger
{
	mc-thumbnail: link;
	/*popup;*/
	/*mc-thumbnail-max-height: 6pc;*/
	height: auto;
	border: 1px solid black;
	margin-top: 0em;
	margin-bottom: 0.75em;
}

img.infographic-left,
img.infographic-right
{
	width: 25%;
}

img.infographic-left-larger
{
	width: 40%;
}

img.infographic-left,
img.infographic-left-larger
{
	float: left;
	margin-right: 0.5em;
	margin-left: 0em;
}

img.infographic-right
{
	float: right;
	margin-right: 0em;
	margin-left: 0.5em;
}