/*!
Theme Name: eCampusOntario Open Library Portal
Theme URI: https://openlibrary.ecampusontario.ca
Author: Wired Solutions
Author URI: https://wiredsolutions.ca
Description: eCampusOntario Open Library Portal Theme
Version: 1.0.0
Text Domain: eco-openlibrary-portal
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body {
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
}

body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
figcaption,
blockquote,
dl,
dd {
	margin: 0;
}

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

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

abbr[title] {
	text-decoration: underline;
	text-decoration: underline dotted;
}

b,
strong {
	font-weight: bolder;
}

pre,
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: inherit;
	margin: 0;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

textarea {
	overflow: auto;
	resize: vertical;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

button {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
	-webkit-appearance: listbox;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"] {
	-webkit-appearance: none;
	-moz-appearance: none;
}

@media print {
	*,
	*:before,
	*:after,
	p:first-letter,
	div:first-letter,
	blockquote:first-letter,
	li:first-letter,
	p:first-line,
	div:first-line,
	blockquote:first-line,
	li:first-line {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}
	a,
	a:visited {
		text-decoration: underline;
	}
	a[href]:after {
		content: " (" attr(href) ")";
	}
	abbr[title]:after {
		content: " (" attr(title) ")";
	}
	a[href^="#"]:after,
	a[href^="javascript:"]:after {
		content: "";
	}
	pre {
		white-space: pre-wrap !important;
	}
	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	thead {
		display: table-header-group;
	}
	tr,
	img {
		page-break-inside: avoid;
	}
	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}
	h2,
	h3 {
		page-break-after: avoid;
	}
}

body {
	background-color: #fff;
	color: #1e1a34;
	font-family: "Roboto", sans-serif;
	line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	line-height: 1.55;
	margin-bottom: 1.25rem;
}

h1 {
	font-size: 2.125rem;
}

h2 {
	font-size: 2.375rem;
}

h3 {
	font-size: 1.75rem;
}

h4 {
	font-size: 1.625rem;
}

h5 {
	font-size: 1.25rem;
}

h6 {
	font-size: 1rem;
}

p {
	line-height: 1.55;
	margin-bottom: 1.25rem;
}

a {
	color: #1e1a34;
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: #1e1a34;
}

hr {
	border: 0;
	border-top: 0.0625rem solid #dee2e6;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}

small {
	font-size: 80%;
}

mark {
	background-color: #fcf8e3;
	padding: 0.2em;
}

ul,
ol {
	margin: 1rem 0;
	padding: 0 0 0 1.25rem;
}

.list-unstyled {
	list-style: none;
	padding: 0;
	margin: 0;
}

.list-inline {
	list-style: none;
	padding: 0;
}

.list-inline .list-inline-item {
	display: inline-block;
}

.list-inline .list-inline-item:not(:last-child) {
	margin-right: 0.5rem;
}

.list-circle {
	list-style: circle;
}

.list-square {
	list-style-type: square;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
	-webkit-text-fill-color: #060607;
	transition: background-color 5000s ease-in-out 0s;
}

button,
button[type="button"],
input[type="submit"] {
	outline: none;
}

::-webkit-input-placeholder {
	color: #8e8c99;
}

::-moz-placeholder {
	color: #8e8c99;
}

:-ms-input-placeholder {
	color: #8e8c99;
}

input:-moz-placeholder {
	color: #8e8c99;
}

label {
	color: #1e1a34;
	display: block;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.0625rem;
	margin-bottom: 0.5rem;
}

label.required::after {
	content: " *";
	color: #c00;
}

@media only screen and (max-width: 767px) {
	label {
		font-size: 1rem;
	}
}

.form-control {
	background-color: white;
	background-image: none;
	border: 0.0625rem solid #c7c6cc;
	border-radius: 0.375rem;
	box-shadow: 0 0 0 1px transparent;
	color: #1e1a34;
	font-size: 1.0625rem;
	display: block;
	min-height: 3.75rem;
	padding: 0.75rem 0.875rem;
	transition: background-color ease-in-out 0.15s, border-color ease-in-out 0.15s;
	width: 100%;
}

@media only screen and (max-width: 767px) {
	.form-control {
		font-size: 1rem;
		min-height: 3.375rem;
	}
}

.form-control::-ms-expand {
	background-color: transparent;
	border: 0;
}

.form-control:focus {
	box-shadow: 0 0 0 1px #1e1a34;
	border-color: #1e1a34;
	outline: none;
}

.form-control:focus ::-webkit-input-placeholder {
	color: #c7c6cc;
}

.form-control:focus ::-moz-placeholder {
	color: #c7c6cc;
}

.form-control:focus :-ms-input-placeholder {
	color: #c7c6cc;
}

.form-control:focus input:-moz-placeholder {
	color: #c7c6cc;
}

form button,
form [type="button"],
form [type="submit"] {
	display: inline-block;
}

.bounceInRight,
.bounceInLeft,
.bounceInUp,
.bounceInDown {
	opacity: 0;
	transform: translateX(400px);
}

.fadeInRight,
.fadeInLeft,
.fadeInUp,
.fadeInDown {
	opacity: 0;
	transform: translateX(400px);
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

.bounceIn.go {
	animation-name: bounceIn;
}

@keyframes bounceInRight {
	0% {
		opacity: 0;
		transform: translateX(400px);
	}
	60% {
		transform: translateX(-30px);
	}
	80% {
		transform: translateX(10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.bounceInRight.go {
	animation-name: bounceInRight;
}

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-400px);
	}
	60% {
		transform: translateX(30px);
	}
	80% {
		transform: translateX(-10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.bounceInLeft.go {
	animation-name: bounceInLeft;
}

@keyframes bounceInUp {
	0% {
		opacity: 0;
		transform: translateY(400px);
	}
	60% {
		transform: translateY(-30px);
	}
	80% {
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.bounceInUp.go {
	animation-name: bounceInUp;
}

@keyframes bounceInDown {
	0% {
		opacity: 0;
		transform: translateY(-400px);
	}
	60% {
		transform: translateY(30px);
	}
	80% {
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.bounceInDown.go {
	animation-name: bounceInDown;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		display: block;
	}
}

.fadeIn {
	opacity: 0;
}

.fadeIn.go {
	animation-name: fadeIn;
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-400px);
	}
	50% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInLeft {
	opacity: 0;
	transform: translateX(-400px);
}

.fadeInLeft.go {
	animation-name: fadeInLeft;
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(400px);
	}
	50% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInRight {
	opacity: 0;
	transform: translateX(400px);
}

.fadeInRight.go {
	animation-name: fadeInRight;
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(400px);
	}
	50% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInUp {
	opacity: 0;
	transform: translateY(400px);
}

.fadeInUp.go {
	animation-name: fadeInUp;
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-400px);
	}
	50% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDown {
	opacity: 0;
	transform: translateY(-400px);
}

.fadeInDown.go {
	animation-name: fadeInDown;
}

.row {
	display: flex;
	flex: 0 1 auto;
	flex-flow: row wrap;
	margin: 0 -0.9375rem;
}

.columns,
.column {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 1;
	padding: 0 0.9375rem;
}

.column:first-child,
.columns:first-child {
	margin-left: 0;
}

.one {
	flex: 0 0 8.33333%;
	max-width: 8.33333%;
}

.two {
	flex: 0 0 16.66667%;
	max-width: 16.66667%;
}

.three {
	flex: 0 0 25%;
	max-width: 25%;
}

.four {
	flex: 0 0 33.33333%;
	max-width: 33.33333%;
}

.five {
	flex: 0 0 41.66667%;
	max-width: 41.66667%;
}

.six {
	flex: 0 0 50%;
	max-width: 50%;
}

.seven {
	flex: 0 0 58.33333%;
	max-width: 58.33333%;
}

.eight {
	flex: 0 0 66.66667%;
	max-width: 66.66667%;
}

.nine {
	flex: 0 0 75%;
	max-width: 75%;
}

.ten {
	flex: 0 0 83.33333%;
	max-width: 83.33333%;
}

.eleven {
	flex: 0 0 91.66667%;
	max-width: 91.66667%;
}

.twelve {
	flex: 0 0 100%;
	max-width: 100%;
	margin-left: 0;
}

@media screen and (max-width: 991px) {
	.columns,
	.column {
		min-width: 100%;
	}
}

header {
	background-color: #fff;
	box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.06),
		0 0.0625rem 0 0 rgba(0, 0, 0, 0.02);
	position: fixed;
	top: 0;
	left: 0;
	transition: top 0.25s ease-in-out 0s;
	width: 100%;
	z-index: 1;
	display: flex;
	height: 5.625rem;
}

@media only screen and (max-width: 767px) {
	header {
		height: 5rem;
	}
}

header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 3%;
	max-width: 100%;
	width: 100%;
}

@media only screen and (max-width: 1199px) {
	header .container {
		padding: 0 2rem;
	}
}

@media only screen and (max-width: 767px) {
	header .container {
		padding: 0 1.5rem;
	}
}

@media only screen and (max-width: 399px) {
	header .container {
		padding: 0 1.125rem;
	}
}

header .logo-main {
	position: relative;
	top: -0.125rem;
}

header .logo-main img {
	height: 3.5rem;
	width: 10.4375rem;
}

@media only screen and (max-width: 767px) {
	header .logo-main img {
		height: 3.125rem;
		width: 9.25rem;
	}
}

header .logo-main .fr-only {
	display: none;
	height: 3.5rem;
	width: 15.4375rem;
}

@media only screen and (max-width: 767px) {
	header .logo-main .fr-only {
		height: 3.125rem;
		width: 13.75rem;
	}
}

#header {
	top: 0;
	z-index: 3;
}

#header.hide {
	display: flex;
	top: -8.125rem;
}

#header.header-z-index {
	z-index: 1;
}

footer {
	background-color: #1e1a34;
	display: flex;
	align-items: flex-start;
	height: 17.1875rem;
	padding: 1.5rem 0;
	position: relative;
}

@media only screen and (max-width: 991px) {
	footer {
		display: block;
		height: auto;
		padding: 1.5rem 0 0;
	}
}

footer .container {
	display: flex;
	justify-content: space-between;
	padding: 0 3%;
	max-width: 100%;
}

@media only screen and (max-width: 991px) {
	footer .container {
		flex-direction: column;
		justify-content: flex-start;
		padding: 0 2rem;
	}
}

@media only screen and (max-width: 767px) {
	footer .container {
		padding: 0 1.5rem;
	}
}

footer .sponsors {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0.625rem 0 3rem;
}

footer .sponsors .eco-logo {
	margin-right: 2.5rem;
	position: relative;
	top: 0.375rem;
}

footer .sponsors .eco-logo img {
	width: 9.375rem;
}

@media only screen and (max-width: 991px) {
	footer .sponsors .eco-logo img {
		width: 8.625rem;
	}
}

footer .sponsors .ontario-logo {
	position: relative;
	top: 0.125rem;
}

@media only screen and (max-width: 991px) {
	footer .sponsors .ontario-logo {
		top: 0;
	}
}

footer .sponsors .ontario-logo img {
	width: 9.5rem;
}

@media only screen and (max-width: 991px) {
	footer .sponsors .ontario-logo img {
		width: 8.75rem;
	}
}

footer .social-media-container {
	position: absolute;
	right: 3%;
	top: 1rem;
}

@media only screen and (max-width: 991px) {
	footer .social-media-container {
		position: relative;
		top: 0;
		right: 0.25rem;
		margin-bottom: 2rem;
	}
}

footer .social-media-container ul {
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 0;
}

footer .social-media-container ul li {
	margin: 0;
}

footer .social-media-container .twitter-icon,
footer .social-media-container .youtube-icon,
footer .social-media-container .linkedin-icon,
footer .social-media-container .slack-icon {
	fill: white;
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

footer .social-media-container .twitter-icon:hover,
footer .social-media-container .youtube-icon:hover,
footer .social-media-container .linkedin-icon:hover,
footer .social-media-container .slack-icon:hover {
	opacity: 0.65;
}

footer .social-media-container .twitter-icon {
	margin-right: 1rem;
	height: 2.125rem;
	width: 2.125rem;
}

footer .social-media-container .youtube-icon {
	margin-right: 0.875rem;
	height: 2.5rem;
	width: 2.5rem;
	position: relative;
	top: -0.125rem;
}

footer .social-media-container .linkedin-icon {
	margin-right: 1rem;
	height: 2.125rem;
	width: 2.125rem;
}

footer .social-media-container .slack-icon {
	height: 1.875rem;
	width: 1.875rem;
	position: relative;
	top: 0.125rem;
}

footer .content-left {
	min-width: 22.5rem;
}

@media only screen and (max-width: 991px) {
	footer .content-left {
		min-width: 100%;
		margin-bottom: 2.75rem;
	}
}

footer .content-left p {
	color: white;
	font-family: "Roboto", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 0.9375rem;
	letter-spacing: 0.0625rem;
	margin-bottom: 0;
}

@media only screen and (max-width: 991px) {
	footer .content-left p {
		font-size: 0.875rem;
	}
}

footer .copyright {
	/*border-top: 0.0625rem solid #4d4a5c;*/
	color: white;
	font-family: "Roboto", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	padding: 2rem 0 1.75rem;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}

