/*!
   css-checkbox-library v1.3.0: Pure CSS Checkboxes.
   (c) 2017 
   MIT License
   git+https://github.com/hunzaboy/CSS-Checkbox-Library.git
*/
div[class^="ckbx-style-"] input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-1 {
  font-size: 24px;
}

.ckbx-style-1 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-1 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-1 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: 1em;
  left: 0.1em;
  transition: background 0.1s 0.1s ease;
  background: #4d4d4d;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}

.ckbx-style-1 label:after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50px;
  left: 0;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #fcfff4;
  z-index: 2;
}

.ckbx-style-1 input[type=checkbox]:checked + label:before {
  background: #333;
}

.ckbx-style-1 input[type=checkbox]:checked + label:after {
  left: 1.1em;
}

.ckbx-style-2 {
  font-size: 24px;
}

.ckbx-style-2 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-2 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-2 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
  background: #4d4d4d;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}

.ckbx-style-2 label:after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  left: 0;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #fcfff4;
  z-index: 2;
}

.ckbx-style-2 input[type=checkbox]:checked + label:before {
  background: #333;
}

.ckbx-style-2 input[type=checkbox]:checked + label:after {
  left: 1.1em;
}

.ckbx-style-3 {
  font-size: 24px;
}

.ckbx-style-3 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-3 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-3 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
  border-radius: 4px;
  background: #4d4d4d;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}

.ckbx-style-3 label:after {
  content: '';
  position: absolute;
  width: .6em;
  height: .6em;
  left: .2em;
  top: .2em;
  border-radius: 4px;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #fcfff4;
  z-index: 2;
}

.ckbx-style-3 input[type=checkbox]:checked + label:before {
  background: #333;
}

.ckbx-style-3 input[type=checkbox]:checked + label:after {
  left: 1.1em;
}

.ckbx-style-4 {
  font-size: 24px;
}

.ckbx-style-4 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-4 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-4 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
  border-radius: 4px;
  background: #4d4d4d;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}

.ckbx-style-4 label:after {
  content: '';
  position: absolute;
  width: .6em;
  height: .6em;
  left: .2em;
  top: .2em;
  border-radius: 100%;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #fcfff4;
  z-index: 2;
}

.ckbx-style-4 input[type=checkbox]:checked + label:before {
  background: #333;
}

.ckbx-style-4 input[type=checkbox]:checked + label:after {
  left: 1.1em;
}

.ckbx-style-5 {
  font-size: 24px;
}

.ckbx-style-5 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-5 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-5 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: .5em;
  left: 0.1em;
  top: .25em;
  transition: background 0.1s 0.1s ease;
  background: #4d4d4d;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}

.ckbx-style-5 label:after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50px;
  left: 0;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #fcfff4;
  z-index: 2;
}

.ckbx-style-5 input[type=checkbox]:checked + label:before {
  background: #333;
}

.ckbx-style-5 input[type=checkbox]:checked + label:after {
  left: 1.1em;
}

.ckbx-style-6 {
  font-size: 24px;
}

.ckbx-style-6 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-6 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-6 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: 1em;
  left: 0.1em;
  transition: background 0.1s 0.1s ease;
  background: #4d4d4d;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}

.ckbx-style-6 label:after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50px;
  left: -.1em;
  transition: all 0.2s ease;
  box-shadow: 0 0 0 5px #fcfff4 inset;
  background: #4d4d4d;
  z-index: 2;
}

.ckbx-style-6 input[type=checkbox]:checked + label:before {
  background: #333;
}

.ckbx-style-6 input[type=checkbox]:checked + label:after {
  left: 1.1em;
  background: #333;
}

.ckbx-style-7 {
  font-size: 24px;
}

.ckbx-style-7 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-7 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-7 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: 1em;
  left: 0.1em;
  transition: background 0.1s 0.1s ease;
  background: #4d4d4d;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}

