@charset "UTF-8";
/*   
Theme Name: Swiss Theme
Theme URI: http://rocquett.com
Author: Delwin Holeman
Author URI: http://rocquett.com
Description: Swiss Theme, created for Focus Partners - Brand Guidelines website. For assistance contact <a href="https://rocquett.com">Rocquett Websites</a> | 706-338-1464 | <a href="mailto:service@rocquett.com">service@rocquett.com</a>
Version: 4.0

Based on Rocquett Swiss Theme 

Common Breakpoints in order of most common to least - (percentage of market) from 
https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide || Another source https://screensiz.es/

Common Desktop  
1920 x 1080 (21%-D), 1366 x 768 (20%), 1536 x 864 (10%), 1440 x 900 (6%), 1280 x 720 (5%), 1600 x 900 (3%)

Common Tablet
768 x 1024 (42%), 1280 x 800 (7%), 800 x 1280 (6%), 601 x 962 (5%), 810 x 1080 (4%), 962 x 601 (4%)

Common Mobile
360 x 640 (11%), 414 x 896 (7%), 360 x 780 (6%), 375 x 667 (6%), 360 x 800 6%), 360 x 760 (5%)

Theme Breakpoints: 360, 412, 600, 768, 962, 1024, 1280, 1366, 1536, 1680, 1920, 2560;

Solving CSS UX Problems Defensive CSS: https://defensivecss.dev/tips
*/

@import "../../global-css/_reset.css";

/* CSS VARIABLES */
/* HSL Color Picker: https://hslpicker.com/ */

:root {
  --color-primary-base: 0;
  --color-primary: hsla(var(--color-primary-base), 0%, 17.3%, 100%);
  --color-primary-dark: hsla(var(--color-primary-base), 0%, 10.2%, 100%);
  --color-primary-light: hsla(var(--color-primary-base), 0%, 27%, 100%);

  --white: hsl(300, 0%, 100%);
  --black: hsl(188, 0%, 0%);
  --dark-grey: hsl(0, 0%, 30%);
  --grey: hsl(0, 0%, 40%);
  --light-grey: hsl(0, 0%, 86.7%);
  --faint-grey: hsl(0, 0%, 96%);
  --border-color: hsl(0, 0%, 87%);
  --border-color-dark: hsl(0, 0%, 67%);

  --color-font-primary-base: 0;
  --color-font-primary: hsla(var(--color-font-primary-base), 0%, 25.5%, 100%);
  --color-font-primary-light: hsla(
    var(--color-font-primary-base),
    0%,
    10%,
    100%
  );
  --color-font-grey: hsl(0, 0%, 25%);
  --color-font-light-grey: hsl(0, 0%, 35%);

  --ff-primary: "Open Sans", arial, helvetica, sans-serif;
  --ff-secondary: "Poppins", arial, helvetica, sans-serif;

  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600; 
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --fs-extrasmall: 0.48rem;
  --fs-small: 0.75rem;
  --fs-normal: 1rem;
  --fs-mobile: 1.3rem;
  --fs-large: 1.35rem;
  --fs-extralarge: 2.2rem;
  --fs-above-topnav: 0.52rem;
  --fs-normal-mobile: 0.85rem;
  --fs-footer: 0.8rem;
  --fs-copyright: 0.6rem;
  --fs-h1: 4.20rem;
  --fs-h2: 2.2rem;
  --fs-h3: 1.6rem;
  --fs-h4: 1.2rem;
  --fs-h5: 1.1rem;
  --fs-h6: 0.9rem;
  --fs-button: 1rem;
  --fs-navbar: 1rem;
  --fs-subnav: 0.8rem;
  --fs-stucknav: 1rem;
  --fs-mobile-menu: 1rem;
  --fs-abovetopnav: 0.62rem;

  --line-height: 1.65;
  --line-height-tight: 1.3;
  --line-height-loose: 1.7;
  --line-height-heading: 1.35;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-body: 0;
  --letter-spacing-loose: 0.15em;
  --letter-spacing-heading: -0.03em;

  --nav-color: rgba(255, 255, 255, 0.69);
  --nav-color-hover: rgba(255, 255, 255, 0.85);
  --nav-mobile-color-background: hsl(0, 0%, 100%);

  --link-color-base: 200;
  --link-color: hsla(var(--link-color-base), 67.5%, 47.1%, 100%);
  --link-color-hover: hsla(var(--link-color-base), 67.5%, 60%, 100%);
  --link-color-visited: hsla(var(--link-color-base), 67.5%, 47.1%, 100%);

  --footer-logo-width: 240px;

  --transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-button: all 300ms cubic-bezier(0.4, 0, 0.2, 1);

  --shadow: -15px 15px 60px 0px rgba(0, 0, 0, 0.3);
  --shadow-text: 1px 1px 4px rgba(0, 0, 0, 0.1);
  --shadow-heading: 2px 2px 6px rgba(0, 0, 0, 0.1);

  --mobile-padding: 1.25rem;
  --content-padding-left: 8%;
  --content-padding-right: 8%;
  --nav-padding-left: 25px;
}

/* selected text color and background */
::-moz-selection {
  background: #2c2c2c;
  color: var(--white);
}

::selection {
  background: #2c2c2c;
  color: var(--white);
}

/* Responsive typography */
/* To override responsive typography and set things up with breakpoints simply remove the commented out font size on the body tag breakpoints in the styles below. Or simply add it to breakpoints where font size gets out of hand such as very large width breakpoints. */

html {
  font-size: 1.14rem;
  font-size: min(max(1rem, 3vw), 1.14rem);
  font-size: clamp(1rem, 3vw, 1.14rem);
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* height of sticky header */
  text-size-adjust: none; /* stop landscape mode mobile font size being too large */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

/* Flex for body layout: https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ 
The flex on the body can be changed to grid or removed without consequence. */

body {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: #ccc;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-animation: fake 1s infinite; /* added this and next for flex tabs */
  animation: fake 1s infinite;
  font-family: var(--ff-primary);
  /* font-size: var(--fs-normal); */
  font-weight: var(--fw-regular);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-font-primary);
}

body.login-password-protected {
  background-color: var(--color-primary)!important;
}

main {
  flex: 1 0 auto;
}

/* BETTER GRID LAYOUT: https://css-irl.info/breaking-out-of-a-central-wrapper/ AND https://codepen.io/michellebarker/pen/gOepPJG  =======  */

