@charset "utf-8";
/* CSS Document */

body {
	background-color: #eee;
	padding: 0px;
	margin: 0px;
	font-family: 'Catamaran', sans-serif;
}

/*
	Main Info
	=========

	Variables:
		max-site-width: 1200px;
		dark blue colour: #192f47;
		background light blue colour: #c5d9f1;
		opacitied-white colour: rgba(255,255,255,.8);
		could use #e0e0de for header
		colour that's lighter than the lighest logo blue: #b3c4d8
		lightest blue brand colour: #779ac1;
		medium blue brand colour: #254269;
*/

/* TYPOGRAPHY */

html {
	font-size: 10px;
}

#container {
	font-size: 1.8em;
	min-height: 100vh;
}

p,
a,
span {
	font-size: 1.8rem;
	line-height: 1.3;
}

h1 {
	font-size: 4rem;
	margin: 0;
}

h2 {
	font-size: 2.2rem;
}

h3 {
	font-size: 2.0rem;
}

h4 {
	font-size: 1.9rem;
}

h5 {
	font-size: 1.8rem;
}

h6 {
	font-size: 1.6rem;
}

a {
	text-decoration: none;
	color: #192f47;
	transition: 0.4s ease all;
}

a:hover,
.content-darkener a:hover,
#footer-inner a:hover,
.side-by-side-areas a:hover {
	color: #779ac1;
	transition: 0.4s ease all;
}

p a {
	text-decoration: underline;
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 768px) {
	h1 {
		font-size: 3rem;
		line-height: 1.3;
	}
}

/* END OF TYPOGRAPHY */


/* Header */
#header-outer {
	width: 100vw;
	height: 100px;
	/* if adjust this, change #main-outer calc height */
	box-shadow: 0 0 10px rgba(0, 0, 0, .75);
	display: flex;
	align-items: center;
	z-index: 2;
	background: #b3c4d8;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	transition: 0.4s ease all;
	z-index: 6;
}

body #container #header-outer.header-scrolled {
	background: rgba(179, 196, 216, .9);
	transition: 0.4s ease all;
}

#header-inner {
	width: 100%;
	height: 100%;
	max-width: 1200px;
	/* max-site-width */
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 .5em;
}

#header-navlinks {
	/* NavBar */
	padding: 0;
	display: flex;
	display: flex;
	flex-flow: row wrap;
}

@media (min-width: 768px) and (max-width: 1000px) {
	#header-navlinks {
		padding: 0 .5em;
	}
}

html #container.container-scrolled #header-outer #header-inner #header-navlinks a:hover {
	color: white;
}

.opaque-header #container #header-outer #header-inner #header-navlinks a:hover {
	color: #779ac1;
}

#header-navlinks>li:not(:first-child) {
	margin-left: 2em;
}

#logo-link {
	display: flex;
}

#logo {
	max-height: 75px;
	height: 100%;
}

@media (max-width: 768px) {
	#logo {
		max-height: 60px;
	}

	#navbar:before {
		content: '\f0c9';
		font-family: fontawesome;
		font-size: 4rem;
		color: #254269;
	}

	#navbar.navbar-open:before {
		content: '\f00d';
		color: #254269;
	}

	.header-scrolled #navbar.navbar-open:before {
		content: '\f00d';
		color: #254269;
	}

	#header-navlinks {
		display: none;
		position: absolute;
		background: rgba(37, 66, 105, 1);
		right: 0;
	}

	#header-navlinks.navlinks-open {
		display: block;
		opacity: .95;
	}

	#container #header-outer #header-navlinks a {
		color: white;
		position: relative;
		flex-basis: 100%;
		margin: .25em 0;
	}

	#container #header-outer #header-navlinks a:after {
		content: '\f105';
		font-family: fontawesome;
		margin-left: auto;
		position: absolute;
		right: 0;
	}

	#header-inner {
		padding: 0 1em;
	}

	#header-navlinks>li:not(:first-child) {
		margin-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}

	#header-navlinks>li {
		padding: .25em 1em;
		text-align: left;
		display: flex;
	}

	#header-navlinks>li:first-child {
		padding-top: .5em;
	}

	#header-navlinks {
		width: 100vw;
		left: 0;
		top: 100px;
		overflow: scroll;
		height: calc(100vh - 100px);
	}
}

