:root {
  --white: #ffffff;
  --off-white: #fefefa;
  --pale-pink: #f5e9ff;
  --pale-blue: #e6f3ff;
  --powder-blue: #d9efff;
  --blue: #3768af;
  --pale-purple: #eaefff;
  --hot-pink: #dc2da9;
  --black: #000;
  --dark-dark: #0c0d17;
  --grey: #c0c0c0;
  --dark-grey: #4d4d4d;
  --charcoal: #303030;
  --dark-charcoal: #17181e;
  --dark-grey-line: #666666;
  --grey-darker: #848484;
  --light-grey: #f2f2f2;
  --light-grey-border: #ddd;
  --light-grey-bg: #ebebeb;
  --hint-of-grey: #f7f7f9;
  --medianoche: #171929;
  --medianoche-text: #cbcde6;
  --medianoche-submenu-bg: #1f233d;
  --medianoche-text-muted: #797fa7;
  --medianoche-breadcrumb-text: #a8b1cc;
  --slate-blue: #2c3856;
  --slate-light: #527093;
  --text-muted: var( --grey-darker );
  --slate-lightest: #b5c2dd;
  --logo-blue: #1717c1;
  --logo-pink: #e95bf4;
  --pink-accessible-text: #E95BF4;
  --light-pink-bg: #F7CDFC;
  --light-pink-bg-text: #AA0877;
  --navy-blue: #0D0D8B;
  --pink-accessible-text-bg: var( --navy-blue );
  --light-blue: #08d6ff;
  --lighter-blue: #63e5ff;
  --light-blue-bg: #E9FEFF;
  --royal-blue: #16478e;
  --pink-violet: #D88FFF;
  --rose-pink: #F99DF9;
  --light-pink: #FFE6FC;
  --green: #0ca005;
  --gold: #ffb40a;
  --error-red: #c71717;
  --error-bg: #f7ddea;
  --error-txt: #d70047;
  --success-bg: #eef9e1;
  --success-txt: #3d6d03;
  --notice-bg: #fffee0;
  --notice-txt: #db0c4b;
  --text-pink: #CD179D;
  --link-color: var( --slate-light );
  --logo-fill: var( --black );
  --manrope: 'Manrope', Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  --sans-regular: var(--manrope);
  --serif-regular: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  --md-width: 40rem;
  --lg-width: 64rem;
  --xlg-width: 75rem;
  --xxlg-width: 90rem;
  /* --- Default Color Scheme --- */
  --header-bg: var( --white );
  --header-bg-top: var( --off-white );
  --body-bg: var( --white );
  --footer-bottom-bg: var( --light-grey-bg );
  --footer-bottom-text: var( --text-muted );
  --body-text: var( --black );
  --h1-page-title: var( --black );
  --navbar-bg: var( --white );
  --navbar-text: var( --black );
  --navbar-font-weight: 800;
  --navbar-font-size: 1.111rem;
  --navbar-bg: transparent;
  --navbar-text: var( --black );
  --navbar-active-text: var( --grey-darker );
  --mobile-menu-bg: var( --off-white );
  --submenu-bg: var( --powder-blue );
  --mobile-menu-sub-bg: var( --hint-of-grey );
  --page-title-bg: var( --pale-blue );
  --page-title-text: var( --dark-dark );
  --card-bg-1-light: linear-gradient(0deg,rgba(242, 243, 250, 1) 0%, rgba(250, 250, 250, 1) 100%);
  --card-bg-1-dark: linear-gradient(0deg,rgba(22, 24, 41, 1) 0%, rgba(11, 12, 20, 1) 100%);
  --card-bg-1: var( --card-bg-1-light );
  --btn-dark-blue-bg: linear-gradient(0deg,rgba(36, 54, 110, 1) 0%, rgba(41, 57, 86, 1) 10%, rgba(69, 89, 154, 1) 100%);
  --light-light-gradient: linear-gradient(0deg,rgba(207, 210, 219, 1) 0%, rgba(242, 245, 255, 1) 100%);
  --btn-light-bg: var( --light-light-gradient );
  --btn-learn-more-bg: var( --slate-light );
  --btn-learn-more-color: var( --white );
  --heading-link-color: var( --dark-dark );
  --breadcrumbs-bg: var( --hint-of-grey);
  --breadcrumbs-text: var( --dark-dark );
  --icon-fill: #455877;
  --icon-webdesignby-fill1: #e6f3ff;
  --icon-webdesignby-fill2: #000000;
  --icon-webdesignby-fill3: #9ec6e8;
  --input-text-color: var( --dark-dark );
  --input-bg-color: var( --white );
}

