/* -------------------------------------------------------------------
 * Plugin Name           : Download Button with Progress Bar
 * Author Name           : Epic_Theme
 * Author URI            : https://codecanyon.net/user/epic_theme/
 * Created Date          : 29 July 2022
 * Version               : 1.0
 * File Name             : style.css
------------------------------------------------------------------- */

/* ---------------------------------------------------------------- */
/* General 
/* ---------------------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
    -webkit-box-sizing: border-box;
          box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
.etContainer {
    min-height: 100vh;
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

/* ---------------------------------------------------------------- */
/* 01.Download Button with Progress Bar                                          
/* ---------------------------------------------------------------- */
.etProgressButton {
    position: relative;
    height: 95px;
    width: 360px;
    border-radius: 55px;
    overflow: hidden;
    color: #f0f0f0;
    background: #009392;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.etProgressButton.active {
    height: 20px;
    width: 500px;
}
.etProgressButton .etProgressBar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 5%;
    border-radius: inherit;
    color: inherit;
    background: #036463;
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
    animation: etProgressBarStripes 1s linear infinite;
}
.etProgressButton.active .etProgressBar {
    opacity: 1;
    animation: etLayer 6s ease-in-out forwards;
}
@-webkit-keyframes etProgressBarStripes {
  from { background-position: 55px 0; }
  to { background-position: 0 0; }
}
@keyframes etProgressBarStripes {
  from { background-position: 55px 0; }
  to { background-position: 0 0; }
}
@-webkit-keyframes etLayer {
    100% {
        width: 100%;
    }
}
@keyframes etLayer {
    100% {
        width: 100%;
    }
}
.etProgressButton .etProgressButtonContent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    transition-delay: 0.2s;
}
.etProgressButton.active .etProgressButtonContent {
    transform: translateY(60px);
}
.etProgressButton .etProgressButtonContent .etProgressButtonIcon,
.etProgressButton .etProgressButtonContent .etProgressButtonText {
    font-weight: 600;
    font-size: 40px;
}
.etProgressButton .etProgressButtonContent .etProgressButtonText {
    font-size: 28px;
    margin-left: 8px;
}

/* ---------------------------------------------------------------- */
/* Responsive max-width:767px;                                                
/* ---------------------------------------------------------------- */

@media (max-width:767px) {
    
}

/* ---------------------------------------------------------------- */
/* Responsive max-width: 400px;                                                
/* ---------------------------------------------------------------- */

@media (max-width: 400px) {
    
}