/* Scrolled */
/* here... */

/* Main */
#main-outer {
	width: 100vw;
	min-height: calc(100vh - 100px - 45px);
	/* uses #header-outer & #footer-outer */
	background: #779ac1;
	position: relative;
	padding-top: 100px;
}

#main-inner {
	width: 100%;
	max-width: 1200px;
	/* max-site-width */
	margin: 0 auto;
	padding-top: 50px;
	z-index: 2;
	position: relative;
}

/* Footer */
#footer-outer {
	width: 100vw;
	font-size: 1.6rem;
	background: #254269;
	color: rgba(255, 255, 255, .8);
	min-height: 45px;
	/* if adjust this, change #main-outer calc height */
	display: flex;
	align-items: center;
	position: relative;
	z-index: 8;
}

#footer-outer span,
#footer-outer a {
	font-size: 1.6rem;
}

#footer-inner {
	width: 100%;
	max-width: 1200px;
	/* max-site-width */
	margin: 0 auto;
	text-align: center;
	padding: .5em;
	display: flex;
	align-items: center;
	justify-content: center;
}

#footer-inner a {
	color: rgba(255, 255, 255, .8);
}

@media (max-width: 768px) {
	#footer-inner {
		flex-direction: column;
	}

	#footer-inner .spacer {
		display: none;
	}
}

.spacer:before {
	content: '|';
	padding: 0 1em;
}

#year {
	padding-right: .25em;
}

/* General Styling */
.call,
.mail-link {
	display: flex;
	align-items: center;
}

.call:before {
	content: '\f095';
	font-family: fontawesome;
	padding-right: .5em;
}

.mail-link:before {
	content: '\f0e0';
	font-family: fontawesome;
	padding-right: .5em;
}

/* Different Page Options */
#full-size-slideshow,
#full-size-bg-img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-image: url(images/projects/authorising-engineers/winbledon-centre-court.jpg);
	background-size: cover;
	background-position: center;
	opacity: 1;

	display: flex;
	align-items: center;
	justify-content: center;
}

#full-size-slideshow:before,
#full-size-bg-img:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: white;
	opacity: .25;
	z-index: 1;
	/*background-image: radial-gradient(circle, black, #303030, #393939);*/
}

#full-size-slideshow:before {
	z-index: 4;
}

#full-size-slideshow h1,
#full-size-bg-img h1 {
	color: white;
	text-shadow: 2px 2px #000;
	text-align: center;
	font-size: 6rem;
	margin: 0;
}

#left-area-slideshow {
	position: relative;
}

#left-area-slideshow .individual-slide {
	background-size: cover;
	background-position: center;
}

#left-area-slideshow .individual-slide figcaption {
	width: 90%;
}

#left-area-slideshow:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: white;
	opacity: .25;
	z-index: 9 !important;
	/*background-image: radial-gradient(circle, black, #303030, #393939);*/
}

@media (max-width: 768px) {
	#left-area-slideshow {
		display: none;
	}
}

@media (min-width: 769px) {
	#container .contains-left-area-slideshow-child {
		background: none;
	}
	#container .contains-left-area-slideshow-child #left-area-slideshow:before,
	#container .contains-left-area-slideshow-child,
	#container .contains-left-area-slideshow-child #left-area-slideshow,
	#container .contains-left-area-slideshow-child #left-area-slideshow .individual-slide {
		border-top-left-radius: 15px;
		border-bottom-left-radius: 15px;
	}

	#container .contains-left-area-slideshow-child .right-area-std .content-darkener {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}

