/* Encorp Pacific (Canada) Return-It 101 School Design Primary CSS */
/* Last Updated: 2024.05.16 ET */

/* Colour adjustments */
/* Blue changed TC's RGB (32, 82, 156) to 2018's (34, 67, 156) */
/* Orange changed from TC's RGB (243, 163, 58) to 2018's RGB (249, 158, 28) */

@font-face {
	font-family: DIN;
	font-weight: normal;
	src: url('/includes/DINWeb.woff') format('woff');
}

@font-face {
	font-family: DIN;
	font-weight: bold;
	src: url('/includes/DINWeb-Bold.woff') format('woff');
}

/* I don't believe this is used in the school program
@font-face {
	font-family: DIN;
	font-weight: 300;
	src: url('/includes/DINWeb-Light.woff') format('woff');
}
*/

@font-face {
	font-family: 'Sketch Block';
	font-weight: 900;
	src: url('/includes/Sketch_Block.woff') format('woff');
}

html {
	font-size: 18px;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

/* @media (max-width: 1280px) {
	html { font-size: 16px; }
}

@media (max-width: 1024px) {
	html { font-size: 14px; }
} */

body {
	background-color: white;
	/* background-color: black; */
	color: rgb(51,51,51);
	font-family: DIN, sans-serif;
	font-size: 1rem;
	line-height: 1.25;
	margin: 0;
	padding: 0;
}

a,
a:visited {
	color: rgb(51,51,51);
	font-weight: bold;
}

a:hover {
	color: rgb(34,67,156);
}

a img { border: none; }

h1 {
	color: rgb(34,67,156);
	font-size: 3rem;
	line-height: 1.1 !important;
}

header > h1 {
	color: white;
	font-family: 'Sketch Block', DIN, sans-serif;
}

h2 {
	display: table;
	position: relative;
	min-width: 10em;
	max-width: calc(100% - 1em) !important;
	width: auto;
	/* background-color: rgb(34,67,156); */
	background: url('/images/encp_ris101_bkgd_heading.svg') no-repeat center center / 100% 100%;
	color: white;
	fill: white;
	font-family: 'Sketch Block', DIN, sans-serif;
	font-size: 1.8rem;
	line-height: 1.1;
	text-align: center;
	padding: 0.6em 2em 0.4em;
	margin: 1em auto 1em;
	-webkit-text-stroke-color: rgb(34,67,156);
	-webkit-text-stroke-width: 8px;
	paint-order: stroke fill;
}

h2.compact {
	padding-left: 1em;
	padding-right: 1em;
}

h2.ris101express {
	max-width: 20em !important;
	margin-top: 80px !important;
}

h2.ris101express > img {
	display: block;
	margin: -80px auto 10px auto;
}

h2.ris101express + h4 {
	text-align: center;
	max-width: 44em;
	margin-bottom: 2em;
}

@media (max-width: 500px) {

	h1 {
		font-size: 1.6rem;
		line-height: 1.1;
	}

	h2 {
		min-width: calc(100% - 1em) !important;
		font-size: 1.4rem;
	}

}

p + h2 { margin-top: 2em; }

p + form { margin-top: 3em; }

p.intro + form { margin-top: 4em; }

h2 > span { font-weight: normal; }

h3,
p.intro {
	color: rgb(34,67,156);
	font-weight: normal;
	font-size: 1.3rem;
	line-height: 1.2;
	margin: 2em auto 0.8em;
}

h3 a,
h3 a:visited,
p.intro a,
p.intro a:visited {
	color: rgb(34,67,156);
}

h4,
p.instruction,
p.explanation {
	max-width: 36em;
	color: rgb(34,67,156);
	margin: 1em auto;
}

h4,
p.instruction,
p.explanation strong {
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

h5 {
	color: rgb(119,119,119);
	padding-bottom: 0.4em;
	border-bottom: 1px solid rgb(221,221,221);
}

p.instruction + p.explanation {
	margin-top: -1em;
}

p.intro {
	max-width: 42em;
	line-height: 1.4;
	text-align: center;
}

p.intro.wider {
	max-width: 50em;
}

h2 + p.intro,
p.intro:first-child {
	margin-top: 0;
}

p.cta {
	font-weight: bold;
	text-align: center;
}

/* h1,
h2,
h3,
h4,
h5,
h6 {
	letter-spacing: 0.04em;
} */

h1:first-child,
h2:first-child,
h3:first-child {
	margin-top: 0;
}

ul ul {
	list-style-type: disc;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

sup {
	font-size: 0.6em;
	vertical-align: text-top;
}

aside {
	color: rgb(122,176,191);
	padding: 0.5em 1em;
	border: 1px solid rgb(122,176,191);
	border-radius: 4px;
	margin: 1em auto;
}

aside p > img:first-child {
	vertical-align: middle;
	margin-right: 0.5em;
}

aside p > img:last-child {
	vertical-align: middle;
	margin-left: 0.5em;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="file"],
textarea,
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	max-width: 100%;
	font-family: DIN, sans-serif;
	font-size: 1rem;
	line-height: 1.2;
	padding: 0.5em 1em;
	border: 1px solid rgb(221,221,221);
	border-radius: 4px;
}

input[type="submit"],
input[type="button"],
button,
a.button,
a.button:visited {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	background-color: rgb(242,242,242);
	font-family: DIN, sans-serif;
	font-weight: bold;
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.5em 1.5em;
	border: 1px solid rgb(221,221,221);
	border-radius: 4px;
	margin: 0 0.375em 0.5em;
}

input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover {
	filter: alpha(opacity=80);
	opacity: 0.8;
}

input[type="radio"],
input[type="checkbox"] {
	display: none;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
	position: relative;
	padding: 0.2em 0 0 1.8em;
}

input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
	box-sizing: border-box;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1.4em;
	height: 1.4em;
	background: white;
	border: 2px solid rgb(34,67,156);
	border-radius: 0.7em;
}

input[type="radio"]:checked + label::after,
input[type="checkbox"]:checked + label::after {
	box-sizing: border-box;
	content: '';
	position: absolute;
	top: 0.3em;
	left: 0.3em;
	width: 0.8em;
	height: 0.8em;
	background: rgb(34,67,156);
	border-radius: 0.4em;
}

@media (max-width: 700px) {

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="file"],
	textarea,
	select {
		padding: 0.5em;
	}

}

