/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Variables
	2.	Typography
	3.	Site Header
	4. 	Menu Modal
	5.	Layout Base
	6. 	Page Header
	7. 	Grid Modal
	8. 	List Modal
	9. 	Entry Content
	10. Site Pagination
	11. Site Footer
	12. Transitions
	13. Accessibility

-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 0. CSS Reset
-------------------------------------------------------------- */

html,
body {
	border: none;
	margin: 0;
	padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after {
	content: "";
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
figure {
	margin: 0;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
* {
	-webkit-tap-highlight-color: transparent !important;
}
button,
input,
textarea {
	-webkit-appearance: none;
            appearance: none;
}
.group:after {
	content: "";
	display: table;
	clear: both;
}

/* --------------------------------------------------------------
= 1. Variables
-------------------------------------------------------------- */

:root {
	--color-black: #000000;
	--color-gray: #6d6e71;
	--color-l-grey: #eeeeee; 
	--header: 60px;
	--h-margin: 10px;
	--v-margin: 30px;
	--padding: 20px;
}
@media all and (min-width: 768px) {
	:root {
		--v-margin: 60px;
	}
}
/* --------------------------------------------------------------
= 2. Typography
-------------------------------------------------------------- */

@font-face {
    font-family: 'Barlow';
    src: url('https://www.3n.design/wp-content/themes/pjvk/assets/fonts/barlow/Barlow-Regular.woff2') format('woff2'),
         url('https://www.3n.design/wp-content/themes/pjvk/assets/fonts/barlow/Barlow-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
	unicode-range: U+0000-218F, U+2194-2513, U+2519-10FFFF;
}
@font-face {
    font-family: 'Barlow';
    src: url('https://www.3n.design/wp-content/themes/pjvk/assets/fonts/barlow/Barlow-Italic.woff2') format('woff2'),
         url('https://www.3n.design/wp-content/themes/pjvk/assets/fonts/barlow/Barlow-Italic.woff') format('woff');
    font-weight: 400;
    font-display: swap;
    font-style: italic;
	unicode-range: U+0000-218F, U+2194-2513, U+2519-10FFFF;
}
@font-face {
    font-family: 'Barlow';
    src: url('https://www.3n.design/wp-content/themes/pjvk/assets/fonts/barlow/Barlow-Medium.woff2') format('woff2'),
         url('https://www.3n.design/wp-content/themes/pjvk/assets/fonts/barlow/Barlow-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
	unicode-range: U+0000-218F, U+2194-2513, U+2519-10FFFF;
}
@font-face {
	font-family: 'SpaceGrotesk';
	src: url('https://www.3n.design/wp-content/themes/pjvk/assets/fonts/space/SpaceGrotesk.woff2') format('woff2'),
		 url('https://www.3n.design/wp-content/themes/pjvk/assets/fonts/space/SpaceGrotesk.woff') format('woff');
	font-weight: 300 700;
	font-display: swap;
	font-style: normal;
	unicode-range: U+2190-2193, U+2514-2518;
}
html {
	background-color: var(--color-l-grey);
	overscroll-behavior: none;
}
body {
	background-color: var(--color-l-grey);
	color: var(--color-black);
	font-family: sans-serif;
	font-weight: 400;
	font-size: 16px;
	font-style: normal;
    letter-spacing: 0.05em;
	line-height: 1.333em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
.fonts--loaded body {
    font-family: 'Barlow', 'SpaceGrotesk', sans-serif;
}
i, em,
blockquote,
blockquote :not(cite) {
	font-style: italic;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
.terms span:after {
	content: ', '
}
.terms span:nth-last-child(2):after {
	content: ' + '
}
.terms span:last-child:after {
	content: ''
}

/* --------------------------------------------------------------
= 3. Site Header
-------------------------------------------------------------- */

body:before {
	background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(238,238,238,0) 100%);
	content: '';
	display: block;
	height: var(--header);
	position: fixed;
		top: 0;
		right: 0;
		left: 0;
	z-index: 1500;
}
#site-header {
	padding: 20px 0;
	position: fixed;
		top: 0;
		right: 0;
		left: 0;
	z-index: 2000;
}
#site-header .inner {
	display: flex;
}
#site-title {
	padding: 0 var(--h-margin);
	white-space: nowrap;
	width: 95px;
}
#site-title span {
	color: var(--color-gray);
}
#site-title span::after {
    animation: blink 1s steps(2, start) infinite;
    content: '_';
    display: inline;
}
@keyframes blink {
    to { opacity: 0; }
}
@media all and (min-width: 768px) {
	#site-title {
		width: calc(100% / 4);
	}
}

