@charset "UTF-8";

@font-face {
    font-family: "accessibility";
    src:url("Icons/accessibility.eot");
    src:url("Icons/accessibility.eot?#iefix") format("embedded-opentype"),
    url("Icons/accessibility.woff") format("woff"),
    url("Icons/accessibility.ttf") format("truetype"),
    url("Icons/accessibility.svg#accessibility") format("svg");
    font-weight: normal;
    font-style: normal;

}

[data-icon]:before {
    font-family: "accessibility" !important;
    content: attr(data-icon);
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^="access-"]:before,
[class*=" access-"]:before {
    font-family: "accessibility" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.access-bx-font:before {
    content: "\61";
}
.access-bx-font-size:before {
    content: "\62";
}
.access-bx-low-vision:before {
    content: "\63";
}
.access-bx-minus:before {
    content: "\64";
}
.access-bx-plus:before {
    content: "\65";
}
.access-bx-adjust:before {
    content: "\66";
}
.access-bx-font-family:before {
    content: "\67";
}
.access-bx-heading:before {
    content: "\68";
}
.access-bxs-droplet-half:before {
    content: "\69";
}
.access-bx-font-minus:before {
    content: "\6a";
}
.access-bx-font-plus:before {
    content: "\6b";
}
.access-bx-refresh:before {
    content: "\6c";
}

.accessibility-toolbar{
  display: block;
  width: 80px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #23201d;
  z-index: 10000;
  padding: 10px;
}

.accessibility-toolbar ul li{
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

.accessibility-toolbar ul li a{
  display: block;
  line-height: 64px;
  text-align: center;
  width: 60px;
  height: 60px;
  font-size: 30px;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  box-sizing: border-box;

}

.accessibility-toolbar ul li a.active{
  border: 4px solid yellow;
  line-height: 56px;
}


body.acccess-no-colors a, body.acccess-no-colors li,
body.acccess-no-colors div.inner-picture, body.acccess-no-colors section.banner,
body.acccess-no-colors div.button, body.acccess-no-colors button,
body.acccess-no-colors div.button, body.acccess-no-colors div.scroll-up,
body.acccess-no-colors img, body.acccess-no-colors iframe,
body.acccess-no-colors h1, body.acccess-no-colors h2,
body.acccess-no-colors h3, body.acccess-no-colors h4,
body.acccess-no-colors h5, body.acccess-no-colors p, body.acccess-no-colors span,
body.acccess-no-colors .for-the-planet, body.acccess-no-colors .articles,
body.acccess-no-colors section.questions, body.acccess-no-colors section.builder,
body.acccess-no-colors section.brands, body.acccess-no-colors section.posts,
body.acccess-no-colors .close, body.acccess-no-colors section.axe,
body.acccess-no-colors section.mega-accordion,
body.acccess-no-colors footer.main-footer .socials,
body.acccess-no-colors .number .number-container .picture{
  filter: grayscale(100%) !important;
}

body.acccess-no-colors .accessibility-toolbar,
body.acccess-no-colors .accessibility-toolbar *{
  filter: none;
}

body.access-mark-headings h1, body.access-mark-headings h2,
body.access-mark-headings h3, body.access-mark-headings h4,
body.access-mark-headings h5, body.access-mark-headings h6{
  background: yellow;
  color: black !important;
  text-shadow: none;
}

body.access-mark-headings h1 span, body.access-mark-headings h2 span,
body.access-mark-headings h3 span, body.access-mark-headings h4 span,
body.access-mark-headings h5 span, body.access-mark-headings h6 span{
  color: black !important;
  text-shadow: none;
}

body.access-font-family, body.access-font-family p,
body.access-font-family h1 span, body.access-font-family h2 span{
  font-family: Arial, sans-serif !important;
  font-weight: normal !important;
}

body.access-font-family .accessibility-toolbar ul li a span{
  font-family: "accessibility" !important;
}

body.access-contrasts section.banner div.banner-container div.inner,
body.access-contrasts div.card div.inner div.inner-picture div.picture,
body.access-contrasts section.number div.picture,
body.access-contrasts .button a, body.access-contrasts a.btn, body.access-contrasts p mark,
body.access-contrasts .social-wall .element, body.access-contrasts footer.main-footer .socials{
  background-image: none !important;
  background-color: black !important;
  color: white !important;
}

body.access-contrasts section.mega-accordion .items .item .layer:after{
    background-color: rgba(0, 0, 0, 0.9) !important;
}

body.access-contrasts section.for-the-planet{
    background-color: white !important;
}