label ~ label {
	margin-left: 0.6em;
}

select {
	background: rgb(242,242,242) url('/images/encp_ris101_bkgd_select.png') no-repeat right center;
	padding: 0.2em 34px 0.2em 0.8em;
}

option {
	padding: 0.3em 1em;
}

section {
	position: relative;
}

.textright {
	text-align: right;
}

div.notice {
	position: relative;
	overflow: visible;
	max-width: 40em;
	background-color: rgb(242,242,242);
	color: rgb(34,67,156);
	padding: 1em 1.5em;
	border-radius: 4px;
	margin: 1em auto 2em;
}

div.reminder {
	position: relative;
	overflow: visible;
	background-color: white;
	padding: 0.5em 1em;
	margin: 1em auto;
	border: 3px solid rgb(202,216,235);
}

div.alertbox {
	background-color: white;
	padding: 0.5em 1em;
	margin: 1em auto;
	border: 3px solid rgb(181,95,125);
}

div.hiddeninfo {
	display: none;
	position: relative;
	overflow: hidden;
	background-color: rgb(239,244,245);
	color: rgb(63,63,63);
	padding: 0.5em 60px 0.5em 1em;
	margin: 1em auto;
}

div.helpinfo {
	color: rgb(153,153,153);
}

div.notice *:first-child,
div.hiddeninfo *:first-child { margin-top: 0.2em; }
div.notice *:last-child,
div.hiddeninfo *:last-child { margin-bottom: 0.2em; }

a.closelink {
	float: right;
	font-size: 0.8em;
	margin: 0 0 1em 2em;
}

a.morelink,
a.morelink:visited {
	display: inline-block;
	font-weight: bold;
	font-size: 0.66rem;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
}

a.morelink:before {
	content: '\00a0 ';
}

a.morelink:after {
	content: url('../images/arrow-circle-13x13-73a09d-right.png');
	vertical-align: -2px;
	margin-left: 4px;
}