.content-width {
  display: grid;
  grid-template-columns: [full-start] 1% [wide-start] 2% [wrapper-start] minmax(0, 70rem) [wrapper-end] 2% [wide-end] 1% [full-end];
}

.content-width > * {
  grid-column: wrapper;
}

.content-width > .alignfull {
  grid-column: full;
  padding-left: 4%;
  padding-right: 4%;
}

.content-width > .alignwide {
  grid-column: wide;
  padding-left: 4%;
  padding-right: 4%;
}

/* LINKS  ======================================================= */

a, .link-color {
  color: var(--link-color);
  text-decoration: none;
  word-wrap: break-word;
}

a:hover {
  color: var(--link-color-hover);
}

#maincontent a:hover {
  border-bottom: 1px solid var(--link-color-hover);
}

a:visited {
  color: var(--link-color-visited);
}

a:active,
a:focus {
  outline: none;
}

a:focus-visible {
  outline: 3px dashed var(--link-color-hover);
}

a:focus:not(:focus-visible) {
  outline: none;
}

a.mega-menu-link:focus-visible {
  outline: 3px dashed var(--link-color-hover) !important;
}

.clearfix {
  content: "";
  clear: both;
  display: table;
}

/* DISPLAY/HIDE, MAIN STRUCTURE  ================================ */

.hide,
.hidemobile {
  display: none;
}

.hidedesktop {
  display: block;
}

/* Only display to screenreader */
.sr-only,
.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* TYPOGRAPHY  ================================================= */

p,
blockquote,
ol,
ul {
  margin-bottom: 25px;
}

p.extrasmalltext,
.extrasmalltext {
  font-size: var(--fs-extrasmall);
}

p.smalltext,
.smalltext {
  font-size: var(--fs-small);
}

p.largetext,
.largetext {
  font-size: var(--fs-large);
}

p.extralargetext,
.extralargetext {
  font-size: var(--fs-extralarge);
}

footer p {
  margin-bottom: 0;
}

p img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0;
}

img {
  object-fit: cover;
}

strong {
  font-weight: var(--fw-bold);
}

.vertical-center {
  display: flex;
  align-items: center !important;
}

.vertical-bottom {
  display: flex;
  align-items: end !important;
}

.vertical-center p,
.vertical-center h2,
.vertical-center h3,
.vertical-center h4,
.wp-block-columns.vertical-center {
  margin: 0;
}

.bg-light-grey {
  background-color: var(--faint-grey);
}

.alignwide.wp-block-columns > div:nth-of-type(1),
.alignfull.wp-block-columns > div:nth-of-type(1) {
  /* padding: 0;
  margin: 0; */
}

.clear:after {
  content: "";
  display: table;
  clear: both;
}

.wp-block-separator,
hr {
  height: 1px;
  border: 0;
  margin: 60px 0;
  background: var(--light-grey);
}

.wp-block-separator.thick-separator {
  height: 10px;
  margin: 100px 0 80px;
}

sup,
sub {
  position: relative;
  vertical-align: baseline;
  font-size: 0.68rem;
  line-height: 0;
  padding-left: 2px;
  top: -0.4em;
}

sup {
  top: -0.5em;
}

sub {
  top: 0.4em;
}

.wp-block-pullquote {
  margin: 0;
  padding: 0;
}

.wp-block-pullquote p,
.wp-block-pullquote.alignleft p,
.wp-block-pullquote.alignright p,
.wp-block-pullquote.has-text-align-left p,
.wp-block-pullquote.has-text-align-right p {
  font-size: inherit;
}

.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright,
.wp-block-pullquote.has-text-align-left,
.wp-block-pullquote.has-text-align-right {
  max-width: none;
}

blockquote {
  padding: 25px 0 25px 0;
  margin: 25px 0 0 0;
  font-weight: var(--fw-normal);
  font-size: var(--fs-normal) + 0.2rem;
  font-style: normal;
  border-top: 5px solid var(--light-grey);
  text-align: right;
  float: right;
}

blockquote cite {
  font-family: var(--ff-normal);
  font-style: normal;
  font-size: calc(var(--fs-normal) - 0.1rem) !important;
}

blockquote cite::before {
  content: "—";
  padding-right: 5px;
  display: inline-block;
}

blockquote p {
  margin-bottom: 10px;
}

ol,
ul {
  padding: 0 0 0 22px;
}

ol ol,
ul ul {
  padding: 10px 0 0 22px;
  margin-bottom: 0;
}

ol li,
ul li {
  padding: 0 0 10px 0;
}

ol li:last-child,
ul li:last-child {
  padding: 0;
}

ol ol li:last-child,
ul ul li:last-child {
  padding-bottom: 0;
}

ul {
  list-style: square;
  list-style: disc;
}

ul ul {
  list-style: circle;
}

ul.linklist {
  list-style: none;
  padding: 0;
}

ul.linklist li {
  margin: 10px 0 10px;
  border-bottom: 1px solid var(--light-grey);
  padding: 10px 0 20px;
  line-height: 1.5;
}

/* OL STYLES INCLUDING A BOLD NUMBER STYLE  ================================================ */

ol {
  counter-reset: item;
  padding-left: 0;
}

ol li {
  counter-increment: item;
  list-style-type: none;
}

ol li::before {
  content: counters(item, ".") " ";
}

ol.schema-how-to-steps li::before {
  content: normal;
}

ol.bold-number li::before {
  font-weight: bold;
}

/* TABLES ============================================================ */

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center;
}

table th {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

table td, table th {
  border-bottom: 1px solid #aaa;
  padding: 20px 25px;
  vertical-align: middle;
}

table tr:hover {
  background-color:#FDFDFD;
}

/* ICONS  ======================================================== */

.icon-arrow-right {
  width: 14px;
  height: 14px;
  position: relative;
  top: 1px;
  text-align: center;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#maincontent .icon-arrow-right {
  width: 12px;
  height: 12px;
}

.icon-circle {
  display: block;
  margin: 0 auto;
  width: 56px;
  height: 56px;
  line-height: 56px;
  border-radius: 50%;
  text-align: center;
  background-color: var(--light-grey);
}

.icon-download {
  width: 40px;
  height: 40px;
}

.download-block-large-text {
  font-size: 120%;
  line-height: 1.35rem;
}

/* BUTTONS  ====================================================== */

.button a,
.gform_wrapper input[type="submit"],
input[type="submit"],
.wp-block-button a,
a.wp-block-file__button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-primary);
  background-color: var(--color-primary);
  text-align: center;
  letter-spacing: 0.05em;
  font-size: calc(var(--fs-button) + 0.075rem) !important;
  font-weight: var(--fw-medium);
  color: var(--white);
  border-radius: 0;
  letter-spacing: var(--letter-spacing-tight);
  transition: var(--transition-button);
  height: 38px;
  padding-top: 0; /* to get text to visually center */
  padding-bottom: 0; /* override WP button dtyle */
  padding-right: 20px;
  padding-left: 20px;
  margin-top: 40px;
  border: none !important;
  position: relative;
}

