html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
	 ========================================================================== */
  
   #panel-left:empty ~ .panel-left-toggle, #panel-left:empty ~ #page .panel-left-toggle {
    display: none;
  }

  /**
   * Remove the margin in all browsers.
   */
  
  body {
	margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
	display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
	font-size: 2em;
	margin: 0.67em 0;
  }
  
  /* Grouping content
	 ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
	 ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
	background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
	border-bottom: none; /* 1 */
	text-decoration: underline; /* 2 */
	text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
	font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
	font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
  }
  
  sub {
	bottom: -0.25em;
  }
  
  sup {
	top: -0.5em;
  }
  
  /* Embedded content
	 ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
	border-style: none;
  }
  
  /* Forms
	 ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
	overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
	text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
	-webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
	padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
	box-sizing: border-box; /* 1 */
	color: inherit; /* 2 */
	display: table; /* 1 */
	max-width: 100%; /* 1 */
	padding: 0; /* 3 */
	white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
	vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
	overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
	height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
  }
  
  /* Interactive
	 ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
	display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
	display: list-item;
  }
  
  /* Misc
	 ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
	display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
	display: none;
  }
  
  /*--------------------------------------------------------------
  # SASS Variables and Mixins. Do not output any css in here. if you need these make sure to @use "variables"
  --------------------------------------------------------------*/
  /*------- Media Query Sizes. Add your own --------*/
  /*------- Panel Becomes Absolute Query  --------*/
  /*------- Add your own breakpoints to the grid --------*/
  /*--------------------------------------------------------------
  Mixins
  --------------------------------------------------------------*/
  /*------- Retina --------*/
  /*------- Deep Shadow Mixin --------*/
  /*------- Lighten and shade colors --------*/
  /*------- Fluid Font Lock --------*/
  /*------- Sort Map by values --------*/
  /*------- Grid --------*/
  /*--------------------------------------------------------------
  # CSS Variables
  --------------------------------------------------------------*/
  /*--------------------------------------------------------------
  # CSS Variables. Change these to match your theme
  --------------------------------------------------------------*/
  :root {
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-alt: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--line-height: 1.5;
	--font-pre: "Source Code Pro", monospace;
	--line-height-pre: 22px;
	--article-font-size: 1.7rem;
	--black: #191919;
	--dark-grey: #4c545d;
	--grey: #cacaca;
	--blue: #007eac;
	--light-blue: rgba(0, 185, 235, 0.73);
	--dark-blue: #007fb0;
	--body-bg: white;
	--main-text-color: var(--black);
	--subtle-text-color: var(--grey);
	--site-top: var(--dark-blue);
	--footer-bg: var(--dark-grey);
	--header-bg: var(--dark-grey);
	--highlight: var(--blue);
	--highlight-alpha: var(--light-blue);
	--highlight-darkened: var(--dark-blue);
	--overlay-color: rgba(0, 0, 0,0.65);
  }
  
  /*--------------------------------------------------------------
  # Layout CSS Variables. Probably don't need to touch.
  --------------------------------------------------------------*/
  :root {
	/*------- Menu Variables --------*/
	--nav-move: 800px;
	--sidebar-move: 1000px;
	--media-sidebar: 1000px;
	--desktop-menu-alignment: center;
	/*------- Layout --------*/
	--container: 1200px;
	--container-content: 70rem;
	--container-padding: 30px;
	--gutters: 15px;
	--gap: 30px;
	--grid-gap: 30px;
	--flex-gap: calc(var(--grid-gap) / 2);
	/*------- Panels --------*/
	--panel-left-width: 300px;
	--panel-right-width: 350px;
	/*------- Z-index --------*/
	--z-index-top: 99;
	--z-index-overlay: 95;
	--z-index-menu-button: 90;
	--z-index-menu: 80;
	--z-index-header: 75;
	--z-index-behind: -1;
  }
  
  /*--------------------------------------------------------------
  # Basic Global Base Layout Stuff
  --------------------------------------------------------------*/
  html {
	box-sizing: border-box;
  }
  
  *,
  *:before,
  *:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
  }
  
  html * {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  
  .touchscroll {
	overflow-y: scroll;
	/* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
  }
  
  .hide-scroll::-webkit-scrollbar, #panel-right .sidebar-holder::-webkit-scrollbar, #panel-left::-webkit-scrollbar {
	width: 0 !important;
  }
  
  .hide-scroll, #panel-right .sidebar-holder, #panel-left {
	-ms-overflow-style: none;
  }
  
  *:focus {
	outline: none;
  }
  
  /*--------------------------------------------------------------
  # Panel Setup
  --------------------------------------------------------------*/
  .site-container {
	display: flex;
	position: relative;
	overflow: hidden;
	background: inherit;
  }
  .site-container > div {
	z-index: 90;
	overflow: hidden;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0%;
	transition: all 0.5s;
  }
  .site-container > div:empty {
	display: none;
  }
  
  #panel-right {
	order: 3;
  }
  
  /*--------------------------------------------------------------
  # Sticky footer work.
  --------------------------------------------------------------*/
  /*
	 - Sticky footer makes sure that the footer of the site is at the bottom no matter how small the content is.
  */
  #page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	flex-basis: 100%;
	z-index: 80;
	transition: none;
  }
  
  /*
	  - By making sure there main content flexes as long as possible the footer below it will be at least or more than the height of the browser
   */
  .site-content {
	flex: 1 0 auto;
	overflow: hidden;
  }
  
  /*--------------------------------------------------------------
  # Accessibility
  --------------------------------------------------------------*/
  .screen-reader-skip {
	height: 0;
	overflow: hidden;
	width: 0;
	clip: rect(1px, 1px, 1px, 1px);
  }
  
  .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	color: white;
	background-color: black;
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
  }
  
  .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;
	color: #21759b;
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
  }
  
  /*------- responsive images --------*/
  img {
	max-width: 100%;
	height: auto;
  }
  
  /*--------------------------------------------------------------
  # Utility Classes
  --------------------------------------------------------------*/
  .hidden, .hide {
	display: none;
  }
  
  .clear:before,
  .clear:after {
	content: "";
	display: table;
	table-layout: fixed;
  }
  
  .clear:after {
	clear: both;
  }
  
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	[data-toggle] svg {
	  pointer-events: none;
	}
  }
  [data-toggle] {
	cursor: pointer;
  }
  
  [data-slide] {
	overflow: hidden;
  }
  
  /*--------------------------------------------------------------
  # CSS Grids and Containers
  --------------------------------------------------------------*/
  /*
	- Containers can be used anywhere for holding main content.
	- They have padding on both sides so on mobile the content wont hit the edges.
	- They have a max-width and are centered. They also have a width of 100% to work nicely inside flex items and grids.
	- It's best to keep containers surrounding content on their own div. Dont combine with grids and layouts in one div.
   */
  /*------- Containers --------*/
  .container {
	width: 100%;
	max-width: 1200px;
	max-width: var(--container);
	margin: auto;
	padding: 0 30px;
	padding: 0 var(--container-padding);
  }
  
  .container-left,
  .container-right {
	width: 100%;
	max-width: calc(1200px + ((100% - 1200px) / 2));
	max-width: calc(var(--container) + ((100% - var(--container)) / 2));
	margin: 0 auto 0 0;
	padding: 0 30px 0 0;
	padding: 0 var(--container-padding) 0 0;
  }
  
  .container-right {
	margin: 0 0 0 auto;
	padding: 0 0 0 30px;
	padding: 0 0 0 var(--container-padding);
  }
  
  .container-fluid {
	width: 100%;
	margin: auto;
  }
  
  @media (min-width: 1200px) {
	.large-gap {
	  grid-gap: 60px;
	}
  }
  /*------- Special Container Content For articles --------*/
  /*
  - Container-Content is meant to hold an article's content after the header.
  - It's for actual words and makes sure the line is not too long
  - It cleverly allows for items inside to go full width and "break out" with alignwide and alignfull
  - The container itself has no max-width, instead its items within.
  - Any items inside with full-width or .alignfull will NOT have a max-width and will fill page
  - Dont surround container-content with a container or full items wont be full width!
  */
  .container-content {
	padding: 0 30px;
	padding: 0 var(--container-padding);
	width: 100%;
  }
  .container-content > *:not(.alignwide):not(.alignfull):not(.full-width) {
	max-width: 70rem !important;
	max-width: var(--container-content) !important;
	margin-right: auto;
	margin-left: auto;
  }
  .container-content > .full-width,
  .container-content > .alignfull {
	width: auto;
	margin-left: calc(-1 * 30px);
	margin-left: calc(-1 * var(--container-padding));
	margin-right: calc(-1 * 30px);
	margin-right: calc(-1 * var(--container-padding));
  }
  .container-content > .alignwide {
	width: 100%;
	max-width: calc(1200px - (30px * 2));
	max-width: calc(var(--container) - (var(--container-padding) * 2));
  }
  
  /*------- Special exceptions for container contents padding  --------*/
  .container .container-content,
  .container-fluid .container-content,
  .container-left .container-content,
  .container-right .container-content {
	padding-left: 0;
	padding-right: 0;
  }
  .container .container-content > .alignwide,
  .container-fluid .container-content > .alignwide,
  .container-left .container-content > .alignwide,
  .container-right .container-content > .alignwide {
	width: 100%;
	max-width: calc(100% - (30px * 2));
	max-width: calc(100% - (var(--container-padding) * 2));
  }
  
  .container-right .container-content > .full-width,
  .container-right .container-content > .alignfull {
	margin-right: 0;
  }
  
  .container-left .container-content > .full-width,
  .container-left .container-content > .alignfull {
	margin-left: 0;
  }
  
  /*--------------------------------------------------------------
  # WP Align Wide Matches the size of a .container
  --------------------------------------------------------------*/

  /*------- hide at break points --------*/
  @media (max-width: 1200px) {
	.hide-on-container {
	  display: none;
	}
  }
  @media (max-width: 1030px) {
	.hide-on-large {
	  display: none;
	}
  }
  @media (max-width: 768px) {
	.hide-on-medium {
	  display: none;
	}
  }
  @media (max-width: 576px) {
	.hide-on-small {
	  display: none;
	}
  }
  /*--------------------------------------------------------------
  # Grid Helpers
  --------------------------------------------------------------*/
  .align-center {
	align-items: center;
  }
  
  .justify-center {
	justify-content: center;
  }
  
  .flex-wrap {
	flex-wrap: wrap;
  }
  
  .flex-column {
	flex-direction: column;
  }
  
  .flex-grow {
	flex-grow: 1;
  }
  
  .space-between {
	justify-content: space-between;
  }
  
