/*
Theme Name: PKD
Author: Peter King Design
Author URI: http://peterkingdesign.com/
Description: A custom designed, semantic, HTML5, canvas developed by Peter King Design.

*/

/*--------------------------------------------------------------
Color System
--------------------------------------------------------------*/

/*
 * Child themes should override the brand variables first. Role-based variables
 * inherit from them and can be overridden only when a project needs to differ.
 */

:root {
	/* Brand palette */
	--pkd-color-primary: #e53916;
	--pkd-color-primary-dark: #b83224;
	--pkd-color-secondary: #444;
	--pkd-color-tertiary: #fcb813;

	/* Text */
	--pkd-color-text: #555;
	--pkd-color-text-strong: #444;
	--pkd-color-heading: #777;
	--pkd-color-text-muted: #999;
	--pkd-color-text-reverse: #fff;

	/* Links and accents */
	--pkd-color-link: var(--pkd-color-primary);
	--pkd-color-link-hover: #222;
	--pkd-color-accent: var(--pkd-color-primary);
	--pkd-color-accent-hover: var(--pkd-color-primary-dark);

	/* Backgrounds */
	--pkd-color-background: #fff;
	--pkd-color-background-alt: #efefef;
	--pkd-color-background-reverse: #333;

	/* Borders and controls */
	--pkd-color-border: #ddd;
	--pkd-color-border-light: #eee;
	--pkd-color-border-dark: #ccc;

	/* Status */
	--pkd-color-error: #cc0033;
	
	/* Font */
	--pkd-font-primary: 'Open Sans', sans-serif;
	--pkd-font-secondary: 'Open Sans', sans-serif;
}

/*--------------------------------------------------------------
Global Typography
--------------------------------------------------------------*/

body {	
	font-family: var(--pkd-font-primary, 'Open Sans', sans-serif);
	font-size: 100%;
	line-height: 1.7;
	color: var(--pkd-color-text);
	}

h1, h2, h3, h4, h5, h6,
#mainnav, .menu-footer-container li, #side-menu, .slideshow-title, #page-menu a, .typography .menu-solutions-container {
	font-family: var(--pkd-font-secondary, 'Open Sans', sans-serif);
	font-weight: normal;
	color: var(--pkd-color-heading);
	}

input, textarea  {
	font-family: var(--pkd-font-primary, 'Open Sans', sans-serif);
}
	
/* Contact Form */
::-webkit-input-placeholder { font-family: var(--pkd-font-primary, 'Open Sans', sans-serif); color: var(--pkd-color-border-dark);}
::-moz-placeholder { font-family: var(--pkd-font-primary, 'Open Sans', sans-serif); color: var(--pkd-color-border-dark); } /* firefox 19+ */
:-ms-input-placeholder { font-family: var(--pkd-font-primary, 'Open Sans', sans-serif); color: var(--pkd-color-border-dark); } /* ie */
:-moz-placeholder { font-family: var(--pkd-font-primary, 'Open Sans', sans-serif); color: var(--pkd-color-border-dark); }

::-moz-selection { color: var(--pkd-color-text-reverse); background: var(--pkd-color-accent); } /* Code for FF */
::selection { color: var(--pkd-color-text-reverse); background: var(--pkd-color-accent); }

/*--------------------------------------------------------------
Structure
--------------------------------------------------------------*/

html, body { position:relative; padding:0; margin:0; display:block;}
div {  display:block; }

html { }

	
body {
	margin: 0;
	background: var(--pkd-color-background);
}

body.home { }


.show-wp-toolbar #branding { /*Hide WP Toolbar Plugin */
	margin-top: 32px;
	/*transition: margin-top 1s ;*/
}
html.hide-wp-toolbar.transition #branding {
	/*transition: margin-top 1s 1s;*/
}



/* SITE WIDTH */
/*	37.5em  = 600px
	48em    = 768px
	56.25em = 900px
	75em    = 1200px
	100em   = 1600px
	*/

:root {
	--pkd-site-width: 1200px;
	--pkd-site-gutter: clamp(1rem, 4vw, 2rem);
}

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

.site-width {
	width: 100%;
	max-width: calc(
		var(--pkd-site-width) + (var(--pkd-site-gutter) * 2)
	);
	margin-inline: auto;
	padding-inline: var(--pkd-site-gutter);
	box-sizing: border-box;

}

.site-width--skinny {
	--pkd-site-width: 800px;
}

.site-width--wide {
	--pkd-site-width: 1600px;
}

.site-width--full {
	max-width: none;
	padding-inline: var(--pkd-site-gutter);
}

.site-width--bleed {
	max-width: none;
	padding-inline: 0;
}

.page-header__inner { position: relative; }
.entry-content__inner {}

/* site-width */



#page {
	display: block;
	height: 100%;
	position: relative;
	min-height: 100vh;
}
#main {
	display:block;
	position:relative;
}
#Primary {
	margin: 60px 0;
	min-height: calc(100vh - var(--header-height)); 
	min-height: calc(100svh - var(--header-height));
}

#secondary {
	display: none;
}

/* Structure: Responsive */
@media screen and (max-width: 1240px) {
	.home #main,
	.single-portfolio #main {
		margin: 0;
	}
}

@media screen and (max-width: 959px) {
	body {
		font-size: .9375em;
	}

	#page {
		width: 100%;
	}

	#main {
		padding-top: 0;
		margin-top: 64px;
	}

	.home #main {
		margin-top: 0;
	}
}


.flex-row { display: flex; flex-flow: row; justify-content: space-between; }
.flex-col { display: flex; flex-flow: column; justify-content: space-between; }
.flex-item {}



/* Increase the size of the content area for templates without sidebars */
.full-width #content,
.image-attachment #content,
.error404 #content {
	margin: 0;
}

/* Text meant only for screen readers */
.screen-reader-text,
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1%;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1%;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.displace {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
	}

a, a:link, a:visited { color: var(--pkd-color-link); }
a:hover, a:active  { color: var(--pkd-color-link-hover); }

a:hover,
.typography a:hover {
	-moz-transition: 	color .3s ease-in-out;
	-webkit-transition:	color .3s ease-in-out;
  -o-transition: 		color .3s ease-in-out;
	transition:  		color .3s ease-in-out;	
}




/* SECTION-BAND */

.section-band { 
	width:100%; 
	box-sizing: border-box;
}

.section-featured-image {   }

.section-header {  }

.section-title { 
	font-size: 2em;
	text-transform: uppercase;
	letter-spacing: .025em;
	line-height: 1;
	text-align: center;
	position: relative;
}
.section-title span {
    border-bottom: 1px solid var(--pkd-color-border-dark);
}

.section-content { }

.section-align-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.section-band.no-padding { padding:0; }
.section-band {padding: 10vh 0 10vh 0;}
.section-band.fat { padding: 16vh 0 16vh 0;}
.section-band.short {  padding: 5vh 0 5vh 0; }

.section-band.reverse { background: var(--pkd-color-background-reverse); }

/**********/





/* Viewport Heights
--------------------------------------------- */

.vh-full, .vh-100 { min-height: 100vh; min-height: 100svh; }
.vh-90 { min-height: 90vh; min-height: 90svh; }
.vh-80 {min-height: 80vh; min-height: 80svh;}
.vh-75 {min-height: 75vh; min-height: 75svh;}
.vh-70 {min-height: 70vh; min-height: 70svh;}
.vh-66 {min-height: 66vh; min-height: 66svh;}
.vh-60 {min-height: 60vh; min-height: 60svh;}
.vh-50 {min-height: 50vh; min-height: 50svh;}


