.hoverme{
	outline: 0;
	cursor: pointer;
	transition: all .3s ease;
}

.pop {
	position: absolute;
	top: 100px;
	opacity: 0;
	width: 0px;
	height: 0px;
	background: rgba(0, 0, 0);
	border-radius: 25px;
	border: solid;
	border-width: 1px; 
	border-color: #fff;
	cursor: default;
	display: block;
	z-index: -1;
	transition: all .4s ease;
}

#pop1 { text-align: center; width: 600px; height: 575px; }
#pop2 { text-align: center; width: 650px; height: 500px; }
#pop3 { text-align: center; width: 250px; height: 600px; }
#pop4 { text-align: center; width: 775px; height: 600px; }
#pop5 { text-align: center; width: 450px; height: 450px; }
#pop6 { text-align: center; width: 250px; height: 600px; }

 /* POP 1 Adjust */
 @media screen and (max-width: 630px) {
	.progress-bar-container {
		padding: 15px;
} }

 /* POP 1 Adjust */
 @media screen and (max-width: 766px) {
	#pop1 {
		right: -5%;
 } }

 @media screen and (max-width: 600px) {
	#pop1 {
		left: 0%;
		max-width: 100%;
		height: auto;
 } }

 @media screen and (max-width: 450px) {
	#pop1 {
		left: 0%;
		max-width: 100%;
		height: auto;
	}
}

 /* POP 2 Adjust */
 @media screen and (max-width: 1100px) {
	#pop2 {
		right: -50%;
 } }

 @media screen and (max-width: 990px) {
	#pop2 {
		right: 10%;
 } }

 @media screen and (max-width: 766px) {
	#pop2 {
		right: -10%;
 } }

 @media screen and (max-width: 650px) {
	#pop2 {
		left: 0%;
		max-width: 100%;
		height: auto;
 } }

 /* POP 3 Adjust */
 @media screen and (max-width: 630px) {
	#pop3 {
		max-width: 100%;
		height: auto;
 } }

 @media screen and (max-width: 300px) {
	#pop3 {
		left: 0%;
		max-width: 100%;
		height: auto;
 } }

/* POP 4 Adjust */
 @media screen and (max-width: 990px) {
	#pop4 {
		left: -10%;
 } }

 @media screen and (max-width: 766px) {
	#pop4 {
		left: -7%;
		max-width: 115%;
		height: auto;
 	}
 }

 @media screen and (max-width: 625px) {
	#pop4 {
		left: 5%;
		max-width: 90%;
		height: auto;
 	}

 }

 @media screen and (max-width: 335px) {
	#pop4 {
		left: 5%;
		max-width: 90%;
		height: auto;
 	}

 }

 /* POP 5 Adjust */
 @media screen and (max-width: 995px) {
	#pop5 {
		left: -35%;
 } }

 @media screen and (max-width: 766px) {
	#pop5 {
		left: 8%;
		max-width: 90%;
		height: auto;
 	}
 }

 @media screen and (max-width: 500px) {
	#pop5 {
		left: 5%;
		max-width: 90%;
		height: auto;
 	}
 }

  /* POP 6 Adjust */
  @media screen and (max-width: 630px) {
	#pop6 {
		max-width: 100%;
		height: auto;
 } }

 @media screen and (max-width: 300px) {
	#pop6 {
		left: 0%;
		max-width: 100%;
		height: auto;
 } }

