/*! internal.css
 *
 *  Common styles for all internal pages
 *
 */

.header {
	margin-bottom: 3rem
}
.hero {
	padding-bottom: 2rem
}
.header.is-curved {
	margin-bottom: 0;
}
.header.is-curved .hero {
	padding-bottom: 0
}
.hero__content {
	margin-top: 3rem;
	margin-bottom: .5rem;
	width: 100%;
	text-align: center;
}
.hero__title {
	font-size: 2.22222rem;
	font-weight: 500;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	text-align: center;
	margin-bottom: .65rem;
}
.hero__desc {
	margin-left: auto;
	margin-right: auto;
	max-width: 32em;
	color: hsl(226, 81%, 93%);
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	text-align: center;
}
.content__wrapper {
	max-width: 978px
}
.page-catalog .bundles__title {
	margin-bottom: 1rem;
}
.page-catalog .bundles__header {
	margin-bottom: 3rem
}
.page-category .header + .wave-container {
	margin-bottom: 2rem
}
@media screen and (max-width: 43em) {
	.page-category .bundles__header {
		margin-bottom: 1.5rem
	}
	.page-category .bundles__title {
		max-width: 10em;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 40em) {
	.page-cart .hero__title {
		font-size: 2rem
	}
}
@media screen and (max-width: 37em) {
	.hero__title {
		font-size: 1.75rem;
	}
	.hero__desc {
		font-size: 1rem;
	}
	.hero__desc .line-block {
		display: inline;
	}
}
@media screen and (max-width: 36em) {
	.hero {
		padding-bottom: 1rem
	}
	.hero__content {
		margin-top: 2.25rem;
	}
	.header {
		margin-bottom: 2.5rem;
	}
}
@media screen and (max-width: 33em) {
	.page-cart .hero__title {
		margin-bottom: .5rem
	}
	.page-cart .hero__content {
		margin-top: 2rem;
		margin-bottom: 1rem;
	}
}
@media screen and (max-width: 25em) {
	.page-cart .hero__title {
		font-size: 1.75rem;
	}
}
@media screen and (max-width: 24em) {
	.page-cart .header {
		margin-bottom: 2rem;
	}
	.page-cart .hero {
		padding-bottom: 1rem;
	}
	.page-cart .hero__content {
		margin-top: 1.75rem;
	}
}
@media screen and (max-width: 22em) {
	.page-category .bundles__title,
	.page-cart .hero__title {
		font-size: 1.5rem;
	}
}
@media screen and (max-width: 21em) {
	.hero__title {
		font-size: 1.5rem;
		margin-bottom: .5rem;
	}
}
@media screen and (max-width: 20em) {
	body:not(.page-deal) .hero__title {
		margin-bottom: 0;
	}
	.page-faq .hero__title {
		margin-bottom: .75rem;
	}
}