@charset "UTF-8";

:root {
  --accent-color: #F05240; /* py (py = set a var in context processors for html hardcoded styles) */
  --button-text-color: #FFFFFF; /* to do (elements that stay white no matter what) */
  --background-color: #FFFFFF; /* to do (elements that can become dark) */
  --gray-ultralight: #F7F7F7; /* py */
  --gray-superlight: #EEEEEE; /* py */
  --gray-lightest: #EBEBEB;
  --gray-lighter: #D6D6D6;
  --gray-light: #CCCCCC;
  --gray: #999999; /* py */
  --gray-dark: #787878;
  --gray-darker: #707070; /* py */
  --gray-darkest: #545454;
  --gray-superdark: #3F3F3F;
  --gray-ultradark: #272727; /* py */

  --primary-font: 'Open Sans', sans-serif;
  --secondary-font: 'Raleway', sans-serif;

  --background-dark: #272727;
  --footer-background: #3F3F3F;
  --form-button-text-color: #FFF;
  --messages-success: #53AF50;
  --messages-error: #F05240;
  --status-pending: #F8D53F;
  --marker-highlight: #FFEA9F;
  --comment-featured: #2CAC86;
  --dark-layer: #000000;
  --modal-background: rgba(255, 255, 255, 0.92);
  --placeholder-background: #F1F4F6;
  --user-notification-hover: #EEEEF0;
  --invert-filter: none;
  --logo-icon-color: #F05240;
  --logo-text-color: #4E4F48;

  --badge-ecoplus-level-0: #A2A09B;
  --badge-ecoplus-level-1: #6B7F8A;
  --badge-ecoplus-level-2: #39B465;
  --badge-ecoplus-level-3: #FBB040;
  --badge-ecoplus-level-4: #F05240;
  --badge-ecoplus-level-name: #4D4D46;

  --user-image-default-style-0: #A7A9AC;
  --user-image-default-style-1: #EAA84C;
  --user-image-default-style-2: #BBC68D;
  --user-image-default-style-3: #4BAA81;
  --user-image-default-style-4: #516562;
  --user-image-default-style-5: #E79C81;
  --user-image-default-style-6: #9EC384;
  --user-image-default-style-7: #392B40;
  --user-image-default-style-8: #E5A768;
  --user-image-default-style-9: #289FA4;
}

html[data-theme="dark"] {
  --accent-color: #F05240;
  --background-color: #202020;
  --gray-ultralight: #303030;
  --gray-superlight: #404040;
  --gray-lightest: #505050;
  --gray-lighter: #606060;
  --gray-light: #707070;
  --gray: #999999;
  --gray-dark: #b0b0b0;
  --gray-darker: #c0c0c0;
  --gray-darkest: #d5d5d5;
  --gray-superdark: #e0e0e0;
  --gray-ultradark: #f2f2f2;

  --background-dark: #171717;
  --footer-background: #171717;
  --form-button-text-color: #171717;
  --modal-background: rgba(0, 0, 0, 0.95);
  --placeholder-background: #3A3D40;
  --user-notification-hover: #48484A;
  --invert-filter: invert(1);
  --logo-icon-color: #F05240;
  --logo-text-color: #B1B0B7;
}

html {
  margin-top: 0 !important; /* Fix bug with select2 when html has margin */
}

body {
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-darker);
  background-color: var(--background-color);
}

iframe {
  border: 0;
}

p {
  margin: 3% 0;
  font-size: 1.1em;
  line-height: 1.85em;
}

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

ul.checklist {
  list-style: none;
  padding-left: 21px;
}

ul.checklist li:before {
  content: "";
  margin-right: 10px;
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSIjNGNhZjUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjk3IDQuOTdhLjc1Ljc1IDAgMCAxIDEuMDcxIDEuMDVsLTMuOTkyIDQuOTlhLjc1Ljc1IDAgMCAxLTEuMDguMDJMNC4zMjQgOC4zODRhLjc1Ljc1IDAgMSAxIDEuMDYtMS4wNmwyLjA5NCAyLjA5MyAzLjQ3My00LjQyNWEuMjM2LjIzNiAwIDAgMSAuMDItLjAyMnoiLz48L3N2Zz4=");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}


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

.cke_editable ol,
section .text ol:not([class]),
article ol:not([class]),
.modal .modal-content ol:not([class]) {
  padding-left: 40px;
  margin: 4% 0;
}

.cke_editable li,
section li:not([class]),
article li:not([class]),
.modal .modal-content li:not([class]) {
  font-size: 1.1em;
  line-height: 1.85em;
}

a p {
  color: var(--gray-darker);
}

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

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

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.bi {
  vertical-align: middle;
}

svg {
  vertical-align: middle;
}

svg.bi.bi-plus {
  min-width: 22px;
  margin-top: -2px;
}

svg.pg {
  margin-bottom: 2px;
}

a > svg.pg {
  fill: var(--accent-color);
}

strong {
  font-weight: 600;
}

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

.clear {
  clear: both;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  color: var(--gray-ultradark);
}

h1 {
  margin: 2% 0;
  font-size: 3.45em;
  font-weight: 200;
  line-height: 1.3em;
}

h2 {
  font-weight: 200;
  font-size: 2.5em;
  margin: 3% 0;
  line-height: 1.25em;
}

h3 {
  font-weight: 600;
  font-size: 1.3em;
  line-height: 1.45em;
  margin: 3% 0;
}

h4 {
  font-weight: 600;
  font-size: 1em;
  line-height: 1.65em;
  margin: 2% 0;
}

.tips-box {
  border: 1px solid var(--gray-superlight);
  padding: 12px 18px;
}

.logo-wrapper {
  display: inline-block;
}

.logo-wrapper .main-logo {
  width: auto;
  height: 76px;
}

.logo-wrapper .main-logo .icon-container > polygon {
  fill: var(--logo-icon-color);
}

.logo-wrapper .main-logo .name-container > rect,
.logo-wrapper .main-logo .name-container > path {
  fill: var(--logo-text-color);
}

/*
Buttons
*/
.button-links > a,
.buttons {
  display: inline-block;
  text-align: center;
  padding: 11px 23px;
  min-width: 80px;
  max-width: 100%;
  color: var(--form-button-text-color);
  font-size: 1em;
  border: 0;
  background: var(--gray-darker);
  cursor: pointer;
  border-radius: 5px;
  box-sizing: border-box;
  transition-property: background-color, border-color;
  transition-duration: 0.3s;
}

.button-links > a {
  margin: 18px 10px 0 0;
  padding: 9px 12px;
  font-size: 0.9em;
}

p > .buttons {
  margin: 3% 0;
}

.buttons.button-orange {
  color: #FFF;
  background: var(--accent-color);
}

.buttons.button-white {
  color: #FFF;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.22);
}

.buttons.button-dark, .buttons.button-dark {
  color: #FFF;
  border: 2px solid var(--gray-superdark);
  background: var(--gray-superdark);
}

.buttons.button-dark-bordered {
  color: var(--gray-superdark);
  border: 1px solid var(--gray-superdark);
  background: var(--background-color);
}

.buttons.button-orange-bordered {
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  background: transparent;
}

.buttons.button-orange-bordered svg {
  color: var(--accent-color);
}

.buttons.button-disabled {
  color: #FFF;
  background: var(--gray-light) !important;
  cursor: default !important;
}

a[href].buttons.button-disabled {
  cursor: pointer !important;
}

.buttons.button-small {
  padding: 0;
  font-size: 0.9em;
}

.buttons.button-bold {
  font-weight: 600;
}

.buttons.button-pager {
  background: transparent;
  color: var(--gray-ultradark);
  border: 1px solid var(--gray-ultradark);
  padding: 8px 8px 8px 24px;
}

.buttons.button-pager.next:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  margin:0 11px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzIyNkYxOUI5NTVCMTFFNzg4NDI5MkIwNTJFMTUzNUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzIyNkYxOUM5NTVCMTFFNzg4NDI5MkIwNTJFMTUzNUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMjI2RjE5OTk1NUIxMUU3ODg0MjkyQjA1MkUxNTM1QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMjI2RjE5QTk1NUIxMUU3ODg0MjkyQjA1MkUxNTM1QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuICquMAAACNSURBVHjaYvj//z8DDIOAn1+AAAMOgKyWCVkCqEkBSN0H0gYMBACKxk2bNjwAUoVAvJ+QZiZ0AaDmBcRoZsImSIxmJlwmEtLMhM8f+DQzMRAGG4D4AxDHIwsywuIPzGFkZECLHlCc7gfiC0DbE5HV4rQRXRNRfiSkCatGYjRhaCRWEy6nLiSkCQQAAgwASmdTXevv0FQAAAAASUVORK5CYII=);
}

.buttons.button-ecoplus {
  color: var(--badge-ecoplus-level-0);
  border: 1px solid var(--badge-ecoplus-level-0);
  background-color: transparent;
  white-space: nowrap;
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  line-height: 15px;
  user-select: none;
  padding-top: 7px;
}

.buttons.button-ecoplus:hover {
  color: #FFF;
  background-color: var(--badge-ecoplus-level-0);
}

.buttons.button-ecoplus > svg {
  height: 18px;
  vertical-align: bottom;
  margin-left: 6px;
}

.buttons.button-ecoplus.level-1 { color: var(--badge-ecoplus-level-1); border-color: var(--badge-ecoplus-level-1); }
.buttons.button-ecoplus.level-2 { color: var(--badge-ecoplus-level-2); border-color: var(--badge-ecoplus-level-2); }
.buttons.button-ecoplus.level-3 { color: var(--badge-ecoplus-level-3); border-color: var(--badge-ecoplus-level-3); }
.buttons.button-ecoplus.level-4 { color: var(--badge-ecoplus-level-4); border-color: var(--badge-ecoplus-level-4); }
.buttons.button-ecoplus.level-1:hover { color: #FFF; background-color: var(--badge-ecoplus-level-1); }
.buttons.button-ecoplus.level-2:hover { color: #FFF; background-color: var(--badge-ecoplus-level-2); }
.buttons.button-ecoplus.level-3:hover { color: #FFF; background-color: var(--badge-ecoplus-level-3); }
.buttons.button-ecoplus.level-4:hover { color: #FFF; background-color: var(--badge-ecoplus-level-4); }

button[data-theme-toggle] {
  background: none;
  border: none;
  color: var(--gray);
  font-size: 1.1em;
  cursor: pointer;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 12px 13px;
}

button[data-theme-toggle]:hover {
  color: #FFF;
}

/* 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;
  min-width: 200px;
  max-height: calc(100vh - 100px);
  line-height: 1em;
  z-index: 9999;
  user-select: text;
  cursor: auto;
  overflow-y: auto;
}

.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 > .submenu > .child > .submenu > .child > span,
.gnr-dropmenu > .submenu > .child > .submenu > .child > a {
  display: block;
  line-height: 1.45em;
  color: var(--gray-darker);
  padding: 10px 0;
}

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

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

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

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

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

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

.gnr-dropmenu > .submenu > .child > span,
.gnr-dropmenu > .submenu > .child > a {
  display: block;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 1.1em;
  line-height: 1.45em;
  font-weight: 600;
  padding: 12px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--gray-superlight);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

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

.gnr-dropmenu > .submenu > .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;
}

/*
Header
*/
.scroll-initiated #header,
.scroll-initiated #header .header-wrapper,
.scroll-initiated #header .logo-wrapper .main-logo,
.scroll-initiated #header .header-search,
.scroll-initiated #header .header-auth,
.scroll-initiated #header #mainnav .mainmenu,
.scroll-initiated #header .typeahead__container {
  transition: all 0.25s;
}

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

#header .header-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4px 12px 4px 12px;
}

#header .mobile-menu-toggle {
  display: none;
  float: left;
  margin: 4px 0 0 -6px;
  width: 21px;
  height: 20px;
  background: url("../img/menu-icon.d169b3ea1edb.png") no-repeat 12px 12px;
  cursor: pointer;
  padding: 12px;
}

#header .logo-wrapper {
  float: left;
  margin: 3px 0 3px 10px;
}

#header .logo-wrapper .main-logo {
  height: 45px;
}

#header .header-search {
  position: relative;
  float: left;
  width: 100%;
  max-width: 50%;
  margin: 5px 2% 0 8%;
}

#header #themes-menu {
  position: relative;
  display: inline-block;
  padding: 0 14px;
  height: 32px;
  background: url("../img/ecohome-icons.95226a13e013.png") no-repeat 7px -356px;
  cursor: pointer;
}

#header .header-auth {
  float: right;
  margin: 12px 0 0 0; /* 24px w/ buttons */
}

#header .header-auth li {
  display: inline-block;
  margin: 0 10px;
}

#header .header-auth .sticky,
#header.header-sticky .header-auth .nonsticky {
  display: none;
}

#header.header-sticky .header-auth .sticky {
  display: inline-block;
}

#header .header-auth li a {
  color: var(--gray-darker);
  display: block;
  padding: 7px 0;
}

#header .header-auth li a:hover {
  color: var(--accent-color);
}

#header .header-auth a.buttons {
  color: #FFF;
  padding: 7px 16px;
}

#header .header-auth a.buttons:hover {
  color: #FFF;
}

.header-action {
  float: right;
  margin: 5px 0 0 0;
  user-select: none;
}

.user-action {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  padding: 7px;
  line-height: 0;
}

.user-action .user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  cursor: pointer;
  user-select: none;
}

.user-notification {
  cursor: pointer;
  margin-right: 10px;
}

.user-notification .user-notification-alert {
  background-color: var(--accent-color);
  display: block;
  position: absolute;
  top: 4px;
  right: 0;
  border-radius: 100%;
  color: #FFF;
  font-size: 10px;
  font-weight: bold;
  width: 15px;
  line-height: 15px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
}

.user-notification > svg {
  color: var(--gray-dark);
}

.user-notification-dropdown {
  width: 470px;
  padding: 18px 0 0 0;
  height: 500px;
}

.user-notification-dropdown h3 {
  font-size: 1.2em;
  margin: 0;
  padding: 0 0 18px 18px;
  border-bottom: 1px solid var(--gray-superlight);
}

.user-notification-list .notification {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
  padding: 12px 48px 12px 18px;
}

.user-notification-list a.notification:hover {
  background-color: var(--user-notification-hover);
}

.user-notification-list .notification .notification-thumb {
  display: flex;
  align-items: center;
  order: 0;
  flex: 0 1 auto;
  margin-right: 15px;
  min-width: 48px;
  height: 48px;
}

.user-notification-list .notification .notification-thumb > img {
  border-radius: 100%;
  max-width: 100%;
  height: auto;
}

.user-notification-list .notification .notification-content {
  order: 0;
  flex: 1 1 auto;
  color: var(--gray-darker);
  line-height: 1.4em;
  overflow: hidden;
}

.user-notification-list .notification .notification-title {
  display: block;
}

.user-notification-list .notification .notification-description {
  display: block;
  font-size: 12px;
  color: var(--gray-darker);
  line-height: 18px;
  margin-top: 4px;
}

.user-notification-list .notification .notification-date {
  display: block;
  color: var(--gray);
  font-size: 0.9em;
  margin-top: 4px;
}

.user-notification-list .notification .buttons {
  margin-top: 12px;
  padding: 8px 24px;
}


.user-notification-list .notification.is-unread .notification-content {
  color: var(--gray-darkest);
}

.user-notification-list .notification.is-unread .notification-title {
  font-weight: bold;
}

.user-notification-list .notification.is-unread .notification-date {
  color: var(--accent-color);
  font-weight: bold;
}

.header-white .user-notification > svg {
  color: #FFF;
}

#header .mobile-search-toggle {
  display: none;
  vertical-align: middle;
  padding: 14px;
  background-position: 50%;
  cursor: pointer;
}

#mainnav {
  clear: both;
}

#mainnav .mainmenu {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
}

#mainnav .mainmenu > .child {
  display: inline-block;
  font-size: 14px;
}

#mainnav .mainmenu > .child > a {
  display: block;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 1.07em;
  font-weight: 500;
  color: var(--gray-darker);
  background: url("../img/ecohome-icons.95226a13e013.png") no-repeat 26px 13px;
  padding: 16px 34px 16px 54px;
}

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

#mainnav .mainmenu > .child > .submenu > .column > ul > .child {
  padding-bottom: 20px;
}

#mainnav .mainmenu > .child > .submenu > .column > ul > .child:last-child {
  padding-bottom: 0;
}

#mainnav .mainmenu > .child > .submenu > .column > ul > .child > a {
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.45em;
  text-transform: uppercase;
}

#mainnav .mainmenu > .child > .submenu > .column > ul > .child > .submenu {
  color: var(--gray-darker);
  font-size: 1em;
}

#mainnav .mainmenu > .child > .submenu > .column > ul > .child > .submenu > .child {
  display: block;
  margin: 5px 0;
  line-height: 1.2em;
}

#mainnav .mainmenu > .child > .submenu > .column > ul > .child > .submenu > .child > a {
  display: block;
  color: var(--gray-darker);
  font-size: 0.9em;
}

#mainnav .mainmenu > .child > .submenu > .column > ul > .child > .submenu > .child > a:hover {
  color: var(--accent-color);
}

#mainnav .mainmenu .child.section-projects > a { background-position: 26px 13px; }
#mainnav .mainmenu .child.section-training > a { background-position: 26px -59px; }
#mainnav .mainmenu .child.section-services > a { background-position: 26px -131px; }
#mainnav .mainmenu .child.section-guides > a { background-position: 26px -203px; }
#mainnav .mainmenu .child.section-latest > a { background-position: 26px -275px; }

#header.header-sticky {
  border-color: var(--gray-superlight);
}

/*
Header Large
*/
.header-white #header {
  border: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 1%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%);
}

