@import url('//fonts.googleapis.com/css?family=Merriweather+Sans:400,700|Oswald:400,700');

html {
	font-size: 16px;
	line-height: 1.4rem;
}

::selection {
	background: #eceded;
	// color: #fff;
}
::-moz-selection {
	background: #eceded;
	// color: #fff;
}

body {
	margin: 0;
	font-family: 'Merriweather Sans', sans-serif;
}

a {
	color: blue;
}

img {
	// display: block;
	max-width: 100%;
}

header {
	background-color: #ba0c2f;
	padding: 2rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	   -ms-flex-align: center;
		  align-items: center;
}

header .logo img {
	max-width: 200px;
	// margin-right: 2.5rem;
}

header .separator {
	margin: 0 2rem;
}

header .separator img {
	max-width: 7px;
}

header h1 {
	margin: 0;
	text-transform: uppercase;
	font-size: 2.25rem; /* 36px */
	line-height: 2.5rem; /* 40px */
	font-weight: 700;
	color: rgba(255,255,255,.95);
	text-shadow: 0 1px 2px rgba(0,0,0,.3);
	letter-spacing: .03em;
}

footer {
	padding: 1rem 2rem;
	background: #0d0d0d;
	color: #fff;
	font-size: 0.875rem; /* 14px */
	line-height: 1.25rem; /* 20px */
}

footer a {
	color: rgba(255,255,255,.8);
	transition: all 100ms;
}
footer a:hover,
footer a:focus {
	color: rgba(255,255,255,.9);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
table,
blockquote,
pre{
	margin-top: 0;
	margin-bottom: 1.25rem; /* 20px */
}

table {
	margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	color: #554F47;
}

h1 {
	font-size: 2rem; /* 32px */
	line-height: 2.5rem; /* 40px */
}
 
h2 {
	font-size: 1.625rem; /* 26px */
	line-height: 2.5rem; /* 40px */
}
 
h3 {
	font-size: 1.375rem; /* 22px */
	line-height: 2.5rem; /* 40px */
}
 
h4 {
	font-size: 1.125rem; /* 18px */
	line-height: 2.5rem; /* 40px */
}
 
h5 {
	font-size: 1rem; /* 16px */
	line-height: 1.25rem; /* 20px */
}
 
h6 {
	font-size: 0.875rem; /* 14px */
	line-height: 1.25rem; /* 20px */
}

main {
	padding: 2rem;
}

input,
select,
button {
	font-family: 'Merriweather Sans', sans-serif;
}

input {
	border: solid 1px #ccc;
	border-radius: 2px;
	padding: .5rem;
	box-sizing: border-box;
}

input:invalid {
	border-color: #E4002B;
}

select {
	padding: .5rem 1rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: solid 1px #ccc;
	border-radius: 100px;
	background-color: #eee;
	width: 100%;
	box-sizing: border-box;
}

.button {
	padding: .5rem 1rem;
	border-radius: 2px;
	color: #fff;
	cursor: pointer;
	transition: all 100ms;
}

.button.button-primary {
	background-color: #ba0c2f;
}
.button.button-primary:hover,
.button.button-primary:focus {
	background-color: #a20a29;
}

.button.button-secondary {
	background-color: #404040;
}
.button.button-secondary:hover,
.button.button-secondary:focus {
	background-color: #262626;
}

.button.button-tertiary {
	background-color: #004E60;
}
.button.button-tertiary:hover,
.button.button-tertiary:focus {
	background-color: #003946;
}

#instructions {
	border: solid 1px #ebe9e2;
	border-radius: 2px;
	padding: 1rem;
	background-color: #f5f4f1;
	margin-bottom: 2rem;
}

#template {
	padding: 1rem;
	border: solid 1px #ccc;
	display: inline-block;
}
.signature {
	background-color: #fff;
	border: solid 1px #eee;
	border-radius: 2px;
	padding: 15px;
	transition: all 200ms;
}
.selected .signature {
	border-color: #004E60;	
}
.selected .option-title {
	color: #004E60;
}
#signature-output {
	display: none;
	padding: 1rem;
}
.option {
	padding: 1rem;
	cursor: pointer;
}
#signature-html {
	width: 100%;
	height: 200px;
	margin-bottom: 1rem;
}

.control-group {
	margin-bottom: .5rem;
}

.control-group label {
	display: block;
	margin-bottom: .25rem;
	font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    font-weight: 600;
}

*:focus {
    outline: none;
}

.control-group input {
	width: 100%;
	line-height: 1.25rem;
	transition: all 200ms;
}

.control-group input[type=checkbox] {
	width: auto;
}

.control-group input:focus, .control-group select:focus {
	border-color: #666;
}

.alert {
	background-color: #fff5cc;
	border: solid 1px #ffeb99;
	border-radius: 2px;
	padding: 1rem;
}

@media screen and (max-width: 48em) {
	header {
		display: block;
		text-align: center;
	}
	header .logo {
		margin: 0 auto 1rem;
		max-width: 200px;
	}
	header .separator {
		display: none;
	}
	header h1 {
		font-size: 2rem; /* 32px */
		line-height: 2.5rem; /* 40px */
	}
}