@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
  --button-teal-color: #21A888;
  --button-teal-color-darker: #218060;
  --accent-color: #219878;
  --accent-color-hover: #24BF9C;
  --highlight-color: #499879;

  --background-color: #FFFFFF;
  --gray-ultralight: #FBFBFB;
  --gray-superlight: #EEF4F2;
  --gray-lightest: #ECF0EE;
  --gray-lighter: #D8E1DC;
  --gray-light: #DDDDDD;
  --gray: #ACAEAD;
  --gray-dark: #999999;
  --gray-darker: #3F4342;
  --gray-darkest: #2B2F2E;
  --gray-superdark: #202423;

  --section-dark: #202423;
  --section-dark-link: #DDDDDD;

  --error-color: #FF4141;
  --success-color: #40F056;
  --avatar-default-color: #81A198;

  --cke-marker-primary-color: #FFD6D6;
  --cke-marker-primary-background-color: #FF9F9F;
  --cke-marker-secondary-color: #FFEA9F;

  --primary-font: 'Open Sans', sans-serif;
  --secondary-font: 'Roboto', sans-serif;
  --site-padding: 18px;
  --menu-item-gap: 1.5em;
  --header-height: 70px;
  --invert-filter: none;
}

html[data-theme="dark"] {
  --background-color: #1A1A1A;
  --gray-ultralight: #1D1F1F;
  --gray-superlight: #252828;
  --gray-lightest: #3B3F3F;
  --gray-lighter: #505050;
  --gray-light: #707070;
  --gray: #A6A6A6;
  --gray-dark: #D1D1D1;
  --gray-darker: #E9E9E9;
  --gray-darkest: #F7F7F7;
  --gray-superdark: #FBFBFB;

  --highlight-color: #3FAE91;
  --accent-color-hover: #26A287;

  --invert-filter: invert(1);
}

html.cms-toolbar-expanded #header {
  top: 46px;
}

html.modal-open {
  overflow: hidden;
}

body {
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--gray-darker);
  background-color: var(--background-color);
  margin-top: var(--header-height);
  text-wrap: pretty;
}

strong {
  font-weight: 600;
}

p {
  margin: 1.5em 0;
  line-height: 1.85em;
}

p.highlight {
  font-family: var(--secondary-font);
  font-weight: 400;
  color: var(--gray-superdark);
  line-height: 1.3em;
  font-size: 1.4em;
  padding: 8px 12px;
  border-left: 8px solid var(--highlight-color);
}

p.highlight a {
  font-weight: 500;
}

.bi,
svg {
  vertical-align: middle;
}

blockquote {
  font-family: var(--secondary-font);
  font-weight: 300;
  font-size: 1.75em;
  line-height: 1.6em;
  color: var(--gray-darker);
  margin: 3% 0;
}

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

.connect {
  margin-top: 60px;
  text-align: center;
}

.connect .child {
  display: inline-block;
  line-height: 0;
  font-size: 0;
}

.connect .child > a {
  display: block;
  padding: 8px;
}

.connect .child > a > .bi {
  font-size: 26px;
  color: var(--section-dark-link);
}

.connect .child > a .connect-title {
  font-size: 16px;
  font-weight: 600;
  margin-left: 12px;
  display: inline-block;
  color: #FFF;
  vertical-align: middle;
}

.instagram-media {
  border: 1px solid var(--background-color) !important;
  border-radius: 0 !important;
}

.messages li {
  display: block;
  max-width: 886px;
  margin: 3% auto 0 auto;
  border: 2px solid var(--gray-darker);
  padding: 2em;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  font-size: 1em;
  line-height: 1.45em;
  color: var(--gray-darker);
  font-weight: 600;
  border-radius: 6px;
}

.messages .success {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.messages .error {
  border-color: var(--error-color);
  color: var(--error-color);
}

a {
  font-weight: 600;
  color: var(--accent-color);
  text-decoration: none;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--secondary-font);
  font-weight: 400;
  color: var(--gray-superdark);
  line-height: 1.2em;
}

h1 a, h2 a {
  font-weight: 400;
}

h3 a, h4 a, h5 a, h6 a {
  font-weight: 500;
}

h1 {
  font-size: 3.6em;
}

h2 {
  font-size: 3em;
}

h3 {
  font-size: 2em;
}

h4 {
  font-size: 1.8em;
}

h5 {
  font-size: 1.4em;
}

h6 {
  font-size: 1.2em;
}

.buttons {
  display: inline-block;
  text-align: center;
  padding: 14px 26px;
  min-width: 80px;
  max-width: 100%;
  color: #FFF;
  font-size: 1.0666em;
  font-weight: 600;
  background: var(--gray-darker);
  border: 0;
  cursor: pointer;
  border-radius: 6px;
  box-sizing: border-box;
  transition-property: background-color, border-color, color;
  transition-duration: 0.3s;
}

.buttons:hover {
  color: #FFF;
  background-color: var(--gray-darkest);
}

.buttons.button-teal {
  background-color: var(--button-teal-color);
}

.buttons.button-teal:hover {
  background-color: var(--button-teal-color-darker);
}

.buttons.button-outline {
  padding: 10px 22px;
  color: var(--gray-darker);
  border: 2px solid var(--gray-darker);
  background-color: transparent;
}

.buttons.button-outline:hover {
  color: #FFF;
  background-color: var(--gray-darker);
}

.buttons.button-teal.button-outline {
  color: var(--button-teal-color);
  border-color: var(--button-teal-color);
}

.buttons.button-teal.button-outline:hover {
  color: #FFF;
  background-color: var(--button-teal-color);
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--background-color);
  border-bottom: 1px solid var(--gray-lightest);
  z-index: 9999;
}

#header .header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--menu-item-gap);
  max-width: 1200px;
  margin: 0 auto;
  padding: 3px 12px;
}

.main-logo {
  text-transform: uppercase;
  padding: 15px 0 16px 0;
  display: inline-block;
  font-size: 1.75em;
  font-weight: 700;
  font-family: var(--secondary-font);
  letter-spacing: -3px;
  transform: rotate(-0.5deg);
  transition: color 0.2s;
}

.main-logo .logo-a {
  font-weight: 400;
}

#header .nav-wrapper {
  display: flex;
  align-items: center;
  gap: 1em;
}

#header .mainmenu {
  display: flex;
  align-items: center;
  gap: var(--menu-item-gap);
  white-space: nowrap;
}

#header .mainmenu > .child > span,
#header .mainmenu > .child > a {
  display: inline-block;
  color: var(--accent-color);
  font-weight: 400;
}

#header .mainmenu > .child > span:hover,
#header .mainmenu > .child > a:hover {
  color: var(--accent-color-hover);
  font-weight: 400;
}

#header .mainmenu > .child.child-lang {
  position: relative;
}

#header .mainmenu > .child.child-lang span,
#header .mainmenu > .child.child-lang a {
  cursor: pointer;
  font-weight: 400;
  -webkit-touch-callout: none;
  user-select: none;
}

