
.filter-item:before, .filter-item:after {
  display: block;
  position: absolute;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.58, 0.3, 0.005, 1);
  -o-transition-timing-function: cubic-bezier(0.58, 0.3, 0.005, 1);
  transition-timing-function: cubic-bezier(0.58, 0.3, 0.005, 1);
}

.filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before, .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):after {
  opacity: 0;
}


.filter-item:hover:before,
.filter-item:hover:after,
.filter-item:focus:before,
.filter-item:focus:after,
.filter-item.highlighted:before,
.filter-item.highlighted:after,
.act:before,
.act:after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}


.filter-pointer-double-line .filter-item:before, .filter-pointer-double-line .filter-item:after, .filter-pointer-underline .filter-item:before, .filter-pointer-underline .filter-item:after, .filter-pointer-overline .filter-item:before, .filter-pointer-overline .filter-item:after {
  height: 3px;
  width: 100%;
  left: 0;
  background-color: #55595c;
  z-index: 2;
}

.filter-pointer-double-line.filter-animation-grow .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before, .filter-pointer-double-line.filter-animation-grow .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):after, .filter-pointer-underline.filter-animation-grow .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before, .filter-pointer-underline.filter-animation-grow .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):after, .filter-pointer-overline.filter-animation-grow .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before, .filter-pointer-overline.filter-animation-grow .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):after {
  height: 0;
  width: 0;
  left: 50%;
}

.filter-pointer-double-line.filter-animation-drop-out .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before, .filter-pointer-underline.filter-animation-drop-out .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before, .filter-pointer-overline.filter-animation-drop-out .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before {
  top: 10px;
}

.filter-pointer-double-line.filter-animation-drop-out .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):after, .filter-pointer-underline.filter-animation-drop-out .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):after, .filter-pointer-overline.filter-animation-drop-out .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):after {
  bottom: 10px;
}

.filter-pointer-double-line.filter-animation-drop-in .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before, .filter-pointer-underline.filter-animation-drop-in .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before, .filter-pointer-overline.filter-animation-drop-in .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before {
  top: -10px;
}

.filter-pointer-double-line.filter-animation-drop-in .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):after, .filter-pointer-underline.filter-animation-drop-in .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):after, .filter-pointer-overline.filter-animation-drop-in .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):after {
  bottom: -10px;
}

.filter-pointer-double-line.filter-animation-none,
.filter-pointer-double-line.filter-animation-none .filter-item, .filter-pointer-underline.filter-animation-none,
.filter-pointer-underline.filter-animation-none .filter-item, .filter-pointer-overline.filter-animation-none,
.filter-pointer-overline.filter-animation-none .filter-item {
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

.filter-pointer-double-line.filter-animation-none:before, .filter-pointer-double-line.filter-animation-none:after, .filter-pointer-double-line.filter-animation-none:hover, .filter-pointer-double-line.filter-animation-none:focus,
.filter-pointer-double-line.filter-animation-none .filter-item:before,
.filter-pointer-double-line.filter-animation-none .filter-item:after,
.filter-pointer-double-line.filter-animation-none .filter-item:hover,
.filter-pointer-double-line.filter-animation-none .filter-item:focus, .filter-pointer-underline.filter-animation-none:before, .filter-pointer-underline.filter-animation-none:after, .filter-pointer-underline.filter-animation-none:hover, .filter-pointer-underline.filter-animation-none:focus,
.filter-pointer-underline.filter-animation-none .filter-item:before,
.filter-pointer-underline.filter-animation-none .filter-item:after,
.filter-pointer-underline.filter-animation-none .filter-item:hover,
.filter-pointer-underline.filter-animation-none .filter-item:focus, .filter-pointer-overline.filter-animation-none:before, .filter-pointer-overline.filter-animation-none:after, .filter-pointer-overline.filter-animation-none:hover, .filter-pointer-overline.filter-animation-none:focus,
.filter-pointer-overline.filter-animation-none .filter-item:before,
.filter-pointer-overline.filter-animation-none .filter-item:after,
.filter-pointer-overline.filter-animation-none .filter-item:hover,
.filter-pointer-overline.filter-animation-none .filter-item:focus {
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

.filter-pointer-double-line .filter-item:before, .filter-pointer-overline .filter-item:before {
  content: '';
  top: 0;
}

.filter-pointer-double-line.filter-animation-slide .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before, .filter-pointer-overline.filter-animation-slide .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before {
  width: 10px;
  left: -20px;
}

.filter-pointer-double-line .filter-item:after, .filter-pointer-underline .filter-item:after {
  content: '';
  bottom: 0;
}

.filter-pointer-double-line.filter-animation-slide .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):after, .filter-pointer-underline.filter-animation-slide .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):after {
  width: 10px;
  left: calc(100% + 20px);
}

