/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
#why-circle-small-1 {
  -webkit-animation: whyCircleSmall1 3s ease-in infinite alternate both running;
  animation: whyCircleSmall1 3s ease-in infinite alternate both running;
}

/* #why-circle-1 {
  -webkit-animation: whyCircle1 3s ease-in 3s normal forwards;
  animation: whyCircle1 3s ease-in 3s normal forwards;
} */

#why-circle-1::before {
  -webkit-animation: whyCircleBefore1 3s ease-in infinite alternate both running;
  animation: whyCircleBefore1 3s ease-in infinite alternate both running;
  transform-origin: right;
}

/* #why-circle-1::after {
  -webkit-animation: whyCircleAfter1 3s ease-in 1s infinite alternate both running;
  animation: whyCircleAfter1 3s ease-in 1s infinite alternate both running;
} */
/***************/
#why-circle-small-2 {
  right: 15px;
  -webkit-animation: whyCircleSmall2 10s linear infinite alternate both running;
  animation: whyCircleSmall2 10s linear infinite alternate both running;
}

#why-circle-2::before {
  top: 110px;
  right: -40px;
  -webkit-animation: whyCircleBefore2 10s linear infinite alternate both running;
  animation: whyCircleBefore2 10s linear infinite alternate both running;
  transform-origin: left;
}

@media screen and (min-width: 375px) {
  #why-circle-small-2 {
    right: 35px;
  }
}

@media screen and (min-width: 992px) {
  #why-circle-2::before {
    top: 50px;
  }
  #why-circle-small-2 {
    right: 15px;
  }
}

@media screen and (min-width: 1200px) {
  #why-circle-2::before {
    top: 60px;
  }
  #why-circle-small-2 {
    right: 35px;
  }
}

/* #why-circle-2 {
  -webkit-animation: whyCircle2 3s ease-in 1s infinite alternate both running;
  animation: whyCircle2 3s ease-in 1s infinite alternate both running;
} */



/* #why-circle-2::after {
  -webkit-animation: whyCircleAfter2 3s ease-in 1s infinite alternate both running;
  animation: whyCircleAfter2 3s ease-in 1s infinite alternate both running;
} */
/***************/
#why-circle-small-3 {
  -webkit-animation: whyCircleSmall3 3s ease-in infinite alternate both running;
  animation: whyCircleSmall3 3s ease-in infinite alternate both running;
}

/* #why-circle-3 {
  -webkit-animation: whyCircle3 3s ease-in 1s infinite alternate both running;
  animation: whyCircle3 3s ease-in 1s infinite alternate both running;
}

#why-circle-3::before {
  -webkit-animation: whyCircleBefore3 3s ease-in 1s infinite alternate both running;
  animation: whyCircleBefore3 3s ease-in 1s infinite alternate both running;
}

#why-circle-3::after {
  -webkit-animation: whyCircleAfter3 3s ease-in 1s infinite alternate both running;
  animation: whyCircleAfter3 3s ease-in 1s infinite alternate both running;
} */
/***************/
#why-circle-small-4 {
  -webkit-animation: whyCircleSmall4 4s linear infinite alternate both running;
  animation: whyCircleSmall4 4s linear infinite alternate both running;
}

/* #why-circle-4 {
  -webkit-animation: whyCircle4 3s ease-in 1s infinite alternate both running;
  animation: whyCircle4 3s ease-in 1s infinite alternate both running;
} */

/* #why-circle-4::before {
  -webkit-animation: whyCircleBefore4 6s linear infinite alternate both running;
  animation: whyCircleBefore4 6s linear infinite alternate both running;
} */

.home-banner-box a.position-relative {
  display: block;
  overflow: hidden;
}

.page-banner-inner.show-panel .banner-circle, .page-banner-inner.show-panel .home-banner-plus {
  -webkit-transform:  scale(1);
     -moz-transform:  scale(1);
      -ms-transform:  scale(1);
       -o-transform:  scale(1);
          transform:  scale(1);
}

.page-banner-inner.show-panel .home-banner-title, .page-banner-inner.show-panel .home-banner-box p {
  -webkit-transform: translate(0);
     -moz-transform: translate(0);
      -ms-transform: translate(0);
       -o-transform: translate(0);
          transform: translate(0);
}


