*,
 :before,
 :after {
    box-sizing: border-box;
}

.button,
[class*='button-'] {
    background: #2196F3;
    display: inline-block;
    color: #fff;
    font: 200 0.9rem;
    text-decoration: none;
    text-align: left;
    transition: 0.5s linear all;
}


/* .button:hover,
[class*='button-']:hover {
  background: #82c4f8;
} */


/*#reset {
  margin: 5px 0 0 10px;
} */

.download {
    display: inline-block;
    cursor: pointer;
    position: relative;
    width: 6.50rem;
    height: 1.75rem;
    /*  margin: 0 auto; */
}

.mydownload {
    position: relative;
    width: 6.50rem;
    height: 1.75rem;
    transform-style: preserve-3d;
    transform-origin: 50% 50% 0;
    transform: rotateX(0deg);
    transition: 0.2s linear all;
}

.mydownload.is-active {
    transform: rotateX(90deg) translateZ(1rem);
}

.mydownload.is-active .meter-progress {
    right: 0%;
}

.button-download,
.meter {
    position: relative;
    width: 6.50rem;
    height: 1.75rem;
    font-size: 0.9rem;
    padding: 4px 6px;
    transform-origin: top center;
}

.meter {
    background: #C41564;
    overflow: hidden;
    transform: rotateX(270deg);
}

.meter:before,
.meter:after {
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

.meter:before {
    content: 'Downloading...';
    text-align: center;
    animation: white-pulse 0.5s infinite alternate;
}

.meter:after {
    content: 'Done!';
    display: none;
    color: #fff;
}

.meter.is-done:before {
    display: none;
}

.meter.is-done:after {
    display: block;
}

.meter .meter-progress {
    display: block;
    width: 100%;
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.15) 20%, rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0.15) 80%, rgba(0, 0, 0, 0.15) 90%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.2));
    transition: 1s linear all;
}

.icon-wrap {
    position: absolute;
    right: 0rem;
    top: 0;
    bottom: 0;
    width: 1.75rem;
    padding: 0.25rem 0.45rem;
    background: rgba(0, 0, 0, 0.1);
}

@keyframes white-pulse {
    from {
        color: rgba(255, 255, 255, 0.4);
    }
    to {
        color: rgba(255, 255, 255, 0.8);
    }
}