.button a:hover,
.gform_wrapper input[type="submit"]:hover,
input[type="submit"]:hover,
.wp-block-button a:hover,
a.wp-block-file__button:hover,
.button a:visited:hover {
  background-color: var(--color-primary-dark);
  border: none !important;
  color: var(--white) !important;
}

.abovefooter .button a {
  background-color: #fff;
  color: #333 !important;
  margin: 0;
}

/* SPECIAL FONT STYLES  =========================================  */

.poppins {
  font-family: var(--ff-secondary);
}

.extralight {
  font-weight: var(--fw-extralight);
}

.light {
  font-weight: var(--fw-light);
}

.regular {
  font-weight: var(--fw-regular);
}

.medium {
  font-weight: var(--fw-medium);
}

.semibold {
  font-weight: var(--fw-semibold);
}

.bold {
  font-weight: var(--fw-bold);
}

.extrabold {
  font-weight: var(--fw-extrabold);
}

.black {
  font-weight: var(--fw-black);
}

/* HEADINGS  ====================================================  */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-secondary);
  font-weight: var(--fw-semibold);
  color: var(--black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  margin: 0;
  padding: 0;
}

h1 {
  font-size: calc(var(--fs-h1) - 1rem);
  padding: 0;
  line-height: 1.1;
  color: var(--white);
  position: relative;
  z-index: 9;
}

.error404 h1 {
  color: var(--black);
}

h2 {
  font-size: calc(var(--fs-h2) - 0.2rem);
  padding: 15px 0 30px;
  position: relative;
}

h3 {
  font-size: calc(var(--fs-h3) - 0.2rem);
  padding: 15px 0 25px;
}

h4 {
  font-size: calc(var(--fs-h4) - 0.2rem);
  padding: 15px 0 25px;
}

h5 {
  font-size: var(--fs-h5);
  padding: 7px 0 25px;
}

h6 {
  font-size: calc(var(--fs-h6) - 0.2rem);
  padding: 5px 0 15px;
}

.business-unit-label {
  font-family: var(--ff-secondary);
  color: #ccc;
  line-height: 1.25;
  letter-spacing: 0.01em;
  font-size: 15px;
  padding-bottom: 15px;
}

/* WP FIGURE STYLES =============================================== */
/* Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo. */

figure.wp-block-image,
figure.wp-block-embed {
  /* margin-top: 50px; */
}

figure.wp-block-image .no-top-margin,
figure.wp-block-embed .no-top-margin {
  margin-top: 0;
}

.post-body .wp-caption,
.post-body .aligncenter {
  width: 100% !important;
}

figure.wp-block-embed {
  margin-bottom: 50px;
}

figcaption,
.wp-caption-text {
  color: var(--grey);
  font-size: calc(var(--fs-normal) - 22%);
  font-style: italic;
  padding-top: 3px;
  padding-bottom: 12px;
  margin-bottom: 30px !important;
  border-bottom: 1px solid var(--light-grey);
}

.wp-block-image figure.alignleft {
  margin-right: 60px;
}

.wp-block-image figure.alignright {
  margin-left: 60px;
}

/* ABOVE HEADER ALERTS ========================================== */

.above-header {
  background-color: var(--faint-grey);
  text-align: center;
  font-size: calc(var(--fs-mobile) - 0.2rem);
  padding-top: 3px;
  padding-bottom: 4px;
}

.above-header p {
  font-size: calc(var(--fs-mobile) - 0.2rem);
  margin: 0;
  padding: 0;
}

/* MOBILE NAV =================================================== */

.header-logo-link {
  display: none;
}

 /* Internal and External Words on Nav ========================= */
	
 .mega-menu-wrap li.mega-menu-item.internal a.mega-menu-link {
	color:#777!important;
	font-size: 14px!important;
	line-height:1.2em!important;
	height: auto!important;
	font-weight:bold!important;
	border-bottom:none!important;
	cursor:default!important;
	margin-top:28px!important;
	margin-bottom:12px!important;
	display:block!important;
}

.home #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 a.mega-menu-logo img.mega-menu-logo {
  top: 0px!important;
}

#mega-menu-wrap-primary {
  background-color: #666 !important;
}
.mega-menu-wrap li.mega-menu-item a.mega-menu-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.mega-menu-wrap .mega-menu-toggle .mega-toggle-blocks-left .mega-toggle-block {
  margin-left: 11px !important;
}

.mega-menu-wrap li.mega-menu-item.click-to-call a.mega-menu-link {
  border-bottom: none !important;
  margin-top: 100px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  line-height: 1.8em !important;
}

.mega-menu-wrap
  li.mega-menu-flyout
  ul.mega-sub-menu
  li.mega-menu-item
  a.mega-menu-link {
  padding: 10px 10px 10px 10px !important;
}

#mega-menu-wrap-primary a.mega-menu-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ABOVE FOOTER - CTA or other content ========================== */

.abovefooter {
  padding-top: 36px;
  padding-bottom: 32px;
  background-color: var(--color-primary-dark);
}

.abovefooter-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.footer-label {
  font-size: 1.6rem;
}

/* BACKGROUND ADJUSTMENTS ========================================= */

.background-dark {
  background-color: #000;
  color: #c4c4c4 !important;
}

.background-dark h2, .background-dark h3 {
  color: #fff !important;
}

.background-dark a {
  color: #5fb3e4;
  font-weight: 600;
}

.background-dark a:hover {
  border-bottom: none!important;
}

.background-dark .download-block {
  background-color: #333;
}

.background-dark .download-block:hover {
  background-color: #222;
}

.background-grey {
  background-color: #f4f4f4;
}

.background-grey .download-block {
  background-color: #ededed;
}

.background-grey .download-block:hover {
  background-color: #e8e8e8;
}

/* CUSTOM BLOCKS  ================================================ */

.download-block {
  padding: 28px;
  margin-bottom: 10px;
  background-color: #f4f4f4;
  transition: var(--transition);
}

