*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.switch-title{
    color:#eee;
    padding:30px;
    font-size:28px;
    text-align:center;
}

.switch-wrap{
    margin:auto;
    width: 100%;
    padding:10px;
    text-align:center;
    background:#383e47;
}
.switch-wrap-menu{
    margin:auto;
    padding:10px;
    text-align:center;
}
.switch{
    display:none;
}
.switch + label{position:relative;height:35px;line-height:35px;padding-left:80px;transition:all .4s ease-in-out 0s}
.switch + label:after,
.switch + label:before {
    top:50%;
    content:'';
    position: absolute;
    transition:inherit;
}
.switch + label:after {
    left:0;
    width:70px;
    height:35px;
    margin-top:-17.5px;
    background:#212121;
    border-radius:35px;
    border:3px solid #212121;
}

.switch + label:before{
    top:50%;
    left:7px;
    z-index:1;
    width:23px;
    content:'';
    height:23px;
    border-radius:50%;
    position:absolute;
    margin-top:-11.5px;
    transition:inherit;
    background-color:#737373;
}
.switch:checked + label:after{
    background:#212121;
    border-color:#212121;
    box-shadow:0 1px 1px rgba(206,206,206,.5);
}
.switch:checked + label:before{
    left:40px;
    background:#cecece;
    border-color:transparent;
    box-shadow:0 3px 3px #000;
}