#header .mainmenu > .child > .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 20px;
  background: var(--background-color);
  border: 1px solid var(--gray-superlight);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-sizing: border-box;
  border-top: 0;
  text-align: left;
}

#header .mainmenu > .child.submenu-active > .submenu {
  display: block;
}

#header .mainmenu > .child > .submenu > .child {
  margin: 20px 0;
}

#header .mainmenu > .child-lang > .submenu {
  left: -20px;
  transform: none;
  min-width: 80px;
}

#header .mainmenu > .child-lang > span .bi {
  margin-left: 4px;
}

#header .sidebar  {
  display: flex;
  align-items: center;
  gap: var(--menu-item-gap);
}

#header .sidebar > .child.child-profile  {
  line-height: 0;
  padding: 4px;
}

#header .sidebar > .child.child-profile img {
  width: 32px;
  height: 32px;
  border-radius: 100%;
}

#header .sidebar > .child.child-profile .profile-picture {
  display: inline-block;
  width: 32px;
  height: 32px;
  -webkit-touch-callout: none;
  user-select: none;
}

#header .sidebar > .child.child-profile .avatar-default {
  display: inline-block;
  border-radius: 100%;
  line-height: 32px;
  text-align: center;
  color: #FFF;
  font-size: 0.8em;
  background: var(--avatar-default-color);
  width: 32px;
  height: 32px;
}

#header .sidebar > .child.child-auth {
  padding: 8px 9px;
}

#header .sidebar > .child.child-auth > span {
  display: block;
}

#header .sidebar > .child.child-auth .bi-person-circle  {
  font-size: 1.5em;
  color: var(--accent-color);
}

#header .sidebar > .child.child-auth:hover .bi-person-circle  {
  color: var(--accent-color-hover);
}

#header .sidebar .child.child-theme span {
  cursor: pointer;
  user-select: none;
}

#header .sidebar .child.child-theme:hover span {
  color: var(--accent-color-hover);
}

#header #mobile-menu-toggle {
  padding: 0 2px;
}

#header #mobile-search-toggle,
#header #mobile-menu-toggle {
  display: none;
  cursor: pointer;
}

#header #mobile-search-toggle {
  padding: 7px 9px;
}

#header #mobile-search-toggle > .bi,
#header #mobile-menu-toggle > .bi {
  color: var(--accent-color);
  font-size: 2.5em;
}

#header #mobile-search-toggle > .bi {
  font-size: 1.5em;
}

#header #search {
  display: flex;
}

#header #search-query {
  display: block;
  width: 210px;
  border-radius: 18px 0 0 18px;
  outline-color: var(--accent-color);
  line-height: normal;
  font-weight: 600;
  font-family: var(--primary-font);
  padding: 8px 18px;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  background-color: transparent;
  box-sizing: border-box;
}

#header .mainmenu > .child.child-search button {
  padding: 0 16px 0 14px;
  font-size: 20px;
  background: var(--accent-color);
  color: #FFF;
  border-radius: 0 18px 18px 0;
  border: none;
  cursor: pointer;
}

#header .mainmenu > .child.child-search label {
  cursor: pointer;
}

#search-query::-webkit-input-placeholder { color: var(--accent-color); font-weight: 400; opacity: 0.8; }
#search-query::-moz-placeholder { color: var(--accent-color); font-weight: 400; opacity: 0.8; }
#search-query:-ms-input-placeholder { color: var(--accent-color); font-weight: 400; opacity: 0.8; }
#search-query:-moz-placeholder { color: var(--accent-color); font-weight: 400; opacity: 0.8; }

.scroller-items {
  max-width: 1200px;
  padding: 0 18px 4px 18px;
  margin: 0 auto 36px auto;
  display: flex;
  white-space: nowrap;
  overflow: auto;
}

.scroller-items .item {
  margin-right: 32px;
  padding-bottom: 16px;
}

.scroller-items .item.selected {
  border-bottom: 1px solid var(--accent-color);
}

.scroller-items .item:last-child {
  margin-right: 0;
}

.scroller-items .item a {
  color: var(--gray-darker);
  font-weight: 400;
}

.scroller-items .item.selected a,
.scroller-items .item a:hover {
  color: var(--accent-color);
}

#content {
  overflow: auto;
}

.discussions-form-wrapper {
  margin: 0 auto 32px auto;
  max-width: 850px;
  padding: 2.5% 18px 0 18px;
}

.discussions-feed {
  margin: 0 auto;
  max-width: 850px;
  padding: 2.5% 18px 5% 18px;
}

.discussions-feed h1, .discussions-feed h2 {
  margin: 0 0 30px 0;
  font-size: 3em;
}

.discussions-feed .post-item {
  border-top: 1px solid var(--gray-lighter);
  padding: 24px 0;
  display: flex;
}

.discussions-feed .post-item.has-image {
  min-height: 90px;
}

.discussions-feed .post-item h3 {
  font-size: 1.3em;
  line-height: 1.45em;
  margin: 0;
  color: var(--accent-color);
}

.discussions-feed .post-item h3:hover {
  color: var(--accent-color-hover);
}

.discussions-feed .post-item .post-details {
  width: 100%;
  margin-bottom: 6px;
  min-width: 0;
}

.discussions-feed .post-item .post-title {
  display: block;
}

.discussions-feed .post-item .post-user {
  display: inline-block;
  vertical-align: bottom;
  font-size: 0.96em;
  margin-right: 12px;
  margin-top: 21px;
}

