.skip-to.popup {
	position: absolute;
	top: -30em;
	left: 0;
	z-index: 3000;
}

	.skip-to, .skip-to.popup.focus {
		position: absolute;
		top: 0;
		left: $positionLeft
	}

		.skip-to.fixed {
			position: fixed
		}

		.skip-to button {
			position: relative;
			margin: 0;
			padding: 6px 8px 6px 8px;
			border-width: 0 1px 1px 1px;
			border-style: solid;
			border-radius: 0 0 6px 6px;
			border-color: $buttonBackgroundColor;
			color: $menuTextColor;
			background-color: $buttonBackgroundColor;
			z-index: 200
		}

		.skip-to .skip-to-tooltip {
			position: absolute;
			top: 2.25em;
			left: 8em;
			margin: 1px;
			padding: 4px;
			border: 1px solid #ccc;
			box-shadow: 2px 3px 5px #ddd;
			background-color: #eee;
			color: #000;
			font-family: Helvetica,Arial,Sans-Serif;
			font-variant-numeric: slash-zero;
			font-size: 9pt;
			width: auto;
			display: none;
			white-space: nowrap;
			z-index: 201
		}

			.skip-to .skip-to-tooltip.skip-to-show-tooltip {
				display: block
			}

		.skip-to [aria-expanded=true] + .skip-to-tooltip.skip-to-show-tooltip {
			display: none
		}

		.skip-to [role=menu] {
			position: absolute;
			min-width: 17em;
			display: none;
			margin: 0;
			padding: .25rem;
			background-color: $menuBackgroundColor;
			border-width: 2px;
			border-style: solid;
			border-color: $focusBorderColor;
			border-radius: 5px;
			z-index: 1000
		}

		.skip-to [role=group] {
			display: grid;
			grid-auto-rows: min-content;
			grid-row-gap: 1px
		}

		.skip-to [role=separator]:first-child {
			border-radius: 5px 5px 0 0
		}

		.skip-to [role=menuitem] {
			padding: 3px;
			width: auto;
			border-width: 0;
			border-style: solid;
			color: $menuTextColor;
			background-color: $menuBackgroundColor;
			z-index: 1000;
			display: grid;
			overflow-y: auto;
			grid-template-columns: repeat(6,1.2rem) 1fr;
			grid-column-gap: 2px;
			font-size: 1em
		}

			.skip-to [role=menuitem] .label:first-letter, .skip-to [role=menuitem] .level:first-letter {
				text-decoration: underline;
				text-transform: uppercase
			}

			.skip-to [role=menuitem] .level {
				text-align: right;
				padding-right: 4px
			}

			.skip-to [role=menuitem] .label {
				margin: 0;
				padding: 0;
				display: inline-block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis
			}

			.skip-to [role=menuitem].skip-to-h1 .level {
				grid-column: 1
			}

			.skip-to [role=menuitem].skip-to-h2 .level {
				grid-column: 2
			}

			.skip-to [role=menuitem].skip-to-h3 .level {
				grid-column: 3
			}

			.skip-to [role=menuitem].skip-to-h4 .level {
				grid-column: 4
			}

			.skip-to [role=menuitem].skip-to-h5 .level {
				grid-column: 5
			}

			.skip-to [role=menuitem].skip-to-h6 .level {
				grid-column: 8
			}

			.skip-to [role=menuitem].skip-to-h1 .label {
				grid-column: 2/8
			}

			.skip-to [role=menuitem].skip-to-h2 .label {
				grid-column: 3/8
			}

			.skip-to [role=menuitem].skip-to-h3 .label {
				grid-column: 4/8
			}

			.skip-to [role=menuitem].skip-to-h4 .label {
				grid-column: 5/8
			}

			.skip-to [role=menuitem].skip-to-h5 .label {
				grid-column: 6/8
			}

			.skip-to [role=menuitem].skip-to-h6 .label {
				grid-column: 7/8
			}

			.skip-to [role=menuitem].skip-to-h1.no-level .label {
				grid-column: 1/8
			}

			.skip-to [role=menuitem].skip-to-h2.no-level .label {
				grid-column: 2/8
			}

			.skip-to [role=menuitem].skip-to-h3.no-level .label {
				grid-column: 3/8
			}

			.skip-to [role=menuitem].skip-to-h4.no-level .label {
				grid-column: 4/8
			}

			.skip-to [role=menuitem].skip-to-h5.no-level .label {
				grid-column: 5/8
			}

			.skip-to [role=menuitem].skip-to-h6.no-level .label {
				grid-column: 6/8
			}

			.skip-to [role=menuitem].skip-to-nesting-level-1 .nesting {
				grid-column: 1
			}

			.skip-to [role=menuitem].skip-to-nesting-level-2 .nesting {
				grid-column: 2
			}

			.skip-to [role=menuitem].skip-to-nesting-level-3 .nesting {
				grid-column: 3
			}

			.skip-to [role=menuitem].skip-to-nesting-level-0 .label {
				grid-column: 1/8
			}

			.skip-to [role=menuitem].skip-to-nesting-level-1 .label {
				grid-column: 2/8
			}

			.skip-to [role=menuitem].skip-to-nesting-level-2 .label {
				grid-column: 3/8
			}

			.skip-to [role=menuitem].skip-to-nesting-level-3 .label {
				grid-column: 4/8
			}

			.skip-to [role=menuitem].action .label, .skip-to [role=menuitem].no-items .label {
				grid-column: 1/8
			}

		.skip-to [role=separator] {
			margin: 1px 0 1px 0;
			padding: 3px;
			display: block;
			width: auto;
			font-weight: 700;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: $menuTextColor;
			background-color: $menuBackgroundColor;
			color: $menuTextColor;
			z-index: 1000
		}

			.skip-to [role=separator] .mofn {
				font-weight: 400;
				font-size: 85%
			}

			.skip-to [role=separator]:first-child {
				border-radius: 5px 5px 0 0
			}

		.skip-to [role=menuitem].last {
			border-radius: 0 0 5px 5px
		}

		.skip-to.focus {
			display: block
		}

		.skip-to button:focus, .skip-to button:hover {
			background-color: $menuBackgroundColor;
			color: $menuTextColor;
			outline: 0
		}

		.skip-to button:focus {
			padding: 6px 7px 5px 7px;
			border-width: 0 2px 2px 2px;
			border-color: $focusBorderColor
		}

		.skip-to [role=menuitem]:focus {
			padding: 1px;
			border-width: 2px;
			border-style: solid;
			border-color: $focusBorderColor;
			background-color: $menuitemFocusBackgroundColor;
			color: $menuitemFocusTextColor;
			outline: 0
		}

