@font-face {
    font-family: 'PFD-Regular';
    src: url('PFDinDisplayPro-Regular.ttf') format('truetype');
}

* {
    box-sizing: border-box;
}

html {
	font-size: 16px;
	background: #f7f7f7;
	color: #202020;
	margin: 0;
    padding: 0;
}

html, input, select {
	font-weight: lighter;
	font-family: PFD-Regular,'Helvetica Neue',Helvetica,Arial,sans-serif;
}

body {
    margin: 0;
    padding: 0;
	display: flex;
	flex-wrap: wrap;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: lighter; text-transform: uppercase; }
h1 {
	background: #ff4700;
	color: #fff;
	font-size: 1.25em;
	padding: 0.8em;
	box-shadow: 0 -4px 4px 4px RGBA(0, 0, 0, 0.8);
	flex: 0 1 100%;
}
h2 { font-size: 1em; }
h3 { font-size: 1em; }

input {
	-webkit-appearance: none;
	outline: none;
	border-radius: 0.3em;
	border: 0.15em solid #717171;
	background: #fff;
	color: #202020;
	padding: 0.75em;
	
	transition: background-color 0.2s, border-color 0.2s, -webkit-transform 0.1s;
}
input:focus { border-color: ff4700; }
input[type=checkbox]:active, label:active + input[type=checkbox],
input[type=button]:active,
input[type=submit]:active { -webkit-transform: scale(0.9); }

input[type=button], input[type=submit] {
	padding: 0.25em;
	font-size: 1.2em;
	border-radius: 0.2em;
	flex: 1 1 auto;
	margin: 0 0.5em 0.5em;
}
input[type=submit] {
	background: #ff4700;
	border-color: #ff4700;
	color: #fff;
	flex-grow: 2;
}

input[type=checkbox] {
	-webkit-appearance: none;
	border-radius: 0.3em;
	border: 0.15em solid #717171;
	height: 1em;
	width: 1em;
	position: relative;
	outline: none;
}
input[type=checkbox]:checked {
	background: #ff4700;
	border-color: #ff4700;
}

input[type=checkbox]:after {
	content: " ";
	position: absolute;
	left: 0; right: 100%;
	top: 0; bottom: 0;
	background: url(check.svg);
	background-size: cover;
	transition: right 0 0.2s, -webkit-transform 0.2s;
	-webkit-transform: scale(0);
}
input[type=checkbox]:checked:after {
	right: 0;
	transition: right 0.2s 0.2s, -webkit-transform 0.2s;
	-webkit-transform: none;
}

select {
	-webkit-appearance: none;
	outline: none;
	border-radius: 0.3em;
	border: 0.15em solid #717171;
	background: url(dropdown.svg) no-repeat center right #ff4700;
	background-size: 1.5em;
	border-color: #ff4700;
	color: #fff;
	padding: 0.75em 1.375em 0.75em 0.75em;
}

select > option:not(:checked) {
	background: #fff;
	border-color: #717171;
	color: #202020;
}

.formgroup {
    flex: 0 1 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 1.1em 1.5625em 0;
}
.formgroup.sub {
	background: #fcfcfc;
	border: 1px solid #dbdbdb;
	font-size: 0.9em;
	flex: 0 1 auto;
	margin: 0.5em;
	padding: 0.55em 0.75em 0;
}

.formgroup h2 {
	flex: 0 1 100%;
    color: #ff4700;
}

.formgroup.sub h3 {
    flex: 0 1 100%;
}

.formrow { margin: 0.5em; flex: 0 1 100%; display: flex; justify-content: space-between; align-items: center; }
.formgroup.sub .formrow { margin: 0.55em 0; }

.formrow label { flex: 1 1 auto; }