/*<meta />*/

@import url('css-variables.css');

/*Define the size and box sizing for the whole page*/

html.HomePage
{
	padding: 0;
	box-sizing: border-box;
}

html.HomePage body .body-container
{
	padding-left: 0;
	padding-right: 0;
}

html.HomePage body div#mc-main-content
{
	margin: auto;
	width: 80%;
}

@media (max-width: 768px)
{
	html.HomePage body div#mc-main-content
	{
		width: 100%;
		padding-right: 16px;
		padding-left: 16px;
	}
}

html.HomePage #mc-main-content .searchbar
{
	padding-right: 0;
}

body
{
	background-color: var(--background);
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

[data-theme="light"] div.body-container
{
	background-image: url('../../gfx/KX-site/light/background.png');
	background-repeat: no-repeat;
	/*background-attachment: fixed;*/
	background-position: top left;
}

[data-theme="light"] body.product div.body-container
{
	background: var(--background);
}

[data-theme="dark"] body
{
	background-image: url('../../gfx/KX-site/dark/background.png');
}

body.product
{
	background: var(--background);
}

h2
{
	margin-top: 3.5em;
	font-size: 1.7em;
}

/*Headings used in cards*/

.card h3
{
	color: var(--text-brand-default, #2159B2);
	font-family: var(--font-family-brand, "Euclid Square");
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px;
	/* 111.111% */
	text-decoration-line: underline;
	margin-top: 0;
}

/*A group of styles for links used in cards*/

a.heading
{
	color: var(--brand);
	font-size: 1.1em;
	font-weight: 500;
	min-width: 100%;
	min-height: 100%;
}

a.heading:link
{
	color: var(--font-color);
	text-decoration: none;
}

a.heading:visited
{
	color: var(--font-color);
}

a.heading:hover
{
	color: var(--font-color);
}

a.heading > .content > p
{
	font-weight: 300 !important;
}

/*The pair of main title entries on the Home page*/

p.booktitle
{
	color: var(--text-neutral-strongest, #1A1D22);
	font-family: var(--font-family-brand, "Euclid Square");
	font-size: var(--font-size-40, 40px);
	font-style: normal;
	font-weight: 600;
	line-height: var(--font-line-height-48, 48px);
	/* 120% */
	margin-top: 48px;
}

p.booksubtitle
{
	color: var(--text-neutral-strong, #2B2F38);
	font-family: var(--font-family-brand, "Euclid Square");
	font-size: var(--font-size-16, 16px);
	font-style: normal;
	font-weight: 500;
	line-height: var(--font-line-height-24, 24px);
	/* 150% */
	margin-top: 32px;
	margin-bottom: 32px;
}

@media (max-width: 768px)
{
	p.booktitle
	{
		font-size: 1.7em;
		line-height: 1.9em;
	}

	p.booksubtitle
	{
		font-size: 16px;
		line-height: 18px;
	}
}

h2.section
{
	color: var(--text-neutral-strong, #F9FAFB);
	font-family: var(--font-family-brand, "Euclid Square");
	font-size: 1.7em;
	font-style: normal;
	font-weight: 600;
	line-height: var(--font-line-height-36, 36px);
	margin-top: 2em;
	/* 128.571% */
}

/* Styles for container */

.cards
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 40px;
}

@media (max-width: 1024px)
{
	.cards
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px)
{
	.cards
	{
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* Styles for various card variants */

.card	/*basic card style*/
{
	display: flex;
	flex-direction: column;
	top: 0;
	border: 1px solid var(--border-neutral-weak, #E7E9ED);
	border-radius: 8px;
	margin: 0 20px;
	background: var(--background-brand-weakest, #FBFDFE);
	flex: 0 0 calc(33.33% - 40px);
	box-sizing: border-box;
	padding-top: 24px;
	padding-bottom: 32px;
	padding-left: 32px;
	padding-right: 32px;
}

/*hover behaviour for all card types*/

.card-flat:hover,
.card:hover,
.table-card:hover
{
	/*background-color:  #f9f9f9;*/
}

/*p size for all card types*/

.card p,
.card p a,
.card p a:hover,
.card p a:active,
a.card:hover,
a.card:active,
a.card
{
	font-size: 14px;
	font-weight: 400;
	color: var(--font-color);
	text-decoration: none;
	margin-right: 0;
	margin-left: 0;
}

/*styles for the icons in the card heading line*/

div.cardicon	/*A container for the icon, must be placed in the h3 tags. Float keeps the icon aligned. If an icon is irregular, margins*/
{
	float: left;
	margin-right: 7px;
}

div.cardicon > img	/*the icon height must be set to 1em, or a multiple of 1em, to make the h3 title wrap nicely against the icon*/
{
	width: auto;
	height: 1em;
}

/*end of the styles for the icons in the card heading line*/
/*used in the table-based home page tiles*/

h3.hometileicon
{
	margin-top: 0px;
	margin-bottom: 15px;
}

/*Responsive layout - adjusts width of card */

@media only screen and (max-width: 1279px)
{
	.card
	{
		flex: 0 0 48%;
	}
}

/* Responsive layout - makes single column */

@media only screen and (max-width: 767px)
{
	.card
	{
		flex: 0 0 100%;
	}
}

@media (min-width: 320px)
{
	div#mc-main-content
	{
		width: 100%;
	}
}

#custom-footer
{
	margin-top: 80px;
}

body.product #custom-footer
{
	margin-top: 0;
}

body #custom-footer
{
	padding: 48px 0;
	width: 100%;
	margin-left: 0;
}

/*Landing page settings for the left-hand nav scroll*/

body .body-container
{
	overflow: hidden;
}

body .sidenav-layout,
body .off-canvas-content
{
	max-height: none;
}

body .off-canvas-wrapper
{
	overflow: auto;
}

/*Product page settings for the left-hand nav scroll*/

body.product .body-container
{
	overflow: auto;
}

body.product .sidenav-layout,
body.product .off-canvas-content
{
	max-height: 100vh;
}

body.product .off-canvas-wrapper
{
	height: 100vh;
}