.sugar{
  position: absolute;
  width: 100%;
  height: 100%;
  display: inline-block;
  z-index: 50;
}

.sugar-bg{
  /* z-index:50; */
  width: 100%;
  height: 100%;
  top: -30%;
  left: 0%;
  position: absolute;
}

.elements {position: absolute;width: 100%;height: 100%;display: inline-block;}

.element {position: absolute; transition: all 0.2s ease-out;}


.element-cloud-1{
z-index:100;
width: 210px;
height: auto;
top: -65px;
left: -15%;
}
.element-cloud-2{
z-index:100;
width: 140px;
height: auto;
top: -135px;
left: 85%;
}
.element-cloud-3{
z-index:100;
width: 210px;
height: auto;
top: -73px;
left: 90%;
}
.element-bag{
z-index:100;
width: 120px;
height: auto;
top: -110px;
left: calc(50% + 377px);
}
.element-star-red{
z-index:100;
width: 100px;
height: auto;
top: -160px;
left: 22%;
}
.element-star-blue{
z-index: 100;
width: 90px;
height: auto;
top: 153px;
left: calc(95% - 90px);
}
.element-spoon{
z-index:80;
width: 150px;
height: auto;
top: -80px;
left: 7%;
transform: rotate(-12deg);
}
.element-pizza{
z-index: 100;
width: 110px;
height: auto;
top: 50%;
left: calc(100% - 110px);
}
.element-mountains{
z-index: 100;
width: 200px;
height: auto;
top: 506px;
left: calc(100% - 200px);
}
.element-paparouna{
z-index: 100;
width: 110px;
height: auto;
top: 507px;
left: calc(83% - 110px);
}
.element-flower-red{
z-index: 100;
width: 90px;
height: auto;
top: 643px;
left: calc(61% - 90px);
}
.element-hat{
  z-index: 100;
  width: 150px;
  height: auto;
  top: 122%;
  left: calc(10% - 150px);
}
.element-leaf-blue{
  z-index: 100;
  width: 60px;
  height: auto;
  top: 104%;
  left: calc(46% - 90px);
  transform: rotate(24deg);
}
.element-leaf-red{
  z-index: 100;
  width: 64px;
  height: auto;
  top: calc(100% - 121px);
  left: calc(34% - 90px);
  transform: rotate(-27deg);
}
.element-sitari{
  z-index: 110;
  width: 64px;
  height: auto;
  top: calc(55% - 121px);
  left: calc(2% - 90px);
  /* transform: rotate(180deg); */
}




.bagandflower{
  position: absolute;
  width: 224px;
  height: 224px;
  right: 0;
  bottom: -50px;
}
  .bag{position: absolute;width: 50%;}
  .bag-flower{width: 30%;position: absolute;right: 0;}



@media screen and (max-width: 1799.98px) {

}



@media screen and (max-width: 1599.98px) {

  .sugar-bg{
    width: 123%;
    height: 100%;
    top: -30%;
    left: -11%;
  }



  .element-cloud-1{
    top: -65px;
    left: -25%;
  }
  .element-cloud-2{
    top: -135px;
    left: 89%;
  }
  .element-cloud-3{
    left: 95%;
  }
  .element-star-red{
    width: calc(100px / 1.4);
    top: -130px;
    left: 22%;
  }
  .element-star-blue{
    width: calc(90px / 1.4);
    top: 30%;
    left: calc(110% - 90px);
  }
  .element-pizza{
    width: calc(110px / 1.4);
    /* top: 50%; */
    left: calc(100% - 110px);
  }
  .element-spoon{
    top: -100px;
    left: 0%;
  }
  .element-mountains{
    width: calc(200px / 1.2);
    top: 80%;
    left: calc(110% - 200px);
  }
  .element-paparouna{
    display:none;
  }
  .element-flower-red{
    width: calc(90px / 1.4);
    top: 100%;
    left: calc(70% - 90px);
  }
  .element-hat{
      width: calc(150px / 1.4);
      top: 120%;
      left: calc(0% - 150px);
  }
  .element-leaf-blue{
      width: calc(60px / 1.4);
      top: 95%;
      left: calc(46% - 90px);
  }
  .element-leaf-red{
      width: calc(64px / 1.4);
      top: calc(100% - 121px);
      left: calc(34% - 90px);
  }
  .element-sitari{
    width: calc(64px / 1.4);
    top: calc(55% - 121px);
    left: calc(-10% - 90px);
  }

  .bagandflower{
    position: absolute;
    width: 190px;
    height: 190px;
    right: -150px;
    bottom: -50px;
  }


}