hr {
	clear: both;
	display: block;
	height: 1px;
	max-width: 36em;
	color: rgb(220,220,220);
	background-color: rgb(220,220,220);
	border: 0;
	margin: 2em auto;
}

p label + label {
	margin-left: 1em;
}

table.grid {
	border-collapse: collapse;
	margin-bottom: 2em;
}

table.grid td + th {
	padding-left: 2em;
}

ul + table.grid,
ol + table.grid {
	margin-top: 2em;
}

table.grid {
	border-top: 1px solid rgb(220,220,220);
}

table.grid th {
	line-height: 1.1;
}

table.grid th,
table.grid td {
	vertical-align: top;
	padding: 1em 1em 1em 0;
	border-bottom: 1px solid rgb(220,220,220);
}

table.grid th p,
table.grid td p {
	margin-top: 0;
	margin-bottom: 0.5em;
}

table.grid th ul,
table.grid td ul {
	margin: 0 0 0.5em 0;
	padding-left: 0;
}

table.grid th ul li,
table.grid td ul li {
	padding-left: 0;
	margin-left: 1.5em;
}

table.grid th h2,
table.grid td ul li {
	margin-bottom: 0;
}

table.grid th h3 {
	margin-right: 2em;
	line-height: 1.2;
}

table.grid td h3,
table.reporting td h3 {
	margin-bottom: 0.5em;
}

ul.benefits {
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 1px;
	margin: 1em auto;
}

ul.benefits > li {
	margin: 2em 0;
}

.figurelist,
ol.progress {
	position: relative;
	counter-reset: li;
	list-style: none;
	text-align: center;
	margin: 0 -0.7em 3em;
	padding: 0;
}