@media only screen and (max-width: 991px) {
	footer .copyright {
		position: relative;
	}
}

footer .copyright .container {
	align-items: center;
	justify-content: flex-start;
}

@media only screen and (max-width: 991px) {
	footer .copyright .container {
		align-items: flex-start;
	}
}

footer .copyright .container img {
	margin-right: 1.125rem;
}

@media only screen and (max-width: 991px) {
	footer .copyright .container img {
		margin-bottom: 1.125rem;
	}
}

.main-nav {
	display: flex;
	align-items: center;
}

@media screen and (max-width: 1199px) {
	.main-nav {
		background: #1e1a34;
		flex-direction: column;
		overflow: auto;
		overflow-x: hidden;
		padding: 3.75rem 0;
		position: fixed;
		right: -100%;
		top: 0;
		height: 100%;
		width: 21.875rem;
		transition: all 400ms;
		z-index: 998;
	}
	.main-nav.nav-active {
		right: 0;
	}
}

@media screen and (max-width: 399px) {
	.main-nav {
		width: 85%;
	}
}

.nav ul {
	display: flex;
	align-items: center;
	line-height: normal;
	list-style: none;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	text-align: center;
}

@media screen and (max-width: 1199px) {
	.nav ul {
		flex-direction: column;
		justify-content: flex-start;
		padding: 0 6%;
		width: 21.875rem;
	}
}