/* --------------------------------------------------------------
= 4. Menu Modal
-------------------------------------------------------------- */

#site-menu {
	display: block;
	margin: 0;
	padding: 0 var(--h-margin) 0 0;
	text-align: right;
	white-space: nowrap;
	width: calc(100% - 95px);
}
#site-menu li {
	display: inline-block;
	padding-left: 5px;
}
#site-menu li a {
	color: var(--color-gray);
	position: relative;
	text-decoration: none;
	transition: color 300ms ease;
}
#site-menu li a:hover,
#site-menu li.current-menu-item a {
	color: var(--color-black);
}
#site-menu li a span {
	display: none;
}
@media all and (min-width: 375px) {
	#site-menu li {
		padding-left: 10px;
	}
	#site-menu li a span {
		display: inline;
	}
}
@media all and (min-width: 414px) {
	#site-menu li {
		padding-left: 15px;
	}
}
@media all and (min-width: 768px) {
	#site-menu {
		display: flex;
		padding-right: 0;
		text-align: left;
		width: calc(100% / 4 * 3);
	}
	#site-menu li {
		padding: 0 var(--h-margin);
		width: calc(100% / 3);
	}
	#site-menu li:nth-last-child(2),
	#site-menu li:last-child {
		width: calc(100% / 6);
	}
	#site-menu li:last-child {
		text-align: right;
	}
	.home #site-menu li.menu-item-home a:after {
		color: var(--color-gray);
		content: '2019 — 2026';
		position: absolute;
			top: 1.5em;
			left: 0;	
	}
}

/* --------------------------------------------------------------
= 5. Layout Base
-------------------------------------------------------------- */

main {
	padding-top: var(--header);
	min-height: calc(100vh - var(--header));
}
.inner {
	margin: 0 auto;
	max-width: 1620px;
	padding: 0 var(--h-margin);
	position: relative;
}
.pad {
	padding: 0 var(--h-margin);
}
.col-1-2 {
	width: calc(100% / 2);
}
.right {
	text-align: right;
} 
@media all and (min-width: 768px) {
	.col-1-4 {
		width: calc(100% / 4);
	}
	.col-2-4 {
		width: calc(100% / 2);
	}
	.col-3-4 {
		width: calc(100% / 4 * 3);
	}
	.col-1-12 {
		width: calc(100% / 12);
	}
	.col-5-12 {
		width: calc(100% / 12 * 5);
	}
    .offset {
        margin-left: calc(100% / 4);
    }
}

/* --------------------------------------------------------------
= 6. Page Header
-------------------------------------------------------------- */

#page-header {
	color: var(--color-gray);
	height: calc(50vh - var(--header));
	position: relative;
}
#page-header .container {
	position: absolute;
		top: 50%;
	transform: translateY(-50%);
	width: 100%;
}
#page-header .container:first-child {
	width: 50%;
}
#page-header .container:last-child {
	left: 50%;
	width: 50%;
}
#page-header .container:only-child {
	left: 0;
	width: 100%;
}
#page-header .container.filter {
	width: 100%;
}
#page-header .container.layout {
	display: none;
}
#page-header .container .page-title {
	color: var(--color-black);
}
#page-header .container .post-sub-title {
	position: absolute;
		top: 1.33em;
		left: var(--h-margin);
}
#page-header.filter-title {
	color: var(--color-gray);
}
#page-header button {
	background-color: transparent;
	border: none;
	color: var(--color-gray);
	display: inline-block;
	font-size: 15px;
	margin: 0 10px 0 0;
	padding: 0;
	transition: color 300ms ease;
}
#page-header .filter button {
	color: var(--color-gray);
}
#page-header .filter button:hover,
#page-header .filter button.mixitup-control-active {
	color: var(--color-black);
}
#page-header .layout button,
#page-header .layout button.inactive:hover {
	color: var(--color-black);
}
#page-header .layout button.inactive {
	color: var(--color-gray);
}
#page-header .filter button:not(.mixitup-control-active),
#page-header .layout button.inactive {
	cursor: pointer;
}
@media all and (min-width: 768px) {
	#page-header .container.filter,
	#page-header .container.layout {
		width: 50%;
	}
	#page-header .container.layout {
		display: block;
		left: 50%;
		text-align: right;
	}
	#page-header .layout button {
		margin: 0;
	}
}

/* --------------------------------------------------------------
= 7. Grid Modal
-------------------------------------------------------------- */

.grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.grid .cell {
	margin-bottom: var(--v-margin);
	position: relative;
	width: 100%;
}
.grid .cell figure {
	margin-bottom: .75em;
}
.grid .cell figure {
	aspect-ratio: 12 / 8;
	transition: all 500ms ease;
	-webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%);
            filter: gray;
            filter: grayscale(100%);
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}
.grid.journal .cell figure {
    aspect-ratio: 1 / 1;
}
@supports not (aspect-ratio: 12 / 8) {
	.grid .cell figure::before {
		float: left;
		padding-top: 66.66%;
		content: "";
	}
    .grid.journal .cell figure {
        padding-top: 100%;
    }
	.grid .cell figure::after {
		display: block;
		content: "";
		clear: both;
	}
}
.grid .cell figure img,
.grid .cell figure picture {
    object-fit: cover;
    object-position: center;
	border-radius: 10px;
    position: absolute;
	height: 100%;
	width: 100%;
	transition: max-height 900ms ease;
}
.grid .cell:hover a figure {
	-webkit-filter: grayscale(0);
            filter: none;
            filter: grayscale(0);
}
@media all and (min-width: 768px) {
	.grid .cell {
		width: calc(100% / 2);
	}
}
@media all and (min-width: 1024px) {
	.grid.journal .cell {
		width: calc(100% / 3);
	}
}
@media all and (min-width: 1280px) {
	.grid.journal .cell {
		width: calc(100% / 4);
	}
}

/* Post Details ---------------------------------------------- */

.post-details {
	color: var(--color-gray);
	display: flex;
}
.post-details div:first-child {
	padding-right: var(--h-margin);
}
.post-details div:last-child {
	padding-left: var(--h-margin);
}
.post-title {
	color: var(--color-black);
	transition: all 900ms ease;
}
.cell.post .post-title {
    padding-top: 1em;
}
.grid:hover .cell .post-title {
	color: var(--color-gray);
}
.grid .cell:hover .post-title {
	color: var(--color-black);
}


/* --------------------------------------------------------------
= 8. List Modal
-------------------------------------------------------------- */

.list-container {
	color: var(--color-gray);
	display: none;
	line-height: 1.66em;
	margin-bottom: var(--v-margin);
}
.list-header {
	display: flex;
	margin-bottom: 1.33em;
}
#listed .list-item a {
	display: flex;
	text-decoration: none;
	transition: color 300ms ease;
}
#listed.all:hover .list-item a {
	color: var(--color-gray);
}
#listed.all .list-item a,
#listed.all:hover .list-item a:hover,
#listed.hands-on .list-item.services-hands-on a,
#listed.consulting .list-item.services-consulting a,
#listed.personal .list-item.services-personal a {
	color: var(--color-black);
}
#listed.hands-on .list-item.services-consulting a,
#listed.hands-on .list-item.services-personal a,
#listed.consulting .list-item.services-hands-on a,
#listed.consulting .list-item.services-personal a,
#listed.personal .list-item.services-hands-on a,
#listed.personal .list-item.services-consulting a,
#listed.hands-on .list-item.services-hands-on a:hover,
#listed.consulting .list-item.services-consulting a:hover,
#listed.personal .list-item.services-personal a:hover {
	color: var(--color-gray);
}

/* --------------------------------------------------------------
= 9. Entry Content
-------------------------------------------------------------- */

.section-title {
	margin-bottom: 1.33em;
}
.section-title span {
	color: var(--color-gray);
}
.entry-content {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: calc(var(--v-margin) * 2 - 1.33em);
}
.entry-content p,
.entry-content ul {
	margin-bottom: 1.33em;
}
.entry-content ul {
    color: var(--color-gray);
    margin-inline-start: 1.25em;
}
.entry-content ul li {
    position: relative;
}
.entry-content ul li::before {
    content: "— ";
    inset-inline-start: -1.25em;
    position: absolute;
}
.entry-meta dl ul {
	margin-bottom: 0;
}
.entry-content a {
	color: var(--color-black);
	transition: color 300ms ease;
}
.entry-content a:hover {
	color: var(--color-gray);
}
@media all and (min-width: 768px) {
	.entry-content .col-2-4 {
		width: calc(100% / 4 * 3);
	}
}
@media all and (min-width: 1024px) {
	.entry-content .col-2-4 {
		width: calc(100% / 2);
	}
}

/* Entry Meta ------------------------------------------------ */

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: calc(var(--v-margin) * 2 - 1.33em);
}
.entry-meta dl {
	margin-bottom: 1.33em;
}
.entry-meta dd {
	color: var(--color-gray);
}
.entry-meta dd a {
	color: var(--color-gray);
	text-decoration: underline;
	transition: color 300ms ease;
}
.entry-meta dd a:hover {
	color: var(--color-black);
}
.entry-meta .col-1-4 {
	width: calc(100% / 2)
}
@media all and (min-width: 768px) {
	.entry-meta {
		flex-wrap: nowrap;
	}
	.entry-meta .col-1-4 {
		width: calc(100% / 4)
	}
}

