.window {
	display: flex;
	justify-content: center;
	font-size: 18px;
	font-family: 'Playfair+Display', sans-serif;
}

.flex-cont {
	height: 280px;
	width: 500px;
	position: absolute;
}

.title{
	line-height: 20px;
	position: absolute;
	font-weight: 300;
	color: #DB728D;
}

.site-name {
	font-weight: 400;
	color: #FFA8D2;
	padding: 5px 12px 5px 12px;
	background-color: #333333;
	border-radius: 30px;
	box-shadow: 0px 0px 50px #111111;
	margin-left: 3px;
}

.columns {
	margin: 0px;
	top: 60px;
	position: absolute;
}

.name-column {
	position: absolute;
	white-space: nowrap;
}

.name {
	color: #AAAAAF;
	line-height: 50px;
	font-weight: 400;
}

.name ul {
	list-style-type: none;
	padding: 0;
}

.bar-column {
	left: 140px;
	top: 38px;
	position: absolute;
	display: inline-block;
}

.bar {
	height: 8px;
	width: 260px;
	border-radius: 4px;
	background-color: #484B53;
	position: absolute;
}

.fill {
	height: 8px;
	border-radius: 4px;
	background-color: #FF8095;
	box-shadow: 0px 0px 30px #FF2AA6;
	position: absolute;
}

.fill-u {
	width: 180px;
	animation-name: filling-u;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: initial;
}

@keyframes filling-u {
	0% {
		box-shadow: 0px 0px 0px #FF2AA6;
		width: 0px;
	}
	100% {
		box-shadow: 0px 0px 30px #FF2AA6;
		width: 180px;
	}
}

.c-bar-p {
	margin-top: 50px;
}

.fill-p {
	width: 198px;
	animation-name: filling-p;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: initial;
}

@keyframes filling-p {
	0% {
		box-shadow: 0px 0px 0px #FF2AA6;
		width: 0px;
	}
	100% {
		box-shadow: 0px 0px 30px #FF2AA6;
		width: 198px;
	}
}
	
.c-bar-ns {
	margin-top: 100px;
}

.fill-ns {
	width: 130px;
	animation-name: filling-ns;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: initial;
}

@keyframes filling-ns {
	0% {
		box-shadow: 0px 0px 0px #FF2AA6;
		width: 0px;
	}
	100% {
		box-shadow: 0px 0px 30px #FF2AA6;
		width: 130px;
	}
}

.c-bar-br {
	margin-top: 150px;
}

.fill-br {
	width: 190px;
	animation-name: filling-br;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: initial;
}

@keyframes filling-br {
	0% {
		box-shadow: 0px 0px 0px #FF2AA6;
		width: 0px;
	}
	100% {
		box-shadow: 0px 0px 30px #FF2AA6;
		width: 190px;
	}
}

.num-column {
	left: 430px;
	position: absolute;
}

.number {
	color: #727681;
	line-height: 50px;
	font-weight: 300;
	animation-name: fade-in;
	animation-duration: 2s;
	animation-delay: 0s;
	animation-iteration-count: initial;
}

.number ul {
	list-style-type: none;
	padding: 0;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}