<h1><a href="https://designmodo.github.io/Flat-UI/">Flat UI</a> - Checkbox FIX</h1>
<h2>CSS only</h2>

<p>Do you like?</p>
<form action="#">
<p><input type="checkbox" id="test1" /><label for="test1"><span class="ui"></span>Paris</label></p>
<p><input type="checkbox" id="test2" /><label for="test2"><span class="ui"></span>London</label></p>
<p><input type="checkbox" id="test3" /><label for="test3"><span class="ui"></span>New York</label></p>
</form>

<br /><p class="txtcenter copy">a fork based on <a href="https://codepen.io/CreativeJuiz/pen/zqKtp">Flat UI - Custom checkboxes</a><br />by <a href="https://twitter.com/geoffrey_crofte">@geoffrey_crofte</a></p>

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute; 
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 95px;
  cursor: pointer;
}
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '';
  position: absolute;
}
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  left: 0; top: 0;
  width: 80px; height: 30px;
  background: #DDDDDD;
  border-radius: 6px;
  transition: background-color .2s;
}
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  width: 30px; height: 30px;
  transition: all .2s;
  border-radius: 6px 0 0 6px;
  background: #7F8C9A;
  top: 0; left: 0;
}

/* on checked */
[type="checkbox"]:checked + label:before {
  background:#34495E; 
}
[type="checkbox"]:checked + label:after {
  background: #39D2B4;
  top: 0; left: 51px;
  border-radius: 0 6px 6px 0;
}

[type="checkbox"]:checked + label .ui,
[type="checkbox"]:not(:checked) + label .ui:before,
[type="checkbox"]:checked + label .ui:after {
  position: absolute;
  left: 6px;
  width: 65px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: bold;
  line-height: 22px;
  transition: all .2s;
}

[type="checkbox"]:not(:checked) + label .ui:before {
  font-family: 'FontAwesome';
  content: "\f00d";
  left: 46px;
  margin-top: 3px;
}
[type="checkbox"]:checked + label .ui:after {
  font-family: 'FontAwesome';
  content: "\f00c";
  color: #39D2B4;
  margin-top: 3px;
  left: 12px;
}
[type="checkbox"]:focus + label:before {
  border: 0; outline: 0;
  box-sizing: border-box;
}

/* Basics */

body {
  font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
  color: #7F8C9A;
  background: #FCFDFD;
}
h1, h2 {
  margin-bottom: 5px;
  font-weight: normal;
  text-align: center;
  color:#aaa;
}
h2 {
  margin: 5px 0 2em;
  color: #1ABC9C;
}
form {
  width: 80px;
  margin: 0 auto;
}
h2 + P {
  text-align: center;
}
.txtcenter {
  margin-top: 4em;
  font-size: .9em;
  text-align: center;
  color: #aaa;
}
.copy {
 margin-top: 2em; 
}
.copy a {
 text-decoration: none;
 color: #1ABC9C;
}
h1 > a {
  color: #1ABC9C;
  text-decoration: none;
}

/* 
TIP:
No JS. Works on KEYBOARD navigation (tab + spacebar).
*/

/*
19/01/2016

UPDATE:
- icon font fix;
- focus 1px border fix.
*/