.download-block:hover {
  background-color: #F1F1F1;
}

.download-block-content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.download-block-image-icon img {
  width: 100px;
  height: auto;
}

.download-block.vertical-image .download-block-image-icon img {
  width: auto;
  max-height: 100px;
}

.download-block.limit-image-height .download-block-image-icon img {
  max-height: 90px;
  width: auto;
}

.download-block-name-description {
  margin-left: 25px;
}

.download-block-name {
  font-weight: var(--fw-bold);
  line-height: 1.35rem;
  font-size: 100%;
  padding-bottom: 10px;
}

.download-block-description {
  line-height: 1.2rem;
  font-size: 85%;
}

.download-block-image-icon {
  line-height: 0;
  flex-shrink: 0;
}

.download-block-links {
  display: flex;
  margin-left: auto;
}

.download-link-item {
  padding: 0px 10px 5px;
  border-right: 1px solid #afafaf;
}

.download-block-links div:last-of-type {
  padding-right: 0;
  border-right: none;
}

.download-block-links a {
  font-weight: var(--fw-semibold);
}

/* PASSWORD PROTECTED ACF FIELDS ========================= */

.password-entry-content form, .password-entry-content .custom-password-message {
	display:none;
}

.password-entry-content.banner form, .password-entry-content.banner .custom-password-message {
	display:block;
}

p.custom-password-message, .password-entry-content.banner form.post-password-form p {
	margin:0;
	padding:0;
	font-size: 24px;
}

.password-entry-content.banner form.post-password-form p {
	max-width:500px;
	margin-bottom:30px;
}

.password-entry-content.banner .custom-password-message, .password-entry-content.banner form.post-password-form {
	background-color:#1a1a1a;
	color:#fff;
}

.password-entry-content.banner .custom-password-message {
	padding: 160px 0 0 120px;
	margin-bottom: -150px;
}

.password-entry-content.banner form.post-password-form {
	padding:120px 30px 190px 40px;
	height:560px;
}

.post-password-form input {
    color:#333;
	display:block;
	clear:both;
	height:40px;
	margin-bottom:10px;
}

.post-password-form label {
  font-weight:700;
	font-size:16px;
}

.post-password-form input[type="submit"] {
	font-weight:700;
	padding: 7px 40px;
  margin-top: 10px!important;
  color: #000!important;
  background-color: #fff;
}

.post-password-form input[type="submit"]:hover {
  background-color: #f8f8f8;
}

/* FOOTER  ======================================================= */

footer {
  font-size: calc(var(--fs-footer) + 0.22rem);
  background-color: #000;
}

.copyright {
  clear: both;
  padding: 10px 0 7px;
  margin-bottom: 0;
}

.copyright p {
  text-align: right;
  font-size: 12px;
  color: #999;
}

/* SPACERS OPTIMIZED SIZES FOR DESKTOP AND MOBILE  ============================================= */
/* MOBILE SPACERS  ============================================= */

.wp-block-spacer {
  margin-top: 0;
  margin-bottom: 0;
  background-color: var(--state-spacer-background);
  position: relative;
}

.wp-block-spacer.is-style-small {
  height: 40px !important;
}

.wp-block-spacer.is-style-medium {
  height: 60px !important;
}

.wp-block-spacer.is-style-large {
  height: 80px !important;
}

.wp-block-spacer.is-style-x-large {
  height: 100px !important;
}

/* BANNERS  ====================================================== */

.banner-section {
  position: relative;
  background-repeat: no-repeat;
  background-position: top center; /*v - h*/
  background-size: cover;
}

.banner-section.photo-banner-section.mobile-banner {
  background-size: auto 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 250px;
}

.banner-section.photo-banner-section {
  /* display: flex;
  justify-content: center; */
  margin-bottom: 20px;
  background-position: center top;
  background-size: auto 100%;
  /* dark overlay
  &::before {
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0));
  } */
}

.photo-banner-section {
  z-index: 9;
  position: relative;
}

/* READ NEXT PAGE ==================================================== */

.readnext-block {
  margin-top: 30px;
  background-color: #ddd;
  transition: all .5s ease;
  line-height: 1;
}

.readnext-block:hover {
  background-color: #ccc;
}

.readnext-block-content a {
  color: #333 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0 30px;
  border-bottom: none!important;
}

.readnext-block-content a:hover {
  border-bottom: none!important;
}

.readnext {
  font-size: 13px;
  margin-bottom: 5px;
}

.nextlabel {
  font-size: 32px;
}

.readnext-block-content .right-chevron {
  position: relative;
}

.readnext-block-content .right-chevron::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 20px;
  height: 20px;
  border-bottom: 1px solid;
  border-right: 1px solid;
  transform: rotate(-45deg);
  right: 0;
  top: -10px;
}

/* COLOR BLOCK =================================================== */

.color-block-content > div:first-of-type {
  font-weight: var(--fw-bold);
  border-top: 5px solid #000;
  margin-top: 10px;
}

.color-block-wrapper .color-group {
    border-bottom: 1px solid #eaebeb;
    font-size: 14px;
    line-height: 1.1em;
    width: 100%;
}

.color-block-wrapper .color-group div {
  margin-bottom: 10px;
}

.color-item-name {
  font-size: 18px;
  padding: 5px 0 10px;
  border-bottom: 1px solid #d8dbdb;
}

.color-block-content > div:last-of-type {
  border-bottom: none;
}

.color-block-wrapper.last-color-block .color-group {
  border-bottom: 1px solid #eaebeb;
}

.color-block-wrapper .color-group:hover {
  background-color: #F9F9F9;
}

.color-block {
  height: 37px;
} 

.color-mode {
  border-radius: 2px;
  background-color: transparent;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  color: #999;
  padding: 3px 4px 3px;
  margin: 0 10px 0 0;
  display: inline-block;
}

.color-block-wrapper .color-group:hover .color-mode {
  background-color: #E7E7E7;
}

.color-hex-value {
  text-transform: uppercase;
}

.color-link a {
  cursor: pointer;
  position: relative;
}

.color-link a:hover {
  border-bottom: none!important;
}

.color-link a:hover::after {
  content:'copy';
  font-weight: 600!important;
  font-size: 11px;
  color: #888;
  padding-left: 5px;
  letter-spacing: var(--letter-spacing-tight);
}

.icon-copy {
  width: 10px;
  height: 10px;
  margin-left: 7px;
}

/* LARGE COLOR BLOCKS ============================================ */