/* Alternate Adjsted for Header Height */
.vh-alt-full {min-height: calc(100vh - var(--header-height)); min-height: calc(100svh - var(--header-height)); }
.vh-alt-100 {min-height: calc(100vh - var(--header-height)); min-height: calc(100svh - var(--header-height));}
.vh-alt-90 {min-height: calc(90vh - var(--header-height)); min-height: calc(90svh - var(--header-height));}
.vh-alt-80 {min-height: calc(80vh - var(--header-height)); min-height: calc(80svh - var(--header-height));}
.vh-alt-75 {min-height: calc(75vh - var(--header-height)); min-height: calc(75svh - var(--header-height));}
.vh-alt-70 {min-height: calc(70vh - var(--header-height)); min-height: calc(70svh - var(--header-height));}
.vh-alt-66 {min-height: calc(66vh - var(--header-height)); min-height: calc(66svh - var(--header-height));}

/* Fixed-height modifier */
.vh-fixed {
	height: 100vh;
	min-height: 0;
	overflow: hidden;
}

.vh-alt-100.vh-fixed {
	height: calc(100vh - var(--header-height));
}

/* Ratio */
.ratio-16x9 {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.media-ratio-16x9 {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.media-ratio-16x9 > :is(img, video, iframe) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}




/* Scalable directional arrows.
 * Size:  font-size
 * Color: color
 */
.pkd-arrow {
	display: inline-block;
	box-sizing: border-box;
	width: 1em;
	height: 1em;
	border-right: 0.12em solid currentColor;
	border-bottom: 0.12em solid currentColor;
	vertical-align: middle;
}

.pkd-arrow--up {
	transform: rotate(-135deg);
}

.pkd-arrow--right {
	transform: rotate(-45deg);
}

.pkd-arrow--down {
	transform: rotate(45deg);
}

.pkd-arrow--left {
	transform: rotate(135deg);
}





/* Flex Rows and Columns
--------------------------------------------- */

.pkd-row {
	--pkd-column-gap: 2em;
	--pkd-row-gap: 2em;

	display: flex;
	flex-wrap: wrap;
	column-gap: var(--pkd-column-gap);
	row-gap: var(--pkd-row-gap);
	width: 100%;
	margin-bottom: 1em;
}

:where(.pdk-row) > :where(
	[class^="col-"],
	[class*=" col-"]
) {
	box-sizing: border-box;
	flex: 0 0 100%;
	min-width: 0;
}

@media screen and (min-width: 768px) {

	.col-1  { flex-basis: calc((100% + var(--pkd-column-gap)) / 12 - var(--pkd-column-gap)); }
	.col-2  { flex-basis: calc((100% + var(--pkd-column-gap)) / 6 - var(--pkd-column-gap)); }
	.col-3  { flex-basis: calc((100% + var(--pkd-column-gap)) / 4 - var(--pkd-column-gap)); }
	.col-4  { flex-basis: calc((100% + var(--pkd-column-gap)) / 3 - var(--pkd-column-gap)); }
	.col-5  { flex-basis: calc((100% + var(--pkd-column-gap)) * 5 / 12 - var(--pkd-column-gap)); }
	.col-6  { flex-basis: calc((100% - var(--pkd-column-gap)) / 2); }
	.col-7  { flex-basis: calc((100% + var(--pkd-column-gap)) * 7 / 12 - var(--pkd-column-gap)); }
	.col-8  { flex-basis: calc((100% + var(--pkd-column-gap)) * 2 / 3 - var(--pkd-column-gap)); }
	.col-9  { flex-basis: calc((100% + var(--pkd-column-gap)) * 3 / 4 - var(--pkd-column-gap)); }
	.col-10 { flex-basis: calc((100% + var(--pkd-column-gap)) * 5 / 6 - var(--pkd-column-gap)); }
	.col-11 { flex-basis: calc((100% + var(--pkd-column-gap)) * 11 / 12 - var(--pkd-column-gap)); }
	.col-12 { flex-basis: 100%; }

}

/* PKD Grid
--------------------------------------------- */

/* Common grid layouts */

.pkd-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--pkd-grid-gap, 2em);
	row-gap: var(
		--pkd-row-gap,
		var(--pkd-grid-gap, 2em)
	);
	align-items: var(--pkd-grid-align, stretch);
	width: 100%;
}

.pkd-grid > * {
	min-width: 0;
}


/* Two, Four and Five Columns
--------------------------------------------- */

@media screen and (min-width: 37.5em) {

	/* Two equal columns: 50% / 50% */

	.pkd-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}


	/* Four columns become two columns */

	.pkd-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}


	/* Five columns become two columns */

	.pkd-grid--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


/* Three Columns and Proportional Layouts
--------------------------------------------- */

@media screen and (min-width: 48em) {

	/* Three equal columns */

	.pkd-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}


	/* 67% / 33%
	Aligns with the three-column grid */

	.pkd-grid--67-33,
	.pkd-grid--33-67 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pkd-grid--67-33 > :first-child {
		grid-column: span 2;
	}

	.pkd-grid--33-67 > :last-child {
		grid-column: span 2;
	}


	/* 60% / 40%
	Aligns with the five-column grid */

	.pkd-grid--60-40,
	.pkd-grid--40-60 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.pkd-grid--60-40 > :first-child {
		grid-column: span 3;
	}

	.pkd-grid--60-40 > :last-child {
		grid-column: span 2;
	}

	.pkd-grid--40-60 > :first-child {
		grid-column: span 2;
	}

	.pkd-grid--40-60 > :last-child {
		grid-column: span 3;
	}


	/* 75% / 25%
	Aligns with the four-column grid */

	.pkd-grid--75-25,
	.pkd-grid--25-75 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.pkd-grid--75-25 > :first-child {
		grid-column: span 3;
	}

	.pkd-grid--25-75 > :last-child {
		grid-column: span 3;
	}

}


/* Four and Five Equal Columns
--------------------------------------------- */

@media screen and (min-width: 56.25em) {

	.pkd-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.pkd-grid--5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

}




/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/



:root {
	--header-height: 100px;
	--header-height-scroll: 80px;
	--header-height-current: var(--header-height);
	--header-logo-width: 300px;
	--header-logo-width-scroll: 220px;
	--header-background: color-mix(in srgb, var(--pkd-color-background) 90%, transparent);
	--header-background-scroll: var(--pkd-color-background);
	--header-border-color-scroll: var(--pkd-color-border-light);
	--header-menu-color: var(--pkd-color-text-strong);
	--header-menu-color-scroll: var(--pkd-color-background-reverse);
	--header-transition: .4s ease-out;
}


#branding {
	height: var(--header-height-current);
	transition: height var(--header-transition);
}

#FixedHeaderSpacer { height: 0; }

#FixedHeaderSpacer.header-fixed {  }

body.no-hero #FixedHeaderSpacer {}


#branding {
	display: block;
	width: 100%;
	position: fixed;
	z-index: 100;
	top: 0;
	background: var(--header-background);
	border-bottom: 1px solid transparent;
	transition:
		height var(--header-transition),
		background-color var(--header-transition),
		border-color var(--header-transition);
}


hgroup {
}
#site-title {
	padding: 0.6em 0;
    margin: 0;
}
#site-description {
	font-size: .9375em;
	font-weight: normal;
	margin: 0 0 0 8px;
	
	position:absolute;
	left: -400%;
}

.header-flex {
	display: flex;
	justify-content: space-between;
}

#logo-container {
	position: relative;
	height: var(--header-height-current);
	flex: 0 0 var(--header-logo-width);
	transition:
		height var(--header-transition),
		flex-basis var(--header-transition);
}

.main-logo {
	display:block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0 ;
	text-decoration: none;
	transition:
		opacity var(--header-transition);
	}

.main-logo .site-logo { 
	width: 100%;
    height: 100%;
    object-position: 50% 50%;
    object-fit: contain;
}

#logo-scroll {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
}

#logo {
	position: relative;
	z-index: 2;
}