/* --- Color Scheme Dark --- */
.color-mode-light {
  display: block;
}

.color-mode-dark {
  display: none;
}

body.appearance-light {
  --logo-fill: var( --black );
  --header-bg: var( --white );
  --header-bg-top: var( --off-white );
  --body-bg: var( --white );
  --body-text: var( --black );
  --h1-page-title: var( --black );
  --footer-bottom-bg: var( --light-grey-bg );
  --footer-bottom-text: var( --text-muted );
  --navbar-text: var( --black );
  --navbar-bg: transparent;
  --navbar-active-text: var( --grey-darker );
  --mobile-menu-bg: var( --off-white );
  --submenu-bg: var( --powder-blue );
  --mobile-menu-sub-bg: var( --hint-of-grey );
  --page-title-bg: var( --pale-blue );
  --page-title-text: var( --dark-dark );
  --btn-learn-more-bg: var( --slate-light );
  --btn-learn-more-color: var( --white );
  --card-bg-1: var( --card-bg-1-light );
  --heading-link-color: var( --dark-dark );
  --breadcrumbs-bg: var( --hint-of-grey);
  --breadcrumbs-text: var( --dark-dark );
  --link-color: var( --slate-light );
  --icon-fill: #455877;
  --icon-webdesignby-fill1: #e6f3ff;
  --icon-webdesignby-fill2: #000000;
  --icon-webdesignby-fill3: #9ec6e8;
  --input-text-color: var( --dark-dark );
  --input-bg-color: var( --white );
}

body.appearance-dark {
  --logo-fill: var( --white );
  --header-bg: var( --black );
  --header-bg-top: var( --medianoche );
  --body-bg: var( --black );
  --body-text: var( --white );
  --h1-page-title: var( --white );
  --footer-bottom-bg: var( --dark-dark );
  --footer-bottom-text: var( --medianoche-text-muted );
  --navbar-text: var( --white );
  --navbar-bg: var( --pink-accessible-text-bg );
  --navbar-active-text: var( --medianoche-text-muted );
  --submenu-bg: var( --medianoche-submenu-bg );
  --mobile-menu-bg: var( --medianoche );
  --mobile-menu-sub-bg: var( --medianoche-submenu-bg );
  --page-title-bg: var( --medianoche );
  --page-title-text: var( --medianoche-text );
  --btn-dark-blue-bg: linear-gradient(0deg,rgba(36, 54, 110, 1) 0%, rgba(41, 57, 86, 1) 10%, rgba(69, 89, 154, 1) 100%);
  --btn-learn-more-bg: var( --btn-dark-blue-bg );
  --btn-learn-more-color: var( --white );
  --card-bg-1: var( --card-bg-1-dark );
  --heading-link-color: var( --white );
  --breadcrumbs-bg: var( --slate-blue );
  --breadcrumbs-text: var( --medianoche-breadcrumb-text );
  --link-color: var( --slate-lightest );
  --icon-fill: #314f6d;
  --icon-webdesignby-fill2: #2c3856;
  --icon-webdesignby-fill1: #7b9bba;
  --icon-webdesignby-fill3: #3d6a8e;
  --input-text-color: var( --medianoche-text );
  --input-bg-color: var( --black );
}

body.appearance-dark .color-mode-dark {
  display: block;
}

body.appearance-dark .color-mode-light {
  display: none;
}

body.appearance-light .color-mode-light {
  display: block;
}