.page-banner-inner.start-animation  .banner-circle-1 {
  -webkit-animation: bannerCircle .3s ease-out .8s forwards running;
  animation: bannerCircle .3s ease-out .8s forwards running;
}

.page-banner-inner.start-animation .banner-circle-2 {
  -webkit-animation: bannerCircle .3s ease-out .6s forwards running;
  animation: bannerCircle .3s ease-out .6s forwards running;
}

.page-banner-inner.start-animation .banner-circle-3 {
  -webkit-animation: bannerCircle .3s ease-out .4s forwards running;
  animation: bannerCircle .3s ease-out .4s forwards running;
}

.page-banner-inner.start-animation .banner-circle-4 {
  -webkit-animation: bannerCircle .3s ease-out .2s forwards running;
  animation: bannerCircle .3s ease-out .2s forwards running;
}

.page-banner-inner.start-animation .banner-circle-5 {
  -webkit-animation: bannerCircle .3s ease-out forwards running;
  animation: bannerCircle .3s ease-out forwards running;
}

.page-banner-inner.start-animation .first-banner-box .home-banner-title {
  -webkit-animation: bannerBoxHeading .2s ease-out 1s forwards running;
  animation: bannerBoxHeading .2s ease-out 1s forwards running;
  z-index: 1;
}

.page-banner-inner.start-animation .first-banner-box a > p {
  -webkit-animation: bannerBoxText .5s ease-out 1.2s forwards running;
  animation: bannerBoxText .5s ease-out 1.2s forwards running;
}

.page-banner-inner.start-animation .home-banner-text-section .plus-0 {
  -webkit-animation: bannerCircle 0.3s ease-out 1.2s forwards running;
  animation: bannerCircle .3s ease-out 1.2s forwards running;
}

.page-banner-inner.start-animation .second-banner-box .home-banner-title {
  -webkit-animation: bannerBoxHeading .2s ease-out 1.8s forwards running;
  animation: bannerBoxHeading .2s ease-out 1.8s forwards running;
  z-index: 1;
}

.page-banner-inner.start-animation .second-banner-box a > p {
  -webkit-animation: bannerBoxText .5s ease-out 2s forwards running;
  animation: bannerBoxText .5s ease-out 2s forwards running;
}

.page-banner-inner.start-animation .home-banner-text-section .plus-1 {
  -webkit-animation: bannerCircle 0.3s ease-out 2s forwards running;
  animation: bannerCircle .3s ease-out 2s forwards running;
}

.page-banner-inner.start-animation .third-banner-box .home-banner-title {
  -webkit-animation: bannerBoxHeading .2s ease-out 2.4s forwards running;
  animation: bannerBoxHeading .2s ease-out 2.4s forwards running;
  z-index: 1;
}

.page-banner-inner.start-animation .third-banner-box a > p {
  -webkit-animation: bannerBoxText .5s ease-out 2.6s forwards running;
  animation: bannerBoxText .5s ease-out 2.6s forwards running;
}


@media screen and (min-width: 768px) {
  .page-banner-inner.show-panel .home-banner-box:before {
     opacity: 1;
  }
  .page-banner-inner.start-animation .first-banner-box::before {
    -webkit-animation: bannerBoxBefore 0.6s ease-out .6s forwards running;
    animation: bannerBoxBefore 0.6s ease-out .6s forwards running;
  }
  .page-banner-inner.start-animation .second-banner-box::before {
    -webkit-animation: bannerBoxBefore 0.6s ease-out 1.2s forwards running;
    animation: bannerBoxBefore 0.6s ease-out 1.2s forwards running;
  }
  .page-banner-inner.start-animation .third-banner-box::before {
    -webkit-animation: bannerBoxBefore 0.6s ease-out 2s forwards running;
    animation: bannerBoxBefore 0.6s ease-out 2s forwards running;
  }
}

/* Animation videos */
#animation-video-brown, #animation-video-white, #animation-video-yellow {
  display: none;
}

#animation-video-brown {
  -webkit-transform: translate(-4px, 1px);
     -moz-transform: translate(-4px, 1px);
      -ms-transform: translate(-4px, 1px);
       -o-transform: translate(-4px, 1px);
          transform: translate(-4px, 1px);
}

