html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #232630;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1681' height='388'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0%25' x2='0%25' y1='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%234F71E0' stop-opacity='0'/%3E%3Cstop offset='100%25' stop-color='%234560B6' stop-opacity='.35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='none' d='M.26 388c2.832-12.885 7.158-25.263 13.268-36.969 72.838-139.554 247.543-110.148 368.496-69.674 70.205 23.492 144.044 47.28 216.947 34.409C781.818 283.484 868.785 43.68 1050.61 6.063c77.166-15.965 156.315 8.585 231.287 32.856 86.968 28.153 175.307 56.971 250.652 108.731 75.344 51.759 137.219 130.655 146.548 221.58.64 6.243 1.023 12.501 1.203 18.77H.26Z'/%3E%3Cpath fill='url(%23a)' d='M.26 388c2.832-12.885 7.158-25.263 13.268-36.969 72.838-139.554 247.543-110.148 368.496-69.674 70.205 23.492 144.044 47.28 216.947 34.409C781.818 283.484 868.785 43.68 1050.61 6.063c77.166-15.965 156.315 8.585 231.287 32.856 86.968 28.153 175.307 56.971 250.652 108.731 75.344 51.759 137.219 130.655 146.548 221.58.64 6.243 1.023 12.501 1.203 18.77H.26Z'/%3E%3C/svg%3E");
  background-position: 50% calc(100% + 50px);
  background-repeat: no-repeat;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  position: relative;
}
.encode {
  text-align: center;
  margin-bottom: 120px;
}
p {
margin-bottom: 1rem;
}
h4 {
  margin-top: 0;
  margin-bottom: 1rem;
}
.encode-progress {
  height: 28px;
  box-sizing: border-box;
  border: 1px solid #3B4F8E;
  border-radius: 25px;
  background-color: rgba(12, 13, 14, 0.502);
  box-shadow: inset 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding: 7px;
  margin-bottom: 1rem;
}
.encode-progress span {
    display: block;
    height: 100%;
    width: 0;
      border-radius: 25px;
      background-color: #4E77FD;
      box-shadow: 12px 0px 28px 0px rgba(100, 136, 255, 0.75);

}
.encode-percent {
  text-align: center;
  color: #4f71e0;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 1.5rem;
}
.encode-time {
  color: rgba(255,255,255,.5);
}
.button {
  padding: 14px 32px;
  border-radius: 5px;
  border: 0;
  background-color: #4F71E0;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
}
.button:hover {
  background-color: #5679ea;
}
.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  text-align: center;
}
@media(max-width:767px){
  .encode img {
    width: 320px;
  }
}