/* Entry Utility ---------------------------------------------- */

.entry-utility dd {
	color: var(--color-gray);
}
.entry-utility dd a {
	color: var(--color-gray);
	text-decoration: underline;
	transition: color 300ms ease;
}
.entry-utility dd a:hover {
	color: var(--color-black);
}
@media all and (min-width: 768px) {
    .entry-utility {
        margin-left: calc(100%/4);
    }
}
@media all and (min-width: 1024px) {
    .entry-utility {
        margin-left: 0;
        text-align: right;
    }
}

/* Examples -------------------------------------------------- */

#examples {
	margin-bottom: var(--v-margin);
}
#examples figure {
	margin-bottom: var(--padding);
}
#examples figure:last-child {
	margin-bottom: 0;
}
#examples figure img,
#examples figure picture {
	border-radius: 10px;
	display: block;
	height: auto;
	width: 100%;
}
#examples figure:has(video) {
    aspect-ratio: 3 / 2;
    position: relative;
}
#examples figure video {
    border-radius: 10px;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

/* Featured Image -------------------------------------------- */

#featured-image {
	height: calc(50vh - 20px);
	margin-bottom: calc(var(--v-margin) * 2);
    position: relative;
}
#featured-image img,
#featured-image picture {
    object-fit: cover;
    object-position: center;
	border-radius: 10px;
    position: absolute;
	height: 0;
	width: calc(100% - var(--h-margin) * 2);
}

/* Widgets --------------------------------------------------- */
.client-list {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: calc(var(--v-margin) - 1.33em);
}
.client-list .section-title {
	width: 100%;
}
.client-list .col-1-4 {
	width: calc(100% / 2);
}
.client-list .col-1-4 ul {
    margin-inline-start: 1.25em;
}
.client-list .col-1-4 ul li {
    position: relative;
}
.client-list .col-1-4 ul li::before {
    content: "— ";
    inset-inline-start: -1.25em;
    position: absolute;
}
.client-list .col-1-4 ul li span {
	display: none;
}
.client-list .col-1-4:nth-child(2) {
	-webkit-order: 1;
	        order: 1;
}
.client-list .col-1-4:nth-child(3) {
	-webkit-order: 3;
	        order: 3;
}
.client-list .col-1-4:nth-child(4) {
	-webkit-order: 2;
	        order: 2;
}
.client-list .col-1-4:nth-child(5) {
	-webkit-order: 4;
	        order: 4;
}
@media all and (min-width: 768px) {
	.client-list .section-title {
		margin-bottom: var(--v-margin);
	}
	.client-list .col-1-4 {
		width: calc(100% / 4);
	}
	.client-list .col-1-4:nth-child(3) {
		-webkit-order: 2;
		        order: 2;
	}
	.client-list .col-1-4:nth-child(4) {
		-webkit-order: 3;
		        order: 3;
	}
}
@media all and (min-width: 1024px) {
	.client-list .col-1-4 ul li span {
		display: inline;
	}
}

/* --------------------------------------------------------------
= 10. Site Pagination
-------------------------------------------------------------- */

#site-pagination {
	display: flex;
	height: calc(50vh - var(--header) - var(--v-margin));
	position: relative;
}
.nav {
	position: absolute;
		top: 50%;
	transform: translateY(-50%);
	width: calc(100% / 2);
}
.nav a {
	display: block;
	position: relative;
	text-decoration: none;
}
.nav.nav-title,
.nav a .nav--label {
	color: var(--color-gray);
}
.nav a .nav--meta {
	color: var(--color-gray);
	transition: color 300ms ease;
}
.nav a .nav--label,
.nav a:hover .nav--meta {
	color: var(--color-black);
}
.nav.nav-title {
	display: none;
}
.nav.nav-next {
	left: calc(100% / 2);
	text-align: right;
}
.nav .nav--meta {
	position: absolute;
		top: 1.33em;
	width: 100%;
}
@media all and (min-width: 768px) {
	.nav {
		width: calc(100% / 4);
	}
	.nav.nav-title {
		display: block;
	}
	.nav.nav-prev {
		left: calc(100% / 4);
	}
	.nav.nav-next {
		left: calc(100% / 2);
		text-align: left;
	}
}

/* --------------------------------------------------------------
= 11. Site Footer
-------------------------------------------------------------- */