.filter-pointer-framed .filter-item:before, .filter-pointer-framed .filter-item:after {
  background: transparent;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  border: 3px solid #55595c;
}

.filter-pointer-framed .filter-item:before {
  content: '';
}

.filter-pointer-framed.filter-animation-grow .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before {
  -webkit-transform: scale(0.75);
  -ms-transform: scale(0.75);
  transform: scale(0.75);
}

.filter-pointer-framed.filter-animation-shrink .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before {
  -webkit-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);
}

.filter-pointer-framed.filter-animation-grow .filter-item:before, .filter-pointer-framed.filter-animation-shrink .filter-item:before {
  -webkit-transition: opacity 0.2s, -webkit-transform 0.4s;
  transition: opacity 0.2s, -webkit-transform 0.4s;
  -o-transition: opacity 0.2s, transform 0.4s;
  transition: opacity 0.2s, transform 0.4s;
  transition: opacity 0.2s, transform 0.4s, -webkit-transform 0.4s;
}

.filter-pointer-framed.filter-animation-draw .filter-item:before, .filter-pointer-framed.filter-animation-draw .filter-item:after {
  width: 3px;
  height: 3px;
}

.filter-pointer-framed.filter-animation-draw .filter-item:before {
  border-width: 0 0 3px 3px;
  -webkit-transition: width 0.1s 0.2s, height 0.1s 0.3s, opacity 0.12s 0.22s;
  -o-transition: width 0.1s 0.2s, height 0.1s 0.3s, opacity 0.12s 0.22s;
  transition: width 0.1s 0.2s, height 0.1s 0.3s, opacity 0.12s 0.22s;
}

.filter-pointer-framed.filter-animation-draw .filter-item:after {
  content: '';
  top: initial;
  bottom: 0;
  left: initial;
  right: 0;
  border-width: 3px 3px 0 0;
  -webkit-transition: width 0.1s, height 0.1s 0.1s, opacity 0.02s 0.18s;
  -o-transition: width 0.1s, height 0.1s 0.1s, opacity 0.02s 0.18s;
  transition: width 0.1s, height 0.1s 0.1s, opacity 0.02s 0.18s;
}


.filter-pointer-framed.filter-animation-draw .filter-item:hover:before,
.filter-pointer-framed.filter-animation-draw .filter-item:hover:after,
.filter-pointer-framed.filter-animation-draw .filter-item:focus:before,
.filter-pointer-framed.filter-animation-draw .filter-item:focus:after,
.filter-pointer-framed.filter-animation-draw .filter-item.highlighted:before,
.filter-pointer-framed.filter-animation-draw .filter-item.highlighted:after,
.filter-pointer-framed.filter-animation-draw .act:before,
.filter-pointer-framed.filter-animation-draw .act:after {
  width: 100%;
  height: 100%;
}