.ckbx-style-7 label:after {
  content: '';
  position: absolute;
  width: .8em;
  height: .8em;
  border-radius: 100%;
  left: .2em;
  top: .1em;
  transition: all 0.2s ease;
  box-shadow: 0 0 0 5px #fcfff4 inset;
  background: #4d4d4d;
  z-index: 2;
  animation: switch-off .3s ease-out;
}

.ckbx-style-7 input[type=checkbox]:checked + label:before {
  background: #333;
}

.ckbx-style-7 input[type=checkbox]:checked + label:after {
  left: 1.2em;
  background: #333;
  animation: switch-on .3s ease-out;
}

.ckbx-style-8 {
  font-size: 24px;
}

.ckbx-style-8 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-8 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-8 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: 1em;
  left: 0.1em;
  transition: background 0.1s ease;
  background: #F25F5C;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(171, 66, 63, 0.5);
}

.ckbx-style-8 label:after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50px;
  left: 0;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #fcfff4;
  animation: switch-off .2s ease-out;
  z-index: 2;
}

.ckbx-style-8 input[type=checkbox]:checked + label:before {
  background: #70C1B3;
  box-shadow: inset 0px 1px 1px rgba(84, 152, 140, 0.5);
}

.ckbx-style-8 input[type=checkbox]:checked + label:after {
  animation: switch-on .2s ease-out;
  left: 1.1em;
}

.ckbx-style-9 {
  width: 3em !important;
  font-size: 24px;
  position: relative;
}

.ckbx-style-9:before, .ckbx-style-9:after {
  position: absolute;
  font-size: .6em;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.ckbx-style-9:before {
  content: 'ON';
  left: 0;
  z-index: 1;
  left: 0.4em;
  top: .2em;
}

.ckbx-style-9:after {
  content: 'OFF';
  right: .4em;
  top: .2em;
}

.ckbx-style-9 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-9 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-9 label:before {
  content: '';
  position: absolute;
  width: 3em;
  height: 1em;
  transition: background 0.1s ease;
  background: #F25F5C;
  box-shadow: inset 0px 1px 1px rgba(171, 66, 63, 0.5);
}

.ckbx-style-9 label:after {
  content: '';
  position: absolute;
  width: 1.5em;
  height: 1em;
  left: 0;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #fcfff4;
  z-index: 2;
}

.ckbx-style-9 input[type=checkbox]:checked + label:before {
  background: #70C1B3;
  box-shadow: inset 0px 1px 1px rgba(84, 152, 140, 0.5);
}

.ckbx-style-9 input[type=checkbox]:checked + label:after {
  left: 1.5em;
}

.ckbx-style-10 {
  font-size: 24px;
}

.ckbx-style-10 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-10 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-10 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: .5em;
  left: 0.1em;
  top: .25em;
  transition: background 0.1s 0.1s ease;
  background: #4d4d4d;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}

.ckbx-style-10 label:after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  left: 0;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #fcfff4;
  z-index: 2;
}

.ckbx-style-10 input[type=checkbox]:checked + label:before {
  background: #333;
}

.ckbx-style-10 input[type=checkbox]:checked + label:after {
  left: 1.1em;
}

.ckbx-style-11 {
  font-size: 24px;
}

.ckbx-style-11 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-11 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-11 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: .5em;
  left: 0.1em;
  top: .25em;
  transition: background 0.1s 0.1s ease;
  background: #F25F5C;
  border-radius: 50px;
}

.ckbx-style-11 label:after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  left: 0;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #F25F5C;
  border-radius: 100%;
  z-index: 2;
  animation: switch-off .4s ease-out forwards;
}

.ckbx-style-11 input[type=checkbox]:checked + label:before {
  background: #70C1B3;
}

.ckbx-style-11 input[type=checkbox]:checked + label:after {
  left: 1.1em;
  background: #70C1B3;
  animation: switch-on .4s ease-out forwards;
}

.ckbx-style-12 {
  font-size: 24px;
}