.color-block-wrapper.large-color-blocks .color-block-content {
  display: flex;
  flex-flow: row wrap;
  gap: 40px 10px;
  line-height: 1.5em;
}

.color-block-wrapper.large-color-blocks .color-block-content div:first-of-type {
  font-weight: var(--fw-normal);
  text-transform: none;
  font-size: var(--fs-normal);
  border-top: none;
}

.color-block-wrapper.large-color-blocks .color-group {
  display: grid;
  grid-template-areas: " color-block " " color-name " " color-value1 " " color-value2 " " color-value3 " " color-text ";
  grid-template-rows: repeat(6, auto);
}

.color-block-wrapper.large-color-blocks .color-block-content .color-rgb {
  grid-area: color-value1;
}

.color-block-wrapper.large-color-blocks .color-block-content .color-hex {
  grid-area: color-value2;
}

.color-block-wrapper.large-color-blocks .color-block-content .color-link, .color-block-wrapper.large-color-blocks .color-block-content .color-link a {
  display: flex;
}

.color-block-wrapper.large-color-blocks .color-block-content .color-link a {
  margin-top: 7px;
  position: relative;
}

.color-block-wrapper.large-color-blocks .color-block-content .color-link a::after {
  position: absolute;
  top: -4px;
  left: 16px;
}

.color-block-wrapper.large-color-blocks .color-group:hover {
  background-color: transparent;
}

.color-block-wrapper.large-color-blocks .color-block {
  height: 250px;
  width: 250px;
  margin-bottom: 20px;
}

.color-block-wrapper.large-color-blocks .color-item-name-wrapper {
  display: flex;
  margin: 0 0 16px;
}

.color-block-wrapper.large-color-blocks .color-item-name {
  font-weight: var(--fw-bold)!important;
  font-size: var(--fs-normal);
  padding: 0;
  border-bottom: none;
}

.color-block-wrapper.large-color-blocks .color-item-text {
  display: none;
}

.color-block-wrapper.large-color-blocks .color-hex, .color-block-wrapper.large-color-blocks .color-cmyk, .color-block-wrapper.large-color-blocks .color-rgb {
  margin-bottom: 8px;
}

.color-block-wrapper.large-color-blocks .color-group {
  border-bottom: none;
  font-size: var(--fs-normal);
  line-height: 1.1em;
  width: auto;
}

.color-block-wrapper.large-color-blocks .color-mode {
  font-weight: var(--fw-normal);
  text-transform: none;
  font-size: var(--fs-normal);
  color: var(--color-font-primary);
  padding: 0;
  margin: 0;
  display: inline;
  padding-right: 5px;
}

.color-block-wrapper.large-color-blocks .color-mode::after {
  content: ':'
}

.color-block-wrapper.large-color-blocks .color-group:hover .color-mode {
  background-color: transparent;
}

/* MODAL ========================================================= */
/* https://github.com/KittyGiraudel/a11y-dialog */

.dialog-container {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99999;
}

.dialog-container[aria-hidden="true"] {
  display: none;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(43, 46, 56, 0.9);
  -webkit-animation: fade-in 200ms both;
  animation: fade-in 200ms both;
}

.page-dialog-content {
  background-color: rgb(255, 255, 255);
  margin: auto;
  z-index: 2;
  position: relative;
  -webkit-animation: fade-in 400ms 200ms both, slide-up 400ms 200ms both;
  animation: fade-in 400ms 200ms both, slide-up 400ms 200ms both;
  padding: 50px 50px 40px;
  max-width: 80%;
  width: 800px;
  border-radius: 2px;
}

