
section article {
  align-self: center;
  width: 20em;
  margin-bottom: 2em;
}
section article p, section article:last-of-type {
  margin-bottom: 0;
}


/*
 *
 *
 START // CHART'S RULES
 -> "if you're picking code, don't forget the variables :)"
 */
.chart {
  font-size: 1em;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  backface-visibility: visible;
}
.bar {
  font-size: 1em;
  position: relative;
  height: 10em;
  transition: all 0.3s ease-in-out;
  transform: rotateX(60deg) rotateY(0deg);
  transform-style: preserve-3d;
}
.bar .face {
  font-size: 2em;
  position: relative;
  width: 100%;
  height: 2em;
  background-color: rgba(254, 254, 254, .3);
}
.bar .face.side-a, .bar .face.side-b {
  width: 2em;
}
.bar .side-a {
  transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
}
.bar .side-b {
  transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);
  position: absolute;
  right: 0;
}
.bar .side-0 {
  transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
}
.bar .side-1 {
  transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
}
.bar .top {
  transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
}
.bar .floor {
  box-shadow: 0 0.1em 0.6em rgba(0, 0, 0, .3), 0.6em -0.5em 3em rgba(0, 0, 0, .3), 1em -1em 8em #fefefe;
}
.growing-bar {
  transition: all 0.3s ease-in-out;
  background-color: rgba(236, 0, 140, .6);
  width: 100%;
  height: 2em;
}
.bar.yellow .side-a, .bar.yellow .growing-bar {
  background-color: rgba(241, 196, 15, .6);
}
.bar.yellow .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(241, 196, 15, .8);
}
.bar.yellow .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(241, 196, 15, .8);
}
.bar.red .side-a, input[id='red']:checked ~ .chart .side-a, .bar.red .growing-bar, input[id='red']:checked ~ .chart .growing-bar {
  background-color: rgba(236, 0, 140, .6);
}
.bar.red .side-0 .growing-bar, input[id='red']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(236, 0, 140, .8);
}
.bar.red .floor .growing-bar, input[id='red']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(236, 0, 140, .8);
}
.bar.cyan .side-a, input[id='cyan']:checked ~ .chart .side-a, .bar.cyan .growing-bar, input[id='cyan']:checked ~ .chart .growing-bar {
  background-color: rgba(87, 202, 244, .6);
}
.bar.cyan .side-0 .growing-bar, input[id='cyan']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #57caf4;
}
.bar.cyan .floor .growing-bar, input[id='cyan']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em #57caf4;
}
.bar.navy .side-a, .bar.navy .growing-bar {
  background-color: rgba(10, 64, 105, .6);
}
.bar.navy .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(10, 64, 105, .8);
}
.bar.navy .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(10, 64, 105, .8);
}
.bar.lime .side-a, input[id='lime']:checked ~ .chart .side-a, .bar.lime .growing-bar, input[id='lime']:checked ~ .chart .growing-bar {
  background-color: rgba(118, 201, 0, .6);
}
.bar.lime .side-0 .growing-bar, input[id='lime']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #76c900;
}
.bar.lime .floor .growing-bar, input[id='lime']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em #76c900;
}
.bar.white .side-a, .bar.white .growing-bar {
  background-color: rgba(254, 254, 254, .6);
}
.bar.white .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #fefefe;
}
.bar.white .floor .growing-bar {
  box-shadow: 0em 0em 2em #fefefe;
}
.bar.gray .side-a, .bar.gray .growing-bar {
  background-color: rgba(68, 68, 68, .6);
}
.bar.gray .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #444;
}
.bar.gray .floor .growing-bar {
  box-shadow: 0em 0em 2em #444;
}
.chart .bar.yellow-face .face {
  background-color: rgba(241, 196, 15, .2);
}
.chart .bar.lime-face .face {
  background-color: rgba(118, 201, 0, .2);
}
.chart .bar.red-face .face {
  background-color: rgba(236, 0, 140, .2);
}
.chart .bar.navy-face .face {
  background-color: rgba(10, 64, 105, .2);
}
.chart .bar.cyan-face .face {
  background-color: rgba(87, 202, 244, .2);
}
.chart .bar.gray-face .face {
  background-color: rgba(68, 68, 68, .2);
}
.chart .bar.lightGray-face .face {
  background-color: rgba(145, 145, 145, .2);
}
.bar-0 .growing-bar {
  width: 0%;
  float: right;

}
.bar-1 .growing-bar {
  width: 1%;
  float: right;

}
.bar-2 .growing-bar {
  width: 2%;
  float: right;

}
.bar-3 .growing-bar {
  width: 3%;
  float: right;

}
.bar-4 .growing-bar {
  width: 4%;
  float: right;

}
.bar-5 .growing-bar {
  width: 5%;
  float: right;

}
.bar-6 .growing-bar {
  width: 6%;
  float: right;

}
.bar-7 .growing-bar {
  width: 7%;
  float: right;

}
.bar-8 .growing-bar {
  width: 8%;
  float: right;

}
.bar-9 .growing-bar {
  width: 9%;
  float: right;

}
.bar-10 .growing-bar {
  width: 10%;
  float: right;

}
.bar-11 .growing-bar {
  width: 11%;
  float: right;

}
.bar-12 .growing-bar {
  width: 12%;
  float: right;

}
.bar-13 .growing-bar {
  width: 13%;
  float: right;

}
.bar-14 .growing-bar {
  width: 14%;
  float: right;

}
.bar-15 .growing-bar {
  width: 15%;
  float: right;

}
.bar-16 .growing-bar {
  width: 16%;
  float: right;

}
.bar-17 .growing-bar {
  width: 17%;
  float: right;

}
.bar-18 .growing-bar {
  width: 18%;
  float: right;

}
.bar-19 .growing-bar {
  width: 19%;
  float: right;

}
.bar-20 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar {
  width: 20%;
  float: right;

}
.bar-21 .growing-bar {
  width: 21%;
  float: right;

}
.bar-22 .growing-bar {
  width: 22%;
  float: right;

}
.bar-23 .growing-bar {
  width: 23%;
  float: right;

}
.bar-24 .growing-bar {
  width: 24%;
  float: right;

}
.bar-25 .growing-bar, input[id='pos-0']:checked ~ .chart .growing-bar {
  width: 25%;
  float: right;

}
.bar-26 .growing-bar {
  width: 26%;
  float: right;

}
.bar-27 .growing-bar {
  width: 27%;
  float: right;

}
.bar-28 .growing-bar {
  width: 28%;
  float: right;

}
.bar-29 .growing-bar {
  width: 29%;
  float: right;

}
.bar-30 .growing-bar {
  width: 30%;
  float: right;

}
.bar-31 .growing-bar {
  width: 31%;
  float: right;

}
.bar-32 .growing-bar {
  width: 32%;
  float: right;

}
.bar-33 .growing-bar {
  width: 33%;
  float: right;

}
.bar-34 .growing-bar {
  width: 34%;
  float: right;

}
.bar-35 .growing-bar {
  width: 35%;
  float: right;

}
.bar-36 .growing-bar {
  width: 36%;
  float: right;

}
.bar-37 .growing-bar {
  width: 37%;
  float: right;

}
.bar-38 .growing-bar {
  width: 38%;
  float: right;

}
.bar-39 .growing-bar {
  width: 39%;
  float: right;

}
.bar-40 .growing-bar {
  width: 40%;
  float: right;

}
.bar-41 .growing-bar {
  width: 41%;
  float: right;

}
.bar-42 .growing-bar {
  width: 42%;
  float: right;

}
.bar-43 .growing-bar {
  width: 43%;
  float: right;

}
.bar-44 .growing-bar {
  width: 44%;
  float: right;

}
.bar-45 .growing-bar {
  width: 45%;
  float: right;

}
.bar-46 .growing-bar {
  width: 46%;
  float: right;

}
.bar-47 .growing-bar {
  width: 47%;
  float: right;

}
.bar-48 .growing-bar {
  width: 48%;
  float: right;

}
.bar-49 .growing-bar {
  width: 49%;
  float: right;

}
.bar-50 .growing-bar, input[id='pos-1']:checked ~ .chart .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar {
  width: 50%;
  float: right;

}
.bar-51 .growing-bar {
  width: 51%;
  float: right;

}
.bar-52 .growing-bar {
  width: 52%;
  float: right;

}
.bar-53 .growing-bar {
  width: 53%;
  float: right;

}
.bar-54 .growing-bar {
  width: 54%;
  float: right;

}
.bar-55 .growing-bar {
  width: 55%;
  float: right;

}
.bar-56 .growing-bar {
  width: 56%;
  float: right;

}
.bar-57 .growing-bar {
  width: 57%;
  float: right;

}
.bar-58 .growing-bar {
  width: 58%;
  float: right;

}
.bar-59 .growing-bar {
  width: 59%;
  float: right;

}
.bar-60 .growing-bar {
  width: 60%;
  float: right;

}
.bar-61 .growing-bar {
  width: 61%;
  float: right;

}
.bar-62 .growing-bar {
  width: 62%;
  float: right;

}
.bar-63 .growing-bar {
  width: 63%;
  float: right;

}
.bar-64 .growing-bar {
  width: 64%;
  float: right;

}
.bar-65 .growing-bar {
  width: 65%;
  float: right;

}
.bar-66 .growing-bar {
  width: 66%;
  float: right;

}
.bar-67 .growing-bar {
  width: 67%;
  float: right;

}
.bar-68 .growing-bar {
  width: 68%;
  float: right;

}
.bar-69 .growing-bar {
  width: 69%;
  float: right;

}
.bar-70 .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 70%;
  float: right;

}
.bar-71 .growing-bar {
  width: 71%;
  float: right;

}
.bar-72 .growing-bar {
  width: 72%;
  float: right;

}
.bar-73 .growing-bar {
  width: 73%;
  float: right;

}
.bar-74 .growing-bar {
  width: 74%;
  float: right;

}
.bar-75 .growing-bar, input[id='pos-2']:checked ~ .chart .growing-bar {
  width: 75%;
  float: right;

}
.bar-76 .growing-bar {
  width: 76%;
  float: right;

}
.bar-77 .growing-bar {
  width: 77%;
  float: right;

}
.bar-78 .growing-bar {
  width: 78%;
  float: right;

}
.bar-79 .growing-bar {
  width: 79%;
  float: right;

}
.bar-80 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 80%;
  float: right;

}
.bar-81 .growing-bar {
  width: 81%;
  float: right;

}
.bar-82 .growing-bar {
  width: 82%;
  float: right;

}
.bar-83 .growing-bar {
  width: 83%;
  float: right;

}
.bar-84 .growing-bar {
  width: 84%;
  float: right;

}
.bar-85 .growing-bar {
  width: 85%;
  float: right;

}
.bar-86 .growing-bar {
  width: 86%;
  float: right;

}
.bar-87 .growing-bar {
  width: 87%;
  float: right;

}
.bar-88 .growing-bar {
  width: 88%;
  float: right;

}
.bar-89 .growing-bar {
  width: 89%;
  float: right;

}
.bar-90 .growing-bar {
  width: 90%;
  float: right;

}
.bar-91 .growing-bar {
  width: 91%;
  float: right;

}
.bar-92 .growing-bar {
  width: 92%;
  float: right;

}
.bar-93 .growing-bar {
  width: 93%;
  float: right;

}
.bar-94 .growing-bar {
  width: 94%;
  float: right;

}
.bar-95 .growing-bar {
  width: 95%;
  float: right;

}
.bar-96 .growing-bar {
  width: 96%;
  float: right;

}
.bar-97 .growing-bar {
  width: 97%;
  float: right;

}
.bar-98 .growing-bar {
  width: 98%;
  float: right;

}
.bar-99 .growing-bar {
  width: 99%;
  float: right;

}
.bar-100 .growing-bar, input[id='pos-3']:checked ~ .chart .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 100%;
  float: right;

}
/*
 END // CHART'S RULES
 *
 *
 */