.hover1{&:hover{background: rgba(#f6f6f6, .3); & > .pop{ opacity: 1; width: 600px; height: 575px; }}}
.hover2{&:hover{background: rgba(#f6f6f6, .3); & > .pop{ opacity: 1; width: 200px; height: 200px; }}}
.hover3{&:hover{background: rgba(#f6f6f6, .3); & > .pop{ opacity: 1; width: 350px; height: 250px; }}}
.hover4{&:hover{background: rgba(#f6f6f6, .3); & > .pop{ opacity: 1; width: 500px; height: 500px; }}}
.hover5{&:hover{background: rgba(#f6f6f6, .3); & > .pop{ opacity: 1; width: 500px; height: 500px; }}}
.hover6{&:hover{background: rgba(#f6f6f6, .3); & > .pop{ opacity: 1; width: 350px; height: 250px; }}}

/*--------------------------------*/
/* --------PROGRESS BAR 1---------*/
/*--------------------------------*/

.progressbar {
	position: relative;
	max-width: 500px;
	width: 100%;
	margin: 30px auto 0;
	height: 30px;
	border-style: solid;
	border-radius: 5px;
	border-width: 2px;
	border-color: #fff;
	background: #000;
	overflow: hidden;
  }
  
  span.progress {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 30px;
	background: #fff;
	transition: all .3s;
  }

/*--------------------------------*/
/* --------PROGRESS BAR 2---------*/
/*--------------------------------*/

  @property --progress-value {
	syntax: '<integer>';
	inherits: false;
	initial-value: 0;
  }
  
  /* Informatique */
  @keyframes windows-progress {
	to { --progress-value: 95; }
  }
  
  @keyframes apple-progress {
	to { --progress-value: 30; }
  }
  
  @keyframes linux-progress {
	to { --progress-value: 50; }
  }

  @keyframes ordinateur-progress {
	to { --progress-value: 90; }
  }

  @keyframes réseau-progress {
	to { --progress-value: 70; }
  }
  
  /* Programmation */
  @keyframes html-progress {
	to { --progress-value: 90; }
  }
  
  @keyframes css-progress {
	to { --progress-value: 55; }
  }
  
  @keyframes js-progress {
	to { --progress-value: 70; }
  }

  @keyframes php-progress {
	to { --progress-value: 70; }
  }

  @keyframes c-progress {
	to { --progress-value: 50; }
  }
  @keyframes bdd-progress {
	to { --progress-value: 85; }
  }

  /* Réseaux */
  @keyframes wan-progress {
	to { --progress-value: 50; }
  }
  
  @keyframes lan-progress {
	to { --progress-value: 80; }
  }
  
  @keyframes telecom-progress {
	to { --progress-value: 40; }
  }

  /* Bureautique */
  @keyframes word-progress {
	to { --progress-value: 90; }
  }
  
  @keyframes exel-progress {
	to { --progress-value: 70; }
  }
  
  @keyframes powerpoint-progress {
	to { --progress-value: 85; }
  }

  @keyframes publisher-progress {
	to { --progress-value: 85; }
  }

  @keyframes photoshop-progress {
	to { --progress-value: 70; }
  }
  
  @keyframes premiere-progress {
	to { --progress-value: 85; }
  }
  
  @keyframes after_effect-progress {
	to { --progress-value: 60; }
  }

  @keyframes audition-progress {
	to { --progress-value: 55; }
  }

  /* Technique */
  @keyframes lumière-progress {
	to { --progress-value: 90; }
  }
  
  @keyframes son-progress {
	to { --progress-value: 70; }
  }
  
  @keyframes vidéo-progress {
	to { --progress-value: 85; }
  }

  @keyframes plateau-progress {
	to { --progress-value: 65; }
  }

    /* Langues */
  @keyframes français-progress {
	to { --progress-value: 95; }
  }
  
  @keyframes anglais-progress {
	to { --progress-value: 55; }
  }
  
  @keyframes espagnol-progress {
	to { --progress-value: 45; }
  }

  .progress-bar {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	
	/* to center the percentage value */
	display: flex;
	justify-content: center;
	align-items: center;
  }

  /*
  .progress-bar::before {
	counter-reset: percentage var(--progress-value);
	content: counter(percentage) '%';
  }
  */

/* Informatique */
  .windows {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(0 173 239) calc(var(--progress-value) * 1%), rgb(0, 97, 135, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(35, 38, 39);
		-moz-box-shadow: 0px 0px 33px 0 rgb(0 173 239);
		box-shadow: 0px 0px 33px 0px rgb(0 173 239);
	animation: windows-progress 2s 1 forwards;
  }

  .windows::before {
	animation: windows-progress 2s 1 forwards;
  }
  
  .apple {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(255 255 255) calc(var(--progress-value) * 1%), rgba(255, 255, 255, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(255 255 255);
		-moz-box-shadow: 0px 0px 33px 0 rgb(255 255 255);
		box-shadow: 0px 0px 33px 0px rgb(255 255 255);
	animation: apple-progress 2s 1 forwards;
  }

  .apple::before {
	animation: apple-progress 2s 1 forwards;
  }
  
  .linux {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(237 157 5) calc(var(--progress-value) * 1%), rgba(142, 94, 4, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(237 157 5);
		-moz-box-shadow: 0px 0px 33px 0 rgb(237 157 5);
		box-shadow: 0px 0px 33px 0px rgb(237 157 5);
	animation: linux-progress 2s 1 forwards;
  }

  .linux::before {
	animation: linux-progress 2s 1 forwards;
  }

  .ordinateur {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(255 0 0) calc(var(--progress-value) * 1%), rgba(255, 0, 0, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(255 0 0);
		-moz-box-shadow: 0px 0px 33px 0 rgb(255 0 0);
		box-shadow: 0px 0px 33px 0px rgb(255 0 0);
	animation: ordinateur-progress 2s 1 forwards;
  }

  .ordinateur::before {
	animation: ordinateur-progress 2s 1 forwards;
  }

  .réseau {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(0, 255, 0) calc(var(--progress-value) * 1%), rgba(0, 255, 0, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(0 255 0);
		-moz-box-shadow: 0px 0px 33px 0 rgb(0 255 0);
		box-shadow: 0px 0px 33px 0px rgb(0 255 0);
	animation: réseau-progress 2s 1 forwards;
  }

  .réseau::before {
	animation: réseau-progress 2s 1 forwards;
  }

/* Programmation */
  .html {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(241, 89, 49) calc(var(--progress-value) * 1%), rgba(241, 89, 49, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(241, 89, 49);
		-moz-box-shadow: 0px 0px 33px 0 rgb(241, 89, 49);
		box-shadow: 0px 0px 33px 0px rgb(241, 89, 49);
	animation: html-progress 2s 1 forwards;
  }

  .html::before {
	animation: html-progress 2s 1 forwards;
  }

  .css {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(0, 125, 198) calc(var(--progress-value) * 1%), rgba(0, 125, 198, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(0, 125, 198);
		-moz-box-shadow: 0px 0px 33px 0 rgb(0, 125, 198);
		box-shadow: 0px 0px 33px 0px rgb(0, 125, 198);
	animation: css-progress 2s 1 forwards;
  }

  .css::before {
	animation: css-progress 2s 1 forwards;
  }

  .js {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(245, 130, 51) calc(var(--progress-value) * 1%), rgba(245, 130, 51, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(245, 130, 51);
		-moz-box-shadow: 0px 0px 33px 0 rgb(245, 130, 51);
		box-shadow: 0px 0px 33px 0px rgb(245, 130, 51);
	animation: js-progress 2s 1 forwards;
  }

  .js::before {
	animation: js-progress 2s 1 forwards;
  }

  .php {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(119, 123, 179) calc(var(--progress-value) * 1%), rgba(119, 123, 179, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(119, 123, 179);
		-moz-box-shadow: 0px 0px 33px 0 rgb(119, 123, 179);
		box-shadow: 0px 0px 33px 0px rgb(119, 123, 179);
	animation: php-progress 2s 1 forwards;
  }

  .php::before {
	animation: php-progress 2s 1 forwards;
  }

  .c {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(0, 68, 130) calc(var(--progress-value) * 1%), rgba(0, 68, 130, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(0, 68, 130);
		-moz-box-shadow: 0px 0px 33px 0 rgb(0, 68, 130);
		box-shadow: 0px 0px 33px 0px rgb(0, 68, 130);
	animation: c-progress 2s 1 forwards;
  }

  .c::before {
	animation: c-progress 2s 1 forwards;
  }
  
  .bdd {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(0, 255, 150) calc(var(--progress-value) * 1%), rgba(0, 255, 150, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(0, 255, 150);
		-moz-box-shadow: 0px 0px 33px 0 rgb(0, 255, 150);
		box-shadow: 0px 0px 33px 0px rgb(0, 255, 150);
	animation: bdd-progress 2s 1 forwards;
  }

  .bdd::before {
	animation: bdd-progress 2s 1 forwards;
  }

/* Réseaux */
  .wan {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(255, 255, 255) calc(var(--progress-value) * 1%), rgba(255, 255, 255, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(255, 255, 255);
		-moz-box-shadow: 0px 0px 33px 0 rgb(255, 255, 255);
		box-shadow: 0px 0px 33px 0px rgb(255, 255, 255);
	animation: wan-progress 2s 1 forwards;
  }

  .wan::before {
	animation: wan-progress 2s 1 forwards;
  }

  .lan {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(255, 255, 255) calc(var(--progress-value) * 1%), rgba(255, 255, 255, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(255, 255, 255);
		-moz-box-shadow: 0px 0px 33px 0 rgb(255, 255, 255);
		box-shadow: 0px 0px 33px 0px rgb(255, 255, 255);
	animation: lan-progress 2s 1 forwards;
  }

  .lan::before {
	animation: lan-progress 2s 1 forwards;
  }

  .telecom {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(255, 255, 255) calc(var(--progress-value) * 1%), rgba(255, 255, 255, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(255, 255, 255);
		-moz-box-shadow: 0px 0px 33px 0 rgb(255, 255, 255);
		box-shadow: 0px 0px 33px 0px rgb(255, 255, 255);
	animation: telecom-progress 2s 1 forwards;
  }

  .telecom::before {
	animation: telecom-progress 2s 1 forwards;
  }

/* Bureautique */
.word {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(24, 90, 189) calc(var(--progress-value) * 1%), rgba(24, 90, 189, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(24, 90, 189);
		-moz-box-shadow: 0px 0px 33px 0 rgb(24, 90, 189);
		box-shadow: 0px 0px 33px 0px rgb(24, 90, 189);
	animation: word-progress 2s 1 forwards;
  }

  .word::before {
	animation: word-progress 2s 1 forwards;
  }

  .exel {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(22, 133, 75) calc(var(--progress-value) * 1%), rgba(22, 133, 75, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(22, 133, 75);
		-moz-box-shadow: 0px 0px 33px 0 rgb(22, 133, 75);
		box-shadow: 0px 0px 33px 0px rgb(22, 133, 75);
	animation: exel-progress 2s 1 forwards;
  }

  .exel::before {
	animation: exel-progress 2s 1 forwards;
  }

  .powerpoint {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(198, 67, 32) calc(var(--progress-value) * 1%), rgba(198, 67, 32, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(198, 67, 32);
		-moz-box-shadow: 0px 0px 33px 0 rgb(198, 67, 32);
		box-shadow: 0px 0px 33px 0px rgb(198, 67, 32);
	animation: powerpoint-progress 2s 1 forwards;
  }

  .powerpoint::before {
	animation: powerpoint-progress 2s 1 forwards;
  }

  .publisher {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(5, 141, 144) calc(var(--progress-value) * 1%), rgba(5, 141, 144, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(5, 141, 144);
		-moz-box-shadow: 0px 0px 33px 0 rgb(5, 141, 144);
		box-shadow: 0px 0px 33px 0px rgb(5, 141, 144);
	animation: publisher-progress 2s 1 forwards;
  }

  .publisher::before {
	animation: publisher-progress 2s 1 forwards;
  }

  .photoshop {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(63, 197, 237) calc(var(--progress-value) * 1%), rgba(63, 197, 237, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(63, 197, 237);
		-moz-box-shadow: 0px 0px 33px 0 rgb(63, 197, 237);
		box-shadow: 0px 0px 33px 0px rgb(63, 197, 237);
	animation: photoshop-progress 2s 1 forwards;
  }

  .photoshop::before {
	animation: photoshop-progress 2s 1 forwards;
  }

  .premiere {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(235, 120, 255) calc(var(--progress-value) * 1%), rgba(235, 120, 255, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(235, 120, 255);
		-moz-box-shadow: 0px 0px 33px 0 rgb(235, 120, 255);
		box-shadow: 0px 0px 33px 0px rgb(235, 120, 255);
	animation: premiere-progress 2s 1 forwards;
  }

  .premiere::before {
	animation: premiere-progress 2s 1 forwards;
  }

  .after_effect {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(210, 145, 255) calc(var(--progress-value) * 1%), rgba(210, 145, 255, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(210, 145, 255);
		-moz-box-shadow: 0px 0px 33px 0 rgb(210, 145, 255);
		box-shadow: 0px 0px 33px 0px rgb(210, 145, 255);
	animation: after_effect-progress 2s 1 forwards;
  }

  .after_effect::before {
	animation: after_effect-progress 2s 1 forwards;
  }

  .audition {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(0, 227, 187) calc(var(--progress-value) * 1%), rgba(0, 227, 187, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(0, 227, 187);
		-moz-box-shadow: 0px 0px 33px 0 rgb(0, 227, 187);
		box-shadow: 0px 0px 33px 0px rgb(0, 227, 187);
	animation: audition-progress 2s 1 forwards;
  }

  .audition::before {
	animation: audition-progress 2s 1 forwards;
  }

  /* Technique */
.lumière {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(255, 255, 255) calc(var(--progress-value) * 1%), rgba(255, 255, 255, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(255, 255, 255);
		-moz-box-shadow: 0px 0px 33px 0 rgb(255, 255, 255);
		box-shadow: 0px 0px 33px 0px rgb(255, 255, 255);
	animation: lumière-progress 2s 1 forwards;
  }

  .lumière::before {
	animation: lumière-progress 2s 1 forwards;
  }

  .son {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(255, 255, 255) calc(var(--progress-value) * 1%), rgba(255, 255, 255, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(255, 255, 255);
		-moz-box-shadow: 0px 0px 33px 0 rgb(255, 255, 255);
		box-shadow: 0px 0px 33px 0px rgb(255, 255, 255);
	animation: son-progress 2s 1 forwards;
  }

  .son::before {
	animation: son-progress 2s 1 forwards;
  }

  .vidéo {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(255, 255, 255) calc(var(--progress-value) * 1%), rgba(255, 255, 255, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(255, 255, 255);
		-moz-box-shadow: 0px 0px 33px 0 rgb(255, 255, 255);
		box-shadow: 0px 0px 33px 0px rgb(255, 255, 255);
	animation: vidéo-progress 2s 1 forwards;
  }

  .vidéo::before {
	animation: vidéo-progress 2s 1 forwards;
  }

  .plateau {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(255, 255, 255) calc(var(--progress-value) * 1%), rgba(255, 255, 255, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(255, 255, 255);
		-moz-box-shadow: 0px 0px 33px 0 rgb(255, 255, 255);
		box-shadow: 0px 0px 33px 0px rgb(255, 255, 255);
	animation: plateau-progress 2s 1 forwards;
  }

  .plateau::before {
	animation: plateau-progress 2s 1 forwards;
  }

  .français {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(41, 54, 133) calc(var(--progress-value) * 1%), rgba(41, 54, 133, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(41, 54, 133);
		-moz-box-shadow: 0px 0px 33px 0 rgb(41, 54, 133);
		box-shadow: 0px 0px 33px 0px rgb(41, 54, 133);
	animation: français-progress 2s 1 forwards;
  }

  .français::before {
	animation: français-progress 2s 1 forwards;
  }

  .anglais {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(206, 17, 38) calc(var(--progress-value) * 1%), rgba(206, 17, 38, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(206, 17, 38);
		-moz-box-shadow: 0px 0px 33px 0 rgb(206, 17, 38);
		box-shadow: 0px 0px 33px 0px rgb(206, 17, 38);
	animation: anglais-progress 2s 1 forwards;
  }

  .anglais::before {
	animation: anglais-progress 2s 1 forwards;
  }

  .espagnol {
	background: 
	  radial-gradient(closest-side, black 75%, transparent 80% 100%),
	  conic-gradient(rgb(255, 196, 0) calc(var(--progress-value) * 1%), rgba(255, 196, 0, 0.5) 0);
	  	-webkit-box-shadow:0px 0px 33px 0 rgb(255, 196, 0);
		-moz-box-shadow: 0px 0px 33px 0 rgb(255, 196, 0);
		box-shadow: 0px 0px 33px 0px rgb(255, 196, 0);
	animation: espagnol-progress 2s 1 forwards;
  }

  .espagnol::before {
	animation: espagnol-progress 2s 1 forwards;
  }

  progress {
	visibility: hidden;
	width: 0;
	height: 0;
	border-radius: 50%;
  }