html{
background:#ff6461}

body{
position:absolute;
left:50%;
top:50%;
height:214px;
width:336px;
margin:-107px -168px}

input{
visibility:hidden}

label{
position:absolute;
left:0;
right:228px;
background:white;
cursor:pointer;
-webkit-transition:left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;
-moz-transition:left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;
-o-transition:left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;
transition:left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s}

#li0 + label{
top:14px;
bottom:164px}

#li1 + label{
top:64px;
bottom:114px}

#li2 + label{
top:114px;
bottom:64px}

#li3 + label{
top: 164px;
bottom:14px}

:checked + label{
left: 122px;
right:0;
top:14px !important;
bottom:14px !important;
-webkit-transition:left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;
-moz-transition:left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;
-o-transition:left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;
transition:left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s}