body {
  background: #000;
  height: 100vh;
}

#ui {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -4px;
  transform: translate(-50%, -50%);
  transition: 100ms;
}

#ui .fire {
  position: relative;
  width: 800px;
  height: 500px;
  background: #ff9900;
  filter: blur(20px) contrast(30);
  border: 250px solid #000;
  border-bottom-color: transparent;
  border-radius: 40%;
  box-sizing: border-box;
  transform: scale(0.4, 1);
}
#ui .fire .burn {
  position: absolute;
  top: 500px;
  left: -50px;
  width: 100px;
  height: 100px;
  background: #000;
  border-radius: 100%;
}
#ui .fire .burn.heat:nth-child(1) {
  height: 2px;
}
#ui .fire .burn:nth-child(1) {
  height: 6px;
  margin-left: -29px;
  animation: burning 1477ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(2) {
  height: 8px;
}
#ui .fire .burn:nth-child(2) {
  height: 4px;
  margin-left: -83px;
  animation: burning 2102ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(3) {
  height: 7px;
}
#ui .fire .burn:nth-child(3) {
  height: 19px;
  margin-left: -119px;
  animation: burning 2143ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(4) {
  height: 9px;
}
#ui .fire .burn:nth-child(4) {
  height: 13px;
  margin-left: -89px;
  animation: burning 2576ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(5) {
  height: 4px;
}
#ui .fire .burn:nth-child(5) {
  height: 3px;
  margin-left: -134px;
  animation: burning 2843ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(6) {
  height: 8px;
}
#ui .fire .burn:nth-child(6) {
  height: 36px;
  margin-left: -57px;
  animation: burning 1578ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(7) {
  height: 3px;
}
#ui .fire .burn:nth-child(7) {
  height: 26px;
  margin-left: 28px;
  animation: burning 1244ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(8) {
  height: 10px;
}
#ui .fire .burn:nth-child(8) {
  height: 43px;
  margin-left: 136px;
  animation: burning 2202ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(9) {
  height: 10px;
}
#ui .fire .burn:nth-child(9) {
  height: 11px;
  margin-left: -151px;
  animation: burning 1346ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(10) {
  height: 1px;
}
#ui .fire .burn:nth-child(10) {
  height: 13px;
  margin-left: 107px;
  animation: burning 1863ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(11) {
  height: 9px;
}
#ui .fire .burn:nth-child(11) {
  height: 8px;
  margin-left: -133px;
  animation: burning 1970ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(12) {
  height: 5px;
}
#ui .fire .burn:nth-child(12) {
  height: 48px;
  margin-left: 64px;
  animation: burning 1205ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(13) {
  height: 9px;
}
#ui .fire .burn:nth-child(13) {
  height: 3px;
  margin-left: 4px;
  animation: burning 1633ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(14) {
  height: 8px;
}
#ui .fire .burn:nth-child(14) {
  height: 25px;
  margin-left: -69px;
  animation: burning 1985ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(15) {
  height: 3px;
}
#ui .fire .burn:nth-child(15) {
  height: 34px;
  margin-left: -146px;
  animation: burning 2055ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(16) {
  height: 7px;
}
#ui .fire .burn:nth-child(16) {
  height: 43px;
  margin-left: 242px;
  animation: burning 2853ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(17) {
  height: 8px;
}
#ui .fire .burn:nth-child(17) {
  height: 17px;
  margin-left: -110px;
  animation: burning 1368ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(18) {
  height: 7px;
}
#ui .fire .burn:nth-child(18) {
  height: 42px;
  margin-left: 5px;
  animation: burning 1109ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(19) {
  height: 4px;
}
#ui .fire .burn:nth-child(19) {
  height: 37px;
  margin-left: -37px;
  animation: burning 1058ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(20) {
  height: 5px;
}
#ui .fire .burn:nth-child(20) {
  height: 42px;
  margin-left: 40px;
  animation: burning 2719ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(21) {
  height: 4px;
}
#ui .fire .burn:nth-child(21) {
  height: 44px;
  margin-left: 55px;
  animation: burning 1788ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(22) {
  height: 8px;
}
#ui .fire .burn:nth-child(22) {
  height: 25px;
  margin-left: -4px;
  animation: burning 1013ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(23) {
  height: 9px;
}
#ui .fire .burn:nth-child(23) {
  height: 20px;
  margin-left: 64px;
  animation: burning 1117ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(24) {
  height: 4px;
}
#ui .fire .burn:nth-child(24) {
  height: 50px;
  margin-left: 82px;
  animation: burning 1371ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(25) {
  height: 10px;
}
#ui .fire .burn:nth-child(25) {
  height: 16px;
  margin-left: 152px;
  animation: burning 2715ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(26) {
  height: 5px;
}
#ui .fire .burn:nth-child(26) {
  height: 8px;
  margin-left: -3px;
  animation: burning 2918ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(27) {
  height: 10px;
}
#ui .fire .burn:nth-child(27) {
  height: 16px;
  margin-left: 131px;
  animation: burning 2415ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(28) {
  height: 6px;
}
#ui .fire .burn:nth-child(28) {
  height: 37px;
  margin-left: -225px;
  animation: burning 2237ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(29) {
  height: 8px;
}
#ui .fire .burn:nth-child(29) {
  height: 15px;
  margin-left: 247px;
  animation: burning 2795ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(30) {
  height: 1px;
}
#ui .fire .burn:nth-child(30) {
  height: 14px;
  margin-left: 33px;
  animation: burning 2876ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(31) {
  height: 10px;
}
#ui .fire .burn:nth-child(31) {
  height: 9px;
  margin-left: -15px;
  animation: burning 2978ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(32) {
  height: 1px;
}
#ui .fire .burn:nth-child(32) {
  height: 8px;
  margin-left: -186px;
  animation: burning 2099ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(33) {
  height: 5px;
}
#ui .fire .burn:nth-child(33) {
  height: 9px;
  margin-left: 42px;
  animation: burning 2921ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(34) {
  height: 4px;
}
#ui .fire .burn:nth-child(34) {
  height: 38px;
  margin-left: 1px;
  animation: burning 2684ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(35) {
  height: 3px;
}
#ui .fire .burn:nth-child(35) {
  height: 31px;
  margin-left: -71px;
  animation: burning 1315ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(36) {
  height: 10px;
}
#ui .fire .burn:nth-child(36) {
  height: 48px;
  margin-left: -200px;
  animation: burning 2070ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(37) {
  height: 9px;
}
#ui .fire .burn:nth-child(37) {
  height: 37px;
  margin-left: -17px;
  animation: burning 2472ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(38) {
  height: 6px;
}
#ui .fire .burn:nth-child(38) {
  height: 39px;
  margin-left: -86px;
  animation: burning 1374ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(39) {
  height: 5px;
}
#ui .fire .burn:nth-child(39) {
  height: 10px;
  margin-left: -55px;
  animation: burning 2195ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(40) {
  height: 9px;
}
#ui .fire .burn:nth-child(40) {
  height: 41px;
  margin-left: 218px;
  animation: burning 1901ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(41) {
  height: 7px;
}
#ui .fire .burn:nth-child(41) {
  height: 42px;
  margin-left: -219px;
  animation: burning 2985ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(42) {
  height: 4px;
}
#ui .fire .burn:nth-child(42) {
  height: 20px;
  margin-left: -188px;
  animation: burning 2267ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(43) {
  height: 5px;
}
#ui .fire .burn:nth-child(43) {
  height: 16px;
  margin-left: -151px;
  animation: burning 2185ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(44) {
  height: 9px;
}
#ui .fire .burn:nth-child(44) {
  height: 23px;
  margin-left: 107px;
  animation: burning 1663ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(45) {
  height: 5px;
}
#ui .fire .burn:nth-child(45) {
  height: 21px;
  margin-left: 57px;
  animation: burning 1087ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(46) {
  height: 7px;
}
#ui .fire .burn:nth-child(46) {
  height: 1px;
  margin-left: -237px;
  animation: burning 1242ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(47) {
  height: 6px;
}
#ui .fire .burn:nth-child(47) {
  height: 8px;
  margin-left: 106px;
  animation: burning 2611ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(48) {
  height: 10px;
}
#ui .fire .burn:nth-child(48) {
  height: 22px;
  margin-left: -202px;
  animation: burning 2248ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(49) {
  height: 2px;
}
#ui .fire .burn:nth-child(49) {
  height: 22px;
  margin-left: 195px;
  animation: burning 1411ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(50) {
  height: 3px;
}
#ui .fire .burn:nth-child(50) {
  height: 22px;
  margin-left: 78px;
  animation: burning 2229ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(51) {
  height: 4px;
}
#ui .fire .burn:nth-child(51) {
  height: 43px;
  margin-left: 96px;
  animation: burning 2403ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(52) {
  height: 4px;
}
#ui .fire .burn:nth-child(52) {
  height: 23px;
  margin-left: 71px;
  animation: burning 2458ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(53) {
  height: 9px;
}
#ui .fire .burn:nth-child(53) {
  height: 22px;
  margin-left: 241px;
  animation: burning 2306ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(54) {
  height: 9px;
}
#ui .fire .burn:nth-child(54) {
  height: 19px;
  margin-left: -203px;
  animation: burning 2756ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(55) {
  height: 9px;
}
#ui .fire .burn:nth-child(55) {
  height: 5px;
  margin-left: -149px;
  animation: burning 1170ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(56) {
  height: 5px;
}
#ui .fire .burn:nth-child(56) {
  height: 13px;
  margin-left: -127px;
  animation: burning 1079ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(57) {
  height: 6px;
}
#ui .fire .burn:nth-child(57) {
  height: 8px;
  margin-left: 78px;
  animation: burning 1159ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(58) {
  height: 5px;
}
#ui .fire .burn:nth-child(58) {
  height: 50px;
  margin-left: -116px;
  animation: burning 1718ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(59) {
  height: 4px;
}
#ui .fire .burn:nth-child(59) {
  height: 34px;
  margin-left: 111px;
  animation: burning 2160ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(60) {
  height: 5px;
}
#ui .fire .burn:nth-child(60) {
  height: 49px;
  margin-left: -189px;
  animation: burning 2783ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(61) {
  height: 9px;
}
#ui .fire .burn:nth-child(61) {
  height: 8px;
  margin-left: -190px;
  animation: burning 1525ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(62) {
  height: 1px;
}
#ui .fire .burn:nth-child(62) {
  height: 4px;
  margin-left: 38px;
  animation: burning 2883ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(63) {
  height: 10px;
}
#ui .fire .burn:nth-child(63) {
  height: 6px;
  margin-left: -213px;
  animation: burning 2456ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(64) {
  height: 5px;
}
#ui .fire .burn:nth-child(64) {
  height: 6px;
  margin-left: 118px;
  animation: burning 1136ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(65) {
  height: 9px;
}
#ui .fire .burn:nth-child(65) {
  height: 43px;
  margin-left: 180px;
  animation: burning 2740ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(66) {
  height: 5px;
}
#ui .fire .burn:nth-child(66) {
  height: 30px;
  margin-left: 189px;
  animation: burning 2106ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(67) {
  height: 2px;
}
#ui .fire .burn:nth-child(67) {
  height: 22px;
  margin-left: -49px;
  animation: burning 2695ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(68) {
  height: 3px;
}
#ui .fire .burn:nth-child(68) {
  height: 41px;
  margin-left: -13px;
  animation: burning 2058ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(69) {
  height: 8px;
}
#ui .fire .burn:nth-child(69) {
  height: 50px;
  margin-left: -211px;
  animation: burning 2082ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(70) {
  height: 5px;
}
#ui .fire .burn:nth-child(70) {
  height: 35px;
  margin-left: 24px;
  animation: burning 2411ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(71) {
  height: 4px;
}
#ui .fire .burn:nth-child(71) {
  height: 10px;
  margin-left: 249px;
  animation: burning 1006ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(72) {
  height: 3px;
}
#ui .fire .burn:nth-child(72) {
  height: 50px;
  margin-left: 128px;
  animation: burning 1795ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(73) {
  height: 9px;
}
#ui .fire .burn:nth-child(73) {
  height: 27px;
  margin-left: -181px;
  animation: burning 2116ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(74) {
  height: 9px;
}
#ui .fire .burn:nth-child(74) {
  height: 1px;
  margin-left: -5px;
  animation: burning 2392ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(75) {
  height: 3px;
}
#ui .fire .burn:nth-child(75) {
  height: 3px;
  margin-left: 42px;
  animation: burning 1337ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(76) {
  height: 5px;
}
#ui .fire .burn:nth-child(76) {
  height: 19px;
  margin-left: -11px;
  animation: burning 1771ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(77) {
  height: 2px;
}
#ui .fire .burn:nth-child(77) {
  height: 12px;
  margin-left: -149px;
  animation: burning 2347ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(78) {
  height: 7px;
}
#ui .fire .burn:nth-child(78) {
  height: 11px;
  margin-left: 13px;
  animation: burning 2898ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(79) {
  height: 9px;
}
#ui .fire .burn:nth-child(79) {
  height: 38px;
  margin-left: -133px;
  animation: burning 1204ms -3000ms infinite linear;
}
#ui .fire .burn.heat:nth-child(80) {
  height: 5px;
}
#ui .fire .burn:nth-child(80) {
  height: 3px;
  margin-left: 56px;
  animation: burning 2111ms -3000ms infinite linear;
}