.filter-pointer-framed.filter-animation-draw .filter-item:hover:before,
.filter-pointer-framed.filter-animation-draw .filter-item:focus:before,
.filter-pointer-framed.filter-animation-draw .filter-item.highlighted:before,
.filter-pointer-framed.filter-animation-draw .act:before {
  -webkit-transition: opacity 0.02s, height 0.1s, width 0.1s 0.1s;
  -o-transition: opacity 0.02s, height 0.1s, width 0.1s 0.1s;
  transition: opacity 0.02s, height 0.1s, width 0.1s 0.1s;
}


.filter-pointer-framed.filter-animation-draw .filter-item:hover:after,
.filter-pointer-framed.filter-animation-draw .filter-item:focus:after,
.filter-pointer-framed.filter-animation-draw .filter-item.highlighted:after,
.filter-pointer-framed.filter-animation-draw .act:after {
  -webkit-transition: opacity 0.02s 0.2s, height 0.1s 0.2s, width 0.1s 0.3s;
  -o-transition: opacity 0.02s 0.2s, height 0.1s 0.2s, width 0.1s 0.3s;
  transition: opacity 0.02s 0.2s, height 0.1s 0.2s, width 0.1s 0.3s;
}

.filter-pointer-framed.filter-animation-corners .filter-item:before, .filter-pointer-framed.filter-animation-corners .filter-item:after {
  width: 3px;
  height: 3px;
}

.filter-pointer-framed.filter-animation-corners .filter-item:before {
  border-width: 3px 0 0 3px;
}

.filter-pointer-framed.filter-animation-corners .filter-item:after {
  content: '';
  top: initial;
  bottom: 0;
  left: initial;
  right: 0;
  border-width: 0 3px 3px 0;
}


.filter-pointer-framed.filter-animation-corners .filter-item:hover:before,
.filter-pointer-framed.filter-animation-corners .filter-item:hover:after,
.filter-pointer-framed.filter-animation-corners .filter-item:focus:before,
.filter-pointer-framed.filter-animation-corners .filter-item:focus:after,
.filter-pointer-framed.filter-animation-corners .filter-item.highlighted:before,
.filter-pointer-framed.filter-animation-corners .filter-item.highlighted:after,
.filter-pointer-framed.filter-animation-corners .act:before,
.filter-pointer-framed.filter-animation-corners .act:after {
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.002s, width 0.4s, height 0.4s;
  -o-transition: opacity 0.002s, width 0.4s, height 0.4s;
  transition: opacity 0.002s, width 0.4s, height 0.4s;
}