@media screen and (min-width: 60em) {

	body.scroll {
		--header-height-current: var(--header-height-scroll);
	}

	body.scroll #branding,
	body.no-hero #branding {
		background: var(--header-background-scroll);
		border-bottom-color: var(--header-border-color-scroll);
	}

	body.scroll #logo-container {
		flex-basis: var(--header-logo-width-scroll);
	}

	body.scroll #logo-container.has-scroll-logo #logo,
	body.no-hero #logo-container.has-scroll-logo #logo {
		z-index: 1;
		opacity: 0;
		pointer-events: none;
	}

	body.scroll #logo-container.has-scroll-logo #logo-scroll,
	body.no-hero #logo-container.has-scroll-logo #logo-scroll {
		z-index: 2;
		opacity: 1;
		pointer-events: auto;
		transition-delay: .1s;
	}

	body.scroll #mainnav a,
	body.no-hero #mainnav a {
		color: var(--header-menu-color-scroll);
	}

}

/* Header: Responsive */
@media screen and (max-width: 959px) {
	#branding {
		position: relative;
		height: 60px;
	}

	#FixedHeaderSpacer {
		height: 0;
	}
}


/*--------------------------------------------------------------
Sliders and Backgrounds
--------------------------------------------------------------*/


/* Gradient Overlay */
:root {
	--pkd-image-overlay: linear-gradient(
		to bottom,
		rgb(0 0 0 / 20%) 0%,
		rgb(0 0 0 / 0%) 50%,
		rgb(0 0 0 / 10%) 100%
	);
}
.pkd-image-overlay {
	position: relative;
}

.pkd-image-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--pkd-image-overlay);
	pointer-events: none;
}

/* HERO */
#Page-Hero  {	
	position: relative;
	z-index: 10;
}
	
.page-hero {
	position: relative;
	width: 100%;
	height: 66vh;
	margin: 0;
	background: var(--pkd-color-background-alt);
	overflow: hidden;
}

.page-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.no-hero {
	width: 100%;
	height: clamp(5em, 7vw, 9em);
	background-color: var(--pkd-no-hero-bg, transparent);
}

@media screen and (max-width: 959px) {
	#No-Hero {
		height: 0;
	}
}

.page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--pkd-image-overlay);
	pointer-events: none;
}

.hero-video-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.hero-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}



/*--------------------------------------------------------------
Home Page
--------------------------------------------------------------*/


#Section-Home-About {}

#Section-Home-Blog {}



/*--------------------------------------------------------------
Slideshow / Swiper
--------------------------------------------------------------*/


/* Specify Swiper's Size: */
.swiper-container {overflow: hidden; position: relative;}

.swiper-container, .swiper-slide,  .swiper-wrapper,  .swiper-image {
  width: 100%;
  height: 100%;
}

.swiper-pagination {
	display: none;
}
.swiper-pagination-bullet {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: var(--pkd-color-text-reverse);
	margin-right: 6px;
	opacity: 0.7;
	border: 0 solid var(--pkd-color-text-reverse);
	cursor: pointer;
	border-radius: 10px;
}

.slideshow .swiper-pagination-bullet {
  background: var(--pkd-color-accent);
  opacity: .8;
}
.slideshow .swiper-pagination-bullet:hover,
.slideshow .swiper-pagination-bullet-active {
  background: var(--pkd-color-accent);
  opacity: 1;
}

.swiper-button-prev, .swiper-button-next {
	display: none;
 }
 
 .swiper-button-prev:after, .swiper-button-next:after {
	 font-size: 3em; 
 }
 
 .slide-arrow { }
 
 #Arrow-left {}
 
 #Arrow-right {}


.slideshow .swiper-container, .slideshow .swiper-slide, .slideshow .swiper-wrapper { position:relative; }



.single-portfolio .slideshow  .pagination, .single-services .slideshow  .pagination, .page-child .slideshow  .pagination { bottom: 40px; }

.swiper-image { }

.swiper-image img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.swiper-content {
	position:absolute; 
	display:block;
	bottom: 0;
	background: rgba(0,0,0,.6); 
	color: var(--pkd-color-text-reverse);
	z-index: 110;
	padding: 1vw;
	}


.swiper-title {
	color: var(--pkd-color-text-reverse);
	font-size: 1.3em; 
	line-height:1.5; 
}
.swiper-copy {
	font-size: 1.1em;
	line-height: 1.7;
	letter-spacing: 1px;
}



/*--------------------------------------------------------------
Menu
--------------------------------------------------------------*/
/* Main Navigation
--------------------------------------------- */

#mainnav {
	position: relative;
	z-index: 200;
	display: block;
	padding: 0;
}

#mainnav #main-menu {
	display: block;
}

#mainnav #responsive-menu {
	display: none;
}


/* Base Menu Structure
--------------------------------------------- */

#mainnav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#mainnav ul.menu {
	display: flex;
}

#mainnav li {
	position: relative;
	display: block;
}

#mainnav a {
	display: block;
	margin: 0;
	color: var(--header-menu-color);
	font-size: 1em;
	letter-spacing: 1px;
	text-decoration: none;
	transition: color var(--header-transition);
}


/* Top-Level Menu
--------------------------------------------- */

#mainnav ul.menu > li > a {
	padding: 0 1em;
	line-height: var(--header-height-current, 80px);
	text-align: center;
	text-transform: uppercase;
	transition:
		line-height var(--header-transition),
		color var(--header-transition);
}


/* Submenus
--------------------------------------------- */

#mainnav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 999;
	display: none;
	width: auto;
	min-width: 200px;
}

#mainnav li:hover > .sub-menu,
#mainnav li:focus-within > .sub-menu {
	display: block;
}

#mainnav .sub-menu li {
	background-color: color-mix(in srgb, var(--pkd-color-background) 80%, transparent);
}

#mainnav .sub-menu a {
	padding: 1em;
	line-height: 1;
	text-align: left;
	white-space: nowrap;
}

#mainnav .sub-menu a:hover,
#mainnav .sub-menu a:focus {
	background-color: var(--pkd-color-background);
}


/* Hover and Current States
--------------------------------------------- */

#mainnav li:hover > a,
#mainnav li:focus-within > a,
#mainnav .current-menu-item > a,
#mainnav .current-menu-parent > a,
#mainnav .current-menu-ancestor > a,
#mainnav .current_page_item > a,
#mainnav .current_page_parent > a,
#mainnav .current_page_ancestor > a,
#mainnav .current_parent_item > a {
	color: var(--pkd-color-accent);
}



/* HAMBURGER */

#hamburger {
	position: absolute;
	display: none;
	place-items: center;
	width: 60px;
	height: 60px;
	right: 20px;
	cursor: pointer;
}

#hamburger .layer {
	grid-area: 1 / 1;
	width: 40px;
	height: 2px;
	margin: 0;
	background: currentColor;
	transition:
		transform 500ms ease-out,
		opacity 500ms ease-out;
}

#layer1 {
	transform: translateY(-10px);
}

#layer2 {
	transform: rotate(0);
}

#layer3 {
	transform: translateY(10px);
}

#hamburger.active #layer1 {
	transform: translateY(0) rotate(135deg);
}

#hamburger.active #layer2 {
	opacity: 0;
	transform: rotate(360deg);
}

#hamburger.active #layer3 {
	transform: translateY(0) rotate(-135deg);
}


/*#hamburger-menu { display:block;}
#hamburger { 
	width: 2em;
	padding: 1.3em;
	position: fixed;
	cursor: pointer;
	display: none;
	z-index: 1000;
	right:0;
	font-size: 1em;
	background-color: color-mix(in srgb, var(--pkd-color-background) 80%, transparent);
}

.not-home #hamburger { position: fixed; }

#hamburger .layer { 
	width: auto;
	height: 3px;
	background: var(--pkd-color-text-muted);
	position: relative;
	margin-bottom: 0.4em;
 }
#hamburger #layer3 {margin-bottom: 0;}
#hamburger:hover .layer {  }


#hamburger-menu:hover #mainnav.js { display:block;  opacity:1; }
#hamburger-menu:hover + .entry-header.js  { display:none; }


#mainnav li.mobile-menu { display: none; }


#hamburger .layer { 
	-webkit-transition: 	transform 500ms ease-out, top 500ms ease-out, opacity 500ms ease-out, bottom 500ms ease-out;
    -moz-transition: 		transform 500ms ease-out, top 500ms ease-out, opacity 500ms ease-out, bottom 500ms ease-out;
    -o-transition: 			transform 500ms ease-out, top 500ms ease-out, opacity 500ms ease-out, bottom 500ms ease-out;
    transition: 			transform 500ms ease-out, top 500ms ease-out, opacity 500ms ease-out, bottom 500ms ease-out;
}

#layer1 { top:0; transform: rotate(0deg);}
#layer2 { opacity:1; transform: rotate(0deg);}
#layer3 { bottom:0; transform: rotate(0deg);}

#hamburger.active #layer1 { top: .63em; transform: rotate(135deg); }
#hamburger.active #layer2 { opacity: 0; transform: rotate(360deg);  }
#hamburger.active #layer3 { bottom: .63em; transform: rotate(-135deg); }*/


