:root {
	/* -------------- body content font styles -------------- */

	/* font family */
	--gy-font-family-sans-serif: helvetica, arial, sans-serif;
	--gy-font-family-sans-serif-heading: helvetica, arial, sans-serif;

	/* font color for light bg */
	--gy-font-color-dk: #505050; /* default text color */
	--gy-font-color-dkr: #000; /* bold text color */

	/* font color  for dark bg */
	--gy-font-color-lt: rgb(255 255 255 / 80%); /* default text color */
	--gy-font-color-ltr: rgb(255 255 255 / 100%); /* bold text color */

	/* font sizes */
	--gy-font-size-body-1: 16px; /* primary page content */
	--gy-font-size-body-2: 14px; /* secondary content / aside */
	--gy-font-size-body-3: 12px; /* tertiary content / table column headers / error/ fine print */
	--gy-font-size-heading-1: 30px;
	--gy-font-size-heading-2: 24px;
	--gy-font-size-heading-3: 20px;
	--gy-font-size-heading-4: 18px;
	--gy-font-size-heading-5: 16px;
	--gy-font-size-micro: 11px; /* special cases  */
	--gy-line-height-micro: 1.5;
	--gy-letter-spacing-micro: 0.5px;
	--gy-line-height-body-1: 1.7;
	--gy-line-height-heading-1: 1.4;
	--gy-line-height-heading-2: 1.4;
	--gy-line-height-heading-3: 1.5;
	--gy-line-height-heading-4: 1.7;
	--gy-line-height-heading-5: 1.7;
	--gy-margin-heading-1: 0 auto 40px;
	--gy-margin-heading-2: 0 0 40px;
	--gy-margin-heading-3: 0 0 20px;
	--gy-margin-heading-4: 0 0 20px;
	--gy-margin-heading-5: 0;
	--gy-margin-paragraph: 0 0 20px;
	--gy-margin-top-heading: 40px;
	--gy-margin-hr: 40px;

	/* max width for content */
	--gy-content-width-max-1: 1000px;
	--gy-content-width-max-2: 800px;
	--gy-content-width-max-3: 600px;

	/* -------------- main site colors accents -------------- */
	--gy-main-color: #164178;
	--gy-main-color-dk: #1b3153;
	--gy-main-color-ltr: #fff; /* white */
	--gy-main-color-lt: #f1f5f9; /* very light blue */
	--gy-accent-color: #edbe1c; /* accent color */
	--gy-accent-color-lt: #ffd21d; /* light accent color */

	/* -------------- links and buttons -------------- */
	--gy-link-color-default: #edbe1c; /* default link color */
	--gy-link-color-hover: #ffd21d; /* hover link color */
	--gy-button-color-default: #edbe1c; /* default button color */
	--gy-button-color-hover: #ffd21d; /* hover button color */
	--gy-button-font-color: #000; /* button fill text color */
	--gy-button-font-size: 16px;
	--gy-button-line-height: 20px;
	--gy-button-padding: 11px 20px;
	--gy-button-height: 44px;
	--gy-button-width-min: 120px;
	--gy-button-padding-icon-only: 11px 0px;
	--gy-button-border-radius: 5px;
	--gy-button-overlay-opacity: 0.04; /* for text, outline buttons hover bg color overlay opacity */
	--gy-button-group-gap: 20px 20px;
	--gy-button-group-padding: 20px 0;

	/* -------------- icon sizes -------------- */
	--gy-icon-size-1: 24px;
	--gy-icon-size-2: 18px;
	--gy-icon-size-3: 16px;
	--gy-icon-size-heading: 30px;

	/* -------------- states -------------- */
	--gy-state-disabled-opacity: 0.3;
	--gy-state-disabled-filter: grayscale(100%) brightness(100%);
	--gy-state-soldout-color: #b00;
	--gy-state-error-color: #b00;
	--gy-state-success-color: #339043;
	--gy-state-green: #339043;
	--gy-state-yellow: #c27f1f;
	--gy-state-red: #b00;

	/* -------------- borders and shades on light background -------------- */
	--gy-border-radius-1: 10px; /* for outter large blocks - banner, sessions, accordions  - not for buttons */
	--gy-border-radius-2: 5px; /* for inner nested blocks - not for buttons */
	--gy-border-color-dkr: #c0c0c0; /* border color */
	--gy-border-color-dk: #eee; /* for keyline color */
	--gy-bg-color-dkr: #f5f5f5; /* for header footer background shade */
	--gy-bg-color-dk: #f7f7f7; /* for general row cell background shade */
	--gy-bg-color-dk-alt: #f9f9f9; /* for alt row cell background shade */
	--gy-bg-color-body: #fff; /* site body color */

	/* -------------- site shell -------------- */

	/* site width */
	--gy-site-padding-horizontal: 20px;
	--gy-site-width-max: 1500px;
	--gy-site-width-min: 280px;

	/* --------------  form -------------- */
	--gy-form-font-family: inherit;
	--gy-form-font-size-1: 16px; /* default font size for label, fields */
	--gy-form-font-size-2: 12px; /* font size for error hints and tool tips */
	--gy-form-line-height: 20px;
	--gy-form-label-padding: 5px 0;
	--gy-form-label-line-height: 20px;
	--gy-form-field-padding: 10px 10px;
	--gy-form-field-select-padding: 10px 25px 10px 10px;
	--gy-form-field-textarea-padding: 10px;
	--gy-form-field-height: 44px;
	--gy-form-field-margin: 20px;
	--gy-form-field-border-radius: 5px;
	--gy-form-field-border-color: #c0c0c0;
	--gy-form-field-bg-color: #f7f7f7;

	/* ---------- focus visible outline color ----------- */
	--gy-focus-outline-color-1: #0075f9; /* main outline color */
	--gy-focus-outline-color-2: rgb(
		255 255 255 / 75%
	); /* alternate outline color for on contrasting dark background  */

	overscroll-behavior: none;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ------- GENERAL TEXT STYLES ------ */
html {
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--gy-main-color);
	font-family: var(--gy-font-family-sans-serif);
	line-height: var(--gy-line-height-body-1);
	font-size: var(--gy-font-size-body-1);
	color: var(--gy-font-color-lt);
	padding: 0;
	margin: 0;
	min-width: var(--gy-site-width-min);
}

