/*<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

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

/*==Home Page General Styles==*/
/*@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');*/
/* blue color: #0A66C2 */
/*@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');*/

:root
{
	--fontSansSerif: 'OneStream Sans', Arial, sans-serif;
	--fontMono: 'OneStream Fono', 'Andale Mono', Consola, monospace;
}

@font-face 
{
	font-family: 'OneStream Sans';
	src: url(../Fonts/OneStreamSans-Regular.otf), local(OneStreamSans-Regular);
}

@font-face 
{
	font-family: 'OneStream Sans';
	src: url(../Fonts/OneStreamSans-Bold.otf), local(OneStreamSans-Bold);
	font-weight: bold;
}

@font-face 
{
	font-family: 'OneStream Sans';
	src: url(../Fonts/OneStreamSans-RegularItalic.otf), local(OneStreamSans-RegularItalic);
	font-style: italic;
}

@font-face 
{
	font-family: 'OneStream Fono';
	src: url(../Fonts/OneStreamFono-Regular.otf), local(OneStreamFono-Regular);
}

@font-face 
{
	font-family: 'OneStream Fono';
	src: url(../Fonts/OneStreamFono-Bold.otf), local(OneStreamFono-Bold);
	font-weight: bold;
}

@font-face 
{
	font-family: 'OneStream Fono';
	src: url(../Fonts/OneStreamFono-Regular.otf), local(OneStreamFono-Regular);
	font-style: italic;
}

body
{
	font-family: 'OneStream Sans';
	line-height: 1.5em;
	background: white;
	/* #bcdddd */
}

