:root {

	--irc--palette--dark-blue-100: #253355;
	--irc--palette--purple-100: #5A2A82;
	--irc--palette--teal-100: #3ABBBA;
	--irc--palette--teal-200: #32A1A0;
	--irc--palette--teal-300: #2A8786;
	--irc--palette--teal-400: #226E6D;
	--irc--palette--orange-100: #FF681E;
	--irc--palette--orange-200: #FF5401;
	--irc--palette--orange-300: #E44A00;

	--pf-global--primary-color--100: var(--irc--palette--orange-100);
	--pf-global--primary-color--200: var(--irc--palette--orange-200);
	--pf-global--primary-color--dark-100: var(--irc--palette--orange-200);

	--pf-global--BackgroundColor--dark-100: var(--irc--palette--dark-blue-100);

	--pf-global--link--Color: var(--irc--palette--teal-200);
	--pf-global--link--Color--hover: var(--irc--palette--teal-100);
	--pf-global--link--Color--dark: var(--irc--palette--teal-300);
	--pf-global--link--Color--dark--hover: var(--irc--palette--teal-400);

	--pf-global--active-color--100: var(--irc--palette--teal-100);
	--pf-global--active-color--200: var(--irc--palette--teal-200);
	--pf-global--active-color--300: var(--irc--palette--teal-300);
}

body {

	background: var(--irc--palette--dark-blue-100);
	padding: 0;
}

.flex-container {
	margin: 0;
	display: flex;
	flex-direction: column;
}
.flex-container.main {
	min-height: 100vh;
}

.flex-item {

	flex-grow: 1;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.flex-item.head {

	flex-grow: 1;
}

.flex-item.head .flex-container {

	align-items: center;
}

.flex-item.head .flex-item {

	padding: 2em;
}

.flex-item.head .logo {

	max-height: 64px;
	max-width: 80vw;

}

.flex-item {

}

.flex-item.body {

	text-align: center;
	position: relative;
}

.flex-item.body img {

	max-height: 50vh;
	max-width: 80vw;
	margin: 0 auto;
}

.kc-header-text {
	font-size: 1.5em;
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 1.2em;
	white-space: normal;
	margin: 0 auto;
}

.flex-item.footer .flex-container {

	flex-direction: row;
	align-items: center;
	flex: 1;
	width: 100%;
}

.flex-item.footer .flex-item {

	flex-grow: 1;
}

.flex-item.footer a {
	margin: 1em;
	padding: 1em;
	color: var(--irc--palette--teal-200);
}

.flex-item.footer a:hover {
	color: var(--irc--palette--teal-100);

	background: #ffffff22;
}