@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700");




:root {
	--space-unit: 1em;
	--space-xxxxs: calc(0.125*var(--space-unit));
	--space-xxxs: calc(0.25*var(--space-unit));
	--space-xxs: calc(0.375*var(--space-unit));
	--space-xs: calc(0.5*var(--space-unit));
	--space-sm: calc(0.75*var(--space-unit));
	--space-md: calc(1.25*var(--space-unit));
	--space-lg: calc(2*var(--space-unit));
	--space-xl: calc(3.25*var(--space-unit));
	--space-xxl: calc(5.25*var(--space-unit));
	--space-xxxl: calc(8.5*var(--space-unit));
	--space-xxxxl: calc(13.75*var(--space-unit));
	--component-padding: var(--space-md)
}

:root {
	--max-width-xxs: 32rem;
	--max-width-xs: 38rem;
	--max-width-sm: 48rem;
	--max-width-md: 64rem;
	--max-width-lg: 80rem;
	--max-width-xl: 90rem;
	--max-width-xxl: 120rem
}



.max-width-xxs {
	max-width: 32rem;
	max-width: var(--max-width-xxs)
}

.max-width-xs {
	max-width: 38rem;
	max-width: var(--max-width-xs)
}

.max-width-sm {
	max-width: 48rem;
	max-width: var(--max-width-sm)
}

.max-width-md {
	max-width: 64rem;
	max-width: var(--max-width-md)
}

.max-width-lg {
	max-width: 80rem;
	max-width: var(--max-width-lg)
}

.max-width-xl {
	max-width: 90rem;
	max-width: var(--max-width-xl)
}

.max-width-xxl {
	max-width: 120rem;
	max-width: var(--max-width-xxl)
}

.max-width-adaptive-sm {
	max-width: 38rem;
	max-width: var(--max-width-xs)
}

@media (min-width: 64rem) {
	.max-width-adaptive-sm {
		max-width: 48rem;
		max-width: var(--max-width-sm)
	}
}

.max-width-adaptive-md {
	max-width: 38rem;
	max-width: var(--max-width-xs)
}

@media (min-width: 64rem) {
	.max-width-adaptive-md {
		max-width: 64rem;
		max-width: var(--max-width-md)
	}
}

.max-width-adaptive,
.max-width-adaptive-lg {
	max-width: 38rem;
	max-width: var(--max-width-xs)
}

@media (min-width: 64rem) {
	.max-width-adaptive,
	.max-width-adaptive-lg {
		max-width: 64rem;
		max-width: var(--max-width-md)
	}
}

@media (min-width: 90rem) {
	.max-width-adaptive,
	.max-width-adaptive-lg {
		max-width: 80rem;
		max-width: var(--max-width-lg)
	}
}

.max-width-adaptive-xl {
	max-width: 38rem;
	max-width: var(--max-width-xs)
}

@media (min-width: 64rem) {
	.max-width-adaptive-xl {
		max-width: 64rem;
		max-width: var(--max-width-md)
	}
}

@media (min-width: 90rem) {
	.max-width-adaptive-xl {
		max-width: 90rem;
		max-width: var(--max-width-xl)
	}
}













.text-component {
	--line-height-multiplier: 1;
	--text-vspace-multiplier: 1
}

.text-component blockquote {
	padding-left: 1em;
	border-left: 4px solid hsl(240, 1%, 83%);
	border-left: 4px solid var(--color-contrast-low)
}

.text-component hr {
	background: hsl(240, 1%, 83%);
	background: var(--color-contrast-low);
	height: 1px
}

.text-component figcaption {
	font-size: 0.83333em;
	font-size: var(--text-sm);
	color: hsl(240, 1%, 48%);
	color: var(--color-contrast-medium)
}

.article.text-component {
	--line-height-multiplier: 1.13;
	--text-vspace-multiplier: 1.2
}

:root {
	--btn-font-size: 1em;
	--btn-font-size-sm: calc(var(--btn-font-size) - 0.2em);
	--btn-font-size-md: calc(var(--btn-font-size) + 0.2em);
	--btn-font-size-lg: calc(var(--btn-font-size) + 0.4em);
	--btn-radius: 0.25em;
	--btn-padding-x: var(--space-sm);
	--btn-padding-y: var(--space-xs)
}

.btn {
	--color-shadow: hsla(240, 8%, 12%, 0.15);
	--color-shadow: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);
	box-shadow: 0 4px 16px hsla(240, 8%, 12%, 0.15);
	box-shadow: 0 4px 16px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);
	cursor: pointer
}