.opaque-header #container #header-outer {
	background: rgba(238, 238, 238, 0.9);
}

.opaque-header #container #header-outer a {
	color: #192f47;
}

.slideshow-content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column wrap;
	position: absolute;
	bottom: .5em;
}

.slideshow-item {
	opacity: .5;
}

.side-by-side-areas {
	display: flex;
	/*flex-flow: row nowrap;*/
	flex-flow: row wrap;
	background: #254269;
	width: 100%;
	border-radius: 10px;
}

.side-by-side-areas.people .left-area-std,
.side-by-side-areas.people .right-area-std {
	background-position: left;
}

.side-by-side-areas a {
	color: white;
}

.left-area-std,
.right-area-std {
	flex-basis: 50%;
	background-size: cover;
	background-position: center;
}

.left-area-std {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.right-area-std {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.left-area-std img,
.right-area-std img {
	max-width: 100%;
}

.cta-navlinks {
	padding: 2em;
}

.cta-navlinks>li {
	padding: .5em 0;
}

.cta-navlinks>li>a:before,
ul.rollover-gallery-arrows>li>a:before {
	font-family: fontawesome;
	content: '\f054';
	padding-right: .5em;
	font-size: .75em;
	color: #779ac1;
}

ul.rollover-gallery-arrows>li>a:hover:after {
	font-family: fontawesome;
	content: '\f06e';
	padding-left: .5em;
	font-size: .75em;
	color: #779ac1;
	font-size: 1.8rem;
}

ul.rollover-gallery-arrows {
	margin-left: .5em;
}

.cta-navlinks>li:not(:first-child) {
	border-top: 1px solid rgba(204, 204, 204, .5);
}

@media (max-width: 768px) {
	.side-by-side-areas {
		flex-direction: column;
		flex-direction: row;
	}
	.left-area-std,
	.right-area-std {
		flex-basis: 100%;
}

	#container #full-size-bg-img {
		background: #779ac1;
	}

	.people .has-image {
		height: 0;
		padding-bottom: 75%;
	}
}

/* Slideshow */
#full-size-slideshow {
	background-image: none;
	transition: 2s ease all;
	overflow: hidden;
}

.individual-slide {
	opacity: 0;
	transition: 2s ease all;
}

.individual-slide.current {
	opacity: 1;
}

.individual-slide.current img {
	transform: scale(1.05);
    transition: transform 7s linear;
}

.individual-slide.current.first {
	z-index: 1;
}

.individual-slide.current.first + .individual-slide {
	z-index: 2;
}

/* Misc */
.showcase-grid,
.projects-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	/*background: #779ac1;*/
	/*background: #192f47;*/
	width: 100%;
	grid-gap: 4px;
}

.showcase-grid.has-child-hovered-over .grid-item a:before {
	opacity: .4;
}

.showcase-grid .grid-item:before {
	content: '\f061';
	font-family: fontawesome;
	position: absolute;
	right: 0;
	top: 0;
	font-size: 3rem;
	background: #254269;
	padding: .25em;
	color: white;
	z-index: 99999;
  }

  @media (min-width: 769px) {
	.showcase-grid .grid-item:first-child,
	.showcase-grid .grid-item:first-child a {
		border-top-left-radius: 10px;
	}
	.showcase-grid .grid-item.grid-item.emphasised-1,
	.showcase-grid .grid-item.grid-item.emphasised-1 a,
	.showcase-grid .grid-item.grid-item.emphasised-1 a .grid-caption {
		border-bottom-left-radius: 10px;
	}
	.showcase-grid .grid-item:last-child,
	.showcase-grid .grid-item:last-child a,
	.showcase-grid .grid-item:last-child a .grid-caption {
		border-bottom-right-radius: 10px;
	}
	.showcase-grid .grid-item:nth-child(4),
	.showcase-grid .grid-item:nth-child(4):before,
	.showcase-grid .grid-item:nth-child(4) a {
		border-top-right-radius: 10px;
	}
  }