ol.progress {
	max-width: 1060px;
	background: url('/images/encp_ris101_bkgd_progress1of5.png') no-repeat center 40px;
	background-size: calc(100% - 100px) 22px;
	margin: 0 auto;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.figurelist > li {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 12em;
	padding: 0;
	margin: 0 0.7em 2em;
}

ol.progress > li {
	display: inline-block;
	vertical-align: top;
	width: 105px;
	color: rgb(190,190,190);
	font-weight: bold;
	text-align: center;
	padding: 0;
	margin: 0 1em 2em;
	z-index: 20;
}

.figurelist > li h3 {
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
	margin: 0 auto;
}

.figurelist > li p {
	text-align: left;
	margin: 0.5em auto;
}

ul.figurelist > li figure,
ol.figurelist > li::before,
ol.progress > li::before {
	box-sizing: border-box;
	width: 105px;
	height: 105px;
	background: url('/images/encp_ris101_bkgd_bluecirc.png') no-repeat center center;
	color: white;
	text-align: center;
	margin: 0 auto 10px;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

ol.figurelist > li::before,
ol.progress > li::before {
	content: counter(li);
	counter-increment: li;
	font-weight: bold;
	font-size: 3rem;
	line-height: 1;
	padding-top: 8px;
}

ol.progress > li::before {
	background-image: url('/images/encp_ris101_bkgd_lgrycirc_opaq.png');
	background-size: contain;
}

.figurelist > li:nth-child(6n+1) h3 { color: rgb(184,42,69); }
.figurelist > li:nth-child(6n+2) h3 { color: rgb(214,123,22); }
.figurelist > li:nth-child(6n+3) h3 { color: rgb(122,176,191); }
.figurelist > li:nth-child(6n+4) h3 { color: rgb(152,187,55); }
.figurelist > li:nth-child(6n+5) h3 { color: rgb(234,185,22); }

ul.figurelist > li:nth-child(6n+1) figure { background-image: url('/images/encp_ris101_bkgd_pinkcirc.png'); }
ul.figurelist > li:nth-child(6n+2) figure { background-image: url('/images/encp_ris101_bkgd_dorncirc.png'); }
ul.figurelist > li:nth-child(6n+3) figure { background-image: url('/images/encp_ris101_bkgd_lblucirc.png'); }
ul.figurelist > li:nth-child(6n+4) figure { background-image: url('/images/encp_ris101_bkgd_grencirc.png'); }
ul.figurelist > li:nth-child(6n+5) figure { background-image: url('/images/encp_ris101_bkgd_yelwcirc.png'); }

ol.figurelist > li:nth-child(6n+1)::before { background-image: url('/images/encp_ris101_bkgd_pinkcirc.png'); }
ol.figurelist > li:nth-child(6n+2)::before { background-image: url('/images/encp_ris101_bkgd_dorncirc.png'); }
ol.figurelist > li:nth-child(6n+3)::before { background-image: url('/images/encp_ris101_bkgd_lblucirc.png'); }
ol.figurelist > li:nth-child(6n+4)::before { background-image: url('/images/encp_ris101_bkgd_grencirc.png'); }
ol.figurelist > li:nth-child(6n+5)::before { background-image: url('/images/encp_ris101_bkgd_yelwcirc.png'); }

ol.progress.step2 { background-image: url('/images/encp_ris101_bkgd_progress2of5.png'); }
ol.progress.step3 { background-image: url('/images/encp_ris101_bkgd_progress3of5.png'); }
ol.progress.step4 { background-image: url('/images/encp_ris101_bkgd_progress4of5.png'); }
ol.progress.step5 { background-image: url('/images/encp_ris101_bkgd_progress5of5.png'); }

ol.progress.step1 > li:nth-child(1) { color: rgb(249,158,28); }

ol.progress.step2 > li:nth-child(1),
ol.progress.step2 > li:nth-child(2) { color: rgb(249,158,28); }

ol.progress.step3 > li:nth-child(1),
ol.progress.step3 > li:nth-child(2),
ol.progress.step3 > li:nth-child(3) { color: rgb(249,158,28); }

ol.progress.step4 > li:nth-child(1),
ol.progress.step4 > li:nth-child(2),
ol.progress.step4 > li:nth-child(3),
ol.progress.step4 > li:nth-child(4) { color: rgb(249,158,28); }

ol.progress.step5 > li:nth-child(1),
ol.progress.step5 > li:nth-child(2),
ol.progress.step5 > li:nth-child(3),
ol.progress.step5 > li:nth-child(4),
ol.progress.step5 > li:nth-child(5) { color: rgb(249,158,28); }

ol.progress.step1 > li:nth-child(1)::before { background-image: url('/images/encp_ris101_bkgd_ri-orancirc_opaq.png'); }

ol.progress.step2 > li:nth-child(1)::before,
ol.progress.step2 > li:nth-child(2)::before { background-image: url('/images/encp_ris101_bkgd_ri-orancirc_opaq.png'); }

ol.progress.step3 > li:nth-child(1)::before,
ol.progress.step3 > li:nth-child(2)::before,
ol.progress.step3 > li:nth-child(3)::before { background-image: url('/images/encp_ris101_bkgd_ri-orancirc_opaq.png'); }

ol.progress.step4 > li:nth-child(1)::before,
ol.progress.step4 > li:nth-child(2)::before,
ol.progress.step4 > li:nth-child(3)::before,
ol.progress.step4 > li:nth-child(4)::before { background-image: url('/images/encp_ris101_bkgd_ri-orancirc_opaq.png'); }

ol.progress.step5 > li:nth-child(1)::before,
ol.progress.step5 > li:nth-child(2)::before,
ol.progress.step5 > li:nth-child(3)::before,
ol.progress.step5 > li:nth-child(4)::before,
ol.progress.step5 > li:nth-child(5)::before { background-image: url('/images/encp_ris101_bkgd_ri-orancirc_opaq.png'); }

p + .figurelist {
	margin-top: 2em;
	margin-bottom: 2em;
}

ul.faqs {
	list-style: none;
	padding: 0;
	margin: 1em 0;
}

ul.faqs > li {
	padding: 0;
	margin: 0 0 1.5em 0;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid-column;
}

@media (min-width: 860px) {

	ul.faqs {
		-webkit-column-count: 2;
		-webkit-column-gap: 2em;
		-moz-column-count: 2;
		-moz-column-gap: 2em;
		column-count: 2;
		column-gap: 2em;
	}

}

@media (max-width: 760px) {

	ol.progress {
		width: calc(100% + 2em);
		margin: 0 -1em;
	}

	ol.progress {
		background-position: center 22px;
		background-size: calc(100% - 60px) 10px;
	}

	ol.progress > li {
		position: relative;
		overflow: hidden;
		width: 60px !important;
		font-size: 0.6rem;
		line-height: 1.2;
		margin: 0 0 1em;
	}

	ol.progress > li::before {
		width: 52px;
		height: 52px;
		font-size: 1.5rem;
	}

}

@media (max-width: 500px) {

	ul.figurelist li,
	ol.figurelist li,
	ol.progress li {
		display: block;
		width: auto;
	}

}

dl.alphalist {
	padding: 0;
	margin: 1em auto;
}

dl.alphalist dt {
	padding: 0;
	margin: 0 auto 2em;
}

dl.alphalist dd {
	text-align: center;
	padding: 0;
	margin: 0 auto 2em;
}

dl.alphalist h2 {
	margin-top: 0;
	margin-bottom: 0;
}

dl.alphalist dd a,
dl.alphalist dd a:visited {
	color: rgb(34,67,156);
	font-weight: normal;
	text-decoration: none;
}

@media (min-width: 1001px) {

	dl.alphalist h2 {
		width: 18em;
	}

	dl.alphalist dd {
		-webkit-column-count: 3;
		-webkit-column-gap: 2em;
		-moz-column-count: 3;
		-moz-column-gap: 2em;
		column-count: 3;
		column-gap: 2em;
	}

}

@media (min-width: 500px) and (max-width: 1000px) {

	dl.alphalist h2 {
		width: 18em;
	}

	dl.alphalist dd {
		-webkit-column-count: 2;
		-webkit-column-gap: 2em;
		-moz-column-count: 2;
		-moz-column-gap: 2em;
		column-count: 2;
		column-gap: 2em;
	}

}

ul.subsections {
	list-style: none;
	padding: 0;
	margin: 1em auto;
}

p + ul.subsections,
ul + ul.subsections {
	margin-top: 2em;
}
	
ul.subsections > li {
	position: relative;
	padding: 0;
	margin: 0 0 3em 0;
}

@media (min-width: 900px) {

	ul.subsections {
		text-align: center;
		margin-left: -2rem;
		margin-right: -2rem;
	}

	ul.subsections > li,
	section.subsection {
		display: inline-block;
		width: calc(50% - 3rem);
		text-align: left;
		margin: 0 1rem 2rem;
		vertical-align: top;
	}
	
}

ul.childpages {
	list-style: none;
	padding: 0;
	margin: 1em auto;
}

ul.childpages > li {
	position: relative;
	overflow: hidden;
	padding: 0;
	margin: 1em auto;
}

ul.childpages li.bullet {
	padding-left: 1.2em;
}

ul.childpages li.bullet::before {
	content: '\2022';
	position: absolute;
	left: 0;
}

ul.childpages > li > img {
	float: left;
	max-width: 130px;
	height: auto;
	margin-right: 30px;
}

ul.childpages h3 {
	font-weight: bold;
	font-size: 1rem;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 auto 1em;
}

ul.childpages div.teaser {
	position: relative;
	overflow: hidden;
}

ul.childpages ul {
	list-style: none;
	padding: 0;
	margin: 1em auto;
}

ul.childpages ul > li {
	padding: 0;
	margin: 0;
}

ol.prizes {
	position: relative;
	overflow: hidden;
	list-style: none;
	color: rgb(122,176,191);
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	padding: 0.25em;
	border: 1px solid rgb(122,176,191);
	border-radius: 4px;
	margin: 1em auto;
}

ol.prizes > li {
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	width: calc(49% - 1em);
	min-height: 36px;
	text-align: left;
	padding: 5px 0 0 40px;
	vertical-align: top;
	margin: 0.5em;
}

ol.prizes > li:first-child::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 36px;
	background: url('/images/encp_ris101_icon_medal-1st.png') no-repeat center center;
	background-size: contain;
}

ol.prizes > li:nth-child(2)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 36px;
	background: url('/images/encp_ris101_icon_medal-2nd.png') no-repeat center center;
	background-size: contain;
}