body.appearance-light .color-mode-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --logo-fill: var( --white );
    --header-bg: var( --black );
    --header-bg-top: var( --medianoche );
    --body-bg: var( --black );
    --body-text: var( --white );
    --h1-page-title: var( --white );
    --footer-bottom-bg: var( --dark-dark );
    --footer-bottom-text: var( --medianoche-text-muted );
    --navbar-text: var( --white );
    --navbar-bg: var( --pink-accessible-text-bg );
    --navbar-active-text: var( --medianoche-text-muted );
    --submenu-bg: var( --medianoche-submenu-bg );
    --mobile-menu-sub-bg: var( --medianoche-submenu-bg );
    --mobile-menu-bg: var( --medianoche );
    --page-title-bg: var( --medianoche );
    --page-title-text: var( --medianoche-text );
    --btn-dark-blue-bg: linear-gradient(0deg,rgba(36, 54, 110, 1) 0%, rgba(41, 57, 86, 1) 10%, rgba(69, 89, 154, 1) 100%);
    --btn-learn-more-bg: var( --btn-dark-blue-bg );
    --btn-learn-more-color: var( --white );
    --card-bg-1: var( --card-bg-1-dark );
    --heading-link-color: var( --white );
    --breadcrumbs-bg: var( --slate-blue );
    --breadcrumbs-text: var( --medianoche-breadcrumb-text );
    --link-color: var( --slate-lightest );
    --icon-fill: #314f6d;
    --icon-webdesignby-fill2: #2c3856;
    --icon-webdesignby-fill1: #7b9bba;
    --icon-webdesignby-fill3: #3d6a8e;
    --input-text-color: var( --medianoche-text );
    --input-bg-color: var( --black );
  }
  .color-mode-dark {
    display: block;
  }
  .color-mode-light {
    display: none;
  }
}
/* --- override :root (default) values --- */
/*
body{
    --navy-blue: #000;
}
*/
/* --- Breakpoints --- */
/*
$sm_width:      0px;
$md_width:      640px;  (40rem)   = 62.5%    of 1024
$lg_width:      1024px; (64rem)   = 85%      of 1200 
$xlg_width:     1200px; (75rem)   = 83.33%   of 1440 
$xxlg_width:    1440px; (90rem)   
*/
.messages {
  width: 100%;
}

.messages ul {
  list-style-type: none;
  margin: 1rem auto 1rem auto;
  display: table;
}

.messages ul li {
  padding: 0.25rem 0.625rem;
  margin: 0.25rem auto 0.25rem auto;
}

.bg-danger {
  background-color: var(--error-bg);
  color: var(--error-txt);
}

.bg-success {
  background-color: var(--success-bg);
  color: var(--success-txt);
}

.container, .container-lg {
  clear: both;
  max-width: var(--xxlg-width);
  margin: 0px auto;
}

.container-xlg {
  clear: both;
  max-width: var(--xlg-width);
  margin: 0px auto;
}

.container {
  padding: 0 1rem 0 1rem;
}

@media (min-width: 40rem) { /* 40rem */
  .grid-container {
    max-width: var(--md-width);
  }
}
@media (min-width: 64rem) { /* 64rem */
  .grid-container {
    max-width: var(--lg-width);
  }
  .container .container-inner {
    padding: 0 1rem 0 1rem;
  }
}
@media (min-width: 1200px) { /* 75rem */
  .grid-container {
    max-width: var(--xlg-width);
  }
}
@media (min-width: 1440px) { /* 75rem */
  .grid-container {
    max-width: var(--xxlg-width);
  }
}
html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  background-color: var(--body-bg);
  color: var(--body-text);
  font-family: var(--sans-regular);
  margin: 0px;
  padding: 0px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1 {
  font-weight: 900;
  color: var(--navy-blue);
}

h1.page-title {
  margin: 1rem auto 1rem auto;
  color: var(--h1-page-title);
  font-size: 1.444rem;
  font-weight: 600;
}

h2, h3, h4 {
  font-weight: 600;
}

h1, h2, h3, h4 {
  line-height: 1.33;
}

h2.page-subtitle {
  font-family: var(--serif-regular);
  font-weight: 400;
  font-size: 2rem;
  margin: 0 0 1rem 0;
  text-align: center;
}

p.page-subtitle {
  margin: 0.333rem 0 0 0;
  line-height: 1.666;
}

h1 {
  font-size: 1.777rem;
}

h2 {
  font-size: 1.5rem;
  margin: 0.75rem 0 0.5rem 0;
}

label {
  font-weight: 600;
  display: inline-block;
}

