.program-container .show {
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.program-container .triangle {
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.program-container .hide {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.program-container .filter-item:hover .triangle {
  -webkit-transform: scale(0) rotate(-20deg);
      -ms-transform: scale(0) rotate(-20deg);
          transform: scale(0) rotate(-20deg);
  opacity: 0;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}

.filter-item:hover .figure .hide {
  -webkit-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
          transform: rotate(15deg);
  opacity: 0;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.figure .show {
  opacity: 0;
  -webkit-transform: scale(0) rotate(-20deg);
      -ms-transform: scale(0) rotate(-20deg);
          transform: scale(0) rotate(-20deg);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.filter-item:hover .figure .show {
  opacity: 1;
  -webkit-transform: scale(1) rotate(0);
      -ms-transform: scale(1) rotate(0);
          transform: scale(1) rotate(0);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.circle {
  -webkit-transform: rotateZ(30deg);
      -ms-transform: rotate(30deg);
          transform: rotateZ(30deg);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.filter-item:hover .circle-svg .circle {
  opacity: 1;
  -webkit-transform: scale(1) rotate(0);
      -ms-transform: scale(1) rotate(0);
          transform: scale(1) rotate(0);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.circle-svg .show {
  opacity: 0;
  -webkit-transform: scale(0) rotate(-20deg);
      -ms-transform: scale(0) rotate(-20deg);
          transform: scale(0) rotate(-20deg);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.circle-svg .hide {
  -webkit-transform: rotateZ(0deg);
      -ms-transform: rotate(0deg);
          transform: rotateZ(0deg);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.filter-item:hover .circle-svg .hide {
  opacity: 0;
  -webkit-transform: scale(0.5) rotateZ(30deg);
      -ms-transform: scale(0.5) rotate(30deg);
          transform: scale(0.5) rotateZ(30deg);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.briefcase .left-part {
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}

.filter-item:hover .briefcase .left-part {
  -webkit-transform: rotateZ(104deg);
      -ms-transform: rotate(104deg);
          transform: rotateZ(104deg);
}

.filter-item:hover .briefcase .hide {
  opacity: 0;
}

.plansheet {
  -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
          transform: translateX(-10px);
  opacity: 0;
}

.filter-item:hover .briefcase .plansheet {
  opacity: 1;
  -webkit-transition: all 0.5s linear 0.3s;
  transition: all 0.5s linear 0.3s;
}

.filter-item:hover .badjik .hide {
  opacity: 0;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.badjik .circle,
.badjik .rectangle {
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.filter-item:hover .badjik .circle {
  -webkit-transform: matrix(1, 1, -1, 1, 20, -34);
      -ms-transform: matrix(1, 1, -1, 1, 20, -34);
          transform: matrix(1, 1, -1, 1, 20, -34);
  stroke-width: 3.5px;
}

.filter-item:hover .badjik .rectangle {
  -webkit-transform: matrix(0.7, 1.8, 2.4, -0.5, 62, 0.6);
      -ms-transform: matrix(0.7, 1.8, 2.4, -0.5, 62, 0.6);
          transform: matrix(0.7, 1.8, 2.4, -0.5, 62, 0.6);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  stroke-width: 2.2px;
}

.triangles .rotate-and-hide {
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.filter-item:hover .triangles .rotate-and-hide {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
  opacity: 0;
}

.triangles .show {
  -webkit-transform: rotate(-90deg) translateY(7px) translateX(-4px);
      -ms-transform: rotate(-90deg) translateY(7px) translateX(-4px);
          transform: rotate(-90deg) translateY(7px) translateX(-4px);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}

.filter-item:hover .triangles .show {
  opacity: 1;
  -webkit-transform: rotate(0) translateY(7px) translateX(-4px);
      -ms-transform: rotate(0) translateY(7px) translateX(-4px);
          transform: rotate(0) translateY(7px) translateX(-4px);
}

.tv .left-part {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}

.filter-item:hover .tv .left-part {
  -webkit-transform: rotateZ(90deg);
      -ms-transform: rotate(90deg);
          transform: rotateZ(90deg);
  opacity: 1;
}

.filter-item:hover .tv .hide {
  opacity: 0;
}

.tv g.hide {
  opacity: 0;
  -webkit-transform: matrix(0.8, 0, 0, 1.1, 14.8, 1);
      -ms-transform: matrix(0.8, 0, 0, 1.1, 14.8, 1);
          transform: matrix(0.8, 0, 0, 1.1, 14.8, 1);
}

.filter-item:hover .tv g.hide {
  -webkit-transition: all 0.3s linear 0.3s;
  transition: all 0.3s linear 0.3s;
  opacity: 1;
}

.three-circle .rotate {
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  opacity: 1;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}
.filter-item:hover .three-circle .rotate {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
  opacity: 0;
}
.three-circle .show {
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  opacity: 0;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.filter-item:hover .three-circle .show {
  opacity: 1;
  -webkit-transform: rotate(-60deg);
      -ms-transform: rotate(-60deg);
          transform: rotate(-60deg);
}

.tree .show {
  opacity: 0;
  -webkit-transform: rotate(-60deg);
      -ms-transform: rotate(-60deg);
          transform: rotate(-60deg);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}
.filter-item:hover .tree .show {
  opacity: 1;
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}
.filter-item:hover .tree .hide {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}

.pin .show {
  opacity: 0;
  -webkit-transform: translate(18px, -1px) rotate(-75deg);
      -ms-transform: translate(18px, -1px) rotate(-75deg);
          transform: translate(18px, -1px) rotate(-75deg);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.pin .hide {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.filter-item:hover .pin .hide {
  opacity: 0;
}
.filter-item:hover .pin .show {
  opacity: 1;
  -webkit-transform: translate(-6px, 16px);
      -ms-transform: translate(-6px, 16px);
          transform: translate(-6px, 16px);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}

.microfon {
  .smile {
    opacity: 0;
    transition: all .5s;
    transform-origin: center;
    transform: rotate(90deg) translateY(-30px);
  }
}
.filter-item {
  .micr {
    transition: opacity .4s;
  }
  &:hover .micr {
    opacity: 0;
  }
  &:hover .smile {
    opacity: 1;
    transform: rotate(0) translateY(0);
  }
}