p.skill {
  margin: 0 !important;
}
p.skill-details {
  margin: 0 0 2em 0 !important;
  font-style: italic;
  display: none;
}

/* https://codepen.io/team/css-tricks/pen/PNNQxm */
/* Styling an indeterminate progress bar */

progress:not(value) {
  /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
  /* Get rid of the default appearance */
  appearance: none;

  /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
  border: none;

  /* Add dimensions */
  width: 100%;
  height: 20px;

  /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
  background-color: whiteSmoke;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5) inset;

  /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  color: royalblue;

  position: relative;
  margin: 0;
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
  background-color: whiteSmoke;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5) inset;
}

progress[value]::-webkit-progress-value {
  position: relative;

  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius: 3px;

  /* Let's animate this */
  /* animation: animate-stripes 5s linear infinite; */
}

/* @keyframes animate-stripes {
  100% {
    background-position: -100px 0;
  }
} */

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
  /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
  content: '';
  position: absolute;

  width: 5px;
  height: 5px;
  top: 7px;
  right: 7px;

  background-color: white;
  border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
  /* Gradient background with Stripes */
  /* background-image:
    -moz-linear-gradient(135deg,
    transparent,
    transparent 33%,
    rgba(0, 0, 0, .1) 33%,
    rgba(0, 0, 0, .1) 66%,
    transparent 66%),
    -moz-linear-gradient(top,
    rgba(255, 255, 255, .25),
    rgba(0, 0, 0, .2)),
    -moz-linear-gradient(left, #09c, #f44); */

  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius: 3px;

  /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
  background-color: whiteSmoke;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5) inset;

  /* Dimensions should be similar to the parent progress element. */
  width: 100%;
  height: 20px;
}

.progress-bar span {
  background-color: royalblue;
  border-radius: 3px;

  display: block;
  text-indent: -9999px;
}

p[data-value] {

  position: relative;
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
  content: attr(data-value) '%';
  position: absolute;
  right: 0;
}


/* Define for Mozilla and Webkit separate sections. The browsers do not accept that they are combined :-) */

/* paulp: calculated colors with https://www.hexcolortool.com/#328ec3 */

.html5::-moz-progress-bar,
.css3::-moz-progress-bar,
.grey100::-moz-progress-bar {
  background-color: #00598E;
}

.html5::-moz-progress-bar,
.css3::-moz-progress-bar,
.grey90::-moz-progress-bar {
  background-color: #1973A8;
}

.html5::-moz-progress-bar,
.css3::-moz-progress-bar,
.grey80::-moz-progress-bar {
  background-color: #328CC1;
}

.html5::-moz-progress-bar,
.css3::-moz-progress-bar,
.grey70::-moz-progress-bar {
  background-color: #4CA6DB;
}

.html5::-moz-progress-bar,
.css3::-moz-progress-bar,
.grey60::-moz-progress-bar {
  background-color: #65BFF4;
}

.html5::-moz-progress-bar,
.css3::-moz-progress-bar,
.grey50::-moz-progress-bar {
  background-color: #7FD9FF;
}



.html5::-webkit-progress-value,
.css3::-webkit-progress-value,
.grey100::-webkit-progress-value {
  background-color: #00598E;
}

.html5::-webkit-progress-value,
.css3::-webkit-progress-value,
.grey90::-webkit-progress-value {
  background-color: #1973A8;
}

.html5::-webkit-progress-value,
.css3::-webkit-progress-value,
.grey80::-webkit-progress-value {
  background-color: #328CC1;
}

.html5::-webkit-progress-value,
.css3::-webkit-progress-value,
.grey70::-webkit-progress-value {
  background-color: #4CA6DB;
}

.html5::-webkit-progress-value,
.css3::-webkit-progress-value,
.grey60::-webkit-progress-value {
  background-color: #65BFF4;
}

.html5::-webkit-progress-value,
.css3::-webkit-progress-value,
.grey50::-webkit-progress-value {
  background-color: #7FD9FF;
}

  /* THE END */