.btn--primary {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.btn--accent {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.btn--disabled {
	opacity: 0.6
}

:root {
	--form-control-padding-x: var(--space-sm);
	--form-control-padding-y: var(--space-xs);
	--form-control-radius: 0.25em
}

.form-control {
	border: 2px solid hsl(240, 1%, 83%);
	border: 2px solid var(--color-contrast-low)
}

.form-control:focus {
	outline: none;
	border-color: hsl(220, 90%, 56%);
	border-color: var(--color-primary);
	--color-shadow: hsla(220, 90%, 56%, 0.2);
	--color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
	box-shadow: undefined;
	box-shadow: 0 0 0 3px var(--color-shadow)
}

.form-control:focus:focus {
	box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2);
	box-shadow: 0 0 0 3px var(--color-shadow)
}

.form-control[aria-invalid="true"] {
	border-color: hsl(355, 90%, 61%);
	border-color: var(--color-error)
}

.form-control[aria-invalid="true"]:focus {
	--color-shadow: hsla(355, 90%, 61%, 0.2);
	--color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2);
	box-shadow: undefined;
	box-shadow: 0 0 0 3px var(--color-shadow)
}

.form-control[aria-invalid="true"]:focus:focus {
	box-shadow: 0 0 0 3px hsla(355, 90%, 61%, 0.2);
	box-shadow: 0 0 0 3px var(--color-shadow)
}

.form-label {
	font-size: 0.83333em;
	font-size: var(--text-sm)
}

:root {
	--cd-color-1: hsl(225, 31%, 23%);
	--cd-color-1-h: 225;
	--cd-color-1-s: 31%;
	--cd-color-1-l: 23%;
	--cd-color-2: hsl(54, 42%, 95%);
	--cd-color-2-h: 54;
	--cd-color-2-s: 42%;
	--cd-color-2-l: 95%;
	--cd-color-3: hsl(54, 8%, 75%);
	--cd-color-3-h: 54;
	--cd-color-3-s: 8%;
	--cd-color-3-l: 75%;
	--cd-color-4: hsl(1, 84%, 63%);
	--cd-color-4-h: 1;
	--cd-color-4-s: 84%;
	--cd-color-4-l: 63%;
	--font-primary: 'PT Sans', sans-serif
}



.cd-article-link {
	color: hsl(225, 31%, 52.9%);
	color: hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*2.3));
	font-size: 0.83333em;
	font-size: var(--text-sm)
}

.cd-tabs {
	position: relative
}

@media (min-width: 48rem) {
	.cd-tabs {
		display: -ms-flexbox;
		display: flex
	}
}

@media (min-width: 64rem) {
	.cd-tabs {
		display: block
	}
}

@supports (background: linear-gradient(to left, #000, #000)) {
	.cd-tabs::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		height: 60px;
		width: 50px;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(to left, hsl(54, 42%, 95%), hsla(54, 42%, 95%, 0));
		background: linear-gradient(to left, var(--cd-color-2), hsla(var(--cd-color-2-h), var(--cd-color-2-s), var(--cd-color-2-l), 0));
		visibility: visible;
		opacity: 1;
		transition: opacity .3s 0s, visibility 0s 0s
	}
	@media (min-width: 48rem) {
		.cd-tabs::after {
			display: none
		}
	}
	.cd-tabs--scroll-ended::after {
		visibility: hidden;
		opacity: 0;
		transition: opacity .3s 0s, visibility 0s .3s
	}
}

.cd-tabs__navigation {
	background: hsl(54, 42%, 95%);
	background: var(--cd-color-2);
	--cd-color-shadow: hsla(54, 42%, 64.6%, 0.06);
	--cd-color-shadow: hsla(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*0.68), 0.06);
	box-shadow: inset 0 -2px 3px hsla(54, 42%, 64.6%, 0.06);
	box-shadow: inset 0 -2px 3px var(--cd-color-shadow)
}

@media (min-width: 48rem) {
	.cd-tabs__navigation {
		width: 80px;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		box-shadow: inset -2px 0 3px hsla(54, 42%, 64.6%, 0.06);
		box-shadow: inset -2px 0 3px var(--cd-color-shadow)
	}
}

@media (min-width: 64rem) {
	.cd-tabs__navigation {
		display: -ms-flexbox;
		display: flex;
		width: auto;
		background: transparent;
		box-shadow: none
	}
}

.cd-tabs__list {
	display: -ms-flexbox;
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch
}