#mainnav #responsive-menu {
	display:none; 
	position: fixed ; 
	top:0; 
	bottom: 0; 
	left:105%; 
	width: 100%; 
	background: var(--pkd-color-primary-dark);
	overflow: auto;
	
	-webkit-transition: 	left .3s ease-out;
  	-moz-transition: 		left .3s ease-out;
  	-o-transition: 			left .3s ease-out;
  	transition: 			left .3s ease-out;
	}

/* Mobile Navigation */
@media screen and (max-width: 959px) {
	#hamburger {
		display: grid;
	}

	#mainnav #main-menu {
		display: none;
	}

	#mainnav #responsive-menu {
		display: block;
	}

	#mainnav.openmenu #responsive-menu {
		left: 0;
	}

	#mainnav #responsive-menu ul {
		display: block;
		padding-top: 1.1em;
	}

	#mainnav #responsive-menu ul li {
		display: block;
		width: auto;
	}

	#mainnav #responsive-menu ul li a {
		padding: 1.1em 1.5em;
		color: var(--pkd-color-text-reverse);
		font-size: 1.2em;
		line-height: 1.1;
		text-align: left;
	}

	#mainnav #responsive-menu ul li .sub-menu {
		display: none;
	}
}


/*--------------------------------------------------------------
Top Menu
--------------------------------------------------------------*/
#TopNav {
	
}
#TopNav .menu-top-menu-container {
}

#TopNav .menu {
    list-style: none outside none;
    padding: 0;
	margin: 0;
	
}
#TopNav .menu li {
	display: inline-block;
	font-size: 1em;
	line-height: 1;
}

#TopNav .menu li a {
	display:block;
  padding: 10px ;
  color: var(--pkd-color-border-light);
	text-decoration:none;
}

#TopNav .menu li a:hover,
#TopNav li.current_page_item  a {
	background: var(--pkd-color-accent);
	}

#social {
}
#social img:hover {
	opacity:0.80;
	}
	


/*--------------------------------------------------------------
Content
--------------------------------------------------------------*/



.page-template-blog-page-php article,
.category-press-releases  article {
}

.sticky {
}
.home .entry-header {
}
	
.entry-meta {
	display: block;
}
.single-author .entry-meta .byline {
	display: none;
}
#content nav {
	display: block;
	overflow: hidden;
}
#content nav .nav-previous {
	float: left;
	width: 50%;
}
#content nav .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
#content #nav-above {
	display: none;
}
.paged #content #nav-above,
.single #content #nav-above {
	display: block;
}
#nav-below {
	margin: 1em 0 0;
}
.page-link {
	clear: both;
	margin: 0 0 1em;
}
.page .edit-link {
	clear: both;
	display: block;
}

/* 404 page */
.error404 .widget {
	float: left;
	width: 33%;
}
.error404 .widget .widgettitle,
.error404 .widget ul {
	margin-right: 1em;
}
.error404 .widget_tag_cloud {
	clear: both;
	float: none;
	width: 100%;
}

/* Notices */
.post .notice,
.error404 #searchform {
	
}

/* Image Attachments */
.image-attachment div.entry-meta {
	float: left;
}
.image-attachment nav {
	float: right;
	margin: 0 0 1em 0;
}
.image-attachment .entry-content {
	clear: both;
}
.image-attachment .entry-content .entry-attachment {
	background: var(--pkd-color-border-light);
	margin: 0 0 1em;
	padding: 1em;
	text-align: center;
}
.image-attachment .entry-content .attachment {
	display: block;
	margin: 0 auto;
	text-align: center;
}

/* Aside Posts */
.format-aside .entry-header {
	display: none;
}
.single .format-aside .entry-header {
	display: block;
}
.format-aside .entry-content,
.format-aside .entry-summary {
	padding-top: 1em;
}
.single .format-aside .entry-content,
.single .format-aside .entry-summary {
	padding-top: 0;
}

/* Gallery Posts */
.format-gallery .gallery-thumb {
	float: left;
	margin: 0 1em 0 0;
}

/* Image Posts */
.format-image .entry-header {
	display: none;
}
.single .format-image .entry-header {
	display: block;
}
.format-image .entry-content,
.format-image .entry-summary {
	padding-top: 1em;
}
.single .format-image .entry-content,
.single .format-image .entry-summary {
	padding-top: 0;
}

figure {margin: 0;}



/*--------------------------------------------------------------
Images
--------------------------------------------------------------*/

a img {
	border: none;
}
p img {
	margin-bottom: 0.5em; /* a small bottom margin prevents content floating under images */
}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img,
.wp-caption {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}
img.alignleft {
	margin-right: 1em;
	margin-bottom: 1em;
}
img.alignright {
	margin-left: 1em;
	margin-bottom: 1em;
}
.wp-caption {
	padding: 0em;
	text-align: center;
}
.wp-caption img {
	margin: 0em;
}
.wp-caption .wp-caption-text {
	padding: .4em;
	background: var(--pkd-color-background-alt);
	margin-top: -10px;
	font-style: italic;
	font-size: .9em;
}
.gallery-caption {
}
.wp-smiley {
	margin: 0;
}

/* Image Alignment: Responsive */
@media screen and (max-width: 959px) {
	.alignleft,
	.alignright,
	.aligncenter {
		display: block;
		float: none;
		margin: 0;
	}

	img.alignleft,
	img.alignright {
		margin: 0 0 10px;
		padding: 0;
	}
}



/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/

#searchform label {
	
}
/*
#searchform input#s {
	width: 60%;
}
*/
input[type=text],
input[type=email],
input[type=tel],
textarea,
select,
input#s {
	margin:  0 0 15px 0;
	width: 98%;
	font-size: 1em;
	color: var(--pkd-color-accent);
	padding: 8px;
	background: var(--pkd-color-background-alt);
	border: 1px solid var(--pkd-color-border-light);
	box-sizing: border-box;
}
textarea {
	width: 98%;
}

input[type="button"], input[type="submit"], input[type="reset"] {
	
}

input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {  }

select {
	color:inherit;
}


#search {
	
}

header #searchform {
	float: right;
}

#searchform div {
	float: left;
	margin: 6px 0 0 0 ;
	position: relative;
	
}
#searchform input[type=text] { 
	display: inline-block;
	background: var(--pkd-color-background);
	border: 1px solid var(--pkd-color-border);
	width: auto; 
	margin:0;
	padding:  0 30px 0 12px;
	height: 29px;
	font-size:1em;
	line-height:1;
	color: var(--pkd-color-text);
	float:left;
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	}

#searchsubmit {
	width: 38px;
	border:none;
	padding:0;
	background: none;

	position: absolute;
	right: 0;
	z-index: 99;
	top:0;
	bottom: 0;
	margin:0;
	padding: 0;
}
#searchsubmit:hover { cursor:pointer;	}
#searchsubmit:active {	 }


/* Font Awesome Search Icon */
i.fa.fa-search { font-size: 1.5em; color: var(--pkd-color-text-muted); }
#searchsubmit:hover i.fa.fa-search { color: var(--pkd-color-heading); }
#searchsubmit:active i.fa.fa-search { color: var(--pkd-color-accent); }


/* Class for labelling required form items */
.required {
	color: var(--pkd-color-error);
}


