section#progress {
	background-color: black;
}
.progression-bar {
    width: 100%;
    min-height: 800px;
    position: absolute;
    display: block;
	
}
.progressbar-wrapper {
    width: 300px;
    height: 60px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-500px, -300px);
}

.progressbar {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(0deg);
	
}

	
.side {
    width: 100%;
    height: 100%;
    background-color: rgba(254, 254, 254, 0.3);
	top: 0;
    left: 0;
    position: absolute;
  
}
.bottom {
    box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
    transform: rotateX(80deg);
    transform-origin: bottom;
}

.top {
    transform: translate(0, -100%) rotateX(80deg);
    transform-origin: bottom;
	perspective: 50px;
}

.back {
    transform: translate(0, -17%) translateZ(-60px) ;

    width: 100%;
    height: 100%;

	
}
.bar {
    height:100%;
    background-color: red;
    box-shadow: 5px 5px 50px 5px rgba(255, 0, 0, 0.5);
    width:70%;
	animation: bar 2s;
}
@keyframes bar {
	
	0%{
		width: 0%;
		}
		
	100%{
		width: 70%
		}

}

.prbar {
    width: 100%;
    min-height: 800px;
    position: absolute;
    display: block;
	perspective: 800px;
	
}
.prwrapper {
    width: 300px;
    height: 60px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-500px, -150px);
	perspective: 150x;
}

.pbar {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(0deg);

	
}

	
.s {
    width: 100%;
    height: 100%;
    background-color: rgba(254, 254, 254, 0.3);
	top: 0;
    left: 0;
    position: absolute;
  
}
.bottom {
    box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
    transform: rotateX(80deg);
    transform-origin: bottom;
}

.top {
    transform: translate(0, -100%) rotateX(80deg);
    transform-origin: bottom;
	perspective: 50px;
	box-shadow: 5px 0px 50px 5px rgba(90, 90, 90, 0.4);
}

.back {
    transform: translate(0, -17%) translateZ(-60px) ;
	box-shadow: 5px 5px 50px 5px grey;

    width: 100%;
    height: 100%;

	
}
.bar2 {
    height:100%;
    background-color: cyan;
    box-shadow: 5px 5px 50px 5px rgb(0, 255, 255, 0.5);
    width:30%;
	animation: bar2 2s;
}
@keyframes bar2 {
	
	0%{
		width: 0%;
		}
		
	100%{
		width: 30%
		}

}


.probar {
    width: 100%;
    min-height: 800px;
    position: absolute;
    display: block;
	perspective: 800px;
	
}
.prowrapper {
    width: 300px;
    height: 60px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-500px, -0px);
	perspective: 150x;
}

.pobar {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(0deg);

	
}

	
.d {
    width: 100%;
    height: 100%;
    background-color: rgba(254, 254, 254, 0.3);
	top: 0;
    left: 0;
    position: absolute;
  
}
.bottom {
    box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
    transform: rotateX(80deg);
    transform-origin: bottom;
}

.top {
    transform: translate(0, -100%) rotateX(80deg);
    transform-origin: bottom;
	perspective: 50px;
	box-shadow: 5px 0px 50px 5px rgba(90, 90, 90, 0.4);
}

.back {
    transform: translate(0, -17%) translateZ(-60px) ;
	box-shadow: 5px 5px 50px 5px grey;

    width: 100%;
    height: 100%;

	
}
.bar3 {
    height:100%;
    background-color: rgba(255, 0, 138, 0.9);
    box-shadow: 5px 5px 50px 5px rgba(255, 0, 138, 0.5);
    width:80%;
	animation: bar3 2s;
}
@keyframes bar3 {
	
	0%{
		width: 0%;
		}
		
	100%{
		width: 80%
		}

}

.progbar {
    width: 100%;
    min-height: 800px;
    position: absolute;
    display: block;
	perspective: 800px;
	
}
.progwrapper {
    width: 300px;
    height: 60px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-500px, 150px);
	perspective: 150x;
}

.pogbar {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(0deg);

	
}

	
.e {
    width: 100%;
    height: 100%;
    background-color: rgba(254, 254, 254, 0.3);
	top: 0;
    left: 0;
    position: absolute;
  
}
.bottom {
    box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
    transform: rotateX(80deg);
    transform-origin: bottom;
}

.top {
    transform: translate(0, -100%) rotateX(80deg);
    transform-origin: bottom;
	perspective: 50px;
	box-shadow: 5px 0px 50px 5px rgba(90, 90, 90, 0.4);
}

.back {
    transform: translate(0, -17%) translateZ(-60px) ;
	box-shadow: 5px 5px 50px 5px grey;

    width: 100%;
    height: 100%;

	
}
.bar4 {
    height:100%;
    background-color: rgba(101, 0, 255, 0.9);
    box-shadow: 5px 5px 50px 5px rgba(101, 0, 255, 0.5);
    width:20%;
	animation: bar4 2s;
}
@keyframes bar4 {
	
	0%{
		width: 0%;
		}
		
	100%{
		width: 20%
		}

}
.progrbar {
    width: 100%;
    min-height: 800px;
    position: absolute;
    display: block;
	perspective: 800px;
	
}
.progrwrapper {
    width: 300px;
    height: 60px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-500px, 300px);
	perspective: 150x;
}

.pogrbar {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(0deg);

	
}

	
.f {
    width: 100%;
    height: 100%;
    background-color: rgba(254, 254, 254, 0.3);
	top: 0;
    left: 0;
    position: absolute;
  
}
.bottom {
    box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
    transform: rotateX(80deg);
    transform-origin: bottom;
}

.top {
    transform: translate(0, -100%) rotateX(80deg);
    transform-origin: bottom;
	perspective: 50px;
	box-shadow: 5px 0px 50px 5px rgba(90, 90, 90, 0.4);
}

.back {
    transform: translate(0, -17%) translateZ(-60px) ;
	box-shadow: 5px 5px 50px 5px grey;

    width: 100%;
    height: 100%;

	
}
.bar5 {
    height:100%;
    background-color: rgba(255, 255, 4, 0.7);
    box-shadow: 5px 5px 50px 5px rgba(255, 255, 4, 0.3);
    width:40%;
	animation: bar5 2s;
}
@keyframes bar5 {
	
	0%{
		width: 0%;
		}
		
	100%{
		width: 40%
		}

}