html {
  height: 100%; // for styling only
}

body {
  background-color: #1790b5; // for styling only
  height: 100%; // for styling only
  font-family: 'Open Sans', sans-serif;
}

.exp {
  display: table; // to center the item
  width: 100%;
  height: 100%;
  
  .checkbox {
    display: table-cell; // to center the item
    width: 100%;
    height: 100%;
    vertical-align: middle; // to center the item
    text-align: center; // to center the item
  }
}

label {
    display: inline-block; // to make it easier to click
    color: #fff;
    cursor: pointer;
    position: relative; // important
  
    // Now we'll create the checkbox object
  
    span {
      display: inline-block;
      position: relative;
      background-color: transparent;
      width: 25px;
      height: 25px;
      transform-origin: center;
      border: 2px solid #fff;
      border-radius: 50%;
      vertical-align: -6px;
      margin-right: 10px;
      transition: background-color 150ms 200ms, transform 350ms cubic-bezier(.78,-1.22,.17,1.89); // custom ease effect for bouncy animation
  
  // Now we'll create the "tick" using pseudo elements - those will be basically two lines that will be rotated to form the "tick"
  
    &:before {
      content: "";
      width: 0px;
      height: 2px;
      border-radius: 2px; // so that the tick has nice rounded look
      background: #fff;
      position: absolute;
      transform: rotate(45deg);
      top: 13px; // you'll need to experiment with placement depending on the dimensions you've chosen
      left: 9px; // you'll need to experiment with placement depending on the dimensions you've chosen
      transition: width 50ms ease 50ms;
      transform-origin: 0% 0%;
    }
  
    &:after {
      content: "";
      width: 0;
      height: 2px;
      border-radius: 2px; // so that the tick has nice rounded look
      background: #fff;
      position: absolute;
      transform: rotate(305deg);
      top: 16px; // you'll need to experiment with placement depending on the dimensions you've chosen
      left: 10px; // you'll need to experiment with placement depending on the dimensions you've chosen
      transition: width 50ms ease;
      transform-origin: 0% 0%;
    }
  }
  // Time to add some life to it
  
  &:hover {
    span {
      &:before {
        width: 5px;
        transition: width 100ms ease;
      }
      
      &:after {
        width: 10px;
        transition: width 150ms ease 100ms;
      }
    }
  }
}

input[type="checkbox"] {
    display: none; // hide the system checkbox
  
  // Let's add some effects after the checkbox is checked
  
  &:checked {
    + label {
      span {
        background-color: #fff;
        transform: scale(1.25); // enlarge the box
        
        &:after {
          width: 10px;
          background: #1790b5;
          transition: width 150ms ease 100ms; // enlarge the tick
        }
        
        &:before {
          width: 5px;
          background: #1790b5;
          transition: width 150ms ease 100ms; // enlarge the tick
        }
      }
      
      &:hover { // copy the states for onMouseOver to avoid flickering
        span {
          background-color: #fff;
          transform: scale(1.25); // enlarge the box

          &:after {
            width: 10px;
            background: #1790b5;
            transition: width 150ms ease 100ms; // enlarge the tick
          }

          &:before {
            width: 5px;
            background: #1790b5;
            transition: width 150ms ease 100ms; // enlarge the tick
          }
        }  
      }
    }
  }
}