#progbarcontainer, .progbarcontainer {
    position: relative;
  }
  
  .image-container {
    background: url('https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1575&q=80');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 90%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  
  #progbarcontainer svg, .progbarcontainer svg {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 4px;
    /* set the progressbar starting point at the bottom */
    transform: rotate(180deg);
  }

  @media screen and (min-width: 480px) and (max-width: 768px) {
    #progbarcontainer svg, .progbarcontainer svg {
      width: 400px !important;
    }
  }
  @media screen and (max-width: 768px) {
    #progbarcontainer svg, .progbarcontainer svg {
      left: 50%;
      transform: translateX(-50%) rotate(180deg);
    }
  }
  @media screen and (max-width: 480px) {
    #progbarcontainer svg, .progbarcontainer svg {
      width: 84% !important;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 900px) {
    #progbarcontainer svg, .progbarcontainer svg {
      width: 300px !important;
    }
  }
  @media screen and (min-width: 900px) and (max-width: 1024px) {
    #progbarcontainer svg, .progbarcontainer svg {
      width: 355px !important;
    }
  }
  @media screen and (min-width: 1024px) {
    #progbarcontainer svg, .progbarcontainer svg {
      width: 410px !important;
    }    
  }
  @media screen and (min-width: 1200px) {
    #progbarcontainer svg, .progbarcontainer svg {
      width: 490px !important;
    }
  }
  @media screen and (min-width: 1440px) {
    #progbarcontainer svg, .progbarcontainer svg {
      width: 645px !important;
      top: 5px;
      right: 10px;
    }
  }

  /* iPads */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px)  { 
    #progbarcontainer svg, .progbarcontainer svg {
      left: unset;
      transform: rotate(180deg);
    }
  }