:root {
  --xprimary: #29225c;
  --xprimary2: #5a5780;
}

#element::-webkit-scrollbar {
  display: none;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  background-color: var(--xprimary);
}

/* logo normal */
#logo img {
  position: absolute;
  transform: translate(0px, 10px);
  max-height: 100px;
  filter: grayscale(1) invert(1);
  opacity: 1;
}

/* logo sticky */
#header.header-sticky.sticky-active #logo img {
  max-height: 55px;
  filter: grayscale(0) invert(0);
  opacity: .8;
}

/* logo mobile */
@media (max-width: 991.98px) {
  #header #logo > a img {
    max-height: 70px;
    position: static;
  }
  #mainMenu-trigger {
  }
}


#scrollTop:after, #scrollTop:before,
.heading-text.heading-section h2:before,
.post-item .post-image .post-meta-category, .post-item .post-slider .post-meta-category, .post-item .post-video .post-meta-category, .post-item .post-audio .post-meta-category, .post-item .post-quote-img .post-meta-category 
{
  background-color: var(--xprimary);
}

button.btn, .btn:not(.close):not(.mfp-close), a.btn:not([href]):not([tabindex]) {
  background-color: var(--xprimary);
  border-color: var(--xprimary);
}

button.btn:hover, button.btn:focus, button.btn:not(:disabled):not(.disabled):active, button.btn:not(:disabled):not(.disabled).active, .btn:not(.close):not(.mfp-close):hover, .btn:not(.close):not(.mfp-close):focus, .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled):active, .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled).active, a.btn:not([href]):not([tabindex]):hover, a.btn:not([href]):not([tabindex]):focus, a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled):active, a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled).active
{
  background-color: var(--xprimary2);
  border-color: var(--xprimary2);
}

a:not(.btn):not(.badge):hover, a:not(.btn):not(.badge):focus, a:not(.btn):not(.badge):active,
#mainMenu nav > ul > li.hover-active > a, #mainMenu nav > ul > li.hover-active > span, #mainMenu nav > ul > li.current > a, #mainMenu nav > ul > li.current > span, #mainMenu nav > ul > li:hover > a, #mainMenu nav > ul > li:hover > span, #mainMenu nav > ul > li:focus > a, #mainMenu nav > ul > li:focus > span {
  color: var(--xprimary);
}