:root {
	--body-background-colour: #ffffff;
	--body-text-colour: #000000;
	--body-font-size: 150%;
	--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	--body-text-line-height: 1.4;
	--main-background-colour: #f9f9f9;
	--footer-background-colour: #edeef1;
	--apply-button-background: #5f5f5f;
	--apply-button-acuspire-background: #aaa;
	--apply-button-colour: white;
	--apply-button-padding: 0.4em 1.6em;
	--apply-button-border-radius: 0.3em;
	--apply-button-font-size: 1em;
	--footer-link-colour: #555;
}

html {
	height: 100%;
}

body {
	background-color: var(--body-background-colour);
	color: var(--body-text-colour);
	font-family: var(--body-font-family);
	font-size: var(--body-font-size);
	height: inherit;
	display: flex;
	flex-direction: column;
}

#tabs {
    border-bottom: 1px solid #ddd;
}

#tabs a {
    text-decoration: none;
    display: inline-block;
    margin: 0 0 -1px;
    padding: 15px 25px;
    font-weight: 600;
    text-align: center;
    color: #bbb;
    border: 1px solid transparent;
}

#tabs a:before {
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 10px;
}

#tabs a.tab1:before { content: '\f0b1'; }
#tabs a.tab2:before { content: '\f05a'; }
#tabs a.tab3:before { content: '\f279'; }

.website:before {
    font-family: FontAwesome;
    font-weight: normal;
    margin:0 5px 0 25px;
    content: '\f0ac';
}

#tabs a:hover {
    color: #888;
    cursor: pointer;
}

#tabs a.active {
    color: #555;
    border: 1px solid #ddd;
    border-top: 2px solid #004646;
    border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
    display: block;
}

@media screen and (max-width: 650px) {
    #tabs a {
        font-size: 0;
    }
    #tabs a:before {
        margin: 0;
        font-size: 18px;
    }
}

@media screen and (max-width: 400px) {
    #tabs a {
        padding: 15px;
    }
}

/***
Tabs end
 */

label {
	cursor: pointer;
}

p {
    margin:0 0 15px 0;
}

.logo {
    display:block;
}

.logo-image {
	max-height:9.5em;
}

fieldset legend {
	text-transform: uppercase;
}

.wrapper {
	max-width: 60em;
	margin: 0 auto;
	padding:0.5em 1em;
	box-sizing: border-box;
}

[role=banner] {
	margin:0;
}

[role=search] {
	padding: 1em 0;
}

main {
	background-color: var(--main-background-colour);
	flex: 1;
}

.filter-title {
	font-size: 1.8em;
	text-transform: uppercase;
	font-weight: 500;
	opacity: 0.5;
}

[role=contentinfo] {
	text-align: center;
	background-color: var(--footer-background-colour);
	padding:0.5em 0;
	box-sizing: border-box;
}

.job, .job-title-container {
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
}

.job-actions {
    display:flex;
}

.job-posting.detail section ul {
    list-style-type: disc;
    margin: 0 0 0 15px;
    padding: 0;
    list-style-position: inherit;
}

.job-actions .action + .action { margin-left: 1em; }

.alert-message{
    display:block;
    text-align:center;
    border: 1px solid rgb(124, 221, 119);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
    background-color: rgb(188, 245, 188);
    padding:10px;
}

.job-summary {
	margin: 1.5em 0;
}
.job-title {
	font-size: 1.5em;
	opacity: 0.75;
	font-weight: initial;
    flex: 1;
}

.job-link {
	text-decoration: none;
}

.job-link:hover {
    text-decoration:underline;
}

.job-meta dd {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.job-meta dd ~ dd {
	margin-left: 1em;
}

.job-meta {
	margin: 2em 0;
	opacity: 0.5;
	font-weight: 500;
}

[itemprop=address] {
	font-style: initial;
}

.meta-links {
    display:flex;
    justify-content: center;
}

.meta-links, .form-actions {
	margin: 2.5em 0;
}

a.apply-link, .apply-link:visited, a.apply-button {
	border: none;
	cursor: pointer;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--apply-button-colour);
	padding: var(--apply-button-padding);
	background: var(--apply-button-background);
	border-radius: var(--apply-button-border-radius);
	font-size: var(--apply-button-font-size);
	display: inline-block;
    text-align: center;
}

a.apply-button, a.apply-button-acuspire {
    min-width:158px;
}

a.apply-button-acuspire {
    background: #fff;
    color: #444;
    border:1px solid #444;
    text-transform: inherit;
    letter-spacing: 0;
    height: 36px;
    padding: 6px 106px 6px 20px;
    position:relative;
}

a.apply-button-acuspire:hover {
    color: var(--apply-button-acuspire-background);
    border: 1px solid var(--apply-button-acuspire-background);
}

a.apply-button-acuspire img {
    position: absolute;
    right: 15px;
    top:9px;
}

hr {
	width: 5em;
	margin: 1em 0;
	height: 1px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	opacity: 0.5;
}

h3 {
    margin:20px 0 5px 0;
}

#skills li {
    background:#3097D1;
    padding: 1px 8px;
    margin: 2px;
    line-height: 26px;
    display: inline-block;
    color:#fff;
}

.acuspire-logo {
	max-height: 2em;
	display: inline-block;
	vertical-align: middle;
}

