.automower-animace {position: relative;}
.automower-animace .nero-abs {position: absolute; top:0px; left: 0px; width:100%; height:auto;}
.automower-animace .nero-iko {position: absolute; width:7%; height:auto; cursor:pointer;}
.automower-animace .nero-iko img {width:100%; height: auto; transform: scale(0.85); display: block;
  transition: transform 50ms ease-in-out;}
.automower-animace .nero-iko:hover img {transform: scale(1); transition: transform 250ms ease-in-out;}
.automower-animace .nero-iko1 {top: 10%; left: 53%;}
.automower-animace .nero-iko2 {top: 5%; left: 17%;}
.automower-animace .nero-iko3 {top: 67%; left: 87%;}
.automower-animace .nero-iko4 {top: 63%; left: 12%;}
.automower-animace .nero-iko1b {top: 13%; left: 67%;}
.automower-animace .nero-iko3b {top: 60%; left: 18%;}
.automower-animace .nero-iko4b {top: 53%;left: 74%;}
.automower-animace .nero-drat {width:100%; height: 100%; background-size: cover;  background-image: url('../img/nero2b.png'); background-repeat: no-repeat; }
.automower-animace .nero-drat2 {width:100%; height: 100%; background-size: cover;  background-image: url('../img/nero2.png'); background-repeat: no-repeat; }
.automower-animace .nero-triangle { width:100%; height: 100%; background-size: cover;  background-image: url('../img/nero5.png'); background-repeat: no-repeat;
  animation: yourAnimation2 1s ease 0s infinite normal none;}
.automower-animace:hoverOFF .nero-drat {animation: yourAnimation 1s ease 0s infinite normal none; background-image: url('../img/nero22.png');}
.automower-animace:hover .nero-triangle {animation: none; background-image: url('../img/nero5_1.png');}
.automower-animace .nero-drat-animce {animation: yourAnimation 1s ease 0s infinite normal none;  background-image: url('../img/nero22.png');}

.automower-animace .nero-iko span {display: block; background-color: #fff; padding: 8px 12px; border-radius: 8px; line-height: 1.2;
      font-size: 15px; position: absolute; top: 108%; text-align: center; transform: translateX(-10%);  overflow: hidden;
      opacity: 0;  transition: opacity .25s ease-in-out; display:none;}

.automower-animace .nero-iko1 span {transform: translateX(-15%);}     
.automower-animace .nero-iko4 span {transform: translateX(-25%);}     
.automower-animace .nero-iko:hover span {opacity: 1; display:block;} 



@keyframes yourAnimation {
  0.0%{
    background-image: url('../img/nero22.png'); 
  }
  33%{
    background-image: url('../img/nero3.png'); 
  }
  66%{
    background-image: url('../img/nero4.png'); 
  }

}

@keyframes yourAnimation2 {
  0.0%{
    background-image: url('../img/nero5_1.png'); 
  }
  25%{
    background-image: url('../img/nero5_2.png'); 
  }
  50%{
    background-image: url('../img/nero5_3.png'); 
  }
  75%{
    background-image: url('../img/nero5_4.png'); 
  }
  100%{
    background-image: url('../img/nero5_1.png'); 
  }


}

#triangle1 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
#circle1 {position: absolute; top: 69%; left: 61%; width: 3em; height: 3em; border-radius: 100%; border: 1.8px white solid;}
#line1 {height: 50.5%; top: 19.5%; left: 60%; width: 3px; transform: rotate(-12deg); position: absolute;}
#line2 {height: 60.5%; top: -15.5%; left: 38%;  width: 3px; transform: rotate(95deg); position: absolute;}
#line3 {height: 89.5%; top: -1.5%; left: 42%; width: 3px; transform: rotate(-50deg); position: absolute;}

#line1 .path, #line2 .path, #line3 .path {animation: line 5s linear infinite;}
    @keyframes line { to { stroke-dashoffset: 96; } }


.overflow-x-hidden {overflow-x: hidden;}

@media (max-width: 768px) {
.automower-animace {margin-top: 0px;}
}

@media (max-width: 576px) {
  .automower-animace {width:140%; position: relative; transform: translateX(-15%);}
  .automower-animace .nero-iko4 span {transform: translateX(-55%);}  
  .automower-animace .nero-iko2 span {transform: translateX(5%);} 
   .automower-animace .nero-iko4 {top: 64%; left: 23%;}
   .automower-animace .nero-iko3 {top: 67%; left: 73%;}
  
  }
  


.automower-animace .dot span {display: block; background-color: #fff; padding: 8px 12px; border-radius: 8px; line-height: 1.2;
              font-size: 15px; position: absolute; top: 65%; text-align: center; transform: translateX(-50%);  overflow: hidden;
              opacity: 0;  transition: opacity .25s ease-in-out; z-index:100; display:none;} 
.automower-animace .dot:hover span {opacity: 1; display:block;} 

.automower-animace .dot.dot1 {position:absolute; top: 79.9%; left:35%;} 
.automower-animace .dot.dot2 {position:absolute; top: 81%; left: 71%;} 
.automower-animace .dot.dot3 {position:absolute; top: 43%; left: 42%;} 
.automower-animace .dot.dot4 {position:absolute; top: 41%; left: 60%;} 

.automower-animace .dot.dot2 span {top: auto; bottom: 48px;}
.automower-animace .dot.dot2b span {top: auto; bottom: 49px;}
.automower-animace .dot.dot1b {position:absolute; top: 68.4%; left:35%;} 
.automower-animace .dot.dot2b {position:absolute; top: 83%; left: 59%;}
.automower-animace .dot.dot3b {position:absolute; top: 43%; left: 36.6%;} 
.automower-animace .dot.dot4b {position:absolute; top: 41%; left: 64.8%;}  

.automower-animace .dot:before {
  content:"";
  display:block;
  width: 25px;
  height: 25px;
  position: relative;
  left: -15px;
  top: -15px;
  background-color: #f47220;
  border: 7px solid white;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .automower-animace .dot:before { width: 20px;  height: 20px; border: 5px solid white;}
  .automower-animace .dot.dot1 {position:absolute; top: 81.2%; left:35%;} 
  .automower-animace .dot.dot2 {position:absolute; top:83%; left:60%;} 
  .automower-animace .dot.dot3 {position:absolute; top:40%; left:40%;} 
  .automower-animace .dot.dot4 {position:absolute; top:40%; left:60.4%;} 
}

@media (min-width: 768px) {
.d-md-animflex {display:flex;}
.pss-md-3 {padding-left: 40px !important;;}
}

#animace-main-img {display:block; position: relative;}