#competences{
  width:100%;
  height:42em;
  background-image: url(../skill-button-1/css/planche-bois-projet.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 1em;
}

.radial-progress {
  display: inline-block;
  margin-left: 8%; /*mettre 5% pour la version mobile*/
  margin-top: 5%;
  cursor: crosshair;
}
.radial-progress, .bar, .content, .fill {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
}
.radial-progress:hover .bar {
  -moz-transform: scale(1.4) ;
  -ms-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}
.radial-progress:hover .content {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: all .4s;
}
.radial-progress:hover .fill {
  -moz-transform: scale(1.6);
  -ms-transform: scale(1.6);
  -webkit-transform: scale(1.6);
  transform: scale(1.6);
}

.bar {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  position: relative;
}
.bar .clip {
  width: 50%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}
.bar .fill {
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.content, .fill {
  position: absolute;
}
.content {
  font-family: Gill sans;
  font-style: bold;
  z-index: 10;
  color: white;
  box-shadow: 0em 0em 1.5em #000D2A;
  background-color: #1abc9c;
}

.content:hover {
  font-family: Gill sans;
  font-style: bold;
  z-index: 10;
  color: #1abc9c;
  box-shadow: 0em 0em 1.5em #000D2A;
  background-color: white;
}

.radial-progress #Font {
  position: relative;
  left: 0;
  right: 0;
  font-size: 3em;
  line-height: 100px;
}

.radial-progress .Font_maya,.radial-progress .Font_nuke,
.radial-progress .Font_web {
  position: relative;
  left: 0;
  right: 0;
  font-size: 2.5em;
  line-height: 100px;
}
.radial-progress .Font_zbrush {
  position: relative;
  left: 0;
  right: 0;
  font-size: 2.1em;
  line-height: 100px;
}

.radial-progress:hover .Font_ps{
  color: #1abc9c;
}

#bouton_ps .bar .fill.right {
  background-image: -moz-linear-gradient(0deg, #1abc9c 50%, #333333 50%);
  background-image: -webkit-linear-gradient(0deg, #1abc9c 50%, #333333 50%);
  background-image: linear-gradient(90deg, #1abc9c 50%, #333333 50%);
}
#bouton_ps .bar .fill.left {
  background-image: -moz-linear-gradient(0deg, #1abc9c 50%, #333333 50%);
  background-image: -webkit-linear-gradient(0deg, #1abc9c 50%, #333333 50%);
  background-image: linear-gradient(90deg, #1abc9c 50%, #333333 50%);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}