/* Full Source: https://github.com/tamino-martinius/ui-snippets-checkboxes/blob/master/src/index.css */

:root {
  --theme-light--color-bg: #f9fafa;
  --theme-light--color-font: #42494f;
  --theme-light--color-border: rgba(0, 0, 0, .08627);
  --theme-light--color-default: #fff;
  --theme-light--color-primary: #6bbaf0;
  --theme-light--color-secondary: #89949b;
  --theme-light--color-success: #a0bf69;
  --theme-light--color-danger: #cc6164;
  --theme-light--color-line-default: #42494f;
  --theme-light--color-line-primary: #fff;
  --theme-light--color-line-secondary: #fff;
  --theme-light--color-line-success: #fff;
  --theme-light--color-line-danger: #fff;
  --theme-dark--color-bg: #42494f;
  --theme-dark--color-font: #f9fafa;
  --theme-dark--color-border: hsla(0, 0%, 100%, .08627);
  --theme-dark--color-default: #3a3f47;
  --theme-dark--color-primary: #6bbaf0;
  --theme-dark--color-primary: var(--theme-light--color-primary);
  --theme-dark--color-secondary: #22292f;
  --theme-dark--color-success: #a0bf69;
  --theme-dark--color-success: var(--theme-light--color-success);
  --theme-dark--color-danger: #cc6164;
  --theme-dark--color-danger: var(--theme-light--color-danger);
  --theme-dark--color-line-default: #f9fafa;
  --theme-dark--color-line-primary: #fff;
  --theme-dark--color-line-secondary: #fff;
  --theme-dark--color-line-success: #fff;
  --theme-dark--color-line-danger: #fff;
  --input-color: #fff;
  --input-color: var(--theme-light--color-default);
  --input-color--bg: #f9fafa;
  --input-color--bg: var(--theme-light--color-bg);
  --input-color--font: #42494f;
  --input-color--font: var(--theme-light--color-font);
  --input-color--border: rgba(0, 0, 0, .08627);
  --input-color--border: var(--theme-light--color-border);
  --input-size--large: 13px;
  --input-size--default: 11px;
  --input-size--small: 9px;
  --input-size--xsmall: 8px;
  --input-size: 11px;
  --input-size: var(--input-size--default)
}

.theme-light {
  --input-color: #fff;
  --input-color: var(--theme-light--color-default);
  --input-color--line: #42494f;
  --input-color--line: var(--theme-light--color-line-default);
  --input-color--default: #fff;
  --input-color--default: var(--theme-light--color-default);
  --input-color--bg: #f9fafa;
  --input-color--bg: var(--theme-light--color-bg);
  --input-color--font: #42494f;
  --input-color--font: var(--theme-light--color-font);
  --input-color--border: rgba(0, 0, 0, .08627);
  --input-color--border: var(--theme-light--color-border)
}

.theme-light .input--primary {
  --input-color: #6bbaf0;
  --input-color: var(--theme-light--color-primary);
  --input-color--line: #fff;
  --input-color--line: var(--theme-light--color-line-primary)
}

.theme-light .input--secondary {
  --input-color: #89949b;
  --input-color: var(--theme-light--color-secondary);
  --input-color--line: #fff;
  --input-color--line: var(--theme-light--color-line-secondary)
}

.theme-light .input--success {
  --input-color: #a0bf69;
  --input-color: var(--theme-light--color-success);
  --input-color--line: #fff;
  --input-color--line: var(--theme-light--color-line-success)
}

.theme-light .input--danger {
  --input-color: #cc6164;
  --input-color: var(--theme-light--color-danger);
  --input-color--line: #fff;
  --input-color--line: var(--theme-light--color-line-danger)
}