ol.prizes + h2,
ol.prizes + h3,
ol.prizes + h4 {
	margin-top: 2em;
}

@media (max-width: 500px) {

	ol.prizes {
		padding: 0 0.5em;
	}

	ol.prizes > li {
		display: block;
		width: calc(100% - 1em);
		margin: 1em 0.5em;
	}

}

@media (max-width: 400px) {

	ul.childpages > li > img {
		float: none;
		display: block;
		max-width: 100%;
		margin: 1em auto;
	}

}

ol.jumplist {
	list-style: none;
	text-align: center;
	padding: 3em 0 0;
	/* Trick for custom dotted border */
	/* https://stackoverflow.com/questions/6250394/how-to-increase-space-between-dotted-border-dots */
	background-image: linear-gradient(to right, rgb(34,67,156), 20%, rgb(255,255,255) 0%);
	background-position: top;
	background-size: 10px 2px;
	background-repeat: repeat-x;
	margin: 1em auto;
}

ol.jumplist > li {
	display: inline-block;
	margin: 0 0.2em 0.5em;
	vertical-align: top;
}

ol.jumplist a,
ol.jumplist a:visited {
	display: block;
	background-color: rgb(249,158,28);
	color: white;
	min-width: 1em;
	font-size: 1rem;
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	padding: 0.7em 0.8em 0.5em;
	border: none;
	border-radius: 4px;
}

