Checkbox style : demo 2

                        .checkbox{
                            background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                            width: 28px;
                            height: 28px;
                            box-shadow: inset 0px 1px 1px #fff, 0px 1px 3px rgba(0, 0, 0, 0.5);
                            margin: 0 auto;
                            position: relative;
                        }
                        .checkbox label{
                            background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
                            width: 20px;
                            height: 20px;
                            box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px #fff;
                            position: absolute;
                            top: 4px;
                            left: 4px;
                        }
                        .checkbox label:after{
                            content: "";
                            height: 7.5px;
                            width: 13px;
                            border-left: 3px solid #fff;
                            border-bottom: 3px solid #fff;
                            transform: rotate(-45deg);
                            position: absolute;
                            top: 4px;
                            left: 3px;
                            opacity: 0;
                        }
                        .checkbox input[type="checkbox"]:checked+label:after{ opacity: 1; }
                        .checkbox input[type=checkbox]{
                            margin: 0;
                            visibility: hidden;
                            left: 7px;
                            top: 7px;
                        }
                        @media only screen and (max-width:767px){
                            .checkbox{ margin: 0 0 20px; }
                        }