.discussions-feed .post-item .post-body {
  font-size: 0.96em;
  line-height: 1.85em;
  margin-right: 12px;
  margin-top: 21px;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.discussions-feed .post-item .post-date {
  display: inline-block;
  font-size: 0.85em;
  color: var(--gray-dark);
}

.discussions-feed .post-item .post-image {
  max-width: 90px;
  margin-left: 24px;
  line-height: 0;
}

.discussions-feed .post-item .post-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.post-message-wrapper {
  padding: 2em 0;
  margin-bottom: 2em;
  background: var(--gray-lightest);
  border-bottom: 1px solid var(--gray-lighter);
}

.post-message-wrapper .post-message {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 18px;
}

.post-message-wrapper .post-message h2 {
  margin: 0;
}

.post-message-wrapper .post-message p {
  margin: 1em 0;
}

.post-message-wrapper .post-message *:last-child {
  margin-bottom: 0;
}

.post-message-wrapper .post-message .post-status {
  color: var(--gray);
  font-size: 0.8em;
}

.article {
  padding: 3% 18px calc(3% + 18px) 18px;
  max-width: 1200px;
  margin: 0 auto;
}

.article:after {
  content: "";
  display: table;
  clear: left;
}

.article article {
  float: left;
  width: 770px;
  padding-right: 80px;
}

article ul:not([class]),
section .text ul:not([class]),
.cke_editable ul:not([class]) {
  list-style: square;
  padding-left: 40px;
  margin: 3% 0;
}

.cke_editable li:not([class]) {
  line-height: 1.85em;
}
section li:not([class]) {
  line-height: 1.85em;
}
article li:not([class]) {
  line-height: 1.85em;
}

.article iframe {
  width: 100%;
  border: 0;
}

.article img {
  max-width: 100%;
  height: auto;
}

.article .article-author {
  display: block;
  margin: 8px 0;
  font-size: 0.83em;
  min-height: 40px;
}

.article .author-about {
  margin: 8% 0 4% 0;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2em;
  align-items: center;
}

.article .author-about .author-photo {
  max-width: 100%;
  border-radius: 100%;
}

.article .author-about .avatar-default {
  display: inline-block;
  border-radius: 100%;
  line-height: 200px;
  text-align: center;
  color: #FFF;
  background: var(--avatar-default-color);
  width: 200px;
  font-size: 80px;
  -webkit-touch-callout: none;
  user-select: none;
}

.article .profile-compact .author-about {
  grid-template-columns: 100px 1fr;
  gap: 1.5em;
}

.article .profile-compact .author-about .avatar-default {
  line-height: 100px;
  width: 100px;
  font-size: 40px;
  height: 100px;
}

.article .profile-compact .author-about .author-content h1 {
  margin: 0;
}

.article .author-about .author-content h3 {
  margin: 23px 0;
  font-weight: 300;
}

.article .author-about .author-content h1 {
  margin-bottom: 23px;
  font-weight: 500;
  font-size: 2.5em;
}

.article .author-about .author-content .author-name {
  font-weight: 500;
  display: block;
  font-size: 1.2em;
  line-height: 1.3em;
  color: var(--gray-superdark);
}

.article .author-about .author-content a.author-name:hover {
  color: var(--accent-color);
}

.article .article-author .post-name {
  display: block;
  color: var(--gray-darker);
  line-height: 1.52em;
}

.article .article-author .post-name a {
  color: var(--gray-darker);
}

.article .article-author .post-name a:hover {
  color: var(--accent-color);
}

.article .article-author .post-unpublished {
  color: var(--error-color);
  font-weight: 600;
}

.article .article-author .post-featured {
  display: inline-block;
  vertical-align: middle;
  font-weight: 600;
  color: var(--accent-color);
  margin-right: 6px;
}

.article .article-author .post-featured-text {
  display: inline-block;
  vertical-align: middle;
}

.article .article-author .post-featured > .bi {
  vertical-align: middle;
  margin-left: -1px;
  font-size: 20px;
  line-height: 1em;
}

.article .article-author .post-readtime {
  margin-right: 6px;
}

.article .article-author .post-updated {
  font-weight: 600;
}

.article .article-author .post-date {
  display: block;
  color: var(--gray-dark);
  margin-right: 6px;
  line-height: 1.52em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article .article-author .post-avatar {
  float: left;
  display: block;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  -webkit-touch-callout: none;
  user-select: none;
}

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

.article .article-author .post-avatar .avatar-default {
  display: block;
  border-radius: 100%;
  line-height: 40px;
  text-align: center;
  color: #FFF;
  font-size: 1.1em;
  background: var(--avatar-default-color);
}

.article .article-author .post-avatar .avatar-image {
  border-radius: 100%;
  width: 40px;
  height: 40px;
}

.article .article-main-image img {
  max-width: 100%;
  height: auto;
}

.article .article-main-image .photo-credit {
  float: right;
  margin-top: -29px;
  margin-right: 12px;
  font-size: 0.7em;
}

.article .article-main-image .photo-credit span,
.article .article-main-image .photo-credit a {
  opacity: 0.7;
  color: #FFF;
  font-weight: 400;
  text-shadow: 1px 1px 5px #000;
}

.article .article-main-image .photo-credit a:hover {
  opacity: 1;
}

.article .accordion {
  margin-bottom: 3%;
  padding: 0
}

.cke_editable h1,
.article h1 {
  font-size: 3em;
  font-weight: 300;
  margin: 0 0 2% 0;
}

.cke_editable h2,
.article h2 {
  font-size: 2.2em;
  margin: 8% 0 4% 0;
}

.cke_editable h3,
.article h3 {
  font-weight: 500;
  font-size: 1.4em;
  line-height: 1.4em;
}

.cke_editable h4,
.article h4 {
  font-weight: 500;
  font-size: 1.1em;
}

.cke_editable h5,
article h5 {
  padding: 8px 12px;
  border-left: 8px solid var(--highlight-color);
}

.cke_editable small,
article small {
  font-size: 0.82em;
  line-height: 1.75em;
  opacity: 0.86;
  display: block;
}

.cke_editable .photo-caption,
.article article .photo-caption {
  opacity: 1;
  color: var(--gray);
  text-align: center;
  margin-bottom: 6%;
  padding: 0 8px;
}

.article article .photo-caption a {
  color: var(--gray);
  font-weight: 400;
}

.article article .photo-caption a:hover {
  color: var(--accent-color);
}

.article .article-sidebar {
  float: left;
  max-width: 300px;
}

.article-sharing {
  margin-top: 12px;
}

.article-sharing .child {
  display: inline-block;
  vertical-align: middle;
  margin: 6px 32px 6px 0;
}

.article-sharing .child:last-child {
  margin-right: 0;
}

.article-sharing .child .bi {
  margin-right: 8px;
}

.article-sharing .child .child-name {
  display: inline-block;
  vertical-align: middle;
}

.article-sharing .child .child-name:hover {
  color: var(--accent-color);
}

.article-sharing .child > .action {
  font-weight: 600;
  cursor: pointer;
  color: var(--gray-darker);
}

.article-sharing .child > .action:hover {
  color: var(--accent-color);
}

.article-sharing .user-edit > .buttons {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 1em;
}

.article-blog .article-author {
  border-bottom: 1px solid var(--gray-lightest);
  padding-bottom: 12px;
  font-size: 0.83em;
  margin-top: 14px;
}

.article .user-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 18px;
  margin: 4% 0 8% 0;
}

.article .user-roles .user {
  display: flex;
  width: calc(50% - 18px);
  gap: 18px;
}

.article .user-roles .user-photo {
  width: 80px;
  height: 80px;
  border-radius: 100%;
}

.article .user-roles .user-detail h3 {
  margin: 15px 0 0 0;
  font-size: 1.2em;
}

.article .user-roles .user:hover .user-detail h3 {
  color: var(--accent-color)
}

.article .user-roles .user-detail .user-role {
  display: block;
  color: var(--gray-darker);
  font-weight: 400;
}

.article .profile {
  float: left;
  padding: 0;
}

.profile .author-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  position: relative;
  font-size: 0.9em;
  cursor: default; /* Default cursor */
}

.profile .author-description.expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.profile .author-description.truncated {
  cursor: pointer; /* Only show pointer when truncated */
}

.profile .author-description::after {
  font-family: "bootstrap-icons", sans-serif;
  content: "\F282";
  position: absolute;
  bottom: 0;
  opacity: 1;
  text-align: right;
  width: 100%;
  left: 0;
  font-size: 18px;
  font-weight: 600;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, var(--background-color) 0%, transparent 100%)
}

.profile .author-description.expanded::after,
.profile .author-description:not(.truncated)::after {
  content: "";
  opacity: 0;
}