.filter-pointer-framed.filter-animation-none,
.filter-pointer-framed.filter-animation-none .filter-item {
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

.filter-pointer-framed.filter-animation-none:before, .filter-pointer-framed.filter-animation-none:after, .filter-pointer-framed.filter-animation-none:hover, .filter-pointer-framed.filter-animation-none:focus,
.filter-pointer-framed.filter-animation-none .filter-item:before,
.filter-pointer-framed.filter-animation-none .filter-item:after,
.filter-pointer-framed.filter-animation-none .filter-item:hover,
.filter-pointer-framed.filter-animation-none .filter-item:focus {
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

.filter-pointer-background .filter-item:before, .filter-pointer-background .filter-item:after {
  content: '';
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.filter-pointer-background .filter-item:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #55595c;
  z-index: -1;
}


.filter-pointer-background .filter-item:hover,
.filter-pointer-background .filter-item:focus,
.filter-pointer-background .filter-item.highlighted,
.filter-pointer-background .act {
  color: #fff;
}

.filter-pointer-background.filter-animation-grow .filter-item:before {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
}


.filter-pointer-background.filter-animation-grow .filter-item:hover:before,
.filter-pointer-background.filter-animation-grow .filter-item:focus:before,
.filter-pointer-background.filter-animation-grow .filter-item.highlighted:before,
.filter-pointer-background.filter-animation-grow .act:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.filter-pointer-background.filter-animation-shrink .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}


.filter-pointer-background.filter-animation-shrink .filter-item:hover:before,
.filter-pointer-background.filter-animation-shrink .filter-item:focus:before,
.filter-pointer-background.filter-animation-shrink .filter-item.highlighted:before,
.filter-pointer-background.filter-animation-shrink .act:before {
  -webkit-transition: opacity 0.15s, -webkit-transform 0.4s;
  transition: opacity 0.15s, -webkit-transform 0.4s;
  -o-transition: opacity 0.15s, transform 0.4s;
  transition: opacity 0.15s, transform 0.4s;
  transition: opacity 0.15s, transform 0.4s, -webkit-transform 0.4s;
}

.filter-pointer-background.filter-animation-sweep-left .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before {
  left: 100%;
}

.filter-pointer-background.filter-animation-sweep-right .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before {
  right: 100%;
}

.filter-pointer-background.filter-animation-sweep-up .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before {
  top: 100%;
}

.filter-pointer-background.filter-animation-sweep-down .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before {
  bottom: 100%;
}

.filter-pointer-background.filter-animation-shutter-out-vertical .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before {
  bottom: 50%;
  top: 50%;
}

.filter-pointer-background.filter-animation-shutter-out-horizontal .filter-item:not(:hover):not(:focus):not(.act):not(.highlighted):before {
  right: 50%;
  left: 50%;
}

.filter-pointer-background.filter-animation-shutter-in-vertical .filter-item:after, .filter-pointer-background.filter-animation-shutter-in-horizontal .filter-item:after {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #55595c;
  z-index: -1;
}

.filter-pointer-background.filter-animation-shutter-in-vertical .filter-item:before {
  top: 0;
  bottom: 100%;
}

.filter-pointer-background.filter-animation-shutter-in-vertical .filter-item:after {
  top: 100%;
  bottom: 0;
}


.filter-pointer-background.filter-animation-shutter-in-vertical .filter-item:hover:before,
.filter-pointer-background.filter-animation-shutter-in-vertical .filter-item:focus:before,
.filter-pointer-background.filter-animation-shutter-in-vertical .filter-item.highlighted:before,
.filter-pointer-background.filter-animation-shutter-in-vertical .act:before {
  bottom: 50%;
}


.filter-pointer-background.filter-animation-shutter-in-vertical .filter-item:hover:after,
.filter-pointer-background.filter-animation-shutter-in-vertical .filter-item:focus:after,
.filter-pointer-background.filter-animation-shutter-in-vertical .filter-item.highlighted:after,
.filter-pointer-background.filter-animation-shutter-in-vertical .act:after {
  top: 50%;
}

.filter-pointer-background.filter-animation-shutter-in-horizontal .filter-item:before {
  right: 0;
  left: 100%;
}

.filter-pointer-background.filter-animation-shutter-in-horizontal .filter-item:after {
  right: 100%;
  left: 0;
}


.filter-pointer-background.filter-animation-shutter-in-horizontal .filter-item:hover:before,
.filter-pointer-background.filter-animation-shutter-in-horizontal .filter-item:focus:before,
.filter-pointer-background.filter-animation-shutter-in-horizontal .filter-item.highlighted:before,
.filter-pointer-background.filter-animation-shutter-in-horizontal .act:before {
  left: 50%;
}


.filter-pointer-background.filter-animation-shutter-in-horizontal .filter-item:hover:after,
.filter-pointer-background.filter-animation-shutter-in-horizontal .filter-item:focus:after,
.filter-pointer-background.filter-animation-shutter-in-horizontal .filter-item.highlighted:after,
.filter-pointer-background.filter-animation-shutter-in-horizontal .act:after {
  right: 50%;
}

.filter-pointer-background.filter-animation-none,
.filter-pointer-background.filter-animation-none .filter-item {
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

.filter-pointer-background.filter-animation-none:before, .filter-pointer-background.filter-animation-none:after, .filter-pointer-background.filter-animation-none:hover, .filter-pointer-background.filter-animation-none:focus,
.filter-pointer-background.filter-animation-none .filter-item:before,
.filter-pointer-background.filter-animation-none .filter-item:after,
.filter-pointer-background.filter-animation-none .filter-item:hover,
.filter-pointer-background.filter-animation-none .filter-item:focus {
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

.filter-pointer-text.filter-animation-skew .filter-item:hover,
.filter-pointer-text.filter-animation-skew .filter-item:focus {
  -webkit-transform: skew(-8deg);
  -ms-transform: skew(-8deg);
  transform: skew(-8deg);
}

.filter-pointer-text.filter-animation-grow .filter-item:hover,
.filter-pointer-text.filter-animation-grow .filter-item:focus {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.filter-pointer-text.filter-animation-shrink .filter-item:hover,
.filter-pointer-text.filter-animation-shrink .filter-item:focus {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}

.filter-pointer-text.filter-animation-float .filter-item:hover,
.filter-pointer-text.filter-animation-float .filter-item:focus {
  -webkit-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  transform: translateY(-8px);
}

.filter-pointer-text.filter-animation-sink .filter-item:hover,
.filter-pointer-text.filter-animation-sink .filter-item:focus {
  -webkit-transform: translateY(8px);
  -ms-transform: translateY(8px);
  transform: translateY(8px);
}

.filter-pointer-text.filter-animation-rotate .filter-item:hover,
.filter-pointer-text.filter-animation-rotate .filter-item:focus {
  -webkit-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg);
}

.filter-pointer-text.filter-animation-none,
.filter-pointer-text.filter-animation-none .filter-item {
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

.filter-pointer-text.filter-animation-none:before, .filter-pointer-text.filter-animation-none:after, .filter-pointer-text.filter-animation-none:hover, .filter-pointer-text.filter-animation-none:focus,
.filter-pointer-text.filter-animation-none .filter-item:before,
.filter-pointer-text.filter-animation-none .filter-item:after,
.filter-pointer-text.filter-animation-none .filter-item:hover,
.filter-pointer-text.filter-animation-none .filter-item:focus {
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

.filter-decorations:not(.class-1):not(.class-2):not(.class-3):not(.class-4) {

  &.filter-pointer-underline a.filter-item:after,
  &.filter-pointer-overline a.filter-item:before,
  &.filter-pointer-double-line a.filter-item:before,
  &.filter-pointer-double-line a.filter-item:after {
    height: var(--filter-pointer-border-width);
  }

  &.filter-pointer-background a.filter-item:after,
  &.filter-pointer-background a.filter-item:before {
    border-radius: var(--filter-pointer-bg-radius);
  }

  &:not(.filter-pointer-framed) a.filter-item {
    &:before,
    &:after {
      background: var(--filter-pointer-bg-color-hover);
    }

    &.act:before,
    &.act:after {
      background: var(--filter-pointer-bg-color-active);
    }
  }

  &.filter-pointer-framed {
    a.filter-item {
      &:before {
        border-color: var(--filter-pointer-bg-color-hover);
        border-width: var(--filter-pointer-border-width);
      }

      &:after {
        border-color: var(--filter-pointer-bg-color-hover);
      }

      &.act:before,
      &.act:after {
        border-color: var(--filter-pointer-bg-color-active);
      }
    }

    &.filter-animation-draw a.filter-item {
      &:before {
        border-width: 0 0 var(--filter-pointer-border-width) var(--filter-pointer-border-width);
      }

      &:after {
        border-width: var(--filter-pointer-border-width) var(--filter-pointer-border-width) 0 0;
      }
    }

    &.filter-animation-corners a.filter-item {
      &:before {
        border-width: var(--filter-pointer-border-width) 0 0 var(--filter-pointer-border-width);
      }

      &:after {
        border-width: 0 var(--filter-pointer-border-width) var(--filter-pointer-border-width) 0;
      }
    }
  }

  a.filter-item {
    color: var(--filter-title-color-normal);

    &:hover {
      color: var(--filter-title-color-hover);
    }

    &.act {
      color: var(--filter-title-color-active);
    }
  }
}