.projects-grid {
	grid-template-columns: 1fr 1fr 1fr;
}

.comparison-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	margin: 3em 0;
}

.comparison-grid-item {
	text-align: center;
	display: flex;
    align-items: center;
	justify-content: center;
	padding: .25em 0;
}

.comparison-grid-item:not(:last-child):not(:nth-last-child(2)):not(:nth-last-child(3)):not(:nth-last-child(4)):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)) {
	border-bottom: 1px solid #ccc;
}

.comparison-grid-item:nth-child(4n+1) {
	text-align: left;
	font-weight: 300;
	font-style: italic;
	display: flex;
    align-items: center;
	justify-content: flex-start;
	grid-column: 1 / span 2;
}

.comparison-grid-item:nth-child(-n+4) {
	line-height: 1.2;
	display: flex;
	align-items: flex-start;
}

.comparison-grid-item.ticked:after {
	content: '\f00c';
	font-family: fontawesome;
	color: #15a669;
	font-size: 2.5rem;
}

.comparison-grid-item.crossed:after {
	content: '\f00d';
	font-family: fontawesome;
	color: #E21919;
	font-size: 2.5rem;
}

.full-width {
	width: 100%;
}

.large-thin-heading {
	font-size: 3.5rem;
	font-weight: 400;
}

.no-border-radius {
	border-radius: 0 !important;
}

.centred {
	text-align: center;
}

body.has-slideshow #main-inner {
	z-index: 5;
}

.border-box {
	box-sizing: border-box;
}

.full-width-sentance {
	width: 100%;
	text-align: center;
	color: white;
	font-weight: 400;
}

.box-spacer {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.box-spacer.aligned {
	flex-flow: row nowrap;
	padding: 1em 0;
}

.box-spacer.aligned.three-children > .aligned-child {
	flex-basis: 33.333%;
	padding: 0 1em;
}

.box-spacer.aligned.three-children > .aligned-child h3 {
	margin: 0;
}

#container .std-img {
	margin-top: 1em;
	width: 100%;
	max-width: 300px;
}

@media (min-width: 769px) {
	.visible-xs {
		display: none;
	}
}

@media (max-width: 768px) {

	.comparison-grid {
		display: none;
	}

	.padding-lr-xs {
		padding: 0 1em;
		box-sizing: border-box;
	}

	.box-spacer.aligned {
		flex-flow: row wrap;
	}

	.box-spacer.aligned.three-children > .aligned-child {
		flex-basis: 100%;
		padding: 0 0 1em 0;
	}

	.showcase-grid,
	.projects-grid {
		grid-template-columns: 1fr;
		grid-gap: 0;
		grid-row-gap: 4px;
	}

	.box-spacer a {
		margin-top: .5em;
	}
}

.grid-item,
.projects-grid-item {
	position: relative;
	display: flex;
	/* added this, removed pos abs from .grid-item a - so a tag is 100% & has a height - pos abs means no height */
}

.grid-item img,
.projects-grid-item img {
	width: 100%;
	height: 0;
	padding-bottom: 66.666%;
	background-size: cover;
	background-position: center;
}

.grid-item a,
.projects-grid-item a {
	/* position: absolute; */
	width: 100%;
	height: 100%;
	overflow: auto;
	overflow-y: hidden; /* added to prevent scrolling inside the boxes themselves */
	/* ensures in safari that child image can't exceed height of parent */
}

.grid-item a:before,
.projects-grid-item:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: #779ac1;
	opacity: .2;
	transition: 0.4s ease all;
}

.projects-grid-item:after {
	content: '\f05a';
	font-family: fontawesome;
	position: absolute;
	top: 0;
	right: 0;
	background: rgba(37, 66, 105, .9);
	font-size: 2em;
	padding: .15em;
	color: white;
}