body:before
{
	content: "";
	display: block;
	background: white;
	/* #bcdddd */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

h1
{
	font-size: 1.9em;
}

h1.home
{
	font-family: 'OneStream Sans';
	font-size: 2em !important;
	font-weight: normal !important;
	color: whitesmoke !important;
	padding-left: 40px;
	line-height: 2.1;
}

h1.middle
{
	font-family: OneStream Fono;
	font-size: 1.3em !important;
	font-weight: normal !important;
	color: whitesmoke !important;
	padding-left: 40px;
	line-height: 2.1;
}

h1.bottom
{
	font-family: OneStream Fono;
	font-size: 1.3em !important;
	font-weight: normal !important;
	color: whitesmoke !important;
	padding-left: 40px;
	line-height: 2.1;
}

h2
{
	font-size: 1.6785em;
	color: #fff;
}

/* a
{
	text-decoration: none;
} */

p
{
	color: whitesmoke;
	/* Very Dark Gray */
	margin-bottom: 8px;
	margin-top: 8px;
	font-family: 'OneStream Sans' !important;
}

.center
{
	position: relative;
	margin-right: auto;
	margin-left: auto;
	float: none !important;
	text-align: center;
}

.img-hover:hover
{
	color: #ffeaa7;
	/* Pale Yellow - Canteloupe */
	transform: scale(1.25);
	transition: 1s;
}

.img-DR
{
	position: relative;
	bottom: 20px;
}

.off-canvas-content .main-section > .outer-row
{
	max-width: 100%;
	padding: 0;
}

.heading-text-block
{
	height: 40px;
	background-color: #373737;
	width: 52%;
	border-radius: 5px;
}

.off-canvas-wrapper-inner .outer-row
{
	max-width: 73em;
	/* was 75em */
}

/*******************************************************************************************/
/* Style The Dropdown Button */

.dropbtn
{
	background-color: #373737;
	color: white;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #373737;
	/*cursor: pointer;*/
	border-radius: 5px;
	transition: 1s;
	box-shadow: 0 0 20px #eee;
	text-transform: uppercase;
	font-family: Onestream Fono;
}

/* The container <div> - needed to position the dropdown content */

.dropdown
{
	position: relative;
	display: inline-block;
	top: 7rem;
	left: 10px;
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content
{
	display: none;
	position: absolute;
	background-color: #373737;
	min-width: 150px;
	/* was 160px */
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/* Links inside the dropdown */

.dropdown-content a
{
	background-color: whitesmoke;
	color: #373737;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* Change color of dropdown links on hover */

.dropdown-content a:hover
{
	background-color: #929292;
	color: white;
}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content
{
	display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn
{
	background-color: #929292;
	color: white;
	border: 1px solid #373737;
}

/********************************************************************************************************/

.box
{
	padding-bottom: -33px;
	width: 24%;
}

.cr-title
{
	padding-bottom: 20px;
	width: 450px;
}

.cr-title:hover
{
	color: white;
}

div.home-footer
{
	width: 100%;
	height: 160px;
	background: #373737;
	padding-left: 15px;
	margin-top: 200px;
}

div.home-footer:before
{
	content: "Check us out on social media";
	display: inline-block;
	/*padding-left: 10px;*/
	padding-top: 10px;
	color: whitesmoke;
}

div.home-footer:after
{
	content: "Want to learn more:";
	display: inline-block;
	padding-top: 10px;
	color: whitesmoke;
	position: relative;
	top: -165px;
	left: 756px;
}

div.home-footer > p
{
	color: whitesmoke;
}

.os-community
{
	display: inline-block;
	padding-top: 10px;
	color: whitesmoke;
	position: relative;
	top: 56px;
	left: 468px;
}

.os-community > a:hover
{
	color: white;
}

.os-navigator
{
	display: inline-block;
	padding-top: 10px;
	color: whitesmoke;
	position: relative;
	top: 32px;
	left: 541px;
}

.os-navigator > a:hover
{
	color: white;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* Copyright Notice Button         */

.button
{
	font-size: .8em;
	padding: 8px;
	color: #fff;
	background: #373737;
	border: 2px solid #373737;
	border-radius: 5px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease-out;
	margin-right: 0;
	margin-top: 8%;
	margin-left: 50%;
}

.button:hover
{
	background: #fff;
	color: #373737;
}

.overlay
{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
	z-index: 1000000;
}

.overlay:target
{
	visibility: visible;
	opacity: 1;
}

.popup
{
	margin: 70px auto;
	padding: 20px;
	background: #fff;
	border-radius: 10px;
	width: 50%;
	position: relative;
	transition: all 1s ease-in-out;
	z-index: 10000000;
	transform: translateY(60px);
}

.popup h2
{
	margin-top: 0;
	color: #373737;
	font-family: 'OneStream Sans';
}

.popup .close
{
	position: absolute;
	top: 20px;
	right: 30px;
	transition: all 200ms;
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	color: #373737;
}

.popup .close:hover
{
	color: #929292;
}

.popup .content
{
	max-height: 30%;
	overflow: auto;
}

.popup .content > p
{
	color: #373737;
}

@media screen and (max-width: 700px)
{
	.box
	{
		padding-bottom: 10px;
		width: 70%;
	}

	.popup
	{
		width: 70%;
	}
}

@keyframes moveInDown 
{
    0% {
    opacity: 0;
    transform: translateY(-100px);
    }

    80% {
    transform: translateY(10px);
    }

    100% {
    opacity: 1;
    transform: translate(0);
    }
} 

/* End of Copyright Notice Button   */
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

button.mc-dropdown-item
{
	border: none;
	background: transparent;
	text-align: left;
	font: inherit;
	font-size: 14px;
}

.search-bar._Skins_SearchHome.mc-component .search-filter
{
	height: 4em;
	border-top: solid 2px #000000;
	border-bottom: solid 2px #000000;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
	width: 45px;
	background-color: white;
	/* background: transparent url(Images/Filters icon.PNG) no-repeat center center; */
	-pie-background: transparent url('Skins/Default/Stylesheets/Components/Images/FilterOutline.png') no-repeat center center;
}

.search-bar.search-bar-container._Skins_SearchHome.mc-component .search-submit
{
	background-color: white;
	border-top: solid 2px #373737;
	border-bottom: solid 2px #373737;
}

.search,
.search-bar
{
	font-size: 14pt;
}

.search-bar._Skins_SearchHome.mc-component .search-field
{
	color: black;
}

nav.title-bar
{
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	/* position: fixed;
	top: 0;
	width: 98%;
    margin-left: 15px; */
	/* height: 85px;
	z-index: 1; */
	/*border-bottom: 1px solid #5564FF;*/
	/* background: url(../Images/black_banner.jpg) center center; */
	/* background: #00985B; */
	background-size: cover;
	background-position-y: center;
}

/* ul.navigation {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    z-index: 2;
    position: relative;
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 0;
    background-repeat: repeat;
    background-position: center center;
    text-align: center;
    text-indent: 0px;
    white-space: normal;
    color: #7E8890; 
    font-family: 'OneStream Sans';
    font-size: 14px;
    font-weight: normal;
    padding-left: 20px;
    padding-right: 20px;
} */

/* ul.navigation li > a 
{
    display: block;
    line-height: 25px;
    color: white;
    font-family: 'OneStream Sans';
    font-size: 16px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
} */

/* ul.navigation li > a:hover 
{
	color: whitesmoke;
	transition: .5s;
	background-color: #373737;
} */

/* ul.navigation ul > li > a:hover
{
	color: whitesmoke;
	font-size: 16px !important;
} */

/* ul.navigation li.is-expanded > a {
	color: #d4d4d4;
	font-weight: bold;
	background-color: transparent;
} */

/* This makes the background on the navigation objects transparent when hovering */

/* ul.navigation li:hover {
	background: transparent;
} */

/* ul.navigation ul ul > li > a {
    margin-right: 0px;
    padding-right: 10px;
    color: #373737;
}

ul.navigation ul > li > a {
    padding: 0 15px;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 16px;
    white-space: nowrap;
	color: #373737;
	border-radius: 5px;
}

ul.navigation ul {
    z-index: 1000;
    width: auto;
    margin: 0;
    padding: 10px 0 10px 0;
    position: absolute;
    background-color: #D4D4D4; 
}

ul.navigation ul, ul.navigation > li.has-children:after 
{
    -webkit-transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
    visibility: hidden;
    opacity: 0;
} */

.has-children is-expanded
{
	background: transparent;
}

ul.menu.mc-component
{
	overflow-y: auto;
	color: #000000;
	font-size: 1em;
	font-weight: normal;
	font-style: normal;
	line-height: 1em;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 300px;
	height: auto;
	max-height: 100%;
	background-color: #ffffff;
	border: 2px solid blue;
}

/*==Responsive Header Styles==*/

div.top-container
{
	width: 45%;
	margin: 0 auto;
	background-color: whitesmoke;
	padding: 40px 50px 30px;
	min-height: 250px;
	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;
	border: 2px solid #373737;
	border-radius: 0 0 5px 5px;
	padding-top: 55px;
}

div.top-container-title
{
	/* this is the title text */
	/*position: relative;*/
	width: 45%;
	height: 75px;
	/*display: inline-block;*/
	margin: 0 auto;
	/*margin-top: 9%; replaced with value below to maintain consistent resize*/
	/* margin-top: 120px; */
	margin-top: 1rem;
	margin-bottom: -10px;
	background-color: #373737;
	border-radius: 5px 5px 0 0;
	color: whitesmoke !important;
}

div.bottom-container
{
	width: 45%;
	margin: 0 auto;
	margin-bottom: 11%;
	background-color: whitesmoke;
	padding: 0 50px 30px;
	min-height: 250px;
	/* 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;
	border: 2px solid #373737;
	border-radius: 0 0 5px 5px;
}

div.bottom-container-header
{
	/*position: relative;*/
	width: 45%;
	height: 50px;
	/*display: inline-block;*/
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: -10px;
	background-color: #373737;
	border-radius: 5px 5px 0 0;
	color: whitesmoke !important;
}

div.hero-image
{
	float: left;
	width: 33%;
	margin: 0;
	/*padding-top: 20px;*/
	border: 2px solid #373737;
	border-top: 30px solid #373737;
	border-radius: 5px;
	height: 175px;
	position: relative;
	top: -3px;
	left: -10px;
	background: white;
}

.release-text
{
	position: relative;
	top: -33px;
	text-align: center;
	/*left: 40px;*/
	font-size: 16px;
	color: whitesmoke;
}

.release-sub-text
{
	padding-left: 13px;
	color: #373737;
	font-size: 13px;
	position: absolute;
	display: block;
	top: 8px;
}

.top-container li
{
	list-style-type: none;
	font-size: 11px;
	margin-left: -30px;
	margin-bottom: -3px;
}

.top-container li a
{
	text-decoration: none;
	color: #373737;
}

.top-container li a:hover
{
	text-decoration: none;
	color: orange;
}

.top-container li a:before
{
	display: inline;
	content: url(../Images/HomePage/favicon.png);
	position: relative;
	margin-right: 5px;
}

div.heading-search-container
{
	float: left;
	width: 96%;
	/*padding-top: 30px;*/
}

.search-bar._Skins_SearchHome.mc-component
{
	display: block;
	width: 100%;
	/*height: 4em;*/
	margin-top: -30px;
}

.search-bar._Skins_SearchHome.mc-component .search-field
{
	height: 4em;
	border: 2px solid #373737;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	color: #5F5F5F;
	/* Very Dark Gray */
	/*font-size: 16pt;*/
	padding-left: 10px;
	background-color: white;
	margin-left: 10px;
}

.search-bar._Skins_SearchOther.mc-component .search-field
{
	height: 2.5em;
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: none;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
	color: #5F5F5F;
	/* Very Dark Gray */
	font-size: 1em;
	padding-left: 20px;
	background-color: #e8e9ea;
	/* Light Gray */
}

/*==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;
	margin-top: 1%;
	margin-bottom: 1%;
	width: 100%;
	clear: both;
	/*used to view the home tiles easier in the XML editor*/
}

div.home-tiles a
{
	font-family: 'OneStream Sans';
	color: #0984e3 !important;
	/* Ocean Blue */
}

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: white;
	border: 1px solid teal;
	color: black;
	height: 340px;
}

div.home-tiles > div:nth-child(2)
{
	width: 16%;
	margin-left: 2%;
	background: white;
	color: black;
	border: 1px solid teal;
	height: 340px;
}

div.home-tiles > div:nth-child(3)
{
	width: 16%;
	margin-left: 2%;
	background: white;
	border: 1px solid teal;
	color: black;
	height: 340px;
}

div.home-tiles > div:nth-child(4)
{
	width: 52%;
	margin-left: 24%;
	margin-top: 2%;
	padding-top: 80px;
	padding-bottom: 10px;
	padding-left: 50px;
	padding-right: 50px;
	margin-bottom: 2%;
	color: #000000;
	background-color: #fff;
	font-size: .8em;
	border: 1px solid teal;
}

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);
	transition: 1s;
}

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

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

p.tile-content
{
	color: black;
	font-size: .8em;
}

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

p.bottom-tile-title
{
	color: whitesmoke;
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 1.3em;
	font-weight: normal;
	font-family: 'OneStream Sans';
	position: relative;
	top: -32px;
	left: -5px;
}

p.bottom-tile-text
{
	font-size: 18px;
	margin-top: 35px;
	color: #373737;
	display: block;
}

.whats-new-layout	/* Main flex container for the whats new content */
{
	/*display: flex;*/
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: normal;
	align-items: normal;
	align-content: normal;
}

.whats-new-text	/* Container for the whats new bulleted list */
{
	display: block;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: auto;
	order: 0;
	/*padding: 10px;*/
}

.whats-new-button	/* Container for the submit feedback button */
{
	display: block;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: 150px;
	align-self: end;
	order: 0;
	padding: 10px;
}

.whats-new-list li
{
	font-size: 18px;
	/*list-style-type: none;*/
	font-family: 'OneStream Sans';
	margin-left: -0.8em;
	color: #373737;
	list-style: disc;
}

.whats-new-list li::marker
{
	font-size: 1.5em;
	line-height: 0.1;
}

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: #808080;
	/* Medium Gray */
}

.ideastream
{
	width: 45%;
	margin: 0 auto;
	font-family: 'OneStream Sans';
	color: #373737;
	display: block;
}

.ideastream:before
{
	content: url(../Images/HomePage/lightbulb.png);
	display: inline;
	position: relative;
	left: -4px;
	float: left;
	margin-right: 10px;
}

.ideastream-link
{
	color: #929292 !important;
	/* text-decoration: none; */
}

.ideastream-link:hover
{
	color: black !important;
}

/*======================================================================================*/
/* Styles for home tiles                                                                */
/*======================================================================================*/

.tile-container
{
	display: flex;
	width: 45%;
	/*height: 350px;*/
	border: 2px solid #373737;
	/*border-top: 40px solid #373737;*/
	border-radius: 0 0 5px 5px;
	align-items: center;
	justify-content: space-evenly;
	margin: 0 auto 25px;
	background: whitesmoke;
	flex-wrap: wrap;
	padding-top: 50px;
}

.tile-container-header
{
	/*position: relative;*/
	width: 45%;
	height: 50px;
	/*display: inline-block;*/
	margin: 0 auto;
	margin-top: 3%;
	margin-bottom: -10px;
	background-color: #373737;
	border-radius: 5px 5px 0 0;
	color: whitesmoke !important;
}

.tile-container-text
{
	font-family: 'OneStream Sans';
	color: whitesmoke;
	font-size: 1.3em;
	position: relative;
	top: 40px;
	left: 500px;
}

.tile-container:after
{
	background: #bcdddd;
	opacity: 0.2;
}

/* Vertically centers main text on the tile */

.ptext-1
{
	vertical-align: middle;
	display: inline-block;
	line-height: normal;
}

/* Creates the title text in CSS and centers vertically */
/* Transition lets the text move up smoothly */

.ptext-1:before
{
	content: "Design and Reference Guide";
	vertical-align: 50px;
	display: inline-block;
	font-size: 18px;
	color: #373737;
	transition: all 1s;
	font-family: 'OneStream Sans';
}

/* Moves the title text up slightly upon hover */

.tile-1:hover .ptext-1:before
{
	transform: translateY(-60px);
	/* was -65px */
}

/* Creates the tile and sets the text parameters */

.tile-1
{
	width: 200px;
	height: 250px;
	border: solid 2px #373737;
	/*display: flex;*/
	display: block;
	margin-bottom: 50px;
	text-align: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	line-height: 250px;
	border-top: solid 15px #373737;
	border-bottom: solid 15px #373737;
	border-radius: 5px;
	background: white;
}

/* Creates the box shadow on hover */

.tile-1:hover
{
	transition: all 1s;
	box-shadow: 5px 5px 20px gray;
}

/* Creates the slide-up box and text */

.tile-1:before
{
	content: "The Design and Reference Guide is our core platform guide. Use it to set up your projects.";
	color: white;
	text-align: left;
	line-height: 1.65em;
	font-size: 14px;
	display: flex;
	justify-content: center;
	width: 200px;
	height: 175px;
	border: solid 1px #5564FF;
	background: #5564FF;
	position: absolute;
	top: 300px;
	left: 0;
	transition: all 1s;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 5px;
}

/* Creates the bookmark image and positions it */

.tile-1:after
{
	content: url("../Images/bookmark-blue.png");
	position: absolute;
	top: -110px;
	left: 140px;
	transition: all 1s ease-in-out;
}

/* Moves the bookmark to the left side of tile on hover */

.tile-1:hover:after
{
	left: 35px;
	transition: all 1s ease-in-out;
}

/* Allows the slide-up text to slide up smoothly */

.tile-1:hover:before
{
	transition: all 1s;
	transform: translateY(-200px);
}

/* Creates the hyperlink in the slide up text and positions it */
/* Hyperlink is invisible to start */

.anchor:before
{
	content: "Go";
	/*color: teal;*/
	color: white;
	position: absolute;
	bottom: 10px;
	right: 25px;
	width: 50px;
	height: 25px;
	border: 1px solid white;
	background-color: #373737;
	border-radius: 20px;
	text-align: center;
	line-height: 25px;
	opacity: 0;
	/* background-image: linear-gradient(to right, #B6BDFF 0%, #5564FF 100%); */
	transition: 0.5s;
	background-size: 200% auto;
	box-shadow: 0 0 20px #eee;
}

/* Makes the hyperlink visible on hover */

.tile-1:hover .anchor:before
{
	transition: all 3.75s;
	opacity: 1;
	transform: translateY(-2px);
}

/* Vertically centers main text on the tile */

.ptext-2
{
	vertical-align: middle;
	display: inline-block;
	line-height: normal;
}

/* Creates the title text in CSS and centers vertically */
/* Transition lets the text move up smoothly */

.ptext-2:before
{
	content: "Videos";
	vertical-align: 50px;
	display: inline-block;
	font-size: 18px;
	color: #373737;
	transition: all 1s;
	font-family: 'OneStream Sans';
}

/* Moves the title text up slighly upon hover */

.tile-2:hover .ptext-2:before
{
	transform: translateY(-60px);
	/* was -65px */
}

/* Creates the tile and sets the text parameters */

.tile-2
{
	width: 200px;
	height: 250px;
	border: solid 2px #373737;
	/*display: flex;*/
	display: block;
	margin-bottom: 50px;
	text-align: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	line-height: 250px;
	border-top: solid 15px #373737;
	border-bottom: solid 15px #373737;
	border-radius: 5px;
	background: white;
}

/* Creates the box shadow on hover */

.tile-2:hover
{
	transition: all 1s;
	box-shadow: 5px 5px 20px gray;
}

/* Creates the slide-up box and text */

.tile-2:before
{
	content: "Learn how to use our products by watching videos. They cover a variety of topics.";
	color: white;
	text-align: left;
	line-height: 1.65em;
	font-size: 14px;
	display: flex;
	justify-content: center;
	width: 200px;
	height: 175px;
	border: solid 1px #F67D02;
	background: #F67D02;
	position: absolute;
	top: 300px;
	left: 0;
	transition: all 1s;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 5px;
}

/* Creates the bookmark image and positions it */

.tile-2:after
{
	content: url("../Images/bookmark-pink.png");
	position: absolute;
	top: -110px;
	left: 140px;
	transition: all 1s ease-in-out;
}

/* Moves the bookmark to the left side of tile on hover */

.tile-2:hover:after
{
	left: 35px;
	transition: all 1s ease-in-out;
}

/* Allows the slide-up text to slide up smoothly */

.tile-2:hover:before
{
	transition: all 1s;
	transform: translateY(-200px);
}

/* Creates the hyperlink in the slide up text and positions it */
/* Hyperlink is invisible to start */

.anchor:before
{
	content: "Go";
	/*color: teal;*/
	color: white;
	position: absolute;
	bottom: 10px;
	right: 25px;
	width: 50px;
	height: 25px;
	border: 1px solid white;
	background-color: #373737;
	border-radius: 20px;
	text-align: center;
	line-height: 25px;
	opacity: 0;
}

/* Makes the hyperlink visible on hover */

.tile-2:hover .anchor:before
{
	transition: all 3.75s;
	opacity: 1;
	transform: translateY(-2px);
}

/* Moves the title text up slighly upon hover */

.tile-2:hover .ptext-2:before
{
	transform: translateY(-60px);
	/* was -65px */
}

/* Makes the hyperlink visible on hover */

.tile-3:hover .anchor:before
{
	transition: all 3.75s;
	opacity: 1;
	transform: translateY(-2px);
}

/* Vertically centers main text on the tile */

.ptext-3
{
	vertical-align: middle;
	display: inline-block;
	line-height: normal;
}

/* Creates the title text in CSS and centers vertically */
/* Transition lets the text move up smoothly */

.ptext-3:before
{
	content: "Release Notes";
	vertical-align: 50px;
	display: inline-block;
	font-size: 18px;
	color: #373737;
	transition: all 1s;
	font-family: 'OneStream Sans';
}

/* Moves the title text up slighly upon hover */

.tile-3:hover .ptext-3:before
{
	transform: translateY(-60px);
	/* was -65px */
}

/* Creates the tile and sets the text parameters */

.tile-3
{
	width: 200px;
	height: 250px;
	border: solid 2px #373737;
	/*display: flex;*/
	display: block;
	margin-bottom: 50px;
	text-align: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	line-height: 250px;
	border-top: solid 15px #373737;
	border-bottom: solid 15px #373737;
	border-radius: 5px;
	background: white;
}

/* Creates the box shadow on hover */

.tile-3:hover
{
	transition: all 1s;
	box-shadow: 5px 5px 20px gray;
}

/* Creates the slide-up box and text */

.tile-3:before
{
	content: "Check out the release notes.";
	color: white;
	text-align: left;
	line-height: 1.65em;
	font-size: 14px;
	display: flex;
	justify-content: center;
	width: 200px;
	height: 175px;
	border: solid 1px #6E26C1;
	background: #6E26C1;
	position: absolute;
	top: 300px;
	left: 0;
	transition: all 1s;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 5px;
}

/* Creates the bookmark image and positions it */

.tile-3:after
{
	content: url("../Images/bookmark-3.png");
	position: absolute;
	top: -110px;
	left: 140px;
	transition: all 1s ease-in-out;
}

/* Moves the bookmark to the left side of tile on hover */

.tile-3:hover:after
{
	left: 35px;
	transition: all 1s ease-in-out;
}

/* Allows the slide-up text to slide up smoothly */

.tile-3:hover:before
{
	transition: all 1s;
	transform: translateY(-200px);
}

.whats-new
{
	display: block;
	width: 750px;
	height: 250px;
	background-color: white;
	border: 2px solid teal;
	border-top: 40px solid #373737;
	border-radius: 10px;
	margin: 25px auto;
}

.copyright
{
	font-family: 'OneStream Sans';
	font-size: 14px;
	position: absolute;
	top: 360px;
	right: 380px;
	color: teal;
}

/*============================================================================*/
/* End of style for home page written by Keith Grimes                         */
/*============================================================================*/

.submit-feedback
{
	text-align: center;
	/* Layout fix */
	text-transform: uppercase;
	font-family: OneStream Fono;
	font-size: 14px;
	color: white;
	/*position: absolute;  Layout fix */
	border: 1px solid #373737;
	border-radius: 5px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	cursor: pointer;
	/*bottom: 165px; Layout fix */
	/*right: 375px; Layout fix */
	/* background-image: linear-gradient(to right, #4CB8C4 0%, #3CD3AD  51%, #4CB8C4  100%); */
	background: #373737;
	transition: 0.5s;
	background-size: 200% auto;
	box-shadow: 0 0 20px #eee;
}

.submit-feedback a
{
	text-decoration: none;
	color: white;
	font-weight: normal;
}

.submit-feedback:hover
{
	color: #fff;
	background: #929292;
	text-decoration: none;
}

.btn-grad
{
	background-image: linear-gradient(to right, #4CB8C4 0%, #3CD3AD  51%, #4CB8C4  100%);
	margin: 10px;
	padding: 15px 45px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;
	box-shadow: 0 0 20px #eee;
	border-radius: 10px;
	display: block;
}

.btn-grad:hover
{
	background-position: right center;
	/* change the direction of the change here */
	color: #fff;
	text-decoration: none;
}

/* Mediabox Styles */

.mediabox-wrap
{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000;
	background-color: rgba(0,0,0,0.8);
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 999 !important;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: mediabox;
	animation-name: mediabox;
}

@-webkit-keyframes mediabox {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} 

@keyframes mediabox {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} 

.mediabox-content
{
	max-width: 680px;
	display: block;
	margin: 0 auto;
	height: 100%;
	position: relative;
}

.mediabox-content iframe
{
	max-width: 100% !important;
	width: 100% !important;
	display: block !important;
	height: 480px !important;
	border: none !important;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}

.mediabox-hide
{
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: mediaboxhide;
	animation-name: mediaboxhide;
}

@-webkit-keyframes mediaboxhide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
} 

@keyframes mediaboxhide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
} 