.header-white #header .header-wrapper {
  padding-top: 2%;
  padding-bottom: 0;
}

.header-white #header .logo-wrapper .main-logo {
  height: 76px;
}

.header-white #header .logo-wrapper .main-logo .icon-container > polygon,
.header-white #header .logo-wrapper .main-logo .name-container > rect,
.header-white #header .logo-wrapper .main-logo .name-container > path {
  fill: #FFF;
}

.header-white #header .header-search {
  margin-top: 37px;
}

.header-white #header .header-auth {
  margin-top: 30px;
}

.header-white #header .header-auth li a {
  color: #FFF;
}

.header-white #header #mainnav .mainmenu {
  margin-top: 3%;
  margin-bottom: 3%;
}

.header-white #header #mainnav .mainmenu > .child > a {
  color: #FFF;
  filter: brightness(0) invert(1);
}

.header-white #header .typeahead__field input {
  color: #FFF;
}

.header-white .typeahead__container.hint .typeahead__field input:last-child,
.header-white .typeahead__hint {
  background: none;
}

.header-white #header .typeahead__container {
  border-color: transparent;
  border-bottom-color: #FFF;
  border-radius: 0;
  padding-left: 0;
}

.header-white #header .typeahead__search-icon {
  filter: brightness(0) invert(1);
}

.header-white #mainnav .mainmenu > .child > .submenu {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.52)
}

.header-white #search-menu {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.52)
}

.header-white .header-auth .buttons {
  background-color: transparent;
}

/*
  Search Menu
*/
#search-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  margin-top: 1px;
  width: 100%;
  border: 1px solid var(--gray-light);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  background: #FFF;
}

#search-menu h3 {
  font-size: 1.1em;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

#search-menu .search-menu-item {
  padding-bottom: 18px;
}

#search-menu .search-menu-item .child {
  display: block;
  margin: 5px 0;
  line-height: 1.2em;
}

#search-menu .search-menu-item .child > a {
  display: block;
  color: var(--gray-darker);
  font-size: 0.9em;
}

#search-menu .search-menu-item .child > a:hover {
  color: var(--accent-color);
}


/* Mobile Menu */
#mobile-menu {
  display: none;
  position: fixed;
  height: 100%;
  padding-bottom: 18px;
  width: 100%;
  max-width: 400px;
  overflow-y: auto;
  border-right: 1px solid var(--gray-superlight);
  top: 0;
  left: -100%;
  z-index: 9950;
  background: var(--background-color);
  padding-top: 60px;
  box-sizing: border-box;
}

#mobile-menu .mainmenu {
  padding: 0 10px;
}

#mobile-menu .mainmenu .column {
  float: none;
  padding: 0;
}

#mobile-menu .mainmenu .child {
  position: relative;
}

#mobile-menu .mainmenu .child a {
  border-bottom: 1px solid var(--gray-superlight);
}

#mobile-menu .mainmenu .child > a.buttons,
#mobile-menu .mainmenu .child > a {
  display: block;
  color: var(--gray-dark);
  line-height: 1.65em;
  padding: 11px 45px 11px 8px;
  text-transform: uppercase;
  text-align: left;
  background: none;
  border-radius: 0;
}

#mobile-menu .mainmenu .child > a.buttons {
  color: #FFF;
  background: var(--gray-dark);
}

#mobile-menu .mainmenu .child.level-0 > a {
  padding-left: 35px;
  background: url("../img/ecohome-icons.95226a13e013.png") no-repeat 7px 13px;
}

#mobile-menu .mainmenu .child.level-1 > a {
  padding-left: 37px;
}

#mobile-menu .mainmenu .child.level-2 > a {
  text-transform: none;
  padding-left: 53px;
}

#mobile-menu .mainmenu .child .dropdown {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  background: url("../img/ecohome-icons.95226a13e013.png") no-repeat 2px -572px;
  cursor: pointer;
}

#mobile-menu .mainmenu .child.active > .dropdown {
  background-position: 1px -638px;
}

#mobile-menu .mainmenu .child.section-projects > a { background-position: 7px 13px; }
#mobile-menu .mainmenu .child.section-training > a { background-position: 7px -59px; }
#mobile-menu .mainmenu .child.section-services > a { background-position: 7px -131px; }
#mobile-menu .mainmenu .child.section-guides > a { background-position: 7px -203px; }
#mobile-menu .mainmenu .child.section-latest > a { background-position: 7px -275px; }

#mobile-menu .mainmenu > .child .submenu {
  display: none;
}

#mobile-menu .mobile-search-toggle {
  font-size: 1.2em;
  padding: 17px 0 17px 18px;
  cursor: pointer;
}

#mobile-menu .typeahead__search-icon {
  display: inline-block;
  vertical-align: middle;
  padding-right: 0;
  width: 8px;
}

#mobile-menu .search-toggle-text {
  display: inline-block;
  vertical-align: middle;
}

#mobile-menu .side-bar {
  padding: 0 18px;
  border-bottom: 1px solid var(--gray-superlight);
}

#mobile-menu .filter {
  border: none;
  margin-top: 0;
  margin-bottom: 0;
}

#mobile-menu .filter .filter-title {
  padding-top: 18px;
  font-size: 1.2em;
}

#mobile-menu .filter .filter-options .child:last-child > a {
  border-color: transparent;
}

#mobile-menu .filter .buttons {
  margin-top: 18px;
  margin-bottom: 18px;
}

/* Mobile Search */
#mobile-search {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  top: 0;
  right: -100%;
  z-index: 9950;
  background: var(--background-color);
  padding: 60px 18px 18px 18px;
  box-sizing: border-box;
}

#mobile-search .top-search {
  margin-top: 18px;
}

#mobile-search #search-menu {
  display: block;
  position: static;
  border: none;
  box-shadow: none;
  background: none;
}

#mobile-search #search-menu .search-menu-item .child {
  line-height: 1.65em;
}

/*
  Footer
*/
#footer {
  position: relative;
  background: var(--footer-background);
  text-align: center;
  padding: 0.5% 20px 4% 20px;
}

#footer a {
  color: var(--gray);
}

#footer a:hover {
  color: #FFF;
}

#footer .logo-wrapper .main-logo .icon-container > polygon,
#footer .logo-wrapper .main-logo .name-container > rect,
#footer .logo-wrapper .main-logo .name-container > path {
  fill: var(--gray-dark);
}

#footer .footer-lang {
  display: inline-block;
  border-left: 1px solid var(--gray-darker);
  margin-left: 8px;
  padding-left: 8px;
}

#footer .footer-block {
  display: inline-block;
  margin: 4% 7%;
  text-align: left;
  vertical-align: top;
}

#footer .footer-block-center {
  text-align: center;
}

#footer .footer-block h3 {
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 1.3em;
  font-weight: 300;
  line-height: 1.4em;
  text-transform: uppercase;
  margin: 3% 0;
  color: #FFF;
}

#footer .footer-block ul {
  margin: 10px 0 0 0;
}

#footer .footer-block ul li {
  margin: 3% 0;
}

#footer .footer-block ul li > a {
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.4em;
}

#footer .footer-credit {
  font-size: 0.9em;
  line-height: 1.45em;
  text-transform: uppercase;
}

#footer .social-network .item {
  display: inline-block;
  margin: 0 1px;
}

#footer .social-network .item > a {
  display: inline-block;
  font-size: 1.2em;
  color: var(--gray-dark);
  border-radius: 100%;
  width: 28px;
  line-height: 28px;
}

#footer .social-network .item > a:hover {
  color: #FFF;
}

/*
Content
*/
#content {
  padding-top: 111px;
  overflow: hidden;
}

.header-static #content {
  padding-top: 0;
}

.tpl-home #content {
  padding-top: 0;
}

#content .sidebar {
  float: right;
  width: 310px;
}

#content .sidebar h2 {
  font-size: 2.45em;
}

#content .sidebar .ras {
  margin: 0 0 45px 0;
}

#content .article-container .ras-mobile {
  display: none !important;
}


/*
Articles
*/
.breadcrumbs {
  padding: 0;
  margin: 0 0 4% 0;
}

.content-navigation-container + article .breadcrumbs {
  margin: 4% 0;
}

.breadcrumbs .child {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 0 10px 0 0;
  border-right: 1px solid var(--gray-lightest);
  vertical-align: middle;
}

.breadcrumbs .child:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}

.breadcrumbs .child > span,
.breadcrumbs .child > a {
  display: block;
  line-height: 1.2em;
  font-size: 0.93em;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  color: var(--gray-darker);
}

.breadcrumbs .child > a:hover {
  color: var(--accent-color);
}

.content-article {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px 6% 18px;
}

.related-searches-wrapper {
  margin-bottom: 3%;
}

.article-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px 3.5% 18px;
  text-align: center;
}

.article-intro h1 {
  padding: 0 8%;
  text-transform: uppercase;
  font-weight: 200;
}

.article-intro .article-image-container {
  display: inline-block;
}

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

.article-intro .article-image-description {
  display: block;
  color: var(--gray-light);
  margin-top: 8px;
  margin-bottom: 1.5%;
  font-size: 0.93em;
  line-height: 1.5em;
  text-align: center;
  font-weight: 500;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  padding: 0 8px;
}

.article-intro .breadcrumbs {
  margin: 0;
}

.author-container {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--gray-lightest);
}

.author-container:after {
  content: "";
  display: table;
  clear: left;
}

.author-container .author-image {
  float: left;
  width: 42px;
  height: 42px;
  margin-right: 10px;
}

.author-container .author-text {
  margin-left: 52px;
  font-weight: 400;
  line-height: 1.52em;
  color: var(--gray-darker);
}

.author-container .author-name {
  padding-top: 2px;
}

.author-container .author-name.author-name-undefined {
  padding-top: 10px;
}

.author-container .author-username {
  color: var(--gray-ultradark);
  font-weight: 600;
}

.author-container .publish-date {
  white-space: nowrap;
  color: var(--gray);
  font-size: 0.85em;
}

.author-container .publish-date .article-date {
  margin: 0 6px;
}

.author-container .publish-date .updated-date {
  font-weight: bold;
}

article img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto !important; /* !important for hardcoded style */
}

article iframe {
  max-width: 100%;
}

figure.image-captioned {
  margin: 4% 0 6% 0;
}

.article-container {
  max-width: 770px;
  margin-right: 310px;
  padding-right: 6%;
}

.article-container h2 {
  margin: 9% 0 4% 0;
}

.viewer-content .subtitle,
.listing .results .subtitle,
article .subtitle {
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.45em;
  margin: 3% 0;
}

.article-container .tags-list {
  margin: 3% 0;
}

.article-container .accordion {
  padding: 0;
}

.article-container .faqs-wrapper {
  margin-bottom: 6%;
}

.article-details {
  padding: 18px;
}

.article-details h3 {
  margin-bottom: 0;
  font-size: 1.2em;
}

.article-details p {
  margin-top: 0;
}

article .article-body p {
  margin: 4% 0;
  font-size: 1.1em;
}

article .article-body ol,
article .article-body ul {
  margin: 4% 0;
}

article .article-body p strong {
  color: var(--gray-darkest);
}

article .article-body a {
  font-weight: 600;
}

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

article h2 {
  text-transform: none;
  margin: 9% 0 4% 0;
}

article h2 strong {
  font-weight: 200;
}

img.w100p {
  width: 100%;
}

img.w60p {
  width: 60%;
}

.related-articles .related-articles-bottom {
  display: none;
}

/* Listing */
.list.grid-16 {
  padding-top: 1px;
}

.list.grid-16 .row {
  margin: 2% 0 6% 0;
}

.discussions-list .discussion-row .node-thumb,
.list.grid-16 .row .node-thumb {
  display: inline-block;
  max-width: 410px;
  width: 39.048%;
}

.list.grid-16 .row .node-thumb.node-thumb-placeholder {
  background: url("../img/placeholder--4-3.8629905adbcc.png") var(--placeholder-background) no-repeat center;
  background-size: contain;
  padding-bottom: 24.729%;
}

.discussions-list .discussion-row .node-image,
.list.grid-16 .row .node-image {
  width: auto;
  max-width: 100%;
  height: auto;
}

.discussions-list .discussion-row .node-logo,
.list.grid-16 .row .node-logo {
  margin: 3% 0;
}

.discussions-list .discussion-row .node-logo img,
.list.grid-16 .row .node-logo img {
  height: 50px;
  max-width: 100%;
}

.discussions-list .discussion-row .col-3 .node-logo,
.list.grid-16 .row .col-3 .node-logo {
  margin: 8% 0 3% 0;
}

.discussions-list .discussion-row .node-content,
.list.grid-16 .row .node-content {
  display: inline-block;
  width: 58%;
  padding: 0 0 0 2%;
  vertical-align: top;
  text-align: left;
}

.list.grid-16 .row .node-title h3 {
  display: block;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 1.3em;
  font-weight: 300;
  line-height: 1.4em;
  text-transform: uppercase;
  margin: 3% 0;
}

.list.grid-16 .row .node-teaser p {
  font-size: 1em;
  word-break: break-word;
}

.list.grid-16 .row .node-content .page-links {
  font-weight: 600;
}

.list.grid-16.profiles-list .row .node-thumb {
  float: left;
  width: 150px;
}

.list.grid-16.profiles-list .row .node-image {
  border-radius: 100%;
}

.list.grid-16.profiles-list .row .node-content {
  display: block;
  width: auto;
  margin-left: 150px;
  max-width: 605px;
  padding-left: 2.5%;
}

.list.grid-16.profiles-list .row .node-title h3 {
  margin: 0;
}

.list.grid-16.profiles-list .row .node-teaser p {
  min-height: 100px;
}

.list.grid-16.profiles-list .row .node-section {
  margin: 6px 0;
}

.discussion-row .node-teaser .highlighted,
.list.grid-16 .row .node-teaser .highlighted {
  font-weight: 600;
}

.list.grid-16 .row .node-section {
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 0.93em;
  font-weight: 600;
  text-transform: uppercase;
  margin: 1% 4px 1% 0;
  display: inline-block;
  border-right: 1px solid var(--gray);
  padding-right: 6px;
  color: var(--gray-ultradark);
}

.list.grid-16 .row .node-section.last {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}

.list.grid-16 .row .node-section.node-event-start {
  font-family: var(--primary-font);
  font-size: 1.2em;
}

.list.grid-16 .row .node-author {
  display: block;
  font-size: 0.93em;
  color: var(--gray);
  margin: 3% 0;
}

.list.grid-16 .row .node-event {
  vertical-align: top;
  display: inline-block;
  text-align: center;
  padding: 5px 20px;
  margin: 0 1.5% 1.5% 0;
  background: var(--background-color);
  border: 2px solid var(--gray-darker);
  height: 55px;
  min-width: 120px;
  max-width: 235px;
  overflow: hidden;
  border-radius: 5px;
}

.list.grid-16 .row .node-event h4 {
  color: var(--gray-darker);
  margin: 4px 0;
  text-transform: uppercase;
}

.list.grid-16 .row .node-event p {
  margin: 4px 0;
  font-size: 0.9em;
  text-transform: uppercase;
}

/* Companies */
.content-company .company-user-action-bar-wrapper {
  margin: 0 18px;
}

.content-company .projects-photos h2 {
  margin-top: 3%;
}

.company-header {
  padding-top: 18px;
}

.company-infos-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.company-infos-wrapper .users-messages {
  margin: 0 18px 18px 18px;
}

.company-infos-wrapper .breadcrumbs {
  margin: 3% 18px 18px 18px;
}

.company-infos {
  margin: 0 18px 18px 18px;
  border-bottom: 1px solid var(--gray-superlight);
  padding-bottom: 8px;
}

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

.company-infos .company-details {
  margin-left: 156px;
  min-height: 120px;
}

.company-infos .company-logo-wrapper {
  float: left;
  margin-right: 36px;
  width: 120px;
  height: 120px;
  line-height: 0;
}

.company-infos .company-logo {
  display: block;
  width: 100%;
  height: 100%;
}

.company-infos .company-logo.company-logo-placeholder {
  border: 1px solid var(--gray-superlight);
  transition: background-color 350ms;
}

.company-infos .company-logo.company-logo-placeholder:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.company-infos .company-logo > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-infos h1 {
  margin: 0;
  font-size: 1.4em;
  font-weight: 600;
}

.company-infos h1 > a {
  color: var(--gray-ultradark);
}

.company-infos .subtitle {
  margin: 12px 0;
  font-size: 1.2em;
  font-weight: 300;
}

.company-infos h5 {
  margin: 0 0 12px 0;
}

.profile-content .social-network .item,
.company-infos .social-network .item {
  display: inline-block;
}

.profile-content .social-network .item > a,
.company-infos .social-network .item > a {
  display: inline-block;
  font-size: 1.2em;
  color: var(--gray);
  border-radius: 100%;
  width: 28px;
  line-height: 28px;
}

.company-infos .social-network .item > a:hover {
  color: var(--gray-darker);
}

.company-actions {
  float: right;
  white-space: nowrap;
}

.company-actions.company-group-settings .action-item:first-child {
  margin-left: 0;
}

.company-actions.company-group-settings .buttons {
  margin-top: 0;
  padding: 7px 21px;
  max-height: 31px;
  line-height: 1.3em;
  font-size: 13px;
  font-weight: 600;
  color: var(--form-button-text-color)
}

.company-actions .action-item {
  display: inline-block;
  vertical-align: middle;
  margin-left: 18px;
}

.company-actions .action-item > a {
  display: block;
}

.company-actions .action-item svg {
  width: 22px;
  height: 22px;
  color: var(--gray-darker);
}

.company-actions .action-item:hover svg {
  color: var(--accent-color);
}

.company-actions .action-item .buttons svg {
  color: var(--form-button-text-color);
  width: 1.2em;
  height: auto;
}

