.bd{
  overflow-x: hidden;
}

.ani-wrapper,
.ani-section {
  position  : relative;
  box-sizing: border-box;
}

.ani-pos-bottom {
  position: absolute;
  bottom  : 0;
  width   : 100%;
}

.ani-pos-top {
  position: absolute;
  top     : 0;
  width   : 100%;
}

.ani-spacer-wrap {
  width     : 100%;
  background: #00800040;
  position  : absolute;
  bottom    : 0;
}

.ani-spacer {
  position  : relative;
  box-sizing: border-box;
}

.ani-box {
  position  : absolute;
  box-sizing: border-box;
  width     : 100%;
}

.ani-box-bottom {
  position: absolute;
  bottom  : 0;
}

.ani-box-top {
  position: absolute;
  top     : 0;
}

.ani-box-flex,
.ani-items-flex {
  position       : relative;
  display        : flex;
  flex-direction : column;
  align-content: center;
  flex-wrap      : wrap;
}

.ani-box-flex-row, .ani-items-flex-row{
  flex-direction: row;
  justify-content: center;
}
.ani-items {
  position: relative;
}

.ani-items svg,
.ani-item svg {
  overflow : visible;
  height   : 100%;
  /* Fix Safari rendering bug */
  transform: translateZ(0);
}

.ani-item {
  position: relative;
  z-index : 2;
}

.ani-path {
  position  : absolute;
  box-sizing: border-box;
  bottom    : 0;
  width     : 100%;
  border    : 2px solid pink;
}
.ani-path-item{
  position: absolute;
  visibility: hidden;
  width: 100%;
  bottom: 0;
}

.ani-path .img-path {
  border: 2px solid lightgreen;

}

/* THREE TREES */
.ani-box .threeTrees {
  position: absolute;
  right   : 10%;
  bottom  : -26px;
  z-index : 10;
}

.ani-threeTrees .threeTrees {
  transform-origin: bottom;
}

/* SUN */
#p1 .mobile-section{
  margin-top:  100px;
}
.ani-box .img-sun{
  width: 120px;
}

.ani-sun svg {
  width: 100%;
  height: auto;
}

.ani-wrapper .sun {
  /*filter: hue-rotate(320deg);*/
  left: 0;
}

.ani-item.ani-sun {
  transform-origin: center;
}

@media screen and (max-width: 640px){
  .ani-trigger-ani-sun .ani-box-bottom{
    bottom: -25px;
  }
}
/* MACHINE */

.ani-machine .ani-spacer {
  height: 400px;
}

.ani-machine .ani-items {
  position        : relative;
  overflow-x      : hidden;
  transform-origin: bottom;
  overflow        : visible;
  margin-bottom   : 24px;
}

.ani-machine .ani-item {
  position: absolute;
  bottom  : 0;
  left    : 0;
}

.ani-machine img {
  max-width: none;
}

.ani-machine .img-machine-form {
  transform: translate3d(141px, -244px, 0px);
  z-index  : 1;
}

.ani-machine .img-machine-nozzle {
  transform: translate3d(562px, -202px, 0px);
}

.ani-machine .img-machine-body {
  z-index   : 2;
  position  : relative;
  margin-top: 100px;
}

.ani-machine .img-machine-switch-red {
  transform: translate3d(173px, -75px, 0);
  opacity  : 0;
}

/* FOUR TREES */
.ani-item.fourTrees{
  position: absolute;
  overflow: visible;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 410px;
}
.ani-item.fourTrees img {
  position: absolute;
  bottom  : -60px;
  right   : 0;
  transform: translateX(20px) scale(1.25);
  transform-origin: right bottom;
}