#onePin3 {
      position: absolute;
      margin: auto;
    }

    #onePin3 .onePinCon {
      position: relative;
    }

    #onePin3 .onePinCon .onePinOne {
      width: 12px;
      height: 12px;
      background-color:#F9423A;
      border-radius: 50%;
      position: absolute;
      left: 31px;
      z-index: 99;
      top: 31px;
      cursor: pointer;
    }


    .onePinBlue2 {
      width: 1.5vw;
      height: 2vw;
      background-size: contain;
      background-image:url(../img/pin.png);
      background-repeat: no-repeat;
      left: 20px;
      z-index:10000;
      top: 85px;
      cursor: pointer;

    }


    .onePinBlue2:hover {

      z-index: 100000;
    }

    .pin {
      position: relative;
    }
    .pin:hover {
      z-index: 10000;
    }

    #onePin3 .onePinCon .onePinOne:before {
      width: 33px;
      position: absolute;
      left: -9px;
      top: -9.5px;
      height: 33px;
      content: "";
      border-radius: 50%;
      opacity: .5;
    }

    #onePin3 .onePinCon .borderOnePin {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: -webkit-box;
    }

    .boxPinShow {
      min-width: 200px;
      max-width: 100%;
      height: 47px;
      background-image: url(../img/pinbg.svg);
      display: none;
      position: relative;
      top: -130px;
      left: -14px;
    }



    .bg-pin-show {
      background-image: url(../img/pinbg.svg);
      height: 138px;
      background-size: cover;
      margin-left: -72px;
      padding: 10px;
      overflow: hidden;
      /* height: max-content; */
      text-align: center;
      z-index: -1;
      position: absolute;
      min-width: 200px;
    }

    .map .bg-pin-show span {
      word-wrap: break-word;

      font-size:14px!important;
      color: #BD1D1D!important;
      font-size: 15px!important;
      font-weight: 500!important;

    }

    .bg-pin-show h5 {
     font-size:15px;
     font-weight: bold;
     margin-bottom:0.1rem;
   }

   .bg-pin-show img {
    height: 80px;
    -o-object-fit: contain;
    object-fit: contain;
  }

  #pinImage {
    position: relative;
    display: block;
  }

  #pinImage .fadePinContainer {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:10px !important;
  }

  #pinImage .fadePinContainer .fadePinImage {
    max-width: 100%;
    width: 100%;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    position: relative;
  }

  #onePin {
    position: absolute;
    margin: auto;
    width: 100%;
  }

  #onePin .onePinCon {
    position: relative;
  }

  #onePin .onePinCon .onePinOne {
    width: 15px !important;
    height: 15px !important;
    border: 4px solid #fff !important;
    /*width: 30px;*/
    /*height: 30px;*/
    left: 30px;
    top: 30px;
    /*border: 8px solid #fff;*/
    background: var(--secondary-color);
    border-radius: 50%;
    position: absolute;
    z-index: 99;
    cursor: pointer;
  }


  #onePin .onePinCon .onePinOne:before {
    width: 15px;
    height: 15px;
    /*width: 33px;*/
    /*height: 33px;*/
    position: absolute;
    left: -9px;
    top: -9.5px;

    content: "";
    border-radius: 50%;
    opacity: .5;
  }

  #onePin .onePinCon .borderOnePin {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-animation: scaleout 1.2s infinite ease-in-out;
    animation: scaleout 1.2s infinite ease-in-out;
    background-color:white;
  }

  #onePin .onePinCon .borderOnePin2 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-animation: scaleout 1.2s infinite ease-in-out;
    animation: scaleout 1.2s infinite ease-in-out;
    background-color:white;
  }

  #onePin3 .onePinCon .borderOnePin {
    width: 30px !important;
    height: 30px !important;
    margin-left: 22px !important;
    margin-top: 22px !important;
    position: absolute;
    /*width: 60px;*/
    /*height: 60px;*/
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-animation: scaleout 1.2s infinite ease-in-out;
    animation: scaleout 1.2s infinite ease-in-out;
    background-color:white;
  }

  #onePin3 .onePinCon .borderOnePin2 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-animation: scaleout 1.2s infinite ease-in-out;
    animation: scaleout 1.2s infinite ease-in-out;
    background-color: white;
  }

  #onePin2 {
    position: absolute;
    margin: auto;
  }

  #onePin2 .onePinCon {
    position: relative;
  }

  #onePin2 .onePinCon .onePinOne {
    width: 30px;
    height: 30px;
    background: var(--secondary-color);
    border-radius: 50%;
    position: absolute;
    left: 15px;
    z-index: 99;
    top: 15px;
    border: 8px solid #fff;
    cursor: pointer;
  }

  #onePin2 .onePinCon .onePinGreen {
    width: 30px;
    height: 30px;
    background: var(--secondary-color);
    border-radius: 50%;
    position: absolute;
    left: 15px;
    z-index: 99;
    top: 15px;
    border: 8px solid #fff;
    cursor: pointer;
  }

  #onePin2 .onePinCon .onePinOne:before {
    width: 33px;
    position: absolute;
    left: -9px;
    top: -9.5px;
    height: 33px;
    content: "";
    border-radius: 50%;
    opacity: .5;
  }

  #onePin2 .onePinCon .borderOnePin {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-animation: scaleout 1.2s infinite ease-in-out;
    animation: scaleout 1.2s infinite ease-in-out;
    background-color: rgba(218, 218, 218, 0.3);
  }

  #onePin2 .onePinCon .borderOnePin2 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-animation: scaleout 1.2s infinite ease-in-out;
    animation: scaleout 1.2s infinite ease-in-out;
    background-color: rgba(218, 218, 218, 0.9);
  }

  @-webkit-keyframes scaleout {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    100% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 0;
    }
  }

  @keyframes scaleout {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    100% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 0;
    }
  }
  @media (max-width: 1199px) {
    #onePin3 .onePinCon .borderOnePin {
      width: 20px !important;
      height: 20px !important;
      margin-left: -15px !important;
      margin-top: -15px !important;
      position: absolute !important;
    }
    #onePin3 .onePinCon .onePinOne,#onePin3 .onePinCon .onePinGreen,#onePin3 .onePinCon .onePinBlue,
    #onePin3 .onePinCon .onePinPink, #onePin3 .onePinCon .onePinYellow {
      width: 13px !important;
      height: 13px !important;
      border: 2px solid #fff !important;
      position: absolute !important;
      top:-11px;
      left:-11px;

    }
    #onePin3 .onePinCon .borderOnePin2 {
      width: 20px;
      height: 20px;
    }
  }

  @media screen and (max-width: 700px) {
    #pinImage .fadePinContainer {
      width: 100%;
    }
    #Card .payArea .github-btn {
      position: relative;
      bottom: auto;
      right: auto;
      margin-top: 20px;
    }

    #Card .payArea .github-btn:active {
      transform: scale(1.1);
      box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36);
    }
  }