/* SKIP TO MAIN CONTENT */

.skip__to_content {
	display: flex;
	justify-content: center;
}
.skip__to_content a {
	display: block;
	padding: var(--val-gap-0-5) var(--val-gap-1-5);
	color: var(--val-color--white);
    background-color: var(--val-color--gray-5);
    text-decoration: none;
    outline: 0;
	position: absolute;
	transform: translateY(-100%);
	transition: all 0.3s ease-in-out;
	z-index: 9999;
}
.skip__to_content a:after {
    content: "\0020 ➔";
}
.skip__to_content a:focus {
	transform: translateY(0%);
}

/* STYLES BASE */

.style__info {
	color: var(--val-color--white);
	background-color: var(--val-color--info);
}
.style__info a {
	color: var(--val-color--info-link);
	font-weight: 700;
}
.style__info a:hover {
	color: var(--val-color--info-link-hover);
}
.style__info a:active {
	color: var(--val-color--info-link-active);
}

.style__success {
	color: var(--val-color--white);
	background-color: var(--val-color--success);
}
.style__success a {
	color: var(--val-color--success-link);
	font-weight: 700;
}
.style__success a:hover {
	color: var(--val-color--success-link-hover);
}
.style__success a:active {
	color: var(--val-color--success-link-active);
}

.style__warning {
	color: var(--val-color--white);
	background-color: var(--val-color--warning);
}
.style__warning a {
	color: var(--val-color--warning-link);
	font-weight: 700;
}
.style__warning a:hover {
	color: var(--val-color--warning-link-hover);
}
.style__warning a:active {
	color: var(--val-color--warning-link-active);
}

.style__danger {
	color: var(--val-color--white);
	background-color: var(--val-color--danger);
}
.style__danger a {
	color: var(--val-color--danger-link);
	font-weight: 700;
}
.style__danger a:hover {
	color: var(--val-color--danger-link-hover);
}
.style__danger a:active {
	color: var(--val-color--danger-link-active);
}

.style__light {
	color: var(--val-color--text);
	background-color: var(--val-color--light);
}

.style__dark {
	color: var(--val-color--white);
	background-color: var(--val-color--dark);
}
.style__dark a {
	color: var(--val-color--dark-link);
	font-weight: 700;
}
.style__dark a:hover {
	color: var(--val-color--dark-link-hover);
}
.style__dark a:active {
	color: var(--val-color--dark-link-active);
}

.style__link {
	color: var(--val-color--primary);
	background-color: transparent;
}

/* TYPOGRAPHY */

.fs__x3l {
	font-size: var(--val-fs--x3l) !important;
}
.fs__x2l {
	font-size: var(--val-fs--x2l) !important;
}
.fs__xl {
	font-size: var(--val-fs--xl) !important;
}
.fs__l {
	font-size: var(--val-fs--l) !important;
}
.fs__m {
	font-size: var(--val-fs--m) !important;
}
.fs__s {
	font-size: var(--val-fs--s) !important;
}
.fs__xs {
	font-size: var(--val-fs--xs) !important;
}
.fs__x2s {
	font-size: var(--val-fs--x2s) !important;
}
.fs__x3s {
	font-size: var(--val-fs--x3s) !important;
}
/* LG - Applies <= 992px */
@media screen and (max-width: 62rem) {
	.fs__x3l {
		font-size: calc(var(--val-fs--l) + 1.25vw) !important;
	}
	.fs__x2l {
		font-size: calc(var(--val-fs--l) + 0.6vw) !important;
	}
	.fs__xl {
		font-size: calc(var(--val-fs--m) + 0.6vw) !important;
	}
	.fs__l {
		font-size: calc(var(--val-fs--m) + 0.3vw) !important;
	}
}

/* COMPONENT STYLES */

/* Heading component */

.heading__title-x3l,
.heading__title-x2l,
.heading__title-xl,
.heading__title-l,
.heading__title-m,
.heading__subtitle {
	font-weight: var(--val-fw--light);
}
.heading__title-x3l {
	font-size: calc(var(--val-fs--x3l) * 2);
}
.heading__title-x2l {
	font-size: calc(var(--val-fs--x3l) * 1.8);
}
.heading__title-xl {
	font-size: calc(var(--val-fs--x3l) * 1.6);
}
.heading__title-l {
	font-size: calc(var(--val-fs--x3l) * 1.4);
}
.heading__title-m {
	font-size: calc(var(--val-fs--x3l) * 1.2);
}
.heading__subtitle {
	margin-top: calc(-1 * var(--val-gap-0-5));
}
/* LG - Applies <= 992px */
@media screen and (max-width: 62rem) {
	.heading__title-x3l {
		font-size: calc((var(--val-fs--x3l) / 1.5) + 4.5vw);
	}
	.heading__title-x2l {
		font-size: calc((var(--val-fs--x3l) / 1.6) + 3.9vw);
	}
	.heading__title-xl {
		font-size: calc((var(--val-fs--x3l) / 1.6) + 3.3vw);
	}
	.heading__title-l {
		font-size: calc((var(--val-fs--x3l) / 1.7) + 2.7vw);
	}
	.heading__title-m {
		font-size: calc((var(--val-fs--x3l) / 1.7) + 2.1vw);
	}
}

/* Image component */

.img__fluid {
	max-width: 100%;
	height: auto;
}

/* Block component */

.block__title {
	font-size: var(--val-fs--m);
	background-color: var(--val-color--gray-90);
	padding: var(--val-gap-0-35) var(--val-gap);
	margin: 0
}
.block__container.style__info .block__title {
	background-color: var(--val-color--info-dark);
}
.block__container.style__success .block__title {
	background-color: var(--val-color--success-dark);
}
.block__container.style__warning .block__title {
	background-color: var(--val-color--warning-dark);
}
.block__container.style__danger .block__title {
	background-color: var(--val-color--danger-dark);
}
.block__container.style__dark .block__title {
	color: var(--val-color--dark-dark);
}

.block__content {
	padding: var(--val-gap-0-35) var(--val-gap);
}
.block__container.style__info .block__content {
	border-left: var(--val-gap-0-5) solid var(--val-color--info-dark);
}
.block__container.style__success .block__content {
	border-left: var(--val-gap-0-5) solid var(--val-color--success-dark);
}
.block__container.style__warning .block__content {
	border-left: var(--val-gap-0-5) solid var(--val-color--warning-dark);
}
.block__container.style__danger .block__content {
	border-left: var(--val-gap-0-5) solid var(--val-color--danger-dark);
}

.block__container > .block__title + .block__content {
	border-left: 0;
}

/* Branding component */

.branding__content {
	display: flex;
	align-items: flex-end;
	column-gap: var(--val-gap-0-75);
}
.branding__name {
	letter-spacing: 0.02em;
    font-size: var(--val-fs--l);
	font-weight: 700;
	text-decoration: none;
}
.branding__slogan {
    font-size: var(--val-fs--m);
}

/* SM - Applies <= 568px */
@media (max-width: 35.5rem) {
	.branding__logo {
		display: none;
	}
}
/* LG - Applies <= 992px */
@media (max-width: 62rem) {
	.branding__slogan {
		font-size: var(--val-fs--base);
	}
}

/* PoweredBy component */

.poweredby__container {
	text-align: center;
}
.poweredby__logo img,
.poweredby__logo svg {
	margin-left: .275em;
	height: 1.275em;
	vertical-align: middle;
}