.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 99px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    top: 2px;
    left: 2px;
    bottom: 2px;
    border-radius: 100%;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

input:checked+.switch-slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}


/*iphones*/
@media only screen and (min-device-width: 0px) and (max-device-width: 700px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .switch {
        transform: scale(0.7);
    }
}

@media only screen and (min-device-width: 0px) and (max-device-width: 700px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .switch {
        transform: scale(0.5);
    }
}