.gy-heading-1 {
	font-weight: 500;
	font-family: var(--gy-font-family-sans-serif-heading);
	font-size: var(--gy-font-size-heading-1);
	margin: var(--gy-margin-heading-1);
	line-height: var(--gy-line-height-heading-1);
}

.gy-heading-2 {
	font-weight: 800;
	font-family: var(--gy-font-family-sans-serif-heading);
	font-size: var(--gy-font-size-heading-2);
	margin: var(--gy-margin-heading-2);
	line-height: var(--gy-line-height-heading-2);
}

.gy-heading-3 {
	font-weight: 800;
	font-family: var(--gy-font-family-sans-serif-heading);
	font-size: var(--gy-font-size-heading-3);
	margin: var(--gy-margin-heading-3);
	line-height: var(--gy-line-height-heading-3);
}

.gy-heading-4 {
	font-weight: bold;
	font-size: var(--gy-font-size-heading-4);
	margin: var(--gy-margin-heading-4);
	line-height: var(--gy-line-height-heading-4);
}

.gy-heading-5 {
	font-weight: bold;
	font-size: var(--gy-font-size-heading-5);
	margin: var(--gy-margin-heading-5);
	line-height: var(--gy-line-height-heading-5);
}

[class*="gy-heading"] {
	color: var(--gy-font-color-ltr);
	font-optical-sizing: auto;
}

[class*="gy-heading"] > .text-normal {
	font-weight: normal;
	color: var(--gy-font-color-lt);
	font-size: initial;
}

