body, html { 
  background: white;
  font-family: sans-serif;
  font-size: large;
  color: #8a8c8e; 
}

.content {
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
	height: 100vh;
}


.out {
	margin-top: 3px;
	width: 40vh;
	height: 35px;
    border-radius: 3px;
}

@keyframes pBar {
    0% { width: 0%; }

    100% { width: 60%; }
}

.pro-bar {
    background-color: grey;
    height: 35px;
    border-radius: 5px;
}

.pro-bar-innen {
  display: block;
  height: 35px;
  width: 0%;
  background-color: #f47d41;
  border-radius: 3px;
  position: relative;
  animation: pBar 2s 1 linear forwards;
}


@media only screen and (min-width: 992px) {
	.out {
		width: 70vh;
		height: 45px;
	
	}

	.pro-bar {
	    height: 45px;
	}	

	.pro-bar-innen {
 		height: 45px;
	}
}