.company-actions .action-item .buttons.button-orange-bordered svg {
  color: var(--accent-color);
}

.company-actions .action-item .buttons.button-orange-bordered {
  color: var(--accent-color);
  padding: 6px 21px 6px 15px;
}

.company-infos .content-navigation {
  border-bottom: 0;
  padding-bottom: 0;
  white-space: nowrap; /* quick fix for company nav too long */
}

.company-infos .content-navigation {
  margin-right: 2%;
}

.company-infos .company-dashboard-public {
  display: block;
  float: right;
  margin: 0 0 16px 8px;
}

.company-infos-small .company-infos .company-details {
  margin-left: 126px;
  min-height: auto;
}

.company-infos-small .company-infos .company-logo-wrapper {
  width: 90px;
  height: 90px;
}

.company-stats {
  margin: 0 0 12px 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.company-stats .company-stats-item {
  color: var(--gray-ultradark);
  font-weight: 600;
  font-size: 0.83em;
  display: inline-block;
  border-right: 1px solid var(--gray-ultradark);
  padding-right: 8px;
  margin-right: 5px;
  line-height: 10px;
}

.company-stats .company-stats-item:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}

/* Company Header Block */
.company-block {
  position: relative;
  text-align: left;
}

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

.company-block .company-logo {
  display: inline-block;
  float: right;
  max-width: 150px;
  margin: 10px 0 18px 18px;
}

.company-block .company-logo > img {
  max-width: 100%;
}

.company-block .company-info {
  margin-top: 4px;
}

.company-block h3 {
  margin: 0;
}

.company-block h5 {
  margin: 0;
}

.company-block h5 {
  margin: 0;
}

.company-block .company-cta {
  width: 100%;
  margin: 0;
  position: absolute;
  top: -100px;
  z-index: 100;
}

.company-block .company-cta .buttons {
  width: 100%;
  max-width: 292px;
}

.company-users {
  border-bottom: 1px solid var(--gray-superlight);
  line-height: 1.65em;
}

.company-users .company-user {
  clear: left;
  padding: 16px 0;
  border-top: 1px solid var(--gray-superlight);
}

.company-users .company-user:after {
  content: "";
  display: table;
  clear: left;
}

.company-users .company-user .company-user-avatar {
  float: left;
  margin-top: 4px;
  border-radius: 100%;
  margin-right: 5%;
}

.company-users .company-user .company-user-name {
  display: block;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.company-users .company-user .company-user-email {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.company-users .company-user .company-user-pending {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.company-users .company-user .company-user-pending-text {
  display: inline;
  vertical-align: middle;
}

.company-users .company-user .company-user-pending:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  margin-top: 1px;
  margin-right: 5px;
  background: var(--status-pending);
  border-radius: 100%;
}

.company-users .col-label {
  font-weight: 600;
  margin-bottom: 5px;
  white-space: nowrap;
}

.company-users .company-user-info-col {
  float: left;
  width: 58%;
  padding-right: 2%;
}

.company-users .company-user-access-col {
  float: left;
  width: 30%;
}

.company-users .company-user-action-col {
  position: relative;
  float: left;
  width: 10%;
  text-align: right;
}

.user-action-bar.company-user-action-bar .action-share {
  margin-left: 0;
  margin-right: 0;
}

.user-action-bar.edit-company-user-action-bar .action-share {
  float: left;
}

.user-action-bar.edit-company-user-action-bar .action-share .gnr-dropmenu {
  right: initial;
  left: 0;
}

.company-user-action-bar-wrapper {
  margin: 2% 0 5% 0;
}

.company-user-action-bar-wrapper:after {
  content: "";
  display: table;
  clear: left;
}

.company-user-action-bar-wrapper .user-action-bar {
  margin: 0;
}

.company-infos .company-actions.company-group-cta {
  margin-top: 12px;
}

.companies-list {
  padding-bottom: 6%;
}

.companies-list .item {
  position: relative;
  border-bottom: 1px solid var(--gray-lightest);
  padding: 18px 0;
  display: table;
  width: 100%;
}

.companies-list .item:first-child {
  border-top: 1px solid var(--gray-lightest);
  margin-top: 18px;
}

.companies-list .item .company-info {
  display: table-cell;
  vertical-align: middle;
  width: 55%;
}

.companies-list .item .company-info .company-logo {
  display: inline-block;
  max-width: 100px;
  vertical-align: middle;
  padding-right: 16px;
}

.companies-list .item .company-info .company-logo > span,
.companies-list .item .company-info .company-logo > a {
  display: inline-block;
  overflow: hidden;
  line-height: 0;
  width: 100px;
  height: 100px;
}

.companies-list .item .company-info .company-logo > a[href="javascript:void(0);"] {
  pointer-events: none;
  cursor: default;
}

.companies-list .item .company-info .company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.companies-list .item .company-info .company-text {
  width: 70%;
  display: inline-block;
  vertical-align: middle;
}

.companies-list .item .company-info .company-category {
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 0.93em;
  font-weight: 600;
  text-transform: uppercase;
  margin: 1% 4px 1% 0;
  display: inline-block;
  border-right: 1px solid var(--gray);
  padding-right: 6px;
  color: var(--gray-ultradark);
}

.companies-list .item .company-info .company-category.last {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}

.company-pros-list .item .company-info .company-category {
  margin: 4px 0;
}

.companies-list .item .company-info .company-text h4 {
  font-size: 0.9em;
  margin: 3% 0 0 0;
}

.companies-list .item .company-info .company-description p {
  color: var(--gray);
  margin: 8px 0;
}

.companies-list .item .company-info .company-description .company-description-full {
  display: none;
}

.companies-list .item .button-dark-bordered {
  font-weight: 600;
  padding: 7px 26px;
  margin-top: 6px;
}

.companies-list .item .company-info .badge-list {
  display: inline-block;
  transform: scale(0.75);
  transform-origin: top left;
}

.companies-list .item .company-info p {
  color: var(--gray-darker);
  margin: 0;
  font-size: 1em;
}

.companies-list .item .company-info p > a {
  display: inline-block;
  color: var(--gray-darker);
}

.companies-list .item .company-info .company-more {
  white-space: nowrap;
  font-weight: 600;
  color: var(--gray-darker);
  cursor: pointer;
}

.companies-list .item .company-info .company-more:hover,
.companies-list .item .company-info p > a:hover > .company-more {
  color: var(--accent-color);
}

.companies-list .item .company-info .tags-list {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0;
}

.companies-list .item .company-info .tags-list .child {
  line-height: 16px;
}

.companies-list .item .company-info .tags-list .child > span,
.companies-list .item .company-info .tags-list .child > a {
  color: var(--gray);
  background-color: transparent;
  border: 1px solid var(--gray-superlight);
  padding: 1px 6px;
  font-size: 12px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-clamp: 1;
}

.companies-list .item .company-info .company-subtitle .child > a {
  background-color: var(--gray-superlight);
  font-size: 13px;
  padding: 2px 6px;
}

.companies-list .item .company-info .tags-list .child.tag-ecoplus > a {
  color: var(--badge-ecoplus-level-0);
  border-color: var(--badge-ecoplus-level-0);
  background-color: transparent;
  font-size: 14px;
  user-select: none;
}

.companies-list .item .company-info .tags-list .child.tag-ecoplus > a:hover {
  color: #FFF;
  background-color: var(--badge-ecoplus-level-0);
}

.companies-list .item .company-info .tags-list .child.tag-ecoplus svg {
  height: 13px;
  vertical-align: baseline;
}

.companies-list .item .company-info .tags-list .child.tag-ecoplus.level-1 > a { color: var(--badge-ecoplus-level-1); border-color: var(--badge-ecoplus-level-1); }
.companies-list .item .company-info .tags-list .child.tag-ecoplus.level-2 > a { color: var(--badge-ecoplus-level-2); border-color: var(--badge-ecoplus-level-2); }
.companies-list .item .company-info .tags-list .child.tag-ecoplus.level-3 > a { color: var(--badge-ecoplus-level-3); border-color: var(--badge-ecoplus-level-3); }
.companies-list .item .company-info .tags-list .child.tag-ecoplus.level-4 > a { color: var(--badge-ecoplus-level-4); border-color: var(--badge-ecoplus-level-4); }
.companies-list .item .company-info .tags-list .child.tag-ecoplus.level-1:hover > a { color: #FFF; background-color: var(--badge-ecoplus-level-1); }
.companies-list .item .company-info .tags-list .child.tag-ecoplus.level-2:hover > a { color: #FFF; background-color: var(--badge-ecoplus-level-2); }
.companies-list .item .company-info .tags-list .child.tag-ecoplus.level-3:hover > a { color: #FFF; background-color: var(--badge-ecoplus-level-3); }
.companies-list .item .company-info .tags-list .child.tag-ecoplus.level-4:hover > a { color: #FFF; background-color: var(--badge-ecoplus-level-4); }

.companies-list .item .company-content {
  display: table-cell;
  vertical-align: middle;
  width: 45%;
  line-height: 0;
  font-size: 0;
}

.companies-list .item .company-content:after {
  content: "";
  display: table;
  clear: right;
}

.companies-list .item .company-content .photo-container {
  float: right;
  display: block;
  width: 33.33333333333333%;
  padding: 0 4px;
  box-sizing: border-box;
  background: no-repeat center url("../img/placeholder--4-3.8629905adbcc.png");
  background-size: contain;
}

.companies-list.planning .item .company-content .photo-container {
  padding: 4px;
}

.companies-list .item .company-content .photo-container.no-placeholder {
  background: none;
}

.companies-list .item .company-content .photo-container.photo-add {
  background-image: url("../img/add--4-3.9c4f15594482.png");
}

.companies-list .item .company-content .photo-container .photo-image {
  position: relative;
  display: block;
  border: 1px solid var(--gray-superlight);
  padding-bottom: 100%;
  background: no-repeat center;
  background-size: cover;
}

.companies-list .item .company-content .photo-container .photo-image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color 350ms;
}

.companies-list .item .company-content .photo-container:hover .photo-image:before {
  background-color: rgba(0, 0, 0, 0.22);
}

.companies-list .item .company-info h3.company-title,
.companies-list .item .company-info .company-title h3 {
  margin: 3% 0 4px 0;
}

.companies-list .item .company-info h5 {
  margin: 0 0 3% 0;
}

.companies-list .item-add .company-content .photo-container {
  width: 100%;
  background: none;
}

.companies-list .item-add .company-content .photo-container .photo-image {
  padding-bottom: 33.33333333333333%;
  background-size: contain;
}

.companies-list.company-pros-list .item .company-info .company-title h3,
.listing .companies-list .item .company-info .company-title h3 {
  display: block;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 1.3em;
  font-weight: 300;
  line-height: 1.4em;
  text-transform: uppercase;
  margin: 3% 0;
}

/* Companies List Pro */
.companies-list.company-pros-list .item .company-info .company-title h3 {
  margin: 0;
}

.companies-list.company-pros-list .item .company-info .tags-list .child {
  margin: 4px 0;
}

.companies-list.company-pros-list .company-info .company-logo {
  max-width: 120px;
}

.companies-list.company-pros-list .item .company-info .company-logo img {
  border-radius: 100%;
}

.companies-list.company-pros-list .item .company-content .photo-container .photo-image {
  background-size: 80%;
}

.companies-list.company-pros-cols {
  padding-bottom: 0;
}

.companies-list.company-pros-cols .item {
  border-bottom: 0;
}

.companies-list.company-pros-cols .item:first-child {
  border-top: 0;
  margin-top: 0;
}

.company-pros-list .column {
  padding: 0 18px;
}

.companies-brands .item .company-dropmenu {
  display: table-cell;
  vertical-align: middle;
  width: 10%;
  text-align: right;
}

.companies-brands-list .item .company-info {
  width: 100%;
}

.companies-brands .item .company-info a[href="javascript:void(0);"]:hover.company-title h3,
.companies-brands .item .company-info a[href="javascript:void(0);"].company-title {
  pointer-events: none;
  cursor: default;
  color: var(--gray-ultradark);
}

.companies-brands .item .company-info .company-title h3 {
  margin: 3% 0;
}

.companies-brands .item .company-info + .companies-brands .item .company-dropmenu {
  display: block;
}

/* Companies Forms */
.companies-forms {
  max-width: 1164px;
  margin: 0 auto;
  padding: 3% 18px 6% 18px;
}

.companies-forms.column-single {
  max-width: 560px;
}

.companies-forms h1 {
  font-weight: 200;
  font-size: 2.5em;
  margin: 0 0 25px 0;
  line-height: 1.25em;
}

.companies-forms .forms {
  margin-left: -18px;
  margin-right: -18px;
}

.companies-forms .forms .column {
  padding-top: 0;
  padding-bottom: 0;
}

.companies-forms #field-id_cost_min {
  width: 48%;
}

.companies-forms #field-id_cost_max {
  float: right;
  width: 48%;
}

/* Lead Dashboard */
.lead-dashboard-wrapper {
  max-width: 1500px;
  margin: 0 auto;
  padding: 3% 18px calc(6% + 18px) 18px;
}

.lead-dashboard-wrapper h1 {
  font-weight: 200;
  font-size: 2.5em;
  margin: 0 0 25px 0;
  line-height: 1.25em;
}

.lead-dashboard-wrapper h1 > a {
  color: var(--gray-ultradark);
}

.lead-dashboard {
  border-top: 1px solid var(--gray-superlight);
}

.lead-dashboard .lead {
  position: relative;
  display: block;
  padding: 16px;
  border-bottom: 1px solid var(--gray-superlight);
  line-height: 1.35em;
  color: var(--gray-darker);
}

.lead-dashboard .lead:last-child {
  border-bottom: none;
}

.lead-dashboard .lead.more-lead {
  border-bottom: 0;
  padding: 16px 16px 37px 16px;
}

.lead-dashboard .lead.more-lead:hover {
  background-color: var(--background-color);
}

.lead-dashboard .lead.more-lead .user-image .bi {
  font-size: 42px;
  color: var(--gray-ultradark);
}

.lead-dashboard .lead.more-lead:hover .user-image .bi {
  color: var(--accent-color);
}

.lead-dashboard .lead.more-lead h3 {
  margin: 7px 0;
}

.lead-dashboard .lead .user-image {
  margin: 0 10px 0 0;
}

.lead-dashboard .lead .lead-username {
  display: block;
  color: var(--gray-ultradark);
  font-weight: 600;
  margin-top: 2px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.lead-dashboard .lead .lead-location {
  display: inline-block;
  font-size: 0.85em;
  font-weight: 400;
  color: var(--gray);
  margin: 0 0 0 4px; /* margin: 2px 0 0 4px; If aligned with username instead of text preview */
  float: right;
}

.lead-dashboard .lead .lead-preview {
  display: block;
  font-size: 0.96em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.lead-dashboard .lead .lead-date {
  display: block;
  margin-top: 2px;
  font-size: 0.85em;
  color: var(--gray);
  white-space: nowrap;
}

.lead-dashboard .lead.is-unread {
  font-weight: 600;
  color: var(--gray-ultradark);
  background-color: var(--gray-ultralight);
}

.lead-dashboard .lead.is-unread .lead-date {
  color: var(--accent-color);
}

.lead-dashboard .lead.selected,
.lead-dashboard .lead.is-unread:hover,
.lead-dashboard .lead:hover {
  background-color: var(--user-notification-hover);
}

.lead-list {
  border-bottom: 1px solid var(--gray-superlight);
}

.lead-detail {
  display: flex;
  height: calc(100vh - 60px);
}

.lead-detail .lead-list {
  visibility: hidden;
  width: 100%;
  max-width: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lead-detail .lead-messages {
  visibility: hidden;
  width: 100%;
  max-width: 770px;
  padding: 0 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lead-detail .lead-content {
  position: relative;
  width: 45%;
  margin-left: 18px;
  padding-right: calc(4% + 16px);
  font-size: 0.9em;
  overflow-y: auto;
  box-sizing: border-box;
}

.lead-detail .lead-content .gnr-dropmenubutton {
  position: absolute;
  top: 10px;
  right: 10px;
}

.lead-detail .lead-messages::-webkit-scrollbar,
.lead-detail .lead-content::-webkit-scrollbar {
  background: var(--gray-superlight);
  width: 8px;
}

.lead-detail .lead-messages::-webkit-scrollbar-thumb,
.lead-detail .lead-content::-webkit-scrollbar-thumb {
  background: var(--gray-light);
  border-radius: 4px;
}

.lead-detail .lead-list::-webkit-scrollbar {
  background: var(--background-color);
  width: 8px;
}

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

.lead-detail .lead-content .users-messages {
  margin-top: 20px;
}

.lead-detail .lead-content .users-messages .error.is-spam {
  font-weight: 400;
}

.lead-detail .lead-content .users-messages a {
  font-weight: 600;
}

.lead-detail .lead-content h3 {
  margin-top: 22px;
}

.lead-detail .lead-content .lead-name {
  margin-top: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.lead-detail .lead-content .lead-specs {
  font-size: 1.1em;
  line-height: 1.65em;
}

/* Listing 2.0 */
.listing2 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5% 18px 6% 18px;
}

.listing2.full-width {
  margin: 0 auto;
  max-width: 2000px;
  padding: 2.5% 40px 6%;
}

.listing2 .companies-list {
  padding-bottom: 0;
}

.listing2 .row.inset .no-results {
  padding: 0 18px;
}

.listing2 h1,
.listing2 h2 {
  font-weight: 200;
  font-size: 2.5em;
  margin: 0 0 1% 0;
  line-height: 1.25em;
}

.listing2 ul:not([class]) {
  line-height: 1.75em;
  list-style: initial;
  padding-left: 18px;
}

.listing2 h3,
.listing2 p {
  margin: 18px 0;
}

.listing2 .page-body {
  margin-top: 28px;
}

.listing2 .listing2-show-more {
  display: block;
  text-align: center;
  background-color: var(--accent-color);
  color: #FFF;
  padding: 18px 10%;
  font-weight: 600;
  line-height: 1.8em;
  margin: 18px 0 6% 0;
  border-radius: 5px;
  box-sizing: border-box;
  transition-property: background-color, border-color;
  transition-duration: 0.3s;
}

.listing2 .listing2-show-more:hover {
  background-color: #D74A33;
}

.forms .form-filters .form-field {
  margin-bottom: 0;
  width: auto;
  clear: none;
  margin-right: 12px;
  margin-top: 16px;
}

.forms .form-filters .form-field:last-child {
  margin-right: 0;
}

.forms .form-filters .form-field select {
  border-color: var(--gray-superlight);
  color: var(--gray-superlight);
}

.forms .form-filters optgroup {
  color: var(--gray-ultradark);
}

.form-filters .select2 {
  width: auto !important;
}

.form-filters .select2-container .select2-selection--single {
  height: auto;
}

.form-filters .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 15px 35px 15px 20px;
}

.form-filters .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}

.form-filters .select2-container--default .select2-selection--single {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background-color: var(--background-color);
}

.form-filters .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--accent-color);
}

.form-filters .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-weight: 600;
  color: var(--accent-color);
}

.form-filters .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--accent-color);
}
.form-filters .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-bottom-color: var(--accent-color);
}