/* focus styles */

/**:not(:hover):focus {
	background-color: var(--colMain);
	color: var(--colWhite);
}*/
/*body.alt *:not(:hover):not(.button):focus {
	background-color: var(--colWhite);
	color: var(--colBlack)				;
}*/
/**:not(:hover):focus *,
a.btn-flip:not(:hover):focus::before,
a.btn-flip:not(:hover):focus::after {
	background-color: var(--colMain) !important;
	color: var(--colWhite) !important;
}*/
#logo:hover:focus {
	background: none !important;
}
#logo:not(:hover):focus img {
	background: none !important;
}
/*.iconItem a:not(:hover):focus {
	background-color: transparent !important;
}
.circle:not(:hover):focus {
	background-color: var(--colWhite) !important;
	filter: invert(1);
	transform: scale(1.3) !important
}
#logo:hover:focus,
#logo:hover:focus svg {
	background: none !important;
}
#logo:not(:hover):focus {
	border: 0.5rem solid #000;
}
#logo:not(:hover):focus svg .st0 {
	fill: var(--colWhite);
}
#social a:not(:hover):focus {
	filter: brightness(0);
}

a.goTop:not(:hover):focus {
	border: 1px solid #000;
	background: var(--colWhite) url("../images/icons/arrow-up.svg") center calc(50% + 5px) no-repeat !important;
	background-size: 24px 24px !important;
	box-sizing: border-box;
}*/