main   { font-size:14px; }
.stuff { padding-top:60px; }

/* basic css */
.selection input[type=checkbox]   { display:none; }
.selection label, .selection p               { padding-left: 44px; }
.selection         { position:relative;}

/* checkbox css */
.selection label                  { cursor:pointer; color: #153557;     position: relative; }
.selection label span             { display:block; position:absolute; left: 0;  background: transparent;
  -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; transition-duration:0.3s;
}

.bigselection .selection label{
    height: 2.8em;
}

.selection label .circle          {
    margin-top: 4px;
  background: transparent;
  left:-20px;
  top:-20px;
  height:80px;
  width:80px;
  z-index: 0;
  border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;
}
.selection label .box     {
    border: 2px solid #8BC34A;
    margin-top: 4px;
    height: 24px;
    width: 24px;
    z-index:888;
    -webkit-transition-delay:0.2s; -moz-transition-delay:0.2s; transition-delay:0.2s;
    background: transparent;
}
.selection label .check         {
    margin-top: 4px;

        background: transparent;
            top: -6px;
    left: 10px;
    width: 16px;
    height: 24px;
    border: 6px solid #5bb30a;
  border-top: none;
  border-left: none;
  opacity:0; 
  z-index:888;
  -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg);
  -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; transition-delay:0.3s;
}

/* handling click events */

/* when checkbox is checked */
.selection label .circle {
  -webkit-animation   :growCircle 0.3s ease;
  -moz-animation      :growCircle 0.3s ease;
  animation           :growCircle 0.3s ease;
}
.selection input[type=checkbox]:checked ~ label .box { 
  opacity:0;
  -webkit-transform   :scale(0) rotate(-180deg);
  -moz-transform 		:scale(0) rotate(-180deg);
  transform 				:scale(0) rotate(-180deg);
}
.selection input[type=checkbox]:checked ~ label .check {
  opacity:1; 
  -webkit-transform   :scale(1) rotate(45deg);
  -moz-transform      :scale(1) rotate(45deg);
  transform           :scale(1) rotate(45deg);
}

/* bubble animation */

@-webkit-keyframes growCircle {
  0%, 100%   { -webkit-transform:scale(0); }
  70%        { background:#DDD; -webkit-transform:scale(1.25); }
}
@-moz-keyframes growCircle {
  0%, 100%   { -moz-transform:scale(0); }
  70%        { background:#DDD; -moz-transform:scale(1.25); }
}
@keyframes growCircle {
  0%, 100%   { transform:scale(0); }
  70%        { background:#DDD; transform:scale(1.25); }
}