.categories-list h3 {
  font-size: 1.6em;
  margin: 3% 0 2% 0;
}

.categories-list .row {
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: 2%;
}

.categories-list .column {
  padding: 8px;
}

.categories-list .category {
  display: inline-block;
}

.categories-list .category h6 {
  font-size: 0.9em;
  line-height: 1.5em;
  text-align: center;
  margin: 10px;
}

.categories-list .category img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  transition: filter 350ms
}

.categories-list .category:hover img {
  filter: brightness(0.78);
}

.categories-alphabetical {
  max-width: 1200px;
  margin: 0 auto 4% auto;
}

.categories-alphabetical .row {
  margin-left: -4px;
  margin-right: -4px;
}

.categories-alphabetical .column {
  padding: 2px 4px;
}

.categories-alphabetical h3 {
  font-size: 1.6em;
  margin: 4% 0 0 0;
}

.categories-alphabetical h6 {
  font-size: 1.3em;
  margin: 2.5% 0 1% 0;
}

.categories-alphabetical .category {
  line-height: 1.5em;
}

.categories-alphabetical .category:not(:hover) {
  color: var(--gray-darker);
}

.photo-list {
  margin: 20px auto;
  width: 100%;
  display: grid;
  grid-auto-flow: dense;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
}
@media (min-width: 800px) {
  .photo-list {
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  }
}
@media (min-width: 1200px) {
  .photo-list {
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  }
}
@media (min-width: 1500px) {
  .photo-list {
    grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
  }
}
@media (min-width: 2000px) {
  .photo-list {
    grid-template-columns: repeat(auto-fill,minmax(325px,1fr));
  }
}

.photo-list .photo {
  display: inline-block;
}

.photo-list .photo .photo-thumb {
  display: block;
  position: relative;
  z-index: 10;
}

.photo-list .photo .photo-thumb:hover .photo-img {
  filter: brightness(80%);
  transition: filter 175ms;
}

.photo-list .photo .photo-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.photo-list .photo .photo-thumb:hover .photo-title,
.photo-list .photo .photo-thumb:hover .user-action-bar {
  opacity: 1;
}

.photo-list .photo .user-action-bar {
  text-align: center;
  opacity: 0;
  position: absolute;
  z-index: 20;
  bottom: 6px;
  left: 0;
  width: 100%;
  transition: opacity 175ms;
}

.photo-list .photo .photo-title {
  opacity: 0;
  position: absolute;
  z-index: 20;
  top: 12px;
  color: #fff;
  margin: 0 16px;
  line-height: 1.5em;
  font-weight: 600;
  font-size: 1.2em;
  transition: opacity 175ms;
}

.photo-list .photo .user-action-bar .user-action-button {
  background-color: #FFF;
  border: 0;
  padding: 12px 16px;
  max-height: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.photo-list .photo .user-action-bar .action-text {
  display: inline-block;
}

.photo-list .photo .photo-company {
  display: flex;
  margin-top: 8px;
}

.photo-list .photo .photo-company-avatar {
  display: inline-block;
  vertical-align: middle;
  border-radius: 100%;
  margin-right: 4px;
  width: 20px;
  height: 20px;
}

.photo-list .photo .photo-company-name {
  min-height: 42px;
  display: inline-block;
  vertical-align: middle;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 0.9em;
  font-weight: bold;
  line-height: 1.66em;
  color: var(--gray-ultradark);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.photo-list .photo .photo-company:hover .photo-company-name {
  color: var(--accent-color);
}

/* Photo View 2.0 */
.view {
  display: grid;
  grid-template-columns: minmax(600px, calc(100vw - 600px)) 440px;
  grid-template-rows: 1fr minmax(580px, calc(100vh - 300px));
  grid-template-areas:
    "top top"
    "main right"
    "actionleft actionright"
    "bottom bottom";
  justify-content: center;
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 22px;
}

.view .view-main {
  grid-area: main;
  position: relative;
  width: 100%;
  height: 100%;
}

.view .view-image {
  border: 1px solid var(--gray-superlight);
  background-color: var(--gray-ultralight);
  border-radius: 2px;
  width: 100%;
  height: 100%;
}

.view .view-pan {
  width: 100%;
  height: 100%;
  position: absolute;
}

.view .view-pan img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}


.view .view-right {
  grid-area: right;
  padding-left: 40px;
  padding-right: 16px;
  margin-bottom: 16px;
  overflow: auto;
}

.view .view-right::-webkit-scrollbar {
  width: 6px;
  background: var(--gray-superlight);
  border-radius: 4px;
}

.view .view-right::-webkit-scrollbar-thumb {
  background: var(--gray-light);
  border-radius: 4px;
}

.view .view-bottom {
  grid-area: bottom;
}

.view header > h1 {
  font-size: 1.6em;
}

.view .view-right > h1 {
  font-size: 1em;
  font-weight: 600;
  font-family: var(--primary-font);
}

.view .view-right .buttons {
  width: 100%;
  margin: 18px 0;
}

.view h3 {
  font-size: 1.1em;
}

.view .view-bottom h3 {
  margin: 30px 0 12px 0;
  font-size: 1.1em;
}

.view .company-block .company-logo {
  margin-top: 6px;
}

.view .view-description p {
  margin: 2.5% 0;
  line-height: 1.5em;
  font-size: 0.96em;
}

.view .view-description ul:not([class]) {
  list-style: initial;
  padding-left: 17px;
  margin: 2.5% 0;
  line-height: 1.5em;
  font-size: 0.96em;
}

.view .view-description .article-description p {
  color: var(--gray);
}

.view .view-right .tags-list {
  margin: 20px 0 0 0;
}

.view .view-actionleft {
  grid-area: actionleft;
}

.view .view-actionright {
  grid-area: actionright;
}

.view .company-user-action-bar-wrapper,
.view .user-action-bar {
  margin: 20px 0 0 0;
}

.view .view-more {
  margin: 0 -6px 40px -6px;
}

.view .view-more-item {
  display: inline-block;
  padding: 6px;
  box-sizing: border-box;
}

.view button.view-more-item {
  background: none;
  border: none;
  cursor: pointer;
}

.view .view-more-item img {
  width: 100%;
  height: auto;
}

.view .view-more.slick-listing .slick-prev,
.view .view-more.slick-listing .slick-next {
  top: 49%;
}

.view .view-image:hover .view-prev,
.view .view-image:hover .view-next {
  opacity: 0.75;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

.view .view-image .view-prev,
.view .view-image .view-next {
  opacity: 0;
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  padding: 0;
  cursor: pointer;
  border: none;
  outline: none;
  z-index: 10;
  background: no-repeat center center;
  transition: opacity 350ms;
}

.view .view-image .view-prev {
  background-image: url("../img/slider-arrow-prev-black.5fc742280d6f.png");
  background-position: left 12px center;
  width: 40%;
}

.view .view-image .view-next {
  background-image: url("../img/slider-arrow-next-black.1e27fe128918.png");
  background-position: right 12px center;
  width: 60%;
}

.view .view-image .view-prev:hover,
.view .view-image .view-prev:focus,
.view .view-image .view-next:hover,
.view .view-image .view-next:focus {
  outline: none;
}

.view .view-image .view-prev {
  left: 0;
}

.view .view-image .view-next {
  right: 0;
}

.view .view-right .forms .form-field {
  margin-bottom: 18px;
}

.view .view-right .forms .buttons {
  margin-top: 6px;
}

.view .view-right ul.users-messages li {
  padding: 15px 22px;
}

.profil-author {
  display: flex;
}

.profil-author .profil-thumb {
  display: flex;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-right: 12px;
}

.profil-author .profil-thumb > img {
  align-self: center;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.profil-author .profil-info {
  display: block;
  align-self: center;
  max-width: calc(100% - 84px); /* Maintain profile thumbnail size with lengthy nowrap company stats (subtract .profil-thumb width + margin) */
}

.profil-author .profil-info h3 {
  font-size: 1.1em;
  margin: 0;
}

.profil-author .profil-info .company-stats {
  margin: 0;
}

.user-list {
  margin-bottom: 6%;
}

.user-list .user-item {
  display: flex;
  margin-bottom: 18px;
  align-items: center;
}

.user-list .user-item .user-photo {
  width: 60px;
  height: 60px;
  margin-right: 12px;
}

.user-list .user-item .user-photo > img {
  border-radius: 100%;
}

.user-list .user-item .user-info {
  width: 100%;
}

.user-list .user-item .user-info .buttons {
  display: none;
  margin: 6px 0 10px 0;
  padding: 7px 14px;
}

.user-list .user-item .user-info .user-name {
  display: inline-block;
  color: var(--gray-darker);
  font-size: 1.1em;
  font-weight: 600;
}

.user-list .user-item .user-info .user-name:hover {
  color: var(--accent-color);
}

.user-list .user-item .user-info p {
  margin: 4px 0 0 0;
  font-size: 0.9em;
  line-height: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp:2;
}

.user-list .user-item .user-button {
  margin-left: 30px;
}

.user-list .user-item .buttons {
  white-space: nowrap;
  font-size: 0.9em;
  padding: 9px 17px;
}

.user-list .inline-ecoplus {
  color: var(--badge-ecoplus-level-0);
  font-weight: 600;
}

.user-list .inline-ecoplus.level-1 { color: var(--badge-ecoplus-level-1); border-color: var(--badge-ecoplus-level-1); }
.user-list .inline-ecoplus.level-2 { color: var(--badge-ecoplus-level-2); border-color: var(--badge-ecoplus-level-2); }
.user-list .inline-ecoplus.level-3 { color: var(--badge-ecoplus-level-3); border-color: var(--badge-ecoplus-level-3); }
.user-list .inline-ecoplus.level-4 { color: var(--badge-ecoplus-level-4); border-color: var(--badge-ecoplus-level-4); }


/* Photos Editor */
.photos-editor {
  margin: 0 -4px 24px -4px;
}

.photos-editor .editor-listing:after {
  content: "";
  display: table;
  clear: left;
}

.photos-editor .editor-item {
  position: relative;
  width: 33.33333333333333%;
  float: left;
  border: 4px solid var(--background-color);
  box-sizing: border-box;
}

.photos-editor .ui-sortable .editor-item {
  display: inline-table;
  cursor: grab;
}

.photos-editor .ui-sortable .editor-item:active {
  cursor: grabbing;
}

.photos-editor .ui-sortable.ui-sortable-disabled .editor-item:active,
.photos-editor .ui-sortable.ui-sortable-disabled .editor-item {
  cursor: default;
}

.photos-editor #editor-select,
.photos-editor .editor-item .editor-select {
  z-index: 15;
  position: absolute;
  top: 8px;
  left: 8px;
  border: 7px solid transparent;
  cursor: pointer;
}

.photos-editor.editor-disabled .editor-item .editor-select {
  display: none;
}

.photos-editor.editor-selection-enabled .editor-item .editor-select {
  width: 100%;
  height: 100%;
  border: 0;
  top: 0;
  left: 0;
}

.photos-editor #editor-select svg,
.photos-editor .editor-item .editor-select svg {
  display: inline-block;
  color: transparent;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  border-radius: 100%;
  transition: border-color 225ms, color 225ms, background-color 225ms;
}

.photos-editor #editor-select {
  position: static;
  background: none;
  padding: 0;
  outline: 0;
}

.photos-editor #editor-select svg {
  border-color: var(--gray-light);
}

.photos-editor #editor-select[disabled]:hover svg {
  cursor: default;
  color: transparent;
  border-color: var(--gray-light);
}

.photos-editor #editor-select.pending svg,
.photos-editor #editor-select:hover svg {
  color: var(--gray-darker);
  border-color: var(--gray-darker);
}

.photos-editor #editor-select.active svg {
  color: #FFF;
  border-color: var(--accent-color);
  background: var(--accent-color);
}

.photos-editor.editor-selection-enabled .editor-item .editor-select svg {
  margin: 15px;
}

.photos-editor .editor-item:hover .editor-select svg {
  color: rgba(255, 255, 255, 0.45);
}

.photos-editor .editor-item .editor-select:hover svg {
  color: var(--gray-darker);
  border-color: #FFF;
  background: #FFF;
}

.photos-editor .editor-item.selected .editor-select svg {
  color: #FFF;
  border-color: var(--accent-color);
  background: var(--accent-color);
}

.photos-editor .editor-item .editor-cover {
  position: absolute;
  top: 13px;
  right: 16px;
  color: #FFF;
  opacity: 0;
  z-index: 15;
  cursor: pointer;
  transition: opacity 250ms;
}

.photos-editor .editor-item:hover .editor-cover {
  opacity: 0.45;
}

.photos-editor .editor-item .editor-cover:hover {
  opacity: 1;
}

.photos-editor .editor-item.is-cover .editor-cover {
  cursor: inherit;
  opacity: 1;
}

.photos-editor.editor-selection-enabled .editor-item.is-cover .editor-cover {
  cursor: pointer;
  opacity: 1;
}

.photos-editor.editor-disabled .editor-item .editor-cover,
.photos-editor.editor-selection-enabled .editor-item .editor-cover {
  opacity: 0;
}

.photos-editor .editor-item .editor-cover svg {
  width: 30px;
  height: 30px;
}

.photos-editor .editor-item:not(.is-cover) .editor-cover:active {
  top: 11px;
  right: 14px;
}

.photos-editor .editor-item:not(.is-cover) .editor-cover:active svg {
  width: 33px;
  height: 33px;
}

.photos-editor .editor-image {
  padding-bottom: 100%;
  background: url("../img/placeholder--4-3.8629905adbcc.png") #FFF no-repeat center;
  background-size: cover;
  border: 1px solid var(--gray-superlight);
}

.photos-editor .editor-item.is-removed .editor-image {
  background-size: 94%;
  background-color: var(--messages-error);
}

.photos-editor .editor-item.selected .editor-image {
  background-size: 75%;
  background-color: var(--background-color);
}

.photos-editor .editor-image:before {
  content: "";
  display: block;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0,0,0,0.19931722689075626) 0%, rgba(255,255,255,0) 100%);
}

.photos-editor .editor-image.not-listed:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--messages-error);
  opacity: 0.6;
}

.photos-editor .selected .editor-image:before {
  display: none;
}

.photos-editor .editor-item .editor-hidden {
  display: none;
}

.photos-editor #editor-placeholder {
  display: none;
}

.photos-editor .editor-panel {
  display: block;
  padding: 4px;
}

.photos-editor.editor-disabled .editor-panel {
  display: none;
}

.photos-editor .editor-panel .buttons {
  margin-right: 5px;
}

.photos-editor #editor-delete[disabled] > span {
  display: none;
}

#field-id_dropzone .dropzone-terms {
  font-size: 80%;
  color: var(--gray);
}

#field-id_dropzone .dropzone-terms > a {
  color: var(--gray-darker);
}

/* RAS */

.ras {
  display: none;
}

.ras-pixel {
  display: none;
}

.ras h6 {
  text-align: right;
  color: var(--gray);
  font-size: 0.72em;
  margin: 6px 0 0 0;
  max-width: 300px;
}

.ras.bbd {
  display: inline-block;
  max-width: 970px;
}

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

.ras.psvr .bbd.partner-image {
  max-width: 100%;
  height: auto;
}

.ras.psvr .bbd.partner-name {
  margin-right: 0;
  max-width: 970px;
}

.ras.dpg {
  display: inline-block;
  width: 100%;
  margin: 4% auto;
  max-width: 300px;
}

.ras.dpg .dpa {
  display: block;
  border: 1px solid var(--gray-superlight);
  max-width: 300px;
}

.ras.dpg .dpa-img {
  display: block;
  width: 100%;
  line-height: 0;
  text-align: center;
  overflow: hidden;
}

.ras.dpg .dpa-img.last {
  margin-top: 8px;
}

.ras.dpg .dpa-img > img {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
}

.ras.dpg .dpa .dpa-content {
  display: block;
  padding: 25px 18px;
  text-align: center;
}

.ras.dpg .dpa-logo {
  display: inline-block;
  width: 190px;
  height: 80px;
}

