/*
	Theme Name: Firstpay
	Theme URI: https://firstpay.io
	Description: Custom WP theme for firstpay.io
	Version: 0.1
	Author: Creative Direction
	Author URI: https://creativedirection.info
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {	
    font-family: "acumin-variable", sans-serif;
    font-weight:400;
	font-size: 19px;
	letter-spacing: -0.01em;
	line-height:1.4em;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
	height:auto;
	display: block;
	position: relative;
}
a {
	color:#18D385;
	text-decoration:none;
}
a:hover {
/*	color:#444;*/
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #18D385;
}
h1, h2, h3, h4 {
	font-family: "massilia-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 400;
    line-height:1;
    margin-top: 0;
}
h1 {
	font-size: 2.3em;
    letter-spacing: 0;

}

h2 {
	font-size: 1.8em;
	letter-spacing: 0;
}

h3 {
	font-size: 1.2em;
}
.mobile-only, .fp-nav__list > .fp-item.mobile-only {
	display: none;
}
/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

.inner-wide {
	position: relative;
	width: 97%;
	margin: 0 auto;
	max-width:1750px;
}
.inner {
	position: relative;
	width: 95%;
	margin: 0 auto;
	max-width:1680px;
}
.inner-narrow {
	position: relative;
	width: 80%;
	margin: 0 auto;
	max-width: 1400px;
}
.narrow {
	position: relative;
	width: 50%;
	margin: 0 auto;
	max-width:680px;
}

.narrowest {
	position: relative;
	width: 40%;
	margin: 0 auto;
}


/* wrapper */
.wrapper {

}
/* header */
.header {
	background-color: #02211B;
	border-radius: 3px;
	border:1px solid #344D48;
	display: flex;
	align-items: center;
	position: fixed;
	top:30px;
	left:50%;
	transform:translateX(-50%);
	width:80%;
	max-width: 962px;
	padding:10px 10px 10px 15px;
	justify-content: space-between;
	z-index:999;
}
/* logo */
.logo {
	height:35px;
	width:125px;
}
.logo, .logo a {
	display: flex;
	align-items: center;
}
.logo-arrow {
	transition:0.6s all;
}
/* nav */
.nav-container {

}
.nav {
}

/* header button */

  .header-button {
    position: relative;
    font-family: "acumin-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wdth" 90, "wght" 600;
    font-size: 0.8em;
    letter-spacing: 0.02em;
    text-align: left;
    text-transform: uppercase;
    color: #02211B;
    background-color: #C8FF50;
    padding:0.5em 3.8em 0.5em 0.9em;
    display: inline-block;
    border-radius:3px;
    text-decoration: none;
    transition:0.6s background-color;
}
.header-button a {

    color: #02211B;
}
.header-button:hover {
   /*background-color: #f1e7d8; */
}
.header-button::before {
    content:'';
    display: block;
    position: absolute;
    right:5px;
    top:50%;
    transform: translateY(-50%);
    height:32px;
    width:32px;
    background-color: #E9FFBA;
    border-radius:2px;
}
.header-button:hover:before {
    background-color: #02211B;
}

.header-button:after {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-image: url(img/button-arrow.php?col=02211B);
    background-size: contain;
    background-position: center;
    position: absolute;
    right: 0.85em;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s all;
}

.header-button:hover:after {
    background-image: url(img/button-arrow.php?col=C8FF50);
    transform: translateY(-50%) rotate(45deg);
}

/* footer */
.footer {

}
.footer a {
	color:#02211B;
}
.footer-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2em;
	padding-bottom: 2em;
	border-bottom:1px solid #CCD2D1;
	/*margin-bottom: 2em;*/
}