.mediabox-close
{
	position: absolute;
	top: 0;
	cursor: pointer;
	bottom: 428px;
	/* was 528 */
	right: 0px;
	margin: auto 0;
	width: 24px;
	height: 24px;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAMvSURBVHja7Js9aBRBFMd/d1lPY6FiJVjY+Fkoxl7wA1Q0prQRS6tgoZV2MWIRRVHUUq3U+JnESrS2sBXBzipREWMlATXwt8gFznC5nd15M7Nn8uC45nZnfr/dY96+N1uTxFKOOks8lgUU/H2t4tJqIQUcAiaBGeBymcECRgO4B/wBPgJ9zkdKcvkclfRL/8ZtSTXH40N+GpLGF8zth6Q9Lse7DHCsDXxVJLSDLyQhb4B+Sb/VOVJJ6ATfKqGvrIDjDvCpJLjAz8d0JwmLDTBQAD62hIakiYJzm5a021VAfwn4WBLKwLdK2JUnIJP0XX4RSoIP/Hy8W3jeepv1dL3nmjwI3DLOExrAU2DA8zwb8xKhGeCuwYQtJTSAZwbwAHdcEqFM0mPZhO/foSHppdFcrraby2IDV0FCcPi8PCClhCjwLplgCgkrDeGv5I3pcjViSogK7yogloTo8EUEhJaQBL6oAGsJ9yVtkrRD0qsU8JKolagKZ8AD4ETFymFXgPOAQpXE5mMWOAk86XZ4n6pwlSSUhvcti1dBghe8RV8gpYQRX3irxkgKCSPABV94y85QTAlm8NatsRgSTOGBUnmAS57w3KiA0Ro3gHOW8KEEAOwE3hvfXWubFauu6A6vCND07OmW9viq5vpsGT3AtRAN2XoA+BfAwQBiTweoNpMZw48BRwKuAoPN7zNVWwZjwAfpO9S7DN5cQmYAPw4cTvAsYPJ3qHcpvNmdUO9ieBMJZQT0AhMVgfeWUC8BP87cjjHfuA6sATY0c4c0EgpUUHslvTaq3l5aUL1N1oarAnxSCVWBTyYhJvyw41XJJI3GkpAH/yYyfHQJi01gdUL4qBKqCh9NQrtBx4wGvGi0XS6T9MhoTkN5AtZVDN5awlTePsGfwDfPjGwYGDKu3s4Cp4BRz/N8cskED0iaqciVt7wTvkra5roKlJEQGt5HwhdJ24vmAUUkDEV+VyCT9NBxbp/bXXnXTNBFQmz4IhI6wrs+C+zvICEVvIuEKUlbrZ4G97WRkBq+k4RJSVusd4ntlfSheVudrQh8q4SbmntH6K2kzSF3if1Xsfzq7LKAJR5/BwCdAQBJn4egPgAAAABJRU5ErkJggg==') no-repeat;
	background-size: 24px 24px;
	-webkit-background-size: 24px 24px;
	-moz-background-size: 24px 24px;
	-o-background-size: 24px 24px;
	z-index: 10;
}