@media screen and (max-width: 1299.98px) {
  .element-cloud-1{
    top: 12%;
    left: -40%;
  }
  .element-spoon{
    width: calc(150px / 1.4);
    top: 10%;
    left: -10%;
  }
}

/*Large devices (desktops, less than 1200px)*/
@media screen and (max-width: 1199.98px) {
  .element-cloud-1{
    width: calc(210px / 1.4);
  }
  .element-cloud-2{
    width: calc(140px / 1.4);
    top: -100px;
    left: 90%;
  }
  .element-cloud-3{
    width: calc(210px / 1.4);
    top: -90px;
    left: 98%;
  }
  .element-bag{
    width: calc(120px / 1.4);
    top: -65px;
    left: calc(50% + 300px);
  }
  /*   .element-star-red{
    width: calc(100px / 1.4);
    top: -160px;
    left: 22%;
  } */
  .element-star-blue{
    width: calc(90px / 1.4);
    top: 30%;
    left: calc(115% - 90px);
  }
  .element-bag{
    width: calc(140px / 1.4);
    top: -58px;
    left: calc(50% + 365px);
  }
  .element-spoon{
    width: calc(150px / 1.8);
    top: 10%;
    left: -5%;
  }
  .element-pizza{
    width: calc(110px / 1.4);
    top: 50%;
    left: calc(110% - 110px);
  }
  .element-mountains{
    width: calc(200px / 1.2);
    top: 80%;
    left: calc(120% - 200px);
  }

  /*   .element-flower-red{
    width: calc(90px / 1.4);
    top: 643px;
    left: calc(61% - 90px);
  } */


}

/*Medium devices (tablets, less than 992px)*/
@media screen and (max-width: 991.98px) {

  .sugar-bg{
    width: 130%;
    height: 100%;
    top: -38%;
    left: -15%;
  }

  .element-bag{
    width: calc(140px / 1.8);
    top: -44px;
    left: calc(50% + 280px);
  }
    .element-star-red{
    width: calc(100px / 1.4);
    top: -60px;
    left: 15%;
  }


   .bagandflower{
      position: absolute;
      width: 190px;
      height: 190px;
      right: -150px;
      bottom: -150px;
    }
}

/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) {

  .sugar-bg{
      width: 160%;
      height: 100%;
      top: -30%;
      left: -30%;
  }

  .element-bag{
    left: calc(50% + 190px);
  }
  .element-mountains{
    width: calc(200px / 1.2);
    top: 80%;
    left: calc(150% - 200px);
  }

  .bagandflower{
      right: -300px;
   }
}

/*Extra small devices (portrait phones, less than 576px)*/
@media screen and (max-width: 575.98px) {

  .sugar-bg{
      width: 200%;
      height: 100%;
      top: -11%;
      left: -70%;
  }

  .element-cloud-1{
    display:none;
  }
  .element-star-blue{
    left: calc(145% - 90px);
  }
  .element-pizza{
    left: calc(140% - 110px);
  }
  .element-bag{
    left: calc(50% + 120px);
  }
  .element-mountains{
    left: calc(160% - 200px);
  }
  .element-spoon{
    display:none;
  }
  .element-flower-red{
    width: calc(90px / 1.8);
    top: 95%;
    left: calc(80% - 90px);
  }
}

/*Extra small devices (portrait phones, less than 480px)*/
@media screen and (max-width : 479.98px) {
  .sugar-bg{
      width: 320%;
      height: 100%;
      top: -53%;
      left: -70%;
  }
}