.center {
  text-align: center; }

.text-labels {
  margin: 0 auto;
  text-align: center;
  font-size: 2em; }

.text-label {
  width: 17%;
  display: inline-block;
  vertical-align: top; }

.radioset.nobar ul::before {
  display: none; }

.radioset {
  margin: auto;
  padding: 90px 0 90px 0; }
  .radioset ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative; }
  .radioset li {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 17%; }
    .radioset li::before {
      content: '';
      position: absolute;
      top: 60%;
      left: 50%;
      width: 100%;
      height: 36px;
      margin-top: -18px;
      background: #aaa;
      box-shadow: inset 0 3px 5px -4px #000, 0 1px #fff; }
    .radioset li:last-child::before {
      display: none; }
  .radioset [type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    -webkit-tap-highlight-color: transparent; }
  .radioset label {
    line-height: 30px;
    display: block;
    font-size: 30px;
    cursor: pointer; }
    .radioset label::before, .radioset label::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 60%;
      border-radius: 50%;
      transform: translate3d(0, 0, 0);
      -moz-transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s all;
      -o-transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s all;
      -webkit-transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s all;
      transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s all; }
    .radioset label::before {
      width: 180px;
      height: 180px;
      margin: -90px 0 0 -90px;
      background: #aaa;
      transform: scale(0.7);
      box-shadow: inset 0 3px 5px -4px #000, 0 2px 1px -1px #fff; }
    .radioset label::after {
      width: 90px;
      height: 90px;
      margin: -45px 0 0 -45px;
      background: #fbfbfb;
      transform: scale(0.7);
      opacity: 1; }
  .radioset :checked + label::before {
    transform: scale(1);
    background: #00bcd4; }
  .radioset :checked + label::after {
    transform: scale(1);
    opacity: 0;
    background: #00bcd4; }

.text-label-4 {
  width: 24%; }

.radioset-4 li {
  width: 24%; }

.radioset :checked + label::before {
  font-size: 100px;
  padding-top: 75px;
  color: #fff; }

.radioset :checked + label.wrong::before {
  background: #f44336;
  content: '\2717'; }

.radioset :checked + label.correct::before {
  background: #4caf50;
  content: '\2713'; }

.container-wide {
  margin: 0 auto;
  width: 90%; }

.indent {
  margin-left: 2em; }

.card-image img {
  max-height: 400px; }

.table-of-contents {
  padding-left: 10px; }

.table-of-contents a.active {
  border-left: 2px solid #0D47A1; }

.table-of-contents a:hover {
  border-left: 2px solid #0D47A1; }

.card-panel {
  position: relative; }

.wrapper {
  width: 100%; }

body {
  text-overflow: ellipsis; }

label {
  height: 25px;
  line-height: 25px;
  font-size: 1rem; }

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-family: "Raleway", sans-serif;
  background: #fbfbfb; }

main {
  display: flex;
  flex: 1 0 auto;
  align-items: center; }

sup {
  font-size: 0.5em !important;
  vertical-align: super; }

.divider {
  width: 100%;
  height: 4px;
  color: #ddd; }

p {
  color: #aaa; }

#menu {
  box-shadow: none; }

.dot {
  width: 20px;
  height: 20px;
  background: #aaa;
  border-radius: 100%;
  opacity: 0.25;
  margin: 0 auto;
  display: inline-block;
  margin: 10px; }

.dot.filled {
  opacity: 1.0; }

.btn-floating.btn-floating-huge {
  width: 180px;
  height: 180px; }

.btn-floating.btn-floating-huge i {
  line-height: 180px; }

.btn-floating-huge i {
  font-size: 100px; }

.btn-large {
  height: 72px;
  line-height: 72px; }

.person {
  width: 100%;
  max-width: 150px;
  height: auto;
  max-height: 150px; }

.meds {
  fill: #fbc007; }

.mind {
  fill: #F44336; }

.diet {
  fill: #4CAF50; }

.support {
  fill: #4CAF50; }

.mobility {
  fill: #fbc007; }

.lifestyle {
  fill: #F44336; }

.chip {
  margin: 0 6px; }

.chip.medium {
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  border-radius: 20px; }

.chip.large {
  font-size: 20px;
  height: 44px;
  line-height: 44px;
  padding: 0 24px;
  border-radius: 22px; }

.butterfly {
  position: relative;
  height: 110px;
  width: 110px;
  border-radius: 50%;
  background-color: #fefefe;
  margin: 40 auto;
  box-shadow: 0 9px 12px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: all .2s ease-in-out; }
  .butterfly:hover {
    transform: scale(1.2); }
  .butterfly::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%; }

.card-header {
  margin: -20px;
  margin-bottom: 20px;
  padding: 10px 20px;
  color: #fff; }
  .card-header h5 {
    font-weight: 400; }

path:hover {
  transform: scale(1.2, 1.2);
  transform-origin: center center; }

header {
  margin-bottom: -10px; }

.timeline-row {
  cursor: pointer;
  padding: 10px 0px; }
  .timeline-row.selected {
    background: #00bcd4;
    color: #fff; }
    .timeline-row.selected label {
      color: #fff; }
  .timeline-row label {
    cursor: pointer; }
  .timeline-row:hover:not(.selected) {
    background: #f5f5f5; }
    .timeline-row:hover:not(.selected) .timeline-icon {
      transform: scale(1.2);
      padding: 12px 0 0 12px; }

.timeline-icon {
  width: 44px;
  height: 44px;
  padding: 10px 0 0 10px;
  transition: all .2s ease-in-out;
  margin: 0 auto; }

.blue-green-gradient {
  background: -webkit-linear-gradient(300deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%);
  background: linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%); }

#butterfly {
  margin: 0 auto;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 15px; }
  #butterfly #wing-orange {
    transform-origin: 0% 100%;
    animation: flap-back 40s infinite; }
  #butterfly #wing-magenta {
    transform-origin: 0% 80%;
    animation: flap-front 40s infinite; }
  #butterfly #wing-green {
    transform-origin: 100% 100%;
    animation: flap-back 40s infinite; }
  #butterfly #wing-yellow {
    transform-origin: 100% 96%;
    animation: flap-front 40s infinite; }

@keyframes flap-back {
  0%,
  23%,
  27%,
  88%,
  96%,
  100% {
    transform: scale(1, 1); }
  25% {
    transform: scale(1, 0.45) rotate(8deg); }
  90%,
  94% {
    transform: scale(1, 0.85) rotate(7deg); }
  92% {
    transform: scale(1, 0.95) rotate(8deg); } }

@keyframes flap-front {
  0%,
  23%,
  27%,
  88%,
  96%,
  100% {
    transform: scale(1, 1); }
  25% {
    transform: scale(1, 0.25) rotate(-7deg); }
  90%,
  94% {
    transform: scale(1, 0.65) rotate(-6deg); }
  92% {
    transform: scale(1, 0.75) rotate(-7deg); } }

.collection .collection-item.avatar {
  min-height: 0px; }