.hotspot-left, .hotspot-right{
  width:47.5%;
  float:left;
  position:relative;
}
.hotspot-left{
  margin: 0 2.5% 0 0;
}
.hotspot-right{
  margin: 0 0 0 2.5%;
}
.full-width-truck, .full-width-vet{
  padding:5% 10%;
  float:left;
  width:80%;
}
.full-width-truck{
  background:#000B2D;
}
.full-width-vet{
  background:#D19D4B;
}
.hotspots-wrap, .hotspot-area{
  width:100%;
  float:left;
}
.hotspots-wrap{
  position:relative;
  transition:opacity 1s ease;
}
.hotspots-main{
  width:100%;
  float:left;
}
.icn{
  position:absolute;
  width:20px;
  height:20px;
  transform: translate(0, 0);
  transition:width 0.3s ease, height 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}
.icn:hover{
  width:25px;
  height:25px;
  transform: translate(-2.5px, -2.5px) rotate(135deg);
}
.hotspot-img{
  position:absolute;
  display:none;
  z-index:3;
}
.hotspot-img.horiz{
  width:400px;
  height:231px;
  margin-top:-106px;
}
.hotspot-img.square{
  width:400px;
  height:400px;
  margin-top:-191px;
}
.hotspot-left .horiz, .hotspot-left .square{
  margin-left:10px;
  padding:0 0 0 15px;
  background-repeat: no-repeat;
  background-position:left center;
  -webkit-box-shadow: 20px 20px 30px -14px rgba(0,0,0,0.75);
  -moz-box-shadow: 20px 20px 30px -14px rgba(0,0,0,0.75);
  box-shadow: 20px 20px 30px -14px rgba(0,0,0,0.75);
}
.hotspot-right .horiz, .hotspot-right .square{
  margin-left:-445px;
  padding:0 15px 0 0;
  background: url('arrow.png') no-repeat right center;
  -webkit-box-shadow: -20px 20px 30px -14px rgba(0,0,0,0.75);
  -moz-box-shadow: -20px 20px 30px -14px rgba(0,0,0,0.75);
  box-shadow: -20px 20px 30px -14px rgba(0,0,0,0.75);
}
.transp{
  opacity:0.5;
}
.hot-ninja{
  z-index:1;
}
#hotspot-a{
  left:10%;
  top:10%;
}
#hotspot-b{
  left:20%;
  top:55%;
}
#hotspot-c{
  left:38%;
  top:67%;
}
#hotspot-d{
  left:41%;
  top:60%;
}
#hotspot-e{
  left:30%;
  top:8%;
}
#hotspot-f{
  left:35%;
  top:30%;
}
#hotspot-g{
  left:72%;
  top:22%;
}
#hotspot-h{
  left:68%;
  top:60%;
}
#hotspot-i{
  left:89%;
  top:92%;
}
#hotspot-j{
  left:46%;
  top:13%;
}
#hotspot-k{
  left:19%;
  top:29%;
}
#hotspot-l{
  left:47%;
  top:36%;
}
#hotspot-m{
  left:46%;
  top:6%;
}
#hotspot-n{
  left:67%;
  top:16%;
}
#hotspot-o{
  left:4%;
  top:47%;
}
#hotspot-p{
  left:28%;
  top:49%;
}
#hotspot-q{
  left:93%;
  top:53%;
}
#hotspot-r{
  left:12%;
  top:59%;
}
#hotspot-s{
  left:50%;
  top:60%;
}
@media(max-width:580px){
  .hot-ninja{
    width:100%;
    margin:15px 0;
  }
}
@media(max-width:520px){
  .hotspot-right .horiz, .hotspot-right .square, .hotspot-left .horiz, .hotspot-left .square{
    margin:25px 0 0 -159px;
    width:300px;
    height:auto;
    padding:10px 0 0 0;
    background-position:center top;
  }
}
@media(max-width:380px){
  .full-width-truck, .full-width-vet{
    width:95%;
    padding:2.5%;
  }
}