div.progress-bar {
	width: 100%;
    height: 3em;
    border-radius: 0px;
    background-color: transparent;
    margin-bottom: 30px;
    /* border: 1px solid yellow; */
}
div.skill {
	float: left;
	width: 20%;
	/* min-width: 200px; */
	text-transform: uppercase;
	text-align: right;
	padding-right: 20px;
    color: var(--light_color);
	font-family: 'avenir-light';
	font-weight: lighter;
	font-size: 13px;
	line-height: 3em;
	overflow: hidden;
    /* border: 1px solid purple; */
}
div.total_bar {
	float: left;
    height: 15px;
	margin-top: calc(calc(3em - 15px) / 2);
	transform: translateY(-40%);
    width: calc(90% - 20%) !important;
    /* border: 1px solid blue; */
}
div.bar {
    background: linear-gradient(to right, var(--ponct_color), var(--ponct_color));
    height: 15px;
	/* transform: translateY(40%); */
    margin-left: -1px;
    border-radius: 0px;
    /* border: 1px solid blue; */
}
p.pourcentage {
    text-align: right;
	transform: translate(50px, -13%);
    font-family: 'avenir-light';
    color: var(--light_color);
    font-size: 0.9em;
    /* border: 1px solid red; */
}
@keyframes bar {
    from {
        width: 0%;
    }
    to {
        width: --larg;
    }
}
.bar-animation {
	animation-duration: 3s;
    animation-name: bar;
    animation-iteration-count: 1;
}

/* f(x)=100 (1-exp^(-0.01x)) */

div#sw{
    width: 97%;
    --larg: width;
}
div#catia {
    width: 85%;
    --larg: width;
}
div#DS3DX {
    width: 70%;
    --larg: width;
}
div#creo {
    width: 33%;
    --larg: width;
}
div#msoffice {
    width: 100%;
    --larg: width;
}
div#matlab{
    width: 78%;
    --larg: width;
}
div#python {
    width: 95%;
    --larg: width;
}
div#abaqus {
    width: 32%;
    --larg: width;
}
div#ansys {
    width: 92%;
    --larg: width;
}
div#patran {
    width: 86%;
    --larg: width;
}
div#nastran {
    width: 88%;
    --larg: width;
}
div#dymola {
    width: 58%;
    --larg: width;
}