Make a picture with 6 checkboxes responsive

Question

i have a picture with 6 individual checkboxes on my website. How i make this code responsive (ipads, phones, (..) )? i know how to make a normal picture responsive but the checkboxes in the picture mess me up.

.pic label {
    max-width:100%;
}
.pic{
  background: url("http://fs5.directupload.net/images/161208/alpes8ns.png") no-repeat;
  width:438px;
  height:496px;
  position: relative;
}
p {
  margin: 0em 0;
  padding: 0;
}
input[type="checkbox"] {
  display: none;
}
label {
  cursor: pointer;
}
input[type="checkbox"] + label:before {

  outline: 1px solid #color;
  content: "";
  display: inline-block;
  font: 17px/1em sans-serif;
  height: 20px;
  margin: 0 .25em 0 0;
  padding: 0;
  vertical-align: top;
  width: 30px;
}
input[type="checkbox"]:checked + label:before {
  background: url("https://picload.org/image/raallapr/ffffff-0.0.png");
  color: #23708F;
  content: "✓";
  transform: scale(2);
  text-align: center;
}
input[type="checkbox"]:checked + label:after {
  font-weight: bold;
}
.poin1{
  left: 350px;
  bottom:23px;
  position: absolute;
}
.poin2{
  left: 350px;
  bottom:99px;
  position: absolute;
}

.poin3{
  left: 350px;
  bottom:178px;
  position: absolute;
}
.poin4{
  left: 350px;
  bottom:259px;
  position: absolute;
}
.poin5{
  left: 350px;
  bottom:348px;
  position: absolute;
}
.poin6{
  left: 350px;
  bottom:423px;
  position: absolute;
}

.buttondrunter{
  left: 279px;
  bottom:-82px;
  position: absolute;
}

 <div class="pic">
    <p>
      <input type="checkbox" id="poin1" name="cb" class="poin1">
      <label for="poin1" class="poin1"></label>
    </p>
      <p>
      <input type="checkbox" id="poin2" name="cb" class="poin2">
      <label for="poin2" class="poin2"></label>
    </p>
      <p>
      <input type="checkbox" id="poin3" name="cb" class="poin3">
      <label for="poin3" class="poin3"></label>
    </p>
      <p>
      <input type="checkbox" id="poin4" name="cb" class="poin4">
      <label for="poin4" class="poin4"></label>
    </p>
      <p>
      <input type="checkbox" id="poin5" name="cb" class="poin5">
      <label for="poin5" class="poin5"></label>
    </p>
      <p>
      <input type="checkbox" id="poin6" name="cb" class="poin6">
      <label for="poin6" class="poin6"></label>

    </p>
    <p style="text-align: right;" class="buttondrunter"><a class="btn primary-button" href="#">Next</a></p>

  </div>