.theme-dark {
  --input-color: #3a3f47;
  --input-color: var(--theme-dark--color-default);
  --input-color--line: #f9fafa;
  --input-color--line: var(--theme-dark--color-line-default);
  --input-color--default: #3a3f47;
  --input-color--default: var(--theme-dark--color-default);
  --input-color--bg: #42494f;
  --input-color--bg: var(--theme-dark--color-bg);
  --input-color--font: #f9fafa;
  --input-color--font: var(--theme-dark--color-font);
  --input-color--border: hsla(0, 0%, 100%, .08627);
  --input-color--border: var(--theme-dark--color-border)
}

.theme-dark .input--primary {
  --input-color: #6bbaf0;
  --input-color: var(--theme-dark--color-primary);
  --input-color--line: #fff;
  --input-color--line: var(--theme-dark--color-line-primary)
}

.theme-dark .input--secondary {
  --input-color: #22292f;
  --input-color: var(--theme-dark--color-secondary);
  --input-color--line: #fff;
  --input-color--line: var(--theme-dark--color-line-secondary)
}

.theme-dark .input--success {
  --input-color: #a0bf69;
  --input-color: var(--theme-dark--color-success);
  --input-color--line: #fff;
  --input-color--line: var(--theme-dark--color-line-success)
}

.theme-dark .input--danger {
  --input-color: #cc6164;
  --input-color: var(--theme-dark--color-danger);
  --input-color--line: #fff;
  --input-color--line: var(--theme-dark--color-line-danger)
}

.input {
  display: inline;
  font-size: 11px;
  font-size: var(--input-size--default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #42494f;
  color: var(--input-color--font);
  --input-size: 11px;
  --input-size: var(--input-size--default)
}

.input.input--large {
  --input-size: 13px;
  --input-size: var(--input-size--large)
}

.input.input--small {
  --input-size: 9px;
  --input-size: var(--input-size--small)
}

.input.input--xsmall {
  --input-size: 8px;
  --input-size: var(--input-size--xsmall)
}

.input label {
  text-align: left
}

.input__box {
  display: inline-block;
  width: 11px;
  width: var(--input-size);
  height: 11px;
  height: var(--input-size);
  margin-right: 7px;
  margin-right: calc(18px - var(--input-size));
  background-color: var(--input-color--default);
  border-color: rgba(0, 0, 0, .08627);
  border: 1px solid var(--input-color--border);
  vertical-align: -2.75px;
  vertical-align: calc((var(--input-size--default) - var(--input-size)) / 2 - var(--input-size--default) / 4);
  -webkit-transition: background-color .1s ease;
  transition: background-color .1s ease;
  -webkit-transition-delay: .05s;
  transition-delay: .05s
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg)
  }
  40% {
    -webkit-transform: scale(1.1, .9) rotate(5deg);
    transform: scale(1.1, .9) rotate(5deg)
  }
  70% {
    -webkit-transform: scale(.9, 1.1) rotate(-3deg);
    transform: scale(.9, 1.1) rotate(-3deg)
  }
  80% {
    -webkit-transform: scale(1.05, .95) rotate(1deg);
    transform: scale(1.05, .95) rotate(1deg)
  }
  to {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg)
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg)
  }
  40% {
    -webkit-transform: scale(1.1, .9) rotate(5deg);
    transform: scale(1.1, .9) rotate(5deg)
  }
  70% {
    -webkit-transform: scale(.9, 1.1) rotate(-3deg);
    transform: scale(.9, 1.1) rotate(-3deg)
  }
  80% {
    -webkit-transform: scale(1.05, .95) rotate(1deg);
    transform: scale(1.05, .95) rotate(1deg)
  }
  to {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg)
  }
}

.preload * {
  -webkit-animation-duration: 0s !important;
  animation-duration: 0s !important
}

