.svg-icon {
  /* WORKMAX LOGOS ------------------------------------------------ */
  /* ARROW IN CIRCLE ---------------------------------------------- */
  /* SLIDER ARROW ------------------------------------------------- */
  /* SOCIAL MEDIA ICONS ------------------------------------------- */
  /* MAGNIFYING GLASS --------------------------------------------- */
  /* ENVELOPE ----------------------------------------------------- */
  /* TELEPHONE ----------------------------------------------------- */
  /* WORKMAX ICONS ------------------------------------------------ */
}
.svg-icon,
.svg-icon * {
  box-sizing: border-box;
}
.svg-icon.workmax-logo,
.svg-icon.workmax-logo svg {
  display: inline-block;
  height: 100%;
}
.svg-icon.workmax-logo.monochromatic .path {
  fill: var(--black);
}
.svg-icon.workmax-logo.color .cls-1 {
  fill: #4e4e4e;
}
.svg-icon.workmax-logo.color .cls-2 {
  fill: var(--brand-green);
}
.svg-icon.workmax-logo.color .cls-3 {
  fill: var(--grey);
}
.svg-icon.arrow-in-circle {
  display: block;
  width: 103px;
  height: 103px;
}
.svg-icon.arrow-in-circle svg > .wrap .circle circle {
  stroke: #000;
  fill: transparent;
  transition: all 200ms ease-in-out;
}
.svg-icon.arrow-in-circle svg > .wrap .arrow {
  fill: #000;
  transition: all 200ms ease-in-out;
}
.svg-icon.slider-arrow {
  display: block;
  width: 17px;
  height: 29px;
}
.svg-icon.slider-arrow .path {
  transition: all 200ms ease-in-out;
  fill: #000;
}
.svg-icon.slider-arrow:hover .path {
  fill: #f00;
}
.svg-icon.social-media-icon,
.svg-icon.social-media-icon svg {
  display: block;
}
.svg-icon.social-media-icon .foreground,
.svg-icon.social-media-icon .background {
  transition: all 200ms ease-in-out;
}
.svg-icon.social-media-icon .foreground {
  fill: var(--white);
}
.svg-icon.social-media-icon .background {
  fill: var(--text);
}
.svg-icon.social-media-icon:hover .foreground {
  fill: var(--text);
}
.svg-icon.social-media-icon:hover .background {
  fill: var(--brand-green);
}
.svg-icon.magnifying-glass,
.svg-icon.magnifying-glass svg {
  display: block;
}
.svg-icon.magnifying-glass .path {
  fill: var(--white);
  transition: all 200ms ease-in-out;
}
.svg-icon.magnifying-glass:hover .path {
  fill: var(--brand-green);
}
.svg-icon.envelope,
.svg-icon.envelope svg {
  display: block;
}
.svg-icon.envelope .mask {
  fill: var(--white);
  stroke: none;
  transition: all 200ms ease-in-out;
}
.svg-icon.envelope:hover .mask {
  fill: var(--brand-green);
}
.svg-icon.telephone,
.svg-icon.telephone svg {
  display: block;
}
.svg-icon.telephone .empty {
  fill: none;
}
.svg-icon.telephone .path {
  fill: var(--white);
  stroke: none;
  transition: all 200ms ease-in-out;
}
.svg-icon.telephone:hover .path {
  fill: var(--brand-green);
}
.svg-icon.workmax {
  /* with background colors */
}
.svg-icon.workmax,
.svg-icon.workmax svg {
  display: block;
}
.svg-icon.workmax svg .path {
  fill: var(--text);
  transition: all 200ms ease-in-out;
}
.has-brand-green-background-color .svg-icon.workmax svg .path, .has-brand-orange-background-color .svg-icon.workmax svg .path, .has-brand-blue-background-color .svg-icon.workmax svg .path, .has-grey-background-color .svg-icon.workmax svg .path, .has-brand-grey-background-color .svg-icon.workmax svg .path, .has-text-background-color .svg-icon.workmax svg .path, .has-black-background-color .svg-icon.workmax svg .path {
  fill: var(--white);
}
.single-icon-container > .svg-icon.workmax svg {
  width: 7em;
  margin-right: 1em;
}
.single-icon-container > .svg-icon.workmax svg .path {
  fill: var(--fill);
}
@media screen and (min-width: 600px) {
  .single-icon-container > .svg-icon.workmax svg {
    width: 10em;
  }
}
.single-icon-container.aligncenter > .svg-icon.workmax svg {
  margin: 0 auto;
}