/*--------------------------------------------------------------
# Icons
--------------------------------------------------------------*/
.icon,
.icon {
  display: inline-block;
  stroke-width: 0;
  stroke: currentColor;
  height: 1em;
  vertical-align: middle;
  width: 1em;
  position: relative;
  fill: currentColor;
}
.icon svg,
.icon path,
.icon g,
.icon svg,
.icon path,
.icon g {
  fill: currentColor;
}

/*--------------------------------------------------------------
# Sections and Blocks and Parts
--------------------------------------------------------------*/
/*
  Most block and section styling can go here or in the block folder with the template-parts folder for that block. The choice is up to you.
 */
/*------- Section defaults --------*/
section, .section {
  padding-top: 30px;
  padding-top: var(--gap);
  padding-bottom: 30px;
  padding-bottom: var(--gap);
}
section section, .section section {
  padding-top: 0;
  padding-bottom: 0;
}
section p:last-child, .section p:last-child {
  margin-bottom: 0;
}

.no-bg + .no-bg {
  padding-top: 0;
}

section.heading-center h1, section.heading-center h2 {
  text-align: center;
}

/*------- Padding classes useful for sections --------*/
.site-content .padding {
  padding: 30px;
  padding: var(--gap);
}
.site-content .no-padding {
  padding: 0;
}
.site-content .no-padding-top {
  padding-top: 0;
}
.site-content .no-padding-bottom {
  padding-bottom: 0;
}
.site-content .margin-bottom {
  margin-bottom: 30px;
  margin-bottom: var(--gap);
}



