eventoL/eventoL

@charset "UTF-8";
/**
 * Common and top level styles needed for the rt-toggle
 */
.rt-toggle *,
.rt-toggle *:after,
.rt-toggle *:before {
  box-sizing: border-box; }

.rt-toggle {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border: inherit;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent; }

.rt-toggle--focused .rt-toggle__label {
  text-decoration: underline;
  text-decoration-color: rgba(155, 155, 155, 0.5);
  text-decoration-style: solid; }

.rt-toggle--disabled {
  cursor: not-allowed; }
  .rt-toggle--disabled .rt-toggle__label {
    color: rgba(155, 155, 155, 0.5);
    cursor: not-allowed; }
  .rt-toggle--disabled .rt-toggle__container {
    cursor: not-allowed; }
    .rt-toggle--disabled .rt-toggle__container > * {
      animation: none !important; }

.rt-toggle__input {
  position: absolute;
  z-index: -1;
  opacity: 0;
  bottom: 0; }

.rt-toggle__label {
  position: relative;
  cursor: pointer;
  text-align: inherit;
  color: inherit; }

.rt-toggle__container {
  cursor: pointer;
  position: relative;
  user-select: none;
  color: inherit;
  background-color: inherit; }

.rt-toggle--label-top {
  flex-direction: column; }

.rt-toggle--label-bottom {
  flex-direction: column; }
  .rt-toggle--label-bottom .rt-toggle__container {
    order: 1; }
  .rt-toggle--label-bottom .rt-toggle__label {
    order: 2; }

.rt-toggle--label-right {
  flex-direction: row; }
  .rt-toggle--label-right .rt-toggle__container {
    order: 1; }
  .rt-toggle--label-right .rt-toggle__label {
    order: 2; }

[aria-hidden="true"] {
  speak: none; }

/**
 * Original Design: Mark Lamb

 * URL: https://dribbble.com/shots/2326459-Toggle-Switch
 * Notes:
 *   This style relies on a parent element which either has its background set to a color, or inheirts from its parent.
 *   So if the handlePad is whack it means the parent has not set or inheirited the background.
 */
.rt-toggle--skeleton {
  min-width: 5.5em;
  background-color: inherit; }

.rt-toggle__container--skeleton {
  width: 5.5em;
  height: 2em; }
  .rt-toggle__container--skeleton:hover .rt-skeleton__handle--container,
  .rt-toggle--focused .rt-toggle__container--skeleton .rt-skeleton__handle--container {
    animation-name: pulse-handle;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: both; }
    .rt-toggle__container--skeleton:hover .rt-skeleton__handle--container .rt-skeleton__handle,
    .rt-toggle--focused .rt-toggle__container--skeleton .rt-skeleton__handle--container .rt-skeleton__handle {
      animation-name: skeleton-pulse;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-fill-mode: both; }

.rt-skeleton__track,
.rt-skeleton__handle,
.rt-skeleton__handle--container,
.rt-skeleton__handle--border,
.rt-skeleton__handle--inner {
  position: absolute; }

.rt-skeleton__track {
  top: 0.8em;
  left: 1em;
  width: 3.5em;
  height: 0.4em;
  transition: all 450ms cubic-bezier(0.845, 0.2, 0.2, 0.845);
  border-radius: 0.26667em;
  background-color: rgba(170, 170, 170, 0.3); }

.rt-skeleton__handle--container {
  top: 0em;
  left: 0.4em;
  width: 2em;
  height: 2em;
  background-color: inherit;
  transition: all 450ms cubic-bezier(0.845, 0.2, 0.2, 0.845); }

.rt-skeleton__handle,
.rt-skeleton__handle--inner,
.rt-skeleton__handle--border {
  top: 0;
  left: 0;
  width: 2em;
  height: 2em;
  transition: all 450ms cubic-bezier(0.845, 0.2, 0.2, 0.845);
  border-radius: 50%; }

.rt-skeleton__handle--border,
.rt-skeleton__handle--inner {
  background-color: inherit; }

.rt-skeleton__handle {
  background-color: rgba(170, 170, 170, 0.3); }

.rt-skeleton__handle--inner {
  width: 1.6em;
  height: 1.6em;
  margin-top: 0.2em;
  margin-left: 0.2em; }

.rt-skeleton__handle--border {
  width: 2.4em;
  height: 2.4em;
  margin-top: -0.2em;
  margin-left: -0.2em; }