* + [class*="gy-heading-1"],
* + [class*="gy-heading-2"],
* + [class*="gy-heading-3"] {
	margin-top: var(--gy-margin-top-heading);
}

[class*="gy-heading"]:empty {
	display: none;
}

[class*="gy-heading-icon"] {
	max-width: 100%;
	position: relative;
}

.accent-color {
	color: var(--gy-accent-color);
}

p {
	margin: var(--gy-margin-paragraph);
}

table {
	border-collapse: collapse;
	margin: var(--gy-margin-paragraph);
}

table p {
	text-align: inherit;
}

b,
strong {
	color: var(--gy-font-color-dkr);
}

a b,
a strong {
	color: inherit;
}

.text-center {
	text-align: center;
}

.text-left,
.text-left p {
	text-align: left;
}

.text-right,
.text-right p {
	text-align: right;
}

.text-normal {
	font-weight: normal;
}

.block-center {
	margin-left: auto;
	margin-right: auto;
}

/* --------------- TEXT LINKS --------------- */
a {
	display: inline-block;
	color: var(--gy-link-color-default);
	text-decoration: underline;
}

a:hover,
a:focus-visible {
	color: var(--gy-link-color-hover);
	text-decoration: none;
}

/* element icon, element label */

.gy-el-icon,
.gy-el-label {
	line-height: var(--gy-button-line-height);
	vertical-align: middle;
	display: inline-block;
	position: relative;
}

.gy-el-icon {
	font-size: var(--gy-icon-size-2);
}

.gy-link .gy-el-label {
	text-decoration: underline;
}

.gy-el-icon + .gy-el-label,
.gy-el-label + .gy-el-icon {
	margin-left: 10px;
}

[class*="gy-heading-icon"] .gy-el-icon {
	display: block;
	text-align: center;
	margin: 0 auto 20px;
	height: 50px;
	width: 50px;
	line-height: 60px;
	font-size: 30px;
	border-radius: 50%;
	color: var(--gy-font-color-dkr);
}

/* for non link or button labels */
:not(.gy-link) .gy-el-label,
:not(.gy-button) .gy-el-label {
	line-height: inherit;
}

/* --------------- BUTTONS --------------- */

/* button reset */
button {
	font-family: var(--gy-font-family-sans-serif);
	appearance: auto;
	line-height: inherit;
	margin: 0;
	transform: none;
}