ol.jumplist a:hover,
ol.jumplist li.active a,
ol.jumplist li.active a:visited {
	background-color: rgb(34,67,156) !important;
	color: white !important;
}

ul.halltrophies {
	list-style: none;
	text-align: center;
	font-size: 15px;
	line-height: 1.3;
	padding: 0;
	margin: 1em auto;
}

ul.halltrophies li {
	display: inline-block;
	vertical-align: text-top;
	width: 160px;
	background-position: center top;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0 10px 20px 10px;
}

ul.halltrophies li.first {
	background-image: url('/images/icon-hall-of-fame-1st.png');
	padding-top: 86px;
}

ul.halltrophies li.second {
	background-image: url('/images/icon-hall-of-fame-2nd.png');
	padding-top: 86px;
}

ul.halltrophies li.third {
	background-image: url('/images/icon-hall-of-fame-3rd.png');
	padding-top: 86px;
}

ul.halltrophies li a,
ul.halltrophies li a:visited {
	display: block;
	font-weight: bold;
	text-decoration: none;
	margin-bottom: 0.4em;
}

/* Buttons */

.actionbutton,
a.actionbutton:visited {
	display: inline-block;
	position: relative;
	overflow: hidden;
	background-color: rgb(249,158,28);
	color: white;
	font-weight: bold;
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	border-radius: 4px;
	padding: 0.8em 2.4em 0.8em 2.4em;
	margin: 0.5em;
}

.actionbutton:hover,
a.actionbutton:hover {
	background-color: rgb(34,67,156);
	color: white !important;
}

h1 + p > .actionbutton {
	margin-top: 1em;
}

.actionbutton span.note {
	display: block;
	font-style: italic;
	font-weight: normal;
	font-size: 0.7em;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: none;
}

.functionbutton,
a.functionbutton:visited {
	display: inline-block;
	position: relative;
	overflow: hidden;
	background-color: rgb(249,158,28);
	color: white;
	min-width: 14em;
	font-size: 1em;
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	padding: 0.7em 1em 0.5em;
	border: none;
	border-radius: 4px;
	vertical-align: top;
	margin: 0 0.5em 0.5em;
}

.functionbutton:hover {
	background-color: rgb(34,67,156) !important;
	color: white !important;
}

.functionbutton.bins,
.functionbutton.containers {
	width: 21em;
}

.functionbutton.bins::before {
	position: relative;
	content: '\00a0';
	top: -0.3em;
	width: 1.1em;
	height: 1.4em;
	background: url('/images/encp_ris101_icon_empty-bin.png') no-repeat center center;
	background-size: contain;
	display: inline-block;
	margin-right: 0.65em;
	margin-bottom: -0.5em;
}

