* {box-sizing: border-box}


.Compet{
  width: 70%;
  padding: 20px 0 10% 0;
  margin-left: auto;
  margin-right: auto;
}
.stage{
  width: 90%;
  height: 90%;
  border: solid 2px #000;
  margin-top: 30px;
  height: 1500px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}
.separation{
  margin: 50px auto;
  width: 50%;
  height: 1px;
  background-color: #fff;
}
.stage h1{
float: left;
padding-top: 10px;
padding-left: 10px;
color: #003d99;
font-size: 30px;
}
.stage p{
padding-top: 70px;
text-align: left;
margin-left: auto;
margin-right: auto;
margin-bottom: 4px;
font-size: 20px;
font-weight: bold; 
}
.stage h2{
float: right;
padding-top: 10px;
padding-right: 10px;
color: #8f8f8f;
font-size: 30px;

}


.stage li{
  font-weight: bold; 
  padding-left: 3px;
}

.compet1{
    background-color: #fff;
}
.compet1 svg{
display: block;
}

#Competences{
  background-color: white;
}
.txtsc{
  text-transform: uppercase;
  padding: 10px 0 10px 0;
}
.boxtxtc{
  width: 10%;
  height: 10%;
  background-color: #000;
}

.container {
  width: 100%;
  background-color: #fff;
  border: solid 2px #000;
  display: relative;
}

.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.RI {
  width: 80%; 
  background-color: #353535; 
  display: inline-block;
  animation: RI 2s ease-out;
}
.html {
  width: 70%; 
  background-color: #606060;
  animation: html 2s ease-out;
}
.javascript {
  width: 30%; 
  background-color: #A0A0A0;
  animation: javascript 2s ease-out;
}

.css {
  width: 65%; 
  background-color: #808080;
  animation: css 2s ease-out;
}

.php {
  width: 20%; 
  background-color: #DBDBDB;
  animation: php 2s ease-out;
}

.c{
  width: 30%; 
  background-color: #C0C0C0;
  animation: c 2s ease-out;
}


@keyframes RI {
  0% {
    width: 0px;
  }
  100% {
    width: 80%;
  }
}

@keyframes html {
  0% {
    width: 0px;
  }
  100% {
    width: 70%;
  }
}
@keyframes css {
  0% {
    width: 0px;
  }
  100% {
    width: 65%;
  }
}
@keyframes php {
  0% {
    width: 0px;
  }
  100% {
    width: 20%;
  }
}
@keyframes javascript {
  0% {
    width: 0px;
  }
  100% {
    width: 30%;
  }
}
@keyframes c {
  0% {
    width: 0px;
  }
  100% {
    width: 30%;
  }
}
@media screen and (max-width:800px) {
.separation{
  margin: 20px auto 20px auto;
  width: 50%;
  height: 1px;
  background-color: #fff;

}
  .stage p{
padding-top: 50px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
}
  .stage li{
font-size: 13px;
}

.stage h1{
float: left;
padding-top: 10px;
padding-left: 10px;
color: #003d99;
font-size: 17px;
}
.stage h2{
float: right;
padding-top: 10px;
padding-right: 10px;
color: #8f8f8f;
font-size: 17px;

}
.stage{
  width: 90%;
  border: solid 2px #000;
  margin-top: 30px;
  height: 1050px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}