.animation-video-white-wrap {
  margin-bottom: -24px;
  transform: translate(0px, 1px);
}

#footer-latest-news {
  background-image: none !important;
}

.animation-video-yellow-wrap {
    position: absolute !important;
    right: 0;
    bottom: 0;
    width: 50%;
}

@media screen and (max-width: 1250px) {
  #animation-video-brown {
    display: none !important;
  }
  .animation-video-brown-wrap img {
    display: block !important;
  }
}

@-webkit-keyframes bannerCircle {
  from {
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
        -ms-transform: scale(0);
         -o-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes bannerCircle {
  from {
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
        -ms-transform: scale(0);
         -o-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes bannerBoxBefore {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bannerBoxBefore {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes bannerBoxHeading {
  from {
    -webkit-transform: translateY(-100%);
       -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
         -o-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0%);
       -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
         -o-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes bannerBoxHeading {
  from {
    -webkit-transform: translateY(-100%);
       -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
         -o-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0%);
       -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
         -o-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@-webkit-keyframes bannerBoxText {
  from {
    -webkit-transform: translateY(-300%);
       -moz-transform: translateY(-300%);
        -ms-transform: translateY(-300%);
         -o-transform: translateY(-300%);
            transform: translateY(-300%);
  }
  to {
    -webkit-transform: translateY(0%);
       -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
         -o-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes bannerBoxText {
  from {
    -webkit-transform: translateY(-300%);
       -moz-transform: translateY(-300%);
        -ms-transform: translateY(-300%);
         -o-transform: translateY(-300%);
            transform: translateY(-300%);
  }
  to {
    -webkit-transform: translateY(0%);
       -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
         -o-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@-webkit-keyframes plusIcon0 {

}

@keyframes plusIcon0 {
  
}

@-webkit-keyframes plusIcon1 {

}

@keyframes plusIcon1 {
  
}


/***************/

@-webkit-keyframes whyCircleSmall1 {
from {
    -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
         -o-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }

  to {
    -webkit-transform: translate(2px, 7px);
       -moz-transform: translate(2px, 7px);
        -ms-transform: translate(2px, 7px);
         -o-transform: translate(2px, 7px);
            transform: translate(2px, 7px);
  }
}

@keyframes whyCircleSmall1 {
  from {
    -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
         -o-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }

  to {
    -webkit-transform: translate(2px, 7px);
       -moz-transform: translate(2px, 7px);
        -ms-transform: translate(2px, 7px);
         -o-transform: translate(2px, 7px);
            transform: translate(2px, 7px);
  }
}


/* @-webkit-keyframes whyCircle1 {
}

@keyframes whyCircle1 {
} */

@-webkit-keyframes whyCircleBefore1 {
  from {
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20deg);
            transform: rotate(20deg);
  }

  to {
    -webkit-transform: rotate(10deg);
       -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
         -o-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}

@keyframes whyCircleBefore1 {
  from {
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20deg);
            transform: rotate(20deg);
  }

  to {
    -webkit-transform: rotate(10deg);
       -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
         -o-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}

/* @-webkit-keyframes whyCircleAfter1 {
}

@keyframes whyCircleAfter1 {
} */

@-webkit-keyframes whyCircleSmall2 {
  0% {
    -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
         -o-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }

  25% {
     -webkit-transform: translate(2.5px, 5px);
        -moz-transform: translate(2.5px, 5px);
         -ms-transform: translate(2.5px, 5px);
          -o-transform: translate(2.5px, 5px);
             transform: translate(2.5px, 5px);
  }

  50% {
    -webkit-transform:  translate(5px, 10px);
       -moz-transform:  translate(5px, 10px);
        -ms-transform:  translate(5px, 10px);
         -o-transform:  translate(5px, 10px);
            transform:  translate(5px, 10px);
  }

  75% {
    -webkit-transform: translate(7.5px, 15px);
       -moz-transform: translate(7.5px, 15px);
        -ms-transform: translate(7.5px, 15px);
         -o-transform: translate(7.5px, 15px);
            transform: translate(7.5px, 15px);
  }

  100% {
    -webkit-transform: translate(10px, 20px);
       -moz-transform: translate(10px, 20px);
        -ms-transform: translate(10px, 20px);
         -o-transform: translate(10px, 20px);
            transform: translate(10px, 20px);
  }
}

@keyframes whyCircleSmall2 {
  0% {
    -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
         -o-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }

  25% {
     -webkit-transform: translate(2.5px, 5px);
        -moz-transform: translate(2.5px, 5px);
         -ms-transform: translate(2.5px, 5px);
          -o-transform: translate(2.5px, 5px);
             transform: translate(2.5px, 5px);

  }

  50% {
    -webkit-transform: translate(5px, 10px);
       -moz-transform: translate(5px, 10px);
        -ms-transform: translate(5px, 10px);
         -o-transform: translate(5px, 10px);
            transform: translate(5px, 10px);
  }

  75% {
    -webkit-transform: translate(7.5px, 15px);
       -moz-transform: translate(7.5px, 15px);
        -ms-transform: translate(7.5px, 15px);
         -o-transform: translate(7.5px, 15px);
            transform: translate(7.5px, 15px);
  }

  100% {
    -webkit-transform: translate(10px, 20px);
       -moz-transform: translate(10px, 20px);
        -ms-transform: translate(10px, 20px);
         -o-transform: translate(10px, 20px);
            transform: translate(10px, 20px);
  }
}

/* @-webkit-keyframes whyCircle2 {
}

@keyframes whyCircle2 {  
} */

@-webkit-keyframes whyCircleBefore2 {
 from {
    -webkit-transform: rotate(-54deg);
       -moz-transform: rotate(-54deg);
        -ms-transform: rotate(-54deg);
         -o-transform: rotate(-54deg);
            transform: rotate(-54deg);
  }

  to {
    -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
         -o-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
}

@keyframes whyCircleBefore2 {
  from {
    -webkit-transform: rotate(-54deg);
       -moz-transform: rotate(-54deg);
        -ms-transform: rotate(-54deg);
         -o-transform: rotate(-54deg);
            transform: rotate(-54deg);
  }

  to {
    -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
         -o-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
}

/* @-webkit-keyframes whyCircleAfter2 {  
}

@keyframes whyCircleAfter2 {
} */

@-webkit-keyframes whyCircleSmall3 {
  from {
    -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
         -o-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
  to {
    -webkit-transform: translate(2px, -5px);
       -moz-transform: translate(2px, -5px);
        -ms-transform: translate(2px, -5px);
         -o-transform: translate(2px, -5px);
            transform: translate(2px, -5px);
  }
}

@keyframes whyCircleSmall3 {
  from {
    -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
         -o-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
  to {
    -webkit-transform: translate(2px, -5px);
       -moz-transform: translate(2px, -5px);
        -ms-transform: translate(2px, -5px);
         -o-transform: translate(2px, -5px);
            transform: translate(2px, -5px);
  }
}

/* @-webkit-keyframes whyCircle3 {  
}

@keyframes whyCircle3 {  
}

@-webkit-keyframes whyCircleBefore3 {
}

@keyframes whyCircleBefore3 {
}

@-webkit-keyframes whyCircleAfter3 {
}

@keyframes whyCircleAfter3 {  
} */

@-webkit-keyframes whyCircleSmall4 {
     from {
    -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
         -o-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
  to {
    -webkit-transform: translate(2px, -5px);
       -moz-transform: translate(2px, -5px);
        -ms-transform: translate(2px, -5px);
         -o-transform: translate(2px, -5px);
            transform: translate(2px, -5px);
  }
}

@keyframes whyCircleSmall4 {
    from {
    -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
         -o-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
  to {
    -webkit-transform: translate(2px, -5px);
       -moz-transform: translate(2px, -5px);
        -ms-transform: translate(2px, -5px);
         -o-transform: translate(2px, -5px);
            transform: translate(2px, -5px);
  }
}

/* @-webkit-keyframes whyCircle4 {
}

@keyframes whyCircle4 {  
} */

@-webkit-keyframes whyCircleBefore4 {
   from {
    -webkit-transform: rotate(-35deg);
       -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
         -o-transform: rotate(-35deg);
            transform: rotate(-35deg);
  }

  to {
    -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
         -o-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
}

@keyframes whyCircleBefore4 {
  from {
    -webkit-transform: rotate(-35deg);
       -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
         -o-transform: rotate(-35deg);
            transform: rotate(-35deg);
  }

  to {
    -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
         -o-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
}