@keyframes load {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}

#processing {
  display: flex;
  justify-content: center;
  background-color: white;
}

#processingInfos,
#commercialVideoContainer {
  flex: 1;
  position: relative;
  text-align: center;
}

#processingInfos > div:first-child {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#loader {
  max-width: 50%;
  position: relative;
  animation: load 1s infinite;
}
#loader .st0 {
  fill: #ffffff;
}
#loader .st1 {
  fill: none;
  stroke: #00fff8;
  stroke-width: 36;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

#progressbar {
  width: 50%;
  margin: 20px auto;
  text-align: center;
}

#processingInfos .logoMoka {
  width: 50%;
  height: 100px;
  margin: 20px auto;
}
#commercialVideoContainer {
  position: relative;
}

#commercialVideo {
  width: 80%;
  position: relative;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

#progressButton {
  width: 100%;
}

@media (max-width: 1000px) {
  #processing {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  #progressbar {
    margin: 0 auto 20px auto;
  }

  #commercialVideo {
    width: 100%;
    height: 300px;
  }
}