/* ANIMATION AND STYLE HANDLER FOR THE TOP SECTION OF RIMONI HOME */


/* TECHNOLOGY */


rect.technology-svg-element.anime-4.animate {
   transform: translate(0.4%,0%);
}
rect.technology-svg-element.anime-3.animate {
    animation-name: technology-3;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

/* 2s | 50%/s */
@keyframes technology-3 {
   0% {
      transform: translate(0%,0%);
   }
   50% {
      transform: translate(0%,45%);
   }
   100% {
      transform: translate(0%,0%);
   }
}


rect.technology-svg-element.anime-2.animate {
    animation-name: technology-2;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
/* 4s | 25%/s */
@keyframes technology-2 {
   0% {
      transform: translate(0%,0%);
   }
   25% {
      transform: translate(-45%,0%);
   }
   50% {
      transform: translate(-45%,45%);
   }
   75% {
      transform: translate(-45%,0%);
   }
   100% {
      transform: translate(0%,0%);
   }
}



rect.technology-svg-element.anime-1.animate {
    animation-name: technology-1;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}

/* 6s | 16.667%/s */

/* dotfix: -8.8%,-7% */
/* normal fix: translate(45%,45%) */
@keyframes technology-1 {
   0% {
      transform: translate(0%,0%);
   }
   16.667% {
      transform: translate(-8.8%,-54.5%);
   }
   33.334% {
      transform: translate(-53.8%,-54.5%);
   }
   /* destination */
   50% {
      transform: translate(-53.8%,-9.5%);
   }
   66.667% {
      transform: translate(-53.8%,-54.5%);
   }
   83.334% {
      transform: translate(-8.8%,-54.5%);
   }
   100% {
      transform: translate(0%,0%);
   }
}



/* AGRICULTURE */
rect.agriculture-svg-element.anime-1.animate {
    animation-name: agriculture-1;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
/* 8s | 12.5%/s */
@keyframes agriculture-1 {
   0% {
      transform: translate(0%,0%);
   }
   12.5% {
      transform: translate(35.2%,0%);
   }
   25% {
      transform: translate(35.2%,33%);
   }

   75% {
      transform: translate(35.2%,33%);
   }

   87.5% {
      transform: translate(35.2%,0%);
   }

   100% {
      transform: translate(0%,0%);
   }
}

rect.agriculture-svg-element.anime-2.animate {
    animation-name: agriculture-2;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
/* 6s | 16.667%/s */
@keyframes agriculture-2 {
   0% {
      transform: translate(0%,0%);
   }

   16.667% {
      transform: translate(-35.2%,0%);
   }

   33.334% {
      transform: translate(-35.2%,33%);
   }

   50% {
      transform: translate(-35.2%,66%);
   }

   66.667% {
      transform: translate(-35.2%,33%);
   }

   83.334% {
      transform: translate(-35.2%,0%);
   }

   100% {
      transform: translate(0%,0%);
   }
}

rect.agriculture-svg-element.anime-3.animate {
    animation-name: agriculture-3;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
/* 4s | 25%/s */
@keyframes agriculture-3 {
   0% {
      transform: translate(0%,0%);
   }

   25% {
      transform: translate(0%,33%);
   }

   50% {
      transform: translate(0%,66%);
   }

   75% {
      transform: translate(0%,33%);
   }

   100% {
      transform: translate(0%,0%);
   }
}


rect.agriculture-svg-element.anime-4.animate {
    animation-name: agriculture-4;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

/* 2s | 50%/s */
@keyframes agriculture-4 {
   0% {
      transform: translate(0%,0%);
   }

   50% {
      transform: translate(0%,33%);
   }

   100% {
      transform: translate(0%,0%);
   }
}

/* CONSUMER */

rect.consumer-svg-element.anime-1.animate {
    animation-name: consumer-1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

/* 4s | 25%/s */
@keyframes consumer-1 {
   0% {
      transform: translate(0%,0%);
   }
   25% {
      transform: translate(0, 37.5%);
   }
   50% {
      transform: translate(0, 67.5%);
   }
   75% {
      transform: translate(0, 37.5%);
   }
   100% {
      transform: translate(0%,0%);
   }
}

rect.consumer-svg-element.anime-2.animate {
    animation-name: consumer-2;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

/* 2s | 50%/s */
@keyframes consumer-2 {
   0% {
      transform: translate(0%,0%);
   }
   50% {
      transform: translate(0, 30%);
   }
   100% {
      transform: translate(0%,0%);
   }
}


/* AUTOMOTIVE ANIMATIONS */

rect.automotive-svg-element.anime-1.animate {
    animation-name: automotive-1;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
}

/* 10s , 10%/s */
@keyframes automotive-1 {
   0% {
      transform: translate(0%,0%);
   }
   /* destination */
   10% {
      transform: translate(27%,0%);
   }
   90% {
      transform: translate(27%,0%);
   }
   100% {
      transform: translate(0%,0%);
   }
}

/* 8s | 12.5%/s */
rect.automotive-svg-element.anime-2.animate {
    animation-name: automotive-2;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

@keyframes automotive-2 {
   0% {
      transform: translate(0%,0%);
   }
   /* one left */
   12.5% {
      transform: translate(-27%,0%);
   }
   /* one up */
   25% {
      transform: translate(-27%,-50%);
   }
   /* one left */
   37.5% {
      transform: translate(-50%,-50%);
   }
   /* one down, destination */
   50% {
      transform: translate(-50%,-0%);
   }

   62.5% {
      transform: translate(-50%,-50%);
   }

   75% {
      transform: translate(-27%,-50%);
   }

   87.5% {
      transform: translate(-27%,0%);
   }
   100% {
      transform: translate(0%,0%);
   }
}


rect.automotive-svg-element.anime-3.animate {
    animation-name: automotive-3;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
rect.automotive-svg-element.anime-3 {
    -webkit-transform: translateX(-0.5%) translateY(0.5%) rotate(0);
    -moz-transform: translateX(-0.5%) translateY(0.5%) rotate(0);
    -o-transform: translateX(-0.5%) translateY(0.5%) rotate(0);
    -ms-transform: translateX(-0.5%) translateY(0.5%) rotate(0);
    transform: translateX(-0.5%) translateY(0.5%) rotate(0);
}

/* 6s | 16.667%/s */
@keyframes automotive-3 {
   0% {
       -webkit-transform: translateX(-0.5%) translateY(0.5%) rotate(0);
       -moz-transform: translateX(-0.5%) translateY(0.5%) rotate(0);
       -o-transform: translateX(-0.5%) translateY(0.5%) rotate(0);
       -ms-transform: translateX(-0.5%) translateY(0.5%) rotate(0);
       transform: translateX(-0.5%) translateY(0.5%) rotate(0);
   }
   /* up */
   16.667% {
      transform: translate(0%,-50%);
   }
   /* left */
   33.334% {
      transform: translate(-23%,-50%);
   }
   /* down, destination */
   50% {
      transform: translate(-23%,0%);
   }
   /* up */
   66.667% {
      transform: translate(-23%,-50%);
   }
   /* right */
   83.334% {
      transform: translate(-0%,-50%);
   }
   /* down */
   100% {
       -webkit-transform: translateX(-0.5%) translateY(0.5%) rotate(0);
       -moz-transform: translateX(-0.5%) translateY(0.5%) rotate(0);
       -o-transform: translateX(-0.5%) translateY(0.5%) rotate(0);
       -ms-transform: translateX(-0.5%) translateY(0.5%) rotate(0);
       transform: translateX(-0.5%) translateY(0.5%) rotate(0);
   }
}

rect.automotive-svg-element.anime-4.animate {
    animation-name: automotive-4;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
rect.automotive-svg-element.anime-4 {
    -webkit-transform: translateX(-0.5%) translateY(0.8%) rotate(0);
    -moz-transform: translateX(-0.5%) translateY(0.8%) rotate(0);
    -o-transform: translateX(-0.5%) translateY(0.8%) rotate(0);
    -ms-transform: translateX(-0.5%) translateY(0.8%) rotate(0);
    transform: translateX(-0.5%) translateY(0.8%) rotate(0);
}
/* 4s | 25%/s */
@keyframes automotive-4 {
   0% {
       -webkit-transform: translateX(-0.5%) translateY(0.8%) rotate(0);
       -moz-transform: translateX(-0.5%) translateY(0.8%) rotate(0);
       -o-transform: translateX(-0.5%) translateY(0.8%) rotate(0);
       -ms-transform: translateX(-0.5%) translateY(0.8%) rotate(0);
       transform: translateX(-0.5%) translateY(0.8%) rotate(0);
   }
   25% {
      transform: translate(-23%,0%);
   }
   50% {
      transform: translate(-23%,50%);
   }
   75% {
      transform: translate(-23%,0%);
   }
   100% {
       -webkit-transform: translateX(-0.5%) translateY(0.8%) rotate(0);
       -moz-transform: translateX(-0.5%) translateY(0.8%) rotate(0);
       -o-transform: translateX(-0.5%) translateY(0.8%) rotate(0);
       -ms-transform: translateX(-0.5%) translateY(0.8%) rotate(0);
       transform: translateX(-0.5%) translateY(0.8%) rotate(0);
   }
}

rect.automotive-svg-element.anime-5.animate {
    animation-name: automotive-5;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
rect.automotive-svg-element.anime-5 {
    -webkit-transform: translateX(0%) translateY(1.4%) rotate(0);
    -moz-transform: translateX(0%) translateY(1.4%) rotate(0);
    -o-transform: translateX(0%) translateY(1.4%) rotate(0);
    -ms-transform: translateX(0%) translateY(1.4%) rotate(0);
    transform: translateX(0%) translateY(1.4%) rotate(0);
}
/* 2s | 50%/s */
@keyframes automotive-5 {
   0% {
       -webkit-transform: translateX(0%) translateY(1.4%) rotate(0);
       -moz-transform: translateX(0%) translateY(1.4%) rotate(0);
       -o-transform: translateX(0%) translateY(1.4%) rotate(0);
       -ms-transform: translateX(0%) translateY(1.4%) rotate(0);
       transform: translateX(0%) translateY(1.4%) rotate(0);
   }
   /* down, destination */
   50% {
      transform: translate(0%,50%);
   }
   100% {
       -webkit-transform: translateX(0%) translateY(1.4%) rotate(0);
       -moz-transform: translateX(0%) translateY(1.4%) rotate(0);
       -o-transform: translateX(0%) translateY(1.4%) rotate(0);
       -ms-transform: translateX(0%) translateY(1.4%) rotate(0);
       transform: translateX(0%) translateY(1.4%) rotate(0);
   }
}
rect.automotive-svg-element.anime-6.h-anime {
    transform: translateX(0.3%);
}

/* MED ANIMATIONS */

/* 8s | 100/8 = 12.5 */
@keyframes med-1 {
   0% {
      transform: translate(0%,0%);
   }
   12.5% {
      transform: translate(-37%,0%);
   }
   25% {
      transform: translate(-37%,34%);
   }
   /* sit still */
   75% {
      transform: translate(-37%,34%);
   }
   /* get ready */
   87.5% {
      transform: translate(-37%,0%);
   }
   100% {
      transform: translate(-0%,0%);
   }
}

/* 6s | 100/6 = 16.66*/
@keyframes med-2 {
   0% {
       -webkit-transform: translateX(0.4%) translateY(0%) rotate(0);
       -moz-transform: translateX(0.4%) translateY(0%) rotate(0);
       -o-transform: translateX(0.4%) translateY(0%) rotate(0);
       -ms-transform: translateX(0.4%) translateY(0%) rotate(0);
       transform: translateX(0.4%) translateY(0%) rotate(0);
   }
   16.667% {
      transform: translate(31%,0%);
   }
   /* destination */
   33.334% {
      transform: translate(31%,34%);
   }
   /* sit still */
   66.667% {
      transform: translate(31%,34%);
   }
   /* get ready */
   83.334% {
      transform: translate(31%,0%);
   }
   /* back to place */
   100% {
       -webkit-transform: translateX(0.4%) translateY(0%) rotate(0);
       -moz-transform: translateX(0.4%) translateY(0%) rotate(0);
       -o-transform: translateX(0.4%) translateY(0%) rotate(0);
       -ms-transform: translateX(0.4%) translateY(0%) rotate(0);
       transform: translateX(0.4%) translateY(0%) rotate(0);
   }
}
@keyframes med-3 {
   0% {
        -webkit-transform: translateX(0.3%) translateY(0.9%) rotate(0);
        -moz-transform: translateX(0.3%) translateY(0.9%) rotate(0);
        -o-transform: translateX(0.3%) translateY(0.9%) rotate(0);
        -ms-transform: translateX(0.3%) translateY(0.9%) rotate(0);
        transform: translateX(0.3%) translateY(0.9%) rotate(0);
   }
   50% {
      transform: translateY(66%) rotate(0);
   }
   100% {
       -webkit-transform: translateX(0.3%) translateY(0.9%) rotate(0);
       -moz-transform: translateX(0.3%) translateY(0.9%) rotate(0);
       -o-transform: translateX(0.3%) translateY(0.9%) rotate(0);
       -ms-transform: translateX(0.3%) translateY(0.9%) rotate(0);
       transform: translateX(0.3%) translateY(0.9%) rotate(0);
   }
}
@keyframes med-4 {
   0% {
       -webkit-transform: translateX(0.1%) translateY(0.8%) rotate(0);
       -moz-transform: translateX(0.1%) translateY(0.8%) rotate(0);
       -o-transform: translateX(0.1%) translateY(0.8%) rotate(0);
       -ms-transform: translateX(0.1%) translateY(0.8%) rotate(0);
       transform: translateX(0.1%) translateY(0.8%) rotate(0);
   }
   50% {
      transform: translateY(33%) rotate(0);
   }
   100% {
       -webkit-transform: translateX(0.1%) translateY(0.8%) rotate(0);
       -moz-transform: translateX(0.1%) translateY(0.8%) rotate(0);
       -o-transform: translateX(0.1%) translateY(0.8%) rotate(0);
       -ms-transform: translateX(0.1%) translateY(0.8%) rotate(0);
       transform: translateX(0.1%) translateY(0.8%) rotate(0);
   }
}

rect.med-svg-element.anime-1.animate {
    animation-name: med-1;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    /* animation-iteration-count: infinite; */
}

rect.med-svg-element.anime-2.animate {
   animation-name: med-2;
   -webkit-animation-duration: 1.5s;
   animation-duration: 1.5s;
   -webkit-transform: translateX(0.4%) translateY(0%) rotate(0);
   -moz-transform: translateX(0.4%) translateY(0%) rotate(0);
   -o-transform: translateX(0.4%) translateY(0%) rotate(0);
   -ms-transform: translateX(0.4%) translateY(0%) rotate(0);
   transform: translateX(0.4%) translateY(0%) rotate(0);
}
rect.med-svg-element.anime-3.animate {
    animation-name: med-3;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-transform: translateX(0.3%) translateY(0.9%) rotate(0);
    -moz-transform: translateX(0.3%) translateY(0.9%) rotate(0);
    -o-transform: translateX(0.3%) translateY(0.9%) rotate(0);
    -ms-transform: translateX(0.3%) translateY(0.9%) rotate(0);
    transform: translateX(0.3%) translateY(0.9%) rotate(0);
}
rect.med-svg-element.anime-4.animate {
    animation-name: med-4;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-transform: translateX(0.1%) translateY(0.8%) rotate(0);
    -moz-transform: translateX(0.1%) translateY(0.8%) rotate(0);
    -o-transform: translateX(0.1%) translateY(0.8%) rotate(0);
    -ms-transform: translateX(0.1%) translateY(0.8%) rotate(0);
    transform: translateX(0.1%) translateY(0.8%) rotate(0);
}
rect.med-svg-element.anime-5 {
    -webkit-transform: translateX(0%) translateY(-1%) rotate(0);
    -moz-transform: translateX(0%) translateY(-1%) rotate(0);
    -o-transform: translateX(0%) translateY(-1%) rotate(0);
    -ms-transform: translateX(0%) translateY(-1%) rotate(0);
    transform: translateX(0%) translateY(-1%) rotate(0);
}


/* LAYOUT */

.anime-1 {
   -webkit-animation-delay: 0s;
   animation-delay: 0s;
}
.anime-2 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
}
.anime-3 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.anime-4 {
   -webkit-animation-delay: 1.5s;
   animation-delay: 1.5s;
}
.anime-5 {
   -webkit-animation-delay: 2s;
   animation-delay: 2s;
}
.anime-6 {
   -webkit-animation-delay: 2.5s;
   animation-delay: 2.5s;
}

.h-anime {
   transform: rotate(0);
   animation-timing-function: linear;
   animation-fill-mode: forwards;
   transition: all 0.32s ease;
   /* animation-iteration-count: infinite; */
}

.ht-svg {
   height: 76px;
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -ms-align-items: center;
   align-items: center;
   justify-content: center;
}

.ht-svg.ht-svg-automotive svg {
   height: 47px;
}
.ht-svg.ht-svg-technology svg {
    height: 50px;
}


@media screen and (max-width: 991px) {
   .ht-svg.ht-svg-automotive svg {
       height: 32px;
   }
}

@media screen and (max-width: 480px) {
   .ht-svg.ht-svg-automotive svg {
    height: 23px;
   }
   .ht-svg.ht-svg-technology svg {
    height: 25px;
   }
}