/*.citymap{
    background-image: url('');
    background-repeat: no-repeat;
}

.container {
  width: 100%;
  height: 100%;
  background-image: url('img.png');
  overflow: auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid gray;
}

.container img {
  width: 80%;
  height: auto;
  position: fixed;
}*/
.container {
    position: relative;
    margin-top: 6%;
    margin-left: -100%;
    margin-top: 20%;
    margin-left: 100%;
    
  }
  
  .container img {
    width: 100%;
    height: auto;
    transform: scale(1.5);
    
  }
  .container btn {
    position: absolute;
  
  }
  
  #a1{
      position: absolute;
      margin-top: -2%;
      margin-left: -105.9%;
      padding: 1.3% 16%;
      border-radius: 20% 0% 0% 0%;
      transform: rotate(-1.5deg);
      color: transparent;
      background: transparent; /**/
  }
  
  
  #a2{
      position: absolute;
      margin-top: -55.4%;
      margin-left: 26%;
      padding: 1.3% 12%;
      border-radius: 0% 0% 0% 0%;
      transform: rotate(-1.7deg);
      color: transparent;
      background: transparent; /**/
  }
  #a3{
      position: absolute;
      margin-top: -55.5%;
      margin-left: 55%;
      padding: 1.3% 11%;
      border-radius: 0% 0% 0% 0%;
      transform: rotate(-1.7deg);
      color: transparent;
      background: transparent; /**/
  }
  #a4{
      position: absolute;
      margin-top: -49.5%;
      margin-left: 27%;
      padding: 1.4% 12.4%;
      border-radius: 0% 0% 0% 0%;
      transform: rotate(-1.7deg);
      color: transparent;
      background: transparent; /**/
  }
  #a5{
      position: absolute;
      margin-top: -42.7%;
      margin-left: 22.8%;
      padding: 1.4% 15%;
      border-radius: 0% 0% 0% 0%;
      transform: rotate(-1.4deg);
      color: transparent;
      background: transparent; /**/
  }
  #a6{
      position: absolute;
      margin-top: -37%;
      margin-left: 23.2%;
      padding: 1.4% 15%;
      border-radius: 0% 0% 0% 0%;
      transform: rotate(-1.4deg);
      color: transparent;
      background: transparent; /**/
  }
  #y1{
      position: absolute;
      margin-top: -30.6%;
      margin-left: 35.6%;
      padding: 2% 9.3%;
      border-radius: 0% 0% 0% 0%;
      transform: rotate(-1.4deg);
      color: transparent;
      background: transparent; /**/
  }
  #y2{
      position: absolute;
      margin-top: -21.4%;
      margin-left: 60%;
      padding: 2.9% 7%;
      border-radius: 50% 0% 30% 0%;
      transform: rotate(53deg);
      color: transparent;
      background: transparent; /**/
  }
  
  #b1{
      position: absolute;
      margin-top: -49%;
      margin-left: 6%;
      padding: 1.4% 4%;
      border-radius: 0% 0% 0% 50%;
      transform: rotate(-1.4deg);
      color: transparent;
      background: transparent; /**/
  }
  #b2{
      position: absolute;
      margin-top: -50%;
      margin-left: 65%;
      padding: 1.5% 1.4%;
      border-radius: 0% 0% 0% 0%;
      transform: rotate(-5deg);
      color: transparent;
      background: transparent; /**/
  }
  #gr1{
      position: absolute;
      margin-top: -31%;
      margin-left: 58%;
      padding: 3% 2.4%;
      border-radius: 70% 50% 0% 0%;
      transform: rotate(-20deg);
      color: transparent;
      background: transparent;  /**/
  }
  #r1{
      position: absolute;
      margin-top: -42%;
      margin-left: 7.2%;
      padding: 1.8% 2%;
      border-radius: 0% 0% 0% 80%;
      transform: rotate(-7deg);
      color: transparent;
      background: transparent;  /**/
  }
  #r2{
      position: absolute;
      margin-top: -39.7%;
      margin-left: 18%;
      padding: 2.6% 0.5%;
      border-radius: 0% 0% 0% 0%;
      transform: rotate(-7deg);
      color: transparent;
      background: transparent; /* */
  }
  #g1{
      position: absolute;
      margin-top: -40%;
      margin-left: 67%;
      padding: 0.9% 2.6%;
      border-radius: 0% 0% 0% 0%;
      transform: rotate(-6deg);
      color: transparent;
      background: transparent; /**/
  }
  #g2{
      position: absolute;
      margin-top: -42.3%;
      margin-left: 13%;
      padding: 2.3% 1%; 
      border-radius: 0% 0% 0% 80%;
      transform: rotate(-7deg);
      color: transparent;
      background: transparent; /**/
  }
  
  #wrap{
      position: absolute;
      margin-top: -73.4%;
      margin-left: 10%;
      width: 26%;
      border-radius: 10px;
      overflow: hidden;
      padding: 1% 2% 2% 2%;
      background: #454446;
      color: white;
  }
  
  #btnForRow1{
      position: absolute;
      margin-left: 15%;
      margin-top: -6%;
      background-color: #ff7ee0;
  }
  #btnForRow2{
      position: absolute;
      margin-left: 25%;
      margin-top: -6%;
      background-color: #fe0000;
  }
  #btnForRow3{
      position: absolute;
      margin-left: 35%;
      margin-top: -6%;
      background-color: #7dbeff;
  }
  #btnForRow4{
      position: absolute;
      margin-left: 45%;
      margin-top: -6%;
      background-color: #e6e646;
  }
  #btnForRow5{
      position: absolute;
      margin-left: 55%;
      margin-top: -6%;
      background-color: #40fe00;
  }
  #btnForRow6{
      position: absolute;
      margin-left: 65%;
      margin-top: -6%;
      background-color: #989697;
  }
  
  .wrapCity {
      position: absolute;
      margin-top: -50.2%;
      margin-left: -2%;
      width: 60%;
      height: 80%;
  }
    
    /* .wrapCity img {
      width: 100%;
      height: auto;
    } */
  /**
  @media (max-width:800px) and (min-width:350px){
          #a1{
          margin-top: 17.1%;}
  }
  
  @media (max-width:920px)and (min-width:801px){
       #a1{
          margin-top: 15.1%;}
  }
  
  @media (min-width:921px)and above{
      
       #a1{
          margin-top: 18.1%;}
  }
  }*/