@media screen and (min-width: 1024px) {
  .dialog-content {
    padding: 40px;
  }
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@-webkit-keyframes slide-up {
  from {
    transform: translateY(10%);
  }
}
@keyframes slide-up {
  from {
    transform: translateY(10%);
  }
}

.dialog-close {
  position: absolute;
  top: 10px;
  right: 8px;
  border: 0;
  padding: 0;
  background-color: transparent;
  font-weight: bold;
  font-size: 26px;
  width: 26px;
  height: 26px;
  text-align: center;
  cursor: pointer;
  transition: 0.15s;
}

@media screen and (min-width: 1024px) {
  .dialog-close {
    top: 5px;
    right: 5px;
  }
}

.link-like:hover,
.link-like:active {
  color: var(--link-color-hover);
}

.link-like {
  color: var(--link-color);
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* FLIPBOXES JQUERY COLLAPSE for YOAST FAQ SECTIONS 
https://webcloud.se/jQuery-Collapse/ ================== */

.schema-faq-section {
  flex-basis: 100%;
}

.schema-faq-question a,
.accordion-heading a {
  cursor: url(images/hover.png) 52 52, auto !important;
  display: block;
  margin: 0;
  padding: 38px 0;
  text-align: left;
  cursor: pointer;
  color: var(--black);
  font-weight: 400;
  font-size: calc(var(--fs-normal) + 0.4rem);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  line-height: 1.4rem;
}

.schema-faq-question a:hover,
.accordion-heading a:hover {
  border-bottom: none !important;
  color: var(--black) !important;
}

.accordion-section > div a {
  border-top: 1px solid var(--light-grey) !important;
}

.accordion-section:last-of-type div a {
  border-bottom: 1px solid var(--light-grey) !important;
}

.accordion-section .accordion-heading.open a {
  border-bottom: none !important;
}

.schema-faq-question.open a,
.accordion-heading.open a {
  cursor: url(images/hover-close.png) 52 52, auto !important;
  font-weight: var(--fw-bold);
  border-bottom: none;
}

.schema-faq-question.open:hover a,
.schema-faq-question:hover a,
.accordion-heading.open:hover a,
.accordion-heading:hover a {
  border-bottom: none !important;
  font-size: calc(var(--fs-normal) + 0.6rem);
}

.schema-faq-question.open:hover a,
.accordion-heading.open:hover a {
  font-size: calc(var(--fs-normal) + 0.4rem);
}

.schema-faq-question a:after,
.accordion-heading a:after {
  content: "";
  display: block;
  margin-top: 3px;
  width: 30px;
  height: 30px;
  float: right;
  background: linear-gradient(#666, #666), linear-gradient(#666, #666);
  background-position: center;
  background-size: 50% 2px, 2px 50%; /*thickness = 2px, length = 50% (25px)*/
  background-repeat: no-repeat;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.schema-faq-question:hover a:after,
.accordion-heading:hover a:after {
  content: "";
  display: block;
  margin-top: -3px;
  width: 40px;
  height: 40px;
  float: right;
  background: linear-gradient(#666, #666), linear-gradient(#666, #666);
  background-position: center;
  background-size: 50% 2px, 2px 50%; /*thickness = 2px, length = 50% (25px)*/
  background-repeat: no-repeat;
}

.schema-faq-question.open a:after,
.accordion-heading.open a:after {
  margin-top: -3px;
  width: 40px;
  height: 40px;
  background: linear-gradient(#333, #333);
  background-position: center;
  background-size: 50% 2px; /*thickness = 2px, length = 50% (25px)*/
  background-repeat: no-repeat;
}

.schema-faq-answer,
.accordion-content {
  margin-bottom: 30px;
}

/* 768px Tablets height (or width) generally 1366px  ========================================= */
@media (min-width: 768px) {

  .content-width {
    grid-template-columns: [full-start] 1% [wide-start] 3% [wrapper-start] minmax(0, 70rem) [wrapper-end] 3% [wide-end] 1% [full-end];
  }

  .banner-section.photo-banner-section.mobile-banner {
    background-size:100% auto;
    height: 250px;
  }

  .banner-section.photo-banner-section {
    margin-bottom: 40px;

}

/* 1024px Baseline for full display experience such as tablets - height generally 600px ================== */
@media (min-width: 1024px) {
  body {
    /* font-size: var(--fs-normal); */
  }

  .hidemobile {
    display: block;
  }

  .hidedesktop {
    display: none;
  }

  :where(.wp-block-columns.is-layout-flex) {
    gap: 3em;
  }

  #left-fixed-nav .main-nav {
    width: 320px;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var(--color-primary);;
    position: fixed;
    overflow: hidden;
  }

  #left-fixed-nav #maincontent {
    flex-shrink: 0;
    margin-left: 320px;
  }

  p.largetext,
  .largetext {
    font-size: calc(1.25rem - 0.05rem);
  }

  a .icon-arrow-right {
    display: inline-block;
  }

  figcaption,
  .wp-caption-text {
    font-size: calc(var(--fs-normal) - 40%);
  }

  /* BETTER GRID LAYOUT: https://css-irl.info/breaking-out-of-a-central-wrapper/ AND https://codepen.io/michellebarker/pen/gOepPJG  =======  */

  .content-width {
	  grid-template-columns: [full-start] 2% [wide-start] 6% [wrapper-start] minmax(0, 70rem) [wrapper-end] 6% [wide-end] 2% [full-end];
  }

  .content-width > .alignfull {
    padding-left: 8%;
    padding-right: 8%;
  }

  .content-width > .alignwide {
    padding-left: 8%;
    padding-right: 8%;
  }

  /* HEADINGS   =================================================== */

  h1 {
    font-size: calc(var(--fs-h1) - .5rem);
    padding: 0;
  }

  h2 {
    font-size: calc(var(--fs-h2) - 0.4rem);
    padding: 15px 0 30px;
  }

  h3 {
    font-size: calc(var(--fs-h3) - 0.3rem);
    padding: 15px 0 25px;
  }

  h4 {
    font-size: calc(var(--fs-h4) - 0.3rem);
    padding: 5px 0 25px;
  }

  h5 {
    font-size: var(--fs-h5);
    padding: 0 0 25px;
  }

  h6 {
    font-size: calc(var(--fs-h6) - 0.25rem);
    padding: 0 0 20px;
  }

  .business-unit-label {
    letter-spacing: 0.06em;
    font-size: 19px;
  }

  /*  TYPOGRAPHY  =============================================================== */

  blockquote {
    margin: 45px 0 0 85px;
    width: 60%;
  }

  /* BUTTONS   =============================================================== */

  .button a,
  .gform_wrapper input[type="submit"],
  input[type="submit"],
  .wp-block-button a,
  a.wp-block-file__button {
    font-size: calc(var(--fs-button) - 0.125rem) !important;
  }

  /* ICONS   ===================================================== */

  #maincontent .icon-arrow-right {
    width: 14px;
    height: 14px;
  }

  .icon-download {
    width: 40px;
    height: 40px;
  }

  /* ABOVE HEADER ALERTS ========================================== */

  .above-header {
    font-size: calc(var(--fs-normal) - 0.2rem);
    padding-top: 3px;
    padding-bottom: 4px;
  }

  .above-header p {
    font-size: calc(var(--fs-normal) - 0.2rem);
  }

  /* MAIN NAV   ==================================================== */

  header {
  }

  .header-logo-link {
    display: block;
  }

  .main-nav {
    clear: both;
  }

  .main-nav-inner {
    padding-right: 0;
  }

  .mega-menu-wrap ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style-type: none !important;
  }

  .mega-menu-wrap ul li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .mega-menu-wrap li.mega-menu-item {
    float: left !important;
    width: 100% !important;
  }

  .mega-menu-wrap li.mega-menu-item a.mega-menu-link {
    font-weight: 500 !important;
    line-height: 47px !important;
    height: 47px !important;
    font-size: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.65) !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 39px 0 25px !important;
  }

  .mega-menu-wrap li.mega-menu-item.small-nav a.mega-menu-link {
    font-size: 15px !important;
  }

  .mega-menu-wrap li.mega-menu-item.mega-toggle-on a.mega-menu-link {
    background-color: transparent !important;
  }

  .mega-menu-wrap li.mega-menu-item a.mega-menu-link:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    background-color: transparent !important;
  }

  .mega-menu-wrap li.mega-current_page_item a.mega-menu-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 700!important;
  }

  .mega-menu-wrap li.mega-menu-item a.mega-menu-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .mega-menu-wrap li.mega-menu-item.mega-toggle-on a.mega-menu-link {
    border-bottom: none !important;
  }

  .mega-indicator {
    margin: 0 !important;
  }

  li.mega-menu-item {
    position: relative;
  }

  .mega-menu-wrap li.mega-menu-flyout ul.mega-sub-menu {
    background-color: #222 !important;
    padding: 7px 0 !important;
    float: left !important;
  }

  .mega-menu-wrap
    li.mega-menu-flyout
    ul.mega-sub-menu
    li.mega-menu-item
    a.mega-menu-link {
    background-color: #222 !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 40px 0 50px !important;
    height: 42px !important;
    line-height: 42px !important;
  }

  .mega-menu-wrap
    li.mega-menu-flyout
    ul.mega-sub-menu
    li.mega-menu-item
    a.mega-menu-link:hover,
  .mega-menu-wrap
    li.mega-menu-flyout
    ul.mega-sub-menu
    li.mega-menu-item.mega-current-menu-item
    a.mega-menu-link {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  .mega-menu-wrap
    li.mega-menu-flyout
    ul.mega-sub-menu
    li.mega-menu-item.mega-current-menu-item
    a.mega-menu-link {
    font-weight: 700 !important;
  }

  #mega-menu-wrap-max_mega_menu_2
    #mega-menu-max_mega_menu_2.mega-menu-accordion
    li.mega-menu-item-has-children
    > a.mega-menu-link
    > span.mega-indicator {
    padding-right: 0;
  }

  .mega-menu-wrap
    li.mega-menu-flyout
    ul.mega-sub-menu
    li.mega-menu-item.mega-current-menu-item
    a.mega-menu-link {
    font-weight: 700 !important;
  }

  img.header-logo {
    height: 34px;
    width: auto;
    padding-left: var(--nav-padding-left);
    transition: all 0.2s ease;
  }

  a.header-logo-link {
    display: flex;
    align-items: center;
    padding-top: 0;
    margin: 35px 0 50px;
  }

  .mega-menu-wrap li.mega-internal.mega-menu-item a.mega-menu-link:hover {
    color: #777!important;
  }


 /* Internal and External Words on Nav ========================= */
	
.mega-menu-wrap li.mega-menu-item.internal a.mega-menu-link {
	margin-top:78px!important;
}

  /* SELECT NAV  ==================================================  */

  .filter-header {
    color: #777;
    font-size: 14px;
    margin: 0 20px 0 25px !important;
  }

.selectNative,
.selectCustom {
  position: relative;
  width: 100%;
  max-width: 274px;
  height: 40px; 
}

.selectCustom {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.selectCustom-trigger {
  font-size: 16px;
}

.selectCustom-options {
  font-size: 14px;
}

.selectCustom-trigger {
	color: rgba(255,255,255,.7);
}

.selectCustom a {
	display: block;
	width: 100%;
	padding: 8px 5px 8px 15px;
	color: rgba(255,255,255,.7);
}

.selectCustom .selectCustom-options > div:first-of-type a {
	/* border-radius: 10px 10px 0 0; */
}

.selectCustom a:hover {
	color:#fff;
}

@media (hover: hover) {
  .selectCustom {
    display: block;
  }

  .selectNative:focus + .selectCustom {
    display: none;
  }
}

.selectNative:focus,
.selectCustom.isActive .selectCustom-trigger {
  outline: none;
}

.select {
  position: relative;
}

.selectLabel {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
}

.selectWrapper {
  position: relative;
}

.selectNative,
.selectCustom-trigger {
  background-color: #2c2c2c;
  border: 1px solid #6f6f6f;
  border-radius: 10px;
}

.selectNative {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 0.4rem;
  padding: 0rem 0.8rem;
}

.selectCustom-trigger {
  position: relative;
  width: 100%;
  max-width: 274px;
  height: 100%;
  background-color: #2c2c2c;
  padding: 6px 15px;
  cursor: pointer;
}

.selectCustom-trigger::after {
	content: url("data:image/svg+xml;utf8,<svg fill='white' fill-opacity='0.5' height='15' width='15' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z'/></svg>");
  position: absolute;
  top: 8px;
  right: 12px;
}

.selectCustom-trigger:hover {
  border-color: #777;
}

.selectCustom-options {
  position: absolute;
  top: 49px;
  left: 0;
  width: 100%;
  border: 1px solid #6f6f6f;
  border-radius: 10px 10px 10px 10px;
  background-color: #2c2c2c;
  z-index: 1;
  padding: 0;
  display: none;
}

.selectCustom.isActive .selectCustom-options {
  display: block;
}

.selectCustom-option {
  position: relative;
  padding: 0;
}

.selectCustom-option.isHover,
.selectCustom-option:hover {
  background-color: #424b51; 
  color: white;
  cursor: default;
}

.selectCustom-option:first-of-type:hover {
  border-radius: 10px 10px 0 0;
}

.selectCustom-option:last-of-type:hover {
	border-radius: 0 0 10px 10px;
  }

.selectCustom-option:not(:last-of-type)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #777;
}

.selectCustom-option.isActive::before {
  content: "✓";
  position: absolute;
  left: 0.8rem;
}

.password-entry-content.banner form.post-password-form {
	padding:220px 0 190px 120px;
	height:560px;
}


  /* BANNERS   ==================================================== */

  .banner-section {
    background-position: center top; /*h - v*/
  }

  .banner-section.photo-banner-section {
    background-size: auto auto;
  }

  .banner-section.photo-banner-section {
    height: 600px;
    padding-top: 400px;
    margin-bottom: 80px;
  }

  .home .banner-section.photo-banner-section {
    padding-top: 340px;
  }

  /* DOWNLOAD BLOCK ===================================================== */

  .download-block {
    padding: 48px;
  }

  .download-block-image-icon img {
    width: 150px;
  }

  .download-block-name-description {
    margin-left: 45px;
  }

  .download-block-name {
    font-size: 120%;
  }

  .download-link-item {
    padding: 0px 20px 5px;
}

/* READ NEXT PAGE ==================================================== */

.readnext-block {
  margin-top: 90px;
}

/* COLOR BLOCK =================================================== */

.color-block-wrapper .color-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
    border-bottom: 1px solid #eaebeb;
    font-size: 14px;
    line-height: 1.1em;
    width: 100%;
}

.color-block {
  width: 10%;
  height: 37px;
} 

.color-block-wrapper .color-group div {
  margin-bottom: 0;
}

.color-block-content > div:first-of-type {
  border-top: 3px solid #000;
  margin-top: 0;
}

.color-item-name-wrapper {
  width: 26%;
  margin-left: 10px;
}

.color-item-name {
  font-size: 14px;
  margin-bottom: 0;
  padding: 0;
  border-bottom: none;
}

.color-hex {
  width: 16%;
}

.color-rgb {
  width: 20%;
}

.color-cmyk {
  width: 19%;
}

.color-item-text {
  width: 9%;
  text-align: right;
  padding-right: 5px;
}

  /* FLIPBOXES JQUERY COLLAPSE for YOAST FAQ SECTIONS  ================== */

  .schema-faq-question a,
  .accordion-heading a {
    padding: 38px 0;
    font-size: calc(var(--fs-normal) + 0.3rem);
    line-height: 1.4rem;
  }

  .schema-faq-question.open:hover a,
  .schema-faq-question:hover a,
  .accordion-heading.open:hover a,
  .accordion-heading:hover a {
    font-size: calc(var(--fs-normal) + 0.5rem);
  }

  .schema-faq-question.open:hover a,
  .accordion-heading.open:hover a {
    font-size: calc(var(--fs-normal) + 0.3rem);
  }

  .schema-faq-question a:after,
  .accordion-heading a:after {
    margin-top: 3px;
    width: 30px;
    height: 30px;
  }

  .schema-faq-question:hover a:after,
  .accordion-heading:hover a:after {
    margin-top: -3px;
    width: 40px;
    height: 40px;
  }

  .schema-faq-question.open a:after,
  .accordion-heading.open a:after {
    margin-top: -3px;
    width: 40px;
    height: 40px;
  }

  .schema-faq-answer,
  .accordion-content {
    margin-bottom: 30px;
  }

  /* REMOVE IF NOT USED ============================================ */

  /* MODAL  ======================================================= */

  .js [data-modal],
  .a11y-modal {
    -webkit-overflow-scrolling: touch;
    max-width: 75%;
    max-height: 85%;
    padding: 40px;
  }

  .is-icon-btn {
    height: 47px;
    width: 47px;
  }

  [data-modal-x] {
    height: 47px;
  }

  /* ABOVE FOOTER - CTA or other content   ======================== */

  .abovefooter {
    flex-shrink: 0;
    margin-left: 320px;
  }

  /* DESKTOP SPACERS  ====================================================== */

  .wp-block-spacer {
    margin-top: 0;
    margin-bottom: 0;
  }

  .wp-block-spacer.is-style-small {
    height: 50px !important;
  }

  .wp-block-spacer.is-style-medium {
    height: 80px !important;
  }

  .wp-block-spacer.is-style-large {
    height: 100px !important;
  }

  .wp-block-spacer.is-style-x-large {
    height: 120px !important;
  }

  /* FOOTER   ====================================================== */

  footer {
    flex-shrink: 0;
    margin-left: 320px;
    font-size: calc(var(--fs-footer) - 0.2rem);
  }

  svg.icon-arrow-right.show-icon-on-hover {
    display: inline-block;
  }
}

