Safari CSS Circles Sizing Issue

I have a series of checkboxes that use css to appear as circles that then animate into checkmarks when clicked.

They seem to always look the same across all browsers - except that 2 Safari browsers in my office make the circles look gigantic. I don't understand it - all the computers in our office have the latest updates and run the same version of OSX - yet only these two computers make the circles look huge while the other 6 look normal size.

This is the script in action: http://bit.ly/1GVKPNu

The is the css:

    /* basic css */
    input[type=checkbox]   { display:none; }
    label, p               { padding-left:50px; }
    #check-awesome         { position:relative; }

    /* checkbox css */
    #check-awesome         { margin: 20px; }
    label                  { cursor:pointer; }
    label span             { display:block; position:absolute; left:0;
    -webkit-transition-duration:2s; -moz-transition-duration:2s; transition-duration:2s;
    }
    label .box     {
      font-size: 2px;
      text-indent: -9999em;
      border-top: 2em solid #5555ff;
      border-right: 2em solid #5555ff;
      border-bottom: 2em solid #5555ff;
      border-left: 2em solid #5555ff;
      -webkit-transition:1s; -moz-transition:1s; transition:1s;
    }
    .box,
    .box:after {
      border-radius: 50%;
      width: 11em;
      height: 11em;
    }
    label:hover .box{
      border-top: 2em solid #f70000;
      border-right: 2em solid #ff8a8a;
      border-bottom: 2em solid #ff8a8a;
      border-left: 2em solid #f70000;
      -webkit-animation: load 0.7s infinite linear;
      animation: load 0.7s infinite linear;
    }
    label .check         {
      top: -4px;
      left: 10px;
      width: 12px;
      height: 24px;
      border:2px solid #0f9d58;
      border-top: none;
      border-left: none;
      opacity:0;
      z-index:888;
      -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg);
      -webkit-transition:0.8s; -moz-transition:0.8s; transition:0.8s;
    }

     /* handling click events */

    /* when checkbox is checked */
     input[type=checkbox]:checked ~ label .box {
      opacity:0;
      -webkit-transform   :scale(1.2) rotate(360deg);
      -moz-transform        :scale(1.2) rotate(360deg);
       transform                 :scale(1.2) rotate(360deg);
    }
    input[type=checkbox]:checked ~ label .check {
      opacity:1;
      -webkit-transform   :scale(1) rotate(45deg);
      -moz-transform      :scale(1) rotate(45deg);
      transform           :scale(1) rotate(45deg);
    }

    @-webkit-keyframes load {
       0% {
       -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
       -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
   }
    @keyframes load {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }