@import url("assets/font/fonts.css");
:root {
	--blue: #18325A;
	--teal: #67C5AD;
	--body-color: #18325A;
}
html, body {
	margin: 0;
	font-family: 'Clarika Geometric';
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	line-height: 1.6em;
	height: 100%;
	width: 100%;
	position: relative;
	color: var(--body-color);
}
@media screen and (max-width: 767px) {
	html, body {
		font-size: 18px;
	}
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
a {
	color: var(--body-colour);
	text-decoration: underline;
	text-underline-offset: 7px;
	transition: 0.2s;
}
a:hover {
	opacity: 0.8
}
a[href$=".jpg"] {
	text-decoration: none;
}
a:hover {}
.btn:focus, .btn:hover, .btn:active, button:focus, button:hover, button:active {
	text-decoration: none;
	outline-style: none;
	box-shadow: none;
}
h1, h2, h3, h4, h5 {
	line-height: 1.2em;
	color: var(--blue);
	font-weight: 700;
	font-style: normal;
}
h1 {
	font-size: 2.5rem;
	line-height: 1.2em;
	margin: 0 0 1rem;
}
h2 {
	font-size: 3rem;
	line-height: 1.2em;
	margin: 0 0 1rem;
	text-transform: uppercase
}
h3 {
	font-size: 1.5rem;
	line-height: 1.2em;
	margin: 1rem 0;
}
img {
	max-width: 100%;
	height: auto;
	margin-bottom: 0;
	display: block;
}
.larger {
	font-size: 1.2rem;
	font-weight: 700
}
.tealbutton {
	background: var(--teal);
	color: #fff;
	font-weight: 700;
	padding: .65rem 1rem .85rem;
	line-height: 1em;
	font-size: .9rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.tealbutton img {
	margin-left: 0.5rem;
}
.bkgradient {
	background: rgb(255, 255, 255);
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 100%);
}
.gradientline {
	background: rgb(23, 98, 153);
	background: linear-gradient(90deg, rgba(23, 98, 153, 1) 0%, rgba(103, 197, 173, 1) 100%);
	height: 3px;
	width: 100%;
}
@media screen and (max-width: 49rem) {
	h1{
		font-size:1.75rem;
	}
	h2 {
		font-size: 2rem;
	}
}
/****************************************************************
CONTAINER
****************************************************************/

header {
	position: relative;
	z-index: 9999
}
nav {
	width: 100%;
}
nav .wrapper {
	position: relative;
	padding: 0 0 0 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4.5rem;
}
.wrapper .logo img {
	width: 260px;
	margin: .75rem 0;
}
.wrapper .nav-links {
	display: inline-flex;
	margin: 0;
}
.nav-links li {
	list-style: none;
	padding-right: 12px;
	padding-left: 12px;
}
.nav-links li a {
	color: var(--body-color);
	text-decoration: none;
	font-weight: 400;
	line-height: 4.5rem;
	border-radius: 0px;
	transition: all 0.3s ease;
	display: block;
}
.nav-links li a:hover, .nav-links li a.current {
	box-shadow: inset 0 -3px 0 0px var(--teal);
	color: var(--teal);
}
.nav-links .mobile-item {
	display: none;
}
.nav-links .drop-menu {
	position: absolute;
	background: #fff;
	width: 180px;
	line-height: 4.5rem;
	top: 90px;
	opacity: 0;
	visibility: hidden;
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-links li:hover .drop-menu {
	transition: all 0.3s ease;
	top: 90px;
	opacity: 1;
	visibility: visible;
}
.drop-menu li a {
	width: 100%;
	display: block;
	padding: 0;
	font-weight: 400;
	border-radius: 0px;
	line-height: 60px;
}
.wrapper .btn {
	width: 40px;
	cursor: pointer;
	display: none;
}
.wrapper .btn.close-btn {
	position: absolute;
	right: 20px;
	top: 20px;
}
@media screen and (min-width: 70rem) {
	.portalLogin {
		background: var(--teal);
		padding-right: 20px;
		padding-left: 20px;
		color: #fff !important;
	}
	.nav-links li:last-of-type {
		padding-right: 0;
	}
}
@media screen and (max-width: 70rem) {
	header.scrolled{
		position:fixed;
		top:0;
		left:0;
		right:0;
		background:#fff;
		transition:all .75s;
	}
	
	.wrapper .btn {
		display: block;
		margin-right: 1rem;
	}
	.wrapper .nav-links {
		position: fixed;
		height: 100vh;
		width: 100%;
		max-width: 100%;
		top: 0;
		left: -100%;
		background: #18325A;
		display: block;
		padding: 50px 10px;
		line-height: 50px;
		overflow-y: auto;
		box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
		transition: all 0.3s ease;
	}
	#menu-btn:checked~.nav-links {
		left: 0%;
	}
	#menu-btn:checked~.btn.menu-btn {
		display: none;
	}
	#close-btn:checked~.btn.menu-btn {
		display: block;
	}
	.nav-links li {
		margin: 15px 10px;
	}
	.nav-links li a {
		padding: 15px 0;
		display: block;
		font-size: 20px;
		line-height: 20px;
		color: #fff;
	}
	.nav-links .drop-menu {
		position: static;
		opacity: 1;
		top: 65px;
		visibility: visible;
		padding-left: 20px;
		width: 100%;
		max-height: 0px;
		overflow: hidden;
		box-shadow: none;
		transition: all 0.3s ease;
		background:none;
	}
	.nav-links li a:hover, .nav-links li a.current {
		box-shadow: unset;
		color: var(--teal);
	}
	#showDrop:checked~.drop-menu, #showMega:checked~.mega-box {
		max-height: 100%;
	}
	.nav-links .desktop-item {
		display: none;
	}
	.nav-links .mobile-item {
		display: block;
		color: #fff;
		font-size: 20px;
		font-weight: 400;
		padding-left: 0px;
		cursor: pointer;
		border-radius: 5px;
		transition: all 0.3s ease;
	}
	.drop-menu li {
		margin: 0;
	}
	.drop-menu li a {
		border-radius: 5px;
		font-size: 18px;
	}
}
nav input {
	display: none;
}
/****************************************************************
CONTAINER
****************************************************************/

.container {
	width: 100%;
	display: flex;
	align-items: center;
	overflow-x: hidden;
}
.containerLeft {
	flex: 0 0 50%;
}
.containerRight {
	flex: 0 0 50%;
}
.content {
	padding: 5rem;
}
.reverseRowDesktop {
	flex-direction: row-reverse
}
@media screen and (max-width: 49rem) {
	.container {
		flex-direction: column;
	}
	.content {
		padding-right: 20px;
		padding-left: 20px;
	}
	.reverseRowDesktop {
		flex-direction: column
	}
	.content {
		padding: 2rem 20px;
	}
}
@media screen and (max-width: 80rem) {
	.content {
		padding: 3rem 20px;
	}
}
/****************************************************************
HOME BANNER
****************************************************************/

.homeBanner {
	height: calc(100vh - 4.5rem);
	min-height: 500px;
	background: #ccc
}
.homeBannerShape {
	background: url("assets/images/mainBanner.svg") no-repeat;
	position: absolute;
	left: 0;
	height: calc(100vh - 4.5rem);
	min-height: 500px;
	z-index: 99;
	width: 100%;
	background-size: auto 100%;
	padding: 2rem;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column
}
.homeBannerShape h1 {
	color: #fff;
	font-size: 3.75rem;
	line-height: 1em;
	text-transform: uppercase;
	max-width: 24rem;
}
@media screen and (max-width: 49rem) {
	.homeBannerShape {
		background-position: top left;
	}
	.homeBannerShape h1 {
		font-size: 2.25rem;
	}
}
@media screen and (max-width: 30rem) {
	.homeBannerShape {
		background-position: top right;
	}
}
.homeBannerShape p {
	color: #fff;
	line-height: 1.25em;
	max-width: 24rem;
	margin-bottom: 2rem;
}
#background-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}
/****************************************************************
HOME POE
****************************************************************/

.homePOE {
	background: rgb(248, 248, 248);
	background: linear-gradient(0deg, rgba(248, 248, 248, 1) 0%, rgba(255, 255, 255, 1) 100%);
	padding-top: 5rem;
	padding-bottom: 5rem;
	text-align: right;
}
@media screen and (max-width: 49rem) {
	.homePOE {
		display: block;
		text-align: left;
	}
	.homePOE {
		padding-top: 3rem;
		padding-bottom: 0rem;
	}
}
.videoContainer {
	position: relative;
	overflow: hidden;
	width: calc(100% - 40px);
	padding-top: 56.25%;
	margin: 2rem 20px;
	z-index:999;
}
@media screen and (max-width: 49rem) {
	.videoContainer {
		margin-bottom: 0;
		margin-top: 1rem;
	}
}
.responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
/****************************************************************
HOME ABOUT
****************************************************************/

.aboutHome {
	margin-top: 5rem;
}
@media screen and (max-width: 49rem) {
	.aboutHome {
		margin-top: 1rem;
		flex-direction:column-reverse;
	}
}
/****************************************************************
HOME ADVANTAGES
****************************************************************/

.homeAdvantages {
	flex-direction: column;
	gap: 0
}
.advantages {
	position: relative
}
.advantagesContentTop {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	background: #fff;
	padding: 3rem 3rem 0 3rem;
	max-width: 1400px;
	width: 100%;
	text-align: center
}
.advantagesContentTop .gradientline {
	margin-top: 3rem;
}
@media screen and (max-width: 70rem) {
	.advantagesContentTop {
		position: static;
		padding: 1.5rem 1.5rem 0 1.5rem;
	}
}
.advantagesContentbottom {
	margin: 0 auto;
	background: #fff;
	padding: 3rem;
	max-width: 1400px;
	width: 100%;
	text-align: center;
	box-shadow: 0 0 24px 4px rgba(0, 0, 0, 0.15)
}
@media screen and (max-width: 49rem) {
	.advantagesContentbottom {
		padding: 1.5rem;
	}
}
.advantagesContentbottom h3 {
	font-weight: 400
}
.advantagesContentbottom h3 span {
	font-weight: 700;
	color: var(--teal)
}
.advantagesIcons {
	display: flex;
	justify-content: space-between;
	margin: 2.5rem 0;
}
.advantagesIcons>div {
	flex: 0 0 13%;
	padding: .5rem;
	text-align: center;
	font-weight: 700;
	line-height: 1.2em
}
@media screen and (max-width: 55rem) {
	.advantagesIcons {
		flex-wrap: wrap;
		justify-content:center;
	}
	.advantagesIcons>div {
		flex: 0 0 25%;
	}
}
@media screen and (max-width: 30rem) {
	.advantagesIcons>div {
		flex: 0 0 50%;
	}
}
.advantagesIcons img {
	display: inline-block;
	margin-bottom: 0.5rem;
	height: 50px;
	width: auto;
}
.advantagesIcons p {
	margin-top: 0;
}
/****************************************************************
HOME ADVANTAGES
****************************************************************/

.homeCTA {
	margin-top: 5rem;
}
.homeCTA p {
	font-size: 3rem;
	line-height: 1.2em;
	margin: 0 0 1rem;
	font-weight: 700;
}
@media screen and (max-width: 49rem) {
	.homeCTA {
		margin-top: 2rem;
	}
	.homeCTA p {
		font-size: 2rem;
		line-height: 1.2em;
	}
}
/****************************************************************
PAGE BANNER
****************************************************************/

.aboutPageBanner, .advantagesPageBanner, .contactPageBanner, .solutionsPageBanner, .marketplacePageBanner {
	min-height: 30rem;
	display: flex;
	align-items: flex-end
}
@media screen and (max-width: 49rem) {
	.aboutPageBanner, .advantagesPageBanner, .contactPageBanner, .solutionsPageBanner, .marketplacePageBanner {
		min-height: auto;
		display: flex;
		align-items: flex-end;
		padding-top: 5rem;
	}
}
.aboutPageBanner {
	background: url("assets/images/banner-about.jpg");
	background-size: cover;
	background-position: top right;
}
@media screen and (max-width: 49rem) {
	.aboutPageBanner {
		background: url("assets/images/banner-about-Mobile.jpg");
		background-size: cover;
		background-position: top right;
	}
}
.advantagesPageBanner {
	background: url("assets/images/banner-advantages.jpg");
	background-size: cover;
	background-position: top right;
}
@media screen and (max-width: 49rem) {
	.advantagesPageBanner {
		background: url("assets/images/banner-advantages-Mobile.jpg");
		background-size: cover;
		background-position: top center;
	}
}
.contactPageBanner {
	background: url("assets/images/contactBanner.jpg");
	background-size: cover;
	background-position: top right;
}
@media screen and (max-width: 49rem) {
	.contactPageBanner {
		background: url("assets/images/contactBanner-Mobile.jpg");
		background-size: cover;
		background-position: top right;
	}
}
.solutionsPageBanner {
	background: url("assets/images/solutionsBanner.jpg");
	background-size: cover;
	background-position: top right;
}
@media screen and (max-width: 49rem) {
	.solutionsPageBanner {
		background: url("assets/images/solutionsBanner_mobile.jpg");
		background-size: cover;
		background-position: top right;
	}
}
.marketplacePageBanner {
	background: url("assets/images/contactBanner.jpg");
	background-size: cover;
	background-position: top right;
}
@media screen and (max-width: 49rem) {
	.marketplacePageBanner {
		background: url("assets/images/contactBanner-Mobile.jpg");
		background-size: cover;
		background-position: top right;
	}
}
.bannerBlueShape {
	background: url("assets/images/inner-blue-overlay.svg");
	background-size: cover;
	background-position: top right;
	max-width: 35rem;
	width: 100%;
	color: #fff;
	padding: 3rem 5rem 3rem 3rem;
}
.bannerBlueShape h1 {
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 2px;
	color: #fff;
}
.bannerBlueShape h2 {
	font-size: 2.3rem;
	line-height: 1em;
	font-weight: 700;
	color: var(--teal);
}
.bannerBlueShape p {
	font-size: 1.7rem;
	line-height: 1.2em;
	font-weight: 600;
	color: #fff;
	margin: 0;
}
@media screen and (max-width: 49rem) {
	.bannerBlueShape {
		max-width: 100%;
		padding: 3rem 5rem 3rem 20px;
	}
}
/****************************************************************
INTRO
****************************************************************/

.introtInnerContainer {
	max-width: 58rem;
	text-align: center;
	margin: 5rem auto;
	padding-right: 20px;
	padding-left: 20px;
	min-height:calc(100vh - 500px);
}
.introtInnerContainer h2 {
	font-size: 2rem;
	line-height: 1.2em;
	font-weight: 700;
	text-transform: unset
}
@media screen and (max-width: 49rem) {
	.introtInnerContainer {
		margin: 3rem auto;
	}
}
/****************************************************************
Contact
****************************************************************/

.contactContainer {
	max-width: 60rem;
	margin: 5rem auto;
	padding-right: 20px;
	padding-left: 20px;
}
.contactInnerContainer {
	box-shadow: 0 4px 25px 4px rgba(0, 0, 0, 0.1);
	display: flex;
}
@media screen and (max-width: 49rem) {
	.contactContainer {
		margin: 2rem auto 3rem;
	}
	.contactInnerContainer {
		display: flex;
		flex-direction: column;
	}
}
.contactInnerContainer .left {
	padding: 3rem;
	flex: 0 0 40%;
}
.contactInnerContainer .left h2 {
	font-size: 1.5rem;
}
.contactInnerContainer .left p {
	display: flex;
	align-items: flex-start
}
.contactInnerContainer .left img {
	width: 20px;
	margin-right: 1rem;
	position: relative;
	top: 8px;
}
.contactInnerContainer .right {
	padding: 3rem;
	flex: 0 0 60%;
}
.contactContainer p {
	margin-top: 0;
}
@media screen and (max-width: 49rem) {
	.contactInnerContainer .right, .contactInnerContainer .left {
		padding: 2rem;
		flex: 1;
	}
	.contactInnerContainer .left {
		padding-bottom: 0;
	}
}
form {
	margin-top: 1.5rem;
}
input.form-field, textarea.form-field {
	border: 1px solid var(--teal);
	box-shadow: none;
	padding: .5rem 1rem .75rem;
	width: 100%;
	border-radius: 0;
	font-size: 18px;
	line-height: 18px;
	font-family: 'Clarika Geometric';
	font-weight: 400;
	font-style: normal;
	color: var(--teal);
	margin-bottom: 0.75rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input.form-field:hover, input.form-field:focus, input.form-field:active, textarea.form-field:hover, textarea.form-field:focus, textarea.form-field:active {
	border: 1px solid var(--teal);
	width: 100%;
	border-radius: 0;
}
input.tealbutton {
	width: 100%;
	border: 0;
	font-size: 18px;
	line-height: 18px;
	padding: 0.85rem 2rem 0.85rem;
	cursor: pointer;
	text-align: center;
	display: block;
}

/****************************************************************
MARKETPLACE
****************************************************************/

.marketplaceContainer {
	max-width: 90rem;
	margin: 4rem auto;
	padding-right: 20px;
	padding-left: 20px;
}
@media screen and (max-width: 49rem) {
	.marketplaceContainer {
		margin: 2rem auto 3rem;
	}
}

/****************************************************************
OUTCOME BANNER
****************************************************************/

.outcomeBanner {
	background: url("assets/images/outcome.jpg");
	background-size: cover;
	background-position: center;
	padding: 7rem 0;
	margin-top: 5rem;
}
@media screen and (max-width: 49rem) {
	.outcomeBanner {
		margin-top: 0rem;
	}
}
.outcomeBannerInner {
	background: rgba(24, 50, 90, 0.9);
	max-width: 50rem;
	padding: 3rem;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1.3em;
	font-weight: 600;
}
.outcomeBannerInner h2 {
	color: #fff;
	text-transform: unset
}
/****************************************************************
ADVANTAGES
****************************************************************/

.advantagesContainer {
	background: url("assets/images/advBk.svg");
	background-size: cover;
	padding: 3.5rem 2rem;
	text-align: center
}
@media screen and (max-width: 60rem) {
	.advantagesContainer {
		padding: 3rem 2rem;
		padding-right: 20px;
		padding-left: 20px;
	}
}
@media screen and (max-width: 30rem) {
	.advantagesContainer {
		padding-right: 0px;
		padding-left: 0px;
	}
}
.advantagesInner {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	justify-content: center;
	gap: 2rem;
}
@media screen and (max-width: 1200px) {
	.advantagesInner {
		display: none
	}
}
.advantagesContainer h2 {
	font-size: 1.8rem;
	font-weight: 400;
	text-transform: unset;
	margin-bottom: 3rem;
}
.advantagesContainer h2 strong {
	color: var(--teal);
	font-weight: 700;
}
.advantagesBlock {
	background: #fff;
	padding: 2rem;
	box-shadow: inset 0 0 0 1px var(--teal);
	text-align: center;
}
.advantagesBlock p:last-child {
	margin-bottom: 0;
}
.advantagesBlock:nth-child(1), .advantagesBlock:nth-child(2), .advantagesBlock:nth-child(3), .advantagesBlock:nth-child(4) {
	grid-column: span 3;
}
.advantagesBlock:nth-child(5), .advantagesBlock:nth-child(6), .advantagesBlock:nth-child(7) {
	grid-column: span 4;
}
.advantagesBlock img {
	height: 72px;
	width: auto;
	display: inline-block
}
.advantagesBlock h3 {
	font-size: 1.25rem;
	margin-bottom: 0rem;
}
/****************************************************************
ADVANTAGES CAROUSEL
****************************************************************/

.advantagesCarousel {
	display: none
}
.owl-carousel .owl-stage {
	display: flex;
}
.owl-carousel .item {
	display: flex;
	flex: 1 0 auto;
	height: 100%;
	padding: 3px;
}
.owl-carousel .advantagesBlock {
	position: relative;
	overflow: hidden;
	/* margin-bottom: 80px; */
	/*This is optional*/
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
@media screen and (max-width: 1200px) {
	.advantagesCarousel {
		display: block;
	}
}
/****************************************************************
ADVANTAGES TESTIMONIAL
****************************************************************/

.testimonial {
	background: url("assets/images/advTestimonial.jpg");
	background-size: cover;
	background-position: top right;
	padding: 6rem 20px;
	min-height: 80vh;
	display: flex;
	align-items: center
}
.testimonial.hometestimonial {
	background: url("assets/images/homeTestimonial.jpg");
	background-size: cover;
	background-position: top right;
}
.quote {
	max-width: 50rem;
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding-right: 7.5rem;
	padding-left: 7.5rem
}
.quote:before {
	content: "";
	width: 5.5rem;
	height: 5.5rem;
	background: url("assets/images/quoteLeft.svg") no-repeat;
	position: absolute;
	background-size: contain;
	top: 0;
	left: 0
}
.quote:after {
	content: "";
	width: 5.5rem;
	height: 5.5rem;
	background: url("assets/images/quoteRight.svg") no-repeat;
	position: absolute;
	background-size: contain;
	top: 0;
	right: 0
}
.quote p {
	font-size: 3rem;
	line-height: 1em;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	margin-top: 0;
}
.quote p.name {
	font-size: 1rem;
	letter-spacing: 2px;
	font-weight: 400;
}
@media screen and (max-width: 49rem) {
	.testimonial {
		padding: 6rem 0;
		min-height: auto;
	}
	.quote {
		padding-right: 20px;
		padding-left: 20px;
		padding-top: 3rem
	}
	.quote:before {
		content: "";
		width: 2.75rem;
		height: 2.75rem;
		background: url("assets/images/quoteLeft.svg") no-repeat;
		position: absolute;
		background-size: contain;
		top: 0;
		left: 0;
		right: 0;
		margin: auto
	}
	.quote:after {
		display: none
	}
	.quote p {
		font-size: 2.25rem;
		line-height: 1em;
		text-transform: uppercase;
		font-weight: 700;
		color: #fff;
		margin-top: 0;
	}
	.quote p.name {
		font-size: 0.75rem;
		letter-spacing: 2px;
		font-weight: 400;
	}
}
/****************************************************************
SOLUTIONS HEXAGON
****************************************************************/

.solutionsHexagon {
	display: flex;
	max-width: 70rem;
	padding-right: 20px;
	padding-left: 20px;
	width: 100%;
	margin: 0 auto;
	align-items: center;
	margin-bottom: 5rem;
}
.hexContent {
	flex: 0 0 30%;
}
.hexImage {
	flex: 0 0 40%;
	padding: 0 3rem;
}
.hexContentInner {
	display: flex;
	flex-direction: column;
	justify-content: space-between
}
.hexContentInner strong {
	font-size: 1.25rem
}
.solutionsHexagon .hexContent:first-of-type {
	text-align: right;
}
.solutionsHexagon .hexContent:first-of-type p:first-child, .solutionsHexagon .hexContent:first-of-type p:last-child {
	margin-right:-13%;
}
.solutionsHexagon .hexContent:last-of-type p:first-child, .solutionsHexagon .hexContent:last-of-type p:last-child {
	margin-left:-13%;
}
.solutionsHexagon .hexContent p {
  transition: transform 0.3s ease-in-out;
}
.solutionsHexagon .hexContent p:hover {
  transform: scale(1.1);
}
.hexImage .hexagonAnimation.active {
	filter: brightness(150%);
}
.hexImage .hexagonAnimation:hover:after{
	display:none;
}
@media screen and (max-width: 49rem) {
	.solutionsHexagon {
		flex-direction:column;
	}
	.hexImage {
		padding: 1rem 0;
		width:100%;
		max-width:500px;
		order:1;
	}
	.hexContent {
		order:2;
	}
	.solutionsHexagon .hexContent:first-of-type {
		text-align: left;
	}
	.solutionsHexagon .hexContent:first-of-type p:first-child, .solutionsHexagon .hexContent:first-of-type p:last-child {
		margin-right:0;
	}
	.solutionsHexagon .hexContent:last-of-type p:first-child, .solutionsHexagon .hexContent:last-of-type p:last-child {
		margin-left:0;
	}
	.solutionsHexagon .hexContent p:hover{
		transform:none;
	}
}
/****************************************************************
PEO LIFECYCLE
****************************************************************/

.poeLifecycle {
	background: url("assets/images/bk.svg");
	background-size: cover;
	background-position: center;
	padding: 6rem 20px;
}
.poeLifecycle h2 {
	max-width: 30rem;
	margin-bottom: 2rem;
}
.poeLifecycleInner {
	max-width: 70rem;
	margin: 0 auto;
}
.poeLifecycleInnerCol {
	display: flex;
}
.poeLifecycleInnerCol .poeContent {
	flex: 0 0 40%;
	padding-right: 5rem
}
.poeLifecycleInnerCol .poeContent p {
	margin-top: 0
}
.poeLifecycleInnerCol .poeList {
	flex: 0 0 30%
}
.poeLifecycleInnerCol .poeList ul {
	margin: 0;
	padding: 0;
	list-style: none
}
.poeLifecycleInnerCol .poeList ul li {
	background: url("assets/images/hex-list.svg") top 8px left 0 no-repeat;
	background-size: 24px;
	padding: 0.25rem 0.5rem 0.25rem 2rem;
	text-transform: uppercase
}
@media screen and (max-width: 49rem) {
	.poeLifecycleInnerCol {
		flex-direction: column
	}
	.poeLifecycleInnerCol .poeContent {
		flex: 1;
		padding-right: 0rem
	}
	.poeLifecycleInnerCol .poeList {
		flex: 1
	}
}
/****************************************************************
HEXAGON
****************************************************************/

.hexAni {
	max-width: 80rem;
	padding: 5rem 20px;
	margin: 0 auto;
	justify-content:space-between;
}
.hexAni h2 {
	max-width: 30rem;
	line-height: 1em;
	margin-bottom: 2rem
}
.hexAni .containerLeft {
	flex: 0 1 490px;
}
.hexAni .containerRight {
	flex: 0 1 840px;
	position:relative;
	z-index:999;
}
.hexagonAnimations {
	aspect-ratio:465/450;
	position: relative;
}
.hexagonAnimation {
	width: 31%;
	height: 37%;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	transition: all 0.3s;
}
.hexagonAnimation:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	transition: all 0.3s;
}
.hexagonAnimation .hexTitle {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	z-index: 1;
	transition: all 0.3s;
	font-size: 1.25rem;
	line-height: 1.2em;
	font-weight: 700;
	color: #fff;
	text-align: center
}
.hexagonAnimation .hexContent {
	display: none;
	font-size: 19px;
	line-height: 23px;
	font-weight: 700;
	left: 50%;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.3s ease 0s;
	width: 70%;
	z-index: 1;
}
.hexagonAnimation .hexContent p {
	color: #fff;
	margin: 0px;
}
.hexagonAnimation:hover:after {
	background: url("assets/images/hexagon-hovers.png");
	background-size: contain;
}
.hexagonAnimation:hover .hexTitle {
	display: none;
}
.hexagonAnimation:hover .hexContent {
	display: block;
}
.hexOnboarding {
	background: url("assets/images/hexagon-onboarding.png") no-repeat;
	background-size: contain;
	left: 17%;
	top: 0
}
.hexHR {
	background: url("assets/images/hexagon-hr.png") no-repeat;
	background-size: contain;
	right: 17%;
	top: 0
}
.hexRegulations {
	background: url("assets/images/hexagon-relations.png") no-repeat;
	background-size: contain;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
}
.hexPayroll {
	background: url("assets/images/hexagon-payroll.png") no-repeat;
	background-size: contain;
	left: 17%;
	bottom: 0
}
.hexTraining {
	background: url("assets/images/hexagon-training.png") no-repeat;
	background-size: contain;
	right: 17%;
	bottom: 0
}
.hexRelations {
	background: url("assets/images/hexagon-relations.png") no-repeat;
	background-size: contain;
	top: 50%;
	right: 0%;
	transform: translate(0%, -50%);
}
.hexCenter {
	width: 36%;
	height: 43%;
	background: url("assets/images/hex-center.png")no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media screen and (max-width: 80rem) {
	.hexAni {
		flex-direction: column;
		gap: 2rem;
	}
	.hexAni .containerLeft{
		flex:1;
		text-align:center;
	}
	.hexAni .containerRight{
		flex:1;
	}	
	.hexAni h2 {
		max-width: 100%;
	}
	.hexAni .hexagonAnimations{
		width:750px;
		max-width:100%;
	}
}
@media screen and (max-width: 49rem) {
	.hexAni .containerRight {
		width: 100%;
	}
	.hexAni .hexCenter{
		display:none;
	}
	.hexAni .hexagonAnimation{
		width:100%;
		height:auto;
		min-height:100px;
		background-size:80px !important;
		background-position:left center;
		transform:none !important;
		position:static;
		margin-top:1.5em;
	}
	.hexAni .hexagonAnimation .hexTitle{
		display:block !important;
		position:static;
		width:100%;
		padding-left:100px;
		transform:none;
		color:inherit;
		text-align:left;
	}
	
	.hexAni .hexagonAnimation:hover:after{
		display:none;
	}
	.hexAni .hexagonAnimation .hexContent{
		display:block;
		position:static;
		width:100%;
		padding-left:100px;
		transform:none;
		color:inherit;
		text-align:left;
		font-weight:normal;
	}
	.hexAni .hexagonAnimation .hexContent p{
		color:inherit;
	}
}
/****************************************************************
SHAPES
****************************************************************/

.shapeRight {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 99;
	width: 15%;
}
.shapeLeft {
	position: fixed;
	top: 85%;
	left: 0;
	z-index: 99;
	width: 15%;
}
/****************************************************************
FOOTER
****************************************************************/

footer .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.9rem;
	padding: 20px;
}



@media screen and (max-width: 49rem) {
	footer .container {
		flex-direction: column
	}
}
footer .spacer {
	flex: 0 0 235px;
	font-size: 0.75rem;
	line-height: 1.3em;
	text-align: left;
}
footer .spacer:last-of-type {
	text-align:right;
}
footer .spacer p {
	margin: .5rem 0 0 0;
}
footer .logo {
	width: 220px;
	margin-top: 0.5rem;
	display: inline-block
}
footer img {
	display: inline-block;
}
@media screen and (max-width: 49rem) {
	footer {
		text-align: center;
	}
	footer .spacer, footer .spacer:last-of-type{
		flex: 1;
		width: 100%;
		text-align: center
	}
	footer .logo {
		margin-top: 2rem
	}
}
footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: Flex
}
footer ul li a {
	height: 90px;
	line-height: 1;
	text-decoration: none;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
}
footer .copyright {
	font-size: 0.75rem;
	border-top: 1px solid #CECECE;
	text-align: center
}
footer .copyright>div {
	padding: 0;
	width: 100%;
}
@media screen and (max-width: 80rem) {
	footer ul {
		display: none;
	}
}
@media screen and (max-width: 49rem) {
	footer .copyright {
		padding: 1rem 0;
		margin-top: 1rem;
	}
	footer .copyright>div {
		padding: 0;
	}
}

/*blog*/
.wp-site-blocks {
	padding:0px;
}




.wp-element-button, .wp-block-button__link{
	background-color:var(--teal);
	color:#fff;
}

.wp-element-button:hover, .wp-block-button__link:hover{
	background-color:var(--teal);
	opacity:0.8;
}