$plant-border: #aad670;
$plant-fill: #abe07a;
$flowerpot-color1: #d1bb94;
$flowerpot-color2: #d6c8a5;

.wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height:100vh;
}

.base {
	position:relative;
	display:block;
	width:auto;
}

.flowerpot {
	position:relative;
	width:100%;
	height:300px;
	z-index: 150;
	overflow:hidden;
	background-image: linear-gradient(50deg, white 20px, white 21px, transparent 20px), linear-gradient(310deg, white 20px, $flowerpot-color1 21px, $flowerpot-color1 100%);

	
		&:after {
			content: " ";
			position:absolute;
			display:block;
			left:30px;
			top:-5px;
			width:60px;
			height:90px;
			background:linear-gradient(285deg, $flowerpot-color1 20px, $flowerpot-color2 21px, $flowerpot-color2 100%);
			transform:rotate(50deg);
		}
	}

.blade {
	position:absolute;
	bottom:40px;
	overflow:hidden;
	transform-origin:50% 100%;
	/*z-index:-1;*/
	
	&:before, &:after {
		content:"";
		position:absolute;
		top:0;
		border-top:0;
		border-radius:50%;
	}
}

.blade-left-s {
	    height: 230px;
    width: 120px;
    left: 84px;
    top: -100px;
    /* left: -30px; */
    z-index: 120;
	/*left:-15px;*/
	animation: wave 3s infinite ease-in-out;
	&:before {
		right:0;
		height:50px;
		width:90px;
		border-right: 20px solid $plant-border;
	}
	
	&:after {
		top:1px;
		right:6px;
		height:120px;
		width:90px;
		transform: rotateZ(15deg);
		border-right: 18px solid $plant-fill;
	}
} 

.blade-left-s img{
	height: 190px;
    top: 30px;
    position: absolute;
    width: auto;
    display: block;
}

.blade-left-l {
	height: 230px;
    width: 120px;
    left: 84px;
    top: -110px;
	/*left:-30px;*/
	z-index: 110;
	animation: wave2 4s infinite ease-in-out;
	&:before {
		right:2px;
		height:190px;
		width:160px;
		border-right: 25px solid $plant-border;
		transform: rotateZ(20deg);
	}
	
	&:after {
		right:7px;
		height:190px;
		width:160px;
		border-right: 18px solid $plant-fill;
		transform: rotateZ(25deg);
	}
}

.blade-right-s {
    height: 280px;
    width: 120px;
    left: 20px;
    top: -160px;
	animation: wave2 3.2s -0.5s infinite ease-in-out;
	&:before {
		left:0;
		height:190px;
		width:100px;
		border-left: 22px solid $plant-border;
	}
	
	&:after {
		left:15px;
		height:190px;
		width:100px;
		border-left: 13px solid $plant-fill;
		transform: rotateZ(-10deg);
	}
}
.blade-right-s img{
	height: 260px;
	top: 18px;
    position: absolute;
    width: auto;
    display: block;
}

.blade-right-l {
	height: 230px;
    width: 168px;
    left: -50px;
    top: -100px;
    z-index: 101;
	animation: wave 8.2s -1s infinite ease-in-out;
	&:before {
		left:0;
		height:190px;
		width:160px;
		border-left: 26px solid $plant-border;
	}
	
	&:after {
		left:6px;
		height:190px;
		width:160px;
		border-left: 20px solid $plant-fill;
		transform: rotateZ(-10deg);
	}
}

.blade-right-l img{
	height: 250px;
    top: 0px;
    position: absolute;
    width: auto;
    display: block;
    left: 30px;
}
.blade-shade{
	height: 16px;
    width: 90px;
    left: -45px;
    top: 228px;
    position: relative;
	animation: wave5 3s -1.2s infinite ease-in-out;
	&:before {
    	left: -45px;
		height:240px;
		width:140px;
		border-right: 28px solid $plant-border;
		transform: scaleX(150px);
	}
	
	&:after {
    	left: 0px;
		height:240px;
		width:140px;
		border-right: 17px solid $plant-fill;
		transform: scaleX(150px);
	}
} 

.blade-shade img{

	height: 16px;
    width: 90px;
}
.blade-shade img{
	width: 155px;
    height: 11px;
    top: 4px;
}
@keyframes wave {
	0% {
		transform: rotateZ(3deg) translateZ(-1px);
	}
	25%{
		transform: rotateZ(-4deg) translateZ(-1px);
	}
	50% {
		transform: rotateZ(2deg) translateZ(-1px);
	}
	75% {
		transform: rotateZ(-6deg) translateZ(-1px);
	}
	100% {
		transform: rotateZ(3deg) translateZ(-1px);
	}
}

@keyframes wave2 {
	0% {
		transform: rotateZ(0deg) translateZ(-1px);
	}
	25%{
		transform: rotateZ(-3deg) translateZ(-1px);
	}
	50% {
		transform: rotateZ(3deg) translateZ(-1px);
	}
	75% {
		transform: rotateZ(-1deg) translateZ(-1px);
	}
	100% {
		transform: rotateZ(0deg) translateZ(-1px);
	}
}


@keyframes wave5 {
	0% {
		transform: scaleX(150px);
	}
	25%{
		transform: scaleX(160px);
	}
	50% {
		transform: scaleX(170px);
	}
	75% {
		transform: scaleX(160px);
	}
	100% {
		transform: scaleX(150px);
	}
}



@keyframes dancing-img{
  0%   {left:0px; top:0px;}
  50%  {left:0px; top:10px;}
  100% {left:0px; top:0px;}
}






.up-down-anim {
  animation: MoveUpDown 6s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 20px;
  }
}


.left-right-anim {
  animation: Move-Left-Right 15s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes Move-Left-Right {
  0%, 100% {
    left: 0px;
    bottom: 0px;
  }
  20% {
    left: 20px;
    bottom: 0px;
  }

  30% {
    left: 20px;
    bottom: 0px;
  }

  40% {
    left: 20px;
    bottom: 20px;
  }
  50% {
    left: 20px;
    bottom: 20px;
  }
  70% {
    left: 0px;
    bottom: 20px;
  }

  80% {
    left: 0px;
    bottom: 20px;
  }
  90% {
    left: 0px;
    bottom: 0px;
  }
  100% {
    left: 0px;
    bottom: 0px;
  }
}