.chart.grid {
  display: flex;
  flex-direction: row;
}
.chart.grid .exercise {
  flex: 0 0 100%;
  display: flex;
}
.chart.grid .exercise .bar {
  flex: 1;
  margin: 0 0.5em;
}
.chart.grid .exercise .bar:nth-child(2) {
  z-index: 8;
  flex: 1 0 40%;
}
.chart.grid .exercise .bar:first-child {
  z-index: 10;
  margin-left: 0;
}
.chart.grid .exercise .bar:last-child {
  margin-right: 0;
}
.actions {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  padding-bottom: 2em;
  border-bottom: 1px dotted rgba(68, 68, 68, .4);
}
label {
  box-sizing: border-box;
  padding: 1em;
  margin: 0 0.2em;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  color: #0a4069;
  border: 1px solid rgba(254, 254, 254, .6);
  border-radius: 0;
  flex: 1;
}
label:first-child {
  margin-left: 0;
  border-radius: 0.2em 0 0 0.2em;
}
label:last-child {
  margin-right: 0;
  border-radius: 0 0.2em 0.2em 0;
}
input[id='exercise-1']:checked ~ .actions label[for='exercise-1'], input[id='exercise-2']:checked ~ .actions label[for='exercise-2'], input[id='exercise-3']:checked ~ .actions label[for='exercise-3'], input[id='exercise-4']:checked ~ .actions label[for='exercise-4'], input[id='pos-0']:checked ~ .actions label[for='pos-0'], input[id='pos-1']:checked ~ .actions label[for='pos-1'], input[id='pos-2']:checked ~ .actions label[for='pos-2'], input[id='pos-3']:checked ~ .actions label[for='pos-3'], input[id='red']:checked ~ .actions label[for='red'], input[id='cyan']:checked ~ .actions label[for='cyan'], input[id='lime']:checked ~ .actions label[for='lime'] {
  color: #76c900;
  border: 1px solid #031523;
  background-color: #0a4069;
}
input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) {
  flex: 1 0 0%;
}
input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) {
  flex: 1;
}
input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) {
  flex: 1 0 30%;
}
input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1), input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2), input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) {
  flex: 1;
}
input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1), input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) {
  flex: 1 0 30%;
}
input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) {
  flex: 1;
}





