.archive-page-container {
	padding-bottom: 40px;
}
#category-title {
	width: 100%;
	padding: 15px 0 17px;
	text-align: center;
	margin-bottom: 40px;
	background-image: url('../img/archive-title.jpg');
	background-position: center center;
	
	@media only screen and (min-width: $break-small) {
		padding: 25px 0 27px;
	}
	@media only screen and (min-width: $break-medium) {
		padding: 35px 0 37px;
	}
	h1 {
		color: #fff;
		font-size: 30px;
		line-height: 1;
		letter-spacing: -0.05em;
		margin: 0;
		
		@media only screen and (min-width: $break-small) {
			font-size: 40px;
		}
		@media only screen and (min-width: $break-medium) {
			font-size: 50px;
		}
		@media only screen and (min-width: $break-large) {
			font-size: 60px;
		}
		& + p {
			color: #fff;
			margin: 20px 0 0;	
		}
	}
	h2 {
		color: #fff;
		font-size: 40px;
		line-height: 1;
		letter-spacing: -0.05em;
		margin: 0;
	}
}
#archive-title {
	width: 100%;
	padding: 15px 0 17px;
	text-align: center;
	margin-bottom: 40px;
	background: $color3;
	@media only screen and (min-width: $break-small) {
		padding: 25px 0 27px;
	}
	@media only screen and (min-width: $break-medium) {
		padding: 35px 0 37px;
	}
	h1 {
		font-size: 25px;
		line-height: 1;
		letter-spacing: -0.05em;
		margin: 0;
		color: #fff;
		@media only screen and (min-width: $break-small) {
			font-size: 30px;
		}
		@media only screen and (min-width: $break-medium) {
			font-size: 35px;
		}
		@media only screen and (min-width: $break-large) {
			font-size: 40px;
		}
		
		span {
			font-weight: 600;
			text-transform: uppercase;
			color: $color3;
			display: block;
			margin-top: 10px;
			
			@media only screen and (min-width: $break-small) {
				display: inline;
				margin: 0;
			}
		}
	}
}