/* Reset
============================================================= */

html {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	font-size: 100%;
	line-height: 1;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*,
*:before,
*:after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-decoration: none;
	vertical-align: baseline;
	background: transparent;
}

img {
	max-width: 100%;
	height: auto;
	border-style: none;
	vertical-align: middle;
}

a {
	color: currentColor;
}

ol,
ul {
	list-style: none;
}

[type='button'],
[type='color'],
[type='date'],
[type='datetime-local'],
[type='email'],
[type='file'],
[type='month'],
[type='number'],
[type='password'],
[type='range'],
[type='reset'],
[type='search'],
[type='submit'],
[type='tel'],
[type='text'],
[type='time'],
[type='url'],
[type='week'],
select,
textarea,
button {
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
}

::placeholder {
	color: currentColor;
	opacity: .5;
}

table,
tr,
th,
td {
	border-collapse: collapse;
	border-spacing: 0;
	text-align: left;
}

/* Grid
============================================================= */

.row {
	display: flex;
	flex-flow: row wrap;
}

.col {
	display: block;
	flex: 1 1 0;
	width: auto;
}

.xs-0 {display: none}
.xs-1, .xs-2, .xs-3, .xs-4, .xs-5, .xs-6, .xs-7, .xs-8, .xs-9, .xs-10, .xs-11, .xs-12, .xs-min, .xs-max {display: block}
.xs-1, .xs-2, .xs-3, .xs-4, .xs-5, .xs-6, .xs-7, .xs-8, .xs-9, .xs-10, .xs-11, .xs-12, .xs-min {flex: none}
.xs-min, .xs-max {width: auto}
.xs-1 {width: 8.3333%}
.xs-2 {width: 16.6667%}
.xs-3 {width: 25%}
.xs-4 {width: 33.3333%}
.xs-5 {width: 41.6667%}
.xs-6 {width: 50%}
.xs-7 {width: 58.3333%}
.xs-8 {width: 66.6667%}
.xs-9 {width: 75%}
.xs-10 {width: 83.3333%}
.xs-11 {width: 91.6667%}
.xs-12 {width: 100%}
.xs-max {flex: 1 1 0}

@media (min-width: 32em) {
	.sm-0 {display: none}
	.sm-1, .sm-2, .sm-3, .sm-4, .sm-5, .sm-6, .sm-7, .sm-8, .sm-9, .sm-10, .sm-11, .sm-12, .sm-min, .sm-max {display: block}
	.sm-1, .sm-2, .sm-3, .sm-4, .sm-5, .sm-6, .sm-7, .sm-8, .sm-9, .sm-10, .sm-11, .sm-12, .sm-min {flex: none}
	.sm-min, .sm-max {width: auto}
	.sm-1 {width: 8.3333%}
	.sm-2 {width: 16.6667%}
	.sm-3 {width: 25%}
	.sm-4 {width: 33.3333%}
	.sm-5 {width: 41.6667%}
	.sm-6 {width: 50%}
	.sm-7 {width: 58.3333%}
	.sm-8 {width: 66.6667%}
	.sm-9 {width: 75%}
	.sm-10 {width: 83.3333%}
	.sm-11 {width: 91.6667%}
	.sm-12 {width: 100%}
	.sm-max {flex: 1 1 0}
}

@media (min-width: 48em) {
	.md-0 {display: none}
	.md-1, .md-2, .md-3, .md-4, .md-5, .md-6, .md-7, .md-8, .md-9, .md-10, .md-11, .md-12, .md-min, .md-max {display: block}
	.md-1, .md-2, .md-3, .md-4, .md-5, .md-6, .md-7, .md-8, .md-9, .md-10, .md-11, .md-12, .md-min {flex: none}
	.md-min, .md-max {width: auto}
	.md-1 {width: 8.3333%}
	.md-2 {width: 16.6667%}
	.md-3 {width: 25%}
	.md-4 {width: 33.3333%}
	.md-5 {width: 41.6667%}
	.md-6 {width: 50%}
	.md-7 {width: 58.3333%}
	.md-8 {width: 66.6667%}
	.md-9 {width: 75%}
	.md-10 {width: 83.3333%}
	.md-11 {width: 91.6667%}
	.md-12 {width: 100%}
	.md-max {flex: 1 1 0}
}

@media (min-width: 64em) {
	.lg-0 {display: none}
	.lg-1, .lg-2, .lg-3, .lg-4, .lg-5, .lg-6, .lg-7, .lg-8, .lg-9, .lg-10, .lg-11, .lg-12, .lg-min, .lg-max {display: block}
	.lg-1, .lg-2, .lg-3, .lg-4, .lg-5, .lg-6, .lg-7, .lg-8, .lg-9, .lg-10, .lg-11, .lg-12, .lg-min {flex: none}
	.lg-min, .lg-max {width: auto}
	.lg-1 {width: 8.3333%}
	.lg-2 {width: 16.6667%}
	.lg-3 {width: 25%}
	.lg-4 {width: 33.3333%}
	.lg-5 {width: 41.6667%}
	.lg-6 {width: 50%}
	.lg-7 {width: 58.3333%}
	.lg-8 {width: 66.6667%}
	.lg-9 {width: 75%}
	.lg-10 {width: 83.3333%}
	.lg-11 {width: 91.6667%}
	.lg-12 {width: 100%}
	.lg-max {flex: 1 1 0}
}