.sig-logo {
	justify-content: flex-start;
}
.footer-logo {
	display: flex;
	align-items: center;
}
.footer-logo img {
	max-width: 160px;
	display: inline-block;
}
.footer-logo span {
	color:#677976;
	font-size:1.7em;
	margin-left: 1em;
}
.footer-social {
	display: flex;
	gap:1em;
}
.footer-social img {
	transition: 0.6s all;
}
.footer-social img:hover {
	filter: invert(1) grayscale(1);
}
.footer-main {
	display: flex;
	justify-content: space-between;
	gap:4em;
	/*padding-bottom: 2em;*/
	border-bottom:1px solid #CCD2D1;
	margin-bottom: 2em;
	padding:2em 4em 2em 0;
}
.sig-logo-txt {
	margin-bottom: 10px;
}
.sig-logo-img {
	height: 71px;
	width: 128px;
}
.footer-nav {
	display: flex;
	justify-content: flex-end;
	gap:4em;
}
.footer-main .menu-title {
	font-family: acumin-variable, sans-serif;
	font-variation-settings: "slnt" 0, "wdth" 100, "wght" 400;
	color:#677976;
}
.footer ul {
	list-style:none;
	padding: 0;
	font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500;
}
.footer ul li {
	
	margin: 0;
	margin-bottom: 0.5em;
}
.footer-bottom {
	color:#677976;
	margin-bottom: 2em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer-policies ul {
	display: flex;
	gap:2em;
	margin: 0;
}



/*------------------------------------*\
    PAGES
\*------------------------------------*/
.wp-block-cover {
	padding:0;
	position: relative;
}

.home-hero .wp-block-cover__inner-container {
	height:100%;
	min-height:100vh;
	display: flex;
	position: relative;
	flex-direction: column;

}

.homepage-hero-content {
	max-width: 720px;
}

.product-type-dark {
	width: 87%;
}

.sectors-content, .product-type-dark .wp-block-columns {
	gap:7%;
}

/*------------------------------------*\
    GUTENBERG STUFF
\*------------------------------------*/
.wp-block-verse {
	position: relative;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-family: "acumin-variable", sans-serif;
	padding-left:30px;
	font-size:0.8em;
}
.wp-block-verse mark {
	text-transform: initial;
}
.wp-block-verse::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;

  width: 16px;
  height: 24px;

  background-color: currentColor; /* matches text color */

  -webkit-mask-image: url(img/bullet.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  mask-image: url(img/bullet.svg);
  mask-repeat: no-repeat;
  mask-position: center;
}

:where(.wp-block-columns) {
	margin-bottom: 0;
}

.wp-block-separator {
	border-top:1px solid;
}

.light-hero, .light-hero .wp-block-columns {
	min-height:649px;
}


/*------------------------------------*\
    BITS N BOBS
\*------------------------------------*/
.has-border-radius, .has-border-radius video {
	border-radius: 10px;
	overflow:hidden;
}


/* Breadcrumbs */
.breadcrumbs {
	font-size:0.65em;
	text-transform: uppercase;
	color:#677976;
	border-bottom:1px solid #CCD2D1;
	padding-bottom:1em;
	margin-bottom:25px;
	display: flex;
	gap:2.5em;
	font-weight:400;
}
.breadcrumbs a {
	color:#677976;
}

.breadcrumbs .breadcrumb__separator {
	font-size: 1.6rem;
	color:#02211B !important;
}

.breadcrumbs .breadcrumb__home {
	margin-left: 2em;
}

.breadcrumbs .breadcrumb__current { 
	color: #02211B !important;
	font-weight:500 !important;
}


.products mark {
	font-weight:400 !important;
}

.products .wp-block-columns:first-of-type {
    gap: 10%;
}

.how-it-helps {
	gap:3em;
}


  .animated-gradient {
    background-size: 300% 100% !important;
    background-position: 100% 50%;
    animation: animate-gradient 8s linear infinite;
  }

  @keyframes animate-gradient {
    from { background-position: 100% 50%; } /* start on the right */
    to   { background-position: 0% 50%; }   /* move to the left */
  }

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (max-width:1100px) {
	.header-button {
		display: none;
	}
}

@media only screen and (max-width:768px) {
	.header {
		width: 90%;
	}
	.inner-wide, .inner, .inner-narrow, .narrow, .narrowest {
		width: 90%;
	}

	.hide-mobile {
		display: none;
	}
	.no-bg-mobile {
		background-image: none !important;
	}
	.mobile-only, .fp-nav__list > .fp-item.mobile-only {
		display: block;
	}

	.mobile-screen {
		background-blend-mode: screen;
	}

	.breadcrumbs {
		gap:1.5em;
	}

	.breadcrumbs .breadcrumb__home {
		margin-left: 0;
	}
	.footer-top {
		flex-direction:column;
		gap:1em;
	}
	.footer-main {
		display: block;
		padding:3em 0;
	}
	.footer-nav {
		display: block;
		margin-top: 50px;
	}
	.footer-logo {
		flex-direction: column;
		gap:1em;
		margin-bottom: 1em;
	}
	.footer-logo img,
	.footer-logo span {
		display: block;
		margin: 0;
	}
	.footer-bottom {
		flex-direction: column;
		text-align-last: left;
		align-items: flex-start;
		gap:1em;
		margin-bottom: 1em;
	}
	#menu-policies {
		flex-direction: column;
		gap:0.6em;
	}
	.how-it-helps {
		flex-direction: column;
		gap:1em;
	}

	.sectors-content, 
	.product-type-dark .wp-block-columns,
	.products .wp-block-columns:first-of-type {
		gap:30px;
	}

}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {

}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#1BD184;
	color:#000;
	text-shadow:none;
}
::-webkit-selection {
	background:#1BD184;
	color:#000;
	text-shadow:none;
}
::-moz-selection {
	background:#1BD184;
	color:#000;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		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) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}