/*--------------------------------------------------------------
# Search form
--------------------------------------------------------------*/
.search-form {
	display: flex;
	font-size: 2rem;
  }
  .search-form .search-field {
	flex: 1 1 auto;
	padding: 10px 10px 10px 10px;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	background: white;
  }
  
  /*--------------------------------------------------------------
  # Input Icons
  --------------------------------------------------------------*/
  /*------- input appends and prepends for icons --------*/
  /*
   * when adding a button near an input you can make it a prepend or append
   * all prepends and appends go AFTER the input. Never before or :focus wont affect the prepend.
   */
  .input-prepend,
  .input-append {
	transition: all 0.5s;
	background: white;
	z-index: 2;
	color: #cacaca;
	color: var(--subtle-text-color);
	box-shadow: none;
  }
  
  .input-append {
	border-radius: 0 3px 3px 0;
	margin-left: -2px;
	order: 1;
	border: 1px solid #007eac;
	border: 1px solid var(--highlight);
	border-left: 0;
	padding: 10px;
  }
  
  .input-prepend {
	border-radius: 3px 0 0 3px;
	margin-right: -2px;
	border: 1px solid #007eac;
	border: 1px solid var(--highlight);
	order: -1;
	border-right: 0;
  }
  
  input:focus + .input-prepend {
	border-color: #007eac;
	border-color: var(--highlight);
  }
  
  input:focus + .input-append {
	border-color: #007eac;
	border-color: var(--highlight);
  }