.wizard-progress {
  display: table;
  width: 100%;
  table-layout: fixed;
  position: relative;
}
.wizard-progress .step {
  display: table-cell;
  text-align: center;
  vertical-align: top;
  overflow: visible;
  position: relative;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
}
.wizard-progress .step:not(:last-child):before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 35px;
  background-color: #fff;
  height: 6px;
  width: 100%;
}
.wizard-progress .step .node {
  display: inline-block;
  border: 12px solid #fff;
  background-color: #fff;
  border-radius: 18px;
  height: 18px;
  width: 18px;
  position: absolute;
  top: 25px;
  left: 50%;
  margin-left: -13px;
}
.wizard-progress .step.complete:before {
  background-color: #125580;
}
.wizard-progress .step.complete .node {
  border-color: #125580;
  background-color: #125580;
}
.wizard-progress .step.complete .node:before {

}
.wizard-progress .step.in-progress:before {
  background: #125580;
  background: -moz-linear-gradient(left, #125580 0%, #fff 100%);
  background: -webkit-linear-gradient(left, #125580 0%, #fff 100%);
  background: linear-gradient(to right, #125580 0%, #fff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#125580", endColorstr="#fff",GradientType=1);
}
.wizard-progress .step.in-progress .node {
  border-color: #125580;
  background-color: #125580;
}
.wizard-progress .step.in-progress .node:before {

}