.ras.dpg .dpa-logo > img {
  display: inline-block;
  line-height: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.ras.dpg .dpa h6 {
  margin-top: 27px;
  margin-right: 8px;
}

.ras.psvr .list.grid-4.column {
  margin-right: 0;
}

.ras.psvr .column.col-3 p {
  font-size: 1em;
}

.ras.txt .node-container {
  width: 1000px;
  padding: 36px 18px;
  background: var(--accent-color);
}

.ras.txt .node-content {
  padding-left: 68px;
  max-width: 214px;
}

.ras.txt .node-logo {
  float: left !important;
  max-width: 50px;
  height: auto;
}

.ras.txt h3 {
  color: #FFF;
  font-weight: 500;
  font-size: 1em;
  text-transform: uppercase;
}

.ras.txt p {
  color: #FFF;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 0.96em;
  font-weight: 300;
}

.ras.txt .node-button {
  margin-top: 30px;
  color: var(--gray-superdark);
  background: #FFF;
  font-size: 0.96em;
}

.ras.art {
  width: 100%;
  display: flex;
}

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

.ras.art .ras-image {
  display: block;
  float: left;
  width: 50%;
  background-size: cover;
  background-position: right center;
}

.ras.art .ras-content-wrapper {
  float: left;
  width: 50%;
  text-align: center;
  overflow: visible;

}

.ras.art .ras-content-wrapper .ras-content {
  overflow: hidden;
  padding: 6%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.ras.art .ras-content h2 {
  font-size: 1.85em;
  margin: 0 0 3% 0;
}

.ras.art .ras-content h3 {
  font-size: 1.15em;
  margin: 5% 0;
}

.ras.art .ras-content .buttons:hover {
  background: var(--accent-color);
}

.discussions-list .discussion-row {
  border-bottom: 1px solid var(--gray-lightest);
  padding: 18px 0;
  line-height: 1.65em;
}

.discussions-list .related-products {
  border-bottom: 1px solid var(--gray-lightest);
  padding: 18px 0;
}

.discussions-list .ibl {
  display: inline-block;
  margin-right: 16px;
}

.discussions-list .discussion-title h3 {
  display: block;
  margin: 0 0 4px 0;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.4em;
}

.discussions-list .discussion-row .discussion-details {
  margin: 18px 0 0 0;
}

.discussions-list .node-teaser p {
  margin: 0;
}

.discussions-list .discussion-author {
  color: var(--gray-darker);
}

.discussions-list .discussion-date {
  color: var(--gray-darker);
}

.discussions-list .discussion-comments {
  color: var(--gray-darker);
}

.discussions-list .discussion-section {
  display: inline-block;
  color: var(--gray-darker);
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 0.93em;
  font-weight: 600;
}

.section-discussions .content-article {
  padding-top: 3%;
}

.section-discussions .article-container article .ras.art {
  min-height: 285px;
}

.discussions-cover .cover-image.format-panoramic {
  height: auto;
}

.discussions-cover .dark-layer {
  background: rgba(8, 3, 3, 0.6);
}

.discussions-cover .cover-image h1 {
  text-transform: none;
  font-weight: 300;
  text-align: left;
  font-size: 2.8em;
  line-height: 1.4em
}

.discussions-cover .cover-image .view-answer {
  font-weight: 600;
  font-size: 1.6em;
}

.discussions-cover .cover-image.format-panoramic .content-wrapper {
  max-width: 1200px;
  transform: none;
  top: initial;
  padding: 6% 18px;
}

.discussions-cover .cover-image.format-panoramic .content-wrapper .content {
  max-width: 770px;
}

.article-discussion {
  margin-bottom: 28px;
}

.article-discussion h1 {
  font-weight: 200;
  font-size: 2.5em;
  margin: 9% 0 3% 0;
  line-height: 1.25em;
}

.article-discussion article {

}

.article-discussion .author-container .article-date {
  margin-left: 0;
}

.article-discussion .author-container {

}

/* Sidelist */
.sidelist {
  margin: 0 0 45px 0;
}

.sidelist .row {
  margin: 5% 0;
}

.sidelist .node-thumb {
  display: inline-block;
  width: 120px;
  height: 120px;
  vertical-align: top;
  background: var(--gray-ultralight);
}

.sidelist .node-content {
  display: inline-block;
  width: 170px;
  margin-left: 10px;
  vertical-align: top;
}

.sidelist .node-content .node-title h3 {
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.4em;
}

.sidelist-discussions .row {
  margin: 4% 0;
  border-bottom: 1px solid var(--gray-lightest);
  padding-bottom: 3%;
}

.sidelist-discussions .node-content {
  margin-left: 0;
  width: 100%;
}

/* Education */
.course-article {
  padding-right: 0;
  padding-left: 0;
}

.course-article .article-container {
  padding-left: 18px;
}

.course-article .users-messages {
  margin-top: 18px;
}

.cover-image {
  position: relative;
  height: 540px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.cover-image h1,
.cover-image h2,
.cover-image h3 {
  margin: 1.5% 0;
  font-weight: 400;
  line-height: 1.3em;
  font-size: 4.7em;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 0.6em rgba(0, 0, 0, 0.6);
}

.cover-image h3 {
  font-size: 2em;
  margin: 0;
}

.cover-image h3 > a,
.cover-image h3,
.cover-image h4,
.cover-image h5,
.cover-image h6,
.cover-image p {
  color: #FFF;
}

.dark-layer {
  position: absolute;
  z-index: 75;
  width: 100%;
  height: 100%;
  background: url("../img/cover-gradient.ab36342b2c1a.png") transparent repeat-x top;
}

.cover-image .content-wrapper {
  position: relative;
  margin: 0 auto;
  max-width: 1270px;
  width: auto;
  padding: 1px 10%;
  top: 40%;
  transform: translateY(-50%);
  z-index: 100;
}

.cover-image .photo-credit {
  color: var(--gray-light);
  position: absolute;
  bottom: 35px;
  right: 35px;
  z-index: 100;
  opacity: 0.65;
}

.cover-image.format-panoramic {
  height: 480px;
}

.cover-image.format-panoramic p {
  font-size: 1.3em;
  text-align: center;
}

.cover-image.format-panoramic p a:not([class]) {
  color: #FFF;
  text-shadow: 0 0 6px var(--gray);
}

.cover-image.format-panoramic .content-wrapper {
  top: 50%;
}

.cover-image.format-large {
  height: 850px;
}

.cover-image.format-form {
  height: 280px;
}

.cover-image.format-form h1 {
  font-size: 2.3em;
  text-transform: none;
}


.cover-image.format-form .forms .form-field button,
.cover-image.format-form .forms .form-field input,
.cover-image.format-form .forms .form-field select,
.cover-image.format-form .forms .form-field .select2-selection {
  font-size: 1.2em;
  border: 0;
  padding: 12px 16px;
  height: 47px;
  outline: none;
  vertical-align: top;
}

.cover-image.format-form .forms .form-field .select2-selection {
  padding: 4px 54px 4px 8px;
}

.cover-image.format-form .forms .form-field .select2-selection .select2-selection__rendered {
  padding: 8px 11px;
}

.cover-image.format-form .forms .form-field .select2-results {
  font-size: 1.2em;
}

.cover-image.format-form .forms .form-field .select2-selection .select2-selection__arrow {
  background-color: var(--accent-color);
  height: 47px;
  right: 0;
  top: 0;
  border-radius: 0 4px 4px 0;
  width: 47px;
}

.cover-image.format-form .forms .form-field .select2-container--open .select2-selection .select2-selection__arrow {
  border-radius: 0 4px 0 0;
}

.cover-image.format-form .forms .form-field .select2-selection .select2-selection__arrow b {
  border-color: #FFF transparent transparent transparent;
}

.cover-image.format-form .forms .form-field .select2-container--open .select2-selection .select2-selection__arrow b {
  border-color: transparent transparent #FFF transparent;
}

.cover-image.format-form .forms .form-field button {
  width: 18%;
  background-color: var(--accent-color);
  color: #FFF;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cover-image.format-form .content-wrapper {
  top: 50%;
  padding: 0 8%;
  max-width: 1030px;
}

.cover-image.format-form .content-wrapper .forms {
  max-width: 800px;
  margin: 0 auto;
}

.cover-image.format-large h1,
.cover-image.format-large h2,
.cover-image.format-large h3 {
  text-align: left;
}

.cover-image.format-large p {
  margin: 6% 0;
  font-size: 1.3em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.cover-image.format-large .buttons {
  color: #FFF;
  background-color: var(--accent-color);
  margin: 0;
}

.cover-image.format-large .dark-layer {
  background: var(--dark-layer);
  opacity: 0.30;
}

.cover-image.format-large .content-wrapper {
  top: 60%;
}

.cover-image.format-large .content-wrapper .content {
  text-align: left;
  max-width: 800px;
}

/* Tracks / Lessons */

.lesson-article {
  max-width: none;
}

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

.lesson-article .lesson-section-container {
  max-width: 770px;
}

.lesson-article .track-introduction .track-info {
  display: inline-block;
  padding-right: 15px;
  margin-right: 9px;
  border-right: 1px solid var(--gray-lightest);
  line-height: 1.65em;
}

.lesson-article .track-introduction .track-info:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

.lesson-article .content-navigation-container {
  margin-top: 3%;
}

.lesson-article .content-navigation .child > a {
  font-size: 1.04em;
}

.lesson-article .article-container {
  width: 75%;
  max-width: none;
  float: right;
  padding: 0 44px 0 0;
  margin: 0;
  box-sizing: border-box;
}

.lesson-article .article-container h2 {
  margin: 5% 0 3% 0;
}

.lesson-article .article-container .cover-image {
  font-size: 0.8em
}

#content .lesson-article .sidebar {
  width: 20%;
  float: left;
  background: var(--background-color);
}

.lesson-article .sidebar .filter {
  margin: 0;
  padding: 18px 22px 18px 44px;
  border-bottom: 1px solid var(--gray-lightest);
}

.lesson-article .sidebar .filter.selected {
  background: var(--gray-ultralight);
}

.lesson-article .sidebar .filter .filter-options .child {
  position: relative;
  padding-left: 26px;
  margin: 12px 0;
  line-height: 1.3em;
}

.lesson-article .sidebar .filter .filter-options .child:not(:last-child):after {
  content: "";
  display: block;
  background-color: var(--gray-lighter);
  width: 2px;
  height: 100%;
  position: absolute;
  top: 29px;
  left: 35px;
}

.lesson-article .sidebar .filter .filter-options .child.in-progress:after {
  background-color: var(--accent-color);
}

.lesson-article .sidebar .filter .filter-options .child .lesson-check {
  float: left;
  margin-top: 9px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: var(--background-color);
  border: 2px solid var(--gray-lighter);
  border-radius: 100%;
  vertical-align: top;
  text-align: center;
}

.lesson-article .sidebar .filter .filter-options .child.completed .lesson-check {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.lesson-article .sidebar .filter .filter-options .child.selected .lesson-check {
  border-color: var(--accent-color);
}

.lesson-article .sidebar .filter .filter-options .child.selected.completed .lesson-check {
  background-color: #FFF;
  border-color: var(--accent-color);
}

.lesson-article .sidebar .filter .filter-options .child .lesson-check > svg {
  vertical-align: baseline;
  color: #FFF;
}

.lesson-article .sidebar .filter .filter-options .child.selected.completed .lesson-check > svg {
  color: var(--accent-color);
}

.lesson-article .sidebar .filter .filter-options .child > a {
  display: inline-block;
  font-weight: 600;
  font-size: 1em;
  margin-left: 10px;
  padding: 10px 0;
  vertical-align: top;
  max-width: calc(100% - 30px);
  border-bottom: 0;
  color: var(--gray-ultradark);
}

.lesson-article .sidebar .filter .filter-options .child.selected > a,
.lesson-article .sidebar .filter .filter-options .child > a:hover {
  color: var(--accent-color);
}

.lesson-article .sidebar .filter .filter-options .child > a .lesson-stats {
  display: block;
  font-size: 0.9em;
  font-weight: 400;
  color: var(--gray-ultradark);
  margin-top: 4px;
  min-height: 18px;
}

.lesson-article .sidebar .filter .filter-options .child.locked .lesson-check > svg {
  color: var(--gray-ultradark);
  width: 13px;
  height: 13px;
}

.lesson-article .sidebar .filter:first-child {
  border-top: 1px solid var(--gray-lightest);
}

.lesson-article .sidebar .filter-title {
  margin: 0;
  padding: 0;
  font-size: 1em;
  border-bottom: 0;
}

.lesson-article .sidebar .filter-title h4 {
  margin: 0;
}

.lesson-article .sidebar .filter-title h6 {
  margin: 0;
  padding: 4px 0;
  font-size: 0.9em;
  font-weight: 400;
}

.lesson-article .sidebar .filter-collapsible .filter-title h3 {
  margin: 0 0 0 26px;
}

.lesson-article .sidebar .filter-collapsible .filter-title h6 {
  margin: 0 0 0 26px;
  font-size: 0.9em;
  font-weight: 400;
}

.lesson-article .sidebar .filter .filter-toggle {
  float: left;
  margin-top: 4px;
  margin-left: 0;
}

.lesson-article .sidebar .filter .filter-toggle::before {
  margin-left: 0;
}

.lesson-article .lesson-tabs {
  display: none;
}

.lesson-article .lesson-tabs.active {
  display: block;
}

.lesson-article .lesson-content {
  background: var(--gray-ultralight);
  overflow: auto;
}

.lesson-article .lesson-content-bottom {
  padding: 18px;
  border: 1px solid var(--gray-superlight);
  background-color: var(--gray-ultralight);
  text-align: right;
  box-sizing: border-box;
}

.lesson-article .lesson-content-bottom.learning-page-body-only {
  border-top: none;
  max-width: 844px;
}

.lesson-article .learning-page-body {
  padding: 0 36px;
}

.lesson-article .learning-page-body.learning-page-body-only {
  padding-top: 7%;
  padding-bottom: 7%;
  max-width: 770px;
  border: 1px solid var(--gray-superlight);
  background-color: var(--gray-ultralight);
  border-radius: 2px;
}

.section-tracks .article-intro {
  padding-bottom: 18px;
  max-width: none;
}

.section-tracks .article-intro:after {
  content: "";
  display: table;
  clear: both;
}

.section-tracks .article-intro header {
  text-align: left;
  padding: 3% 300px 0 18px;
}

.section-tracks .article-intro h1 {
  font-size: 2.5em;
  padding: 0;
}

.section-tracks .track-external {
  float: right;
  margin-right: 18px;
  margin-top: -100px;
}

.section-tracks .track-partner {
  text-align: center;
}

.section-tracks .track-partner > a {
  display: inline-block;
  max-width: 120px;
}

.section-tracks .track-partner img {
  max-width: 100%;
  height: auto;
}

.section-tracks .track-partner h6 {
  display: block;
  color: var(--gray-darker);
  margin: 8px 0 18px 0;
}

.content-navigation.large-menu {
  text-align: center;
  padding-right: 0;
}

.content-navigation {
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-lightest);
  margin: 0;
}

.content-navigation .child {
  display: inline-block;
  margin-right: 3%;
  line-height: 1.9em;
  font-size: 1.07em;
}

.content-navigation .child:last-child {
  margin-right: 0;
}

.content-navigation .child > a {
  display: inline-block;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  color: var(--gray-darker);
  font-weight: 500;
  padding: 9px 8px;
}

.content-navigation .child > a:hover,
.content-navigation .child.selected > a {
  color: var(--accent-color);
}

.content-navigation .child:first-child > a:not(.buttons) {
  padding-left: 0;
}

.content-navigation .child > .buttons {
  color: #FFF;
  padding: 3px 22px;
}

.content-navigation .child > .buttons:hover {
  color: #FFF;
}

.column .content-navigation {
  text-align: left;
}

.instructors-list .instructor {
  margin: 7% 0;
  min-height: 150px;
}

.instructors-list .instructor h3 {
  margin: 0;
}

.instructors-list .instructor h4 {
  margin: 0;
  color: var(--gray);
  font-weight: 400;
}

.instructors-list .instructor-detail {
  margin-left: 180px;
}

.instructors-list .instructor-photo {
  max-width: 150px;
  display: inline-block;
  float: left;
  border-radius: 100%;
}

.instructors-list .instructor-detail .readmore-wrapper.collapsed .readmore-content {
  height: 180px;
}

.side-card {
  border: 1px solid var(--gray-lightest);
  border-top: 0;
  border-bottom: 0;
}

.side-card ul:not([class]) {
  margin: 4% 0;
  font-size: 0.93em;
}

.side-card ul:not([class]) li {
  color: var(--gray-darker);
  line-height: 1.70em;
  margin: 8px 0;
}

.side-card p {
  color: var(--gray-darker);
  font-size: 0.93em;
}

.side-card .course-price {
  display: block;
  text-transform: uppercase;
  font-size: 1.15em;
  font-weight: 600;
  padding: 11px 0;
}

.side-card .card-row {
  padding: 6px 18px;
  border-bottom: 1px solid var(--gray-lightest);
}

.side-card .card-row.dark-row {
  text-align: center;
  color: var(--form-button-text-color);
  background-color: var(--gray-ultradark);
  border: 0;
}

.side-card .card-row .button-ecoplus {
  margin-top: 14px;
}

.side-card .card-date {
  text-align: center;
}

.side-card .card-date.card-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  background: var(--background-color);
  margin: 0 !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  box-sizing: border-box;
  border-top: 1px solid var(--gray-superlight);
}

.side-card .card-date h4 {
  text-transform: uppercase;
  margin: 6px 0;
}

.side-card .card-date .card-title {
  white-space: nowrap;
}

.side-card .card-date p {
  margin: 6px 0;
}

.side-card .card-date .date-hours {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid var(--gray-ultradark);
}

.side-card .card-date .buttons {
  text-transform: uppercase;
  padding: 8px 23px;
  margin: 6px 0;
  background: var(--gray-superdark);
  width: 100%;
}

.side-card .card-date .buttons.button-orange {
  color: #FFF;
  background: var(--accent-color);
}

.side-card .side-map .map-toggle {
  display: block;
  margin: 6px 0;
  cursor: pointer;
}

.side-card .side-map .map-toggle svg,
.side-card .side-map .map-toggle h4:hover {
  color: var(--accent-color);
}

.side-card .side-map .side-map-location {
  display: none;
}

.side-card .side-map .side-map-location p {
  padding: 0 20px;
}

.side-card .side-map .gmap {
  width: 100%;
  height: 300px;
}

.side-card .side-map .map-toggle p {
  margin: 0;
}

.side-card .side-map .map-toggle:hover p {
  color: var(--accent-color);
}

.side-card .card-specs {
  display: block;
  padding: 0;
  font-size: 1em;
  margin: 18px 0;
}

.side-card .card-specs li {
  line-height: 1.2em;
  margin: 10px 0;
  text-align: left;
}

.side-card .card-specs .spec-label {
  display: inline-block;
  vertical-align: top;
  width: 46%;
  margin-right: 4%;
  color: var(--gray-dark);
}

.side-card .card-specs .spec-text {
  display: inline-block;
  vertical-align: top;
  color: var(--gray-superdark);
  width: 50%;
}

.side-card .card-user:after {
  display: table;
  content: "";
  clear: both;
}

.side-card .card-user .card-user-image {
  float: left;
  border-radius: 100%;
}

.side-card .card-user .card-user-subtitle,
.side-card .card-user .card-user-name {
  display: block;
  padding: 7px 0 0 0;
  margin: 0 0 0 75px;
  font-size: 0.81em;
  font-weight: 400;
  color: #FFF;
  text-transform: none;
  text-align: left;
}

.side-card .card-user .card-user-subtitle {
  padding: 4px 0 0 0;
  color: var(--gray-lightest);
  font-size: 0.75em;
}

.side-card .company-block {
  padding: 12px 0;
}

.product-card-container {
  border: 18px solid var(--background-color);
  border-top: 0;
  border-bottom: 0;
  padding: 6% 7%;
  text-align: center;
  background-size: cover;
  background-image: url("../img/product-card-container.65e1f01a3acf.jpg");
}

.product-card-container .product-card {
  display: inline-block;
  border-radius: 4px;
  background-color: var(--background-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 28px 18px 54px 18px;
  min-width: 480px;
  box-sizing: border-box;
}

.product-card-container .product-card p {
  line-height: normal;
}

.product-card-container .product-card h3 {
  margin-top: 35px;
  font-size: 1.6em;
}

.product-card-container .product-card .product-title {
  text-transform: uppercase;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.product-card-container .product-card .product-date {
  text-transform: none;
}

.product-card-container .product-card .product-inactive {
  padding: 28% 0;
}

.product-card-container .product-card .product-inactive.has-script {
  padding: 4% 18px;
}

.product-card-container .product-card .product-inactive h3 {
  margin: 3% 0;
}

.product-card-container .product-card .buttons {
  margin: 6% 0 0 0;
  text-transform: uppercase;
  min-width: 235px;
  padding: 16px 23px;
}

.product-card-container .product-card .buttons .date-day,
.product-card-container .product-card .buttons .date-hours {
  font-weight: 600;
  font-size: .88em;
  white-space: nowrap;
}

.product-card-container .product-card .buttons .date-hours {
  display: block;
}

.product-card-container .product-card .product-payments {
  margin: 3% 0;
}

.product-card-container .product-card .product-payments:after {
  content: "";
  display: table;
  clear: left;
}

.product-card-container .product-card .product-payment-item {
  float: left;
  display: block;
  width: 50%;
  border-right: 1px solid var(--gray-superlight);
  padding: 0 40px;
  box-sizing: border-box;
}

.product-card-container .product-card .product-payment-item:last-child {
  border-right-color: transparent;
}

.inline-price {
  font-size: 3em;
  font-weight: bold;
  color: var(--gray-ultradark);
  white-space: nowrap;
}

.inline-price.old-price {
  font-size: 2.1em;
  color: var(--messages-error);
  text-decoration: line-through;
}

/* Projects */
.section-projects #content .sidebar {
  margin-right: 18px;
  width: 330px;
}

.section-projects .cover-image .dark-layer  {
  background: var(--dark-layer);
  opacity: 0.30;
}

.section-projects .cover-image .content-wrapper {
  top: 60%;
  transform: translateY(-50%);
  max-width: 1164px;
}

.section-projects .cover-image .content-wrapper .content {
  max-width: 800px;
  padding-bottom: 120px;
}

.section-projects .cover-image h1 {
  margin: 1% 0;
  font-size: 4em;
  text-align: left;
  text-transform: none;
  font-weight: 200;
}

.section-projects .cover-image h1 > a {
  color: #FFF;
}

.section-projects .cover-image h3 {
  text-align: left;
  text-transform: none;
  font-weight: 400;
}

.section-projects .cover-image h3.subtitle {
  margin: 2% 0 0 0;
  font-weight: 300;
  font-size: 2.2em;
}

.section-projects .instructor .instructor-detail p {
  margin: 0;
}

.projects-photos h2 {
  text-align: left;
  margin: 0;
}

.projects-photos .photo-item {
  display: block;
  text-align: center;
}

.projects-photos .photo-item .photo-container {
  position: relative;
  overflow: hidden;
}

.projects-photos .photo-item .photo-placeholder {
  display: block;
  background: url("../img/placeholder--4-3.8629905adbcc.png") var(--background-color) no-repeat center;
  background-size: contain;
  border: 1px solid var(--gray-superlight);
}

.projects-photos .photo-item .photo-placeholder:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color 350ms;
}

.projects-photos .photo-item[data-src]:hover .photo-placeholder:before,
.projects-photos .photo-item .photo-container:hover .photo-placeholder:before {
  background-color: rgba(0, 0, 0, 0.22);
}

.projects-photos .photo-item.not-listed .photo-error {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 0, 0, 0.65);
  margin: 0;
  color: #FFF;
  font-size: 1em;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  padding: 18px 30px;
}

.projects-photos .photo-item.not-listed .photo-placeholder:before,
.projects-photos .photo-item.not-listed .photo-container:hover .photo-placeholder:before {
  background-color: rgba(255, 26, 0, 0.23);
}

.projects-photos .photo-item .photo-action {
  opacity: 0;
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
  pointer-events: none;
  transition: opacity 175ms;
}

.projects-photos .photo-item .photo-container:hover .photo-action {
  opacity: 1;
}

.projects-photos .photo-item .photo-action .buttons {
  pointer-events: auto;
  margin: 0 4px 18px 4px;
  min-width: auto;
  padding: 11px 15px;
}

.projects-photos .photo-item .photo-action .buttons > svg {
  vertical-align: middle;
  display: inline-block;
}

.projects-photos .photo-item .photo-action .buttons > span {
  margin-left: 5px;
  vertical-align: middle;
  display: inline-block;
}

.projects-photos .photo-item .photo-action .buttons:hover {
  background: var(--accent-color);
  color: #FFF;
  border-color: var(--accent-color);
}

.projects-photos .photo-item .photo-image {
  display: block;
  padding-bottom: 100%;
  background: no-repeat center;
  background-size: contain;
}

.projects-photos .photo-item img {
  width: 100%;
  height: auto;

}

.projects-photos .photo-item h6 {
  margin: 0;
  padding: 0;
  font-size: 0.9em;
  color: var(--gray-superdark);
  line-height: 1.6em;
}

.projects-photos .photo-item h6 > a {
  padding: 15px 10px 0 15px;
  color: var(--gray-superdark);
  height: 40px;
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.projects-photos .photo-item h6 .photo-category {
  display: block;
}

.projects-photos .photo-item h6 .photo-title {
  display: block;
  font-weight: 400;
}

.projects-photos .photo-add .photo-placeholder {
  background-image: url("../img/add--4-3.9c4f15594482.png");
  background-color: var(--background-color);
}

.projects-photos .photo-item .photo-details {
  display: block;
  margin: 0;
  padding: 15px 4px 0 4px;
  font-size: 0.9em;
  color: var(--gray-superdark);
  line-height: 1.6em;
  text-align: left;
  height: 60px;
}

.projects-photos .photo-item .photo-avatar {
  display: inline-block;
  width: 28px;
  height: 28px;
  float: left;
  margin: 0 4px 0 0;
  border: 4px solid transparent;
  border-radius: 100%;
  background: no-repeat center center;
  background-size:contain;
}

.projects-photos .photo-item .photo-subtitle,
.projects-photos .photo-item .photo-company,
.projects-photos .photo-item .photo-title {
  color: var(--gray-superdark);
  height: 20px;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1em;
}

.projects-photos .photo-item .photo-title {
  font-weight: 600;
  white-space: normal;
  height: auto;
  max-height: 40px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp:2;
}

.projects-photos .photo-item .photo-title-single {
  display: block;
  white-space: nowrap;
}

.projects-photos .photo-item .photo-company {
  color: var(--gray);
}

/* Listing */
.listing {
  max-width: 1300px;
  margin: 0 auto;
  padding: 2.5% 18px 6% 18px;
}

.listing .side-bar {
  float: left;
  width: 190px;
}

.listing .results {
  max-width: 1050px;
  margin: 0 auto;
}

.listing .results.has-filters {
  margin-left: 250px;
}

.listing .results h1,
.listing .results h2 {
  font-weight: 200;
  font-size: 2.5em;
  margin: 0 0 1% 0;
  line-height: 1.25em;
}

.listing .results h1 strong,
.listing .results h2 strong {
  font-weight: 400;
  color: var(--gray);
}

.listing .list.grid-16 .row:after {
  content: "";
  display: table;
  clear: right;
}

.tags-list {
  margin: 0 0 1% 0;
  padding: 0;
}

.tags-list .child {
  display: inline-block;
  line-height: 1.215em;
  margin: 0 6px 10px 0;
}

.tags-list .child > span,
.tags-list .child > a {
  display: block;
  color: var(--gray);
  background-color: var(--background-color);
  border: 1px solid var(--gray-lighter);
  padding: 6px 8px;
  border-radius: 4px;
  transition: all 130ms;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.tags-list .child > span:hover,
.tags-list .child > a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.tags-list .remove-child > a {
  color: #FFF;
  border-color: var(--accent-color);
  background-color: var(--accent-color);
}

.tags-list .remove-child > a:hover {
  color: #FFF;
}

.tags-list .remove-child > a:after {
  content: "\00D7";
  padding-left: 5px;
  font-size: 1.6em;
  float: right;
  margin-top: 1px;
}

.tags-list .child .remove-tag {
  display: inline-block;
  font-size: 1.2em;
  padding: 0 0 0 5px;
  vertical-align: middle;
}

.tags-list .child > a:hover .remove-tag {
  font-weight: 900;
}

.tags-list .child-arrow:before {
  content: "\2039";
  font-size: 1.5em;
}

.tags-list .child-arrow {
  float: left;
  margin: -2px 5px 0 0;
}

.tags-list .child .child-more {
  border-color: transparent;
  color: var(--accent-color);
}

.filter .filter-title {
  color: var(--gray-ultradark);
  padding: 10px 0;
  font-weight: 600;
  font-size: 1.1em;
}

.filter.filter-collapsible .filter-title {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.filter .filter-toggle {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}

.filter .filter-toggle::before {
  content: "\F285";
  font-family: "bootstrap-icons", sans-serif;
  vertical-align: middle;
  margin-left: 4px;
  position: relative;
}

.filter.active .filter-toggle::before {
  content: "\F282";
}

.filter .filter-options .child {
  margin: 10px 0;
}

.filter .filter-options .child > a {
  color: var(--gray-dark);
  font-size: 0.94em;
  text-decoration: none;
}

.filter .filter-options .child.D1 { margin-left: 10px; }
.filter .filter-options .child.D2 { margin-left: 20px; }
.filter .filter-options .child.D3 { margin-left: 30px; }
.filter .filter-options .child.D4 { margin-left: 40px; }
.filter .filter-options .child.D5 { margin-left: 50px; }

.filter .filter-options .child.selected > a,
.filter .filter-options .child > a:hover {
  color: var(--accent-color);
}

.filter .buttons {
  width: 100%;
  margin-top: 36px;
  margin-bottom: 30px;
}

.readmore-content {
  position: relative;
  height: auto;
  overflow: hidden;
}

.readmore-wrapper.collapsed .readmore-content {
  height: 220px;
}

.readmore-wrapper .readmore-mask {
  display: none;
}

.readmore-wrapper.collapsed .readmore-mask {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--background-color));
  height: 10em;
  z-index: 5;
}

.readmore-wrapper .readmore-button {
  background: none;
  font-weight: 600;
  color: var(--accent-color);
  border: 0;
  padding: 18px 0;
  width: 100%;
  text-align: left;
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.readmore-wrapper .readmore-button:hover {
  color: var(--accent-color);
}

.readmore-wrapper.collapsed .readmore-button {
  margin-top: -6em;
  padding-top: 6em;
}

.readmore-wrapper .readmore-button:focus {
  outline: 0;
}

.readmore-wrapper.collapsed .readmore-collapsed { display: inline-block; }
.readmore-wrapper.collapsed .readmore-expanded { display: none; }
.readmore-wrapper .readmore-collapsed { display: none; }
.readmore-wrapper .readmore-expanded { display: inline-block; }

.articles-list {
  text-align: center;
}

.articles-list .column {
  padding-top: 35px;
  padding-bottom: 35px;
}

.articles-list .node-title h3 {
  font-weight: 300;
  font-size: 1.3em;
  margin: 3% 0;
  text-transform: uppercase;
}

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

.articles-list .col-8 .article-node {
  max-width: 775px;
  margin: 0 auto;
}

.articles-list .col-4 .article-node {
  max-width: 350px;
  margin: 0 auto;
}

.articles-list .node-teaser {
  font-size: 1em;
}

.zone-list {
  max-width: 1270px;
  margin: 0 auto;
  padding: 4% 0;
}

.zone-list h2 {
  font-size: 3.8em;
  font-weight: 100;
  padding: 0 18px;
  text-transform: uppercase;
  max-width: 1199px;
  margin-left: auto;
  margin-right: auto;
}

.zone-list .ras.dpg {
  margin-top: 0;
}

.zone-list .ras.dpg h2 {
  font-size: 1.3em;
  margin-top: -6px;
  font-weight: 300;
}

.zone-list .discussions-list {
  padding: 0 18px;
  max-width: 1199px;
  margin: 0 auto;
}

.zone-list .slick-listing {
  max-width: 1235px;
  margin: 0 auto;
}

.zone-list .slick-listing .row.inset {
  margin-left: 0;
  margin-right: 0;
}

/* Zone home hack */

section .text .zone-search-categories .column ul {
  list-style: none;
  padding: 0;
}

section .text .zone-search-categories .column {
  padding: 0;
}

section .text .zone-search-categories a:not([class]) {
  color: var(--gray-darker);
  font-weight: 400;
}

section .text .zone-search-categories a:hover {
  color: var(--accent-color);
}

/* Pagination */

.pagination-container {
  max-width: 1050px;
  margin: 6% 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-ultradark);
  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-ultradark);
}

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


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

.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 8px;
  color: var(--gray-darker);
  background-color: var(--background-color);
  border: 1px solid var(--gray);
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
}

.forms .form-field select[multiple],
.forms .form-field textarea {
  min-height: 37px;
  height: 112px;
  resize: vertical;
}

.forms .form-field textarea {
  line-height: 1.65em;
}

.forms .form-field select {
  height: 37px;
}

.forms .form-field input[type="file"] {
  border-color: var(--gray-superlight);
  background-color: var(--gray-ultralight);
  padding: 6% 10px;
  cursor: pointer;
}

.forms .form-field .input-file-has-value input[type="file"] {
  width: 80%;
}

.forms #field-id_related_profile-0-photo .form-image-preview {
  border-radius: 100%;
}

.forms .form-field .form-image-preview {
  width: 15%;
  vertical-align: middle;
  margin-right: 3%;
}

.forms .form-field.field-apply input[type="text"] {
  float: left;
  width: 200px;
  margin: 0;
  border-radius: 4px 0 0 4px;
}

.forms .form-field.field-apply button[type="submit"] {
  float: left;
  color: var(--form-button-text-color);
  border-color: var(--gray-ultradark);
  margin: 0;
  padding: 0;
  border-radius: 0 4px 4px 0;
  min-width: 60px;
  height: 36px;
}

.forms .form-field.field-apply button[type="submit"] > .bi {
  font-size: 22px;
}

.forms .form-field.error input,
.forms .form-field.error textarea,
.forms .form-field.error select {
  border-color: var(--messages-error);
}

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

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

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

.forms select:invalid,
.forms option[value=""] {
  color: var(--gray);
}

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

.forms label {
  display: block;
  font-weight: 600;
  line-height: 1.65em;
  margin: 0 0 5px 0;
  min-height: 23px;
}

.forms .form-field.required label:after {
  content: '*';
  color: var(--messages-error);
  margin-left: 5px;
}

.forms .form-field.RadioSelect input,
.forms .form-field.CheckboxInput input {
  float: left;
  width: auto;
  margin: 5px 8px 0 0;
}

.forms .form-field.RadioSelect label,
.forms .form-field.CheckboxInput label {
  display: inline;
  display: -webkit-box;
}

.forms .form-field.RadioSelect ul {
  list-style: none;
  padding: 0;
  margin: 4% 0;
}

.forms .form-field.RadioSelect ul li {
  margin: 2% 0;
}

.forms .form-field.RadioSelect ul em {
  font-weight: normal;
  font-style: normal;
}

.forms .form-field.RadioSelect.required ul label:after {
  display: none;
}

.forms .MultiCheckboxInput {
  margin-bottom: 12px;
}

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