.ckbx-style-12 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-12 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-12 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: .5em;
  left: 0.1em;
  top: .25em;
  transition: background 0.1s 0.1s ease;
  background: #F25F5C;
}

.ckbx-style-12 label:after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  left: 0;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #F25F5C;
  z-index: 2;
  animation: switch-off .4s ease-out forwards;
}

.ckbx-style-12 input[type=checkbox]:checked + label:before {
  background: #70C1B3;
}

.ckbx-style-12 input[type=checkbox]:checked + label:after {
  left: 1.1em;
  background: #70C1B3;
  animation: switch-on .4s ease-out forwards;
}

.ckbx-style-13 {
  font-size: 24px;
}

.ckbx-style-13 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-13 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-13 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: 1em;
  left: 0.1em;
  transition: background 0.1s 0.1s ease;
  background: #F25F5C;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(171, 66, 63, 0.5);
}

.ckbx-style-13 label:after {
  content: '';
  position: absolute;
  width: .8em;
  height: .8em;
  border-radius: 100%;
  left: .2em;
  top: .1em;
  transition: all 0.2s ease;
  box-shadow: 0 0 0 5px #fcfff4 inset;
  background: #F25F5C;
  z-index: 2;
  animation: switch-off .3s ease-out;
}

.ckbx-style-13 input[type=checkbox]:checked + label:before {
  background: #70C1B3;
  box-shadow: inset 0px 1px 1px rgba(84, 152, 140, 0.5);
}

.ckbx-style-13 input[type=checkbox]:checked + label:after {
  left: 1.2em;
  background: #70C1B3;
  animation: switch-on .3s ease-out;
}

.ckbx-style-14 {
  font-size: 24px;
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
}

.ckbx-style-14 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-14 label {
  width: 4em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
  background: #333;
}

.ckbx-style-14 label:before {
  content: 'OFF';
  position: absolute;
  width: 50%;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: .6em;
  line-height: 1.6;
  transition: all 0.2s ease;
  background: #F25F5C;
  left: 50%;
  bottom: 0;
  top: 0;
  border-radius: 4px;
}

.ckbx-style-14 label:after {
  content: 'ON';
  position: absolute;
  width: 50%;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  top: 0;
  bottom: 0;
  font-weight: bold;
  font-size: .6em;
  border-radius: 4px;
  transition: all 0.2s ease;
  background: #333;
}

.ckbx-style-14 input[type=checkbox]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

.ckbx-style-14 input[type=checkbox]:checked + label:after {
  background: #70C1B3;
  color: #fff;
}

.ckbx-style-15 {
  font-size: 24px;
}

.ckbx-style-15 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-15 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-15 label:before {
  content: '\2714\2718';
  position: absolute;
  width: 2em;
  color: #fff;
  font-size: .8em;
  top: 0;
  bottom: 0;
  padding-left: .25em;
  padding-right: .25em;
  left: 0.1em;
  transition: background 0.1s ease;
  background: #F25F5C;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(171, 66, 63, 0.5);
  letter-spacing: -1px \0/IE89;
}

.ckbx-style-15 label:after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50px;
  left: 0;
  left: 0.05em \0/IE89;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #fcfff4;
  animation: switch-off .2s ease-out;
  z-index: 2;
}

.ckbx-style-15 input[type=checkbox]:checked + label:before {
  background: #70C1B3;
  box-shadow: inset 0px 1px 1px rgba(84, 152, 140, 0.5);
}

.ckbx-style-15 input[type=checkbox]:checked + label:after {
  animation: switch-on .2s ease-out;
  left: 1.1em;
}

@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .ckbx-style-15 label:before {
    letter-spacing: 6px;
  }
}

@-moz-document url-prefix() {
  .ckbx-style-15 label:before {
    letter-spacing: 6px;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .ckbx-style-15 label:before {
    letter-spacing: -2px;
  }
  .ckbx-style-15 label:after {
    left: 0.05em;
  }
}

@keyframes switch-on {
  50% {
    transform: scaleX(1.3);
  }
}

@keyframes switch-off {
  50% {
    transform: scaleX(1.3);
  }
}

.ckbx-style-16 {
  font-size: 24px;
}

.ckbx-style-16 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-16 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-16 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
  border-radius: 4px;
  background: #F25F5C;
}