p {
  margin-bottom: 1.25rem;
}

a {
  text-decoration: none;
  color: var(--link-color);
}

img {
  height: auto;
  width: 100%;
}

[type=submit], [type=button] {
  appearance: none;
  border-radius: 0;
}

button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

button {
  padding: 0;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1;
  cursor: pointer;
}

a.btn,
button.btn {
  padding: 0.111em 1em 0.111em 1em;
  display: inline-block;
  background-color: var(--navy-blue);
  color: var(--white);
  font: inherit;
  font-weight: 600;
  line-height: inherit;
  text-decoration: none;
  border: 0;
  border-radius: 0.66em;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color 0.5s;
}

a.btn.btn-primary,
button.btn-primary {
  background-color: var(--light-pink-bg);
  color: var(--light-pink-bg-text);
}

button.btn.btn-features {
  background-color: var(--light-grey-bg);
  border: 1px solid var(--black);
  transition: background-color 0.5s;
  color: var(--black);
  font-family: var(--sans-regular);
}

a.btn.btn-small, button.btn.btn-small {
  padding: 0.35em 0.85em 0.35em 0.85em;
  font-size: 0.85em;
}

.btn.btn-amzn {
  width: 195px;
  height: 46px;
} /* 0.235897435897436 */
.btn.btn-learn-more {
  background: var(--btn-learn-more-bg);
  color: var(--btn-learn-more-color);
}

svg .icon-fill {
  fill: var(--icon-fill);
}

svg .webdesignby-fill1 {
  fill: var(--icon-webdesignby-fill2);
}

svg .webdesignby-fill2 {
  fill: var(--icon-webdesignby-fill1);
}

svg .webdesignby-fill3 {
  fill: var(--icon-webdesignby-fill3);
}

/* --- Header --- */
#header {
  background-color: var(--header-bg);
}

#header.top {
  width: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  overflow: visible;
  z-index: 1001;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.666);
  background-color: var(--header-bg-top);
}

#header > .container {
  display: flex;
  padding: 0px;
  width: 100%;
  max-width: var(--xxlg-width);
}

#logo-header .d {
  fill: var(--logo-fill);
}

#logo-header .logo-blue {
  display: none;
}

#header .logo-container .logo {
  width: 188px;
  height: auto;
  padding: 1.5rem 0 1rem 1rem;
  margin: 0px auto;
}

#header .logo-container .logo img {
  width: 100%;
  height: auto;
  display: block;
}

#header .my-account-container {
  flex: 1 0;
  display: flex;
  justify-content: flex-end;
  position: relative;
  margin: 0 4.5rem 0 0;
}

#header .my-account-container .my-account {
  flex: 0 65%;
  display: table;
}

#header .my-account-container .appearance {
  flex: 0 1;
  display: table;
}

#header .my-account-container .appearance .toggle-appearance-container {
  padding: 1.55rem 0 0 1rem;
}

#header .my-account-container .appearance .toggle-appearance-container .toggle-appearance {
  border-radius: 9999px;
}

#header .my-account-container .appearance .toggle-appearance-container .toggle-appearance.is-ready {
  display: flex;
  align-items: center;
  justify-content: center;
}

#header .my-account-container .appearance .toggle-appearance-container .toggle-appearance .toggle-appearance-icon {
  display: none;
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: relative;
}

#header .my-account-container .appearance .toggle-appearance-container .toggle-appearance.is-dark #toggle-sun {
  display: block;
}

#header .my-account-container .appearance .toggle-appearance-container .toggle-appearance.is-light #toggle-moon {
  display: block;
}

#header .my-account-container .my-account .log-in {
  padding: 1.44rem 0 0 0;
  text-align: center;
  display: none;
}

#header .my-account-container .my-account .log-in a.btn.btn-log-in {
  padding: 0.333rem 1rem 0.333rem 1rem;
  background-color: var(--pale-blue);
  color: var(--charcoal);
  text-decoration: none;
  border-radius: 0.66rem;
  font-family: var(--manrope);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.888rem;
}

#header .my-account .account-avatar {
  width: 40px;
  height: 40px;
  padding: 1rem 0 0 0;
}