/* Contact Form 7 */
div.wpcf7-mail-sent-ok {
background: var(--pkd-color-background-reverse) !important;
margin: 0 !important;
color: var(--pkd-color-text-reverse) !important;
border: 0 !important; }

/* Forms: Responsive */
@media screen and (max-width: 959px) {
	input[type=text],
	input[type=email],
	input[type=tel],
	textarea,
	select,
	input#s {
		width: 95%;
	}
}



/*--------------------------------------------------------------
Comments
--------------------------------------------------------------*/

article.comment {
	display: block;
}
#respond input[type=text] {
	display: block;
	width: 60%;
}
#respond textarea {
	display: block;
	margin: 0 0 1em;
	width: 80%;
}
#respond .form-allowed-tags {
	clear: both;
	width: 80%;
}
#respond .form-allowed-tags code {
	display: block;
}


/*--------------------------------------------------------------
Widgets
--------------------------------------------------------------*/


.widget {
	margin: 0 0 20px 0;
	padding: 0 0 15px 0;
	border-bottom: 1px solid var(--pkd-color-border);
	
}
.widget.widget_search {
	overflow: hidden;
	background:none;


}
.widget-area .widget_search input {
	float: left;
}
.widget-title,
#secondary .widget-title {
	font-size: 1.3rem;
	line-height:1;
	letter-spacing: 1px;
	font-weight:normal;
}

.widget ul,
#secondary .widget ul {
	margin:0;
	padding: 0;
}

.widget li {
	list-style:none;
	display:block;
	padding: 0 ;
	margin:0;
	/*border-bottom: 1px dotted #DFDFDF;*/
}

.widget li a {
	display:block;
	font-size: 1rem;
	line-height: 1.1;
	color: var(--pkd-color-link);
	letter-spacing: 1px;
	padding: 7px  0;
	text-transform: none;
}


.widget a {
	text-decoration: none;
}
.widget a:hover {
	text-decoration: none;
}

.widget li a {}


.widget select { margin: 0 ; }


	

/*--------------------------------------------------------------
Side Menu
--------------------------------------------------------------*/

#side-menu .section-title  {
	padding: 0 0 10px 0;
	letter-spacing: 3px;
	text-transform: uppercase;
	border:none;
}
#side-menu .section-title a {
	font-size: 1.3rem;
		line-height: 1.1;
		letter-spacing: 1px;
}

#side-menu ul {
	margin:0;
	padding: 0;
}
#side-menu li {
	margin:0;
	padding:  0;

}
#side-menu li a {
	font-size: 1.0rem;
	text-decoration: none;

}
#side-menu li:hover a,
#side-menu li.current_page_item a {
	color: var(--pkd-color-background-reverse);
}
#side-menu li:hover {
}


#side-menu li ul.children { display:none; margin-left: 20px; font-size: 0.90em; }
#side-menu li.current_page_item ul.children,
#side-menu li.current_page_parent ul.children { display:block;}

/* Side Menu: Responsive */
@media screen and (max-width: 959px) {
	#side-menu ul {
		margin: 0;
	}

	#side-menu li {
		background-size: 100% 1px;
	}

	#side-menu li a {
		padding: 4px 10px 4px 25px;
		font-size: 110%;
	}
}





/*--------------------------------------------------------------
PKD Content
--------------------------------------------------------------*/

@layer pkd-content {

	/* Base Typography
--------------------------------------------- */

	:where(.typography) {
		--pkd-content-color: var(--pkd-color-text);
		--pkd-title-color: var(--pkd-color-text-muted);

		color: var(--pkd-content-color);
		font-size: 1rem;
		line-height: 1.7;
	}

	:where(.typography) :where(p) {
		margin: 0 0 1em;
	}

	:where(.typography) :where(blockquote) {
		margin: 0 0 0 2em;
		font-style: italic;
	}

	:where(.typography) :where(strong) {
		font-weight: bold;
	}


	/* Links
--------------------------------------------- */

	:where(.typography) :where(a) {
		text-decoration: none;
	}

	:where(.typography) :where(a:hover) {
		text-decoration: underline;
	}


	/* Lists
--------------------------------------------- */

	:where(.typography) :where(ul, ol) {
		margin: -1em 0 0;
		padding: 0 1.2em 1em;
	}

	:where(.typography) :where(li) {
		padding-bottom: 0.2em;
		line-height: 1.5;
		list-style: outside square;
	}

	:where(.typography) :where(ul#times, ul#times > li) {
		list-style: none;
	}

	:where(.typography) :where(ul.twocolumns li) {
		float: left;
		width: 48%;
		padding-right: 2%;
	}


	/* Headers
--------------------------------------------- */

	.page-header {
		clear: both;
		padding: 1em 0 2em;
	}

	:where(.typography) :where(h1, h2, h3, h4, h5, h6) {
		clear: none;
		margin: 0;
		padding: 0 0 1em;
		font-weight: normal;
		line-height: 1.2;
		letter-spacing: 1px;
	}


	:where(.typography) :where(h1) {
		font-size: 3em;
	}

	:where(.typography) :where(h2) {
		font-size: 2em;
	}

	:where(.typography) :where(h3) {
		font-size: 1.5em;
	}

	:where(.typography) :where(h4) {
		font-size: 1.25em;
	}

	:where(.typography) :where(h5) {
		font-size: 1em;
	}

	:where(.typography) :where(h6) {
		font-size: 0.9em;
	}

	:where(.typography) :where(h2, h3, h4, h5, h6) + :where(p),
	:where(.typography) :where(h2, h3, h4, h5, h6) + :where(ul) {
		margin-top: -1em;
	}
	
	:where(.typography) :where(.entry-title, .page-title) {
		margin: 0;
		padding: 0;
		color: var(--pkd-title-color);
		font-size: 2.5em;
		font-weight: normal;
		line-height: 1;
		letter-spacing: 2px;
		text-transform: uppercase;
		position: relative;
	}

	/* Tables
--------------------------------------------- */

	:where(.typography) :where(table.datatable) {
		margin: 10px 0;
		color: var(--pkd-color-text-strong);
		border-collapse: collapse;
	}

	:where(.typography) :where(.datatable th, .datatable td) {
		padding: 4px 12px;
		border: 1px solid var(--pkd-color-border);
		text-align: left;
	}

	:where(.typography) :where(.datatable th) {
		background-color: var(--pkd-color-border);
		border-color: var(--pkd-color-border-dark);
	}


	/* Alignment
--------------------------------------------- */

	:where(.typography) :where(.left) {
		text-align: left;
	}

	:where(.typography) :where(.center) {
		text-align: center;
	}

	:where(.typography) :where(.right) {
		text-align: right;
	}

	:where(.typography) :where(img.right) {
		float: right;
		margin-left: 20px;
	}

	:where(.typography) :where(img.left) {
		float: left;
	}

	:where(.typography) :where(img.leftAlone) {
		float: left;
		margin-right: 100%;
	}

	:where(.typography) :where(img.center) {
		display: block;
		float: none;
		margin-right: auto;
		margin-left: auto;
	}


	/* Reverse Content
--------------------------------------------- */

	.reverse {
		--pkd-content-color: var(--pkd-color-text-reverse);
		--pkd-title-color: var(--pkd-color-text-reverse);

		color: var(--pkd-color-text-reverse);
	}

	.reverse :where(p, a, h1, h2, h3, h4, h5, h6) {
		color: inherit;
	}
}




/* Entry Titles: Responsive */
@media screen and (max-width: 959px) {
	.typography h1.entry-title {
		padding-bottom: 10px;
		font-size: 180%;
		letter-spacing: 1px;
	}
}


/*--------------------------------------------------------------
Buttons
--------------------------------------------------------------*/

