@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=latin-ext');

:root {
	--base-font-size: 10px;
	--border-radius: 5px;
	--color-red-l: #e8323d;
	--color-red: #d2242f;
	--color-red-d: #6e0000;
	--color-grey-l: #afafaf;
	--color-grey: #6f6f6f;
	--color-grey-d: #2b2b2b;
	--color-green: #8bbd00;
	--transition-duration: 0.1s;
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	border: 0;
	outline: none;
	position: relative;
}

html { font-size: var(--base-font-size); }

body {
	min-width: 320px;
	line-height: 1;
	font-family: 'Open Sans', sans-serif;
	color: var(--color-grey-d);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin: 0 0 1rem 0;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 1rem 0; }

strong, b { font-weight: bold; }

em { font-style: italic; }

a { text-decoration: none; }

ul {
	padding-left: 2rem;
	list-style: none;
}

li { display: block; }

li:before {
	content: '•';
	display: inline-block;
	position: absolute;
	left: -1rem;
}

li li:before { content: '-'; }

img { max-width: 100%; }

input[type="submit"], button { cursor: pointer; }

input[type="text"], input[type="password"] {
	display: block;
	width: 100%;
	border: solid 1px var(--color-grey-l);
	border-radius: var(--border-radius);
	padding: 0 15px;
	color: var(--color-grey-d);
	font-size: 1.8rem;
	line-height: 5.4rem;
}

input[type="text"]::-webkit-input-placeholder {
	color: var(--color-grey-l);
	font-weight: 300;
}
input[type="text"]::-moz-placeholder {
	color: var(--color-grey-l);
	font-weight: 300;
}
input[type="password"]::-webkit-input-placeholder {
	color: var(--color-grey-l);
	font-weight: 300;
}
input[type="password"]::-moz-placeholder {
	color: var(--color-grey-l);
	font-weight: 300;
}

table {
	width: 100%;
	border-collapse: collapse;
}

table td {
	border: solid 1px var(--color-grey-l);
	padding: 1rem;
}

.hidden { display: none; }

.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }

.container {
	max-width: 1200px;
	margin: auto;
	padding: 0 1rem;
}

.row:after {
	content: '';
	display: block;
	clear: both;
}

.col { float: left; }

.w-1 { width: 8.33%; }
.w-2 { width: 16.66%; }
.w-3 { width: 25%; }
.w-4 { width: 33.33%; }
.w-5 { width: 41.66%; }
.w-6 { width: 50%; }
.w-7 { width: 58.33%; }
.w-8 { width: 66.66%; }
.w-9 { width: 75%; }
.w-10 { width: 83.33%; }
.w-11 { width: 91.66%; }
.w-12 { width: 100%; }

.col-pad { margin: 0 -1rem; }
.col-pad > .col { padding: 0 1rem; }

.cover {
	background-size: cover;
	background-position: center;
}