.cd-tabs__list li {
	-ms-flex-negative: 0;
	flex-shrink: 0
}

@media (min-width: 48rem) {
	.cd-tabs__list {
		-ms-flex-direction: column;
		flex-direction: column
	}
}

@media (min-width: 64rem) {
	.cd-tabs__list {
		display: -ms-inline-flexbox;
		display: inline-flex;
		-ms-flex-direction: row;
		flex-direction: row;
		background-color: hsl(54, 42%, 95%);
		background-color: var(--cd-color-2);
		--cd-color-shadow: hsla(54, 42%, 64.6%, 0.06);
		--cd-color-shadow: hsla(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*0.68), 0.06);
		box-shadow: inset 0 -2px 3px hsla(54, 42%, 64.6%, 0.06);
		box-shadow: inset 0 -2px 3px var(--cd-color-shadow)
	}
	@media (min-width: 64rem) {
		.cd-tabs__list {
			box-shadow: inset 0 -2px 3px hsla(54, 42%, 64.6%, 0.06);
			box-shadow: inset 0 -2px 3px var(--cd-color-shadow)
		}
	}
}

.cd-tabs__item {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	height: 60px;
	width: 60px;
	font-size: 0.76388em;
	font-size: calc(var(--text-xs)*1.1);
	font-weight: 700;
	color: hsl(54, 8%, 75%);
	color: var(--cd-color-3);
	text-decoration: none
}

.cd-tabs__item:hover {
	color: hsl(225, 31%, 23%);
	color: var(--cd-color-1);
	background-color: hsla(54, 42%, 84.55%, 0.3);
	background-color: hsla(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*0.89), 0.3)
}

.cd-tabs__item .icon {
	margin-bottom: 0.25em;
	margin-bottom: var(--space-xxxs);
	color: inherit
}

@media (min-width: 48rem) {
	.cd-tabs__item {
		height: 80px;
		width: 80px
	}
}

@media (min-width: 64rem) {
	.cd-tabs__item {
		height: 60px;
		width: auto;
		padding: 0 2em;
		padding: 0 var(--space-lg);
		-ms-flex-direction: row;
		flex-direction: row
	}
	.cd-tabs__item .icon {
		margin-bottom: 0;
		margin-right: 0.375em;
		margin-right: var(--space-xxs)
	}
}

.js .cd-tabs__item--selected {
	background-color: hsl(0, 0%, 100%);
	background-color: var(--color-white);
	box-shadow: inset 0 2px 0 hsl(1, 84%, 63%);
	box-shadow: inset 0 2px 0 var(--cd-color-4);
	color: hsl(225, 31%, 23%);
	color: var(--cd-color-1)
}

.js .cd-tabs__item--selected:hover {
	background-color: hsl(0, 0%, 100%);
	background-color: var(--color-white)
}

.js .cd-tabs__item--selected .icon {
	color: hsl(1, 84%, 63%);
	color: var(--cd-color-4)
}

@media (min-width: 48rem) {
	.js .cd-tabs__item--selected {
		box-shadow: inset 2px 0 0 hsl(1, 84%, 63%);
		box-shadow: inset 2px 0 0 var(--cd-color-4)
	}
}

@media (min-width: 64rem) {
	.js .cd-tabs__item--selected {
		box-shadow: inset 0 2px 0 hsl(1, 84%, 63%);
		box-shadow: inset 0 2px 0 var(--cd-color-4)
	}
}

.cd-tabs__panels {
	background: hsl(0, 0%, 100%);
	background: var(--color-white);
	overflow: hidden
}

.cd-tabs__panel {
	padding: 1.25em;
	padding: var(--space-md);
	--line-height-multiplier: 1.14;
	--text-vspace-multiplier: 1.25
}

.cd-tabs__panel p {
	color: hsl(225, 31%, 63.02%);
	color: hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*2.74))
}

@media (min-width: 48rem) {
	.cd-tabs__panel {
		padding: 2em;
		padding: var(--space-lg)
	}
}

@media (min-width: 64rem) {
	.cd-tabs__panel p {
		font-size: 0.83333em;
		font-size: var(--text-sm)
	}
}

.js .cd-tabs__panel {
	display: none
}

.js .cd-tabs__panel--selected {
	display: block;
	-webkit-animation: cd-fade-in 0.5s;
	animation: cd-fade-in 0.5s
}

@-webkit-keyframes cd-fade-in {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}

@keyframes cd-fade-in {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}