#profile-picture {
  cursor: pointer;
  user-select: none;
}

#profile-picture-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 99999;
}

#profile-picture-modal-img {
  max-width: 100%;
  max-height: 100%;
  user-select: none;
}

#profile-picture-modal-close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 32px;
  color: #FFF;
  cursor: pointer;
}

.article-discussion .article-sharing {
  margin-bottom: 6%;
}

.article-discussion .article-author .post-date {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0;
}

.article .article-author {
  margin-top: 2%;
}

.article-word .article-author .post-updated {
  font-weight: 400;
}

.article-word h1 {
  margin-bottom: 0;
}

.article-word .word-subtitle {
  font-style: italic;
  color: var(--gray-darker);
  margin-top: 0;
}

.article-word .word-subtitle .bi {
  color: var(--accent-color);
  font-size: 20px;
  vertical-align: bottom;
}

.tags {
  margin: 6% 0 0 0;
  font-size: 0;
}

.tags .tag {
  display: inline-block;
  margin-right: 12px;
  margin-bottom: 14px;
}

.tags .tag > span,
.tags .tag > a {
  display: block;
  border: 1px solid var(--button-teal-color-darker);
  color: var(--button-teal-color-darker);
  font-size: 15px;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 6px;
  transition-property: background-color, color;
  transition-duration: 0.2s;
}

.tags .tag > a:hover {
  background-color: var(--button-teal-color-darker);
  color: #FFF;
  font-weight: 400;
}

.article-sidebar h2 {
  margin-top: 48px;
}

.related-post .post {
  margin-bottom: 28px;
}

.related-post .post .post-image > img {
  max-width: 100%;
  height: auto;
}

.related-post .post .post-title {
  display: block;
  padding: 9px 0;
  line-height: 1.85em;
}

.related-post .post .post-title > h3 {
  font-size: 1.2em;
  margin: 0;
  color: var(--gray-superdark);
}

.related-post .post .post-title:hover > h3 {
  color: var(--accent-color);
}

.related-advice {
  padding: 0;
}

.related-advice.discussions-feed {
  padding-bottom: 0;
}

.related-advice .post-item:last-child {
  padding-bottom: 0;
}

.related-advice .post-title h3 {
  font-size: 1.2em;
  color: var(--gray-superdark);
}

.related-advice .post-title:hover > h3 {
  color: var(--accent-color);
}

.related-advice .post-item .post-user {
  display: block;
  margin: 4px 0 0 0;
  font-size: 0.85em;
  color: var(--gray-dark);
  line-height: 1.4em;
}

.related-word .word {
  border-left: 6px solid var(--highlight-color);
  margin-bottom: 12px;
}

.related-word .word .word-title {
  display: block;
  padding: 9px;
  line-height: 1.85em;
}

.related-word .word .word-title > h3 {
  font-size: 1.2em;
  margin: 0;
}

.related-word .word .word-title:hover > h3 {
  color: var(--accent-color);
}

/* Profile */
.profile-page .listing {
  padding-top: 0;
}

.profile-page .listing .discussions-feed {
  max-width: 1200px;
  padding-top: 0;
}

.profile-page .tab-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px calc(36px + 3%) 18px;
}

.profile-page .profile-body {
  max-width: 770px;
}

.profile-page .profile-body small {
  display: block;
  color: var(--gray-dark);
  font-size: 0.82em;
  margin: 3% 0;
  line-height: 1.6em;
}

/* Blog Listing */

.listing {
  padding: 3% 0 calc(18px + 3%) 0;
}

.listing h1 {
  text-align: center;
}

.listing h1 a,
.listing h2 a {
  color: var(--gray-superdark);
}

.listing h1 a:hover,
.listing h2 a:hover {
  color: var(--accent-color);
}

.listing .view-all {
  text-align: right;
  display: block;
  margin-top: 18px;
}

.listing header {
  padding: 0 18px;
  text-align: center;
  max-width: 770px;
  margin: 0 auto;
}

.listing header h1 {
  margin: 0 0 3% 0;
  font-size: 3em;
}

.blog-listing {
  clear: both;
  padding: 0 18px calc(18px + 3%) 18px;
  max-width: 1200px;
  margin: 0 auto;
}

.blog-listing h1,
.blog-listing h2 {
  margin: 0 0 3% 0;
  font-size: 3em;
}

.blog-listing .blog-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.blog-listing .blog {
  position: relative;
  flex: 1 1 calc(33.3333% - 12px);
  max-width: calc(33.3333% - 12px);
  min-width: 0;
  box-sizing: border-box;
  background-color: var(--gray-superlight);
}

.blog-listing .blog-content {
  padding: 18px 18px 36px 18px;
}

.blog-listing .blog h3 {
  margin: 0;
  font-size: 1.5em;
  line-height: 1.25em;
  color: var(--accent-color);
}

.blog-listing .blog h3:hover {
  color: var(--accent-color-hover);
}

