.article-page{
	flex: 3 1 0;
	display:flex;
	justify-content: center;
	align-items:center;

}
.article-container{
	margin: 40px;
	background-color:#fefefe;
	display:flex;
	flex-direction:column;
	border-radius:5px;
	max-width:800px;
	box-shadow:  7px 7px 14px #3a444f,
             	-7px -7px 14px #404c57;
    overflow:hidden;
}
.article-h1 {
	display:block;
	background-color: var(--coolgreen);
	color:#333;
	font-size:30px;
	line-height:2rem;
	padding: 30px;
	text-transform:capitalize;
}



.card-title{
	font-size:1.2rem;
}
.image-div{
	height:200px;
	width:100%;
	background-size:cover;
	background-position:center;
	margin-bottom:40px;
}
.step-container{
	padding:0 30px;
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	align-items:center;
	flex-basis:100%;
	flex:1;
}

.step-num {
	margin:5px auto;
	display:block;
	background: #2c3849;
	color:#1ae9d3;
	border-radius:50%;
	width:2.2rem;
	height:2.2rem;
	font-size:1.3rem;
	font-weight:700;
	text-align:center;
	vertical-align:center;
	line-height:2.2rem;
}
.step{
	display:block;
	margin:20px auto;
	line-height:1.6rem;

	color:#555;
	font-weight: 400;
}
.step-gif{
	margin: 40px 0;
	width:350px;
	max-width:50vw;
	height:auto;
}

.article-button{
	min-width:100px;
	margin:auto;
	background-color:#2c3849;
	color:white;
	border-radius:5px;
	border:none;
	font-size:1.2rem;
	font-weight:300;
	padding:10px 20px;
	margin:30px auto 30px;
	cursor:pointer;
}


@media (max-width: 800px){
	.article-h1{
		font-size:26px;
	}

	.step-container{

	min-width:90vw;

	}
	.article-page{
		flex-basis:100%;
	}
	.article-container{
		max-width:90%;
		margin:20px 10px;
	}
}