*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	width: 100%;
	min-height: 100vh;
	background-color: #ffffff;
}
.container{
	position: relative;
	width: 100%;
	min-height: 100vh;
	padding: 30px 10%;
}
.container .main-title{
	max-width: 700px;
	margin: 0px auto;
	text-align: center;
	font-family: helvetica;
}
.container .main-title h1{
	position: relative;
	font-size: 40px;
	color: #050505;
	margin-bottom: 30px;
	display: inline-block;
}
.container .main-title h1::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	top: 125%;
	left: 0;
	background-color: #808080;
}
.container .main-title h1::after{
	content: '';
	position: absolute;
	width: 50%;
	height: 3px;
	background-color: #06eb78;
	top: calc(125% - 1px);
	left: 50%;
	transform: translateX(-50%);
}
.main-title p{
	color: #808080;
}
.container .row{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 70px;
}
.row .col{
	flex-basis: 46%;
}
.row .sub-title h2{
	position: relative;
	color: #242223;
	font-size: 22px;
	font-family: helvetica;
	display: inline-block;
	margin-bottom: 30px;
}
.row .sub-title h2::before{
	content: '';
	position: absolute;
	width: 50%;
	height: 1px;
	top: 125%;
	left: 0;
	background-color: #808080;
}
.row .sub-title h2::after{
	content: '';
	position: absolute;
	width: 25%;
	height: 3px;
	top: calc(125% - 1px);
	left: 0;
	background-color: #12cc60;
}
.subject{
	font-size: 18px;
	font-weight: thin;
	color: #808080;
	padding-bottom: 15px;
	text-transform: uppercase;
}
.progress-bar{
	position: relative;
	width: 100%;
	height: 5px;
	background-color: #808080;
	border-radius: 15px;
	margin-bottom: 20px;
}
.progress-bar::after{
	position: absolute;
	content: attr(value);
	top: -35px;
	right: 0;
	color: #808080;
	font-size: 18px;
}
.progress-line{
	position: absolute;
	width: 0%;
	height: 7px;
	background-color: #27ca18;
	border-radius: 15px;
	top: -1px;
	animation: animate 1.5s cubic-bezier(1, 0.2, 0.2, 1) forwards;
}
@keyframes animate{
	100%{
		width: 100%;
	}
}
.progress-line::after{
	content: '';
	position: absolute;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	top: 50%;
	left: 100%;
	transform: translate(-50%, -50%);
	background-color: #2b9411;
}
@media(max-width: 768px){
	.container{
		padding: 30px 8%;
	}
}
@media(max-width: 568px){
	.container .row{
		flex-direction: column;
	}
	.container .main-title h1{
		font-size: 36px;
	}
	.container .row{
		margin-top: 30px;
	}
	.row .col:nth-child(2){
		margin-top: 20px;
	}
}