/* group of buttons */
.gy-button-group,
.gy-form-footer {
	display: flex;
	flex-flow: row wrap;
	gap: var(--gy-button-group-gap);
	width: 100%;
	padding: var(--gy-button-group-padding);
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

.gy-button-group:empty,
.gy-form-footer:empty {
	display: none;
}

.gy-button .gy-el-icon,
.gy-button .gy-el-label {
	text-decoration: none;
	vertical-align: top;
}

.gy-button .gy-el-icon {
	font-size: var(--gy-icon-size-2);
}

.gy-button .gy-el-label {
	line-height: var(--gy-button-line-height);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 800;
}

/* default button */
.gy-button {
	font-family: inherit;
	text-decoration: none;
	font-size: var(--gy-button-font-size);
	color: var(--gy-button-font-color);
	line-height: var(--gy-button-line-height);
	background-color: var(--gy-button-color-default);
	padding: var(--gy-button-padding);
	min-height: var(--gy-button-height);
	min-width: var(--gy-button-width-min);
	border-radius: var(--gy-button-border-radius);
	border: var(--gy-button-color-default) solid 1px;
	display: inline-flex;
	justify-content: center;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

.gy-button:hover,
.gy-button:focus-visible {
	color: var(--gy-button-font-color);
	background-color: var(--gy-button-color-hover);
	border-color: var(--gy-button-color-hover);
}

/* button outline */
.gy-button.outline {
	background-color: transparent;
	color: var(--gy-button-color-default);
	border-color: var(--gy-button-color-default);
}

.gy-button.outline:hover,
.gy-button.outline:focus-visible {
	background-color: transparent;
	color: var(--gy-button-color-default);
	border-color: var(--gy-button-color-hover);
}

/* button text only */
.gy-button.text {
	background-color: transparent;
	border-color: transparent;
	color: var(--gy-button-color-default);
}

.gy-button.text:not(.hover-outline) {
	border: 0;
}

.gy-button.text:hover,
.gy-button.text:focus-visible {
	background-color: transparent;
	color: var(--gy-button-color-default);
}

/* button outline text - hover create shade in the background */

.gy-button.outline:hover::after,
.gy-button.outline:focus-visible::after,
.gy-button.text:hover::after,
.gy-button.text:focus-visible::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	inset: 0;
	background-color: var(--gy-button-color-hover);
	opacity: var(--gy-button-overlay-opacity);
}

/* button icon only */
.gy-button.icon-only {
	min-width: 0;
	width: var(--gy-button-height);
	padding: var(--gy-button-padding-icon-only);
	height: var(--gy-button-height);
	text-align: center;
}

.icon-only .gy-el-label {
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: 0 0 0 -1px;
	opacity: 0.1;
}

.icon-only .gy-el-icon {
	width: calc(var(--gy-button-height) - 2px);
}

/* link with an icon and label */
.gy-link {
	color: var(--gy-link-color-default);
	font-size: var(--gy-font-size-body-1);
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	flex-wrap: nowrap;
	border: 0;
	background-color: transparent;
}

.gy-link:hover,
.gy-link:focus-visible {
	color: var(--gy-link-color-hover);
}

.gy-link:hover .gy-el-label,
.gy-link:focus-visible .gy-el-label {
	text-decoration: none;
}

/* gd link icon only */
.gy-link.icon-only {
	min-width: 0;
	width: var(--gy-icon-size-1);
	height: var(--gy-icon-size-1);
	padding: 0;
	text-align: center;
}

.gy-link.icon-only .gy-el-icon {
	width: auto;
	margin: 0;
}

/* -- special hover outline  -- */
.gy-button.text.hover-outline:hover,
.gy-button.text.hover-outline:focus-visible {
	background-color: transparent;
	border-color: var(--gy-button-color-default);
}

.gy-button.text.hover-outline::after,
.gy-button.text.hover-outline:hover::after,
.gy-button.text.hover-outline:focus-visible::after {
	display: none;
}

/* special hover inverse */

.gy-button.hover-inverse {
	background-color: transparent;
	color: var(--gy-button-color-default);
	border-color: var(--gy-button-color-default);
}

.gy-button.hover-inverse:hover .gy-el-label,
.gy-button.hover-inverse:focus-visible .gy-el-label {
	color: var(--gy-button-font-color);
	opacity: 1;
}

.gy-button.hover-inverse:hover,
.gy-button.hover-inverse:focus-visible {
	background-color: var(--gy-button-color-hover);
	color: var(--gy-button-font-color);
	border-color: var(--gy-button-color-hover);
}

/* special hover expanding label */
.gy-button.hover-expand-label {
	transition: all var(--gy-transition-timing);
}

.gy-button.hover-expand-label:hover .gy-el-label,
.gy-button.hover-expand-label:focus-visible .gy-el-label {
	vertical-align: bottom;
	height: auto;
	bottom: 0;
	text-align: left;
	margin-left: 10px;
	width: auto;
	opacity: 1;
}

.gy-button.hover-expand-label:hover .gy-el-icon,
.gy-button.hover-expand-label:focus-visible .gy-el-icon {
	width: auto;
	margin: 0;
}

.gy-button.hover-expand-label:hover,
.gy-button.hover-expand-label:focus-visible {
	padding: var(--gy-button-padding);
	width: auto;
}

/* -------------- BREAK POINT -------------- */

@media screen and (min-width: 768px) {
	:root {
		--gy-font-size-body-1: 18px; /* primary page content */
		--gy-font-size-heading-1: 34px;
		--gy-font-size-heading-2: 28px;
		--gy-font-size-heading-3: 24px;
	}
}