Unwanted Dot in Checkboxs

I am having issues with an unwanted dot appearing in my checkboxes due to my CSS styling. I am unsure how to remove it or what is causing it.

Here is a link to the site it is on: [http://ift.tt/2xUHD8N]

The form below the Newsletter header is the only section of the site pertaining to the question. Notice the small dot in the top left corner of the checkboxes.

Any tips or insight on this issue would be very appreciated.

HTML Code pertaining to question:

<input type=checkbox name="coupon" id="coupon">
        <label for="coupon" class="check"><span>Include coupons</span></label>
            <br><br>
        <input type=checkbox name="magazine" id="magazine">
        <label for="magazine" class="check"><span>Include magazines</span></label>
            <br><br>
        <input type=checkbox name="certificates" id="certificates">
        <label for="certificates" class="check"><span>Include gift certificates</span></label>
            <br><br>

        <input type="submit" value="Register">
        <br><br>

CSS Code pertaining to question:

input[type=checkbox] + label {
cursor: pointer;}

label span {
vertical-align: middle;}

input[type=checkbox] {
position: absolute; 
height: 1px;
width: 1px;
vertical-align: middle;
clip: rect(0 0 1 1);}

input[type=checkbox] + label::before {
content: "\00a0"; /* non-line breaking space */
display: inline-block; 
width:12px;
height: 12px;  
text-align: center;
line-height: 1em;
font-size: 0.8em; 
margin-right: 10px;
border: 0.125em solid #680000; 
background-color: white;
vertical-align: middle;}

input[type=checkbox]:checked + label::before { 
content: "\2713"; /*checkmark */ 
color: #680000; 
background: white;}