@media screen and (max-width: 399px) {
	.nav ul {
		width: auto;
	}
}

.nav ul li {
	margin: 0;
	margin-left: 4.875rem;
	position: relative;
}

@media screen and (max-width: 1599px) {
	.nav ul li {
		margin-left: 4rem;
	}
}

@media screen and (max-width: 1499px) {
	.nav ul li {
		margin-left: 3.75rem;
	}
}

@media screen and (max-width: 1299px) {
	.nav ul li {
		margin-left: 3rem;
	}
}

.nav ul li a {
	color: #1e1a34;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.0625rem;
	position: relative;
	text-transform: uppercase;
}

@media screen and (max-width: 1499px) {
	.nav ul li a {
		font-size: 1rem;
	}
}

@media screen and (max-width: 1330px) {
	.nav ul li a {
		font-size: 0.9375rem;
	}
}

.nav ul li a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 0.0625rem;
	bottom: 0;
	margin: -0.3125rem 0;
	background-color: #f1b434;
	visibility: hidden;
	transform: scaleX(0);
	transition: all 0.4s ease-in-out 0s;
}

@media screen and (max-width: 1199px) {
	.nav ul li a:hover {
		color: white;
	}
}

.nav ul li a:hover:before {
	visibility: visible;
	transform: scaleX(1);
}

.nav ul li.active a:before {
	visibility: visible;
	transform: scaleX(1);
}

@media screen and (max-width: 1199px) {
	.nav ul li {
		border-bottom: 0.0625rem solid #434150;
		line-height: 1.85;
		margin-left: 0;
		padding: 1rem 0;
		width: 100%;
	}
	.nav ul li:last-child {
		border-bottom: none;
	}
	.nav ul li a {
		color: white;
		font-size: 1rem;
	}
}

.menu-nav {
	display: none;
	position: absolute;
	right: 2rem;
	top: -0.625rem;
}

@media screen and (max-width: 1199px) {
	.menu-nav {
		display: block;
	}
}

@media only screen and (max-width: 767px) {
	.menu-nav {
		right: 1.5rem;
	}
}

@media only screen and (max-width: 399px) {
	.menu-nav {
		right: 1.25rem;
	}
}

@media only screen and (max-width: 360px) {
	.menu-nav {
		right: 1.125rem;
	}
}

.close-nav {
	position: fixed;
	top: 0.625rem;
	right: 0.625rem;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: all 500ms ease-in-out;
}

.close-icon svg {
	fill: white;
}

@media screen and (max-width: 1199px) {
	.reveal-out .close-nav {
		opacity: 1;
		visibility: visible;
	}
}

.expand {
	position: absolute;
	top: 1.25rem;
	right: -0.9375rem;
	z-index: 300;
	width: 4.375rem;
	height: 4.375rem;
	display: none;
	text-indent: -10000px;
	cursor: pointer;
	z-index: 99;
}

@media only screen and (max-width: 1199px) {
	.expand {
		display: block;
	}
}

@media only screen and (max-width: 767px) {
	.expand {
		top: 0.9375rem;
	}
}

.expand em {
	display: none;
	transition: none;
}

.expand span {
	background-color: #060607;
	display: block;
	width: 1.9375rem;
	height: 0.125rem;
	position: absolute;
	right: 0.9375rem;
}

.expand span.top {
	top: 1.625rem;
}

.expand span.mid {
	top: 2.125rem;
}

.expand span.bottom {
	top: 2.625rem;
}

.mobile-nav-bg {
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 997;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1199px) {
	.mobile-nav-bg {
		display: block;
	}
}

@media only screen and (max-width: 1199px) {
	.reveal-out .mobile-nav-bg {
		opacity: 1;
		visibility: visible;
	}
}

html {
	scroll-behavior: smooth;
}

html,
body {
	height: auto !important;
}

body {
	font-family: "Roboto", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1rem;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: fadeIn;
	transition-timing-function: ease-in;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
}

b,
strong {
	color: #1e1a34;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
	font-weight: normal;
}

ul,
ol {
	color: #565367;
	margin-bottom: 1.5rem;
	margin-left: 1.125rem;
	padding: 0;
	line-height: 1.85;
}

ul li,
ol li {
	margin-bottom: 0.75rem;
}

p {
	color: #565367;
	line-height: 1.5rem;
}

p:empty {
	display: none !important;
}