#header .my-account .account-avatar a {
  display: block;
  width: 100%;
  height: 100%;
}

#header .navbar {
  flex: 0 1;
  z-index: 1000;
  padding: 1rem 0 1rem 0;
  display: none;
  font-family: var(--manrope);
  font-weight: var(--navbar-font-weight);
  font-size: var(--navbar-font-size);
  text-transform: uppercase;
}

#header .navbar a {
  color: var(--navbar-text);
  text-decoration: none;
}

#header .navbar ul {
  width: 90%;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: space-evenly;
  padding: 0 0 0 0;
  margin: 0px auto;
}

#header .navbar .active > a {
  font-weight: 400;
  color: var(--navbar-active-text);
}

#header .navbar .sub-container {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  min-width: 266px;
}

#header .navbar ul.sub {
  background-color: var(--submenu-bg);
  display: block;
  text-align: left;
  width: 100%;
  padding: 1rem 0 0.222rem 0;
}

#header .navbar ul.sub li {
  margin: 0 0 1rem 0;
  padding: 0 1rem 0 1rem;
}

#header .navbar ul.sub a {
  font-size: 1rem;
}

#header .navbar > ul > li {
  width: 100%;
  position: relative;
  text-align: left;
}

#header .navbar > ul > li > a {
  display: inline-block;
  padding: 0.666rem 1rem 0.666rem 1rem;
}

#header .navbar > ul > li.has-dropdown > a {
  border-radius: 8px 8px 0 0;
}

#header .navbar > ul > li.has-dropdown:hover a {
  background-color: var(--submenu-bg);
}

#header .navbar > ul > li.has-dropdown:hover .sub-container {
  display: table;
}

#nav-mobile.open .menu-mobile {
  display: block;
}

#nav-mobile.open .mobile-close {
  display: block;
}

#nav-mobile.open .mobile-toggle {
  display: none;
}

#nav-mobile.open .nav-mobile-overlay {
  display: block;
}

#nav-mobile .mobile-toggle {
  height: 40px;
  width: 40px;
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: block;
}

#nav-mobile .mobile-toggle .toggle-icon {
  width: 100%;
  height: 100%;
  position: relative;
}

#nav-mobile .mobile-toggle svg {
  width: 100%;
  height: 100%;
}

#nav-mobile .mobile-toggle .toggle-icon .d {
  fill: var(--black);
}

#nav-mobile .mobile-toggle .toggle-icon .e {
  fill: var(--pale-blue);
  stroke: #ffb3e6;
  stroke-miterlimit: 10;
}

#nav-mobile .mobile-toggle .toggle-label {
  text-transform: uppercase;
  font-size: 11px;
  text-align: center;
  font-weight: 600;
}

#nav-mobile .mobile-close {
  height: 40px;
  width: 40px;
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 101;
  display: none;
}

#nav-mobile .mobile-toggle .d {
  fill: var(--rose-pink);
  stroke-width: 0px;
}

#nav-mobile .mobile-close .d {
  fill: var(--black);
}

#nav-mobile .mobile-close .d, #nav-mobile .mobile-close .e {
  stroke-width: 0px;
}

#nav-mobile .mobile-close .e {
  fill: var(--pale-blue);
}

#mobile-menu {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--mobile-menu-bg);
  padding: 0.66rem 0 2rem 0;
  z-index: 101;
  min-width: 100%;
}

#mobile-menu .my-account .log-in {
  margin: 0 0 0 1rem;
}

.menu-mobile {
  display: none;
}

.menu-mobile .sub-container {
  display: none;
}

.menu-mobile li.open > .sub-container {
  display: block;
}

.menu-mobile .chevron {
  display: inline-block;
  height: 10px;
  width: 20px;
}

.menu-mobile .chevron svg {
  transition: transform 0.2s ease;
}

.menu-mobile li.open .chevron svg {
  transform: rotate(180deg);
}

.menu-mobile a {
  text-decoration: none;
}

.menu-mobile ul {
  list-style-type: none;
  margin: 1rem 0px 0px 1rem;
  padding: 0px;
}

.menu-mobile ul li a,
.menu-mobile ul li .submenu-toggle {
  color: var(--navbar-text);
  font-size: 1.111rem;
  display: block;
  padding: 0.33rem 0.33rem 0.33rem 0.66rem;
  cursor: pointer;
}

