body {
	background: #cccccc;
}

.canvas {
	width: 900px;
	height: 556px;
	margin: 100px auto;
	background: white;
	position: relative;
}





#botle {
	top: 216px;
    left: 230px;
    width: 280px;
    height: 280px;
	background: rgba(98,125,77,1);
background: -moz-linear-gradient(left, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 62%, rgba(31,59,8,1) 69%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(98,125,77,1)), color-stop(62%, rgba(31,59,8,1)), color-stop(69%, rgba(31,59,8,1)));
background: -webkit-linear-gradient(left, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 62%, rgba(31,59,8,1) 69%);
background: -o-linear-gradient(left, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 62%, rgba(31,59,8,1) 69%);
background: -ms-linear-gradient(left, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 62%, rgba(31,59,8,1) 69%);
background: linear-gradient(to right, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 62%, rgba(31,59,8,1) 69%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08', GradientType=1 );
	-webkit-clip-path: polygon(32% 37%, 44% 28%, 43% 0, 54% 0, 54% 28%, 66% 36%, 64% 90%, 35% 90%);
	clip-path: polygon(32% 37%, 44% 28%, 43% 0, 53% 0, 53% 28%, 65% 36%, 63% 90%, 35% 90%);
	position: absolute;
}
 
 #glass1{
     top: 372px;
    left: 486px;
    width: 85px;
    height: 95px;
    background: #0066cc;
    -webkit-clip-path: polygon(25% 52%, 18% 26%, 33% 0, 74% 0, 89% 23%, 85% 51%, 60% 63%, 60% 83%, 75% 88%, 38% 88%, 53% 83%, 52% 63%);
    clip-path: polygon(25% 52%, 18% 26%, 33% 0, 74% 0, 89% 23%, 85% 51%, 60% 63%, 60% 83%, 75% 88%, 38% 88%, 53% 83%, 52% 63%);
    position: absolute;
    
} 

 #glass2{
    width: 92px;
    height: 100px;
    left: 520px;
    top: 370px;
    background: #1e90ff;
    -webkit-clip-path: polygon(25% 52%, 18% 26%, 33% 0, 74% 0, 89% 23%, 85% 51%, 60% 63%, 60% 83%, 75% 88%, 38% 88%, 53% 83%, 52% 63%);
    clip-path: polygon(25% 52%, 18% 26%, 33% 0, 74% 0, 89% 23%, 85% 51%, 60% 63%, 60% 83%, 75% 88%, 38% 88%, 53% 83%, 52% 63%);
    position: absolute;
} 

#heart {
    position: absolute;
    width: 100px;
    height: 90px;
    left: 100px;
    top: 100px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
		}
    

#rag {
    top: 48px;
    left: -10px;
    height: 610px;
    background: #f4bc42;
    -webkit-clip-path: polygon(48% 62%, 100% 66%, 63% 73%, 3% 68%);
    clip-path: polygon(48% 62%, 100% 66%, 63% 73%, 3% 68%);
    position: relative;
	}


#table {
    top: -376px;
    left: 142px;
    width: 600px;
    height: 330px;
    background: yellow;
    -webkit-clip-path: polygon(48% 62%, 100% 66%, 63% 73%, 3% 68%);
    clip-path: polygon(48% 62%, 100% 66%, 63% 73%, 3% 68%);
    position: relative;

}

#jar {
    top: 310px;
    left: 325px;
    width: 280px;
    height: 280px;
    opacity: 0.5;
    background: darkolivegreen;
    -webkit-clip-path: polygon(29% 16%, 40% 9%, 40% 0, 55% 0, 55% 8%, 66% 15%, 66% 52%, 29% 52%);
    clip-path: polygon(29% 16%, 40% 9%, 40% 0, 55% 0, 55% 8%, 66% 15%, 66% 52%, 29% 52%);
    position: absolute;
}

#bloom1 {
    top: -700px;
    left: 380px;
    width: 130px;
    height: 130px;
    background: hotpink;
    -webkit-clip-path: polygon(19% 21%, 30% 26%, 34% 14%, 42% 23%, 51% 15%, 47% 28%, 56% 26%, 47% 36%, 47% 52%, 38% 44%, 23% 46%, 30% 36%);
clip-path: polygon(19% 21%, 30% 26%, 34% 14%, 42% 23%, 51% 15%, 47% 28%, 56% 26%, 47% 36%, 47% 52%, 38% 44%, 23% 46%, 30% 36%);
    position: relative;}

#bloom2 {
    top: -830px;
    left: 420px;
    width: 130px;
    height: 130px;
    background: hotpink;
    -webkit-clip-path: polygon(30% 29%, 23% 15%, 33% 23%, 41% 8%, 44% 25%, 57% 13%, 54% 28%, 56% 40%, 47% 37%, 44% 51%, 38% 36%, 23% 41%);
clip-path: polygon(30% 29%, 23% 15%, 33% 23%, 41% 8%, 44% 25%, 57% 13%, 54% 28%, 56% 40%, 47% 37%, 44% 51%, 38% 36%, 23% 41%);
    position: relative
}

#strain1 {
    top: -944px;
    left: 367px;
    width: 280px;
    height: 210px;
    background: darkolivegreen;
    -webkit-clip-path: polygon(37% 12%, 18% 79%, 14% 98%, 37% 19%);
clip-path: polygon(37% 12%, 18% 79%, 14% 98%, 37% 19%);
    position: relative;
}

#strain2 {
    top: -1138px;
    left: 375px;
    width: 140px;
    height: 200px;
    background: darkolivegreen;
    -webkit-clip-path: polygon(37% 12%, 49% 69%, 56% 92%, 41% 12%);
clip-path: polygon(37% 12%, 49% 69%, 56% 92%, 41% 12%);
    position: relative;
}

#rope {
    top: -1479px;
    left: 48px;
    width: 280px;
    height: 326px;
    background: #1e90ff;
    -webkit-clip-path: polygon(37% 12%, 36% 97%, 37% 100%);
clip-path: polygon(37% 12%, 36% 97%, 37% 100%);
    position: relative;

}