html, body {
	margin: 0;
	padding: 0;
	width: 300px;
	height: 300px;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
    overflow-x: hidden;
	overflow-y: hidden;
}

.canvas {
	margin: 0;
	padding: 0;
	width: 300px;
	height: 300px;
	top: 0px;
	left: 0px;
}

.logo {
  width: 60px;
  height: auto;
  position: absolute;
  bottom: 13px;
  right: 13px;
  z-index: 30;
}

.ozdoba {
  width: 34px;
  height: 118px;
  position: absolute;
  top: -5px;
  right: 31px;
  z-index: 30;
  overflow: hidden;
}

.ball {
  width: 34px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
}

.ball {
	-webkit-animation: ball 1.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.25s both;
	        animation: ball 1.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.25s both;
}

.light {
    width: 34px;
	height: 34px;
	position: absolute;
	right: 0;
	bottom: 0;
	border-radius: 50em;
	z-index: 40;
	overflow: hidden;
}

.shine {
    background: linear-gradient(222.56deg, rgba(255, 255, 255, 0) 25.8%, rgba(255, 255, 255, 0.68) 49.32%, rgba(255, 255, 255, 0) 69.84%, rgba(255, 255, 255, 0) 89.86%);
    width: 70px;
	height: 70px;
	position: absolute;
	right: 0;
	-webkit-animation: light 10s ease forwards 3s, light 15s ease forwards 10s;
    animation: light 10s ease forwards 3s, light 15s ease forwards 10s;
	bottom: -65px;
	opacity: 0;
}

@-webkit-keyframes light {
    5% {bottom: -65px; opacity: 1;}
    20% {bottom: 110px; opacity: 1;}
    21% {bottom: 110px; opacity: 0;}
    100% {bottom: -65px; opacity: 0;}
}

.hl {
  position: absolute;
  width: 230px;
  top: 173px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.product {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 0;
}

.product .tea {
  position: absolute;
  width: 300px;
  height: 300px;
  bottom: 0;
}

.hl-group {
  position: absolute;
  width: 143px;
  top: 18px;
  height: 108px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.hl-1 {
  position: absolute;
  width: 100%;
  height: auto;
  top: 2%;
  left: 0;
  right: 0;
  -webkit-animation: slideUp ease 1.2s forwards 0.2s;
  animation: slideUp ease  1.2s forwards 0.2s;
  opacity: 0;
}

.hl-2 {
  position: absolute;
  width: 100%;
  height: auto;
  top: 40%;
  left: 0;
  right: 0;
  -webkit-animation: slideUp ease  1.2s forwards 0.4s;
  animation: slideUp ease  1.2s forwards 0.4s;
  opacity: 0;
}

.hl-3 {
  position: absolute;
  width: 100%;
  height: auto;
  top: 67.5%;
  left: 0;
  right: 0;
  -webkit-animation: slideUp ease  1.2s forwards 0.6s;
  animation: slideUp ease 1.2s forwards 0.6s;
  opacity: 0;
}

.star.n-1 {
  position: absolute;
  width: 25px;
  top: 106px;
  right: 56px;
  -webkit-animation: star 1.5s ease 10;
  animation: star 1.5s ease 10;
}

.star.n-2 {
  position: absolute;
  width: 31px;
  top: 108px;
  left: 35px;
  -webkit-animation: star 1.5s ease 0.25s 10;
  animation: star 1.5s ease 0.25s 10;
}

.star.n-3 {
  position: absolute;
  width: 25px;
  top: 137px;
  left: 269px;
  -webkit-animation: star 3s ease 0.5s 9;
  animation: star 3s ease 0.5s 9;
}

.star.n-4 {
  position: absolute;
  width: 16px;
  top: 40px;
  right: 74px;
  -webkit-animation: star 1.5s ease 10;
  animation: star 1.5s ease 10;
}

.slide-1 {
  -webkit-animation: remove 0.5s linear 3s forwards, next 0.5s linear 6.6s forwards, remove 0.5s linear 9.6s forwards;
  animation: remove 0.5s linear 3s forwards, next 0.5s linear 6.6s forwards, remove 0.5s linear 9.6s forwards;
}

.slide-2 {
  opacity: 0;
  -webkit-animation: next 0.5s linear 2.2s forwards, remove 0.5s linear 4.9s forwards, next 0.5s linear 8.8s forwards, remove 0.5s linear 11.5s forwards;
  animation: next 0.5s linear 2.2s forwards, remove 0.5s linear 4.9s forwards, next 0.5s linear 8.8s forwards, remove 0.5s linear 11.5s forwards;
}

.slide-3 {
  opacity: 0;
  -webkit-animation: next 0.5s linear 4.4s forwards, remove 0.5s linear 7.1s forwards, next 0.5s linear 11s forwards;
  animation: next 0.5s linear 4.4s forwards, remove 0.5s linear 7.1s forwards, next 0.5s linear 11s forwards;
}

.cta {
  z-index: 25;
  -webkit-animation: bounce 0.75s ease 20;
  animation: bounce 0.75s ease 20;
  width: 71px;
  position: absolute;
  bottom: 19px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 5px;
}