@keyframes burning {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-600px);
  }
}














#one, #two, #three {
    background-color: rgb(14, 14, 14);
}

#slogan {
  background: rgba(255,255,255,0.4);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(0,0,0,0.4);
  min-width: 300px;
  text-align: center;
  width: 50vw;
  margin: 0 auto;
}


.container {
  padding: 50px 0;
  text-align: center;
}

.chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  text-align: center;
}

.chart figcaption {
  padding: 50px 25px;
  width: 100px;
  height: 50px;
  border: 20px solid #f0f0f0;
  border-radius: 100px;
  line-height: 50px;
}

.chart img {
  position: absolute;
  max-width: 100px;
  max-height: 100px;
  background: white;
}
/* END Container styles */

/* Colors for the circles and positions for the graphics */
.html {
  top: 50px;
  left: 45px;
}

.html + svg .outer {
  stroke: #e34f26;
}

.css {
  top: 55px;
  left: 48px;
}

.css + svg .outer {
  stroke: #0d84ce;
}

.javascript {
  max-width: 90px;
  max-height: 90px;
  top: 45px;
  left: 45px;
}

.javascript + svg .outer {
  stroke: #f0e040;
}

.node {
  width: 200px;
  height: 200px;
  top: 45px;
  left: 45px;
}