.contain {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.color-red { color: var(--color-red); }
.color-green { color: var(--color-green); }

.text-format p { font-size: 1.6rem; }

.transition {
	-webkit-transition: all ease-out var(--transition-duration);
	-o-transition: all ease-out var(--transition-duration);
	transition: all ease-out var(--transition-duration);
}

.button {
	display: inline-block;
	width: 100%;
	background-color: var(--color-red);
	border-radius: var(--border-radius);
	font-size: 1.8rem;
	color: #fff;
	line-height: 5.4rem;
	border-bottom: solid 2px var(--color-red-d);
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

.button:hover { background-color: var(--color-red-l); }

.button.inline {
	display: inline-block;
	width: auto;
	padding: 0 5.4rem;
}

.button.small {
	padding: 0 1.4rem;
	font-size: 1.4rem;
	line-height: 3.4rem;
}

header {
	border-top: solid 5px var(--color-red);
	padding: 20px 0;

	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--color-grey-d);
	color: var(--color-grey);
	padding: 35px 0;
	font-size: 1.2rem;
	text-align: center;
}

.login-form {
	width: 280px;
	margin: 120px auto 0 auto;
}

.login-form input {
	margin: 0 0 15px 0;
	font-weight: 600;
}

.login-form	.msg {
	position: absolute;
	width: 100%;
	font-size: 1.6rem;
	text-align: center;
	padding: 15px 0 0 0;
	font-weight: 700;
	opacity: 0;
}

.login-form	.msg.msg-required { color: var(--color-red); }
.login-form	.msg.msg-error { color: var(--color-red); }

.login-form.error .msg.msg-required { opacity: 1; }
.login-form.invalid-login .msg.msg-error { opacity: 1; }

.login-form input.error { border-color: var(--color-red); }

.entry-data {
	text-align: center;
	margin: 120px 0 0 0;
}

.exam {
	margin: 60px auto 120px auto;
	font-size: 1.6rem;
}

.head {
	text-align: right;
	padding: 20px 0;

	background-image: linear-gradient(to left, var(--color-grey-l) 20%, transparent 0%);
	background-position: bottom;
	background-repeat: repeat-x;
	background-size: 5px 1px;
}

.head > * { vertical-align: middle; }

.head .time {
	font-size: 3rem;
	font-weight: 700;
	margin: 0 1.6rem;
}

.questions-menu { margin: 20px 0 0 0; }

.questions-menu ul {
	padding: 0;
	font-size: 0rem;
}

.questions-menu ul li { display: inline-block; }

.questions-menu ul li:before { content: none; }

.questions-menu ul li a {
	display: inline-block;
	color: #fff;
	font-size: 1.4rem;
	width: 3.2rem;
	line-height: 3.2rem;
	text-align: center;
	margin: 0 1px 1px 0;
	background-color: var(--color-red);
	vertical-align: middle;
	font-weight: 600;
	opacity: 0.75;
}

.questions-menu ul li a:hover { opacity: 1; }

.questions-menu ul li a.completed { background-color: var(--color-green); }

.questions-menu ul li a.current {
	opacity: 1;

	-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
	box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
}

.questions-container { margin: 60px 0 0 0; }

.questions-container .question { display: none; }

.questions-container .question.current { display: block; }

.question .radio-design {
	display: inline-block;
	cursor: pointer;
	border: solid 1px #4d4d4d;
	border-radius: var(--border-radius);
	height: 25px;
	width: 25px;
	line-height: 25px;
	text-align: center;
	color: var(--color-red);
	margin: 0 15px 0 0;
}

.question .radio-design > * { opacity: 0; }
.question .radio-design.on > * { opacity: 1; }

.question .answers { margin: 60px 0 0 0; }

.question .answers .answer { margin: 0 0 15px 0; }

.question .answers .answer > * { vertical-align: middle; }

.questions .questions-change-arrow {
	font-size: 4.8rem;
	cursor: pointer;
	color: var(--color-grey-l);
	opacity: 0.75;
	margin-top: 180px;
}

.questions .questions-change-arrow:hover { opacity: 1; }

.questions .control { padding: 60px 0 0 0; }

.questions .control .status { margin: 0 30px 0 0; }

.questions .control .status,
.questions .control .edit-answer { display: none; }

.questions .question.completed .control .status,
.questions .question.completed .control .edit-answer { display: inline-block; }

.questions .question.completed .control .submit-answer { display: none; }

.questions .question.completed .answers { pointer-events: none; }

.questions .question .control .submit-answer.disabled {
	background-color: var(--color-grey-l);
	border-color: var(--color-grey);
	pointer-events: none;
	opacity: 0.5;
}

.results-controls { margin: 60px 0 0 0;}

.results-table { padding: 60px 0 120px 0; }

.results-table table {
	font-size: 1rem;
	text-align: center;
}

.results-table table tr:first-child td { font-weight: 700; }

.results-table .results-data { margin: 0 0 15px 0; }

.results-table .results-data h3 {
	font-weight: 600;
	margin: 30px 0 60px 0;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 1.2;
}

.results-table table tr.incorrect .icon-incorrect {
	display: inline-block;
	color: var(--color-red);
	position: absolute;
	left: 1rem;
}

#show-results { display: none; }

.hide-results table tr td:nth-child(3),
.hide-results .icon-incorrect,
.hide-results #hide-results,
.hide-results #percents { display: none !important; }

.hide-results #show-results { display: inline-block !important; }

.signatures {
	margin: 60px 0 0 0;
	font-size: 1.4rem;
}

.signatures hr {
	display: block;
	height: 1.4rem;
	border-bottom: solid 1px var(--color-grey-l);
}

table,
table tr,
table tr td,
table tr th {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}