.profile-content .buttons,
.forms .buttons {
  border: 0;
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 16px;
  margin-right: 8px;
  padding: 13px 8%;
  line-height: 1.15em;
  color: var(--form-button-text-color);
  background-color: var(--gray-ultradark);
  border-radius: 4px;
}

.profile-content p .buttons,
.forms p .buttons {
  font-size: 1em;
}

.forms .buttons.button-right {
  float: right;
  margin-right: 0;
}

.forms .buttons.button-orange {
  color: #FFF;
  background-color: var(--accent-color);
}

.forms .buttons.button-delete {
  background: var(--background-color);
  color: var(--gray-light);
  border: 1px dashed var(--gray-light);
  padding: 13px 18px;
  margin-right: 0;
  margin-left: 0;
}

.forms .buttons.button-inline {
  display: inline-block;
  padding: 0;
  background: none;
  color: var(--gray-darker);
  width: auto;
  min-width: auto;
  max-width: none;
}

.forms .buttons.button-inline:hover {
  color: var(--accent-color);
}

.forms .buttons.button-inline-orange {
  color: var(--accent-color);
  font-weight: 600;
}

.forms .hidden {
  display: none;
}

.forms .visible {
  display: block;
}

/* Toggle Switch */
.forms .form-field.toggle-field input {
  display: none;
}

.forms .form-field.CheckboxInput .toggle-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 8px 0;
  margin: 0;
}

.forms .form-field.CheckboxInput .toggle-switch {
  position: relative;
  margin-right: 10px;
  width: 48px;
  height: 24px;
  background-color: var(--gray-light);
  border-radius: 24px;
  transition: background-color 0.3s;
}

.forms .form-field.CheckboxInput .toggle-switch::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #FFF;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.forms .form-field.CheckboxInput .toggle-text {
  width: calc(100% - 58px);
}

.forms .form-field.CheckboxInput input:checked + .toggle-label .toggle-switch {
  background-color: var(--accent-color);
}

.forms .form-field.CheckboxInput input:checked + .toggle-label .toggle-switch::before {
  transform: translateX(24px);
}

.anchor-container {
  position: relative;
}

.anchor {
  float: left;
  visibility: hidden;
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  margin-top: -130px;
}

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

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

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

.message-box {
  padding: 15% 20px;
  text-align: center;
  font-size: 1.3em;
  background: var(--gray-ultralight);
  border: 1px solid var(--gray-superlight);
}

#id_verification_code {
  height: 50px;
  text-align: center;
  font-size: 1.3em;
  color: var(--accent-color);
  letter-spacing: 1px;
  font-weight: bold;
  text-transform: uppercase;
}

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

#id_honeypot {
  display: none;
}

/* Discussion Form */
.discussion-form {
  padding-bottom: 25px;
  margin-bottom: 5%;
  border-bottom: 1px solid var(--gray-lightest);
}

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

.discussion-form-post {
  width: 66.66667%;
  float: left;
  padding: 4px 0 20px 0;
  min-height: 227px;
}

.discussion-form-rules {
  width: 29.33333%;
  display: block;
  float: right;
  padding: 0 2%;
  font-size: 0.85em;
}

.discussion-form-rules h3 {
  margin-top: 0;
}

.discussion-form .buttons {
  font-size: 1em;
  padding: 10px 15px;
  margin: 0;
}

/* Comments */
#comment-list .comment {
  margin: 5% 0;
}

#comment-list .comment .user-action-bar {
  margin: 2% 0 0 0;
}

/*#comment-list .comment:before {*/
/*  content:"";*/
/*  display:block;*/
/*  height: 78px; !* fixed header height*!*/
/*  margin: -78px 0 0 0; !* negative fixed header height *!*/
/*}*/

#comment-list .comment-reply-form,
#comment-list .comment.level-1 {
  padding-left: 51px;
  margin: 3% 0;
}

#comment-list .comment-reply-form {
  display: none;
}

#comment-list .cancel-reply {
  color: var(--gray-darker);
  background-color: transparent;
  margin: 0 9px;
}

#comment-list .cancel-reply:hover {
  color: var(--accent-color);
}

#comment-list .comment.has-children {
  margin-bottom: 0;
}

#comment-list .comment:after {
  content: "";
  display: table;
  clear: left;
}

#comment-list .user-comment {
  position: relative;
  margin-left: 51px;
}

#comment-list .user-comment .gnr-dropmenubutton {
  position: absolute;
  top: 0;
  right: 0;
}

.user-image {
  float: left;
  width: 42px;
  text-align: center;
  line-height: 0;
  font-size: 0;
  position: relative;
  z-index: 10;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.user-image a {
  display: block;
}

.user-image img {
  width: 100%;
  height: auto;
}

.user-image .user-image-default {
  display: block;
  border-radius: 100%;
  line-height: 42px;
  text-align: center;
  color: #FFF;
  font-size: 18px;
  background: var(--user-image-default-style-0);
}

.user-image .user-image-default.style-0 { background: var(--user-image-default-style-0); }
.user-image .user-image-default.style-1 { background: var(--user-image-default-style-1); }
.user-image .user-image-default.style-2 { background: var(--user-image-default-style-2); }
.user-image .user-image-default.style-3 { background: var(--user-image-default-style-3); }
.user-image .user-image-default.style-4 { background: var(--user-image-default-style-4); }
.user-image .user-image-default.style-5 { background: var(--user-image-default-style-5); }
.user-image .user-image-default.style-6 { background: var(--user-image-default-style-6); }
.user-image .user-image-default.style-7 { background: var(--user-image-default-style-7); }
.user-image .user-image-default.style-8 { background: var(--user-image-default-style-8); }
.user-image .user-image-default.style-9 { background: var(--user-image-default-style-9); }

.user-image .user-badge {
  display: inline-block;
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  color: var(--accent-color);
  padding: 2px 6px;
  font-size: 11px;
  line-height: 11px;
  font-weight: 600;
  margin-top: 6px;
  text-transform: uppercase;
}

.user-image .user-image-profile {
  max-width: 100%;
  height: auto;
  border-radius: 100%;
}

#comment-list .user-comment .comment-info {
  line-height: 1.52em;
}

#comment-list .user-comment .user-name {
  display: block;
  color: var(--gray-ultradark);
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: calc(100% - 50px);
}

#comment-list .user-comment a.user-name:hover {
  color: var(--accent-color);
}

#comment-list .user-comment .comment-date {
  display: inline-block;
  font-size: 0.85em;
  color: var(--gray);
}

#comment-list .user-comment .comment-date:first-letter {
  text-transform: uppercase;
}

#comment-list .comment-featured {
  display: inline-block;
  margin-right: 6px;
  font-weight: 600;
  color: var(--comment-featured);
  font-size: 0.85em;
  white-space: nowrap;
}

#comment-list .comment-discussion .comment-featured > .bi-check2-circle {
  font-size: 20px;
  vertical-align: bottom;
  margin-left: -1px;
}

#comment-list .comment-discussion .comment-featured > .bi-pin-fill {
  font-size: 16px;
  vertical-align: text-top;
  margin-left: -2px;
}

.user-comment .comment-body {
  word-break: break-word;
}

.user-comment .comment-body strong {
  color: var(--gray-darkest);
}

.user-comment .comment-body a {
  font-weight: bold;
}

.user-comment .comment-body p:first-child,
.user-comment .comment-body p:last-child {
  margin-top: 0;
}

/* Comment forms */

.comment-forms .comment-post {
  text-align: center;
  margin: 0 0 8% 0;
}

.comment-forms .user-image {
  float: left;
}

.comment-forms .comment-body {
  margin-left: 51px;
}

.comment-forms .buttons {
  margin: 0;
  font-size: 1em;
  padding: 10px 15px;
}

#comments-signin {
  margin: 0 0 10% 0;
}

#comments-signin .buttons {
  width: 100%;
}

/* Sign in */
.signin {
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  padding: 18px 0 54px 0;
}

.signin.signin-home {
  max-width: 490px;
}

.signin header {
  margin: 20px 0 35px 0;
}

.signin h1 {
  font-weight: 200;
  font-size: 2.5em;
  margin: 3% 0;
  line-height: 1.25em;
}

.signin blockquote {
  font-size: 1.4em;
}

.signin .forms {
  text-align: left;
}

.signin .forms .g-recaptcha-wrapper {
  text-align: center;
}

.signin .forms .g-recaptcha {
  display: inline-block;
}

.signin .forms input.buttons {
  line-height: 1.95em;
  margin: 0 0 3% 0;
}

.signin .buttons {
  color: var(--form-button-text-color);
  background: var(--gray-ultradark);
  width: 100%;
  box-sizing: border-box;
}

.signin .buttons svg {
  margin-right: 7px;
  margin-top: -2px;
  display: inline-block;
  vertical-align: middle;
  fill: var(--gray-ultradark);
}

.signin .buttons.button-clear {
  text-align: left;
  border: 1px solid var(--gray);
  color: var(--gray-ultradark);
  background: transparent;
  padding: 9px 25px;
  width: 297px;
}

.signin .signin-ecohome-logo {
  position: absolute;
  top: -39px;
  left: -39px;
  width: 200px;
}

.signin .buttons.button-clear:hover {
  border-color: var(--gray-ultradark);
}

.signin h4 {
  margin: 3% 0;
  font-weight: 400;
  font-size: 1.15em;
}

.signin #field-id_first_name,
.signin #field-id_last_name {
  width: 48%;
}

.signin #field-id_last_name {
  float: right;
}

.modal .modal-content ul.users-messages,
ul.users-messages {
  list-style: none;
}

ul.users-messages li {
  position: relative;
  line-height: 1.65em;
  font-size: 1.1em;
  margin: 0 0 24px 0;
  padding: 18px 28px;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  font-weight: 600;
  color: var(--gray-superdark);
  background: var(--gray-ultralight);
  border: 2px solid var(--gray-superlight);
  border-radius: 4px;
}

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

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

ul.users-messages li > span {
  display: block;
  color: var(--gray-superdark);
  font-weight: normal;
  font-family: var(--primary-font);
}

ul.users-messages li > .um-remove {
  position: absolute;
  top: 4px;
  right: 10px;
  font-style: normal;
  line-height: normal;
  font-size: 22px;
  cursor: pointer;
  font-family: var(--primary-font);
}

/* Users engagement */
.user-action-button .bi-hand-thumbs-up-fill {
  margin-top: -1px;
  margin-bottom: 1px;
}

.user-action-bar {
  margin: 2% 0 5% 0;
  padding: 0;
  font-size: 0;
}

.user-action-bar > .child {
  display: inline-block;
  line-height: 1.3em;
  font-size: 13px;
  font-weight: 600;
  margin: 0 4px 10px 0;
}

.user-action-bar .user-action-button {
  display: inline-block;
  vertical-align: middle;
  color: var(--gray);
  border: 1px solid var(--gray-lighter);
  user-select: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  max-height: 17px;
}

.user-action-bar .user-action-button > .bi {
  font-size: 16px;
  vertical-align: top;
}

.user-action-bar .user-action-button > .bi-heart-fill {
  vertical-align: middle;
}

.user-action-bar .user-action-button:hover {
  border-color: var(--gray-darker);
  color: var(--gray-darker);
}

.user-action-bar .user-action-button.active {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.user-action-bar .user-action-button .action-count,
.user-action-bar .user-action-button .action-text {
  margin-left: 5px;
}

.user-action-bar .action-share,
.user-action-bar .action-print {
  float: right;
  margin-right: 0;
  margin-left: 4px;
}


/*
Profiles
*/
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

.profile-cover {
  position: relative;
  z-index: 40;
  height: 275px;
  background-image: url("../img/profile-cover-default.0c79a7bc8c9d.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.profile-cover .profile-cover-overlay {
  position: absolute;
  z-index: 50;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
}

.profile-container .profile-options {
  width: 230px;
  padding: 0 5px;
}

.profile-container .profile-options .options-menu a {
  color: var(--gray);
}

.section-professionals .profile-container .profile-options {
  text-align: center;
}

.section-professionals .profile-container .profile-options .badge-list {
  display: inline-block;
}

.profile-container .content-navigation {
  position: relative;
  z-index: 70;
  margin-top: -54px;
  padding-left: 240px;
}

.profile-container .profile-content {
  width: calc(100% - 240px);
}

.profile-container .profile-content h1 {
  font-weight: 200;
  font-size: 2.5em;
  margin: 0 0 25px 0;
  line-height: 1.25em;
}

.profile-container .profile-content h2 {
  margin: 48px 0 18px 0;
}

.profile-container .profile-content h3 {
  margin-bottom: 0;
}

.profile-content .forms .buttons {
  margin-bottom: 18px;
}

.profile-container .profile-overview {
  padding: 0;
}

.profile-container .profile-overview .user-action-bar {
  margin: 0;
}

.profile-container .profile-associations {
  padding: 0 0 0 45px;
}

.profile-container .profile-content article > p:first-child {
  margin-top: 0;
}

.profile-container .profile-content .forms {
  max-width: 560px;
}

.profile-container .profile-content #field-id_related_profile-0-photo {
  width: 48%;
}

.profile-container .profile-content #field-id_related_profile-0-cover {
  width: 48%;
  padding-left: 2%;
}

.profile-container .profile-content #field-id_related_profile-0-cover:after {
  content: "";
  display: table;
  clear: left;
}

.profile-container .profile-content .company-block:after {
  clear: right;
}

.profile-main {
  display: flex;
  padding: 48px 0 7% 0;
}

.profile-header {
  position: relative;
  z-index: 60;
  margin-top: -130px;
}

.profile-header .profile-username {
  margin-left: 240px;
}

.profile-header .profile-username h1 {
  padding: 50px 0 0 0;
  margin: 0;
  color: #FFF;
  font-size: 2.5em;
}

.profile-header .profile-username h3 {
  margin: 0;
  color: #FFF;
}

.profile-header .profile-picture {
  float: left;
  width: auto;
  max-width: 200px;
  border: 5px solid var(--background-color);
  border-radius: 100%;
}

.profile-header .buttons {
  float: right;
  margin-top: -120px;
  width: 275px;
}

.user-subscriptions {
  margin-bottom: 6%;
}

.user-subscriptions .item {
  border-top: 1px solid var(--gray-lightest);
}

.user-subscriptions .item:last-child {
  border-bottom: 1px solid var(--gray-lightest);
}

.user-subscriptions .item p {
  margin-top: 0;
}

.user-subscriptions .item .toggle-auto-renew {
  margin-left: 4px;
}

.orders .order-item {
  display:flex;
  flex-wrap: wrap;
  margin: 24px 0;
}

.orders .order-item .order-column {
  width: 25%;
  white-space: nowrap;
}

.orders .order-item .order-id {
  font-weight: 600;
}

/* Professionals */
.company-block.company-pro {
  border-bottom: 1px solid var(--gray-lightest);
  padding: 18px 8px;
}

.company-block.company-pro.first {
  border-top: 1px solid var(--gray-lightest);
  margin-top: 10px;
}

.badge-list {
  display: grid;
  grid-auto-flow: dense;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
  text-align: left;
}

.badge-list .badge {
  display: inline-block;
  vertical-align: top;
}

.badge-list .badge.accreditation {
  margin-bottom: 2em;
  padding-bottom: 18px;
}

.badge-list .badge.accreditation:last-child {
  margin-right: 0;
}

.badge-list .badge.accreditation:only-child {
  margin-bottom: 0;
}

.badge-list .badge.accreditation svg {
  width: 130px;
  fill: var(--badge-ecoplus-level-0);
}

.badge-list .badge.accreditation.level-1 svg { fill: var(--badge-ecoplus-level-1); }
.badge-list .badge.accreditation.level-2 svg { fill: var(--badge-ecoplus-level-2); }
.badge-list .badge.accreditation.level-3 svg { fill: var(--badge-ecoplus-level-3); }
.badge-list .badge.accreditation.level-4 svg { fill: var(--badge-ecoplus-level-4); }

.badge-list .badge.accreditation .badge-name {
  display: block;
  white-space: nowrap;
  text-transform: lowercase;
  margin-top: -35px;
  margin-left: 58px;
  font-family: var(--primary-font);
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 1em;
  height: 1em;
  color: var(--badge-ecoplus-level-name);
  user-select: none;
}


/*
  Shop
*/
.cart .column {
  padding-left: 0;
  padding-right: 0;
}

.cart .cart-details {
  font-size: 1.1em;
}

.cart .column.col-7 {
  padding-left: 50px;
}

.cart .cart-title {
  font-family: var(--primary-font);
  margin: 15px 0;
  font-weight: 400;
}

.cart .cart-item {
  margin-bottom: 15px;
}

.cart .cart-item .item-image {
  float: left;
  margin-right: 10px;
}

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

.cart .cart-item .item-name {
  line-height: 1.4em;
}

.cart .cart-item .item-price {
  margin: 5px 0 0 0;
}

.cart .cart-item .item-price .purchase-price {
  font-size: 1.2em;
  color: var(--accent-color);
  font-weight: 600;
  margin-right: 5px;
}

.cart .cart-item .item-price .old-price {
  font-size: 1.2em;
  color: var(--gray);
  font-weight: 400;
  text-decoration: line-through;
}

.cart .cart-amount {
  padding: 18px 0;
  border-top: 1px solid var(--gray-superlight);
  text-align: right;
}

.cart .cart-amount .line {
  margin-bottom: 12px;
}

.cart .cart-amount .line-description {
  display: inline-block;
}

.cart .cart-amount .line-amount {
  display: inline-block;
  width: 90px;
  margin-left: 10px;
}

.cart .cart-amount .line-total {
  color: var(--accent-color);
  font-size: 1.2em;
  font-weight: 600;
}

.cart-payment .cart-payment-info {
  margin-top: 6%;
}

.cart-payment .payment-terms {
  text-align: center;
  max-width: 620px;
  display: block;
  line-height: 1.5em;
  clear: both;
  margin: 16px auto 0 auto;
  padding: 0 2%;
}