.blog-listing .blog p {
  font-weight: 400;
  color: var(--gray-darker);
  margin: 3em 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.blog-listing .blog img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-listing .blog .view-more {
  position: absolute;
  right: 18px;
  bottom: 18px;
  color: var(--accent-color);
}

.blog-listing .blog .view-more:hover {
  color: var(--accent-color-hover);
}

/* Latest Posts */
.latest-posts h2 {
  margin: 48px 0 30px;
}

/* Word Listing */
.word-listing {
  clear: both;
  padding: 0 18px 4% 18px;
  max-width: 1200px;
  margin: 0 auto;
}

.word-listing h1,
.word-listing h2 {
  margin: 0 0 3% 0;
  font-size: 3em;
}

.word-listing .word-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.word-listing .word {
  position: relative;
  flex: 1 1 calc(33.3333% - 12px);
  max-width: calc(33.3333% - 12px);
  min-width: 0;
  box-sizing: border-box;
  background-color: var(--gray-superlight);
  padding: 18px 18px 36px 18px;
}

.word-listing .word .tags {
  margin: 0 0 18px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.word-listing .word .tags .tag {
  margin: 0 10px 10px 0;
}

.word-listing .word .tags .tag > span {
  padding: 6px 10px;
  font-size: 13px;
}

.word-listing .word .view-more {
  position: absolute;
  right: 18px;
  bottom: 18px;
  color: var(--accent-color);
}

.word-listing .word .view-more:hover {
  color: var(--accent-color-hover);
}

.word-listing .word p {
  font-weight: 400;
  color: var(--gray-darker);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.word-listing .word .word-subtitle {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
  color: var(--accent-color);
  font-size: 0.9em;
  margin-top: 0;
}

.word-listing .word .word-subtitle .bi {
  color: var(--accent-color);
  font-size: 1.3em;
  vertical-align: bottom;
}

.word-listing .word h3 {
  margin: 0;
  font-size: 1.5em;
  line-height: 1.25em;
  color: var(--accent-color);
}

.word-listing .word > h3:hover {
  color: var(--accent-color-hover);
}

.word-listing .word blockquote {
  font-size: 1.1em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.word-listing .word .word-photos {
  display: flex;
  margin-bottom: 18px;
}

.word-listing .word .word-photos .word-photo {
  flex: 1 1 20%;
  max-width: 20%;
  padding-right: 10px;
}

.word-listing .word .word-photos .word-photo:last-child {
  padding-right: 0;
}

.word-listing .word .word-photos img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  transition: filter 350ms;
}

.word-listing .word .word-photos .word-photo:hover img {
  filter: brightness(.78);
}

/* Photo List */
.photo-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  overflow: hidden;
  max-width: 1500px;
  gap: calc(var(--site-padding) / 4 );
  padding: calc(var(--site-padding) / 4 );
  box-sizing: border-box;
  margin: 0 auto;
}

.blog-listing .photo-list {
  padding: 0;
}

.photo-list .photo {
  aspect-ratio: 1 / 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 10;
}

.photo-list .photo-object {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-list .photo::before {
  opacity: 0;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 15;
  transition: opacity 0.4s;
}

.photo-list .photo:hover::before {
  opacity: 1;
}

.photo-list .photo::after {
  display: none;
  font-family: "bootstrap-icons", sans-serif;
  content: "\F62C";
  position: absolute;
  bottom: 9px;
  right: 9px;
  z-index: 25;
  color: rgba(255, 255, 255, 0.89);
  font-size: 1.2em;
  font-weight: normal;

  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.photo-list .photo:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.photo-list .photo .title {
  position: absolute;
  bottom: 0;
  z-index: 20;
  color: rgba(255, 255, 255, 0.89);
  display: block;
  width: 100%;
  padding: 0 36px;
  margin: 62px 0;
  box-sizing: border-box;
  text-align: center;
  font-size: 1em;
  font-weight: 300;
  line-height: 1.2em;
  text-wrap: pretty;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;

  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.photo-list .photo:hover .title {
  opacity: 1;
  transform: translateY(0);
}

.photo-list .photo .photo-article {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 25;
  color: rgba(255, 255, 255, 0.89);
  font-size: 0.8em;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  width: 100%;
  padding: 0 18px 18px 36px;
  box-sizing: border-box;

  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.photo-list .photo:hover .photo-article {
  opacity: 1;
  transform: translateY(0);
}

.photo-list .photo .photo-article-title {
  display: inline-block;
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.3em;
}

.photo-list .photo .photo-article .bi {
  display: inline-block;
  font-size: 1.2em;
  margin-left: 4px;
}

.photo-list .photo:hover .photo-article .bi {
  animation: arrowSlide 1.5s ease-in-out infinite;
}

@keyframes arrowSlide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Sign In */
.modal-page body {
  margin: 0;
  background-color: var(--gray-lightest);
}

.modal-page .modal {
  display: flex;
  position: relative;
  background-color: transparent;
}

.modal {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.69);
  padding: var(--site-padding);
  box-sizing: border-box;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 10000;
}

.modal .lds-ellipsis {
  color: var(--accent-color);
}

.modal .messages {
  font-size: 1em;
}

.modal .modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2em;
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0;
  width: 40px;
  height: 40px;
  color: var(--gray-dark);
  transition: color 0.3s;
  line-height: 40px;
  display: flex;
  justify-content: center;
}

.modal .modal-close:hover {
  color: var(--gray-superdark);
}

.modal .modal-back {
  display: none;
  position: absolute;
  top: 12px;
  cursor: pointer;
  padding: 0;
  border: 0;
  color: var(--gray-dark);
  left: 18px;
  height: 34px;
  background: none;
  font-weight: 600;
  transition: color 0.3s;
}

.modal .modal-back .bi {
  vertical-align: baseline;
}

.modal .modal-back:hover {
  color: var(--gray-superdark);
}

.modal.modal-fullscreen .modal-back {
  display: inline-block;
}


.modal.modal-fullscreen {
  padding: 0;
}

.modal.modal-fullscreen .modal-wrapper {
  max-width: 2000px;
  height: 100vh;
  max-height: none;
  margin: 0;
  box-shadow: none;
}

.modal .modal-error {
  display: none;
}

.modal .modal-wrapper {
  position: relative;
  margin: auto;
  background-color: var(--background-color);
  padding: 4em calc(var(--site-padding) * 2);
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.14) 0 2px 10px;
  box-sizing: border-box;
  overflow-y: auto;
  max-height: calc(100vh - var(--site-padding) * 2);
  width: 100%;
  max-width: 480px;
}

.modal h1 {
  font-size: 1.6em;
  text-align: center;
  text-wrap: balance;
  max-width: 372px;
  margin-left: auto;
  margin-right: auto;
}

.modal h1:first-child {
  margin-top: 0;
  margin-bottom: 1.25em;
}

.modal .buttons {
  font-size: 1em;
}

.modal .main-logo {
  font-size: 1.5em;
  position: absolute;
  top: 16px;
  left: 26px;
  padding: 0;
}

.modal .forms .errorlist {
  text-align: left;
}

#id_verification_code {
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--accent-color);
}

#id_verification_code::-webkit-input-placeholder { text-transform: none; font-weight: normal; letter-spacing: normal }
#id_verification_code::-moz-placeholder { text-transform: none; }
#id_verification_code:-ms-input-placeholder { text-transform: none; }
#id_verification_code:-moz-placeholder { text-transform: none; }


/* Auth */
.auth {
  margin: 0 auto;
  max-width: 340px;
}

.auth .auth-options {
  margin-top: 2.5em;
}

.auth .form-field {
  margin-bottom: 12px;
}

.auth .forms .buttons {
  width: 100%;
  padding: 11px 14px;
  border-radius: 20px;
}

.auth .forms .buttons.button-outline {
  padding: 9px 14px;
}

.auth .auth-options .buttons + .buttons,
.auth .forms .buttons + .buttons {
  margin-top: 12px;
}

.auth .auth-options .buttons {
  display: block;
  margin: 0 auto;
  border-radius: 20px;
  border-width: 1px;
}

.auth .auth-options .buttons .bi {
  float: left;
}

.auth .separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  color: var(--gray-darker);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.auth .separator::before,
.auth .separator::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--gray-light);
}

.auth .separator:not(:empty)::before {
  margin-right: .75em;
}

.auth .separator:not(:empty)::after {
  margin-left: .75em;
}


/* Search */
.search-results {
  max-width: 1236px;
  margin: 0 auto;
}

.search-results .discussions-feed {
  max-width: none;
  padding-bottom: calc(18px + 3%);
}

.search-results .photo-list-wrapper {
  max-width: 1236px;
  margin: 0 auto;
  padding-bottom: calc(18px + 3%);
}

.search-results .photo-list-wrapper h2 {
  padding: 0 18px;
}

.search-results .photo-list {
  max-width: calc(1200px + var(--site-padding) / 4);
}

.search-results h2 {
  text-align: left;
  font-size: 2.2em;
  margin: 0 0 30px 0;
}

.search-results h1 {
  padding: 0 27px;
}

.search-results .word-listing h2,
.search-results .blog-listing h2 {
  margin-bottom: 21px;
}

