.tip {
position: relative;
display: none;
border-radius: 8px;
padding: 8px;
text-align: center;
line-height: 1.5em;
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.tip .notch {
position: absolute;
padding: 0;
width: 0;
height: 0;
}
.tip .notch-top {
top: -10px;
left: 50%;
margin-left: -10px;
border-top: 0;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(0,0,0,0.7);
border-left: 10px solid transparent;
}
.tip .notch-right {
top: 50%;
right: -10px;
margin-top: -10px;
border-top: 10px solid transparent;
border-right: 0;
border-bottom: 10px solid transparent;
border-left: 10px solid rgba(0,0,0,0.7);
}
.tip .notch-bottom {
bottom: -10px;
left: 50%;
margin-left: -10px;
border-top: 10px solid rgba(0,0,0,0.7);
border-right: 10px solid transparent;
border-bottom: 0;
border-left: 10px solid transparent;
}
.tip .notch-left {
top: 50%;
left: -10px;
margin-top: -10px;
border-top: 10px solid transparent;
border-right: 10px solid rgba(0,0,0,0.7);
border-bottom: 10px solid transparent;
border-left: 0;
}
#img-figure {
	display: block;
	width: 100%;
}
.hotspot-demo-1-left {
position: relative;
width: 50%;
}
.spots {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.spot {
position: absolute;
text-align: center;
line-height: 22px;
font-size: 22px;
font-weight: bold;
color: #fff;
width: 22px;
height: 22px;
border: 1px solid #5FB404;
border-radius: 16px;
background-color: #5FB404;
}

.spot:hover {
text-decoration:none;
color:#fff;
cursor:pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#spot-01, #spot-02, #spot-03 {
display: inline-block;
min-width: 250px;
}	
#spot-01 {
position: absolute;
top: 38%;
left: 13%;
}
#spot-01:hover > .tip {
display: block;
top: -7px;
left: 13%
}
#spot-02 {
position: absolute;
top: 43.2%;
left: 29.4%;
}
#spot-02:hover > .tip {
display: block;
top: -48px;
left: -46.5%;
}
#spot-03 {
position: absolute;
top: 53.2%;
left: 31%;
}
#spot-03:hover > .tip {
display: block;
top: -48px;
left: -46.5%;
}
#spot-04 {
position: absolute;
top: 34.7%;
left: 31.6%;
}
#spot-04:hover > .tip {
display: block;
top: -48px;
left: -46.5%;
}
#spot-05 {
position: absolute;
top: 30.8%;
left: 33.7%;
}
#spot-05:hover > .tip {
display: block;
top: -48px;
left: -47.5%;
}
#spot-06 {
position: absolute;
top: 27.8%;
left: 36.4%;
}
#spot-06:hover > .tip {
display: block;
top: -48px;
left: -47.5%;
}
#spot-07 {
position: absolute;
top: 25.1%;
left: 39.5%;
}
#spot-07:hover > .tip {
display: block;
top: -48px;
left: -47.5%;
}
#spot-07 {
position: absolute;
top: 25.1%;
left: 39.5%;
}
#spot-07:hover > .tip {
display: block;
top: -48px;
left: -47.5%;
}