img {
	height: auto;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-1 {
	margin-bottom: 0.5rem !important;
}

.mb-2 {
	margin-bottom: 1rem !important;
}

.mb-3 {
	margin-bottom: 1.5rem !important;
}

.mb-4 {
	margin-bottom: 2rem !important;
}

.mb-5 {
	margin-bottom: 3rem !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-1 {
	margin-top: 0.5rem !important;
}

.mt-2 {
	margin-top: 1rem !important;
}

.mt-3 {
	margin-top: 1.5rem !important;
}

.mt-4 {
	margin-top: 2rem !important;
}

.mt-5 {
	margin-top: 3rem !important;
}

.text-underline {
	text-decoration: underline;
}

.text-uppercase {
	text-transform: uppercase;
}

.red-txt {
	color: #cb0000;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fade-in {
	opacity: 0;
	animation: fadeIn ease-in 1;
	animation-fill-mode: forwards;
	animation-duration: 0.3s;
	animation-delay: 0.1s;
}

.btn {
	border: 0.0625rem solid transparent;
	border-radius: 0.3125rem;
	cursor: pointer;
	display: inline-block;
	font-size: 1.1875rem;
	line-height: 1.5rem;
	margin: 0;
	padding: 1rem 1.875rem;
	text-align: center;
	transition: all 0.15s ease-in-out;
	vertical-align: middle;
}

.btn-primary,
.btn-secondary,
.btn-white {
	color: #fff;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:active:hover,
.btn-secondary:focus,
.btn-white:hover,
.btn-white:active,
.btn-white:active:hover,
.btn-white:focus {
	color: #fff;
}

.btn-primary {
	background-color: #1e1a34;
	border-color: #1e1a34;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary:focus {
	background-color: #2a2448;
	border-color: #2a2448;
}

.btn-secondary {
	background-color: #f1b434;
	border-color: #f1b434;
	color: #1e1a34;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:active:hover,
.btn-secondary:focus {
	background-color: #f4c767;
	border-color: #f4c767;
	color: #1e1a34;
}

.btn-white {
	background-color: white;
	border-color: white;
	color: #1e1a34 !important;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
}

@media only screen and (max-width: 767px) {
	.btn-mobile-small {
		width: 100%;
	}
}

.main-wrap {
	margin: 0 auto -17.1875rem;
	min-height: 100%;
	padding: 0 0 17.1875rem;
	overflow: hidden;
}

@media only screen and (max-width: 991px) {
	.main-wrap {
		margin: 0 auto;
		min-height: auto;
		padding: 0;
	}
}

.page-container {
	padding: 5.5rem 0 0 !important;
	max-width: 100% !important;
}

@media only screen and (max-width: 767px) {
	.page-container {
		padding: 5rem 0 0 !important;
	}
}

.container {
	margin: 0 auto;
	max-width: 81.25rem;
	position: relative;
	width: 100%;
}

@media only screen and (max-width: 1399px) {
	.container {
		max-width: 90%;
	}
}

@media only screen and (max-width: 767px) {
	.container {
		max-width: 100%;
		padding: 0 1.5rem;
	}
}

.main-hero {
	background-image: url("images/OL_Hero_Yellow_V3.jpg");
	background-color: #f1b434;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	position: relative;
	height: 34.375rem;
	width: 100%;
}

@media only screen and (max-width: 1599px) {
	.main-hero {
		height: 29.6875rem;
	}
}

@media only screen and (max-width: 1199px) {
	.main-hero {
		background-image: none !important;
		height: auto;
	}
}

.main-hero .container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding-left: 4.5%;
	width: auto;
	max-width: none;
}

@media only screen and (max-width: 1699px) {
	.main-hero .container {
		padding-left: 3.5%;
	}
}

@media only screen and (max-width: 1499px) {
	.main-hero .container {
		padding-left: 3%;
	}
}

@media only screen and (max-width: 1199px) {
	.main-hero .container {
		padding: 4rem 6% 5rem;
	}
}

@media only screen and (max-width: 991px) {
	.main-hero .container {
		padding: 4rem 2rem 5rem;
	}
}

@media only screen and (max-width: 767px) {
	.main-hero .container {
		padding: 4rem 1.5rem 5rem;
	}
}

.main-hero h1 {
	font-size: 3rem;
	line-height: 4rem;
	margin-bottom: 2.75rem;
	margin-top: -1rem;
}

@media only screen and (max-width: 1299px) {
	.main-hero h1 {
		margin-top: 0;
	}
}

@media only screen and (max-width: 1499px) {
	.main-hero h1 {
		font-size: 2.75rem;
		line-height: 3.5rem;
	}
}

@media only screen and (max-width: 767px) {
	.main-hero h1 {
		font-size: 2.5rem;
		line-height: 3.25rem;
		margin-bottom: 2rem;
		text-align: center;
	}
}

.main-hero h2 {
	font-family: "Roboto", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.375rem;
	letter-spacing: 0.03em;
	margin-bottom: 1.5rem;
}

@media only screen and (max-width: 1499px) {
	.main-hero h2 {
		font-size: 1.25rem;
	}
}

@media only screen and (max-width: 767px) {
	.main-hero h2 {
		font-size: 1.1875rem;
		line-height: 1.75rem;
		margin: 0 auto 1.5rem;
		text-align: center;
	}
}

.main-hero p {
	display: flex;
	flex-direction: row;
	font-size: 1.0625rem;
	margin: 0;
	letter-spacing: 0.03em;
}

.main-hero p a {
	display: flex;
}

.main-hero p svg {
	fill: #1e1a34;
	margin-left: 0.375rem;
}

.main-hero h1,
.main-hero h2,
.main-hero h4,
.main-hero p {
	color: #1e1a34;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
}

.main-hero .vls-search,
.main-hero .open-library-search {
	display: flex;
	margin-bottom: 1.5rem;
	position: relative;
	width: 45.625rem;
}

@media only screen and (max-width: 1699px) {
	.main-hero .vls-search,
	.main-hero .open-library-search {
		width: 42.5rem;
	}
}

@media only screen and (max-width: 1499px) {
	.main-hero .vls-search,
	.main-hero .open-library-search {
		width: 38.4375rem;
	}
}

@media only screen and (max-width: 1299px) {
	.main-hero .vls-search,
	.main-hero .open-library-search {
		width: 31.875rem;
	}
}

@media only screen and (max-width: 1199px) {
	.main-hero .vls-search,
	.main-hero .open-library-search {
		width: 100%;
	}
}

@media only screen and (max-width: 767px) {
	.main-hero .vls-search,
	.main-hero .open-library-search {
		flex-direction: column;
	}
}

.main-hero .vls-search .search-icon,
.main-hero .open-library-search .search-icon {
	position: absolute;
	left: 1.125rem;
	top: 1.375rem;
}

@media only screen and (max-width: 767px) {
	.main-hero .vls-search .search-icon,
	.main-hero .open-library-search .search-icon {
		top: 1.125rem;
	}
}

.main-hero .vls-search .search-icon svg,
.main-hero .open-library-search .search-icon svg {
	fill: #565367;
	height: 1.5rem;
	width: 1.5rem;
}

.main-hero .vls-search .form-control,
.main-hero .open-library-search .form-control {
	border-color: white;
	font-size: 1.125rem;
	height: 4.25rem;
	padding-left: 3.5rem;
}

.main-hero .vls-search .form-control:focus,
.main-hero .open-library-search .form-control:focus {
	border-color: #1e1a34;
}

@media only screen and (max-width: 1199px) {
	.main-hero .vls-search .form-control,
	.main-hero .open-library-search .form-control {
		font-size: 1.0625rem;
	}
}

@media only screen and (max-width: 767px) {
	.main-hero .vls-search .form-control,
	.main-hero .open-library-search .form-control {
		font-size: 1.0625rem;
		height: 3.75rem;
	}
}

.main-hero .vls-search .btn-primary,
.main-hero .open-library-search .btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1875rem;
	height: 4.25rem;
	text-transform: uppercase;
	width: 11.25rem;
}

.main-hero .vls-search .btn-primary,
.main-hero .open-library-search .btn-primary {
	margin-left: 1.125rem;
}

@media only screen and (max-width: 767px) {
	.main-hero .vls-search .btn-primary,
	.main-hero .open-library-search .btn-primary {
		height: 3.75rem;
		justify-content: center;
		margin: 0.875rem 0 0;
		width: 100%;
	}
}

.main-hero .ol-resources-container {
	position: absolute;
	right: 10%;
	bottom: 0;
	z-index: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media only screen and (max-width: 1699px) {
	.main-hero .ol-resources-container {
		right: 8%;
	}
}

@media only screen and (max-width: 1599px) {
	.main-hero .ol-resources-container {
		right: 7%;
	}
}

@media only screen and (max-width: 1299px) {
	.main-hero .ol-resources-container {
		right: 5.5%;
	}
}

@media only screen and (max-width: 1199px) {
	.main-hero .ol-resources-container {
		display: none;
	}
}

.main-hero .ol-resources-container .flex-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.main-hero .ol-resources-container .icon {
	margin-bottom: 2rem;
}

.main-hero .ol-resources-container .txt {
	color: white;
	font-size: 1.875rem;
}

@media only screen and (max-width: 1499px) {
	.main-hero .ol-resources-container .txt {
		font-size: 1.625rem;
	}
}

.about-info-section,
.oer-info-section {
	padding: 4.25rem 3% 6rem;
}

@media only screen and (max-width: 991px) {
	.about-info-section,
	.oer-info-section {
		padding: 4.25rem 2rem 6rem;
	}
}

@media only screen and (max-width: 767px) {
	.about-info-section,
	.oer-info-section {
		padding: 3rem 1.5rem 5rem;
	}
}

@media only screen and (max-width: 1199px) {
	.about-info-section .row,
	.oer-info-section .row {
		justify-content: center;
	}
}

@media only screen and (max-width: 1199px) {
	.about-info-section .four.columns,
	.oer-info-section .four.columns {
		margin-bottom: 2.75rem;
		min-width: 50%;
	}
	.about-info-section .four.columns:last-child,
	.oer-info-section .four.columns:last-child {
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 991px) {
	.about-info-section .four.columns,
	.oer-info-section .four.columns {
		margin-bottom: 5rem;
		min-width: 100%;
	}
}

@media only screen and (max-width: 767px) {
	.about-info-section .four.columns,
	.oer-info-section .four.columns {
		margin-bottom: 4rem;
	}
}

.about-info-section .four.columns .container,
.oer-info-section .four.columns .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	height: 100%;
	max-width: 100%;
}

@media only screen and (max-width: 767px) {
	.about-info-section .four.columns .container,
	.oer-info-section .four.columns .container {
		padding: 0;
	}
}

.about-info-section .four.columns .container .img-container,
.oer-info-section .four.columns .container .img-container {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.about-info-section .four.columns .container h3,
.oer-info-section .four.columns .container h3 {
	font-size: 2.375rem;
	margin: 1.5rem 0 1rem;
}

@media only screen and (max-width: 1399px) {
	.about-info-section .four.columns .container h3,
	.oer-info-section .four.columns .container h3 {
		font-size: 2.125rem;
	}
}

.about-info-section .four.columns .container p,
.oer-info-section .four.columns .container p {
	font-size: 1.125rem;
	line-height: 1.75rem;
	margin: 0 0 2rem;
	max-width: 29.0625rem;
}

@media only screen and (max-width: 1599px) {
	.about-info-section .four.columns .container p,
	.oer-info-section .four.columns .container p {
		font-size: 1.0625rem;
		line-height: 1.625rem;
		max-width: 27.5rem;
	}
}

@media only screen and (max-width: 1399px) {
	.about-info-section .four.columns .container p,
	.oer-info-section .four.columns .container p {
		max-width: 23.75rem;
	}
}

@media only screen and (max-width: 1199px) {
	.about-info-section .four.columns .container p,
	.oer-info-section .four.columns .container p {
		max-width: 94%;
	}
}

@media only screen and (max-width: 991px) {
	.about-info-section .four.columns .container p,
	.oer-info-section .four.columns .container p {
		max-width: 88%;
	}
}

@media only screen and (max-width: 767px) {
	.about-info-section .four.columns .container p,
	.oer-info-section .four.columns .container p {
		font-size: 1rem;
		max-width: 100%;
	}
}

.about-info-section .four.columns .container .btn-primary,
.about-info-section .four.columns .container .btn-secondary,
.oer-info-section .four.columns .container .btn-primary,
.oer-info-section .four.columns .container .btn-secondary {
	line-height: 1.875rem;
	min-height: 4rem;
	text-transform: uppercase;
}

@media only screen and (max-width: 1399px) {
	.about-info-section .four.columns .container .btn-primary,
	.about-info-section .four.columns .container .btn-secondary,
	.oer-info-section .four.columns .container .btn-primary,
	.oer-info-section .four.columns .container .btn-secondary {
		font-size: 1.125rem;
	}
}

.oer-info-section {
	background-color: #f1b434;
	padding: 4.25rem 8% 6rem;
}

@media only screen and (max-width: 991px) {
	.oer-info-section {
		padding: 4.25rem 2rem 6rem;
	}
}

@media only screen and (max-width: 767px) {
	.oer-info-section {
		padding: 3rem 1.5rem 5rem;
	}
}

.oer-info-section .four.columns {
	min-width: 50%;
}

.oer-info-section .four.columns .container h3 {
	margin-top: 0;
}

.oer-info-section .four.columns .container p {
	color: #1e1a34;
	max-width: 39.0625rem;
}

@media only screen and (max-width: 991px) {
	.oer-info-section .four.columns {
		min-width: 100%;
	}
}

.counter-section {
	background-color: #1e1a34;
	padding: 4rem 3%;
	width: 100%;
}

@media only screen and (max-width: 1199px) {
	.counter-section {
		padding: 4rem 2rem 1.5rem;
	}
}

@media only screen and (max-width: 991px) {
	.counter-section {
		padding: 4rem 2rem 5rem;
	}
}

@media only screen and (max-width: 767px) {
	.counter-section {
		padding: 4rem 1.5rem 5rem;
	}
}

.counter-section .counter {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: -0.75rem;
}

@media only screen and (max-width: 1199px) {
	.counter-section .counter {
		margin: 0 0 3.5rem;
		min-width: 50%;
	}
}

@media only screen and (max-width: 991px) {
	.counter-section .counter {
		margin: 0 0 3.5rem;
		min-width: 100%;
	}
	.counter-section .counter:last-child {
		margin: 0;
	}
}

.counter-section .counter .counter-container {
	display: flex;
	align-items: flex-end;
	height: 3.5rem;
}

.counter-section .counter .counter-container .count-icon {
	height: 3.5rem;
	line-height: 5rem;
	padding-right: 1.125rem;
}

.counter-section .counter .counter-container .count-icon svg {
	fill: white;
}

.counter-section .counter .counter-container .count-icon.icon-1 svg {
	height: 2.375rem;
	width: 2.125rem;
}

@media only screen and (max-width: 767px) {
	.counter-section .counter .counter-container .count-icon.icon-1 svg {
		height: 2.25rem;
		width: 2rem;
	}
}

.counter-section .counter .counter-container .count-icon.icon-2 svg {
	height: 2.5rem;
	width: 2.5rem;
}

@media only screen and (max-width: 767px) {
	.counter-section .counter .counter-container .count-icon.icon-2 svg {
		height: 2.375rem;
		width: 2.375rem;
	}
}

.counter-section .counter .counter-container .count-icon.icon-3 {
	padding-right: 0.75rem;
}

.counter-section .counter .counter-container .count-icon.icon-3 svg {
	height: 2.375rem;
	width: 2.9375rem;
}

@media only screen and (max-width: 767px) {
	.counter-section .counter .counter-container .count-icon.icon-3 svg {
		height: 2.125rem;
		width: 2.6875rem;
	}
}

.counter-section .counter .counter-container .count-icon.icon-4 {
	padding-right: 0.5rem;
}

.counter-section .counter .counter-container .count-icon.icon-4 svg {
	height: 2.5rem;
	width: 1.5625rem;
}

@media only screen and (max-width: 767px) {
	.counter-section .counter .counter-container .count-icon.icon-4 svg {
		height: 2.375rem;
		width: 1.5rem;
	}
}

.counter-section .counter .counter-container .count {
	color: white;
	font-size: 2.75rem;
	height: 3.5rem;
	line-height: 3.375rem;
}

.counter-section .counter .count-heading {
	color: white;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	line-height: 1.75rem;
	margin-top: 1rem;
	text-align: center;
}

html[lang="fr-FR"] header .logo-main img {
	display: none;
}

html[lang="fr-FR"] header .logo-main .fr-only {
	display: block;
}

@media only screen and (max-width: 1599px) {
	html[lang="fr-FR"] .main-hero h1 {
		font-size: 2.75rem;
		line-height: 3.5rem;
	}
}

@media only screen and (max-width: 1399px) {
	html[lang="fr-FR"] .main-hero h1 {
		font-size: 2.625rem;
		line-height: 3.375rem;
	}
}

@media only screen and (max-width: 1299px) {
	html[lang="fr-FR"] .main-hero h1 {
		font-size: 2.5rem;
		line-height: 3.25rem;
	}
}

@media only screen and (max-width: 1599px) {
	html[lang="fr-FR"] .main-hero h2 {
		font-size: 1.25rem;
	}
}

@media only screen and (max-width: 767px) {
	html[lang="fr-FR"] .main-hero h2 {
		font-size: 1.1875rem;
		line-height: 1.75rem;
	}
}

html[lang="fr-FR"] .main-hero .ol-resources-container {
	right: 7%;
}

@media only screen and (max-width: 1699px) {
	html[lang="fr-FR"] .main-hero .ol-resources-container {
		right: 6%;
	}
}

@media only screen and (max-width: 1600px) {
	html[lang="fr-FR"] .main-hero .ol-resources-container {
		right: 4%;
	}
}

@media only screen and (max-width: 1499px) {
	html[lang="fr-FR"] .main-hero .ol-resources-container {
		right: 5%;
	}
}

@media only screen and (max-width: 1399px) {
	html[lang="fr-FR"] .main-hero .ol-resources-container {
		right: 4.5%;
	}
}

@media only screen and (max-width: 1399px) {
	html[lang="fr-FR"] .main-hero .ol-resources-container .txt {
		font-size: 1.625rem;
	}
}

@media only screen and (max-width: 1299px) {
	html[lang="fr-FR"] .main-hero .ol-resources-container .txt {
		font-size: 1.5rem;
	}
}

.eco-user-login .dropbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1e1a34;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.0625rem;
	position: relative;
	text-transform: uppercase;
}

@media only screen and (max-width: 1199px) {
	.eco-user-login .dropbtn {
		color: white;
		font-size: 1rem;
	}
}

.eco-user-login .dropbtn svg {
	position: relative;
	left: 0.375rem;
}

@media only screen and (max-width: 1199px) {
	.eco-user-login .dropbtn svg {
		fill: white;
	}
}

.eco-user-login .avatar {
	height: 2.25rem;
	width: 2.25rem;
	margin-right: 0.75rem;
}

@media only screen and (max-width: 1199px) {
	.eco-user-login .avatar {
		height: 2rem;
		width: 2rem;
	}
}

.eco-user-login .avatar-text {
	background-color: #e9e8eb;
	border-radius: 6.25rem;
	color: #1e1a34;
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.eco-user-login .avatar-text::before {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

.eco-user-login .avatar-text .initial-wrap span {
	line-height: 2.25rem;
}

@media only screen and (max-width: 1199px) {
	.eco-user-login .avatar-text .initial-wrap span {
		line-height: 2.125rem;
	}
}

.eco-user-login .eco-user-menu {
	background-color: #fff;
	border-radius: 0.25rem;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.14);
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	min-width: 11.5625rem;
	opacity: 0;
	transform: translateY(45px);
	transition: all 0.3s ease-in-out;
	-webkit-backface-visibility: hidden;
	visibility: hidden;
	z-index: 1;
}

@media only screen and (max-width: 1199px) {
	.eco-user-login .eco-user-menu {
		background-color: transparent;
		border-radius: 0;
		box-shadow: none;
		display: none;
		padding: 0;
		position: relative;
		margin: 0;
		transform: none;
		width: auto;
	}
}

.eco-user-login .eco-user-menu li {
	margin-left: 0;
	transition: background-color 0.25s ease-in-out;
}

.eco-user-login .eco-user-menu a {
	display: block;
	font-family: "Roboto", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 0.9375rem;
	height: 3rem;
	line-height: 3rem;
	padding: 0 1rem;
	text-align: left;
	text-decoration: none;
	text-transform: none;
}

@media only screen and (max-width: 1199px) {
	.eco-user-login .eco-user-menu a {
		height: auto;
		padding: 0;
		line-height: 1.85;
		text-align: center;
	}
}

.eco-user-login:hover .eco-user-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(45px);
}

@media only screen and (max-width: 1199px) {
	.eco-user-login:hover .eco-user-menu {
		opacity: 0;
		visibility: hidden;
		transform: none;
	}
}

.eco-user-login:hover .eco-user-menu li:hover {
	background-color: #f4f4f5;
}

@media only screen and (max-width: 1199px) {
	.eco-user-login:hover .eco-user-menu li:hover {
		background-color: transparent;
	}
}

@media only screen and (max-width: 1199px) {
	.eco-user-login.dropdown-open .eco-user-menu {
		display: block;
		opacity: 1;
		visibility: visible;
	}
	.eco-user-login.dropdown-open .eco-user-menu li:first-child {
		border-top: 0.0625rem solid #434150;
		margin-top: 1rem;
	}
	.eco-user-login.dropdown-open .eco-user-menu li:last-child {
		padding-bottom: 0;
	}
}

.eco-user-login .dropbtn::before,
.eco-user-login .eco-user-menu a::before {
	content: none;
}

.page-content-container {
	margin: 0 auto;
	max-width: 67.5rem;
	padding: 4rem 0 6rem;
}

@media only screen and (max-width: 1250px) {
	.page-content-container {
		padding: 4rem 4vw 6rem;
	}
}

@media only screen and (max-width: 991px) {
	.page-content-container {
		padding: 4rem 2rem 4rem;
	}
}

@media only screen and (max-width: 767px) {
	.page-content-container {
		padding: 3.5rem 1.5rem 4rem;
	}
}

.page-content-container h1.entry-title {
	font-size: 2.75rem;
	margin-bottom: 3.5rem;
	text-align: center;
}

@media only screen and (max-width: 1399px) {
	.page-content-container h1.entry-title {
		font-size: 2.625rem;
	}
}

@media only screen and (max-width: 767px) {
	.page-content-container h1.entry-title {
		font-size: 2.25rem;
		line-height: 3.25rem;
		margin-bottom: 2.5rem;
	}
}

.page-content-container .entry-content h2 {
	font-size: 2rem;
	line-height: 2.5rem;
}

.page-content-container .entry-content h3 {
	font-size: 1.75rem;
	line-height: 2.25rem;
}

.page-content-container .entry-content h4 {
	font-size: 1.25rem;
	line-height: 1.625rem;
}

.page-content-container .entry-content p {
	font-size: 1.0625rem;
	line-height: 1.875rem;
}

@media only screen and (max-width: 767px) {
	.page-content-container .entry-content p {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

.page-content-container .entry-content p.contact-form-title {
	color: #1e1a34;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.25rem;
	margin-bottom: 1rem;
	text-align: center;
}

@media only screen and (max-width: 767px) {
	.page-content-container .entry-content p.contact-form-title {
		font-size: 1.1875rem;
	}
}

.page-content-container .entry-content p.contact-form-subtitle {
	font-size: 1.125rem;
	text-align: center;
}

@media only screen and (max-width: 767px) {
	.page-content-container .entry-content p.contact-form-subtitle {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

.page-content-container .entry-content ul,
.page-content-container .entry-content ol {
	font-size: 1.0625rem;
	line-height: 1.875rem;
}

@media only screen and (max-width: 767px) {
	.page-content-container .entry-content ul,
	.page-content-container .entry-content ol {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

.page-content-container .entry-content a {
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
}

.page-content-container .entry-content a:hover {
	text-decoration: underline;
}

.page-content-container .entry-content a.btn:hover {
	text-decoration: none;
}

.page-content-container .entry-content a.btn-primary {
	font-family: "Roboto", serif;
	font-weight: 400;
	font-style: normal;
}

.page-content-container .entry-content .wp-block-button__link {
	background-color: #f1b434;
	border-radius: 0.3125rem;
	color: #1e1a34;
	padding: 0.875rem 1.75rem;
	text-decoration: none;
	transition: all 0.3s ease;
}

.page-content-container .entry-content .wp-block-button__link:hover,
.page-content-container .entry-content .wp-block-button__link:active,
.page-content-container .entry-content .wp-block-button__link:active:hover,
.page-content-container .entry-content .wp-block-button__link:focus {
	background-color: #f4c767;
	color: #1e1a34;
	text-decoration: none;
}

.entry-title-container {
	background-color: #f1b434;
	padding: 4rem;
	text-align: center;
}

@media only screen and (max-width: 767px) {
	.entry-title-container {
		padding: 3.5rem 4rem;
	}
}

.entry-title-container h1.entry-title {
	color: #1e1a34;
	font-size: 3rem;
	line-height: 1.55;
	margin: 0;
}

@media only screen and (max-width: 767px) {
	.entry-title-container h1.entry-title {
		font-size: 2.75rem;
		line-height: 3.5rem;
	}
}

.search-details-container {
	margin: 0 auto;
	max-width: 100%;
	padding: 2rem 0 0;
}

.message-404 {
	text-align: center;
}

.message-404 p {
	font-size: 1.1875rem;
	line-height: 1.75rem;
}

@media only screen and (max-width: 767px) {
	.message-404 p {
		font-size: 1.125rem;
	}
}

.customize-support header {
	margin-top: 2rem;
}

@media only screen and (max-width: 782px) {
	.customize-support header {
		margin-top: 3rem;
	}
}

.otgs-development-site-front-end {
	display: none !important;
}

.wpml-ls-item-en,
.wpml-ls-item-fr {
	display: none;
}

.with_frm_style .frm_primary_label {
	color: #1e1a34;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
	font-weight: normal;
	font-size: 1.0625rem;
}

@media only screen and (max-width: 767px) {
	.with_frm_style .frm_primary_label {
		font-size: 1rem;
	}
}

.with_frm_style input[type="text"],
.with_frm_style input[type="password"],
.with_frm_style input[type="email"],
.with_frm_style input[type="number"],
.with_frm_style input[type="url"],
.with_frm_style input[type="tel"],
.with_frm_style input[type="phone"],
.with_frm_style input[type="search"],
.with_frm_style select,
.with_frm_style textarea,
.frm_form_fields_active_style,
.frm_form_fields_error_style {
	background-color: white;
	background-image: none;
	border: 0.0625rem solid #c7c6cc;
	border-radius: 0.375rem;
	box-shadow: 0 0 0 1px transparent;
	color: #1e1a34;
	font-family: "Roboto", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.0625rem;
	display: block;
	min-height: 3.75rem;
	padding: 0.75rem 0.875rem;
	transition: background-color ease-in-out 0.15s, border-color ease-in-out 0.15s;
	width: 100%;
}

@media only screen and (max-width: 767px) {
	.with_frm_style input[type="text"],
	.with_frm_style input[type="password"],
	.with_frm_style input[type="email"],
	.with_frm_style input[type="number"],
	.with_frm_style input[type="url"],
	.with_frm_style input[type="tel"],
	.with_frm_style input[type="phone"],
	.with_frm_style input[type="search"],
	.with_frm_style select,
	.with_frm_style textarea,
	.frm_form_fields_active_style,
	.frm_form_fields_error_style {
		font-size: 1rem;
		min-height: 3.375rem;
	}
}

.frm_style_formidable-style.with_frm_style
	.form-field
	input:not([type="file"]):focus,
.frm_style_formidable-style.with_frm_style select:focus,
.frm_style_formidable-style.with_frm_style textarea:focus,
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type="text"],
.frm_style_formidable-style.with_frm_style
	.frm_focus_field
	input[type="password"],
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type="email"],
.frm_style_formidable-style.with_frm_style
	.frm_focus_field
	input[type="number"],
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type="url"],
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type="tel"],
.frm_style_formidable-style.with_frm_style
	.frm_focus_field
	input[type="search"],
.frm_form_fields_active_style {
	border-color: #1e1a34;
	border-color: #1e1a34;
	box-shadow: 0 0 0 1px #1e1a34;
	color: #1e1a34;
}

.frm_style_formidable-style.with_frm_style .frm_blank_field input[type="text"],
.frm_style_formidable-style.with_frm_style
	.frm_blank_field
	input[type="password"],
.frm_style_formidable-style.with_frm_style .frm_blank_field input[type="url"],
.frm_style_formidable-style.with_frm_style .frm_blank_field input[type="tel"],
.frm_style_formidable-style.with_frm_style
	.frm_blank_field
	input[type="number"],
.frm_style_formidable-style.with_frm_style .frm_blank_field input[type="email"],
.frm_style_formidable-style.with_frm_style .frm_blank_field textarea,
.frm_style_formidable-style.with_frm_style .frm_form_field :invalid {
	border-color: #cb0000 !important;
	box-shadow: 0 0 0 1px #cb0000 !important;
	color: #1e1a34;
}

.frm_style_formidable-style.with_frm_style .frm_error {
	color: #cb0000 !important;
	font-family: "Roboto" !important;
    font-weight: 600;
}

.frm_style_formidable-style.with_frm_style .frm_blank_field label {
	color: #1e1a34 !important;
}

.frm_style_formidable-style.with_frm_style .frm_error {
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

.with_frm_style .frm_required {
	color: #cb0000;
	font-weight: normal;
}

.frm_style_formidable-style.with_frm_style .form-field {
	margin-bottom: 2rem;
}

.frm_style_formidable-style.with_frm_style input[type="submit"],
.frm_style_formidable-style.with_frm_style .frm_submit input[type="button"],
.frm_style_formidable-style.with_frm_style .frm_submit button,
.frm_form_submit_style,
.frm_style_formidable-style.with_frm_style .frm-edit-page-btn {
	background-color: #f1b434;
	border: 0.0625rem solid transparent;
	border-color: #f1b434;
	border-radius: 0.3125rem;
	box-shadow: none !important;
	color: #1e1a34;
	cursor: pointer;
	display: inline-block;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.1875rem;
	line-height: 1.5rem;
	margin: 0.5rem 0 0;
	padding: 1rem 1.875rem;
	text-align: center;
	text-transform: uppercase;
	transition: all 0.15s ease-in-out;
	vertical-align: middle;
}

@media only screen and (max-width: 499px) {
	.frm_style_formidable-style.with_frm_style input[type="submit"],
	.frm_style_formidable-style.with_frm_style .frm_submit input[type="button"],
	.frm_style_formidable-style.with_frm_style .frm_submit button,
	.frm_form_submit_style,
	.frm_style_formidable-style.with_frm_style .frm-edit-page-btn {
		width: 100%;
	}
}

.frm_style_formidable-style.with_frm_style .frm-edit-page-btn:hover,
.frm_style_formidable-style.with_frm_style input[type="submit"]:hover,
.frm_style_formidable-style.with_frm_style
	.frm_submit
	input[type="button"]:hover,
.frm_style_formidable-style.with_frm_style .frm_submit button:hover {
	background-color: #f4c767;
	border-color: #f4c767;
	color: #1e1a34;
}

.frm_style_formidable-style.with_frm_style .frm-edit-page-btn:focus,
.frm_style_formidable-style.with_frm_style input[type="submit"]:focus,
.frm_style_formidable-style.with_frm_style
	.frm_submit
	input[type="button"]:focus,
.frm_style_formidable-style.with_frm_style .frm_submit button:focus,
.frm_style_formidable-style.with_frm_style input[type="submit"]:active,
.frm_style_formidable-style.with_frm_style
	.frm_submit
	input[type="button"]:active,
.frm_style_formidable-style.with_frm_style .frm_submit button:active {
	background-color: #f1b434;
	border-color: #f1b434;
	color: #1e1a34;
	outline: none;
}

.frm_style_formidable-style.with_frm_style .frm_loading_prev .frm_prev_page,
.frm_style_formidable-style.with_frm_style
	.frm_loading_prev
	.frm_prev_page:hover,
.frm_style_formidable-style.with_frm_style
	.frm_loading_prev
	.frm_prev_page:active,
.frm_style_formidable-style.with_frm_style
	.frm_loading_prev
	.frm_prev_page:focus,
.frm_style_formidable-style.with_frm_style .frm_loading_form .frm_button_submit,
.frm_style_formidable-style.with_frm_style
	.frm_loading_form
	.frm_button_submit:hover,
.frm_style_formidable-style.with_frm_style
	.frm_loading_form
	.frm_button_submit:active,
.frm_style_formidable-style.with_frm_style
	.frm_loading_form
	.frm_button_submit:focus {
	color: transparent;
	background: #565367;
	border-color: #565367;
}

.frm_style_formidable-style.with_frm_style .frm_error_style {
	background-color: #ffeded;
	border-color: #ffeded;
	border-radius: 0.375rem;
	color: #cb0000;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
	margin: 2rem 0;
	padding: 1.5rem;
}

.frm_forms.frm_style_formidable-style.with_frm_style {
	margin: 0 auto;
}

.with_frm_style .frm_form_fields > fieldset {
	padding: 0;
}

.frm_form-contact-form {
	max-width: 58.75rem;
	margin: 0 auto;
}

.frm_slider {
	background-color: #d2d1d6;
}

input:checked + .frm_switch .frm_slider {
	background-color: #1e1a34;
}

.with_frm_style select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: #fff
		url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E")
		no-repeat right 10px top 54%;
	background-size: 16px;
}

.frm_style_formidable-style.with_frm_style
	.frm-show-form
	.frm_section_heading
	.frm_section_spacing {
	margin-bottom: 2.375rem;
}

.frm_style_formidable-style.with_frm_style
	.frm-show-form
	.frm_section_heading
	h3 {
	border-top: none;
}

.with_frm_style .frm-show-form .frm_section_heading h3 {
	color: #1e1a34;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.625rem;
	font-weight: normal;
	line-height: 2.25rem;
}

.frm_style_formidable-style.with_frm_style p.description,
.frm_style_formidable-style.with_frm_style div.description,
.frm_style_formidable-style.with_frm_style div.frm_description,
.frm_style_formidable-style.with_frm_style .frm-show-form > div.frm_description,
.frm_style_formidable-style.with_frm_style .frm_error {
	color: #565367;
	font-family: "Roboto", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 0.875rem;
	line-height: 1.375rem;
	padding-top: 0.25rem;
}

.with_frm_style .horizontal_radio .frm_checkbox,
.with_frm_style .horizontal_radio .frm_radio,
.horizontal_radio .frm_catlevel_1 {
	margin-top: 0.5rem;
}

.horizontal_radio .frm_radio {
	margin: 0 0.5rem 0 0;
}

.with_frm_style .frm_radio label {
	color: #1e1a34;
	font-size: 1rem;
	line-height: 1.5rem;
	font-family: "Roboto", serif;
	font-weight: 700;
	font-style: normal;
}

.with_frm_style .frm_radio input[type="radio"] {
	border-color: #8e8c99;
	border-width: 0.125rem;
	box-shadow: none !important;
	width: 1.375rem;
	min-width: 1.375rem;
	height: 1.375rem;
	margin: -0.125rem 0.3125rem 0 0;
	margin-top: -0.125rem;
}

.with_frm_style .frm_radio input[type="radio"]:before {
	box-shadow: inset 10px 10px #565367;
	width: 0.875rem;
	height: 0.875rem;
}

.page-content-container .entry-content .book-data h2 {
	font-size: 24px;
	line-height: 34px;
	margin-bottom: 12px;
}

.page-content-container .entry-content .book-data h2 a:hover {
	text-decoration: underline;
}

@media only screen and (max-width: 767px) {
	.page-content-container .entry-content .book-data h2 {
		font-size: 21px;
		line-height: 30px;
	}
}

.border {
	background-color: #fafafa;
	border: 0.1875rem solid #1e1a34;
	border-radius: 1.375rem;
	color: #1e1a34;
	padding: 0.7rem;
}

.border ul li .download-icon {
	background: transparent
		url(/wp-content/themes/eco-openlibrary-portal/images/download-icon.svg)
		center right no-repeat;
	background-size: 30px 30px;
	color: #1e1a34;
	text-decoration: none;
	padding: 20px 35px 20px 0px;
}

.border ul li .external-link-icon {
	background: transparent
		url(/wp-content/themes/eco-openlibrary-portal/images/external-link.svg)
		center right no-repeat;
	background-size: 30px 30px;
	color: #1e1a34;
	text-decoration: none;
	padding: 20px 35px 20px 0px;
}

.display-flex {
	display: flex;
	flex-direction: column;
}
.mt-auto {
	margin-top: auto !important;
}