<div class="uc-main-outer">
  <div class="uc-main-inner">
    <div id="uc-s1" class="uc-slide">
      <a id="uc-s1-h1-description" class="uc-hotspot-description" href="#"><div><div>Leather sofas are special. Their peculiarity comes from their natural look and texture and the way they age so beautifully. Designed with a foam-wrapped feather and fiber fill for maximum comfort, this supple leather sofa is finished in a dark black tone mounted on steel framework.</div></div></a>
      <a id="uc-s1-h2-description" class="uc-hotspot-description" href="#"><div><div>Ornamental plants are plants that are grown for decorative purposes in gardens and landscape design projects, as houseplants, for cut flowers and specimen display. The cultivation of these, called floriculture, forms a major branch of horticulture.</div></div></a>
      <a id="uc-s1-h3-description" class="uc-hotspot-description" href="#"><div><div>Cealing Spotlight performance led's are of outstanding performance and quality, and not to be confused with cheaper budget leds or light bulbs. Producing a super bright light, in cool white or Warm White
        these are the ultimate energy saving lamps.</div></div></a>
      <a id="uc-s1-h4-description" class="uc-hotspot-description" href="#"><div><div>The swivel LCD wall bracket is the optimal solution to set up the perfect viewing position in your living room and is a great solution for rooms with inconsistent lighting conditions.</div></div></a>
      <a class="uc-hotspot-close">X</a>
      <a id="uc-s1-h5-description" class="uc-hotspot-description" href="#"><div><div>Reading a book, building a model airplane, embroidering, clock making, cake decorating... any delicate work is best done under good light. A good Floor Lamp simulates natural daylight, allowing you to see better and concentrate more easily. The daylight effect is ideal for reading, crafting, art and model making as it shows colours much more accurately.</div></div></a>
      <a class="uc-hotspot-close">X</a>
      <div class="uc-pager">
        <ul>
          <li><a href="#uc-s1">&#8226;</a></li>
          <li><a href="#uc-s2">&#8226;</a></li>
          <li><a href="#uc-s3">&#8226;</a></li>
          <li><a href="#uc-s4" class="uc-last">&#8226;</a></li>
        </ul>
      </div>
      <div class="uc-label"><a href="#uc-s4" class="uc-left">&#x2039;</a></div>
      <div class="uc-label"><a href="#uc-s2" class="uc-right">&#x203a;</a></div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/179629/009.jpg" />
      <!-- 1st hotspot (start) -->
      <div id="uc-s1-h1" class="uc-hotspot-wrapper">
        <div class="uc-hotspot-slices">
          <div class="uc-hotspot-slice1"></div>
          <div class="uc-hotspot-slice2"></div>
          <div class="uc-hotspot-slice3"></div>
          <div class="uc-hotspot-slice4"></div>
          <div class="uc-hotspot-slice5">
            <div class="uc-hotspot-outer">
              <div class="uc-hotspot-inner">
                <div class="uc-hotspot-element">
                  <a id="uc-s1-h1-link" href="#uc-s1-h1-description">Leather Sofa</a>
                </div>
              </div>
            </div>
          </div>
          <div class="uc-hotspot-slice6"></div>
          <div class="uc-hotspot-slice7"></div>
          <div class="uc-hotspot-slice8 uc-hotspot-arrow-down"><div>&nbsp;</div></div>
          <div class="uc-hotspot-slice9"></div>
        </div>
      </div>
      <!-- hotspot (end) -->
      <!-- 2nd hotspot (start) -->
      <div id="uc-s1-h2" class="uc-hotspot-wrapper">
        <div class="uc-hotspot-slices">
          <div class="uc-hotspot-slice1"></div>
          <div class="uc-hotspot-slice2"></div>
          <div class="uc-hotspot-slice3"></div>
          <div class="uc-hotspot-slice4"></div>
          <div class="uc-hotspot-slice5">
            <div class="uc-hotspot-outer">
              <div class="uc-hotspot-inner">
                <div class="uc-hotspot-element">
                  <a id="uc-s1-h2-link" href="#uc-s1-h2-description">Ornamental Plant</a>
                </div>
              </div>
            </div>
          </div>
          <div class="uc-hotspot-slice6 uc-hotspot-arrow-right"><div>&nbsp;</div></div>
          <div class="uc-hotspot-slice7"></div>
          <div class="uc-hotspot-slice8"></div>
          <div class="uc-hotspot-slice9"></div>
        </div>
      </div>
      <!-- hotspot (end) -->
      <!-- 3rd hotspot (start) -->
      <div id="uc-s1-h3" class="uc-hotspot-wrapper">
        <div class="uc-hotspot-slices">
          <div class="uc-hotspot-slice1"></div>
          <div class="uc-hotspot-slice2 uc-hotspot-arrow-up"><div>&nbsp;</div></div>
          <div class="uc-hotspot-slice3"></div>
          <div class="uc-hotspot-slice4"></div>
          <div class="uc-hotspot-slice5">
            <div class="uc-hotspot-outer">
              <div class="uc-hotspot-inner">
                <div class="uc-hotspot-element">
                  <a id="uc-s1-h3-link" href="#uc-s1-h3-description">Ceiling Spotlight</a>
                </div>
              </div>
            </div>
          </div>
          <div class="uc-hotspot-slice6"></div>
          <div class="uc-hotspot-slice7"></div>
          <div class="uc-hotspot-slice8"></div>
          <div class="uc-hotspot-slice9"></div>
        </div>
      </div>
      <!-- hotspot (end) -->
      <!-- 4th hotspot (start) -->
      <div id="uc-s1-h4" class="uc-hotspot-wrapper">
        <div class="uc-hotspot-slices">
          <div class="uc-hotspot-slice1"></div>
          <div class="uc-hotspot-slice2"></div>
          <div class="uc-hotspot-slice3"></div>
          <div class="uc-hotspot-slice4"></div>
          <div class="uc-hotspot-slice5">
            <div class="uc-hotspot-outer">
              <div class="uc-hotspot-inner">
                <div class="uc-hotspot-element">
                  <a id="uc-s1-h4-link" href="#uc-s1-h4-description">Wall Mount<br/>TV</a>
                </div>
              </div>
            </div>
          </div>
          <div class="uc-hotspot-slice6"></div>
          <div class="uc-hotspot-slice7"></div>
          <div class="uc-hotspot-slice8 uc-hotspot-arrow-down"><div>&nbsp;</div></div>
          <div class="uc-hotspot-slice9"></div>
        </div>
      </div>
      <!-- hotspot (end) -->
      <!-- 5th hotspot (start) -->
      <div id="uc-s1-h5" class="uc-hotspot-wrapper">
        <div class="uc-hotspot-slices">
          <div class="uc-hotspot-slice1"></div>
          <div class="uc-hotspot-slice2"></div>
          <div class="uc-hotspot-slice3"></div>
          <div class="uc-hotspot-slice4"></div>
          <div class="uc-hotspot-slice5">
            <div class="uc-hotspot-outer">
              <div class="uc-hotspot-inner">
                <div class="uc-hotspot-element">
                  <a id="uc-s1-h5-link" href="#uc-s1-h4-description">Floor Lamp</a>
                </div>
              </div>
            </div>
          </div>
          <div class="uc-hotspot-slice6"></div>
          <div class="uc-hotspot-slice7"></div>
          <div class="uc-hotspot-slice8 uc-hotspot-arrow-down"><div></div></div>
          <div class="uc-hotspot-slice9"></div>
        </div>
      </div>
      <!-- hotspot (end) -->
    </div> 
    <div id="uc-s2" class="uc-slide">
      <a id="uc-s2-h1-description" class="uc-hotspot-description" href="#"><div><div>Decorative accessories are the finishing touches to your home; the pieces that set your personal stamp on an interior scheme and make it unique to you. They range from practical pieces such as wooden miscellanea, pictures and candle holders that look beautiful but also serve a useful purpose; to purely decorative objects.</div></div></a>
      <a id="uc-s2-h2-description" class="uc-hotspot-description" href="#"><div><div>If you like the modern look & want to trace it with the comfort then this sofa is for you. Sofa in White Leather belongs to Home Elegance Collance defined angles that exemplify contemporary design, this collection will blend effortlessly into your modern home. Metal legs support the bonded leather seating group while also enhancing the look of the collection.</div></div></a>
      <a id="uc-s2-h3-description" class="uc-hotspot-description" href="#"><div><div>Naturally dried plants are a notable part of any room decor. Naturally dried and preserved plants, flowers and seed pods make an impressive statement, whether used on their own or when added with other products to produces stunning centerpieces, brilliant shelf brighteners, great room focal points, or spectacular door or wall wreaths.</div></div></a>
      <a class="uc-hotspot-close">X</a>
      <div class="uc-pager">
        <ul>
          <li><a href="#uc-s1">&#8226;</a></li>
          <li><a href="#uc-s2">&#8226;</a></li>
          <li><a href="#uc-s3">&#8226;</a></li>
          <li><a href="#uc-s4" class="uc-last">&#8226;</a></li>
        </ul>
      </div>
      <div class="uc-label"><a href="#uc-s1" class="uc-left">&#x2039;</a></div>
      <div class="uc-label"><a href="#uc-s3" class="uc-right">&#x203a;</a></div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/179629/027.jpg" />
      <!-- 1st hotspot (start) -->
      <div id="uc-s2-h1" class="uc-hotspot-wrapper">
        <div class="uc-hotspot-slices">
          <div class="uc-hotspot-slice1"></div>
          <div class="uc-hotspot-slice2"></div>
          <div class="uc-hotspot-slice3"></div>
          <div class="uc-hotspot-slice4"></div>
          <div class="uc-hotspot-slice5">
            <div class="uc-hotspot-outer">
              <div class="uc-hotspot-inner">
                <div class="uc-hotspot-element">
                  <a id="uc-s2-h1-link" href="#uc-s2-h1-description">Decorative Object</a>
                </div>
              </div>
            </div>
          </div>
          <div class="uc-hotspot-slice6 uc-hotspot-arrow-right"><div></div></div>
          <div class="uc-hotspot-slice7"></div>
          <div class="uc-hotspot-slice8"></div>
          <div class="uc-hotspot-slice9"></div>
        </div>
      </div>
      <!-- hotspot (end) -->
      <!-- 2nd hotspot (start) -->
      <div id="uc-s2-h2" class="uc-hotspot-wrapper">
        <div class="uc-hotspot-slices">
          <div class="uc-hotspot-slice1"></div>
          <div class="uc-hotspot-slice2"></div>
          <div class="uc-hotspot-slice3"></div>
          <div class="uc-hotspot-slice4"></div>
          <div class="uc-hotspot-slice5">
            <div class="uc-hotspot-outer">
              <div class="uc-hotspot-inner">
                <div class="uc-hotspot-element">
                  <a id="uc-s2-h2-link" href="#uc-s2-h2-description">White Leather<br/>Sofa</a>
                </div>
              </div>
            </div>
          </div>
          <div class="uc-hotspot-slice6"></div>
          <div class="uc-hotspot-slice7"></div>
          <div class="uc-hotspot-slice8 uc-hotspot-arrow-down"><div></div></div>
          <div class="uc-hotspot-slice9"></div>
        </div>
      </div>
      <!-- hotspot (end) -->
      <!-- 3rd hotspot (start) -->
      <div id="uc-s2-h3" class="uc-hotspot-wrapper">
        <div class="uc-hotspot-slices">
          <div class="uc-hotspot-slice1"></div>
          <div class="uc-hotspot-slice2"></div>
          <div class="uc-hotspot-slice3"></div>
          <div class="uc-hotspot-slice4 uc-hotspot-arrow-left"><div></div></div>
          <div class="uc-hotspot-slice5">
            <div class="uc-hotspot-outer">
              <div class="uc-hotspot-inner">
                <div class="uc-hotspot-element">
                  <a id="uc-s2-h3-link" href="#uc-s2-h3-description">Dried Plant</a>
                </div>
              </div>
            </div>
          </div>
          <div class="uc-hotspot-slice6"></div>
          <div class="uc-hotspot-slice7"></div>
          <div class="uc-hotspot-slice8"></div>
          <div class="uc-hotspot-slice9"></div>
        </div>
      </div>
      <!-- hotspot (end) -->
    </div> 
    <div id="uc-s3" class="uc-slide">
      <a id="uc-s3-h1-description" class="uc-hotspot-description" href="#"><div><div>A pendant light has the power to be a work of art. And many of today’s pendant lights have an ultra-modern feel that makes them true showpieces. From hand-blown glass to powder coated steel, the materials vary. But the elegance of futuristic form prevails.</div></div></a>
      <a class="uc-hotspot-close">X</a>
      <div class="uc-pager">
        <ul>
          <li><a href="#uc-s1">&#8226;</a></li>
          <li><a href="#uc-s2">&#8226;</a></li>
          <li><a href="#uc-s3">&#8226;</a></li>
          <li><a href="#uc-s4" class="uc-last">&#8226;</a></li>
        </ul>
      </div>
      <div class="uc-label"><a href="#uc-s2" class="uc-left">&#x2039;</a></div>
      <div class="uc-label"><a href="#uc-s4" class="uc-right">&#x203a;</a></div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/179629/037.jpg" />
      <!-- 1st hotspot (start) -->
      <div id="uc-s3-h1" class="uc-hotspot-wrapper">
        <div class="uc-hotspot-slices">
          <div class="uc-hotspot-slice1"></div>
          <div class="uc-hotspot-slice2 uc-hotspot-arrow-up"><div></div></div>
          <div class="uc-hotspot-slice3"></div>
          <div class="uc-hotspot-slice4"></div>
          <div class="uc-hotspot-slice5">
            <div class="uc-hotspot-outer">
              <div class="uc-hotspot-inner">
                <div class="uc-hotspot-element">
                  <a id="uc-s3-h1-link" href="#uc-s3-h1-description">Modern Lighting Fixture</a>
                </div>
              </div>
            </div>
          </div>
          <div class="uc-hotspot-slice6"></div>
          <div class="uc-hotspot-slice7"></div>
          <div class="uc-hotspot-slice8"></div>
          <div class="uc-hotspot-slice9"></div>
        </div>
      </div>
      <!-- hotspot (end) -->
    </div>
    <div id="uc-s4" class="uc-slide">
      <a id="uc-s4-h1-description" class="uc-hotspot-description" href="#"><div><div>The elegance of fireplace is ideal for enhancing your home's cozy appeal. All of your guests are sure to marvel at such a wonderful centerpiece. In addition to your living room or bedroom, try imaging this fireplace to your dining room for romantic dinners or complement your room with a modern fireplace.</div></div></a>
      <a id="uc-s4-h2-description" class="uc-hotspot-description" href="#"><div><div>Natural art is about striving to find and expose the art inherent in nature. It is about increasing the awareness of the natural patterns beauty.</div></div></a>
      <a id="uc-s4-h3-description" class="uc-hotspot-description" href="#"><div><div>Originally used to hold medicine and consumable items for making medicine, porcelain tableware are now design objects and collectibles.</div></div></a>
      <a class="uc-hotspot-close">X</a>
      <div class="uc-pager">
        <ul>
          <li><a href="#uc-s1">&#8226;</a></li>
          <li><a href="#uc-s2">&#8226;</a></li>
          <li><a href="#uc-s3">&#8226;</a></li>
          <li><a href="#uc-s4" class="uc-last">&#8226;</a></li>
        </ul>
      </div>
      <div class="uc-label"><a href="#uc-s3" class="uc-left">&#x2039;</a></div>
      <div class="uc-label"><a href="#uc-s1" class="uc-right">&#x203a;</a></div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/179629/040.jpg" />
      <!-- 1st hotspot (start) -->
      <div id="uc-s4-h1" class="uc-hotspot-wrapper">
        <div class="uc-hotspot-slices">
          <div class="uc-hotspot-slice1"></div>
          <div class="uc-hotspot-slice2"></div>
          <div class="uc-hotspot-slice3"></div>
          <div class="uc-hotspot-slice4"></div>
          <div class="uc-hotspot-slice5">
            <div class="uc-hotspot-outer">
              <div class="uc-hotspot-inner">
                <div class="uc-hotspot-element">
                  <a id="uc-s4-h1-link" href="#uc-s4-h1-description">Modern Fireplace</a>
                </div>
              </div>
            </div>
          </div>
          <div class="uc-hotspot-slice6"></div>
          <div class="uc-hotspot-slice7"></div>
          <div class="uc-hotspot-slice8  uc-hotspot-arrow-down"><div></div></div>
          <div class="uc-hotspot-slice9"></div>
        </div>
      </div>
      <!-- hotspot (end) -->
      <!-- 2nd hotspot (start) -->
      <div id="uc-s4-h2" class="uc-hotspot-wrapper">
        <div class="uc-hotspot-slices">
          <div class="uc-hotspot-slice1"></div>
          <div class="uc-hotspot-slice2"></div>
          <div class="uc-hotspot-slice3"></div>
          <div class="uc-hotspot-slice4"></div>
          <div class="uc-hotspot-slice5">
            <div class="uc-hotspot-outer">
              <div class="uc-hotspot-inner">
                <div class="uc-hotspot-element">
                  <a id="uc-s4-h2-link" href="#uc-s4-h2-description">Natural<br/> Art</a>
                </div>
              </div>
            </div>
          </div>
          <div class="uc-hotspot-slice6 uc-hotspot-arrow-right"><div></div></div>
          <div class="uc-hotspot-slice7"></div>
          <div class="uc-hotspot-slice8"></div>
          <div class="uc-hotspot-slice9"></div>
        </div>
      </div>
      <!-- hotspot (end) -->
      <!-- 3rd hotspot (start) -->
      <div id="uc-s4-h3" class="uc-hotspot-wrapper">
        <div class="uc-hotspot-slices">
          <div class="uc-hotspot-slice1"></div>
          <div class="uc-hotspot-slice2"></div>
          <div class="uc-hotspot-slice3"></div>
          <div class="uc-hotspot-slice4 uc-hotspot-arrow-left"><div></div></div>
          <div class="uc-hotspot-slice5">
            <div class="uc-hotspot-outer">
              <div class="uc-hotspot-inner">
                <div class="uc-hotspot-element">
                  <a id="uc-s4-h3-link" href="#uc-s4-h3-description">Porcelain Bottle</a>
                </div>
              </div>
            </div>
          </div>
          <div class="uc-hotspot-slice6"></div>
          <div class="uc-hotspot-slice7"></div>
          <div class="uc-hotspot-slice8"></div>
          <div class="uc-hotspot-slice9"></div>
        </div>
      </div>
      <!-- hotspot (end) -->
    </div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
