7min.css

body,html{margin:0;padding:0;width:100%;height:100%;background:#333;color:#fff;font-size:16px;font-family:Oswald,Helvetica,"sans-serif"}*{box-sizing:border-box}.animate .stage:before{-webkit-animation:a 40s linear;animation:a 40s linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.overlay{position:absolute;top:0;left:0;z-index:2;display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;background:rgba(51,51,51,.8);text-align:center;font-size:150px;padding:10px;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.overlay.on{display:-webkit-box;display:-ms-flexbox;display:flex}.overlay h1{font-size:56px}.overlay p{font-size:30px}.content{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}.content,.stages{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;height:100%}.stages{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;-webkit-box-orient:horizontal;-ms-flex-flow:row wrap;flex-flow:row wrap}.stages .stage{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;padding:5px;text-align:center;transition:all .5s;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}.stages .stage:before{position:absolute;top:0;left:0;display:block;width:0;height:100%;background:rgba(0,0,0,.3);content:""}.stages .stage .stage-title{position:relative;z-index:1;font-size:34px}.stages .stage .icons{z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex}.stages .stage .icons .fa{position:relative;padding:0 5px;opacity:.3}.stages .stage .icons .fa.on{opacity:1}.stages .stage .counter{position:relative;height:1em;line-height:1em;z-index:1}@media only screen and (min-width:769px){.stages .stage{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:12.5%;height:50%;font-size:28px}.stages .stage.active{width:62.5%}.stages .stage.active .counter,.stages .stage.active .icons,.stages .stage.active .stage-title{font-size:60px}.stages .stage .icons,.stages .stage .stage-title{padding:0 5px 10px}.stages .stage .counter{font-size:44px}}@media only screen and (max-width:768px){.stages .stage{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100%;height:auto;font-size:19px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.stages .stage .wrap{display:-webkit-box;display:-ms-flexbox;display:flex;padding-right:5px}.stages .stage .icons,.stages .stage .stage-title{padding:0 5px}.stages .stage .stage-title{font-size:24px}}.stages .stage.stage-1{background-color:#f6d258}.stages .stage.stage-1:before{-webkit-animation-delay:0s;animation-delay:0s}.stages .stage.stage-2{background-color:#efcec5}.stages .stage.stage-2:before{-webkit-animation-delay:40s;animation-delay:40s}.stages .stage.stage-3{background-color:#d1af94}.stages .stage.stage-3:before{-webkit-animation-delay:80s;animation-delay:80s}.stages .stage.stage-4{background-color:#97d5e0}.stages .stage.stage-4:before{-webkit-animation-delay:120s;animation-delay:120s}.stages .stage.stage-5{background-color:#88b14b}.stages .stage.stage-5:before{-webkit-animation-delay:160s;animation-delay:160s}.stages .stage.stage-6{background-color:#ef562d}.stages .stage.stage-6:before{-webkit-animation-delay:200s;animation-delay:200s}.stages .stage.stage-7{background-color:#d13076}.stages .stage.stage-7:before{-webkit-animation-delay:240s;animation-delay:240s}.stages .stage.stage-8{background-color:#5587a2}.stages .stage.stage-8:before{-webkit-animation-delay:280s;animation-delay:280s}.stages .stage.stage-9{background-color:#5c7148}.stages .stage.stage-9:before{-webkit-animation-delay:320s;animation-delay:320s}.stages .stage.stage-10{background-color:#0c4c8a}.stages .stage.stage-10:before{-webkit-animation-delay:360s;animation-delay:360s}.stages .stage.stage-11{background-color:#7539a9}.stages .stage.stage-11:before{-webkit-animation-delay:400s;animation-delay:400s}.stages .stage.stage-12{background-color:#ff954d}.stages .stage.stage-12:before{-webkit-animation-delay:440s;animation-delay:440s}.info{display:-webkit-box;display:-ms-flexbox;display:flex;height:36px;background:#333;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.info h3{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0;padding-left:10px;font-size:18px}.info .buttons{display:-webkit-box;display:-ms-flexbox;display:flex;padding-right:5px;width:100px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.info .buttons i{padding:0 10px;font-size:26px}.info .buttons i:hover{color:#d3d3d3;cursor:pointer}.info .buttons a{color:#fff;text-decoration:none;line-height:1em}@-webkit-keyframes a{0%{width:0}75%{background-color:rgba(0,0,0,.5)}76%{background-color:rgba(255,0,0,.5)}99%{background-color:rgba(255,0,0,.5)}to{width:100%;background-color:rgba(0,128,0,.75)}}@keyframes a{0%{width:0}75%{background-color:rgba(0,0,0,.5)}76%{background-color:rgba(255,0,0,.5)}99%{background-color:rgba(255,0,0,.5)}to{width:100%;background-color:rgba(0,128,0,.75)}}