.search-results .related-tags {
  max-width: 1182px;
  margin: 0 auto;
  padding: 0 27px calc(18px + 3%) 27px;
}

.search-results .related-tags .tags {
  max-width: 480px;
  margin-top: 18px;
}

.search-results .no-results {
  max-width: 850px;
}

.search-results .no-results h3 {
  font-size: 1.4em;
  margin: 36px 0 0 0;
}

.search-results .no-results h5 {
  margin: 27px 0 0 0;
}

.search-results .no-results ul:not([class]) {
  list-style: square;
  padding-left: 40px;
  margin: calc(1.5% + 18px) 0;
  line-height: 1.85em;
}

.search-results .no-results .tags {
  margin-top: 18px;
  max-width: 480px;
}

/* Pagination */

.pagination-container {
  max-width: 1050px;
  margin: 32px auto;
  text-align: center;
}

.pagination {
  display: inline-flex;
  list-style: none;
  padding: 0;
  font-size: 0;
  align-items: center;
}

.pagination-item {
  display: inline-block;
  margin: 0 2px;
  font-size: 14px;
}

.pagination-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  line-height: 1em;
  border: 1px solid transparent;
  color: var(--gray-superdark);
  text-decoration: none;
  border-radius: 50%;
}

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

.pagination-item.active .pagination-link {
  font-weight: normal;
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.pagination-prev,
.pagination-next {
  width: auto;
  min-width: 35px;
  height: 35px;
  border-radius: 0;
  display: flex;
  align-items: center;
}

.pagination-results {
  max-width: none;
  margin: 0;
  text-align: right;
}

.pagination-results .pagination-link {
  width: auto;
}

.see-more-container {
  text-align: right;
}

.see-more-container .see-more {
  font-weight: 600;
  color: var(--gray-superdark);
}

.see-more-container .see-more:hover {
  color: var(--accent-color);
}


/* Forms */
.forms .form-field-group {
  display: flex;
  gap: 24px 16px;
}

.forms .form-field {
  clear: both;
  margin-bottom: 24px;
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

.forms .form-field .field-wrapper {
  position: relative;
}

.forms .form-field .field-wrapper .field-icon {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  font-size: 1.4em;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: var(--accent-color);
  cursor: pointer;
}

.forms .form-field .field-wrapper .field-icon:hover {
  color: var(--accent-color-hover);
}

.forms .cke_contents,
.forms .form-field input,
.forms .form-field textarea,
.forms .form-field select {
  line-height: normal;
  font-weight: 400;
  font-family: var(--primary-font);
  padding: 8px 14px;
  color: var(--gray-darker);
  border: 1px solid var(--gray-dark);
  background-color: transparent;
  width: 100%;
  border-radius: 18px;
  box-sizing: border-box;
  outline-color: var(--accent-color);
}

.forms .form-field select:has(option:checked[value=""]) {
  color: var(--gray-dark);
}

.forms .form-field option {
  color: var(--gray-darker);
  background: var(--background-color);
}

.forms .form-field textarea {
  min-height: 112px;
  height: 112px;
  max-height: 224px;
  line-height: 1.65em;
  resize: none;
}

.forms button[disabled],
.forms input[disabled] {
  background-color: var(--gray) !important;
  cursor: default !important;
}

.forms button[type="submit"][disabled],
.forms input[type="submit"][disabled] {
  cursor: wait !important;
}

::-webkit-input-placeholder { color: var(--gray-dark); }
::-moz-placeholder { color: var(--gray-dark); }
:-ms-input-placeholder { color: var(--gray-dark); }
:-moz-placeholder { color: var(--gray-dark); }

.forms .form-field > label {
  display: block;
  font-family: var(--secondary-font);
  font-weight: 400;
  color: var(--gray-superdark);
  font-size: 1em;
  line-height: 1.2em;
  margin-bottom: 12px;
}

.forms .field-help {
  margin: 4px 0 14px 0;
  line-height: 1.2em;
  font-size: 0.8em;
}

.forms label:has(+ .field-help) {
  margin-bottom: 0;
}

.forms .submit-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 2em;
}

.forms .submit-buttons .button-outline {
  border-width: 1px;
  padding: 13px 24px;
}

.forms .submit-buttons div + .buttons, /* Fix for g-recaptcha inserting a new div next to the submit button */
.forms .submit-buttons .button-outline + .buttons {
  margin-left: 9px;
}

.forms .form-field.CheckboxInput input,
.forms .form-field.CheckboxInput label {
  display: inline;
  vertical-align: middle;
  width: auto;
  line-height: 1.6em;
}

.forms .form-field.CheckboxInput label {
  padding: 0 4px;
}

.forms .row.padding-small .column,
.forms .column {
  padding-top: 0;
  padding-bottom: 0;
}

.errorlist.nonfield {
  margin: 0 0 24px 0;
}

.errorlist, .successlist {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  font-weight: 600;
  color: var(--error-color);
  font-size: 0.95em;
  line-height: 1.85em;
}

.errorlist a {
  color: var(--error-color);
  font-weight: 700;
  text-decoration: underline;
}

.successlist {
  color: var(--success-color);
}

.forms .form-field .django-ckeditor-widget {
  width: 100%;
}

.forms input[name="hp_phone"] {
  float: left !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.forms input[name="hp_phone"]::placeholder {
  color: transparent;
}

.forms input[name="hp_phone"]:-ms-input-placeholder {
  color: transparent;
}

.forms input[name="hp_phone"]::-ms-input-placeholder {
  color: transparent;
}

.forms .grecaptcha-badge {
  z-index: 25;
}

.image-field-widget {
  display: grid;
  grid-template-columns: 100px auto;
  align-items: center;
  gap: 1em;
  position: relative;
}

.image-field-widget .image-preview-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 100%;
  font-size: 2.5em;
  z-index: 5;
  color: var(--gray-lighter);
  border: 2px solid var(--gray-lighter);
  box-sizing: border-box;
}

.image-field-widget .image-preview {
  border-radius: 100%;
  object-fit: cover;
  width: 2.5em;
  height: 2.5em;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}

.image-field-widget .image-preview:not([src=""]) {
  background-color: #FFF;
}

.image-field-widget .upload-button {
  width: fit-content;
  text-wrap: balance;
}

.image-field-widget .upload-button input[type="file"] {
  display: none;
}

.image-field-widget .clear-field input {
  display: none;
}

.image-field-widget .clear-field.checked {
  display: none;
}

.image-field-widget .clear-field label {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--error-color);
  background: var(--background-color);
  border-radius: 100%;
  font-size: 0.6em;
  line-height: 0;
  cursor: pointer;
  z-index: 20;
}

/* Subscriber Form */

.subscriber-form .form-field input {
  border-radius: 1.5em;
  padding-left: 26px;
  padding-right: 26px;
  height: 52px;
  color: var(--gray-dark);
}

.subscriber-form button {
  height: 52px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 1.5em;
}

/* Footer */
#footer {
  color: var(--gray-dark);
  background-color: var(--section-dark);
  overflow: auto;
  position: relative;
  z-index: 20;
}