.button,
.wp-block-button__link {
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	vertical-align: middle;

	padding: 0.8em 1.8em;
	margin: 0.25em 0em;

	color: var(--pkd-button-color, var(--pkd-color-text-strong));
	background-color: var(--pkd-button-bg, var(--pkd-color-background));
	border: 1px solid var(--pkd-button-border, var(--pkd-color-text-muted));
	border-radius: var(--pkd-button-radius, 0);

	font-family: inherit;
	font-size: 1em;
	font-weight: inherit;
	line-height: 1.2;
	letter-spacing: 0.125em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;

	appearance: none;
	cursor: pointer;
	transition:
		color 200ms ease,
		background-color 200ms ease,
		border-color 200ms ease;
}


/* Adjacent Buttons
--------------------------------------------- */

:is(.button, .wp-block-button__link)
+ :is(.button, .wp-block-button__link) {
	margin-inline-start: 0.8em;
}

/* Gutenberg uses button wrappers */
.wp-block-buttons {
	gap: 0.8em;
}


/* Hover and Focus
--------------------------------------------- */

.button:is(:hover, :focus-visible),
.wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--pkd-button-hover-color, var(--pkd-color-text-reverse));
	background-color: var(--pkd-button-hover-bg, var(--pkd-color-text-muted));
	border-color: var(--pkd-button-hover-border, var(--pkd-color-text-muted));
	text-decoration: none;
}


/* Reverse
--------------------------------------------- */

/* Works on the button or any parent */

.reverse {
	--pkd-button-color: var(--pkd-color-text-reverse);
	--pkd-button-bg: var(--pkd-color-background-reverse);
	--pkd-button-border: #000;

	--pkd-button-hover-color: var(--pkd-color-text-reverse);
	--pkd-button-hover-bg: var(--pkd-color-heading);
	--pkd-button-hover-border: var(--pkd-color-heading);
}


/* Sizes
--------------------------------------------- */

.button.small,
.wp-block-button__link.small,
.wp-block-button.small .wp-block-button__link {
	font-size: 0.8em;
}

.button.large,
.wp-block-button__link.large,
.wp-block-button.large .wp-block-button__link {
	font-size: 1.25em;
}


/* Optional Color Variations
--------------------------------------------- */

.button.red,
.wp-block-button__link.red,
.wp-block-button.red .wp-block-button__link {
	--pkd-button-color: var(--pkd-color-text-reverse);
	--pkd-button-bg: #b83224;
	--pkd-button-border: #b83224;

	--pkd-button-hover-bg: #8f271c;
	--pkd-button-hover-border: #8f271c;
}

.button.blue,
.wp-block-button__link.blue,
.wp-block-button.blue .wp-block-button__link {
	--pkd-button-color: var(--pkd-color-text-reverse);
	--pkd-button-bg: #245c84;
	--pkd-button-border: #245c84;

	--pkd-button-hover-bg: #19415f;
	--pkd-button-hover-border: #19415f;
}







/*--------------------------------------------------------------
Video
--------------------------------------------------------------*/


.pkd-video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	width: 100%;
	overflow: hidden;
}

.pkd-video-container iframe, .pkd-video-container object, .pkd-video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/

#colophon {
    clear: both;
    display: block;
    position: relative;
    margin-top: 10px;
    background: var(--pkd-color-background-reverse);
}

#colophon a, .footer-column a { }
#colophon a:hover, .footer-column a:hover { }


.footer-logo {
	text-align: center;
	margin: 3vw;
	height: 80px;
}

.footer-logo img {
	object-fit: contain;
	width:100%;
	height: 100%;
}


@media screen and (min-width: 48em) {

	.footer-columns {
		grid-template-columns: repeat(3, max-content);
		justify-content: center;
		align-items: start;
		column-gap: clamp(3em, 7vw, 8em);
	}

}


.footer-column {   	
	
}

#footer1 { }
#footer2 { }
#footer3 { }
#footer4 { }


.footer-title {
	font-weight:normal;
	letter-spacing: 1px;
}

.footer-column ul {
	margin: -1em 0 0 0; padding: 0;
}
.footer-column li {
	list-style:none;
}
.footer-column li a {
	color: var(--pkd-color-border-dark);
	text-decoration: none;
}

.footer-column li a:hover {
	color: var(--pkd-color-tertiary);
}

#site-generator { display:none; }

#copyright { 								
	font-size: .75em;
	text-align:center; 
	clear: both;
	letter-spacing: 1px;
	padding: 3em 0;
		}
#copyright a { 
	text-decoration:none;
}

/* Footer: Responsive */
@media screen and (max-width: 959px) {
	#colophon {
		margin-top: 0;
	}
}

@media screen and (max-width: 599px) {
	.footer-column {
		float: none;
	}

	#footer1,
	#footer2,
	#footer3 {
		width: 100%;
	}
}




/*--------------------------------------------------------------
Date Box
--------------------------------------------------------------*/


.entry-date { 
}
.entry-month {
}
.entry-day {
}
.entry-year {
}



.entry-date.date-badge { 
	font-family: var(--pkd-font-secondary, 'Open Sans', sans-serif);
	float: left;
	margin: 0 20px 20px 0 ;
	border: 1px solid var(--pkd-color-accent);
	width: 60px;
	height: 80px;
}
.date-badge .entry-month {
	background: var(--pkd-color-accent);
	color: var(--pkd-color-text-reverse);
	text-transform: uppercase;
	padding: 2px 2px 2px 6px;
	text-align: center;
	letter-spacing: 2px;
	font-size: 24px;
	line-height: 1;
	display: block;
}
.date-badge .entry-day {
	font-size: 46px;
	line-height: 1;
	padding-top: 5px;
	color: var(--pkd-color-heading);
	text-align: center;
	background: var(--pkd-color-background);
	display: block;
}
.date-badge .entry-year {
	font-size: 23px;
	line-height: 1;
	padding-top: 5px;
	color: var(--pkd-color-heading);
	text-align: center;
	background: var(--pkd-color-background);
	display: block;
	}


/*--------------------------------------------------------------
Page
--------------------------------------------------------------*/	

.page #main article {
}
.page #main article .entry-content {
	
}
.page-thumb {
	width: 300px;
	height: 300px;
	margin: 0;
	background: var(--pkd-color-background-alt);
}
.page-thumb img {
	width: 100%;
	height:	100%;
}

/* Page Thumbnails: Responsive */
@media screen and (max-width: 959px) {
	.page-thumb {
		width: 20%;
		height: auto;
		clear: both;
	}
}



/*--------------------------------------------------------------
General Archive
--------------------------------------------------------------*/

.archive-flex { display: flex; }




/*--------------------------------------------------------------
Portfolio
--------------------------------------------------------------*/

/* Portfolio Grid
--------------------------------------------- */

.portfolio-section {
	padding-block: clamp(40px, 6vw, 90px);
}

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--pkd-column-gap, 30px);
	row-gap: var(--pkd-row-gap, 45px);
}

/* Services uses the shared Portfolio card system at three columns. */
.services-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portfolio-card {
	min-width: 0;
}

.portfolio-card__link {
	position: relative;
	display: block;
	color: var(--pkd-color-heading);
	text-decoration: none;
}

.portfolio-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	background-color: var(--pkd-color-background-alt);
}

.portfolio-card__image-element {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.portfolio-card__title {
	margin: 12px 0 0;
	color: inherit;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.portfolio-card__link:hover .portfolio-card__image-element,
.portfolio-card__link:focus-visible .portfolio-card__image-element {
	transform: scale(1.035);
}

/* Optional title-over-image version. */
.portfolio-grid--overlay-titles .portfolio-card__link::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	aspect-ratio: 1;
	background: linear-gradient(to top, rgb(0 0 0 / 65%), transparent 55%);
	pointer-events: none;
}

.portfolio-grid--overlay-titles .portfolio-card__title {
	position: absolute;
	z-index: 1;
	right: 20px;
	bottom: 20px;
	left: 20px;
	margin: 0;
	color: var(--pkd-color-text-reverse);
}

@media screen and (max-width: 56.25em) {
	.portfolio-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 37.5em) {
	.portfolio-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-card__image-element {
		transition: none;
	}
}




.port-column { display:inline-block; vertical-align: top;}
#column1  {width: 65%;} 
#column2 {width: 30%; margin-left: 4%;}


.single-portfolio .site-width { } 
.single-portfolio #main article .entry-content { 
	/*display: inline-block;
	vertical-align: top;
	margin-top: 77px;
	width: 100%;
	padding: 20px 0; */
	
	}

