/*--------------------------------------------------------------
# Global Styles
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Header Styles
--------------------------------------------------------------*/
h1, h1 + p {
	margin: 0;
}


/*--------------------------------------------------------------
# Content Styles
--------------------------------------------------------------*/
.row {
	align-items: center;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	margin-bottom: 35px;
}

.row > .col {
	margin: 0;
}

.col-excerpt {
	background-color: #00a2df;
	color: #fff;
	padding: 35px;
	order: 1;
	transition: padding .5s ease-in-out 0s;
}

.col-img {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	order: 0;
}

.row > .col > h2 {
	border-bottom: 2px solid #fff;
	font-size: 28px;
	margin-bottom: 15px;
	padding-bottom: 5px;
	text-transform: uppercase;
}

.row > .col > h2,
.row > .col > p {
	font-weight: 300;
	margin-top: 0;
}

.more-btn {
	background-color: #fff;
	color: #00a2df;
	display: inline-block;
	padding: 10px 25px;
	text-transform: uppercase;
}

ul {
	margin-left: 0
}

ul > li {
	padding-bottom: 15px;
}

/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
@media screen and ( min-width: 768px ) {
	.row {
		align-items: stretch;
		flex-flow: row nowrap;
		justify-content: center;
		margin: 0;
	}

	.row:not(:last-of-type) {
		border-bottom: 15px solid #333
	}

	.row > .col {
		display: inline-block;
		flex: 1 1 50%;
		order: initial;
	}

	.col-img img {
		display: none;
	}
}

@media screen and ( min-width: 1400px ) {
	.col {
		min-height: 500px;
	}

	.row.img-right > .col-excerpt {
		padding-left: 20%;
	}

	.row.img-left > .col-excerpt {
		padding-right: 20%;
	}
}