.checkbox{
  display: inline-block;
  vertical-align: middle;
  cursor: pointer; 
  user-select:none;
  input{
    display: none;
    &+span{
      display: inline-block; 
      position: relative;
      padding-left: 20px;
      &:before{
        content: '';
        display: block; 
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: 3px;
        margin-right: 5px;
        width: 16px;
        height: 16px;
        border: 1px solid #ccc;
        background: #fff;
      }
      &:after{
        content: '';
        display: block; 
        width: 8px;
        height: 10px;
        border-bottom: 2px solid #222;
        border-right: 3px solid #222;
        position: absolute;
        top: 2px;
        left: 4px;
        opacity: 0;
        transform: scale(10,10) rotate(45deg); 
        transition: all .2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
      }
    }
    &:checked+span:after{
      opacity: 1;
      transform: scale(1,1) rotate(45deg);
    }
  }
}
/* END CHECKBOX STYLE */


html{
  min-height: 100%; 
  background: #4FCB9C;
  box-shadow: inset 0px 7px 1000px rgba(0,0,0,.3);
  *,
  *:before,
  *:after{
    box-sizing: border-box;
  }  
}
body{   
  width: 400px; 
  height: 100px;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  padding: 40px;
  text-align: center;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0px 13px 10px -13px #000, 0px 7px 10px rgba(0,0,0,.1); 
}