.single-portfolio #main, 
.single-portfolio #main .site-width {  padding-top: 0;}
.single-portfolio .entry-header {}
.single-portfolio .entry-header .entry-title {
	font-size: 170%;
	padding: 5px 0;
	letter-spacing: 5px;
}



.portfolio-archive-thumb {}

.typography  .portfolio-archive a .portfolio-info {
	display: table;
	width: 100%;
	height: 46px;
	position: absolute;
	bottom: 0;
	z-index: 20;
}
.typography  .portfolio-archive a .portfolio-info h2.portfolio-title { 
	font-size: 110%; 
	letter-spacing: 2px; 
	padding:  0; 
	text-align: center; 
	color: var(--pkd-color-border-light);
	background: color-mix(in srgb, var(--pkd-color-background-reverse) 70%, transparent);
	line-height: 1.1; 
	display: table-cell;
	vertical-align: middle;
	
	}
.typography  .portfolio-archive a:hover h2.portfolio-title {
	background: color-mix(in srgb, var(--pkd-color-primary) 70%, transparent);
}
.typography  .portfolio-archive a { text-decoration:none;   }


.portfolio-flex {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}

.portfolio-archive {
    position: relative;
    width: 32vw;
    height: 21.3vw;
    margin: 0 0 2vw 0;
}
.portfolio-archive:nth-child(4n+1) {
}
.portfolio-archive:nth-child(4n+4) {
}
.portfolio-archive a {
	width: 100%;
	height: 100%;
	display: block; 
	}
/*.portfolio-archive:nth-child(9),
.portfolio-archive:nth-child(10),
.portfolio-archive:nth-child(11),
.portfolio-archive:nth-child(12)
 { margin-bottom: -16px;}*/



.typography #project-table {
	float: left; 
	margin:  20px 0 30px 0 ;
}

.typography #project-table td {
	vertical-align:top;
	font-size: 90%;
	line-height: 1.5;
}


#single-slider { margin: 0 0 30px 0; }

.category-title {
	color: var(--pkd-color-accent);
	font-size: 50%;
}


.typography .archive-list a { text-decoration:none; }

/* Legacy Portfolio Archive: Responsive */
@media screen and (max-width: 959px) {
	.portfolio-archive {
		width: 48.5%;
		height: 32vw;
		margin-bottom: 3vw;
	}

	.single-portfolio .entry-header {
		top: 0;
	}

	.single-portfolio .entry-header .entry-title {
		font-size: 18px;
	}
}

@media screen and (max-width: 599px) {
	.typography .portfolio-archive a h2.portfolio-title {
		font-size: 120%;
		letter-spacing: 4px;
	}
}

@media screen and (max-width: 480px) {
	.portfolio-archive {
		width: 100%;
		height: 66.7vw;
	}
}


/*--------------------------------------------------------------
Staff
--------------------------------------------------------------*/


.single-staff .entry-content {  }
.single-staff .staff-meta {  }
h1 .staff-title { font-size:1.1em; color: var(--pkd-color-heading); margin-top: 8px; }

.staff-archive { 

}

.post-type-archive-staff .staff-photo { }
.post-type-archive-staff .staff-person { }
.post-type-archive-staff .staff-title {  } 



/* Team Grid
--------------------------------------------- */

.team-section {
	padding-block: clamp(40px, 6vw, 90px);
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--pkd-column-gap, 30px);
	row-gap: var(--pkd-row-gap, 45px);
}

.team-card {
	min-width: 0;
}

.team-card__link {
	position: relative;
	display: block;
	color: var(--pkd-color-heading);
	text-decoration: none;
}

.team-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	background-color: var(--pkd-color-background-alt);
}

.team-card__image-element {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.team-card__content {
	margin-top: 12px;
}

.team-card__name {
	margin: 0;
	color: inherit;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.team-card__title {
	margin: 3px 0 0;
	color: var(--pkd-color-text-muted);
	font-size: 0.9rem;
}

.team-card__link:hover .team-card__image-element,
.team-card__link:focus-visible .team-card__image-element {
	transform: scale(1.035);
}

/* Optional name-and-title-over-image version. */
.team-grid--overlay-titles .team-card__link::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	aspect-ratio: 1;
	background: linear-gradient(to top, rgb(0 0 0 / 65%), transparent 55%);
	pointer-events: none;
}

.team-grid--overlay-titles .team-card__content {
	position: absolute;
	z-index: 1;
	right: 20px;
	bottom: 20px;
	left: 20px;
	margin: 0;
}

.team-grid--overlay-titles .team-card__name,
.team-grid--overlay-titles .team-card__title {
	color: var(--pkd-color-text-reverse);
}

@media screen and (max-width: 56.25em) {
	.team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 37.5em) {
	.team-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.team-card__image-element {
		transition: none;
	}
}




/* Single Staff
--------------------------------------------- */

.staff-profile__grid {
	--pkd-grid-gap: clamp(2.5rem, 6vw, 7rem);
	--pkd-grid-align: start;
}

.staff-profile__portrait-wrap {
	margin: 0 0 1.5em;
}

.staff-profile__portrait {
	display: block;
	width: 100%;
	height: auto;
}

.staff-profile__header {
	margin-bottom: 2em;
}

.staff-profile__name {
	margin: 0;
	padding: 0;
}

.staff-profile__title {
	margin: 0.4em 0 0;
	color: var(--pkd-color-text-muted);
	font-size: 1.1em;
	line-height: 1.4;
}

.staff-profile__contact-heading,
.staff-profile__bio-heading {
	font-size: 1.325em;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    padding-bottom: .5em;
}

.staff-profile__contact-list {
	margin: 0;
}

.staff-profile__contact-item {
	display: grid;
	grid-template-columns: minmax(1em, auto) 1fr;
	column-gap: 1em;
	margin-bottom: 0.5em;
}

.staff-profile__contact-item dt {
	font-weight: 600;
}
.staff-profile__contact-item dt span {	
	display: none;
}

.staff-profile__contact-item dd {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}


.staff-profile__bio > :first-child {
	margin-top: 0;
}





/*--------------------------------------------------------------
Locations
--------------------------------------------------------------*/
.post-type-archive-locations #featured-image,
.single-locations #featured-image {
	background-image: var(--wpr-bg-be36cdd8-6578-49a6-a058-75905a172c5c) !important;
	background-size: cover !important;
	background-position: 50% !important;
	width: 100% !important;
	height: 100% !important;
	}

.locations-archive { 
	display: inline-block;
	width: 32%;
	margin: 0 1% 30px 0;
	vertical-align:top;
}
.locations-archive img { width: 100%; height:auto; 
}

/* Locations Archive: Responsive */
@media screen and (max-width: 1240px) {
	.locations-archive {
		width: 31%;
	}
}

.archive-item span { display:inline-block; width: 100px; text-transform:uppercase;}

.acf-map {
	width: 100%;
	height: 400px;
	border: var(--pkd-color-border-dark) solid 1px;
	margin: 20px 0;
}



/*--------------------------------------------------------------
Services
--------------------------------------------------------------*/
.services-archive { 

}
.services-archive img { }




/*--------------------------------------------------------------
Blog
--------------------------------------------------------------*/


/* Blog Cards
--------------------------------------------- */

/* Shared by homepage and archive feeds */

.blog-feed {
	--pkd-blog-gap: 2em;
	--pkd-blog-ratio: 3 / 2;
	--pkd-blog-image-position: center;
	--pkd-blog-title-color: var(--pkd-color-background-reverse);
	--pkd-blog-title-hover-color: var(--pkd-color-text-muted);
	--pkd-blog-summary-color: var(--pkd-color-text);
	--pkd-blog-summary-display: block;
}


/* Grid
--------------------------------------------- */

.blog-grid {
	display: grid;
	gap: var(--pkd-blog-gap);
}


