body {
  width: 100%;
  height: auto;
  padding: 0;
  background-color: rgb(0, 0, 0);
}

img {
  width: 100%;
  height: auto;
}
@media screen and (min-width:480px){
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  width: 65%;
  background-color: rgb(0, 0, 0);
}
@media screen and (min-width:640px){
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  width: 60%;
  background-color: rgb(0, 0, 0);
}
}
@media screen and (min-width:800px){
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  width: 50%;
  background-color: rgb(0, 0, 0);
}
}
@media screen and (min-width:1200px){
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  width: 55%;
  background-color: rgb(0, 0, 0);
}
}
.wrapper {
  position: relative;
}

.hotspots {
  position: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  z-index: 100;
  background-color: rgb(0, 0, 0);
}
.hotspots .hotspot-item {
  position: absolute;
}
.hotspots .hotspot-item.hotspot-item-1 {
  left: 30%;
  top: 69%;
}
.hotspots .hotspot-item.hotspot-item-2 {
  left: 30%;
  top: 60%;
}
.hotspots .hotspot-item.hotspot-item-3 {
  left: 30%;
  top: 50%;
}
.hotspots .hotspot-item.hotspot-item-4 {
  left: 30%;
  top: 41%;
}
.hotspots .hotspot-item.hotspot-item-5 {
  left: 30%;
  top: 32%;
}
.hotspots .hotspot-item.hotspot-item-1g {
  left: 72%;
  top: 69%;
}
.hotspots .hotspot-item.hotspot-item-2g {
  left: 72%;
  top: 60%;
}
.hotspots .hotspot-item.hotspot-item-3g {
  left: 72%;
  top: 50%;
}
.hotspots .hotspot-item.hotspot-item-4g {
  left: 72%;
  top: 41%;
}
.hotspots .hotspot-item.hotspot-item-5g {
  left: 55%;
  top: 32%;
}
.hotspots .hotspot-item.hotspot-item-6 {
  left: 47%;
  top: 23%;
}
.hotspots .hotspot-item.hotspot-item-7 {
  left: 50%;
  top: 16%;
}
.hotspots .hotspot-item.hotspot-item-8 {
  left: 50%;
  top: 10%
}
.hotspots .hotspot-item a {
  width: 32px;
  height: 32px;
  border: 3px solid #000;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: auto;
  top: auto;
  border-radius: 100%;
  -moz-transition: all 0.2s 0;
  -o-transition: all 0.2s 0;
  -webkit-transition: all 0.2s 0;
  transition: all 0.2s 0;
}
.hotspots .hotspot-item a:hover {
  -moz-transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  -webkit-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
}
.hotspots .hotspot-item a span {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 100%;
  position: absolute;
  display: block;
  background: #000;
  left: 50%;
  top: 50%;
}
.hotspots .hotspot-item a.hotspot-red {
  background: rgba(255, 0, 0, 0.4);
  border-color: red;
}
.hotspots .hotspot-item a.hotspot-green {
  background: rgba(0, 255, 0, 0.2);
  border-color: green;
}
.hotspots .hotspot-item a.hotspot-blue {
  background: rgba(0, 0, 255, 0.5);
  border-color: blue;
}
.hotspots .hotspot-item a.hotspot-yellow {
  background: rgba(255, 255, 0, 0.5);
  border-color: yellow;
}
iframe {
position: center;
    top:80px;
    bottom: 0;
    left: 0;
    right: 0;
    height: 600px;
    width: 800px;
    background-color: rgb(0, 0, 0);
}