body {
  background-color: #776;
  color: #f0f0f0;
}
/**
* CSS2 images preloading: Instead of creating an empty div with a class on it, we can utilise the requirement of the :after (or :before) pseudo-element.
* This needs to be there for the content property to work. We apply it to generate the content after the body tag and then set it to display: none,
* that way the preloaded images aren’t shown but are still loaded. We know have a pure CSS solution that requires no mark-up.
*/
body:after {
  content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/179629/009.jpg) url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/179629/027.jpg) url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/179629/037.jpg) url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/179629/040.jpg);
  display: none;
}
.uc-pager {
  position: absolute;
  width: 100%;
  height: 100%;
}
.uc-pager ul {
  list-style-type: none;
  padding: 0;
  margin: 440px 0 0 0; /*image-height - pager-height*/
  float: left;
  text-align: center;
  list-style: none;
  position: relative;
  display: block;
  left: 50%;
}
.uc-pager ul li {
  list-style: none;
  position: relative;
  float: left;
  display: block;
  right: 50%;
}
.uc-pager ul li a {
  border: 0;
  color: #00f;
  outline: none;
  padding: 8px;
  text-decoration: none;
  font-size: 25pt;
  padding: 0 0.1em;
  color: #e8ede0;
}
.uc-pager ul li a:hover {
  color: #fff;
}
.uc-pager ul li a.last {
  border-right-width: 1px;
}
/*
div {
  border: solid 0px #f00;
  overflow: auto;
  padding: 0;
}*/
.uc-main-outer {
  border: solid 10px #f0f0f0;
  width: 640px;
  height: 470px; /*image-height - border-height*/
}
.uc-main-inner {
  _margin: 5px 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 640px;
  height: 470px; /*image-height - border-height*/
}
.uc-main-inner div {
  overflow: hidden;
}
.uc-label {
  height: 100%;
}
.uc-label .uc-left,
.uc-label .uc-right {
  background-color: rgba(255, 255, 255, .3);
  color: #fff;
  font-family: "Varela Round", sans-serif;
  font-size: 60pt;
  line-height: 60px;
  width: 40px;
  opacity: 0;
  position: absolute;
  z-index: 200;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 0px 15px rgb(119, 119, 119);
  transition: opacity .2s;
  margin: 210px 0;
  padding-bottom: 10px;
}
.uc-label .uc-left {
  left: 0;
  -moz-border-top-right-radius: 25%;
  -moz-border-bottom-right-radius: 25%;
  -ms-border-top-right-radius: 25%;
  -ms-border-bottom-right-radius: 25%;
  -o-border-top-right-radius: 25%;
  -o-border-bottom-right-radius: 25%;
  -webkit-border-top-right-radius: 25%;
  -webkit-border-bottom-right-radius: 25%;
  border-top-right-radius: 25%;
  border-bottom-right-radius: 25%;
}
.uc-label .uc-right {
  right: 0;
  -moz-border-top-left-radius: 55%;
  -moz-border-bottom-left-radius: 25%;
  -ms-border-top-left-radius: 25%;
  -ms-border-bottom-left-radius: 25%;
  -o-border-top-left-radius: 25%;
  -o-border-bottom-left-radius: 25%;
  -webkit-border-top-left-radius: 25%;
  -webkit-border-bottom-left-radius: 25%;
  border-top-left-radius: 25%;
  border-bottom-left-radius: 25%;
}
.uc-left:hover, .uc-right:hover {
  opacity: 1;
  -o-box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, .75);
  -moz-box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, .75);
  -ms-box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, .75);
  -webkit-box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, .75);
  box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, .75);
}
#uc-s1 .uc-pager li a[href="#uc-s1"],
#uc-s2 .uc-pager li a[href="#uc-s2"],
#uc-s3 .uc-pager li a[href="#uc-s3"],
#uc-s4 .uc-pager li a[href="#uc-s4"] {
  color: #fff;
}
#uc-s1:target img,
#uc-s2:target img,
#uc-s3:target img,
#uc-s4:target img {
  
}
.uc-hotspot-wrapper {
  height: 110px;
  width: 110px;  
}
.uc-hotspot-wrapper:hover {
  opacity: 0.8;
}
.uc-hotspot-slices {
  height: 110px;
  width: 110px;
  color: white;
}
uc-hotspot-slices:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6+IE7 slices clear:both */
* html .uc-hotspot-slices,
*:first-child+html .uc-hotspot-slices {
  zoom: 1;
}
.uc-hotspot-slice1 {
  height: 15px;
  width: 15px;
  float: left;
}
.uc-hotspot-slice2 {
  overflow: hidden;
  height: 15px;
  width: 80px;
  float: left;
}
.uc-hotspot-slice3 {
  height: 15px;
  width: 15px;
  float: left;
}
.uc-hotspot-slice4 {
  height: 80px;
  width: 15px;
  float: left;
}
.uc-hotspot-slice5 {
  background-color: rgba(230, 145, 23, 0.8);
  height: 80px;
  width: 80px;
  -moz-border-radius: 36px;
  -ms-border-radius: 36px;
  -o-border-radius: 36px;
  -webkit-border-radius: 36px;
  border-radius: 36px;
  float: left;
}
.uc-hotspot-slice6 {
  height: 80px;
  width: 15px;
  float: left;
}
.uc-hotspot-slice7 {
  height: 15px;
  width: 15px;
  float: left;
}
.uc-hotspot-slice8 {
  height: 15px;
  width: 80px;
  float: left;
}
.uc-hotspot-slice9 {
  height: 15px;
  width: 15px;
  float: left;
}
.uc-hotspot-outer {
  display: table;
  height: 80px;
  width: 80px;
  overflow: hidden;
  *position: relative;
}
.uc-hotspot-inner {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
/* IE6+IE7 specific rules */
* html .uc-hotspot-inner,
*:first-child+html .uc-hotspot-inner {
  position: absolute;
  top: 50%;
}
.uc-hotspot-element {
  
}
.uc-hotspot-element:hover {
  text-shadow: 0px 0 20px #fff;
}
/* IE6+IE7 specific rules */
* html .uc-hotspot-element,
*:first-child+html .uc-hotspot-element {
  position: relative;
  top: -50%;
}
.uc-hotspot-element a {
  display: block;
  outline: none;  
  text-decoration: none;
  color: #fff;
  font-family: arial, sans-serif;
  font-weight: 700;
  font-size: 72%;
}
.uc-hotspot-arrow-right div {
  margin-top: 33px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7.5px 0 7.5px 15px;
  border-color: transparent transparent transparent rgb(230, 145, 23);
  border-color: transparent transparent transparent rgba(230, 145, 23, 0.8);
  line-height: 0px;
  _border-color: #000000 #000000 #000000 #e69117;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.uc-hotspot-arrow-left div {
  margin-top: 33px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7.5px 15px 7.5px 0;
  border-color: transparent rgb(230, 145, 23) transparent transparent;
  border-color: transparent rgba(230, 145, 23, 0.8) transparent transparent;
  line-height: 0px;
  _border-color: #000000 #e69117 #000000 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.uc-hotspot-arrow-up div {
  margin-left: 33px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7.5px 15px 7.5px;
  border-color: transparent transparent rgb(230, 145, 23) transparent;
  border-color: transparent transparent rgba(230, 145, 23, 0.8) transparent;
  line-height: 0px;
  _border-color: #000000 #000000 #e69117 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.uc-hotspot-arrow-down div {
  margin-left: 33px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 7.5px 0 7.5px;
  border-color: rgb(230, 145, 23) transparent transparent transparent;
  border-color: rgba(230, 145, 23, 0.8) transparent transparent transparent;
  line-height: 0px;
  _border-color: #e69117 #000000 #000000 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.uc-hotspot-description {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-left: -9999px;
  outline: none;
  text-decoration: none;
  color: #fff;
  font-family: arial, sans-serif;
  font-weight: 700;
  font-size: 72%;
  overflow: hidden;
}
.uc-hotspot-description:focus { 
  margin-left: 0; 
}
.uc-hotspot-description div {
  position: relative;
  height: 100%;
  margin-top: -20px;
 }
.uc-hotspot-description div div {
  postion: absolute;
  z-index: 300;
  top: 15%;
  margin: 0 auto;
  display: block;
  height: 140px;
  width: 280px;
  line-height: 24px;
  padding: 100px 30px;
  -moz-border-radius: 170px;
  -ms-border-radius: 170px;
  -o-border-radius: 170px;
  -webkit-border-radius: 170px;
  border-radius: 170px;
  background-color: rgba(230, 145, 23, 0.99);  
  cursor: default;
  text-align: center;
  word-wrap: break-word;
  overflow: hidden;
}
.uc-hotspot-close {
  background-color: gray;
  outline: none;
  text-decoration: none;
  display: block;
  background-color: #808080;
  padding: 12px;
  cursor: pointer;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  font-family: "Open Sans", Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  height: 24px;
  width: 24px;
  line-height: 24px;
  position: absolute;
  z-index: -1;
  left: 430px;
  
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  -webkit-border-radius: 24px;
  border-radius: 24px;
}
#uc-s1 .uc-hotspot-close {
  top: 100px; 
}
#uc-s2 .uc-hotspot-close {
  top: 580px; /*+480px*/
}
#uc-s3 .uc-hotspot-close {
  top: 1060px; /*+960px*/
}
#uc-s4 .uc-hotspot-close {
  top: 1540px; /*+1440px*/
}
.uc-hotspot-description:focus ~ .uc-hotspot-close {
  color: #ccc;
  display: block;
  z-index: 300;
}
.uc-hotspot-description:focus ~ .uc-hotspot-close:hover {
  color: #fff;
  -o-box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, .75);
  -moz-box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, .75);
  -ms-box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, .75);
  -webkit-box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, .75);
  box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, .75);
}
#uc-s1-h1 {
  top: 200px;
  left: 120px;
  position: absolute;
  z-index: 101;
}
#uc-s1-h2 {
  top: 280px;
  left: 420px;
  position: absolute;
  z-index: 102;
}
#uc-s1-h3 {
  top: 95px;
  left: 410px;
  position: absolute;
  z-index: 103;
}
#uc-s1-h4 {
  top: 95px;
  left: 210px;
  position: absolute;
  z-index: 104;
}
#uc-s1-h5 {
  top: 100px;
  left: 10px;
  position: absolute;
  z-index: 105;
}
#uc-s2-h1 {
  top: 695px; /*+480px*/
  left: 310px;
  position: absolute;
  z-index: 101;
}
#uc-s2-h2 {
  top: 795px; /*+480px*/
  left: 130px;
  position: absolute;
  z-index: 102;
}
#uc-s2-h3 {
  top: 685px; /*+480px*/
  left: 150px;
  position: absolute;
  z-index: 103;
}
#uc-s3-h1 {
  top: 1040px; /*+960px*/
  left: 200px;
  position: absolute;
  z-index: 101;
}
#uc-s4-h1 {
  top: 1600px; /*+1440px*/
  left: 200px;
  position: absolute;
  z-index: 101;
}
#uc-s4-h2 {
  top: 1600px; /*+1440px*/
  left: 365px;
  position: absolute;
  z-index: 102;
}
#uc-s4-h3 {
  top: 1750px; /*+1440px*/
  left: 385px;
  position: absolute;
  z-index: 103;
}