| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 | 
							- @font-face {
 
-   font-family: 'Open Sans';
 
-   font-style: normal;
 
-   font-weight: 300;
 
-   
 
- }
 
- @font-face {
 
-   font-family: 'Open Sans';
 
-   font-style: normal;
 
-   font-weight: 400;
 
-   }
 
- @font-face {
 
-   font-family: 'Open Sans';
 
-   font-style: normal;
 
-   font-weight: 600;
 
-   }
 
- * {
 
-   -webkit-box-sizing: border-box;
 
-   -moz-box-sizing: border-box;
 
-   box-sizing: border-box;
 
- }
 
- body {
 
-   padding: 20px;
 
-   background: #1a1a1a;
 
-   color: #DDD;
 
-   font-family: "Open Sans", sans-serif;
 
-   font-size: 17px;
 
-   font-weight: 400;
 
- }
 
- .progress-container, .progress {
 
-   border-radius: 20px;
 
- }
 
- .progress-container {
 
-   width: 40px;
 
-   height: 40px;
 
-   border: solid 1px #111;
 
-   background: #151515;
 
-   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
 
-   margin: 0 auto;
 
-   position: relative;
 
-   overflow: hidden;
 
- }
 
- .progress-container.done {
 
-   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 2px #0c8112;
 
- }
 
- .progress-container.done .progress {
 
-   background: #0f9816;
 
- }
 
- .progress-container.done .progress-overlay {
 
-   display: none;
 
- }
 
- .progress, .progress-overlay {
 
-   position: absolute;
 
- }
 
- .progress {
 
-   padding-left:50px;
 
-   background: #114baf;
 
-   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
 
-   z-index: 1;
 
-   bottom: 0;
 
-   text-align: center;
 
-   color: #151515;
 
-   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
 
-   font-weight: bold;
 
-   transition: background 250ms ease;
 
- }
 
- @keyframes uploadarrow {
 
-   0% {
 
-     bottom: 0%;
 
-     border-bottom-color: rgba(255, 255, 255, 0);
 
-   }
 
-   50% {
 
-     border-bottom-color: rgba(255, 255, 255, 0.1);
 
-   }
 
-   100% {
 
-     bottom: 100%;
 
-     border-bottom-color: rgba(255, 255, 255, 0);
 
-   }
 
- }
 
- @-webkit-keyframes uploadarrow {
 
-   0% {
 
-     bottom: 0%;
 
-     border-bottom-color: rgba(255, 255, 255, 0);
 
-   }
 
-   50% {
 
-     border-bottom-color: rgba(255, 255, 255, 0.1);
 
-   }
 
-   100% {
 
-     bottom: 100%;
 
-     border-bottom-color: rgba(255, 255, 255, 0);
 
-   }
 
- }
 
- .progress-overlay {
 
-   z-index: 2;
 
-   width: 0;
 
-   height: 100%;
 
-   bottom: 0;
 
-   left: 15px;
 
-   border: solid 20px transparent;
 
-   border-width: 0 25px 20px 25px;
 
-   border-bottom-color: rgba(255, 255, 255, 0.25);
 
-   -webkit-animation: uploadarrow 900ms infinite ease-out;
 
-   -moz-animation: uploadarrow 900ms infinite linear;
 
-   -o-animation: uploadarrow 900ms infinite linear;
 
-   animation: uploadarrow 900ms infinite linear;
 
- }
 
 
  |