/* BOTTOM to UP ================================= */
/* Tilt transition bottom to up */
.inline-up-tilt {
   opacity: 0;
   transform: translateY(4em) rotateZ(-5deg);
   transition: transform 3s .25s cubic-bezier(0,1,.3,1),
   opacity .3s .25s ease-out;
   width: 100%;
   will-change: transform, opacity;
}

.inline-up-tilt.is-visible {
   opacity: 1;
   transform: rotateZ(-1deg);
}

/* Straight Transition bottom to up */
.inline-up {
   opacity: 0;
   transform: translateY(0.5em);
   transition: transform 3s .25s cubic-bezier(0,1,.3,1),
   opacity .3s .25s ease-out;
   width: 100%;
   will-change: transform, opacity;
}

.inline-up.is-visible {
   opacity: 1;
   transform: rotateZ(0deg);
}

/* BOTTOM to UP ================================= */
/* Straight Transition bottom to up */
.inline-down {
   opacity: 0;
   transform: translateY(-0.5em);
   transition: transform 3s .25s cubic-bezier(0,1,.3,1),
   opacity .3s .25s ease-out;
   width: 100%;
   will-change: transform, opacity;
}

.inline-down.is-visible {
   opacity: 1;
   transform: rotateZ(0deg);
}

/* LEFT to RIGHT ================================= */
/*  Straight Transition bottom to up */
.inline-right {
   opacity: 0;
   transform: translateX(-4em);
   transition: transform 2s .25s cubic-bezier(0,1,.3,1),
   opacity .2s .25s ease-out;
   width: 100%;
   will-change: transform, opacity;
}

.inline-right.is-visible {
   opacity: 1;
   transform: rotateZ(0deg);
}

/* Growing bar ====================================*/
/* Blue Version of the bar:
 familiar: background: #37A0FF; color:#007CD4;
 proficient: background: #377BFF; color:#0055D4;
 expert: background: #4237FF; color:#1400D4;
 */
.bar-beginner{
   font-family: 'Poppins',sans-serif;
   color: #D4BA00;
   width: 10px;
   height: 40px;
   display: block;
   background: #FFDB37;
   transition: width 1s;
   opacity: 0;
}
.bar-beginner.is-visible{
   opacity: 1;
   width: 10%;
}

.bar-familiar{
   font-family: 'Poppins',sans-serif;
   color: #D47400;
   width: 10px;
   height: 40px;
   display: block;
   background: #FF9E37;
   transition: width 1s;
   opacity: 0;
   padding-left: 5px;
}
.bar-familiar.is-visible{
   opacity: 1;
   width: 40%;
}

.bar-proficient{
   font-family: 'Poppins',sans-serif;
   color: #D44D00;
   width: 10px;
   height: 40px;
   background: #FF7A37;
   display: block;
   transition: width 1s;
   opacity: 0;
   padding-left: 5px;
}
.bar-proficient.is-visible{
   opacity: 1;
   width: 60%;
}

.bar-expert{
   font-family: 'Poppins',sans-serif;
   color: #D41A00;
   width: 10px;
   height: 40px;
   display: block;
   background: #FF5237;
   transition: width 1s;
   opacity: 0;
   padding-left: 5px;
}
.bar-expert.is-visible{
   opacity: 1;
   width: 80%;
}

.bar-master{
   font-family: 'Poppins',sans-serif;
   color: #D42F00;
   width: 10px;
   height: 40px;
   display: block;
   background: #FF6237;
   transition: width 1s;
   opacity: 0;
   padding-left: 5px;
}
.bar-master.is-visible{
   opacity: 1;
   width: 90%;
}

/* Mobile Layout */
@media only screen and (max-width: 600px) {
   .bar-beginner{
      font-size: 19px;
      padding-top: 7px;
   }
   .bar-familiar{
      font-size: 19px;
      padding-top: 7px;
   }
   .bar-proficient{
      font-size: 19px;
      padding-top: 7px;
   }
   .bar-expert{
      font-size: 19px;
      padding-top: 7px;
   }
   .bar-master{
      font-size: 19px;
      padding-top: 7px;
   }
}