@media (min-width: 80em) {
	.xl-0 {display: none}
	.xl-1, .xl-2, .xl-3, .xl-4, .xl-5, .xl-6, .xl-7, .xl-8, .xl-9, .xl-10, .xl-11, .xl-12, .xl-min, .xl-max {display: block}
	.xl-1, .xl-2, .xl-3, .xl-4, .xl-5, .xl-6, .xl-7, .xl-8, .xl-9, .xl-10, .xl-11, .xl-12, .xl-min {flex: none}
	.xl-min, .xl-max {width: auto}
	.xl-1 {width: 8.3333%}
	.xl-2 {width: 16.6667%}
	.xl-3 {width: 25%}
	.xl-4 {width: 33.3333%}
	.xl-5 {width: 41.6667%}
	.xl-6 {width: 50%}
	.xl-7 {width: 58.3333%}
	.xl-8 {width: 66.6667%}
	.xl-9 {width: 75%}
	.xl-10 {width: 83.3333%}
	.xl-11 {width: 91.6667%}
	.xl-12 {width: 100%}
	.xl-max {flex: 1 1 0}
}

/* Utilities
============================================================= */

.container {
	width: 100%;
	max-width: 100%;
	margin: 3rem auto;
}

@media (min-width: 32em) {.container {max-width: calc(100% - 3rem)}}
@media (min-width: 48em) {.container {max-width: calc(100% - 6rem)}}
@media (min-width: 64em) {.container {max-width: calc(100% - 9rem)}}
@media (min-width: 80em) {.container {max-width: calc(100% - 12rem)}}
@media (min-width: 92em) {.container {max-width: 80rem}}

.p-full {padding: 1.5rem;}
.p-full-x {padding-left: 1.5rem; padding-right: 1.5rem}
.p-full-y {padding-top: 1.5rem; padding-bottom: 1.5rem}
.p-full-t {padding-top: 1.5rem}
.p-full-r {padding-right: 1.5rem}
.p-full-b {padding-bottom: 1.5rem}
.p-full-l {padding-left: 1.5rem}

.p-half {padding: .75rem}
.p-half-x {padding-left: .75rem; padding-right: .75rem}
.p-half-y {padding-top: .75rem; padding-bottom: .75rem}
.p-half-t {padding-top: .75rem}
.p-half-r {padding-right: .75rem}
.p-half-b {padding-bottom: .75rem}
.p-half-l {padding-left: .75rem}

/* Theme
============================================================= */

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');


:focus {
	outline: 0;
	box-shadow: 0 0 0 .1875rem rgba(255, 82, 0, .75);
}

.form__heading {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 2rem;
	line-height: 3rem;
	color: #161c21;
}

.form__input,
.form__select,
.form__textarea {
	display: block;
	width: 100%;
	padding: .625rem;
	background-color: #ffffff;
	border: .0625rem solid #e4e4e4;
	font-size: .875rem;
	line-height: 1.25rem;
	color: #161c21;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-style: normal;
}

.form__label {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: .875rem;
	line-height: 1.25rem;
	color: #73777a;
	display: block;
	width: 100%;
	padding-bottom: .5rem;
}

.form__select {
	padding-right: 2.25rem;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23ff5200" d="M8,12.4141.293,4.707,1.707,3.293,8,9.5859l6.293-6.293L15.707,4.707Z"/></svg>');
	background-repeat: no-repeat;
	background-size: .75rem .75rem;
	background-position: calc(100% - .75rem) 50%;
	cursor: pointer;
}

.form__textarea {
	min-height: 6.375rem;
	resize: vertical;
}

.form__footer {
	text-align: right;
}

.form__button {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-style: normal;
	line-height: .8125rem;
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .1375rem;
	box-shadow: 0 .3125rem .375rem rgba(0, 0, 0, .07);
	display: inline-block;
	text-align: center;
	padding: 1.5rem 2.5rem;
	background-color: #ffffff;
	color: #ff5200;
	border: 0.0625rem solid #f4f4f4;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color 100ms linear,
		color 100ms linear;
}

.form__button:hover {
	color: #ff6c00;
}

.form__button:focus {
	box-shadow:
		0 .3125rem .375rem rgba(0, 0, 0, .07),
		0 0 0 .1875rem rgba(255, 82, 0, .75);
}