/* 1280px Laptop - height generally 700px ==================================================================== */

@media (min-width: 1280px) {
}

/* 1366px Laptops - height generally 768px ======================================================== */

@media (min-width: 1366px) {
  .content-width {
    /* max-width: 1166px; */
  }
}

/* 1440px Laptops / Desktops  ========================================================= */

@media (min-width: 1440px) {
  /* MAIN NAV   =================================================== */

  .content-width {
    /* max-width: 1240px; */
  }
}

/* 1536px Laptops - height generally 960px ================================================== */
@media (min-width: 1536px) {
  body {
    /* font-size: calc(var(--fs-normal) + 0.15rem); */
  }

  p.extrasmalltext,
  .extrasmalltext {
    font-size: calc(var(--fs-extrasmall) + 0.15rem);
  }

  p.smalltext,
  .smalltext {
    font-size: calc(var(--fs-small) + 0.15rem);
  }

  p.largetext,
  .largetext {
    font-size: calc(var(--fs-large) + 0.15rem);
  }

  p.extralargetext,
  .extralargetext {
    font-size: calc(var(--fs-extralarge) + 0.15rem);
  }

  /* HEADINGS  =================================================== */

  h1 {
    font-size: var(--fs-h1);
  }

  h2 {
    font-size: var(--fs-h2);
  }

  h3 {
    font-size: var(--fs-h3);
  }

  h4 {
    font-size: var(--fs-h4);
  }

  h5 {
    font-size: var(--fs-h5);
  }

  h6 {
    font-size: var(--fs-h6);
  }

  /* BUTTONS   ===================================================== */

  .button a,
  .gform_wrapper input[type="submit"],
  input[type="submit"],
  .wp-block-button a,
  a.wp-block-file__button {
    font-size: calc(var(--fs-button) - 0.075rem) !important;
  }

  /* MAIN NAV ===================================================== */

  .abovetopnav-wrapper {
    font-size: calc(var(--fs-abovetopnav) - 0.04rem);
  }

  /* FLIPBOXES JQUERY COLLAPSE for YOAST FAQ SECTIONS  ================== */

  .schema-faq-question a,
  .accordion-heading a {
    padding: 38px 0;
    font-size: calc(var(--fs-normal) + 0.7rem);
    line-height: 1.4rem;
  }

  .schema-faq-question.open:hover a,
  .schema-faq-question:hover a,
  .accordion-heading.open:hover a,
  .accordion-heading:hover a {
    font-size: calc(var(--fs-normal) + 1.1rem);
  }

  .schema-faq-question.open:hover a,
  .accordion-heading.open:hover a {
    font-size: calc(var(--fs-normal) + 0.7rem);
  }

  .schema-faq-question a:after,
  .accordion-heading a:after {
    margin-top: 3px;
    width: 30px;
    height: 30px;
  }

  .schema-faq-question:hover a:after,
  .accordion-heading:hover a:after {
    margin-top: -3px;
    width: 40px;
    height: 40px;
  }

  .schema-faq-question.open a:after,
  .accordion-heading.open a:after {
    margin-top: -3px;
    width: 40px;
    height: 40px;
  }

  .schema-faq-answer,
  .accordion-content {
    margin-bottom: 30px;
  }
}

/* 1680 Desktop - height generally ~ 1050px ===================================================== */

@media (min-width: 1680px) {
}

/* Desktop full width ======================================================================== */

@media (min-width: 1920px) {
  body {
    font-size: calc(var(--fs-normal) + 0.2rem);
  }

  /* FOOTER  ==================================================== */

  footer {
    font-size: calc(var(--fs-footer) + 0.1rem);
  }
}

/* 2240px  MIDPOINT BETWEEN 1920 and 2560 ========================================= */

@media (min-width: 2240px) {
  body {
    font-size: calc(var(--fs-normal) + 0.27rem);
  }
}

/* 2560px HIDPI  =================================================== */

@media (min-width: 2560px) {
  body {
    font-size: calc(var(--fs-normal) + 0.35rem);
  }
}

/* 3840px HIDPI MONITORS =================================================== */

@media (min-width: 3840px) {
  body {
    font-size: calc(var(--fs-normal) + 0.45rem);
  }
}