/*<meta />*/

/*===========================================================================================================================================================

Hello! If this is your first time looking at a stylesheet within the text editor view, what you are reading right now is a "comment". Comments are added throughout this stylesheet with the purpose of making the source code easier to understand, comments will not be interpreted during the compile process. Since comments are not interpreted during the compile process, feel free to add or remove any comments.

For help with MadCap Flare go to Help Ribbon > Topics Section > Open Help. Alternatively visit the Flare Online Help at help.madcapsoftware.com

If you have any questions regarding how to work with this stylesheet or template project, please contact MadCap Technical Support. 
https://www.madcapsoftware.com/support/contact-options.aspx

===========================================================================================================================================================*/

/******************************************
General Home Body Styles
******************************************/

body
{
	font-family: Open Sans;
	line-height: 20px;
	background-color: #ffffff;
}

/******************************************
Header
******************************************/

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

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

/******************************************
Home & Body Container
******************************************/

 /* wraps the content on the home page */
div.home-container
{
	margin-left: auto;
	margin-right: auto;
}

.body-container,
._Skins_global_side_nav .body-container	
{
	 /* overrides padding set in the skin */
	padding: 0;
	
}

/******************************************
Sidenav Resizable Menu
******************************************/
.sidenav-wrapper 
{
    /* ensure sidenav-wrapper comes before nav-border in sidenav-layout flex row */
    order: 1;
    /* avoid horizontal scrolling on overflow */
    overflow-x: hidden;
}

.nav-border {
    /* resizable nav-border between nav menu and body content added via nav-resize.js script */
    background-color: #EEEFEE;
    /* ensure nav-border comes between sidenav-wrapper and body-container in sidenav-layout flex row */
    order: 2;
    /* allow horizontal (east-west) resizing only */
    cursor: ew-resize;
    /* don't allow nav-border to grow or shrink, and make it 3px wide */
    flex: 0 0 3px;
    /* ensure that text isn't selected while the mouse is being dragged */
    user-select: none;
}

.body-container {
    /* ensure body-container comes after nav-border in sidenav-layout flex row */
    order: 3;
}


/******************************************
Topic-Hero
******************************************/

div.topic-hero
{
	height: auto;
}

h1
{
	font-size: 2.5em;
	color: #333F48;
	font-weight: normal;
	line-height: 2.5em;
	font-weight: normal;
	margin: 0;
	margin-top: 2%;
	/* defines h1 as a flex item */
	display: flex;
	/* centers the flex item in it's container */
	justify-content: center;
}


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


div.search-home
{
  /* width to match the 20% left+right grid padding */
  width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/******************************************
Home Tiles
******************************************/

div.home-tiles
{
	/* format as a grid */
	display: grid;
	/* add padding around entire grid */
	/* top | right | bottom | left */
	padding: 0% 20% 5% 20%;
	/* space between tiles */
	gap: 34px;
	/* max column size 180px or 80%/3 of the available space, min size 1 fraction of the available space */
	grid-template-columns: repeat(auto-fit, minmax(max(180px, 90%/3), 1fr));
	/* row height determined by the tile with the most content */
	grid-auto-rows: max-content;
}

div.home-tiles > div
{
	background-color: #fff;
	/* include border and padding in an element's height and width */
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/* curved border */
	border-radius: 3px;
	/* shadow around div */
	box-shadow: 0px 0px 2px 2px #C2C5C8;
	/* space between contents and tile border */ 
	/* top | right | bottom | left */
	padding: 3% 10% 3% 10%;
}

/* text within home tiles */
p.tile-title
{
	color: #0057B8;
	font-size: 1.3em;
	font-weight: normal;
}

/* text within home tiles */
p.tile-content
{
	color: #333F48;
}

/* text within home tiles */
p.tile-button
{
	float: right;
}

/* complex selector: links within home tiles */
div.home-tiles a
{
	text-decoration: none;
	color: #0057B8;
}

/* complex selector: links within home tiles on hover */
div.home-tiles a:hover	
{
	color: #2D8DCC;
}

/* complex selector: links within home tile div on hover */
div.home-tiles > div:hover
{
	box-shadow: 0 0px 8px rgba(0,0,0,0.16), 0 0px 8px rgba(0,0,0,0.23);
	transform: scale(1.05);
}

/******************************************
Home Footer
******************************************/

div.home-footer
{
	background-color: #8a9297;
	padding: 1% 5%;
	margin-top: 5%;
}

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

/******************************************
Tablet and Mobile View
******************************************/

@media only screen and (max-width: 1279px) 
{
    /* hide nav border when nav pane is not displayed */
    .nav-border {
        display: none;
    }
}

@media only screen and (max-width: 767px)
{
	/* less home tile padding */
	div.home-tiles {
		padding-left: 30px;
		padding-right: 30px;
		padding-bottom: 10px;
	}
	
	/* bigger search bar */
	div.search-home,
	div.search-bar {
  		width: 90%;
	}
	
	/* smaller header without margins */
	h1 {
		font-size: 2em;
		margin: 0;
	}
}