body { 
  background-color: #ffffff00 !important; 

}

.mainDiv {
    position: absolute;
    right: 1%;
    background-color: rgb(37, 150, 190);
    bottom: 20%;

    height: 38%;
    width: 15%;
    border-radius: 5px;
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.progressDiv {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


.centerText {
    text-align: center;
}

.stepper {
  position: relative;
  width: 100%;
  height: 30px;
  background: #4e4e4e;
  border: 1px solid #292929;
  cursor: col-resize;
}
 
.stepper .stepper-number:focus { outline: 1px solid #1baee1;  cursor: text }
 
.stepper-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: background-color 0.1s linear;
  transition: background-color 0.1s linear;
}
 
.stepper-number {
  position: relative;
  width: 100%;
  height: 28px;
  line-height: 28px;
  padding: 0 6px;
  color: #fff;
  background: transparent;
  border: 0;
  outline: 0;
  outline-offset: 0;
  cursor: col-resize;
  z-index: 2;
}
 
.stepper.is-changing .stepper-progress { background-color: #1baee1; }
 
.stepper.is-scrubbing { background: rgba(255, 255, 255, 0.8) }

/* 
.wrapper {
    width: 500px;
    height: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
    overflow: hidden;
} */

.wave {
    width: 100px;
    height: 50px;
    position: absolute;
    top: -25%;
    left: 50%;
    border-radius: 35%;
    /* background: rgba(255, 255, 255, .75); */
    animation: wave 15s infinite linear;
}

@keyframes wave {
    from { transform: rotate(0deg);}
    from { transform: rotate(360deg);}
}
  

h1 { color: #ffffff; font-family: 'Raleway',sans-serif; font-size: 62px; font-weight: 800; line-height: 72px; margin: 0 0 24px; text-align: center; text-transform: uppercase; }

h2 { color: #ffffff; font-family: 'Raleway',sans-serif; font-size: 30px; font-weight: 800; line-height: 36px; margin: 0 0 24px; text-align: center; }

p { color: #f8f8f8; font-family: 'Raleway',sans-serif; font-size: 18px; font-weight: 500; line-height: 32px; margin: 0 0 24px; }

a { color: #c8c8c8; text-decoration: underline; }

a:hover { color: #1c1c1c; text-decoration: underline; }