.menu-mobile ul li .submenu-toggle .d {
  fill: var(--navbar-text);
}

.menu-mobile > ul > li {
  margin-bottom: 1.333rem;
}

.menu-mobile > ul > li > ul {
  margin: 0.5rem 0 0 0;
  display: none;
}

.menu-mobile > ul > li.open > ul {
  display: block;
}

.menu-mobile > ul > li > ul > li {
  margin-bottom: 0.5rem;
}

.menu-mobile ul.sub {
  padding: 1rem;
  background-color: var(--mobile-menu-sub-bg);
}

.nav-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: none;
}

.desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-only {
    display: block;
  }
  #header {
    padding: 0 0 0.444rem 0;
  }
  #header > .container {
    padding: 1.33rem 0 1.33rem 0;
  }
  #header .logo-container {
    flex: 0 16%;
  }
  #header .logo-container .logo {
    width: 244px;
    margin: 0px 0px;
    padding: 1rem 1rem 1rem 1rem;
  }
  #header .navbar {
    display: block;
    flex: 0 1 60%;
  }
  #nav-mobile .mobile-toggle,
  #nav-mobile.open .mobile-close,
  #nav-mobile.open .mobile-toggle,
  #nav-mobile .mobile-toggle,
  #nav-mobile.open .menu-mobile,
  #nav-mobile.open .nav-mobile-overlay {
    display: none;
  }
  #logo-header .logo-white {
    display: none;
  }
  #logo-header .logo-blue {
    display: block;
  }
  #header .my-account-container {
    display: flex;
    margin: 0 0 0 0;
    flex: 1 0 24%;
  }
  #header .my-account-container .my-account .log-in {
    display: block;
  }
  #header .my-account-container .appearance .toggle-appearance-container {
    margin: 0 1rem 0 0;
  }
}
/* --- Main Content --- */
#main {
  padding: 0 0 0 0;
  flex: 1;
}

#main-content {
  padding: 0 0 0 0;
}

#main-content .page-section {
  padding: 0 0 1rem 0;
  margin: 0 0 1rem 0;
  line-height: 1.666;
}

#main-content .page-section.section-breadcrumbs {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  background-color: var(--breadcrumbs-bg);
}

ol.breadcrumb, ul.breadcrumb {
  list-style-type: none;
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin: 0 0 0 0;
  display: table;
}

ol.breadcrumb li, ul.breadcrumb li {
  display: inline-block;
  color: var(--breadcrumbs-text);
  font-weight: 200;
}

ol.breadcrumb li a, ul.breadcrumb li a {
  color: var(--breadcrumbs-text);
  font-weight: 600;
}

ol.breadcrumb li .sep, ul.breadcrumb li .sep {
  display: inline-block;
  padding: 0 0.666rem 0 0.333rem;
  color: var(--breadcrumbs-text);
}

#main-content .page-section.section-services {
  padding: 0 0 0 0;
}

#main-content .page-section .container {
  max-width: var(--xlg-width);
  margin: 0px auto;
}

#main-content .page-section.section-page-title {
  background-color: var(--page-title-bg);
  color: var(--page-title-text);
  margin: 0 0 2em 0;
  padding: 2em 0 2em 0;
}

#main-content .page-section.section-page-title h1 {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  color: var(--page-title-text);
}

#main-content .page-section.section-service-summary.has-content {
  padding: 0.333rem 1rem 1rem 1rem;
}

#main-content .page-section.section-service-summary.no-content {
  padding: 2rem 1rem 1rem 1rem;
}

#main-content .page-section.section-service-summary {
  padding: 1rem 1rem 1rem 1rem;
}

#main-content .page-section.section-service-summary .container,
#main-content .blog-post-summary {
  background: var(--card-bg-1);
  border-radius: 1.666rem;
}

#main-content .blog-post-summary .post-title {
  font-size: 1.25em;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

#main-content .page-section.section-service-summary .container .container-inner, #main-content .blog-post-summary .post-item-container {
  padding: 1rem 1rem 1rem 1rem;
}

#main-content .page-section.section-service-summary h2 a {
  color: var(--heading-link-color);
}