.projects-grid-item.hovered-over:after,
.projects-grid-item.hovered-over .grid-caption {
	display: none;
}

.projects-grid-item.hovered-over .projects-grid-overview {
	display: block;
}

.projects-grid-item.hovered-over .project-title {
	display: block;
	font-weight: 700;
	color: #254269;
	font-size: 2.4rem;
}

.projects-grid.has-child-hovered-over .projects-grid-item:before {
	opacity: .4;
}

.projects-grid.has-child-hovered-over .projects-grid-item.hovered-over {
	cursor: text;
}

.projects-grid.has-child-hovered-over .projects-grid-item.hovered-over:before {
	/*opacity: 0;*/
	opacity: 0;
}

.showcase-grid .grid-item.hovered-over {
	transition: 0.4s ease all;
}

.showcase-grid .grid-item.hovered-over:before,
.grid-item.hovered-over .grid-caption {
	background: #192f47;
	transition: 0.4s ease all;
}

.grid-item a:hover:before {
	opacity: .8 !important;
}

.grid-caption {
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
	right: 0;
	text-align: center;
	background: rgba(37, 66, 105, .9);
	color: white;
	padding: .5em;
	box-sizing: border-box;
	font-size: 2.2rem;
	z-index: 3;
	transition: 0.4s ease all;
}

@media (min-width: 769px) {
	.grid-item.emphasised-1 {
		grid-column: 1 / span 2;
		grid-row: 2 / span 2;
	}
	/*
	.projects-grid .projects-grid-item:nth-child(3n-1) {
		padding: 10px;
		background: red;
	}
	.projects-grid .projects-grid-item:nth-child(3n+1) {
		padding: 10px;
		background: green;
	}
	*/
}

@media (max-width: 768px) {
	.projects-grid.has-child-hovered-over .projects-grid-item.hovered-over {
		flex-flow: row wrap;
	}
	.projects-grid-item.hovered-over .projects-grid-overview {
		width: 100%;
    	min-height: 150px;
    	display: flex;
    	padding: 1em;
		position: static;
		flex-direction: column;
	}
	.projects-grid-item.hovered-over:after {
		display: block;
		content: '\f056';
	}
	.projects-grid-item.hovered-over .project-title {
		font-size: 3rem;
	}
}

.projects-grid-overview {
	background: white;
	display: block;
	position: absolute;
	top: 1em;
	left: 1em;
	right: 1em;
	bottom: 1em;
	padding: 1em;
	display: none;
	z-index: 4;
}

.fas {
	font-family: fontawesome;
	font-style: normal;
}

.no-text-margins h2 {
	margin-bottom: 0;
}

.no-text-margins h2+p {
	margin-top: 0;
}