/* Card
--------------------------------------------- */

.blog-card {
	position: relative;
	min-width: 0;
	margin: 0;
}


/* Media
--------------------------------------------- */

.blog-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--pkd-blog-ratio);
	background-color: var(--pkd-color-border-light);
	width:100%;
	height: 100%;
}


.blog-card__image,
.blog-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.blog-card__image {
	object-fit: cover;
	object-position: var(--pkd-blog-image-position);
	transition: transform 300ms ease;
}

.blog-card__media:is(:hover, :focus-visible) .blog-card__image {
	transform: scale(1.03);
}


/* Content
--------------------------------------------- */

.blog-card__body {
	padding-top: 1em;
}

.blog-card__title {
	margin: 0;
	padding: 0;
	font-size: 1.4em;
	font-weight: normal;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.home .blog-card__title {
	margin: 0 20% 0 10px;
	padding-left: 10px;
	border-left: 1px solid #ddd;
}

.blog-card__title a {
	color: var(--pkd-blog-title-color);
	text-decoration: none;
}

.blog-card__title a:is(:hover, :focus-visible) {
	color: var(--pkd-blog-title-hover-color);
	text-decoration: none;
}

.blog-card__summary {
	display: var(--pkd-blog-summary-display);
	margin-top: 0.75em;
	color: var(--pkd-blog-summary-color);
	line-height: 1.6;
}

.blog-card__summary > :last-child {
	margin-bottom: 0;
}


/* Homepage Feed
--------------------------------------------- */

.blog-feed--home .blog-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* Homepage Responsive Layout
--------------------------------------------- */

@media screen and (max-width: 900px) {

	.blog-feed--home .blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media screen and (max-width: 600px) {

	.blog-feed--home .blog-grid {
		grid-template-columns: 1fr;
	}

}



/* Overlay Variation
--------------------------------------------- */

/* Add .blog-feed--overlay to the feed section */

.blog-feed--overlay .blog-card {
	overflow: hidden;
}

.blog-feed--overlay .blog-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgb(0 0 0 / 80%),
		rgb(0 0 0 / 0%) 70%
	);
}

.blog-feed--overlay .blog-card__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	padding: 1.5em;
	color: var(--pkd-color-text-reverse);
	pointer-events: none;
}

.blog-feed--overlay .blog-card__body a {
	pointer-events: auto;
}

.blog-feed--overlay .blog-card__title a,
.blog-feed--overlay .blog-card__summary {
	color: inherit;
}





/*--------------------------------------------------------------
Social Media
--------------------------------------------------------------*/
	
#socialmedia .fontawesome-text { display:none; }
	
#socialmedia {  
	float:none; 
	margin:0;
	display: flex;
    justify-content: center;
 }

#socialmedia .menu li a {  	padding:0; }

#socialmedia i { 

	display:block;
	font-size: 1.3em;
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center ;
	background: color-mix(in srgb, var(--pkd-color-text-reverse) 35%, transparent);
	border: 1px solid transparent;
	margin-right: .3em;
	
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#socialmedia .menu li a:hover { background: none; }

#socialmedia a {text-decoration: none;}



#socialmedia #Facebook:hover i { background-color: #3e5b98; border-color: var(--pkd-color-text-muted); }
#socialmedia #Twitter:hover i { background-color: #4da7de; border-color: var(--pkd-color-text-muted); }
#socialmedia #Youtube:hover i { background-color: #e02a20; border-color: var(--pkd-color-text-muted); }
#socialmedia #Envelope:hover i { background-color: #222222; border-color: var(--pkd-color-text-muted); }
#socialmedia #Yelp:hover i { background-color: #c83218; border-color: var(--pkd-color-text-muted); }
#socialmedia #Linkedin:hover i { background-color: #3371b7; border-color: var(--pkd-color-text-muted); }
#socialmedia #Pinterest:hover i { background-color: #E60023; border-color: var(--pkd-color-text-muted); }
#socialmedia #Instagram:hover i { background-color: #8a3ab9; border-color: var(--pkd-color-text-muted); }
#socialmedia #Houzz:hover i { background-color: #4DBC15; border-color: var(--pkd-color-text-muted); }

.fa-facebook-f:before { content:'\f39e'; }



.entry-content .fa, .entry-content .far, .entry-content .fas {
color: var(--pkd-color-text-muted);
padding-right: .3em;
width: 1em; }




/*--------------------------------------------------------------
Gravity Forms Overrides
--------------------------------------------------------------*/

#main li.gfield { margin-top:0; }

#main div.ginput_container { margin-top:0; }

#main .gform_legacy_markup_wrapper li.hidden_label input { margin-top:0; }

#main .gform_legacy_markup_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
	font-size: 1.1em;
    padding: 6px 0;
}

#main .gform_legacy_markup_wrapper .gsection .gfield_label, 
#main .gform_legacy_markup_wrapper h2.gsection_title, 
#main .gform_legacy_markup_wrapper h3.gform_title {
	font-weight: 400;
}

input[type=text], input[type=email], input[type=tel], textarea, select, input#s {
	margin:0;
	margin-bottom: 16px;
	
    background: var(--pkd-color-background);
    border: none;
    border-bottom: 1px solid var(--pkd-color-border);
}

textarea, select {
	border: 1px solid var(--pkd-color-border);
}



/*--------------------------------------------------------------
Overrides
--------------------------------------------------------------*/
.tribe-events-list-widget ol li {
	margin-bottom: 0 !Important ;
}
li.tribe-events-list-widget-events { padding: 20px 0; }
li.tribe-events-list-widget-events:first-child { padding-top: 0; }

ul.tribe-events-sub-nav { display:none; }




/*--------------------------------------------------------------
WordPress Overrides
--------------------------------------------------------------*/
.wp-block-table {
	margin: .5em 0 2em 0;
}



@media screen and (max-height: 890px) {  


	.vh-min-full,
	.vh-min-90,
	.vh-min-80,
	.vh-min-75,
	.vh-min-70,
	.vh-min-66,
	.vh-min-60,
	.vh-min-50 {min-height: auto; padding: 11vh 0 12vh 0;}
	
	
	.center-section-content-wrapper { 
		transform: none;
		top: auto;
		position: relative;
	}

}



/*--------------------------------------------------------------
Slide-In Elements
--------------------------------------------------------------*/

/* See JavaScript too. */
.module {transform: translateY(150px);}

.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}

/*.come-in:nth-child(odd) {
  animation-duration: 0.6s;  So they look staggered 
}*/

@keyframes come-in {
  to { transform: translateY(0); }
}




/*--------------------------------------------------------------
404 Page
--------------------------------------------------------------*/

.error-404__grid {
	align-items: center;
	gap: clamp(2rem, 6vw, 6rem);
}

.error-404__content {
	max-width: 40rem;
}

.typography .error-404__code {
	margin: 0 0 0.2em;
	padding: 0;
	color: var(--pkd-color-accent);
	font-family: var(--pkd-font-secondary, 'Open Sans', sans-serif);
	font-size: clamp(4.5rem, 10vw, 8rem);
	font-weight: 300;
	letter-spacing: 0.05em;
	line-height: 0.85;
}

.typography .error-404__content h2 {
	padding-bottom: 0.65em;
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1.15;
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.error-404__search {
	max-width: 34rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--pkd-color-border);
}

.error-404__search > p {
	margin-top: 0;
}

.error-404__search .search-form {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}

.error-404__search .search-field {
	flex: 1 1 auto;
	min-width: 0;
}

.error-404__search .search-submit {
	flex: 0 0 auto;
}

.error-404__visual {
	display: grid;
	place-items: center;
	margin: 0;
}

.error-404__visual img {
	display: block;
	width: min(100%, 40rem);
	height: auto;
}

@media screen and (max-width: 599px) {
	.error-404__grid {
		gap: 2.5rem;
	}

	.error-404__visual {
		max-width: 28rem;
		margin-inline: auto;
	}

	.error-404__search .search-form {
		flex-direction: column;
	}
}