.heading {
    text-align: center;
    margin: 0 0 10px 0;
    font-size: 21px;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
button.btn-continue {
    width:100%;
}
.btn-continue {
    color:#fff;
    padding:12px;
    border-radius:3px;
    text-decoration:none;
    font-weight:bold;
    display:block;
    text-align:center;
    margin:0 0 10px 0;
}

.errors-1 {
    border:1px solid #ED1C24;
    background-color:#f2dede;
}

.btn-red {
    background:#ED1C24;
}

.btn-red:hover {
    background:#f12f36;
}

.btn-blue {
    background:#2f6af3;
}

.btn-blue:hover {
    background:#326ffd;
}

.footer-meta {
	display: inline-block;
    margin: 0;
    padding: 10px 0;
}

.footer-meta a {
	color: var(--footer-link-colour);
    text-decoration: none;
    border: 1px solid #aaa;
    border-radius: 21px;
    padding: 13px 50px;
    margin: 10px;
    background: #f6f6f6;;
}

.footer-meta a:hover {
    background: #fff;
}

.footer-meta img {
    margin:10px 0 -5px 0;
}

[itemprop=title] {
    flex: 1;
    font-size: 2.3em;
    opacity: 0.7;
    font-weight: 400;
}

.form-field.required .form-field-label:after {
	content: "*";
	display: inline-block;
	vertical-align: top;
	margin: 0 0 0 0.3em;
	font-size: 85%;
	color: red;
}

.form-field-label {
	cursor: pointer;
	margin: 1em 0;
	display: inline-block;
	flex: 0.4;
}

.form-field input, .form-field textarea {
	width: 100%;
	display: block;
	padding: 0.3em 0.5em;
}

.form-field {
	margin: 1em 0;
}

.form-field-controls {
	flex: 1;
}

.form-section > legend , .form-section-inline > legend {
	font-weight: 500;
	text-transform: uppercase;
	margin: 2em 0;
	font-size: 1.25em;
	opacity: 0.6;
}

.form-section-inline .form-field {
	display: inline-block;
}

.form-section-inline .form-field + .form-field {
	margin-left: 1em;
}

[role=search] select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	border: 0.1em solid #ccc;
	position: relative;
	padding: 0.4em 1.4em 0.4em 0.6em;
	box-sizing: border-box;
	text-transform: uppercase;
	cursor: pointer;
}

[role=search] select::-ms-expand {
	display: none;
}

[role=search] .form-field {
	position: relative;
	opacity: 0.75;
}

[role=search] legend {
	float: left; /* We can't use display: inline-block here due to a weird quirk: https://stackoverflow.com/questions/5818960/why-wont-my-legend-element-display-inline */
	margin: 1em 1em 1em 0;
}

[role=search] .form-field:after {
	content: "▼";
	position: absolute;
	right: 0.4em;
	top: 0.5em;
	opacity: inherit;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

/* Modal */
.btn-close {
	color: #aaa;
	font-size: 30px;
	text-decoration: none;
	position: absolute;
	right: 5px;
	top: 0;
}
.btn-close:hover {
	color: #919191;
}
.modal:before {
	content: "";
	display: none;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}
.modal:target:before {
	display: block;
}
.modal:target .modal-dialog {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
	top: 20%;
}
.modal-dialog {
	background: #fefefe;
	border: #333 solid 1px;
	border-radius: 5px;
	margin-left: -100px;
	position: fixed;
	left: 30%;
	top: -100%;
	z-index: 11;
	width: 55%;
	-webkit-transform: translate(0, -500%);
	-ms-transform: translate(0, -500%);
	transform: translate(0, -500%);
	-webkit-transition: -webkit-transform 0.3s ease-out;
	-moz-transition: -moz-transform 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
}
.modal-body {
	padding: 20px;
}
.modal-header,
.modal-footer {
	padding: 10px 20px;
}
.modal-header {
	border-bottom: #eee solid 1px;
}
.modal-header h2 {
	font-size: 20px;
}
.modal-footer {
	border-top: #eee solid 1px;
	text-align: right;
}
/*End Modal*/
.confirmation-message{
	position: relative;
	padding: .75rem 1.25rem;
	border-radius: .25rem;
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.5;
	-webkit-animation:fadeOut 1s;
	-webkit-animation-delay:3s;
	-webkit-animation-fill-mode:forwards;
	-moz-animation:fadeOut 1s;
	-moz-animation-delay:3s;
	-moz-animation-fill-mode:forwards;
	animation:fadeOut 1s;
	animation-delay:3s;
	animation-fill-mode:forwards;
	margin: 0 auto;
	width: 171px;
	margin-top: -56px;
}
.applicants{
	clear: left;
	display: inline-block;
	position: relative;
	font-size: 14px;
	background: #ccc;
	max-width: 120px;
	text-align:center;
	padding:7px 10px;
	margin-right:10px;
	color:#fff;
	cursor:default;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
@-webkit-keyframes fadeOut {
	from {
		opacity:1;
	}
	to {
		opacity:0;
	}
}
@-moz-keyframes fadeOut {
	from {
		opacity:1;
	}
	to {
		opacity:0;
	}
}
@keyframes fadeOut {
	from {
		opacity:1;
	}
	to {
		opacity:0;
	}
}
@media screen and (min-width: 50em) {
	.form-field:not(.wrap) {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
}