.beside-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.beside-wrap {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.elements-central {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content-darkener {
	background: rgba(37, 66, 105, .85);
	display: inline-block;
	padding: 1em 2em;
	color: white;
	box-sizing: border-box;
	border-radius: 10px;
}

.content-darkener.not-opaque {
	background: #254269;
}

.content-darkener a {
	color: white;
}

.content-darkener.white {
	background: white;
	color: rgba(25, 47, 71, 1);
}

.content-darkener.white a {
	color: rgba(25, 47, 71, 1);
}

.std-margin-bottom {
	margin-bottom: 2em;
}

.cta-links-list {
	display: flex;
	flex-flow: row wrap;
	max-width: 600px;
}

.cta-links-list li {
	flex-basis: 50%;
	display: flex;
	align-items: center;
}

.cta-links-list li:not(:first-child):not(:nth-of-type(2)) {
	padding-top: .25em;
}

.cta-links-list li:before {
	font-family: fontawesome;
	content: '\f054';
	padding-right: .5em;
	font-size: .75em;
	color: #779ac1;
}

.centrally-aligning-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

p+.btn.cta {
	display: inline-block;
}

#container .btn.cta.light-bg {
	background-color: rgba(37, 66, 105, 1);
	color: white;
}

.content-darkener .btn.cta {
	background: #779ac1;
}

.content-darkener .btn.cta:hover {
	color: white;
}

.btn.cta.left {
	float: left;
}

.btn.cta.right {
	float: right;
}

.btn {
	background-color: #254269;
	padding: .5em 1em;
	color: white;
	transition: 0.4s ease all;
	border: 2px solid #254269;
	border-radius: 10px;
}

.btn:hover {
	text-decoration: none;
	background-color: rgba(255, 106, 0, 1) !important;
	transition: 0.4s ease all;
	padding: .5em 2em;
	border-color: rgba(255, 106, 0, 1);
	color: white;
}

.btn.cta {
	background-color: rgba(37, 66, 105, 1);
	/* #254269 */
	border-color: rgba(255, 106, 0, 1);
}

.btn.cta.opaque {
	background-color: rgba(37, 66, 105, .9);
	border-color: rgba(255, 106, 0, .9);
}

.btn.cta.opaque:hover {
	background-color: rgba(255, 106, 0, 1);
}

.std-min-width {
	min-width: 500px;
}

ul.standard-list {
	line-height: 1.3;
	list-style-type: disc;
	padding-left: 1em;
}

@media (max-width: 768px) {
	.beside-wrap {
		flex-direction: column;
	}

	.wrap-mobile {
		flex-flow: row wrap;
	}

	.hidden-xs {
		display: none;
	}

	.cta-links-list li {
		margin: .5em 0;
	}

	.content-darkener.titled {
		margin-left: .5em;
		margin-right: .5em;
	}
}

/* SLIDESHOW */
.individual-slide {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
}

.individual-slide img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	object-position: -9999px;
}

.individual-slide figcaption {
	position: absolute;
	bottom: .5em;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, .5);
	padding: 0 .5em;
	text-align: center;
	border-radius: 10px;
}

@media (max-width: 768px) {
	.individual-slide figcaption {
		width: 90%;
	}
}


/* SPECIFIC PAGES */
/* HOMEPAGE */
body#home-page #main-inner {
	min-height: calc(100vh - 100px - 45px);
	padding-top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

body#home-page #main-inner .centrally-aligning-container {
	min-height: calc(100vh - 100px - 45px);
	justify-content: space-evenly;
}

body#home-page h1 {
	margin: 0;
	text-align: center;
}

@media (max-width: 768px) {
	body#home-page #main-inner {
		min-height: calc(100vh - 100px);
	}

	body#home-page #index-ctas {
		display: none;
	}
}

/* DOWNLOADS */
.downloads-lists h2 {
	margin-bottom: 0;
}

.downloads-lists ul li {
	line-height: 1;
}

.downloads-lists ul li:after {
	content: '\f1c1';
	font-family: fontawesome;
	padding-left: .5em;
	color: #779ac1;
}

.downloads-lists ul li:before {
	font-family: fontawesome;
	content: '\f054';
	padding-right: .5em;
	font-size: .75em;
	color: #779ac1;
}

/* O&M PAGE */
#om-demo-rollover-gallery {
	background-position: right;
	background-size: cover;
	position: relative;
	border-radius: 0;
}
#current {
	background: #192f47;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
	text-align: center;
	color: white;
}
#current.active {
	padding: .5em 0;
}

@media (max-width: 768px) {
	#om-demo-rollover-gallery {
		min-height: 250px;
		max-width: 100%;
	}
}

@media (min-width: 769px) {
	#om-demo-rollover-gallery {
		border-top-right-radius: 10px;
	}
}

/* Backgrounds */
#container .about-bg {
	background-image: url(images/projects/surveying/canary-wharf-cooling-towers.jpg);
}

#container .contact-bg {
	background-image: url(images/projects/surveying/survey.jpg);
}

#container .grey-bg {
	background-color: #f8f8f8;
	color: rgba(25, 47, 71, 1);
}