.mediabox-close:hover
{
	opacity: 0.5;
}

@media all and (max-width: 1338px) and (min-width: 10px)
{
	.archives
	{
		right: -500px;
	}
}

@media all and (max-width: 1317px) and (min-width: 10px)
{
	.archives
	{
		right: -500px;
	}
}

@media all and (max-width: 1279px) and (min-width: 10px)
{
	.archives
	{
		right: -500px;
	}
}

@media all and (max-width: 1052px) and (min-width: 10px)
{
	.archives
	{
		right: -500px;
	}
}

@media all and (max-width: 768px) and (min-width: 10px)
{
	.archives
	{
		right: -500px;
	}

	.mediabox-content
	{
		max-width: 90%;
	}
}

@media all and (max-width: 600px) and (min-width: 10px)
{
	.archives
	{
		right: -500px;
	}

	.mediabox-content iframe
	{
		height: 320px !important;
	}

	.mediabox-close
	{
		bottom: 362px;
	}
}

@media all and (max-width: 480px) and (min-width: 10px)
{
	.mediabox-content iframe
	{
		height: 220px !important;
	}

	.mediabox-close
	{
		bottom: 262px;
	}
}

input:focus-visible
{
	outline: -webkit-focus-ring-color auto 0;
}

/*===========================================================================================================================================================
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 (max-width: 1440px)
{
    div.top-container
    {
        width: 65%;
    }

    div.top-container-title
    {
        width: 65%;
        margin-top: 120px;
    }

    .tile-container
    {
        width: 65%;
        height: auto;
        flex-wrap: wrap;
        padding-top: 50px;
    }

    .tile-1, .tile-2, .tile-3
    {
        margin-bottom: 50px;
        display: block;
    }

    .tile-container-header
    {
        width: 65%;
    }

    .ideastream
    {
        width: 65%;
    }
    
    div.bottom-container
    {
        width: 65%;
    }
    
    div.bottom-container-header
    {
        width: 65%;
    }
}*/

@media only screen and (max-width: 1279px)
{
	div.home-tiles > div:nth-child(1)
	{
		width: 26%;
		margin-left: 10%;
	}

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

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

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

	/*div.top-container
	{
		margin-left: 10%;
		width: 80%;
	}*/

	div.top-container
	{
		width: 85%;
	}

	div.top-container-title
	{
		width: 85%;
	}

	.tile-container
	{
		width: 85%;
		flex-wrap: wrap;
	}

	.tile-container-header
	{
		width: 85%;
	}

	.ideastream
	{
		width: 85%;
	}

	div.bottom-container
	{
		width: 85%;
	}

	div.bottom-container-header
	{
		width: 85%;
	}
}

@media only screen and (max-width: 767px)
{
	/*div.top-container
	{
		margin-left: 5%;
		width: 90%;
	}*/

	div.hero-image
	{
		margin: auto;
		float: none;
		width: 60%;
	}

	div.heading-search-container
	{
		width: 100%;
		float: none;
	}

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

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

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

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

	div.home-tiles > div:nth-child(4)
	{
		margin-left: 5%;
		margin-top: 5%;
		width: 90%;
		padding-top: 20px;
		padding-right: 30px;
		padding-left: 30px;
	}
}