.node + svg .outer {
  stroke: #83cd29;
}

.chart svg {
  position: absolute;
  top: 0;
  left: 0;
}

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 20;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
}

.chart:hover .outer {
  stroke-dashoffset: 534 !important;
}
/* END Circle colors and graphic positions */


/* Set the initial values for the animation */
.chart[data-percent='100'] .outer {
  stroke-dashoffset: 0;
  -webkit-animation: show100 2s;
  animation: show100 2s;
}

.chart[data-percent='75'] .outer {
  stroke-dashoffset: 133;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}

.chart[data-percent='50'] .outer {
  stroke-dashoffset: 267;
  -webkit-animation: show50 2s;
  animation: show50 2s;
}

.chart[data-percent='25'] .outer {
  stroke-dashoffset: 401;
  -webkit-animation: show25 2s;
  animation: show25 2s;
}
/* END set initial animation values */

/* Keyframes for the initial animation */
@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 134;
  }
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 124;
  }
}

@-webkit-keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 267;
  }
}

@keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 267;
  }
}

@-webkit-keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 401;
  }
}

@keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 401;
  }
}
/* END Keyframes for the initial animation */

.bouton_produit {
  background-image: linear-gradient(-45deg, #a31603 0%, #cb1600 100%);
  border: none;
  color: #fff;
  padding: 10px 30px;
  border-radius: 50px;
  min-height: 50px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  margin-right: 40px;
  margin-top: -10px;
  margin-left: auto;
  cursor: pointer;
  }

.bouton_produit:hover {
  background-image: linear-gradient(-45deg, #da1a01 0%, #da1a01 100%);
  color: #fff;
  }

#pitit {
  font-size: 0.8rem;
  margin: -40px 0 0 20rem;
}

#pitit_g {
  font-size: 0.8rem;
  margin-top: -40px;
}

#one {
  padding-bottom: 0;
}

.image_de_lenfer {
  padding-top: 9rem;
}

.button {
  background: rgba(187, 187, 187, 0.4);
}

.button:hover {
  background: rgba(144, 144, 144, 0.075);
}