#site-footer {
	padding: 20px 0;
}
#site-top {
	cursor: pointer;
	height: 1.5em;
	position: absolute;
		top: 0;
		right: calc(var(--h-margin) * 2);
	text-align: center;
	width: 15px;
	z-index: 10;
}
#follow-menu {
	list-style: none;
	margin: 0;
	padding: 0 var(--h-margin);
}
#site-top,
#follow-menu a {
	color: var(--color-gray);
	text-decoration: none;
	transition: color 300ms ease;
}
#site-top:hover,
#follow-menu a:hover {
	color: var(--color-black);
}
@media all and (min-width: 768px) {
	#follow-menu {
		display: flex;
		padding: 0;
	}
	#follow-menu li {
		padding: 0 var(--h-margin);
		width: calc(100% / 4);
	}
}

/* --------------------------------------------------------------
= 12. Transitions
-------------------------------------------------------------- */

/* Pace ------------------------------------------------------ */

.pace {
	-webkit-pointer-events: none;
	        pointer-events: none;

	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;

	z-index: 2000;
	position: fixed;
	height: 6rem;
	width: 6rem;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.pace.pace-inactive .pace-progress {
	display: none;
}
.pace .pace-progress {
	background-image: url("assets/images/3n-design-logo.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 150px auto;
	display: block;
	height: 100%;
	position: fixed;
		left: 0;
		top: 0;
	text-align: center;
	width: 100% !important;
	z-index: 2000;

	-webkit-animation: pace-theme-center-circle-spin linear infinite 2s;
	   -moz-animation: pace-theme-center-circle-spin linear infinite 2s;
	    -ms-animation: pace-theme-center-circle-spin linear infinite 2s;
	     -o-animation: pace-theme-center-circle-spin linear infinite 2s;
	        animation: pace-theme-center-circle-spin linear infinite 2s;

	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	     -o-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}
@-webkit-keyframes pace-theme-center-circle-spin {
	from { -webkit-transform: rotate(0deg) }
	to   { -webkit-transform: rotate(360deg) }
}
@-moz-keyframes pace-theme-center-circle-spin {
	from { -moz-transform: rotate(0deg) }
	to   { -moz-transform: rotate(360deg) }
}
@-ms-keyframes pace-theme-center-circle-spin {
	from { -ms-transform: rotate(0deg) }
	to   { -ms-transform: rotate(360deg) }
}
@-o-keyframes pace-theme-center-circle-spin {
	from { -o-transform: rotate(0deg) }
	to   { -o-transform: rotate(360deg) }
}
@keyframes pace-theme-center-circle-spin {
	from { transform: rotate(0deg) }
	to   { transform: rotate(360deg) }
}

/* Fade In --------------------------------------------------- */

#site-header {
	transform: translateY(-100%);
	transition: transform 900ms ease;
}
.is-loaded #site-header {
	transform: translateY(0);
}
figure#featured-image img,
figure#featured-image picture {
	height: 100%;
	max-height: 0;
	transition: max-height 900ms ease;
}
.is-loaded figure#featured-image img,
.is-loaded figure#featured-image picture {
	max-height: 100%;
}
#page-header {
	opacity: 0;
	transform: translateY(-1.5em);
	transition: all 900ms ease 300ms;
}
.is-loaded #page-header {
	opacity: 1;
	transform: translateY(0);
}
.grid .cell .fade figure img,
.grid .cell .fade figure picture {
	max-height: 0;
}
.grid .cell .fade.in figure img,
.grid .cell .fade.in figure picture {
	max-height: 100%;
}
.cell .fade .post-details {
	opacity: 0;
	transform: translateY(-1.5em);
	transition: all 300ms ease;
}
.cell .fade.in .post-details {
	opacity: 1;
	transform: translateY(0);
}
.fade {
	opacity: 0;
	transform: translateY(-1.5em);
	transition: all 900ms ease;
}
.fade.in {
	opacity: 1;
	transform: translateY(0);
}
.fade.dly-300 {
	transition-delay: 300ms;
}
@media all and (min-width: 768px) {
	.grid .cell:nth-child(even) .fade figure img,
    .grid .cell:nth-child(even) .fade figure picture,
	.cell:nth-child(even) .fade .post-details {
		transition-delay: 300ms;
	}
}

/* Fade Out -------------------------------------------------- */

.fade--out #site-header {
	transform: translateY(-100%);
}
main,
#site-footer {
	opacity: 1;
	transition: opacity 900ms ease;
}
.fade--out main,
.fade--out #site-footer {
	opacity: 0;
}

/* --------------------------------------------------------------
= 13. Accessibility
-------------------------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}