.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

input[type="checkbox"] {
    position: relative;
    width: 48vw;
    height: 16vh;
    -webkit-appearance: none;
    background: linear-gradient(0deg, #333, #000);
    outline: none;
    box-shadow: 
        0 0 0 0.4vw #353535, 
        0 0 0 0.5vw #3e3e3e,
  inset 0 0 0.1vw rgb(0, 0, 0, 1),
        0 0.5vw 2vw rgb(0, 0, 0, .5),                
  inset 0 0 1.5vw rgb(0, 0, 0, .2);
    border-radius: 8vw;
    -webkit-border-radius: 8vw;
    -moz-border-radius: 8vw;
    -ms-border-radius: 8vw;
    -o-border-radius: 8vw;
}

input:checked[type="checkbox"] {
    background: linear-gradient(0deg, #256f91, #20b7ff);
}

input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24vw;
    height: 16vh;
    background: linear-gradient(0deg, #000, #6b6b6b);
    border-radius: 8vw;
    -webkit-border-radius: 8vw;
    -moz-border-radius: 8vw;
    -ms-border-radius: 8vw;
    -o-border-radius: 8vw;
    box-shadow: 0 0 0 0.1vw #232323;
    transform: scale(.98,.96);
    -webkit-transform: scale(.98,.96);
    -moz-transform: scale(.98,.96);
    -ms-transform: scale(.98,.96);
    -o-transform: scale(.98,.96);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

input:checked[type="checkbox"]::before {
    left: 24vw; 
}

input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: calc(50% - 2vw);
    left: 15.9vw;
    width: 4vw;
    height: 6vh;
    background: linear-gradient(0deg, #6b6b6b, #000);
    border-radius: 8vw;
    -webkit-border-radius: 8vw;
    -moz-border-radius: 8vw;
    -ms-border-radius: 8vw;
    -o-border-radius: 8vw;
    box-shadow: 0 0 0 0.2vw #232323;
    transform: scale(.98, .96);
    -webkit-transform: scale(.98, .96);
    -moz-transform: scale(.98, .96);
    -ms-transform: scale(.98, .96);
    -o-transform: scale(.98, .96);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

input:checked[type="checkbox"]::after {
    left: 39.9vw;
    background: #63cdff;
    box-shadow: 0 0 5px #13b3ff,
    0 0 15px #13b3ff;
 }