.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

h2 span.animated {
  animation: headerUp 2s both;
}
@keyframes headerUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    text-shadow: 14px 16px 5px rgba(0,0,0,0.49);
  }

  to {
    opacity: 1;
    text-shadow: 0px 0px 0px rgba(0,0,0,0.49);;
    transform: none;
  }
}

/* Animations START */
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  transform-origin: top center;
  animation-name: swing;
}

.pulse {
  animation-name: pulse;
}
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRight {
  animation-name: fadeInRight;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
}

/* END */
#feedback-top:before,
#feedback-top:after,
#protected:before,
#decolorization:before,
#our-services:before,
#our-team:before {
  position: absolute;
  width: 70px;
  height: 70px;
  content: "";
  background-position: center center !important;
  background-repeat: no-repeat !important;  
  background-size: contain !important;
}
#feedback-top:before {
  background: url(../images/icons/calc.png);  
  top: 90px;
  left: 15px;  
}
#feedback-top:after {
  background: url(../images/icons/percent.png);
  bottom: 10px;
  right: 15px;
}
#protected:before {
  background: url(../images/icons/percent.png);
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}
#decolorization:before {
  background: url(../images/icons/calc.png);
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}
#our-services:before {
  background: url(../images/icons/calc.png);
  top: 160px;
  left: 15px;
}
#our-team:before {
  background: url(../images/icons/1c.png);
  top: 185px;
  left: 15px;
}