.input--checkbox {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.input--checkbox input {
  display: none
}

.input--checkbox .input__box {
  border-radius: 2.926px;
  border-radius: calc(var(--input-size) * .266);
  opacity: .9
}

.input--checkbox .input__box:before {
  -webkit-transition: width .05s linear;
  transition: width .05s linear;
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
  --rotation: 45deg;
  --translate-top: 4px;
  --translate-left: 3px
}

.input--checkbox .input__box:after {
  -webkit-transition: width .1s linear;
  transition: width .1s linear;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  --rotation: -45deg;
  --translate-top: -2px;
  --translate-left: 8px
}

.input--checkbox .input__box:after,
.input--checkbox .input__box:before {
  content: "";
  position: absolute;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  width: 0;
  border-bottom-color: var(--input-color--line);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  -webkit-transform: rotate(var(--rotation)) translateX(var(--translate-top)) translateY(var(--translate-left));
  transform: rotate(var(--rotation)) translateX(var(--translate-top)) translateY(var(--translate-left))
}

.input--checkbox label {
  cursor: pointer
}

.input--checkbox label:hover .input__box {
  opacity: 1
}

.input--checkbox.input--large .input__box:before {
  --translate-top: 5px
}

.input--checkbox.input--large .input__box:after {
  --translate-left: 10px
}

.input--checkbox.input--small .input__box:before {
  --translate-top: 4px
}

.input--checkbox.input--small .input__box:after {
  --translate-left: 7px
}

.input--checkbox.input--xsmall .input__box:before {
  --translate-top: 3px;
  --translate-left: 2px
}

.input--checkbox.input--xsmall .input__box:after {
  --translate-left: 5.5px
}

.input--checkbox input:checked+.input__box {
  background-color: #fff;
  background-color: var(--input-color);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-animation-name: wobble;
  animation-name: wobble;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease
}

.input--checkbox input:checked+.input__box:before {
  width: 3.5px;
  width: calc(var(--input-size) / 2 - 2px);
  -webkit-transition-delay: 0s;
  transition-delay: 0s
}

.input--checkbox input:checked+.input__box:after {
  width: 7.5px;
  width: calc(var(--input-size) / 2 + 2px);
  -webkit-transition-delay: .05s;
  transition-delay: .05s
}

.input--checkbox input:disabled+.input__box,
.input--checkbox input:disabled+.input__box+span {
  opacity: .5
}

.input--checkbox.input--cross .input__box:before {
  --translate-top: 2.25px;
  --translate-left: 0px
}

.input--checkbox.input--cross .input__box:after {
  --translate-top: -4px;
  --translate-left: 7.25px
}

.input--checkbox.input--cross.input--large .input__box:before {
  --translate-top: 3.25px;
  --translate-left: 0px
}

.input--checkbox.input--cross.input--large .input__box:after {
  --translate-top: -5px;
  --translate-left: 9.25px
}

.input--checkbox.input--cross.input--small .input__box:before {
  --translate-top: 2.25px;
  --translate-left: 0px
}

.input--checkbox.input--cross.input--small .input__box:after {
  --translate-top: -3px;
  --translate-left: 6.25px
}

.input--checkbox.input--cross.input--xsmall .input__box:before {
  --translate-top: 2.25px;
  --translate-left: 0px
}

.input--checkbox.input--cross.input--xsmall .input__box:after {
  --translate-top: -2.5px;
  --translate-left: 5.75px
}

.input--checkbox.input--cross input:checked+.input__box:after,
.input--checkbox.input--cross input:checked+.input__box:before {
  width: 9px;
  width: calc(var(--input-size) - 2px)
}

.input--checkbox.input--cross input:checked+.input__box:before {
  -webkit-transition-delay: .15s;
  transition-delay: .15s
}

body,
html {
  padding: 0;
  margin: 0
}

article {
  font-family: Gotham Rounded SSm A, Gotham Rounded SSm B, Gotham Rounded A, Gotham Rounded B, proxima-nova-soft, Verdana, Geneva, sans-serif;
  color: #42494f;
  color: var(--input-color--font);
  background: #f9fafa;
  background: var(--input-color--bg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 50%;
  float: left;
  text-align: center;
  height: 100vh
}

article p {
  margin-top: 32px;
  margin-top: 2rem
}

article span {
  display: inline-block;
  width: 80px
}

article .row {
  margin: 15px 0
}


.dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
.dribbble img {
  display: block;
  height: 28px;
}
.twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}
.twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}