* {
	box-sizing: border-box;
}

:root {
	--base-text-color: #3a3a3a;
	--link-color: #187474;
	--udc-accent-color: #C6007D;
}

body {
	background: #F3F3F3;
	margin: 0;
	color: var(--base-text-color);
	font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 15px;
	text-decoration: none;
}

@media only screen and (max-width: 500px) {
	body {
		background: #FFFFFF;
	}
}

/* Text styles */

h1 {
	font-size: 24px;
	font-weight: 600;
	text-transform: uppercase;
}

h2, h3 {
	font-weight: 600;
}

a {
	cursor: pointer;
	color: var(--link-color);
	font-weight: 600;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Layout */

#container {
	width: 100%;
	margin-inline: auto;
	text-align: left;
}

#header {
	display: flex;
	align-items: center;
	height: 80px;
	padding-inline: 16px;
	background-color: white;
}

#header a img {
	width: 197px;
}

@media only screen and (max-width: 500px) {
	#mainContentWrapper {
		padding-inline: 16px;
	}
}

#mainContent {
	margin: 24px auto;
}

@media only screen and (min-width: 501px) {
	#mainContent {
		padding: 24px;
		max-width: 55%;
		background: #FFF;
	}
}


/**/

input,
input[type="radio"] + label,
select {
	cursor: pointer;
}

.select {
	height: 30px;
}

@media only screen and (max-width: 500px) {
	.select {
		display: block;
		width: 100%;
	}
}

.radio + .radio {
	margin-top: 8px;
}

.searchLink {
	margin-top: 16px;
}

/**/

#footer {
	position: relative;
	float: left;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 24px;
}

.social {
	display: flex;
	gap: 8px;
}

/**/

.button {
	font-size: 16px;
	appearance: none;
	height: 32px;
	cursor: pointer;
}

.button.primary {
	color: #ffffff;
	background: var(--udc-accent-color);
  border: 1px solid var(--udc-accent-color);
}

.button.secondary {
	background-color: transparent;
	border: 1px solid;
}

.button + .button {
	margin-left: 8px;
}