#footer .footer-credit {
  display: block;
  padding: 30px 18px;
  margin: 0 auto;
  max-width: 1000px;
  text-align: center;
  text-transform: uppercase;
}

#footer .footer-links {
  text-align: center;
  font-size: 0;
}

#footer .footer-links .child {
  display: inline-block;
  border-left: 1px solid var(--gray-darker);
  padding: 0 9px;
  margin: 12px 0;
  font-size: 16px;
}

#footer .footer-links .child:first-child {
  border-left: 0;
}

#footer .footer-links .child > a {
  color: var(--section-dark-link);
}

#footer .footer-links .child.child-lang {
  display: block;
  font-size: 0;
  border: 0;
}

#footer .footer-links .child.child-lang > .lang-label {
  font-weight: 400;
  font-size: 16px;
}

#footer .footer-links .child.child-lang > a {
  font-weight: 600;
  font-size: 16px;
  padding: 0 8px;
}

#footer .footer-links .child.child-lang > a:not(:last-child) {
  border-right: 1px solid var(--gray-dark);
}

#footer .footer-links .child.child-lang > a:last-child {
  padding-right: 0;
}

#footer .messages {
  max-width: none;
  border: none;
  color: #FFF;
  padding: 8% 6%;
}

small.info {
  display: block;
  margin: 1.5em 0 0 0;
  line-height: 1.5em;
  font-size: 0.8em;
}

.forms .form-field + .info {
  margin-top: 0;
}

section {
  overflow: auto;
}

section.padding-normal {
  padding: 2.5% 0;
}

section.section-white {
  background-color: var(--background-color);
}

section.section-gray {
  background-color: var(--gray-ultralight);
}

section.section-teal {
  color: #FFF;
  background-color: var(--button-teal-color);
}

section.section-dark {
  color: #FFF;
  background-color: var(--section-dark);
}

section.section-teal blockquote,
section.section-teal h1,
section.section-teal h2,
section.section-teal h3,
section.section-teal h4,
section.section-teal h5,
section.section-teal h6,
section.section-dark blockquote,
section.section-dark h1,
section.section-dark h2,
section.section-dark h3,
section.section-dark h4,
section.section-dark h5,
section.section-dark h6 {
  color: #FFF;
}

section .cover-image {
  position: relative;
  height: calc(80vh - var(--header-height));
  min-height: 560px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
}

section .cover-image:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 75;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 85%, rgba(0,0,0,0.65) 100%);
}

section .cover-image .cover-content {
  position: relative;
  text-align: center;
  padding: 0 6%;
  top: 45%;
  color: #FFF;
  z-index: 100;
  transform: translateY(-50%);
}

section .cover-image .cover-content h1,
section .cover-image .cover-content h2 {
  color: #FFF;
  font-size: 4em;
  line-height: 1.1em;
}

section .cover-image .cover-content p,
section .cover-image .cover-content h3,
section .cover-image .cover-content h4,
section .cover-image .cover-content h5,
section .cover-image .cover-content h6 {
  color: #FFF;
  margin: calc(4.75% + 18px) 0 0 0;
}

section .cover-image .cover-content p {
  font-size: 1.16em;
}

section .cover-image .cover-content .tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 12px;
  overflow: hidden;
  max-height: 85px;
  margin: 18px 0;
}

section .cover-image .cover-content .tags .tag {
  margin: 0;
}

section .cover-image .cover-content .tags .tag > a {
  color: #FFF;
  border-color: #FFF;
}

section .cover-image .cover-content .tags .tag > a:hover {
  color: var(--accent-color);
  background-color: #FFF;
}

section .cover-image .search form {
  display: flex;
  justify-content: center;
}

section .cover-image #search-query {
  display: block;
  width: 100%;
  max-width: 320px;
  border-radius: 1.5em 0 0 1.5em;
  outline-color: var(--accent-color);
  line-height: normal;
  font-size: 1.1em;
  font-weight: 600;
  font-family: var(--primary-font);
  padding: 12px 22px;
  color: var(--accent-color);
  border: 1px solid #FFF;
  background-color: #FFF;
  box-sizing: border-box;
}

section .cover-image #search-button {
  padding: 0 16px 0 14px;
  font-size: 20px;
  background: var(--accent-color);
  color: #FFF;
  border-radius: 0 22px 22px 0;
  border: none;
  cursor: pointer;
}

section .cover-image #search-button label {
  cursor: pointer;
}

section .cover-image #search-button .label-text {
  font-size: 18px;
  margin-left: 5px;
  font-weight: 600;
  vertical-align: middle;
}

section .text {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 18px;
}

section .imagetext {
  display: flex;
}

section .imagetext .content-container {
  width: 50%;
}

section .imagetext .content-text {
  display: inline-block;
  max-width: 420px;
  text-align: left;
  padding: 10%;
}

section .imagetext .content-text p {
  margin: 3em 0;
}

section .imagetext .content-image {
  position: relative;
  width: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  text-align: center;
}

section .imagetext .content-image img {
  width: auto;
  max-width: 100%;
}

section .imagetext.direction-left .content-image {
  -webkit-box-ordinal-group: 2;
  order: 1;
}

section .imagetext.direction-left .content-container {
  text-align: right;
}

section .imagetext.image-size-original .content-image {
  background-size: auto;
}

section .imagetext.image-size-original.direction-left .content-image {
  background-position: center left;
}

section .imagetext.image-size-original.direction-right .content-image {
  background-position: center right;
}

/* Row Column */
section .row.width-normal {
  max-width: 1336px;
  margin: 0 auto;
}

section .row.align-middle {
  text-align: center;
  font-size: 0;
}

section .row.align-middle .column {
  float: none;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
}


section .accordion {
  max-width: 1000px;
  margin: 3% auto;
  padding: 0 18px;
}

