.important{
	width:100%;
	margin:10px;
	position: relative;
	padding: 5px;
    box-sizing: border-box;
	margin-left:auto;
	margin-right:auto;
	margin-top:7em;
	background: #f8f8f8;
}

.important h1.hp-name{
	background: transparent;
	text-align: left;
	width: auto;
	margin-bottom:2rem;
}

a.important-button{
	color: #ffffff;
	background-color: #EA5E0D;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: #EA5E0D;
	border-radius: 8px 8px 8px 8px;
	display: block;
    width: fit-content;
    padding: 15px 30px;
    margin-left: auto;
    margin-right: auto;
}

a.important-button:hover{
	color: #EA5E0D;
	background-color: rgba(255,255,255,0.01);
	text-decoration: none;
}

.hp-important-image{
	width: 100%;
    padding-top: 50%;
    background-position: center;
    background-size: cover;
	margin-top:2rem;
}

#hp-important-text{
	padding:1em;
	background:#f7f7f7;
	line-height: 1.7;
	font-weight: 400;
	font-size: 1.1rem;
}

.important:nth-child(2n) .hp-important-text{
	order:2;
}

.important:nth-child(2n) .hp-important-image{
	order:1;
}

@media screen and (min-width: 768px) {

	.important{
		display:flex;
		padding:0;
	}

	.hp-important-text{
		padding:1rem 3rem;
		width:50%;
	}

	.hp-important-image{
		width:50%;
		margin-top:0;
		padding-top:0;
	}

}