.functionbutton.containers::before {
	position: relative;
	content: '\00a0';
	top: -0.3em;
	width: 0.84em;
	height: 1.4em;
	line-height: 1;
	background: url('/images/encp_ris101_icon_little-bottle.png') no-repeat center center;
	background-size: contain;
	display: inline-block;
	margin-right: 0.65em;
	margin-bottom: -0.5em;
}

.actionbutton span.nextarrow,
.functionbutton span.nextarrow {
	padding-right: 1em;
}

.actionbutton span.nextarrow::after,
.functionbutton span.nextarrow::after {
	position: absolute;
	content: '';
	width: 0.5em;
	height: 0.5em;
	border-top: 0.18em solid white;
	border-right: 0.18em solid white;
	transform: rotate(45deg);
	margin-left: 0.2em;
}

.actionbutton span.nextarrow::after { top: 1em; }
.functionbutton span.nextarrow::after { top: 0.8em; }

.nextbutton,
.backbutton {
	display: inline-block;
	position: relative;
	overflow: hidden;
	color: white !important;
	font-weight: bold;
	font-size: 1.4em;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	border-radius: 4px;
}

.nextbutton {
	background-color: rgb(249,158,28);
	padding: 0.8em 3.4em 0.8em 2.4em;
}

.backbutton {
	background-color: rgb(221,221,221);
	padding: 0.8em 2.4em 0.8em 3.4em;
}

.nextbutton::after {
	position: absolute;
	content: '';
	top: 1em;
	right: 2em;
	width: 0.5em;
	height: 0.5em;
	border-top: 0.18em solid white;
	border-right: 0.18em solid white;
	transform: rotate(45deg);
}

.backbutton::before {
	position: absolute;
	content: '';
	top: 1em;
	left: 2em;
	width: 0.5em;
	height: 0.5em;
	border-top: 0.18em solid white;
	border-left: 0.18em solid white;
	transform: rotate(-45deg);
}

.nextbutton:hover,
.backbutton:hover {
	background-color: rgb(34,67,156);
	color: white !important;
}

@media (max-width: 500px) {

	.actionbutton,
	a.actionbutton:visited {
		min-width: 260px;
		font-size: 1rem;
		line-height: 1.2;
		padding: 1.2em 1.5em;
		margin: 0.5em 0 !important;
	}

	.actionbutton span.nextarrow::after { top: 1.35em; }

	.functionbutton,
	a.functionbutton:visited {
		display: block !important;
		width: 100% !important;
		margin: 0.5em 0 !important;
	}

}

/* General classes */

.error {
	color: red;
	font-weight: bold;
	text-decoration: underline;
}

.floatleft {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

.floatright {
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
}

.factoid {
	color: rgb(249,158,28);
	font-weight: bold;
}

td.factoid {
	padding: 1em;
}

.note {
	font-size: 0.8em;
}

p.note {
	line-height: 1.3;
}

p.textfield {
	margin-bottom: 2em;
}

.alert {
	color: rgb(220,70,70);
}

.alert.validation {
	max-width: 40em;
	background-color: rgb(242,242,242);
	color: black;
	padding: 0.5em 1em;
	border: 2px solid rgb(220,70,70);
	border-radius: 4px;
	margin: 1em auto;
}

div.alert.validation p {
	text-align: left;
}

ul.alert {
	display: inline-block;
	text-align: left;
	margin: 1em auto;
}

.instruction {
	color: rgb(34,67,156);
}

.blockcenter {
	margin-left: auto;
	margin-right: auto;
}

.textcenter,
.centertext {
	text-align: center !important;
}

.textcenter > iframe,
.centertext > iframe {
	display: inline-block;
}

.nowrap {
	white-space: nowrap;
}

.sect {
	margin-top: 1em !important;
}

.newsect {
	margin-top: 2em !important;
}

.twocolumn {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
}

.threecolumn {
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
}

.fourcolumn {
	-moz-column-count: 4;
	-webkit-column-count: 4;
	column-count: 4;
}

@media (min-width: 400px) {
	.max-third {
		max-width: calc((90vw - 4em) / 3);
	}
}

/* TinyMCE overrides */

body.mcecontent {
	background-color: white;
	margin: 1rem;
}