.rt-toggle__input--skeleton:checked ~ .rt-skeleton__handle--container {
  left: 3.1em; }
  .rt-toggle__input--skeleton:checked ~ .rt-skeleton__handle--container .rt-skeleton__handle--inner {
    transform: scale(0); }
  .rt-toggle__input--skeleton:checked ~ .rt-skeleton__handle--container .rt-skeleton__handle {
    background-color: white; }

@keyframes pulse-handle {
  from {
    transform: scale3d(1, 1, 1); }
  50% {
    transform: scale3d(1.05, 1.05, 1.05); }
  to {
    transform: scale3d(1, 1, 1); } }

@keyframes skeleton-pulse {
  from {
    background-color: rgba(170, 170, 170, 0.3); }
  50% {
    background-color: white; }
  to {
    background-color: rgba(170, 170, 170, 0.3); } }

/**
 * Inspiration from Tony Wallström Switch Animation
 * https://dribbble.com/shots/2327955-Switch-Animation-in-Principle
 */
.rt-toggle--lima {
  min-width: 3.2em;
  background-color: inherit; }

.rt-toggle--lima:not(.rt-toggle--disabled):not(.rt-toggle--checked).rt-toggle--focused .rt-lima__handle,
.rt-toggle--lima:not(.rt-toggle--disabled):not(.rt-toggle--checked) .rt-toggle__container--lima:hover .rt-lima__handle {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

.rt-toggle--lima:not(.rt-toggle--disabled).rt-toggle--checked.rt-toggle--focused .rt-lima__track,
.rt-toggle--lima:not(.rt-toggle--disabled).rt-toggle--checked .rt-toggle__container--lima:hover .rt-lima__track {
  border-width: .1em;
  border-style: solid;
  animation-name: lima-border-pluse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: both; }

.rt-toggle--lima:not(.rt-toggle--disabled).rt-toggle--checked.rt-toggle--focused .rt-lima__handle,
.rt-toggle--lima:not(.rt-toggle--disabled).rt-toggle--checked .rt-toggle__container--lima:hover .rt-lima__handle {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

.rt-toggle--lima.rt-toggle--disabled .rt-lima__track {
  background-color: #c4c4c4; }

.rt-toggle__container--lima {
  width: 3.2em;
  height: 2em;
  margin-left: .5em;
  margin-right: .5em; }

.rt-lima__track,
.rt-lima__check,
.rt-lima__handle,
.rt-lima__handle--container,
.rt-lima__handle--border {
  position: absolute; }

.rt-lima__track {
  top: 0.35em;
  left: 0;
  width: 3.2em;
  height: 1.3em;
  background-color: #28a626;
  transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scaleY(0.09);
  transform-origin: 50% 50%;
  border-radius: 2px; }

.rt-lima__handle--container {
  top: 0.5em;
  left: 0.45em;
  width: 1.3em;
  height: 1em;
  background-color: inherit;
  transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 100ms ease;
  border-radius: 1.3em; }

.rt-lima__handle,
.rt-lima__handle--border {
  top: 0;
  left: 0;
  width: 1.3em;
  height: 1em;
  transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 100ms ease;
  border-radius: 1.3em; }

.rt-lima__handle--border {
  background-color: inherit; }

.rt-lima__handle {
  background-color: #d2d2d2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

.rt-lima__handle--border {
  width: 1.6em;
  height: 1.3em;
  margin-top: -0.15em;
  margin-left: -0.15em; }

.rt-lima__check {
  position: absolute;
  top: 0.6em;
  left: 0.6em;
  width: 0.8em;
  transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scale(0.2); }
  .rt-lima__check path {
    fill: white; }

.rt-toggle__input--lima:checked ~ .rt-lima__track {
  transform: scaleY(1);
  border-radius: 1.3em;
  background-color: #28a626; }

.rt-toggle__input--lima:checked ~ .rt-lima__check {
  transform: scale(1); }

.rt-toggle__input--lima:checked ~ .rt-lima__handle--container {
  left: 1.6em; }
  .rt-toggle__input--lima:checked ~ .rt-lima__handle--container .rt-lima__handle--border {
    opacity: 0; }
  .rt-toggle__input--lima:checked ~ .rt-lima__handle--container .rt-lima__handle {
    background-color: white; }

@keyframes lima-color-pluse {
  from {
    background-color: #28a626; }
  50% {
    background-color: #c4c4c4; }
  to {
    background-color: #28a626; } }

@keyframes lima-border-pluse {
  from {
    border-color: #28a626; }
  50% {
    border-color: white; }
  to {
    border-color: #28a626; } }

.rt-toggle__container--bbounce {
  position: relative;
  display: inline-block;
  height: 2em;
  margin: 1em;
  cursor: pointer; }
  .rt-toggle__container--bbounce .bbounce__body {
    position: relative;
    display: inline-block;
    width: 4em;
    height: 2em;
    border: 0.1em solid #dadde1;
    border-radius: 2.5em;
    background: white; }
  .rt-toggle__container--bbounce .bbounce__switch {
    position: absolute;
    z-index: 1;
    top: -0.1em;
    left: -0.1em;
    display: inline-block;
    width: 2em;
    height: 2em;
    transition: left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
    border: 0.1em solid #ccd0d6;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, 0.13); }
  .rt-toggle__container--bbounce .bbounce__track {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    border-radius: 2.5em; }
  .rt-toggle__container--bbounce .bbounce__badge {
    position: absolute;
    top: 0;
    right: -1em;
    bottom: 0;
    width: 4.2em;
    transition: left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), right 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
    background: #439fd8; }
  .rt-toggle__container--bbounce .bbounce__badge:after {
    font-size: 1.5em;
    line-height: 2em;
    position: absolute;
    left: 1em;
    width: 1em;
    height: 1em;
    content: ' ';
    background: url("svgs/ic_check_black_24px.svg");
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-size: 1em 1.2em; }
  .rt-toggle__container--bbounce .bbounce__badge--negative {
    right: auto;
    left: -3em;
    width: 2em;
    color: grey;
    background: white; }
  .rt-toggle__container--bbounce .bbounce__badge--negative:after {
    line-height: 2em;
    left: .2em;
    background: url("svgs/ic_close_black_24px.svg");
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-size: 1em 1.2em; }
  .rt-toggle__container--bbounce:hover .bbounce__switch {
    transform: scale(1.09);
    border-color: #b5bbc3; }
  .rt-toggle__container--bbounce:active .bbounce__switch {
    transform: scale(0.95); }
  .rt-toggle__container--bbounce > :not(:checked) ~ .bbounce__body > .bbounce__switch {
    left: 2em; }
  .rt-toggle__container--bbounce > :not(:checked) ~ .bbounce__body .bbounce__badge {
    right: -3em; }
    .rt-toggle__container--bbounce > :not(:checked) ~ .bbounce__body .bbounce__badge.bbounce__badge--negative {
      right: auto;
      left: .3em; }

.neonpush__btn {
  display: block;
  margin: 0 auto;
  transition: all 350ms ease-in; }
  .neonpush__btn:hover {
    cursor: pointer; }

.neonpush__btn, .neonpush__btn:before, .neonpush__btn:after,
.rt-toggle__input--neonpush,
.rt-toggle__input--neonpush:before,
.rt-toggle__input--neonpush:after,
.toggle--feature,
.toggle--feature:before,
.toggle--feature:after {
  transition: all 250ms ease-in; }

.neonpush__btn:before, .neonpush__btn:after,
.rt-toggle__input--neonpush:before,
.rt-toggle__input--neonpush:after,
.toggle--feature:before,
.toggle--feature:after {
  display: block;
  content: ''; }

.rt-toggle__container--neonpush,
.rt-toggle__container--neonpull {
  display: block;
  margin: .3em;
  user-select: none;
  text-align: center; }
  .rt-toggle__container--neonpush .neonpush__btn,
  .rt-toggle__container--neonpull .neonpush__btn {
    position: relative;
    width: 2.7em;
    height: 2.7em;
    border-radius: 50%;
    background-color: #f9f8f6; }
    .rt-toggle__container--neonpush .neonpush__btn, .rt-toggle__container--neonpush .neonpush__btn:before, .rt-toggle__container--neonpush .neonpush__btn:after,
    .rt-toggle__container--neonpull .neonpush__btn,
    .rt-toggle__container--neonpull .neonpush__btn:before,
    .rt-toggle__container--neonpull .neonpush__btn:after {
      transition-duration: 150ms; }
    .rt-toggle__container--neonpush .neonpush__btn:before,
    .rt-toggle__container--neonpull .neonpush__btn:before {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1.22727em;
      height: 1.22727em;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: #f90;
      box-shadow: inset 0 0 0 0.28em #ccc, inset 0 0 0 0.7em #f9f8f6; }
    .rt-toggle__container--neonpush .neonpush__btn:after,
    .rt-toggle__container--neonpull .neonpush__btn:after {
      position: absolute;
      top: 35%;
      left: 50%;
      width: .2em;
      height: .6em;
      transform: translate(-50%, -50%);
      background-color: #ccc;
      box-shadow: 0 0 0 0.14em #f9f8f6; }
    .rt-toggle__container--neonpush .neonpush__btn:hover:before,
    .rt-toggle__container--neonpull .neonpush__btn:hover:before {
      box-shadow: inset 0 0 0 0.28em #b3b3b3, inset 0 0 0 0.7em #f9f8f6; }
    .rt-toggle__container--neonpush .neonpush__btn:hover:after,
    .rt-toggle__container--neonpull .neonpush__btn:hover:after {
      background-color: #b3b3b3; }
  .rt-toggle__container--neonpush .rt-toggle__input--neonpush:checked + .neonpush__btn,
  .rt-toggle__container--neonpush .rt-toggle__input--neonull:checked + .neonpush__btn,
  .rt-toggle__container--neonpull .rt-toggle__input--neonpush:checked + .neonpush__btn,
  .rt-toggle__container--neonpull .rt-toggle__input--neonull:checked + .neonpush__btn {
    box-shadow: 0 0.1em 0.28em 0 gray, 0 0.8em 1.1em 0 transparent; }
    .rt-toggle__container--neonpush .rt-toggle__input--neonpush:checked + .neonpush__btn:before,
    .rt-toggle__container--neonpush .rt-toggle__input--neonull:checked + .neonpush__btn:before,
    .rt-toggle__container--neonpull .rt-toggle__input--neonpush:checked + .neonpush__btn:before,
    .rt-toggle__container--neonpull .rt-toggle__input--neonull:checked + .neonpush__btn:before {
      box-shadow: inset 0 0 0 0.28em #f90, inset 0 0 0 0.7em #f9f8f6; }
    .rt-toggle__container--neonpush .rt-toggle__input--neonpush:checked + .neonpush__btn:after,
    .rt-toggle__container--neonpush .rt-toggle__input--neonull:checked + .neonpush__btn:after,
    .rt-toggle__container--neonpull .rt-toggle__input--neonpush:checked + .neonpush__btn:after,
    .rt-toggle__container--neonpull .rt-toggle__input--neonull:checked + .neonpush__btn:after {
      background-color: #f90; }

/**
 * iOS 6 style switch checkboxes
 * by Lea Verou http://lea.verou.me
 */
:root input[type='checkbox'].rt-toggle__input--ios6 + div {
  font-size: 150%;
  display: inline-block;
  overflow: hidden;
  width: 3em;
  height: 1em;
  margin: 0 .5em;
  transition-duration: .4s;
  transition-property: padding, width, background-position, text-indent;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  background: white;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent), linear-gradient(90deg, #3d99f5 50%, transparent 50%);
  background-position: 100% 0;
  background-clip: border-box;
  background-origin: border-box;
  background-size: 200% 100%;
  box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.2) inset, 0 0.45em 0 0.1em rgba(0, 0, 0, 0.05) inset; }

:root input[type='checkbox'].rt-toggle__input--ios6:checked + div {
  width: 3em;
  padding-left: 2em;
  background-position: 0 0; }

:root input[type='checkbox'].rt-toggle__input--ios6 + div:before {
  float: left;
  width: 1.65em;
  height: 1.65em;
  margin: -.05em;
  content: 'On';
  text-indent: -4.5em;
  color: white;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: inherit;
  background: white;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), transparent);
  box-shadow: 0 0.1em 0.1em 0.1em rgba(255, 255, 255, 0.8) inset, 0 0 0.5em rgba(0, 0, 0, 0.3);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3); }

:root input[type='checkbox'].rt-toggle__input--ios6:active + div:before {
  background-color: #eee; }

:root input[type='checkbox'].rt-toggle__input--ios6 + div:before,
:root input[type='checkbox'].rt-toggle__input--ios6 + div:after {
  font: bold 60%/1.9 sans-serif;
  text-transform: uppercase; }

:root input[type='checkbox'].rt-toggle__input--ios6 + div:after {
  float: left;
  content: 'Off';
  text-indent: .5em;
  color: rgba(0, 0, 0, 0.45);
  text-shadow: none; }

.rt-toggle--sierra {
  min-width: 5em;
  background-color: inherit; }

.rt-toggle__container--sierra {
  width: 5em;
  height: 2em;
  margin: .5em; }
  .rt-toggle__container--sierra:hover .rt-sierra__handle {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: both; }

.rt-sierra__check {
  position: absolute;
  top: 0em;
  left: 0;
  width: 2em;
  height: 2em;
  transition: all 500ms cubic-bezier(0.34, 1.61, 0.7, 1); }
  .rt-sierra__check .rt-sierra__path {
    transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1) 100ms;
    stroke: #38dba2;
    stroke-width: 5px;
    fill: none;
    stroke-dasharray: 50;
    stroke-dashoffset: 50; }

.rt-sierra__handle,
.rt-sierra__track,
.rt-sierra__icon {
  position: absolute; }

.rt-sierra__handle {
  top: 0em;
  left: 0;
  width: 2em;
  height: 2em;
  transition: all 500ms cubic-bezier(0.34, 1.61, 0.7, 1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.1), 0 1.5px 6px rgba(0, 0, 0, 0.1); }

.rt-sierra__track {
  top: 0.75em;
  left: 1em;
  width: 3em;
  height: 0.5em;
  transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 0.33333em;
  background-color: white;
  box-shadow: inset -0.1em 0 0.15em 0.12em #cccccc; }

.rt-toggle__input--sierra:checked + .rt-sierra__track {
  background-color: #38dba2;
  box-shadow: inset 0 -0.1em 0.15em 0.12em #22be87; }

.rt-toggle__input--sierra:checked ~ .rt-sierra__handle {
  left: 3em; }

.rt-toggle__input--sierra:checked ~ .rt-sierra__check {
  left: 3em; }
  .rt-toggle__input--sierra:checked ~ .rt-sierra__check .rt-sierra__path {
    stroke-dashoffset: 0; }

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1); }
  50% {
    transform: scale3d(1.05, 1.05, 1.05); }
  to {
    transform: scale3d(1, 1, 1); } }

.rt-toggle--charlie {
  min-width: 4.5em;
  background-color: inherit; }

.rt-toggle__container--charlie {
  width: 4.5em;
  height: 2em;
  margin: .5em; }

.rt-charlie__track {
  position: absolute;
  top: 0;
  left: 0;
  width: 4.5em;
  height: 2em;
  transition: all 0 ease-in-out;
  transition-delay: 0.05s;
  border: 0.08em solid #dfdfdf;
  border-radius: 2em;
  background-color: #f8f8f8; }

.rt-charlie__track--faux {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 4.5em;
  height: 2em;
  border-radius: 2em;
  background: none; }

.rt-charlie__handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 2em;
  height: 2em;
  animation-name: morphoff;
  animation-duration: 0.5s;
  animation-direction: normal;
  border: 0.08em solid #d2d2d2;
  border-radius: 2em;
  background-color: white;
  animation-fill-mode: forwards; }

.rt-toggle__input--charlie:checked ~ .rt-charlie__track {
  border-color: #00abc1;
  background-color: #5becff; }

.rt-toggle__input--charlie:checked ~ .rt-charlie__track--faux .rt-charlie__handle {
  animation-name: morphon;
  animation-duration: 0.5s;
  animation-direction: normal;
  animation-fill-mode: forwards; }

.rt-toggle__input--charlie:checked ~ .rt-charlie__text--on {
  animation-name: textshow;
  animation-duration: 0.5s;
  animation-direction: normal;
  animation-fill-mode: forwards; }

.rt-charlie__text--off,
.rt-charlie__text--on {
  font-weight: bolder;
  line-height: 2em;
  position: absolute;
  top: 0;
  left: 0;
  width: 4.5em;
  height: 2em;
  margin: auto 0;
  text-align: center;
  opacity: 0; }

.rt-charlie__text--on {
  color: #00abc1; }

.rt-toggle--charlie:not(.rt-toggle--checked) .rt-charlie__text--off {
  animation-name: textshow;
  animation-duration: 0.5s;
  animation-direction: normal;
  opacity: 1;
  color: #d2d2d2;
  animation-fill-mode: forwards; }

@keyframes textshow {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes morphoff {
  0% {
    left: 2.5em;
    width: 2em;
    border-color: #00abc1; }
  20% {
    left: 0;
    width: 4.5em;
    border-color: #d2d2d2; }
  80% {
    width: 4.5em; }
  100% {
    border-color: #d2d2d2; } }

@keyframes morphon {
  0% {
    border-color: #d2d2d2; }
  20% {
    width: 4.5em;
    border-color: #00abc1; }
  80% {
    left: 0;
    width: 4.5em;
    border-color: #00abc1; }
  100% {
    left: 2.5em;
    width: 2em;
    border-color: #00abc1; } }

.rt-toggle--echo {
  min-width: 4em; }
  .rt-toggle--echo:active .rt-echo__handle, .rt-toggle--echo:focus .rt-echo__handle {
    transform: scale(1.1, 0.9); }

.rt-toggle__container--echo {
  width: 4em;
  height: 2em;
  margin: .5em; }

.rt-echo__track {
  position: absolute;
  top: 0;
  left: 0;
  width: 4em;
  height: 2em;
  transition: left 400ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 650ms ease, background-color 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 1.6em;
  background-color: #5b5967; }

.rt-echo__handle {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  width: 1.6em;
  height: 1.6em;
  transition: left 400ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 650ms ease, background-color 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 1.6em;
  background-color: white; }

.rt-echo__icon,
.rt-echo__icon {
  position: absolute;
  top: 0.41392em;
  height: 1.23077em;
  transition: left 400ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 650ms ease, background-color 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
  fill: white; }

.rt-echo__icon--off {
  left: 2.4em;
  opacity: 1; }

.rt-echo__icon--on {
  left: 0.61538em;
  opacity: 0; }

.rt-toggle__input--echo:checked ~ .rt-echo__track {
  background-color: #449d44; }

.rt-toggle__input--echo:checked ~ .rt-echo__handle {
  left: 2.2em; }

.rt-toggle__input--echo:checked ~ .rt-echo__icon--on {
  opacity: 1; }

.rt-toggle__input--echo:checked ~ .rt-echo__icon--off {
  opacity: 0; }

/**
 * Inspiration from Andrew Verboncouer
 * https://dribbble.com/shots/2338506-015-On-Off-Switch
 */
.rt-toggle--foxtrot {
  min-width: 5em; }
  .rt-toggle--foxtrot:active .rt-foxtrot__handle, .rt-toggle--foxtrot:hover .rt-foxtrot__handle {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

.rt-toggle__container--foxtrot {
  width: 5em;
  height: 2.5em;
  margin: .5em; }

.rt-foxtrot__track {
  position: absolute;
  top: 0;
  left: 0;
  width: 5em;
  height: 2.5em;
  transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
  border: 0.21em solid #222222;
  border-radius: 1.8em;
  background-color: #1f4e85; }

.rt-foxtrot__handle {
  position: absolute;
  top: 0.35em;
  left: 0.35em;
  width: 1.8em;
  height: 1.8em;
  transition: left 400ms cubic-bezier(0.34, 1.3, 0.7, 1);
  border-radius: 1.8em;
  background-color: #f0f0f0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }

.rt-foxtrot__handle-icon {
  position: absolute;
  top: 0.35em;
  left: 0.35em;
  width: 1.8em;
  height: 1.8em;
  transition: left 400ms cubic-bezier(0.34, 1.3, 0.7, 1);
  transform: scale(0.5);
  fill: white; }

.rt-foxtrot__text {
  font-size: 1em;
  line-height: 2.5em;
  position: absolute;
  top: 0;
  height: 2.5em;
  transition: opacity 200ms 100ms cubic-bezier(0.645, 0.045, 0.355, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

.rt-foxtrot__text--off {
  opacity: 1;
  color: #4e8cd6; }

.rt-foxtrot__text--on {
  left: 1em;
  opacity: 0;
  color: #f0f0f0; }

.rt-toggle__input--foxtrot:checked ~ .rt-foxtrot__track {
  background-color: #85e435; }

.rt-toggle__input--foxtrot:checked ~ .rt-foxtrot__handle {
  left: 2.85em; }

.rt-toggle__input--foxtrot:checked ~ .rt-foxtrot__handle-icon {
  left: 2.85em; }

.rt-toggle__input--foxtrot:checked ~ .rt-foxtrot__text--on {
  opacity: 1; }

.rt-toggle__input--foxtrot:checked ~ .rt-foxtrot__text--off {
  opacity: 0; }