.human-heart {
  margin: 5em;
  animation: 2.5s infinite beatHeart;
}
.home-hero-animate {
  position: relative;
  width: 655px;
  height: 581px;
}
@keyframes beatHeart {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes graph-1 {
  0% {
    width: 0;
  }
  100% {
    width: 187px;
  }
}
@keyframes graph-2 {
  0% {
    width: 0;
  }
  100% {
    width: 171px;
  }
}
@keyframes graph-3 {
  0% {
    height: 0;
  }
  50% {
    height: 50px;
  }
  100% {
    height: 0;
  }
}
@keyframes dna {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes panelGraph {
  0% {
    opacity: 1;
    height: 0;
  }
  70% {
    height: 177px;
    opacity: 1;
  }
  100% {
    height: 177px;
    opacity: 0;
  }
}
@keyframes diagram {
  0% {
    height: 0px;
  }
  50% {
    height: 151px;
  }
  100% {
    height: 0px;
  }
}
@keyframes diagram-05 {
  0% {
    height: 0px;
  }
  50% {
    height: 74px;
  }
  100% {
    height: 0px;
  }
}
@keyframes arm {
  0% {
    width: 32px;
    transform: rotate(0deg);
  }
  25% {
    width: 36px;
  }
  50% {
    width: 25px;
    transform: rotate(20deg);
  }
  100% {
    width: 32px;
    transform: rotate(0deg);
  }
}
@keyframes pulse {
  0% {
    background: rgba(255,255,255, 1);
  }
  70% {
   background: rgba(255,255,255, 0);
  }
  100% {
    background: rgba(255,255,255, 0);
  }
}

@keyframes buttonSwitch {
  0% {
    background: #d12b39;
  }
  70% {
    background: #fff;
  }
  100% {
    background: #fff;
  }

}
@keyframes glass {
  0% {
    bottom: -172px;
  }
  50% {
    bottom: -224px;
  }
  100% {
    bottom: -172px;
  }
}
.screen-animation {
  position: absolute;
  top: 32px;
  left: 446px;
  transform: scale(0.234) skewY(30deg);
  transform-origin: 0 0;
  width: 680px;
  height: 396px; 

}
.heart-screen {
  position: absolute;
  left: 73px;
  top: 48px;
  background: url('../images/css_sprites.png') no-repeat -271px -10px;
  width: 163px;
  height: 259px; 
  animation: 2.5s infinite beatHeart;
}
.cell-animation {
  position: absolute;
  left: 121px;
  top: 176px;
  width: 128px;
  height: 169px;
  background: url('../images/css_sprites.png') no-repeat  -10px -501px;
}
.screen-graph-1 {
  position: absolute;
  left: 317px;
  top: 83px;
  width: 217px;
  height: 101px;
  background: url('../images/css_sprites.png') no-repeat -10px -380px; 
}
.screen-graph-1 span {
  position: absolute;
  left: 31px;
  top: 21px;
  width: 0;
  height: 41px;
  overflow: hidden;
  animation: 1.5s 0.5s infinite graph-1;
}
.screen-graph-1 span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 187px;
  height: 41px;
  background: url('../images/css_sprites.png') no-repeat -500px -501px;
}
.screen-graph-2 {
  position: absolute;
  left: 314px;
  top: 273px;
  width: 207px;
  height: 58px;
  background: url('../images/css_sprites.png') no-repeat -247px -380px;
}
.screen-graph-2 span {
  position: absolute;
  left: 30px;
  top: 6px;
  width: 0;
  height: 50px;
  overflow: hidden;
  animation: 1.5s infinite graph-2;
}
.screen-graph-2 span:before { 
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 171px;
  height: 50px;
  background: url('../images/css_sprites.png') no-repeat -158px -562px;
}
.pulse-numb {
  position: absolute;
  left: 595px;
  top: 62px;
}
.pulse-numb span {
  margin-bottom: 20px;
  display: block;
  font-size: 48px;
  color: #fff;
}
.pulse-numb em {
  display: block;
  width: 27px;
  height: 0;
  position: relative;
  bottom: 0;
  overflow: hidden;  
  
}
.pulse-numb-1 em {
  animation: 5s infinite graph-3;
}
.pulse-numb-2 em {
  animation: 5s 1.5s infinite graph-3;
}
.pulse-numb em:after {
  content: "";
  display: block;
  width: 27px;
  height: 50px;
  background: url('../images/css_sprites.png') no-repeat -723px -520px;
}
.pulse-numb.pulse-numb-2 {
  top: 217px; 
}
.dna {
  position: absolute;
  left: 313px;
  top: 53px;
  width: 241px;
  height: 350px;
  transform: scale(0.234) skewY(-30deg);
  transform-origin: 0 0;
}
.dna span {
  position: absolute;
  left: 0;
  top: 0;
  width: 241px;
  height: 350px;
  animation: 3s infinite linear dna;
  background: url('../images/css_sprites.png') no-repeat -10px -10px;
}
.heart {
  position: absolute;
  left: 246px;
  top: 91px;
  width: 247px;
  height: 357px;
  transform: scale(0.234) skewY(-30deg);
  transform-origin: 0 0;
}
.heart span {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -55px;
  margin-top: -103px;
  width: 110px;
  height: 206px; 
  animation: 1.5s infinite linear beatHeart;
  background: url('../images/css_sprites.png') no-repeat -454px -10px; 
}
.panel-graph {
  position: absolute;
  left: 287px;
  top: 213px;
  width: 167px;
  height: 259px;
  transform: scale(0.234) rotate(30deg);
  transform-origin: 0 0;
  
}
.panel-graph:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 119px; 
  height: 184px;
  margin-left: -60px;
  margin-top: -92px;
  background: url('../images/css_sprites.png') no-repeat -584px -10px;
}
.panel-graph span {
  position: absolute;
  left: 50%;
  bottom: 50%;
  margin-left: -57px;
  margin-bottom: -88.5px;
  width: 114px;
  height: 0; 
  overflow: hidden;
  animation: 4s infinite panelGraph; 
}
.panel-graph span:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 114px;
  height: 177px;
  background: url('../images/css_sprites.png') no-repeat -584px -214px;
}
.panel {
  width: 737px;
  height: 441px;
  position: absolute;
  left: 330px;
  top: 238px;
  transform: scale(0.234) rotate(30deg);
  transform-origin: 0 0;
}
.panel-charts {
  width: 600px;
  height: 185px;
  font-size: 0;
  position: absolute;
  top: 65px;
  left: 50%;
  margin-left: -300px;
}
.panel-chart {
  width: 21px;
  text-align: center;
  margin: 0 32px;
  display: inline-block;
  vertical-align: bottom;
  height: 100%;
  position: relative;
}
.panel-chart div {
  font-size: 12px;
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-chart span {
  position: absolute;
  width: 6px;
  height: 151px;
  margin-left: -3px;
  background: #fff;
  bottom: 31px;
  left: 50%;
}
.panel-chart-1 span {
  animation: 5s 0.2s infinite linear diagram;
}
.panel-chart-2 span {
  animation: 5s 0.4s infinite linear diagram-05;
}
.panel-chart-3 span {
  animation: 5s 0.3s infinite linear diagram;
}
.panel-chart-4 span {
  animation: 3s infinite linear diagram;
}
.panel-chart-5 span {
  animation: 4s 0.1s infinite linear diagram-05;
}
.panel-chart-6 span {
  animation: 4s 0.8s infinite linear diagram;
}
.panel-chart-7 span {
  animation: 7s 0.1s infinite linear diagram-05;
}
.panel-buttons {
  position: absolute;
  left: 44px;
  bottom: 87px;
  width: 322px;
  height: 41px;
  background: url('../images/css_sprites.png') no-repeat -158px -501px;
}
.circles-panel {
  width: 303px;
  height: 85px;
  position: absolute;
  right: 50px;
  bottom: 58px;
}
.circle {
  width: 85px;
  height: 85px;
  position: absolute;
  top: 0;
  
}
.circle-1 {
  left: 0px;
  background: url('../images/css_sprites.png') no-repeat -454px -236px;
  animation: 3s 0.1s infinite linear rotation;
}
.circle-2 {
  left: 109px;
  background: url('../images/css_sprites.png') no-repeat -10px -690px;
  animation: 3s 0.5s infinite linear rotation;
}
.circle-3 {
  left: 218px;
  background: url('../images/css_sprites.png') no-repeat -115px -690px;
  animation: 3s 1s infinite linear rotation;
}
.cylinder {
  width: 40px;
  height: 76px;
  position: absolute;
  top: 36px;
  right: 57px; 
  background: url('../images/css_sprites.png') no-repeat -723px -355px;
  animation: 3s infinite linear dna;
}
.man {
  width: 67px;
  height: 129px;
  background: url('../images/css_sprites.png') no-repeat -723px -206px;
  position: absolute;
  left: 300px;
  top: 287px;
  z-index: 10;
  will-change: transform;
}
.man .arm {
  background: url(../images/arm.png) no-repeat 0 0 / 100% 100%;
  position: absolute; 
  left: 33px;
  top: 21px;
  width: 33px;
  height: 21px;
  animation: 6s infinite arm;
  transform-origin: 0 0;
}
.screen-man {
  width: 167px;
  height: 260px;
  position: absolute;
  left: 410px;
  top: 239px;

  transform: scale(0.234) rotate(30deg);
}
.screen-man span {
  position: absolute;
  width: 76px;
  height: 176px;
  top: 50%;
  left: 50%;
  margin-top: -88px;
  margin-left: -38px;
  background: url('../images/css_sprites.png') no-repeat -723px -10px;
}
.pulse {
  position: absolute;
  top: 40px;
  left: 29px; 
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(255,255,255, 0.4);
  animation: pulse 2s infinite;
}
.control {
  width: 71px;
  height: 96px;
  position: absolute;


}
.control-buttons {
  position: absolute;
  bottom: 11px;
  left: 0;
  right: 0;
  text-align: center;
}
.control-buttons span {
  width: 15px;
  height: 9px;
  display: inline-block;
  vertical-align: top;
  background: #a3b7d3;

}
.control-buttons span:last-child {
  background: #d12b39;
  margin-left: 6px;
  animation: buttonSwitch 3s infinite;
  
}
.control-wave {
  position: absolute;
  left: 50%;
  width: 43px;
  height: 32px;
  margin-left: -22px;
  top: 20px;
  border: 1px solid #fff;
  overflow: hidden;
}
.control-wave em {
  left: 0;
  top: 10px;
  position: absolute;
  width: 43px;
  height: 20px;
  background: url('../images/css_sprites.png') no-repeat -723px -590px;
}
.control-right.control-diagram {
  transform: scale(0.234) rotate(-30deg);
  left: 490px;
  top: 389px;
}
.control-left.control-diagram {
  transform: scale(0.234) rotate(30deg);
  left: 18px;
  top: 494px;
}
.control-left.control-plus {
  transform: scale(0.234) rotate(30deg);
  left: -17px;
  top: 477px;
}
.control-right.control-plus {
  transform: scale(0.234) rotate(-30deg);
  left: 526px;
  top: 370px;
}
.control-p {
  position: absolute;
  left: 50%;
  width: 42px;
  height: 49px;
  margin-left: -21px;
  top: 13px;
  background: url('../images/css_sprites.png') no-repeat -723px -451px;
}
.glas-shadow {
  width: 330px;
  height: 330px;
  border-radius: 330px;
  position: absolute;
  bottom: -176px;
  left: 92px;
  transform: scale(0.234) rotateX(-55deg) rotateY(-6deg);
  transform-origin: 0 0; 
  box-shadow: 0 0 10px rgba(185, 195, 214, 0.5);
  animation: glass 3s infinite; 
}
@media (max-width: 1250px) {   
  .home-hero-animate {
    transform: scale(0.8);
    transform-origin: 0 0;
  }
  .hero-right {
    height: 400px;
  }
}
@media (max-width: 1024px) {   
  .home-hero-animate {
    transform: scale(0.65);
  }
}
@media (max-width: 767px) { 
  .home-hero-animate {
    transform-origin: center 0;
  }
}
@media (max-width: 570px) { 
  .hero .hero-right .image-wipe {
    width: 100%;
  }
  .home-hero-animate {
    left: 50%;
    margin-left: calc((-0.65 * 655px)/2);
    transform-origin: 0 0;
  }
}
@media (max-width: 460px) { 
  .hero .hero-right {
    height: 300px;
  }
  .home-hero-animate {
    left: 50%;
    transform: scale(0.55);
    margin-left: calc((-0.55 * 655px)/2);
    transform-origin: 0 0;
  }
}
@media (max-width: 360px) { 
  .hero .hero-right {
    height: 250px;
  }
  .home-hero-animate {
    left: 50%;
    transform: scale(0.45);
    margin-left: calc((-0.45 * 655px)/2);
    transform-origin: 0 0;
  }
}