.cart-payment .payment-terms > a {
  color: var(--gray-darker);
  font-weight: 600;
}

.cart-payment .payment-secure {
  clear: both;
  color: var(--gray);
  text-align: center;
  margin: 0;
}

.cart-payment .total-amount {
  font-size: 2.4em;
  font-family: var(--primary-font);
  margin: 11px 0 15px 0;
}

.cart-payment .forms {
  border: 1px solid var(--gray-superlight);
  background: var(--gray-ultralight);
  padding: 20px;
  border-radius: 4px;
}

.cart-payment .forms:after {
  content: "";
  display: table;
  clear: both;
}

.cart-payment #payment-button {
    margin: 0 18px 10px 0;
    padding: 20px 60px;
    width: 100%;
}

#billing-form #field-id_first_name,
#billing-form #field-id_city,
#billing-form #field-id_zip {
  width: 48%;
}

#billing-form #field-id_last_name,
#billing-form #field-id_state,
#billing-form #field-id_phone {
  float: right;
  width: 48%;
}

#checkout {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 18px 6% 18px;
}

#checkout h1 {
  border-bottom: 1px solid var(--gray-superlight);
  padding-bottom: 15px;
  margin-bottom: 5%;
}


/*
  Landing Page CMSExtend
*/
section {
  overflow: hidden;
}

section iframe {
  max-width: 100%;
}

p.format-small {
  font-size: 0.85em;
}

section h4 {
  text-transform: uppercase;
  display: inline-block;
  border-bottom: 3px solid var(--accent-color);
  margin: 0 0 2% 0;
  padding-bottom: 6px;
}

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

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

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

section.section-access-hidden {
  display: none;
}

section .video-container {
  position: relative;
  padding-bottom: 56.28569999999%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

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

section .cover-video {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 75;
}

section .video-container .video-overlay {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEVGRTYzREVGREFBMTFFNzk2MTJGNUQ3QjIzOUVGNTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEVGRTYzREZGREFBMTFFNzk2MTJGNUQ3QjIzOUVGNTgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0RUZFNjNEQ0ZEQUExMUU3OTYxMkY1RDdCMjM5RUY1OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0RUZFNjNEREZEQUExMUU3OTYxMkY1RDdCMjM5RUY1OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PufY6mAAAAAQSURBVHjaYvj//z8DQIABAAj8Av7bok0WAAAAAElFTkSuQmCC);
  z-index: 9000;
}

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

section .text .buttons,
section .text a:not([class]) {
  font-weight: 600;
}

section .text p strong {
  color: var(--gray-darkest);
}

section .column .text {
  padding-left: 0;
  padding-right: 0;
}

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-lightest);
}

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

section .accordion-item .accordion-collapse {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 12px;
  background: url("../img/collapse-arrows.c9a1a5e5d0fa.png") no-repeat 0 0;
}

section .accordion-item.active .accordion-collapse {
  background-position: 0 -26px;
}

section .accordion .accordion-item .accordion-title {
  position: relative;
  color: var(--accent-color);
  margin: 0;
  padding: 2.5% 50px 2.5% 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;
}

section .imagetext {
  display: flex;
}

section .imagetext.format-offset {
  margin: 2.5% 0;
}

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

section .imagetext.format-offset .content-container {
  width: 55%;
}

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

section .imagetext .content-text .buttons,
section .imagetext .content-text a:not([class]) {
  font-weight: 600;
}

section .imagetext .content-text p strong {
  color: var(--gray-darkest);
}

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

section .imagetext.format-offset .content-image {
  width: 45%;
  min-height: 390px;
}

section .imagetext .content-image-mobile,
section .imagetext .content-button-mobile {
  display: none;
}

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

section .imagetext a.content-image:hover .button-white {
  background: var(--accent-color);
  color: #FFF;
  border-color: var(--accent-color);
}

section .imagetext .content-image .button-white {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 13px 21px;
  font-size: 1.2em;
}

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

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

section .imagetext.background-dark h2 {
  color: #FFF;
}

section .imagetext.background-dark h3,
section .imagetext.background-dark h4,
section .imagetext.background-dark h5,
section .imagetext.background-dark h6,
section .imagetext.background-dark li,
section .imagetext.background-dark p strong,
section .imagetext.background-dark p {
  color: var(--gray);
}

section .imagetext.background-dark p a strong {
  color: var(--accent-color);
}

section .imagetext.background-dark p strong {
  color: var(--gray-light);
}

section .imagetext.direction-left .content-image {
  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-container.width-normal {
  max-width: 1036px;
  margin: 0 auto;
}

section .row.align-middle-c,
section .row.align-middle {
  font-size: 0;
}

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

section .row.align-middle-c {
  text-align: center;
}

section .row.align-flex {
  display: flex;
  flex-wrap: wrap;
  padding: 0 9px;
}

section .row.align-flex .column {
  flex: 0 0 auto;
  padding: 18px 9px;
}

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

.row.inset.small-padding .form-field {
  margin-bottom: 0;
}

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

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

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

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

.column.no-padding {
  padding: 0;
}

.column.no-padding-y {
  padding-top: 0;
  padding-bottom: 0;
}

.column.no-padding-x {
  padding-left: 0;
  padding-right: 0;
}

.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 {
  max-width: 100%;
  height: auto;
}

/* Slider */
section .slider .cover-image.format-large .content-wrapper .content {
  max-width: 900px;
}

section .slider .cover-image h1,
section .slider .cover-image h2 {
  font-size: 3.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  text-shadow: 0 0 0.25em rgba(0, 0, 0, 0.6);
}

section .slider .slider-item {
  display: none;
}

section .slick-initialized .slider-item,
section .slider .slider-item:first-child {
  display: block;
}

/* Cards */
section .card {
  display: block;
  position: relative;
  height: 100%;
  box-sizing: border-box;
}

section .card.type-pricing {
  text-align: center;
  border-radius: 6px;
  padding: 27px 18px;
  border: 1px solid var(--gray-superlight);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

section .card.type-pricing .buttons {
  font-weight: 600;
}

section .card.type-pricing .card-content h2 {
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 4em;
}

section .card.type-pricing .card-content h2 em {
  font-weight: 300;
  font-size: 0.5em;
  font-style: normal;
}

section .card.type-pricing .card-content h3 {
  text-align: left;
  margin: 6% 0 8px 0;
}

section .card.type-pricing .card-content h5 {
  text-align: left;
  font-size: 1em;
  color: var(--gray-darker);
  font-weight: 600;
  text-transform: uppercase;
  margin: 6% 0 8px 0;
}

section .card.type-pricing .card-content ul {
  text-align: left;
}

section .card.type-pricing .card-content li {
  position: relative;
  padding-left: 25px;
}

section .card.type-pricing .card-content li::before {
  content: "\F633";
  font-family: "bootstrap-icons", sans-serif;
  position: absolute;
  left: 0;
  top: 0;
}

.cke_editable ul.highlighted li::marker,
section .card.type-pricing .card-content ul.highlighted li::before {
  color: var(--accent-color);
}

section .card .card-icon-next {
  position: absolute;
  bottom: 15px;
  right: 13px;
  font-weight: 600;
}

section .card .card-icon-next:after {
  font-family: "bootstrap-icons", sans-serif;
  content: "\F285";
  vertical-align: top;
  padding-left: 6px;
  font-size: 16px;
}

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

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

section .card .card-content {
  padding-top: 1px;
  padding-bottom: 1px;
}

section .card .card-content .buttons,
section .card .card-content a:not([class]) {
  font-weight: 600;
}

section .card .card-content p strong {
  color: var(--gray-darkest);
}

section .card .card-content h3 {
  margin-bottom: 6%;
}

section .card.card-image-panoramic .card-content h3 {
  margin-top: 8%;
}

section .card.card-color-white .card-content,
section .card.card-color-gray .card-content {
  padding-left: 18px;
  padding-right: 18px;
}

section .card.has-link {
  padding-bottom: 36px;
  box-sizing: border-box;
}

section .card.card-color-white.card-image-sideicon .card-content,
section .card.card-color-gray.card-image-sideicon .card-content {
  padding-top: 16px;
}

section .card.card-color-white.card-image-sideicon .card-image-container,
section .card.card-color-gray.card-image-sideicon .card-image-container,
section .card.card-color-white.card-image-topicon .card-image-container,
section .card.card-color-gray.card-image-topicon .card-image-container {
  padding: 16px 0 0 18px;
}

section .card h4 {
  margin: 4% 0 2% 0;
  border-bottom-width: 1px;
}

section .card .card-image-container {
  text-align: left;
}

section .card.card-image-topicon .card-image-container,
section .card.card-image-sideicon .card-image-container {
  max-width: 45px;
}

section .card.card-image-panoramic .card-image-container {
  text-align: center;
}

section .card.card-image-sideicon .card-image-container {
  float: left;
  display: table-cell;
  margin: 0 12px 0 0;
}

section .card.card-image-sideicon .card-content {
  display: table-cell;
}

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

section .card .side-card {
  border: 0;
}

section .card .side-card .card-row {
  border: 0;
  border-top: 1px solid var(--gray-lightest);
  padding-top: 14px;
}

section .card .side-card .card-row:first-child {
  border-top: 0;
  padding-top: 6px;
}

section .card .side-card h4 {
  display: block;
  border: 0;
  text-transform: none;
  padding: 0;
}

/* Compare Table */

section .compare-table {
  display: flex;
  flex-direction: column;
  width: calc(100% - 36px);
  overflow: auto;
  max-width: 1400px;
  margin: 3% auto;
}

section .compare-table .table-row {
  display: flex;
  min-width: 100%;
  width: fit-content;
  border-bottom: 1px solid var(--gray-lighter);
}

section .compare-table .table-cell {
  flex: 1;
  padding: 24px 12px;
  min-width: 120px;
  text-align: center;
  border-right: 1px solid var(--gray-lighter);
  line-height: 1.45em;
}

section .compare-table .table-cell:first-child,
section .compare-table .table-row:first-child {
  font-weight: 600;
  line-height: 1.65em;
  color: var(--gray-ultradark);
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
}

section .compare-table .table-cell:first-child {
  text-align: left;
  min-width: 180px;
}

section .compare-table .table-cell:last-child {
  border-right: 0;
}

section .compare-table .table-row:first-child .table-cell:first-child {
  font-weight: 300;
  font-size: 1.5em;
  line-height: 1em;
}

section .compare-table .table-cell .bi {
  font-size: 32px;
  line-height: 1em;
}

section .compare-table .table-cell .bi-check {
  color: var(--messages-success)
}

section .compare-table .table-cell .bi-x {
  color: var(--messages-error)
}


/* Viewer */

.viewer {
  padding-bottom: 3%;
  max-width: 1200px;
  margin: 0 auto;
}

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

.modal .modal-content .viewer h1,
.viewer h1 {
  font-size: 1.7em;
  text-transform: uppercase;
}

.viewer .viewer-image {
  position: relative;
  line-height: 0;
  background: no-repeat center;
  background-size: contain;
}

.viewer .viewer-content dt {
  width: 38%;
  float: left;
  clear: left;
  padding-bottom: 5px;
  line-height: 1.3;
  color: var(--gray-dark);
}

.viewer .viewer-content dd {
  float: left;
  width: 60%;
  overflow: hidden;
  padding-bottom: 5px;
  padding-left: 4px;
  line-height: 1.3;
  min-height: 23px;
  margin-left: 0;
  color: var(--gray-superdark);
}

.viewer .viewer-image-nav {
  display: block;
  text-align: center;
  margin: 18px 0;
  user-select: none;
}

.viewer .viewer-image-nav-item {
  display: inline-block;
  margin: 6px;
  opacity: 0.75;
  -webkit-user-drag: none;
}

.viewer .viewer-image-nav-item > img {
  -webkit-user-drag: none;
}

.viewer .viewer-image-nav-item.selected,
.viewer .viewer-image-nav-item:hover {
  opacity: 1;
}

.viewer.viewer-product .viewer-image {
  padding-bottom: 100%;
}

.related-products .page-links {
  font-weight: 600;
}

.product-company {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--gray-lightest);
  margin-bottom: 18px;
}

/* Popups */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--modal-background);
  width: 100%;
  height: 100%;
  padding: 64px 2%;
  z-index: 99999;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal .modal-wrapper {
  display: none;
  position: relative;
  width: auto;
  max-width: 800px;
  background-color: var(--background-color);
  margin: auto;
  overflow: hidden;
  padding: 4%;
  box-shadow: rgba(0, 0, 0, 0.14) 0 2px 10px;
  border-radius: 4px;
}

.modal .modal-content {
  text-align: left;
  min-height: 250px;
  transition: height 350ms linear;
}

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

.modal .modal-back,
.modal .modal-close {
  position: absolute;
  top: 12px;
  cursor: pointer;
  padding: 0;
  border: 0;
  margin: 0;
  outline: 0;
  opacity: 0.8;
  color: var(--gray-dark);
}

.modal .modal-close {
  right: 12px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  font-size: 2em;
}

.modal .modal-back {
  display: none;
  left: 18px;
  width: auto;
  height: 34px;
  background: none;
  font-weight: 600;
  line-height: 1em;
}

.modal .modal-back:hover,
.modal .modal-close:hover {
  opacity: 1;
}

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

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

.modal .tips-box {
  font-size: 0.85em;
}

.modal .button-center {
  margin: 6% auto;
  min-width: 300px;
  font-size: 1.2em;
}

.modal .modal-center {
  text-align: center;
}

.modal .privacy {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  display: block;
  line-height: 1.5em;
}

.modal.modal-fullscreen {
  padding: 0;
  background-color: var(--background-color);
  overflow-y: scroll;
}

.modal.modal-fullscreen .modal-wrapper {
  max-width: 2000px;
  padding: 0;
  box-shadow: none;
}

.modal.modal-fullscreen .modal-content {
  padding-top: 56px;
}

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

.modal.modal-fullscreen .lds-ellipsis {
  position: fixed;
}

.modal:not(.modal-fullscreen) .modal-content h1 {
  font-weight: 200;
  font-size: 2.5em;
  margin: 0 0 25px 0;
  line-height: 1.25em;
}

.modal .modal-content blockquote {
  margin: 6% 0;
  font-size: 1.45em;
}

.lds-ellipsis {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
  z-index: 100;
}

.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent-color);
  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);
  }
}

/* Staff CMS */
.staff-edit-button {
  font-size: 18px !important;
  color: var(--gray-ultradark);
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  font-weight: normal;
}

.staff-edit-button:hover {
  color: var(--accent-color);
}

.comment .staff-edit-button {
  float: right;
  font-size: 17px !important;
  color: var(--gray-darker);
  margin-top: 2px;
}

/* CMS */
.cms-toolbar-expanded {
  padding-top: 46px;
}

.cms-toolbar-expanded .modal.modal-fullscreen,
.cms-toolbar-expanded #header {
  top: 46px;
}

.cms-toolbar-expanded .anchor {
  margin-top: -180px;
}

div.cms .cms-toolbar-item-logo a {
  visibility: hidden;
}

.section-access {
  display: none;
}

.cms-structure-mode-structure section.section-access-hidden {
  display: block;
}

.cms-structure-mode-structure .section-access {
  display: block;
  padding: 9px 18px;
  background-color: var(--marker-highlight);
  font-size: 2em;
  font-family: var(--secondary-font);
  font-variant-numeric: lining-nums;
  color: #272727;
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
}

/* CK Editor */
.cke_editable a {
  color: var(--accent-color);
}

.cke_editable li {
  font-size: 1.1em;
  line-height: 1.85em;
}

.cke_editable p {
  margin: 0 0 4% 0;
  font-size: 1.1em;
}

.cke_editable ol,
.cke_editable ul {
  margin: 4% 0;
}

.cke_widget_inline.cke_image_nocaption,
.cke_editable img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.cke_image_nocaption {
  background: var(--marker-highlight);
  padding: 40px;
  border: 2px solid var(--messages-error);
}

.cke_image_nocaption:after {
  content: "Important! Please correct this image.";
  display: block;
  color: var(--messages-error);
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
  white-space:pre;
  line-height: normal;
}

html[lang="fr"] .cke_image_nocaption:after {
  content: "Important! Veuillez corriger cette image.";
}

.cke_editable .image-captioned figcaption[contentEditable=true]:not(:empty):has(br:first-child):before,
.cke_editable .image-captioned figcaption[contentEditable=true]:empty:before {
  content: "Type caption for image (optional)"
}

html[lang="fr"] .cke_editable .image-captioned figcaption[contentEditable=true]:not(:empty):has(br:first-child):before,
html[lang="fr"] .cke_editable .image-captioned figcaption[contentEditable=true]:empty:before {
  content: "Tapez la légende de l'image (facultatif)"
}

.cke_editable h4 {
  text-transform: uppercase;
  display: inline-block;
  border-bottom: 3px solid var(--accent-color);
  margin: 0 0 2% 0;
  padding-bottom: 6px;
}

.cke_editable p strong {
  color: var(--gray-darkest);
}

.cke_editable a {
  font-weight: bold;
}

.cke_editable .buttons {
  color: #FFF;
}

.cke_editable h2 {
  margin: 9% 0 4% 0;
}

.cke_editable table {
  border: 0;
  margin: 4% 0;
  width: 100%;
}

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

form .cke_inner {
  background: none;
}

form .cke_chrome {
  border: none;
}

form .cke_contents {
  border: 1px solid var(--gray);
  border-radius: 4px;
}

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

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

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

@media only screen and (max-width: 1024px) {
  form a.cke_button_off:hover {
    background: transparent; /* Fixes mobile issue where inactive buttons appear active */
  }
}

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

.forms .form-field .django-ckeditor-widget textarea {
  height: 58px;
}