section .column .accordion {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

section .accordion .text {
  padding: 0;
}

section .accordion-item {
  border-bottom: 1px solid var(--gray-lighter);
}

section .accordion-item.first {
  border-top: 1px solid var(--gray-lighter);
}

section .accordion-item .bi {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
}

section .accordion-item .bi-chevron-down {
  display: none;
}

section .accordion-item.active .bi-chevron-down {
  display: inline-block;
}

section .accordion-item.active .bi-chevron-up {
  display: none;
}

section .accordion .accordion-item .accordion-title {
  position: relative;
  color: var(--accent-color);
  margin: 0;
  padding: 20px 56px 20px 0;
  cursor: pointer;
}

section .accordion .accordion-content {
  display: none;
}

section .accordion .accordion-content h2,
section .accordion .accordion-content h3,
section .accordion .accordion-content h4,
section .accordion .accordion-content h5,
section .accordion .accordion-content h6,
section .accordion .accordion-content p {
  margin-top: 0;
}

.row:after {
  content: "";
  display: table;
  clear: left;
}

.row.inset {
  margin-left: -18px;
  margin-right: -18px;
}

.row.padding-small.inset {
  margin-left: -8px;
  margin-right: -8px;
}

.column {
  float: left;
  margin: 0;
  padding: 18px;
  box-sizing: border-box;
}

.row.padding-none .column {
  padding: 0;
}

.row.padding-small .column {
  padding: 8px;
}

.column.col-1 { width: 8.333333333333333%; }
.column.col-2 { width: 16.66666666666667%; }
.column.col-3 { width: 25%; }
.column.col-4 { width: 33.33333333333333%; }
.column.col-5 { width: 41.66666666666667%; }
.column.col-6 { width: 50%; }
.column.col-7 { width: 58.33333333333333%; }
.column.col-8 { width: 66.66666666666666%; }
.column.col-9 { width: 75%; }
.column.col-10 { width: 83.33333333333333%; }
.column.col-11 { width: 91.66666666666666%; }
.column.col-12 { width: 100%; }


/* Section Image */
section .image-container {
  text-align: center;
}

section .image-container .image {
  width: auto;
  max-width: 100%;
}

/* Generic drop menu */

.gnr-dropmenu {
  text-align: left;
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  padding: 10px 24px;
  background: var(--background-color);
  border: 1px solid var(--gray-superlight);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  border-top: 0;
  max-height: calc(100vh - 100px);
  line-height: 1.45em;
  min-width: 200px;
  z-index: 9999;
  user-select: text;
  cursor: auto;
  overflow-y: auto;
  border-radius: 6px;
  box-sizing: border-box;
}

.gnr-dropmenu::-webkit-scrollbar {
  width: 8px;
  background: var(--background-color);
}

.gnr-dropmenu:hover::-webkit-scrollbar-thumb {
  background: var(--gray-light);
  border-radius: 4px;
}

.gnr-dropmenu.gnr-dropmenu-auto {
  min-width: auto;
}

.gnr-dropmenu svg {
  margin-right: 6px;
}

.gnr-dropmenu .bi {
  font-size: 16px;
  margin-right: 6px;
  vertical-align: top;
}

.gnr-dropmenu > .child > .submenu > .child > span,
.gnr-dropmenu > .child > .submenu > .child > a {
  display: block;
  color: var(--accent-color);
  font-weight: 400;
  padding: 10px 0;
  white-space: nowrap;
}

.gnr-dropmenu > .child > .submenu > .child > a:hover {
  color: var(--accent-color-hover);
}

.gnr-dropmenu > .child > .submenu > .child > span > .lang,
.gnr-dropmenu > .child > .submenu > .child > a > .lang {
  margin-right: 8px;
  font-size: 0.8em;
  color: var(--gray);
  text-transform: uppercase;
}

.gnr-dropmenu > .child > .submenu.nowrap > .child > span,
.gnr-dropmenu > .child > .submenu.nowrap > .child > a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gnr-dropmenu > .child > .submenu > .child-disabled > span {
  color: var(--gray-superlight);
}

.gnr-dropmenu > .child > .submenu > .child > .buttons {
  color: #FFF;
  font-size: 1em;
  margin-bottom: 12px;
  margin-top: 18px;
}

.gnr-dropmenu > .child > .submenu > .child > .buttons:hover {
  color: #fff;
}

.gnr-dropmenu > .child > span,
.gnr-dropmenu > .child > a {
  display: block;
  font-family: var(--secondary-font);
  font-weight: 500;
  padding: 12px 0;
  margin-bottom: 8px;
  color: var(--gray-superdark);
  border-bottom: 1px solid var(--gray-lightest);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.gnr-dropmenu > .child > .account-name {
  color: var(--gray-superdark);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 170px;
}

.gnr-dropmenu > .child > span.child-spacer {
  height: 1em;
  padding: 0;
}

.gnr-dropmenubutton {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.gnr-dropmenubutton > svg {
  cursor: pointer;
}

.gnr-dropmenudot {
  display: inline-block;
  cursor: pointer;
  background: transparent;
  border-radius: 100%;
  padding: 8px;
  line-height: 0;
}

.gnr-dropmenudot:hover {
  background-color: var(--gray-superlight);
}

.gnr-dropmenudot > svg {
  width: 20px;
  height: auto;
}

.gnr-dropmenudot > .bi {
  font-size: 20px;
  line-height: 18px;
}

/* Loader */
.lds-ellipsis,
.lds-ellipsis div {
  box-sizing: border-box;
}

.lds-ellipsis {
  display: inline-block;
  position: absolute;
  width: 80px;
  height: 15px;
  color: #FFF;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lds-ellipsis div {
  position: absolute;
  top: calc(50% - 6px);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: currentColor;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

/* CKE */
.cke_editable.default {
  margin: 8px;
  font-size: 14px;
}

.cke_editable.default_basic {
  margin: 8px;
}

.cke_editable.default_basic {
  margin: 8px 14px;;
}

.forms .cke_contents {
  padding: 0;
}

.cke_editable h1,
.cke_editable h2 {
  margin: 0;
}

.cke_editable p:first-child {
  margin-top: 0;
}

.cke_editable p:last-child {
  margin-bottom: 0;
}

.cke_editable img {
  max-width: 100%;
  height: auto;
}

.cke_editable img[thumb_option=""],
.cke_editable img[thumb_option="0"] {
  border: 2px dotted var(--error-color);
  background-color: var(--cke-marker-primary-color);
  box-sizing: border-box;
  padding: 100px 200px
}

.cke_editable p:has(img[thumb_option=""]):after,
.cke_editable p:has(img[thumb_option="0"]):after {
  display: block;
  content: "Please select a Thumbnail.";
  text-align: center;
  color: var(--error-color);
  font-weight: bold;
}

.cke_editable a.nocheck {
  background-color: var(--cke-marker-secondary-color);
}

.cke_panel_listItem span.highlight,
.cke_editable span.highlight {
  background-color: var(--cke-marker-primary-background-color);
}

.cke_panel_listItem span.highlight {
  font-size: 0.82em;
}

.cke_panel_listItem p { font-size: 0.8em; }
.cke_panel_listItem h1 { font-size: 1.2em; }
.cke_panel_listItem h2 { font-size: 1.1em; }
.cke_panel_listItem h3 { font-size: 0.95em; }
.cke_panel_listItem h4 { font-size: 0.85em; }
.cke_panel_listItem h5 { font-size: 0.5em; }
.cke_panel_listItem h6 { font-size: 0.3em; }

.cke_panel_listItem h2,
.cke_panel_listItem h3,
.cke_panel_listItem h4,
.cke_panel_listItem h5,
.cke_panel_listItem h6 {
  font-weight: 500;
}

.cke_editable h1,
.cke_panel_listItem h1 {
  color: var(--gray);
}

.forms .cke_inner {
  background: none;
}

.forms .cke_chrome {
  border: none;
}

.forms textarea[data-type="ckeditortype"] {
  visibility: hidden;
}

.forms .cke_bottom {
  border: none;
  background: none;
  padding: 6px 8px 2px 1px;
}

.forms .cke_button_icon {
  filter: var(--invert-filter);
}

.forms a.cke_button_on,
.forms a.cke_button_off:hover,
.forms a.cke_button_off:focus,
.forms a.cke_button_off:active {
  background: var(--gray-superlight);
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
}