#main-content .page-media .media-item .thumbnail-caption {
  text-align: center;
  padding: 3px 0 3px 0;
  margin: 0 0 2rem 0;
}

#main-content .blog-post-summary .post-item-container .post-thumbnail-inner {
  display: block;
  max-width: 128px;
  margin: 0px auto;
}

#main-content .blog-post-summary .post-item-container .post-title,
#main-content .blog-post-summary .post-item-container .post-date,
#main-content .blog-post-summary .post-item-container .post-excerpt,
#main-content .blog-post-summary .post-item-container .post-read-more {
  max-width: 512px;
  margin: 0 auto;
}

#main-content .blog-post-summary .post-item-container .post-title,
#main-content .blog-post-summary .post-item-container .post-date {
  text-align: center;
}

#main-content .blog-post-summary .post-item-container .post-date,
#main-content .blog-post-summary .post-item-container .post-excerpt,
#main-content .blog-post-summary .post-item-container .post-read-more {
  margin: 0.666rem 0 0 0;
}

#main-content .blog-post-summary .post-item-container .post-read-more {
  padding: 0.333rem 0 0.333rem 0;
}

#main-content .blog-post-summary .post-item-container .post-excerpt {
  text-align: justify;
}

@media (min-width: 512px) {
  #main-content .blog-post-summary {
    margin: 0 0 3.333rem 0;
  }
  #main-content .blog-post-summary .post-item-container .post-excerpt {
    text-align: left;
  }
  #main-content .blog-post-summary .post-item-container .post-title {
    text-align: left;
  }
  #main-content .blog-post-summary .post-item-container .post-title,
  #main-content .blog-post-summary .post-item-container .post-date,
  #main-content .blog-post-summary .post-item-container .post-excerpt,
  #main-content .blog-post-summary .post-item-container .post-read-more {
    max-width: 100%;
    text-align: left;
  }
  #main-content .blog-post-summary .post-item-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
  }
  #main-content .blog-post-summary .post-item-container .post-thumbnail {
    flex: 0 0 128px;
  }
  #main-content .blog-post-summary .post-item-container .post-thumbnail-inner {
    display: block;
    padding: 0 0.333rem 0 0;
  }
  #main-content .blog-post-summary .post-item-container .post-info {
    flex: 1 1 auto;
  }
  #main-content .blog-post-summary .post-item-container .post-excerpt {
    text-align: left;
  }
}
@media (min-width: 1024px) {
  #main-content {
    font-size: 1.333rem;
    font-weight: 200;
  }
  #footer {
    font-size: 1.111rem;
  }
  h1.page-title {
    font-size: 1.777em;
    font-weight: 400;
  }
  p.page-subtitle {
    font-size: 1.222em;
    margin: 1rem 0 0 0;
  }
  #main-content .blog-post-summary {
    font-weight: 400;
  }
  #main-content .page-media {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }
  #main-content .page-media .media-item .thumbnail-container {
    position: relative;
    height: 266px;
    width: 100%;
  }
  #main-content .page-media .media-item .thumbnail-caption {
    margin: 0 0 0 0;
  }
  #main-content .page-media .media-item .thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
#main-content .featured-image-desktop {
  display: none;
}

@media (min-width: 1024px) {
  #main-content .featured-image-mobile {
    display: none;
  }
  #main-content .featured-image-desktop {
    display: block;
  }
}
/* --- Posts --- */
@media (min-width: 1024px) {
  .post-item .post-item-container {
    display: flex;
  }
  .post-item .post-thumbnail {
    flex: 0 0 40%;
    margin: 0 1rem 0 0;
  }
  .post-item .post-info {
    flex: 1 1 auto;
  }
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay .popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white);
  padding: 1rem;
}

.featured-image-container {
  max-width: 1440px;
  margin: 0px auto 0px auto;
  padding: 0 0 0 0;
}

@media (min-width: 1024px) {
  .featured-image-container {
    padding: 1.333rem;
  }
}
/* --- Forms --- */
.form-container {
  background: var(--page-title-bg);
  border-radius: 1.666rem;
  padding: 1.666em 1em 1em 1em;
  max-width: var(--lg-width);
  margin: 0px auto;
}