.ckbx-style-16 label:after {
  content: '';
  position: absolute;
  width: .6em;
  height: .6em;
  left: .2em;
  top: .2em;
  border-radius: 4px;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #fcfff4;
  z-index: 2;
}

.ckbx-style-16 input[type=checkbox]:checked + label:before {
  background: #70C1B3;
}

.ckbx-style-16 input[type=checkbox]:checked + label:after {
  left: 1.1em;
}

.ckbx-style-17 {
  font-size: 24px;
}

.ckbx-style-17 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-style-17 label {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.ckbx-style-17 label:before {
  content: '';
  position: absolute;
  width: 2em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
  border-radius: 4px;
  background: #4d4d4d;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}

.ckbx-style-17 label:after {
  content: '';
  position: absolute;
  width: .6em;
  height: .6em;
  left: .2em;
  top: .2em;
  border-radius: 4px;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #F25F5C;
  z-index: 2;
}

.ckbx-style-17 input[type=checkbox]:checked + label:before {
  background: #333;
}

.ckbx-style-17 input[type=checkbox]:checked + label:after {
  left: 1.1em;
  background: #70C1B3;
}

.ckbx-circle-1 {
  font-size: 24px;
}

.ckbx-circle-1 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-circle-1 label {
  position: relative;
  cursor: pointer;
  display: block;
  width: 1em;
  height: 1em;
}

.ckbx-circle-1 label:before {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
  background: #333;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  border-radius: 100%;
}

.ckbx-circle-1 label:after {
  content: '';
  position: absolute;
  width: .6em;
  height: .6em;
  border-radius: 100%;
  left: .2em;
  top: .2em;
  transition: all 0.2s ease;
  background: #F25F5C;
  z-index: 2;
}

.ckbx-circle-1 input[type=checkbox]:checked + label:after {
  background: #70C1B3;
}

.ckbx-circle-2 {
  font-size: 24px;
}

.ckbx-circle-2 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-circle-2 label {
  position: relative;
  cursor: pointer;
  display: block;
  width: 1em;
  height: 1em;
}

.ckbx-circle-2 label:before {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
  background: #333;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  border-radius: 100%;
}

.ckbx-circle-2 label:after {
  content: '';
  position: absolute;
  width: .6em;
  height: .6em;
  border-radius: 100%;
  left: .2em;
  top: .2em;
  transition: all 0.2s ease;
  background: #F25F5C;
  animation: switch-off-circle .2s ease-out;
}

.ckbx-circle-2 input[type=checkbox]:checked + label:after {
  background: #70C1B3;
  width: 1em;
  height: 1em;
  top: 0;
  left: 0;
  animation: switch-on-circle .2s ease-out;
}

.ckbx-circle-3 {
  font-size: 24px;
}

.ckbx-circle-3 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-circle-3 label {
  position: relative;
  cursor: pointer;
  display: block;
  width: 1em;
  height: 1em;
}

.ckbx-circle-3 label:before {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
  background: #fcfff4;
  border-radius: 100%;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}

.ckbx-circle-3 label:after {
  content: '';
  position: absolute;
  width: .6em;
  height: .6em;
  border-radius: 100%;
  left: .1em;
  top: .1em;
  transition: all 0.2s ease;
  background: #F25F5C;
  border: 0.1em solid #fcfff4;
  z-index: 2;
}

.ckbx-circle-3 input[type=checkbox]:checked + label:after {
  background: #70C1B3;
}

@keyframes switch-on-circle {
  50% {
    transform: scale(1.3);
  }
}

@keyframes switch-off-circle {
  50% {
    transform: scale(0.3);
  }
}

.ckbx-circle-4 {
  font-size: 24px;
}

.ckbx-circle-4 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-circle-4 label {
  position: relative;
  cursor: pointer;
  display: block;
  width: 1em;
  height: 1em;
}

.ckbx-circle-4 label:before {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
  border-radius: 100%;
}

.ckbx-circle-4 label:after {
  content: '';
  position: absolute;
  width: .6em;
  height: .6em;
  border-radius: 100%;
  transition: all 0.2s ease;
  background: transparent;
  border: 0.2em solid #F25F5C;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  animation: stretchback .2s ease-out;
}

.ckbx-circle-4 input[type=checkbox]:checked + label:after {
  border-color: #70C1B3;
  animation: stretch .2s ease-out;
}

@keyframes stretch {
  50% {
    transform: scaleX(0.3);
  }
  100% {
    transform: scaleX(1.3);
  }
}

@keyframes stretchback {
  50% {
    transform: scaleX(0.3);
  }
  100% {
    transform: scaleX(1.3);
  }
}

.ckbx-square-1 {
  font-size: 24px;
}

.ckbx-square-1 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-square-1 label {
  position: relative;
  cursor: pointer;
  display: block;
  width: 1em;
  height: 1em;
}

.ckbx-square-1 label:before {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
  background: #333;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}

.ckbx-square-1 label:after {
  content: '';
  position: absolute;
  width: .6em;
  height: .6em;
  left: .2em;
  top: .2em;
  transition: all 0.2s ease;
  background: #F25F5C;
  z-index: 2;
}

.ckbx-square-1 input[type=checkbox]:checked + label:after {
  background: #70C1B3;
}

.ckbx-square-2 {
  font-size: 24px;
}

.ckbx-square-2 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-square-2 label {
  position: relative;
  cursor: pointer;
  display: block;
  width: 1em;
  height: 1em;
}

.ckbx-square-2 label:before {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
  background: #333;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}

.ckbx-square-2 label:after {
  content: '';
  position: absolute;
  width: .6em;
  height: .6em;
  left: .2em;
  top: .2em;
  transition: all 0.2s ease;
  background: #F25F5C;
  animation: switch-off-circle .2s ease-out;
}

.ckbx-square-2 input[type=checkbox]:checked + label:after {
  background: #70C1B3;
  width: 1em;
  height: 1em;
  top: 0;
  left: 0;
  animation: switch-on-circle .2s ease-out;
}

.ckbx-square-3 {
  font-size: 24px;
}

.ckbx-square-3 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-square-3 label {
  position: relative;
  cursor: pointer;
  display: block;
  width: 1em;
  height: 1em;
}

.ckbx-square-3 label:before {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
  background: #fcfff4;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}

.ckbx-square-3 label:after {
  content: '';
  position: absolute;
  width: .6em;
  height: .6em;
  left: .1em;
  top: .1em;
  transition: all 0.2s ease;
  background: #F25F5C;
  border: 0.1em solid #fcfff4;
  z-index: 2;
}

.ckbx-square-3 input[type=checkbox]:checked + label:after {
  background: #70C1B3;
}

.ckbx-square-4 {
  font-size: 24px;
}

.ckbx-square-4 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.ckbx-square-4 label {
  position: relative;
  cursor: pointer;
  display: block;
  width: 1em;
  height: 1em;
}

.ckbx-square-4 label:before {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  transition: background 0.1s 0.1s ease;
}

.ckbx-square-4 label:after {
  content: '';
  position: absolute;
  width: .6em;
  height: .6em;
  transition: all 0.2s ease;
  background: transparent;
  border: 0.2em solid #F25F5C;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  animation: stretchback .2s ease-out;
}

.ckbx-square-4 input[type=checkbox]:checked + label:after {
  border-color: #70C1B3;
  animation: stretch .2s ease-out;
}

[class^=ckbx].ckbx-small {
  font-size: .5em;
}

[class^=ckbx].ckbx-large {
  font-size: 1.5em;
}

[class^=ckbx].ckbx-xlarge {
  font-size: 2.5em;
}