.form-section.float-label .form-field.block.textarea label {
  color: var(--text-color);
  font-weight: 400;
}

.form-section.float-label .form-field.block.message {
  margin: 2rem 0 2rem 0;
}

h3.form-title {
  font-size: 1.333rem;
  font-weight: 400;
  padding: 1rem 0 0 0;
  margin: 0 0 1rem 0;
}

.form-section.float-label .form-field {
  margin: 0 0 0.5rem 0px;
  position: relative;
}

.form-section.float-label .form-field input[type=text],
.form-section.float-label .form-field input[type=email],
.form-section.float-label .form-field input[type=tel],
.form-section.float-label .form-field input[type=password] {
  display: block;
  width: 100%;
  font-family: var(--sans-regular);
  font-weight: 800;
  font-size: 1em;
  color: var(--input-text-color);
  background-color: var(--input-bg-color);
  box-sizing: border-box;
  border: none;
  border-radius: 0px;
  padding: 19px 15px 8px 8px;
}

.form-section.float-label .form-field select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 0px;
  padding: 19px 15px 8px 8px;
}

.form-section .form-field.textarea textarea {
  border: none;
  border-radius: 0px;
}

.form-section.float-label .form-field input[type=text].hidden,
.form-section.float-label .form-field input[type=email].hidden,
.form-section.float-label .form-field input[type=password].hidden {
  display: none;
}

.form-section.float-label .form-field label {
  font-size: 0.777em;
  color: var(--dark-grey);
  font-weight: 400;
  position: absolute;
  top: -0.1875em;
  left: 0.5em;
  opacity: 1;
  padding: 0 0 0 0;
}

.form-section .form-field.block label,
.form-section.float-label .form-field.block label {
  display: block;
  position: relative;
  top: 0px;
  left: 0px;
  margin: 0 0px 5px 0;
}

.form-section.float-label .form-field.label-hidden label {
  display: none;
}

.form-section.float-label .form-field.textarea label,
.form-section.float-label .form-field.radio label,
.form-section.float-label .form-field.checkbox label {
  position: relative;
  color: var(--white);
  font-weight: 800;
  font-size: 1em;
  top: auto;
  left: auto;
}

.form-section.float-label .form-field.checkbox .checkbox-container,
.form-section.float-label .form-field.radio .radio-container,
.form-section.float-label .form-field.textarea .textarea-container {
  margin: 5px 0 0 0;
}

.form-section.float-label .form-field.textarea .textarea-container textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 10rem;
  font-size: 1em;
  padding: 7px;
}

input {
  border-radius: 0px;
  border: 1px solid var(--grey);
  padding: 7px 7px;
}

input[type=text], input[type=email], input[type=tel],
input[type=password] {
  width: 100%;
  border-radius: 0px;
}

.form-group {
  margin-bottom: 1rem;
}

.form-field .form-field-error {
  display: inline-block;
  padding: 4px 8px;
  font-size: 0.85em;
  font-weight: 600;
  background-color: var(--error-bg);
  color: var(--error-txt);
}

#formContactSubmitMessage {
  display: none;
}

#formContactSubmitMessage .form-field-success {
  margin: 1rem 0 1rem 0;
  padding: 1rem;
  border: 1px solid var(--green);
}

#formContactSubmitMessage.active {
  display: table;
}

/* --- Footer --- */
#footer {
  clear: both;
}

#footer .footer-bottom {
  background-color: var(--footer-bottom-bg);
  color: var(--footer-bottom-text);
  padding: 1rem 0 1rem 0;
  text-align: center;
  font-size: 0.8125em;
}

#footer .footer-bottom .footer-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.333rem 0 0.333rem 0;
  padding: 0.333rem 0 0.333rem 0;
}

/* --- Misc. --- */
.recaptcha-disclaimer {
  font-size: 0.8125em;
}

.grecaptcha-badge {
  opacity: 0;
}

.ajax-loader {
  display: flex;
  justify-content: left;
  align-items: center;
}

.ajax-loader .loader-icon {
  flex: 0 0 15px;
  padding: 5px 5px 0 0;
}

/* --- 404 Page --- */
.error-404 #main-content {
  text-align: center;
}